diff --git a/sample-form-client-ui/admin/src/assets/img/bg.jpg b/sample-form-client-ui/admin/src/assets/img/bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..006ea199cede519bcf9cda65d56db4162a6671bb
Binary files /dev/null and b/sample-form-client-ui/admin/src/assets/img/bg.jpg differ
diff --git a/sample-form-client-ui/admin/src/assets/img/btn_kuaisu.png b/sample-form-client-ui/admin/src/assets/img/btn_kuaisu.png
index 73afd6f6c45993fe8dd983582d2ca891e4ffafec..ce0cd801c84ed9bbad386d98b1fd459e066a4f58 100644
Binary files a/sample-form-client-ui/admin/src/assets/img/btn_kuaisu.png and b/sample-form-client-ui/admin/src/assets/img/btn_kuaisu.png differ
diff --git a/sample-form-client-ui/admin/src/assets/img/pic__hot_biaoqian.png b/sample-form-client-ui/admin/src/assets/img/pic__hot_biaoqian.png
index 0c8686050fe8090db7d0df1e2c3a3fc674d0a44c..13c6463ac85aefdbbf91c518d4804fbc142a2156 100644
Binary files a/sample-form-client-ui/admin/src/assets/img/pic__hot_biaoqian.png and b/sample-form-client-ui/admin/src/assets/img/pic__hot_biaoqian.png differ
diff --git a/sample-form-client-ui/admin/src/assets/img/pic__hot_shixiang.png b/sample-form-client-ui/admin/src/assets/img/pic__hot_shixiang.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e4da031e2a01fbdcf772934014d1a69106a534b
Binary files /dev/null and b/sample-form-client-ui/admin/src/assets/img/pic__hot_shixiang.png differ
diff --git a/sample-form-client-ui/admin/src/assets/img/png_title@2x.png b/sample-form-client-ui/admin/src/assets/img/png_title@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..495c045a0158fa436026249a926fc8094d2d58a5
Binary files /dev/null and b/sample-form-client-ui/admin/src/assets/img/png_title@2x.png differ
diff --git a/sample-form-client-ui/admin/src/pages/home/Home.vue b/sample-form-client-ui/admin/src/pages/home/Home.vue
index ff02f944c05763fed5ea68c761354d2b5f2b8d75..01f008cc571626fe52e6ed48f8c37e7602c91f8e 100644
--- a/sample-form-client-ui/admin/src/pages/home/Home.vue
+++ b/sample-form-client-ui/admin/src/pages/home/Home.vue
@@ -23,8 +23,8 @@
</div>
</div>
<!-- 鎼滅储 -->
- <div class="flex flexc aic mt130">
- <img class="mb32" src="../../assets/img/png_title.png" />
+ <div class="flex flexc aic">
+ <img class="mb32" width="700" src="../../assets/img/png_title@2x.png" />
<div class="search-box">
<el-input v-model="search" placeholder="杈撳叆鍏抽敭璇嶆煡璇�"></el-input>
<el-button class="search-btn" @click="handleSearch">
@@ -68,160 +68,103 @@
</div>
<!-- 涓讳綋 -->
<div class="main flex aic">
- <!-- 鎺掕姒� -->
<div class="ranking mr25 flex flexc">
- <div class="flex jcc">
+ <div>
<img
class="ranking-title"
src="../../assets/img/pic__hot_biaoqian.png"
/>
- <div class="tab-box flex aic jcc">
- <div
- class="tab-item flex aic jcc"
- :class="{ active: rankingActive === 1 }"
- @click="changeRanking(1)"
- >
- 鐑棬琛ㄥ崟
- </div>
- <div
- class="tab-item flex aic jcc"
- :class="{ active: rankingActive === 2 }"
- @click="changeRanking(2)"
- >
- 鐑棬浜嬮」
- </div>
- </div>
</div>
<!-- 鐑棬琛ㄥ崟鍒楄〃 -->
- <div
- v-show="rankingActive === 1"
- class="ranking-list flex1 flex flexc mt20"
- >
- <div v-if="homeInfo.datumList && homeInfo.datumList.length">
- <div
- class="ranking-item flex aic"
- v-for="(v, i) in homeInfo.datumList"
- :key="v.id"
- >
- <div class="flex aic jcc item-index">
- <img v-if="i < 3" :src="checkTopImg(i)" />
- <span v-else>{{ i + 1 }}.</span>
- </div>
- <p class="flex1" v-ellipsis>
- {{ v.materialName ? v.materialName : v.materiaFullName }}
- </p>
- </div>
- </div>
- <div v-else class="tac mt20 empty">鏆傛棤鏁版嵁</div>
- </div>
- <!-- 鐑棬浜嬮」 -->
- <div
- v-show="rankingActive === 2"
- class="ranking-list flex1 flex flexc mt20"
- >
- <div v-if="homeInfo.matterList && homeInfo.matterList.length">
+ <div class="ranking-list flex1 flex flexc mt20">
+ <div v-if="datumList && datumList.length">
<div
class="ranking-item flex aic"
- v-for="(v, i) in homeInfo.matterList"
- :key="v.id"
+ v-for="(v, i) in datumList"
+ :key="v"
>
<div class="flex aic jcc item-index">
<img v-if="i < 3" :src="checkTopImg(i)" />
<span v-else>{{ i + 1 }}.</span>
</div>
<p class="flex1" v-ellipsis>
- {{ v.matterName ? v.matterName : v.matterFullName }}
+ {{ v }}
</p>
</div>
</div>
- <div v-else class="tac mt20 empty">鏆傛棤鏁版嵁</div>
+ <div v-else class="tac mt50 empty">鏆傛棤鏁版嵁</div>
</div>
</div>
- <!-- 瀵艰埅 -->
- <div class="nav flex flexc aic">
- <div class="nav-top flex aic jcb mb15">
+ <div class="right flex flexc aic jcb">
+ <div class="right-top flex aic jcb">
<router-link to="/matterList">
<div class="fill-btn flex aic jcc pointer">
<span class="fill-btn-text1">蹇�</span>
<span class="fill-btn-text2">閫�</span>
- <span class="fill-btn-text3">濉�</span>
- <span class="fill-btn-text4">鍗�</span>
+ <span class="fill-btn-text3">鏌�</span>
+ <span class="fill-btn-text4">鐪�</span>
</div>
</router-link>
- <router-link to="/Print">
- <div class="empty-btn flex aic jcc pointer">鎵撳嵃绌虹櫧鏉愭枡</div>
- </router-link>
</div>
- <div class="nav-bottom flex aic jca">
- <router-link to="/guidance">
- <div class="nav-item flex flexc aic">
- <img class="mb10" src="../../assets/img/icon_zhinan.png" />
- <span class="nav-item-name">鍔炰簨鎸囧崡</span>
- </div>
- </router-link>
- <router-link to="/announcement">
- <div class="nav-item flex flexc aic">
- <img class="mb10" src="../../assets/img/icon_tongzhi.png" />
- <span class="nav-item-name">閫氱煡鍏憡</span>
- </div>
- </router-link>
- <router-link to="/suggest">
- <div class="nav-item flex flexc aic">
- <img class="mb10" src="../../assets/img/icon_yijian.png" />
- <span class="nav-item-name">鎰忚寤鸿</span>
- </div>
- </router-link>
- <router-link to="/synopsis">
- <div class="nav-item flex flexc aic">
- <img class="mb10" src="../../assets/img/icon_jianjie.png" />
- <span class="nav-item-name">涓績绠€浠�</span>
- </div>
- </router-link>
+ <!-- 鐑棬浜嬮」 -->
+ <div class="right-bottom flex flexc">
+ <div>
+ <img
+ height="45"
+ class="hot-matter-title"
+ src="../../assets/img/pic__hot_shixiang.png"
+ />
+ </div>
+ <div
+ class="hot-matter-list flex1 mt10"
+ v-if="datumList && datumList.length"
+ >
+ <vue-seamless-scroll
+ :class-option="optionTop"
+ class="seamless-warp"
+ >
+ <div>
+ <div
+ class="hot-matter-item flex aic"
+ v-for="(v, i) in datumList"
+ :key="v.id"
+ >
+ <div class="flex aic jcc item-index">
+ <img v-if="i < 3" :src="checkTopImg(i)" />
+ <span v-else>{{ i + 1 }}.</span>
+ </div>
+ <p class="flex1" v-ellipsis>
+ {{ v }}
+ </p>
+ </div>
+ </div>
+ </vue-seamless-scroll>
+ </div>
+ <div v-else class="tac mt50 empty">鏆傛棤鏁版嵁</div>
</div>
</div>
</div>
<!-- 搴曢儴鏁版嵁灞曠ず -->
<div class="footer flex jcb aic">
- <div class="data-item flex flexc jcb aic">
- <span class="data-name">鍏ラ┗琛ㄥ崟閲�</span>
- <dir class="count-box">
+ <div class="data-item flex1 flex jcc aic">
+ <span class="data-name">鍏ラ┗琛ㄥ崟閲忥細</span>
+ <div class="count-box">
<span class="data-count" v-format="'#,##0'">{{
homeInfo.datumCont
}}</span>
<span>浠�</span>
- </dir>
+ </div>
</div>
<div class="line"></div>
- <div class="data-item flex flexc jcb aic">
- <span class="data-name">鍏ラ┗浜嬮」閲�</span>
- <dir class="count-box">
+ <div class="data-item flex1 flex jcc aic">
+ <span class="data-name">鍏ラ┗浜嬮」閲忥細</span>
+ <div class="count-box">
<span class="data-count" v-format="'#,##0'">{{
homeInfo.matterCont
}}</span>
<span>浠�</span>
- </dir>
- </div>
- <div class="line"></div>
- <div class="data-item flex flexc jcb aic">
- <span class="data-name">鏈湴鎵撳嵃閲�</span>
- <dir class="count-box">
- <span class="data-count" v-format="'#,##0'">{{
- homeInfo.localPrint
- }}</span>
- <span>娆�</span>
- </dir>
- </div>
- <div class="line"></div>
- <div class="data-item flex flexc jcb aic">
- <span class="data-name">鍦ㄧ嚎鎻愪氦閲�</span>
- <dir class="count-box">
- <span class="data-count" v-format="'#,##0'">{{
- homeInfo.onlineSubmit
- }}</span>
- <span>娆�</span>
- </dir>
+ </div>
</div>
- <div class="line"></div>
</div>
</div>
</template>
@@ -237,6 +180,13 @@ export default {
top2: require("../../assets/img/png_no.2.png"),
top3: require("../../assets/img/png_no.3.png"),
homeInfo: {}, // 棣栭〉鏁版嵁
+ datumList: [
+ "澶氫汉鏈夐檺鍏徃鏂板鐢宠鍗�",
+ "鍩庨晣鑱屽伐鍩烘湰鍏昏€佷繚闄╀笌鍩庝埂灞呮皯鍩烘湰鍏昏€佷繚闄�",
+ "钀ヤ笟鎵х収鍙樻洿",
+ "寮傚湴鍏昏€佷繚闄╄浆绉�",
+ "涓汉绀句繚鏄庣粏鎵撳嵃",
+ ],
baseTitle: process.env.VUE_APP_API_BASE_title,
};
},
@@ -250,6 +200,15 @@ export default {
waitTime: 2500, // 鍗曡鍋滈】鏃堕棿(singleHeight,waitTime)
};
},
+ optionTop() {
+ return {
+ direction: 1, // 鍚戝乏婊氬姩
+ step: 0.5, // 鏁板€艰秺澶ч€熷害婊氬姩瓒婂揩
+ limitMoveNum: 4, // 寮€鍚棤缂濇粴鍔ㄧ殑鏁版嵁閲� 璁剧疆(鏁板€�<=椤甸潰灞曠ず鏁版嵁鏉℃暟涓嶆粴)(瓒呰繃椤甸潰灞曠ず鏉℃暟婊氬姩)
+ openWatch: true, // 寮€鍚暟鎹疄鏃剁洃鎺у埛鏂癲om
+ waitTime: 2500, // 鍗曡鍋滈】鏃堕棿(singleHeight,waitTime)
+ };
+ },
},
created() {
this.getHomeInfo();
@@ -351,6 +310,7 @@ export default {
.header {
width: 100%;
padding: 0px 40px;
+ margin-bottom: 100px;
}
.left {
.title {
@@ -434,7 +394,7 @@ export default {
right: 5px;
top: 5px;
}
-/deep/.el-input__inner {
+:deep(.el-input__inner) {
width: 895px;
height: 72px;
padding-right: 200px;
@@ -446,17 +406,11 @@ export default {
margin-top: 40px;
.ranking {
width: 700px;
- height: 410px;
+ height: 495px;
background: linear-gradient(180deg, #fdefed, #fffdf8);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
border-radius: 16px;
border: 3px solid #ffffff;
- position: relative;
- .ranking-title {
- position: absolute;
- left: 3px;
- top: 3px;
- }
.tab-box {
width: 340px;
height: 50px;
@@ -495,60 +449,50 @@ export default {
}
}
}
- .nav {
- width: 700px;
- height: 425px;
+ .right {
+ width: 530px;
+ height: 495px;
.fill-btn {
- width: 427px;
- height: 212px;
+ width: 530px;
+ height: 170px;
background: url("../../assets/img/btn_kuaisu.png") no-repeat;
+ background-size: 100% 100%;
font-size: 50px;
font-weight: 500;
color: #ffffff;
+ border-radius: 16px;
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
- &::before {
- content: "";
- position: absolute;
- width: 200px;
- height: 300%;
- left: -200px;
- transform: rotateZ(-45deg);
- background: linear-gradient(
- to right,
- transparent 1%,
- rgba(255, 255, 255, 0.2) 30%,
- rgba(255, 255, 255, 0.5) 60%,
- transparent 100%
- );
- animation: shadow 6s infinite;
- }
- // &::after {
+ // &::before {
// content: "";
- // display: inline-block;
- // width: 100px;
+ // position: absolute;
+ // width: 200px;
// height: 300%;
- // background-image: linear-gradient(
+ // left: -200px;
+ // transform: rotateZ(-45deg);
+ // background: linear-gradient(
// to right,
- // rgba(255, 255, 255, 0.2),
- // rgba(255, 255, 255, 0.5)
+ // transparent 1%,
+ // rgba(255, 255, 255, 0.2) 30%,
+ // rgba(255, 255, 255, 0.5) 60%,
+ // transparent 100%
// );
- // transform: rotateZ(-45deg);
- // position: absolute;
- // left: -200px;
+ // animation: shadow 6s infinite;
+ // }
+
+ // .fill-btn-text1 {
+ // animation: ring 6s 20ms infinite;
+ // }
+ // .fill-btn-text2 {
+ // animation: ring 6s 60ms infinite;
+ // }
+ // .fill-btn-text3 {
+ // animation: ring 6s 105ms infinite;
+ // }
+ // .fill-btn-text4 {
+ // animation: ring 6s 145ms infinite;
// }
- .fill-btn-text1 {
- animation: ring 6s 20ms infinite;
- }
- .fill-btn-text2 {
- animation: ring 6s 60ms infinite;
- }
- .fill-btn-text3 {
- animation: ring 6s 105ms infinite;
- }
- .fill-btn-text4 {
- animation: ring 6s 145ms infinite;
- }
}
.empty-btn {
width: 284px;
@@ -558,28 +502,43 @@ export default {
font-weight: 500;
color: #ffffff;
}
- .nav-bottom {
- width: 694px;
- height: 190px;
- background: linear-gradient(181deg, #e9f1fe, #ffffff);
+ .right-bottom {
+ width: 530px;
+ height: 304px;
+ background: #fff;
border: 3px solid #ffffff;
border-radius: 16px;
- }
- .nav-item {
- width: 90px;
- .nav-item-name {
- font-size: 22px;
- font-family: Source Han Sans CN;
- color: #333333;
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+ .hot-matter-list {
+ height: 130px;
+ padding: 0px 14px;
+ .seamless-warp {
+ height: 100%;
+ overflow: hidden;
+ }
+ .hot-matter-item {
+ height: 45px;
+ margin-bottom: 4px;
+ line-height: 45px;
+ border-radius: 8px;
+ font-size: 22px;
+ color: var(--main-theme-color1);
+ &:nth-child(2n) {
+ background-color: #f6f9fe;
+ }
+ .item-index {
+ width: 50px;
+ }
+ }
}
}
}
}
.footer {
+ width: 80%;
margin-top: 44px;
- height: 90px;
+ height: 66px;
.data-item {
- min-width: 350px;
height: inherit;
}
.data-name {
diff --git a/sample-form-client-ui/admin/src/pages/showpage/Materials.vue b/sample-form-client-ui/admin/src/pages/showpage/Materials.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7beca68bda2150ec5d8849956f0a650deae91655
--- /dev/null
+++ b/sample-form-client-ui/admin/src/pages/showpage/Materials.vue
@@ -0,0 +1,262 @@
+<template>
+ <!-- 蹇€熷～鍗� -->
+ <div class="matter-page flex flexc">
+ <!-- 澶撮儴 -->
+ <Header>
+ <div slot="title" class="title">蹇€熸煡鐪�</div>
+ </Header>
+ <!-- 涓讳綋 -->
+ <div class="main flex1 flex">
+ <LeftMenus @click="changeDept"></LeftMenus>
+ <div class="right flex1 flex flexc">
+ <!-- 鎼滅储 -->
+ <PageTop>
+ <div slot="count" class="count">
+ 鍏辫<span class="data-count" v-format="'#,##0'">{{
+ matterTotal
+ }}</span
+ >浠朵簨椤�
+ </div>
+ <SearchBox
+ slot="search-right"
+ width="834px"
+ v-model="searchVal"
+ @click="getWriteMatterList"
+ ></SearchBox>
+ </PageTop>
+ <!-- 浜嬮」鍒楄〃 -->
+ <div class="matter-box flex1">
+ <div class="matter-list" v-if="matterList.length">
+ <div
+ class="matter-item"
+ v-for="v in matterList"
+ :key="v.id"
+ @click="handleCheck(v)"
+ >
+ <div class="for-short">{{ v.matterName }}</div>
+ <div class="name">
+ {{ v.matterFullName }}
+ </div>
+ <div
+ class="materials"
+ v-for="(item, index) in v.materals"
+ :key="item.id"
+ >
+ 路{{ item.materiaFullName }}
+ <span v-if="index > 2">{{
+ `绛�${v.materals && v.materals.length}浠芥潗鏂檂
+ }}</span>
+ </div>
+ </div>
+ </div>
+ <el-empty :image-size="200" v-else></el-empty>
+ <!-- 鍒嗛〉 -->
+ <div class="tac">
+ <el-pagination
+ prev-text="涓婁竴椤�"
+ next-text="涓嬩竴椤�"
+ hide-on-single-page
+ layout="prev,next"
+ :total="matterTotal"
+ :current-page="current"
+ :page-size="size"
+ @current-change="changePage"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 鏉愭枡鍒楄〃 -->
+ <MateralsList
+ :matterInfo="matterInfo"
+ :visible.sync="visible"
+ ></MateralsList>
+ </div>
+</template>
+
+<script>
+import Header from "@/components/Header.vue";
+import LeftMenus from "./components/LeftMenus.vue";
+import PageTop from "@/components/PageTop.vue";
+import SearchBox from "@/components/SearchBox.vue";
+import MateralsList from "../../components/MateralsList.vue";
+import { getWriteMatterList, getMaterialsList } from "@/api";
+export default {
+ components: {
+ Header,
+ LeftMenus,
+ PageTop,
+ SearchBox,
+ MateralsList,
+ },
+ data() {
+ return {
+ current: 1,
+ size: 9,
+ matterInfo: {},
+ visible: false,
+ searchVal: "",
+ deptId: "",
+ matterTotal: 0,
+ materals: {},
+ matterList: [],
+ };
+ },
+ created() {
+ this.getWriteMatterList();
+ this.getAllmaterials();
+ },
+ watch: {
+ searchVal(newVal) {
+ if (newVal === "") {
+ this.getWriteMatterList();
+ }
+ },
+ },
+ methods: {
+ // 鑾峰彇浜嬮」鍒楄〃
+ async getWriteMatterList() {
+ let res = await getWriteMatterList({
+ page: this.current,
+ size: this.size,
+ deptId: this.deptId,
+ matterName: this.searchVal,
+ });
+ let { total, data } = res.data.data;
+ data.forEach(async (v) => {
+ v.materals = [];
+ let obj = await this.getMaterialsList(1, -1, v.id);
+ obj.data.forEach((item) => {
+ v.materals.push(item);
+ });
+ });
+ this.matterList = data;
+ this.matterTotal = total;
+ },
+ // 鑾峰彇鎵€鏈夋潗鏂�
+ async getAllmaterials() {
+ this.materals = await this.getMaterialsList(1, 3, null);
+ },
+ // 鑾峰彇鏉愭枡鍒楄〃
+ async getMaterialsList(page = 1, size = 3, matterId) {
+ let res = await getMaterialsList({
+ page,
+ size,
+ deptId: this.deptId,
+ matterId,
+ });
+ let { total, data } = res.data.data;
+ return {
+ total,
+ data,
+ };
+ },
+ // 鍒囨崲閮ㄩ棬
+ changeDept(id) {
+ this.deptId = id;
+ this.getWriteMatterList();
+ this.getAllmaterials();
+ },
+ // 鍒嗛〉
+ changePage(cur) {
+ this.current = cur;
+ this.getWriteMatterList();
+ },
+ handleCheck(row) {
+ this.matterInfo = row;
+ this.visible = true;
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.matter-page {
+ width: 100%;
+ height: 100%;
+ background-color: #f5f5f5;
+}
+.main {
+ width: 100%;
+ height: 100%;
+ margin-top: 10px;
+ .right {
+ height: 100%;
+ padding: 0px 40px;
+ padding-bottom: 40px;
+ .data-count {
+ color: var(--main-assist-color3);
+ }
+ }
+ .matter-box {
+ height: 100%;
+ padding: 30px;
+ background: #ffffff;
+ border-radius: 16px;
+ .matter-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ &::after {
+ content: "";
+ width: 460px;
+ border: 1px solid transparent;
+ }
+ }
+ .matter-item {
+ width: 460px;
+ height: 200px;
+ padding: 10px;
+ margin-bottom: 34px;
+ background: #edf6fe;
+ border-radius: 16px;
+ cursor: pointer;
+ .for-short {
+ margin-bottom: 10px;
+ font-size: 24px;
+ font-weight: 500;
+ color: #333333;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .name {
+ margin-bottom: 10px;
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ color: #888888;
+ line-height: 24px;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ }
+ .materials {
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ color: #333333;
+ line-height: 28px;
+ .count {
+ color: #2878ff;
+ }
+ }
+ }
+ /deep/.btn-prev {
+ margin-right: 80px;
+ }
+ }
+}
+/deep/.btn-prev,
+/deep/ .btn-next {
+ width: 78px;
+ height: 25px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: var(--main-theme-color1);
+ line-height: 28px;
+ span {
+ font-size: 28px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/sample-form-client-ui/admin/src/pages/showpage/MatterList.vue b/sample-form-client-ui/admin/src/pages/showpage/MatterList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a7cc8ca4231939fe30f9f8473e3f6353fca446d6
--- /dev/null
+++ b/sample-form-client-ui/admin/src/pages/showpage/MatterList.vue
@@ -0,0 +1,10 @@
+<template>
+ <div>11</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue b/sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be91bb3eb19e967ed4880ed208197f11bfb24941
--- /dev/null
+++ b/sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue
@@ -0,0 +1,451 @@
+<template>
+ <!-- 鑷姪濉崟椤甸潰 -->
+ <div class="write-page flex flexc">
+ <Header>
+ <div slot="title" class="title">鏍疯〃灞曠ず</div>
+ <div slot="right" class="back-home flex aic" @click="handleBackHome">
+ <img class="mr10" src="../../assets/img/shouye.png" />
+ 杩斿洖棣栭〉
+ </div>
+ </Header>
+ <div class="main flex1 flex">
+ <div class="left">
+ <div
+ class="preview-box"
+ v-for="(v, i) in materailsList"
+ :key="v.id"
+ v-show="active === i"
+ >
+ <img :src="api + v.preViewPath" />
+ <!-- 鎵撳嵃绌虹櫧琛ㄥ崟鎸夐挳 -->
+ <el-button class="print-btn" @click="printEmpty(api + v.preViewPath)">
+ 鎵撳嵃绌虹櫧琛ㄦ牸
+ </el-button>
+ </div>
+ <!-- 渚ц竟鏍忓脊绐� -->
+ <div class="sidebar-box" :class="{ show: !showSidebar }">
+ <!-- 渚ц竟鍐呭 -->
+ <div class="sidebar-main">
+ <div class="title flex jcc aic" @click="showSidebar = false">
+ <span class="mr30"> 鐢宠琛ㄥ～鍐欒繘搴� </span>
+ <i class="el-icon-d-arrow-left"></i>
+ </div>
+ <!-- 鐢宠缂栧彿 -->
+ <div class="apply-num tac" v-ellipsis="'284px'">
+ 鐢宠缂栧彿锛欴X123456789
+ </div>
+ <!-- 浜嬮」鍚嶇О -->
+ <div class="matter-name tac" v-ellipsis="'284px'">
+ {{ matterInfo.matterName }}
+ </div>
+ <!-- 鏉愭枡鍒楄〃 -->
+ <div
+ class="materails-item pdl10"
+ v-ellipsis="'274px'"
+ :class="{ active: i === active }"
+ v-for="(v, i) in materailsList"
+ :key="v.id"
+ @click="active = i"
+ >
+ {{ v.materiaFullName }}
+ </div>
+ </div>
+
+ <!-- 渚ц竟鎸夐挳 -->
+ <div
+ class="sidebar-btn flex jcc aic"
+ v-show="!showSidebar"
+ @click="showSidebar = true"
+ >
+ <div class="sidebar-btn-text flex flexc aic">
+ <span class="sidebar-btn-title"> 鐢宠琛ㄥ～鍐欒褰� </span>
+ <span class="mt15 mb15">
+ {{ active + 1 }}/{{ materailsList.length }}
+ </span>
+ <i class="el-icon-d-arrow-right"></i>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="right-main">
+ <div v-for="(v, i) in materailsList" :key="v.id">
+ <div v-if="active === i">
+ <div class="materails-title tac">
+ <span class="count">绗瑊{ i + 1 }}寮犺〃</span>-
+ <span>{{ v.materiaFullName }}</span>
+ </div>
+ <div class="materails-write">
+ <formBuilder ref="formBuilder" :buildData="v"></formBuilder>
+ </div>
+ <div class="footer-btn flex aic jcc">
+ <el-button v-if="i != 0" @click="active -= 1" class="prev-btn"
+ >涓婁竴寮�</el-button
+ >
+ <el-button
+ :loading="previewLoading"
+ class="preview-btn"
+ @click="handlePreview(v.id, v)"
+ >棰勮</el-button
+ >
+ <el-button
+ :loading="printLoading"
+ class="print-btn"
+ @click="handlePrint(v.id, v)"
+ >鎵撳嵃姝よ〃</el-button
+ >
+ <el-button :loading="submitLoading" class="sub-btn"
+ >鍦ㄧ嚎鎻愪氦</el-button
+ >
+ <el-button
+ :loading="allSubmitLoading"
+ class="sub-btn"
+ v-if="i == materailsList.length - 1"
+ >鍏ㄩ儴鎻愪氦</el-button
+ >
+ <el-button
+ :loading="allPrintLoading"
+ class="print-btn"
+ v-if="i == materailsList.length - 1"
+ >鍏ㄩ儴鎵撳嵃</el-button
+ >
+ <el-button
+ v-if="
+ materailsList.length > 1 && i != materailsList.length - 1
+ "
+ :loading="nextLoading"
+ class="next-btn"
+ @click="active += 1"
+ >涓嬩竴寮�</el-button
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 棰勮寮圭獥 -->
+ <PreviewModal :previewInfo="formInfo" v-show="PreviewModalShow">
+ <el-button
+ :loading="printLoading"
+ class="print-btn"
+ @click="printEmpty(api + formInfo.preview)"
+ >鎵撳嵃姝よ〃</el-button
+ >
+ <el-button :loading="submitLoading" class="sub-btn">鎻愪氦</el-button>
+ <el-button class="next-btn" @click="PreviewModalShow = false"
+ >鍏抽棴</el-button
+ >
+ </PreviewModal>
+ </div>
+</template>
+
+<script>
+import Header from "@/components/Header.vue";
+import formBuilder from "@/components/formDes/formBuilder.vue";
+import { getMaterialsList, mergeFormToDocx } from "@/api";
+import PreviewModal from "@/components/PreviewModal.vue";
+import local from "@/utils/local";
+import { printFn } from "@/utils/print";
+export default {
+ components: {
+ Header,
+ formBuilder,
+ PreviewModal,
+ },
+ data() {
+ return {
+ api: local.getLocal("baseUrl")
+ ? local.getLocal("baseUrl") + "/"
+ : "http://192.168.0.98:11074",
+ matterInfo: this.$route.query,
+ materailsList: [],
+ formConfig: {}, // 琛ㄥ崟閰嶇疆
+ formData: "", // 琛ㄥ崟鏁版嵁
+ active: 0,
+ formInfo: {}, // 褰撳墠琛ㄥ崟鏁版嵁
+ formList: [], // 鎵€鏈夊～鍐欒〃鏍兼暟鎹�
+ previewLoading: false,
+ printLoading: false,
+ submitLoading: false,
+ allSubmitLoading: false,
+ allPrintLoading: false,
+ nextLoading: false,
+ showSidebar: false, // 鍒囨崲渚ц竟寮圭獥鏄剧ず
+ PreviewModalShow: false, // 棰勮寮圭獥
+ };
+ },
+ created() {
+ this.getMaterialsList();
+ },
+
+ methods: {
+ handleBackHome() {
+ this.$router.push("/");
+ },
+
+ // 鑾峰彇鏉愭枡鍒楄〃
+ async getMaterialsList() {
+ let res = await getMaterialsList({
+ page: 1,
+ size: -1,
+ matterId: this.matterInfo.matterId,
+ });
+ let { data } = res.data.data;
+ data.forEach((v) => {
+ v.formContent = JSON.parse(v.formContent);
+ v.form = {};
+ });
+ this.materailsList = data;
+ },
+
+ // 鐢熸垚琛ㄥ崟
+ async createForm(id, formData) {
+ let res = await mergeFormToDocx({
+ id,
+ formContent: formData,
+ });
+ return res.data;
+ },
+
+ // 棰勮
+ async handlePreview(id, row) {
+ let valid = await this.$refs.formBuilder[0].validate();
+ if (valid) {
+ this.previewLoading = true;
+ let formData = JSON.stringify(row.form, null, 4);
+ this.formInfo = { ...row, ...(await this.createForm(id, formData)) };
+ this.previewLoading = false;
+ this.PreviewModalShow = true;
+ }
+ },
+
+ // 鎵撳嵃姝よ〃
+ async handlePrint(id, row) {
+ let valid = await this.$refs.formBuilder[0].validate();
+ if (valid) {
+ let formData = JSON.stringify(row.form, null, 4);
+ let data = await this.createForm(id, formData);
+ printFn({
+ data: this.api + data.preview,
+ });
+ }
+ },
+
+ // 鎵撳嵃绌虹櫧琛ㄦ牸
+ printEmpty(data) {
+ printFn({
+ data,
+ });
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.write-page {
+ width: 100%;
+ height: 100%;
+ background-color: #f5f5f5;
+ .back-home {
+ font-size: 28px;
+ font-family: Source Han Sans CN;
+ color: #ffffff;
+ cursor: pointer;
+ }
+}
+.main {
+ width: 100%;
+ position: relative;
+}
+.left {
+ width: 50%;
+ height: calc(100vh - 100px - 30px);
+ padding-top: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ position: relative;
+ overflow: hidden;
+ .sidebar-box {
+ width: 284px;
+ min-height: 340px;
+ background: #fff;
+ box-shadow: 6px -1px 10px 0px rgba(0, 0, 0, 0.11);
+ border-radius: 0px 38px 8px 0px;
+ position: absolute;
+ top: 130px;
+ left: 0px;
+ transition: all 500ms;
+ .title {
+ height: 42px;
+ font-size: 20px;
+ font-family: Source Han Sans CN;
+ color: #333333;
+ i {
+ font-size: 24px;
+ }
+ }
+ .apply-num {
+ height: 28px;
+ background: #e6eefd;
+ font-size: 18px;
+ line-height: 28px;
+ font-family: Source Han Sans CN;
+ color: var(--main-theme-color1);
+ }
+ .matter-name,
+ .materails-item {
+ height: 42px;
+ line-height: 40px;
+ border-bottom: 1px solid #e8e8e8;
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ color: #333333;
+ }
+ .active {
+ color: var(--main-theme-color1);
+ border-color: var(--main-theme-color1);
+ }
+
+ .sidebar-btn {
+ width: 84px;
+ height: 276px;
+ background: linear-gradient(
+ 90deg,
+ var(--main-theme-color1),
+ var(--main-assist-color1)
+ );
+ box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11);
+ border-radius: 0px 38px 8px 0px;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ color: #ffffff;
+ cursor: pointer;
+ position: absolute;
+ right: -84px;
+ top: 50px;
+ .sidebar-btn-title {
+ writing-mode: vertical-lr;
+ }
+ }
+ }
+ .show {
+ left: -284px;
+ }
+ .preview-box {
+ width: 80%;
+ height: 100%;
+ border-radius: 4px;
+ img {
+ width: 98%;
+ height: 100%;
+ border-radius: 4px;
+ object-fit: contain;
+ }
+ }
+ .print-btn {
+ width: 211px;
+ height: 54px;
+ background: linear-gradient(
+ 90deg,
+ var(--gradient-ramp-theme2),
+ var(--gradient-ramp-assist2)
+ );
+ box-shadow: 0px 6px 12px 1px rgba(253, 100, 79, 0.2);
+ border-radius: 8px;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ color: #ffffff;
+ position: absolute;
+ left: 50%;
+ bottom: 8px;
+ }
+}
+.right {
+ width: 50%;
+ height: calc(100vh - 100px - 30px);
+ padding: 30px;
+ overflow-y: auto;
+ background-color: #efefef;
+ box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.08);
+
+ .right-main {
+ background-color: #fff;
+ border-radius: 4px;
+ padding-bottom: 60px;
+ }
+ .materails-title {
+ padding: 30px 0px;
+ font-size: 28px;
+ color: #333;
+ font-weight: 500;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ .count {
+ color: var(--main-theme-color1);
+ }
+ }
+ .footer-btn {
+ width: calc(50% - 76px);
+ height: 64px;
+ position: absolute;
+ bottom: 30px;
+ right: 46px;
+ background-color: #fff;
+ z-index: 1000;
+ .preview-btn {
+ width: 130px;
+ height: 54px;
+ border: 1px solid var(--main-assist-color4);
+ border-radius: 8px;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ color: var(--main-assist-color4);
+ }
+ }
+
+ .materails-write {
+ border-top: 1px solid #ececec;
+ }
+}
+.prev-btn,
+.next-btn {
+ width: 130px;
+ height: 54px;
+ border: 1px solid var(--main-theme-color1);
+ border-radius: 8px;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ color: var(--main-theme-color1);
+}
+.print-btn {
+ width: 130px;
+ height: 54px;
+ background: linear-gradient(
+ -90deg,
+ var(--gradient-ramp-assist3),
+ var(--gradient-ramp-theme3)
+ );
+ box-shadow: 0px 6px 12px 1px rgba(88, 193, 158, 0.2);
+ border-radius: 8px;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ color: #ffffff;
+}
+.sub-btn {
+ width: 130px;
+ height: 54px;
+ background: linear-gradient(
+ 90deg,
+ var(--main-theme-color1),
+ var(--main-assist-color1)
+ );
+ box-shadow: 3px 5px 12px 1px rgba(11, 91, 233, 0.2);
+ border-radius: 8px;
+ font-size: 24px;
+ font-family: Source Han Sans CN;
+ color: #ffffff;
+}
+</style>
\ No newline at end of file
diff --git a/sample-form-client-ui/admin/src/pages/showpage/components/LeftMenus.vue b/sample-form-client-ui/admin/src/pages/showpage/components/LeftMenus.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ee1121cbfe7c4eb81ddfadc25c4c9429f6586eab
--- /dev/null
+++ b/sample-form-client-ui/admin/src/pages/showpage/components/LeftMenus.vue
@@ -0,0 +1,89 @@
+<template>
+ <div class="left-menus">
+ <div class="dept-list">
+ <div
+ class="dept-item"
+ :class="{ active: isActive === i }"
+ v-for="(v, i) in deptList"
+ :key="v.id"
+ @click="changeDept(v.id, i)"
+ >
+ <div class="dept-name">
+ {{ v.deptAbb ? v.deptAbb : v.name }}
+ </div>
+ <div class="line"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getdeptList } from "@/api";
+export default {
+ data() {
+ return {
+ deptList: [],
+ isActive: 0,
+ };
+ },
+ created() {
+ this.getdeptList();
+ },
+ methods: {
+ // 鑾峰彇閮ㄩ棬鍒楄〃
+ async getdeptList() {
+ let obj = { id: "", name: "鍏ㄩ儴閮ㄩ棬" };
+ let res = await getdeptList();
+ let { data } = res.data.data;
+ this.deptList = [obj, ...data];
+ },
+ changeDept(id, index) {
+ this.isActive = index;
+ this.$emit("click", id);
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.left-menus {
+ width: 300px;
+ height: 100%;
+ background: #ffffff;
+ box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.07);
+}
+.dept-list {
+ width: 100%;
+ height: calc(100vh - 100px);
+ padding: 15px 0px;
+ overflow-y: auto;
+}
+.dept-item {
+ height: 70px;
+ text-align: center;
+ font-size: 26px;
+ line-height: 70px;
+ color: #333333;
+ cursor: pointer;
+ .dept-name {
+ padding: 0px 6px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+.line {
+ height: 1px;
+ width: 100%;
+ background-image: linear-gradient(to right, #fff, #ccc 50%, #fff);
+}
+.active {
+ background: linear-gradient(
+ 270deg,
+ var(--main-assist-color1),
+ var(--main-theme-color1)
+ );
+ font-family: Source Han Sans CN;
+ color: #ffffff;
+}
+</style>
\ No newline at end of file
diff --git a/sample-form-client-ui/admin/src/router/index.js b/sample-form-client-ui/admin/src/router/index.js
index 5c124c6b8100c4f645251d81893a65a81724798c..e996858ea219b2f66189cf6bdeeeb20e4536c161 100644
--- a/sample-form-client-ui/admin/src/router/index.js
+++ b/sample-form-client-ui/admin/src/router/index.js
@@ -19,65 +19,26 @@ const routes = [
path: '/home',
component: () => import('@/pages/home/Home.vue'),
},
- // 鍔炰簨鎸囧崡
- {
- path: '/guidance',
- component: () => import('@/pages/guidance/Guidance.vue'),
- },
- // 鍔炰簨鎸囧崡璇︽儏
- {
- path: '/guidancedetails',
- component: () => import('@/pages/guidance/GuidanceDetails.vue'),
- },
- // 閫氱煡鍏憡
- {
- path: '/announcement',
- component: () => import('@/pages/announcement/Announcement.vue'),
- },
- // 鍏憡璇︽儏
- {
- path: '/announcementdetails',
- component: () => import('@/pages/announcement/AnnouncementDetails.vue'),
- },
- // 鎰忚寤鸿
- {
- path: '/suggest',
- component: () => import('@/pages/suggest/Suggest.vue'),
- },
- // 鎰忚寤鸿璇︽儏
- {
- path: '/suggestdetails',
- component: () => import('@/pages/suggest/SuggestDetails.vue'),
- },
- // 鎴戣寤鸿
- {
- path: '/propound',
- component: () => import('@/pages/suggest/Propound.vue'),
- },
- // 涓績绠€浠�
- {
- path: '/synopsis',
- component: () => import('@/pages/synopsis/Synopsis.vue'),
- },
- // 蹇€熷～鍗�
+
+ // 蹇€熸煡鐪�
{
path: '/matterList',
- component: () => import('@/pages/write/matterList.vue'),
- },
- // 鎵撳嵃绌虹櫧鏉愭枡
- {
- path: '/Print',
- component: () => import('@/pages/Print/PrintEmptyMaterals.vue'),
+ component: () => import('@/pages/showpage/Materials.vue'),
},
// 蹇€熸悳绱�
{
path: '/searchpage',
component: () => import('@/pages/searchpage/SearchPage.vue'),
},
- // 鑷姪濉崟
+ // 浜嬮」鍒楄〃
+ {
+ path: '/matterlist',
+ component: () => import('@/pages/showpage/MatterList.vue'),
+ },
+ // 鏉愭枡灞曠ず
{
- path: '/writepage',
- component: () => import('@/pages/write/WritePage.vue'),
+ path: '/showmaterials',
+ component: () => import('@/pages/showpage/ShowMaterials.vue'),
},
]