feat:修改终端首页

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