feat:修改终端首页

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, // 开启数据实时监控刷新dom
+        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 {

sample-form-client-ui/admin/src/pages/showpage/Materials.vue

+<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

sample-form-client-ui/admin/src/pages/showpage/MatterList.vue

+<template>
+  <div>11</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file

sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue

+<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'">
+              申请编号：DX123456789
+            </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

sample-form-client-ui/admin/src/pages/showpage/components/LeftMenus.vue

+<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

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'),
   },
 
 ]