perf: 优化页面

sample-form-client-ui/admin/src/components/YPagination.vue

 <template>
-  <div class="page-turner" v-if="!hideOnSinglePage">
+  <div class="page-turner" v-if="!showHideOnSinglePage">
     <div
       :class="['btn-prev', { disabled: current == 1 }]"
       @click="changePage(-1)"
@@ -53,10 +53,14 @@ export default {
   data() {
     return {};
   },
+
   computed: {
     sizeTotal() {
       return Math.ceil(this.total / this.size);
     },
+    showHideOnSinglePage() {
+      return !!this.hideOnSinglePage;
+    },
   },
   methods: {
     changePage(cur) {

sample-form-client-ui/admin/src/pages/home/Home.vue

@@ -365,6 +365,8 @@ export default {
     },
     // 查看材料列表
     checkMatter(row) {
+      let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
+      this.SET_operTime(time);
       this.$router.push({
         path: "/matterify",
         query: {

sample-form-client-ui/admin/src/pages/searchpage/SearchPage.vue

@@ -84,17 +84,14 @@
         <YEmpty v-else width="200" text="暂无数据"></YEmpty>
         <!-- 分页 -->
         <div class="tac">
-          <el-pagination
-            prev-text="上一页"
-            next-text="下一页"
-            layout="prev,next"
+          <YPagination
             :total="total"
             hide-on-single-page
-            :current-page="current"
-            :page-size="size"
-            @current-change="changePage"
+            :current="current"
+            :size="size"
+            @change="changePage"
           >
-          </el-pagination>
+          </YPagination>
         </div>
       </div>
     </div>
@@ -112,6 +109,7 @@ import PageTop from "@/components/PageTop.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import MateralsList from "@/components/MateralsList.vue";
 import YEmpty from "@/components/YEmpty.vue";
+import YPagination from "@/components/YPagination.vue";
 import { getSampleformMatterList, getMatterForFlownum } from "@/api";
 import { mapMutations } from "vuex";
 export default {
@@ -121,6 +119,7 @@ export default {
     SearchBox,
     MateralsList,
     YEmpty,
+    YPagination,
   },
   data() {
     return {
@@ -199,8 +198,12 @@ export default {
     handleCheck(row) {
       let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
       this.SET_operTime(time);
-      this.matterInfo = row;
-      this.visible = true;
+      this.$router.push({
+        path: "/matterify",
+        query: {
+          matterId: row.id,
+        },
+      });
     },
     // 重置搜索
     // handleClear() {
@@ -322,19 +325,4 @@ export default {
     }
   }
 }
-: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-color);
-  line-height: 28px;
-  span {
-    font-size: 28px;
-  }
-}
 </style>

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

@@ -6,7 +6,7 @@
     <div class="main flex1 flex flexc">
       <PageTop>
         <div slot="count" class="count">
-          共计<span class="data-count">{{ total + 1 }}</span
+          共计<span class="data-count">{{ total }}</span
           >个文件夹
         </div>
         <SearchBox
@@ -18,13 +18,13 @@
         ></SearchBox>
       </PageTop>
       <!-- 事项文件夹 -->
-      <div class="folder-box flex1">
-        <div class="folder-list">
-          <div class="folder-item" @click="handleCheck({})">
+      <div class="folder-box">
+        <div class="folder-list" v-if="folderList.length || !isSearch">
+          <div class="folder-item" @click="handleCheck({})" v-if="!isSearch">
             <div class="folder-img-box flex aic jcc">
-              <i class="iconfont icon-folder"></i>
+              <i class="el-icon-more"></i>
             </div>
-            <p class="folder-name tac">所有</p>
+            <p class="folder-name tac">全部</p>
           </div>
           <div
             class="folder-item"
@@ -40,20 +40,17 @@
             </p>
           </div>
         </div>
-        <!-- <YEmpty v-else width="200" text="暂无数据"></YEmpty> -->
+        <YEmpty v-else width="200" text="暂无数据"></YEmpty>
         <!-- 分页 -->
-        <div class="tac">
-          <el-pagination
-            prev-text="上一页"
-            next-text="下一页"
-            layout="prev,next"
+        <div class="pagination">
+          <YPagination
             :total="total"
-            hide-on-single-page
-            :current-page="current"
-            :page-size="size"
-            @current-change="changePage"
+            :hideOnSinglePage="true"
+            :current="current"
+            :size="size"
+            @change="changePage"
           >
-          </el-pagination>
+          </YPagination>
         </div>
       </div>
     </div>
@@ -71,12 +68,12 @@ import PageTop from "@/components/PageTop.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import MateralsList from "@/components/MateralsList.vue";
 import YEmpty from "@/components/YEmpty.vue";
+import YPagination from "@/components/YPagination.vue";
 import {
   getMatterFolderList,
   getMaterialsList,
   getSampleformMatterInfo,
 } from "@/api";
-import { mapMutations } from "vuex";
 export default {
   components: {
     Header,
@@ -84,14 +81,16 @@ export default {
     SearchBox,
     MateralsList,
     YEmpty,
+    YPagination,
   },
   data() {
     return {
       row: 4,
       searchVal: "",
+      isSearch: false,
       total: 0,
       current: 1,
-      size: 16,
+      size: 18,
       matterInfo: {},
       folderList: [],
       visible: false,
@@ -105,11 +104,11 @@ export default {
       if (newVal === "") {
         this.current = 1;
         this.getMatterFolderList();
+        this.isSearch = false;
       }
     },
   },
   methods: {
-    ...mapMutations(["SET_operTime"]),
     // 获取事项分类
     async getMatterFolderList() {
       let res = await getMatterFolderList({
@@ -129,6 +128,9 @@ export default {
     handleSearch() {
       this.current = 1;
       this.getMatterFolderList();
+      if (this.searchVal) {
+        this.isSearch = true;
+      }
     },
     // 分页
     changePage(cur) {
@@ -151,8 +153,6 @@ export default {
         if (result.data.code == 1) {
           data.matterDatumList = result.data.data.data;
           this.matterInfo = data;
-          let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
-          this.SET_operTime(time);
           this.matterInfo = data;
           this.visible = true;
         }
@@ -227,19 +227,7 @@ export default {
     }
   }
 }
-: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-color);
-  line-height: 28px;
-  span {
-    font-size: 28px;
-  }
+.pagination {
+  margin-top: 50px;
 }
 </style>

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

@@ -59,17 +59,14 @@
           <YEmpty v-else width="200" text="暂无数据"></YEmpty>
           <!-- 分页 -->
           <div class="tac">
-            <el-pagination
-              prev-text="上一页"
-              next-text="下一页"
-              hide-on-single-page
-              layout="prev,next"
+            <YPagination
               :total="matterTotal"
-              :current-page="current"
-              :page-size="size"
-              @current-change="changePage"
+              hideOnSinglePage
+              :current="current"
+              :size="size"
+              @change="changePage"
             >
-            </el-pagination>
+            </YPagination>
           </div>
         </div>
       </div>
@@ -158,10 +155,9 @@ export default {
       this.getDeviceMatterList();
     },
     handleCheck(row) {
-      // let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
-      // this.SET_operTime(time);
-      // this.matterInfo = row;
-      // this.visible = true;
+      let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
+      this.SET_operTime(time);
+
       this.$router.push({
         path: "/matterify",
         query: {
@@ -292,24 +288,6 @@ export default {
         }
       }
     }
-
-    :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-color);
-  line-height: 28px;
-
-  span {
-    font-size: 28px;
   }
 }
 </style>