优化企业效益检测评估：新增企业分类过滤和分页优化

src/views/benefit/index.vue

@@ -43,6 +43,17 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="企业分类">
+          <el-select v-model="form.typeNum" style="width: 100%" clearable>
+            <el-option
+              v-for="item in enterTypeList"
+              :key="item.number"
+              :value="item.number"
+              :label="keyToChineseEtype(item.number)"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="年度" style="margin-bottom: 0">
           <el-select v-model="form.year" style="width: 100%">
             <el-option
@@ -89,11 +100,7 @@
         </el-form-item>
       </el-form>
     </div>
-    <el-table
-      :data="paginatedData"
-      border
-      style="width: 100%; margin-top: 30px"
-    >
+    <el-table :data="tableData" border style="width: 100%; margin-top: 30px">
       <el-table-column
         prop="enterpriseName"
         label="企业名称"
@@ -137,7 +144,7 @@
         label="企业运营评估结果参考"
       ></el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       @current-change="handlePageChange"
       :current-page="currentPage"
       :page-size="pageSize"
@@ -147,7 +154,14 @@
       layout="total, prev, pager, next, jumper"
       style="float: right; margin-top: 20px; margin-bottom: 20px"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="form.pageNum"
+      :limit.sync="form.pageSize"
+      @pagination="getList"
+    />
     <!-- <div ref="chart" :style="{ height: height, width: width }"></div> -->
   </div>
 </template>
@@ -157,6 +171,7 @@ import { listAllEnterprise } from "@/api/enterprise/enterprise";
 import { listAllIndustry } from "@/api/industry/industry";
 import { getIndexData } from "@/api/home";
 import { benefitList } from "@/api/benefit";
+import { listEtypeAll } from "@/api/etype/etype";
 export default {
   props: {
     className: {
@@ -181,7 +196,10 @@ export default {
       mode: "trendAnalysis",
       currentPage: 1,
       pageSize: 5,
+      total: 0,
       form: {
+        pageNum: 1,
+        pageSize: 10,
         enterpriseName: null,
         year: null,
         code: null,
@@ -217,21 +235,26 @@ export default {
         },
       ],
       tableData: [],
+      enterTypeList: []
     };
   },
   computed: {
-    totalItems() {
-      return this.tableData.length;
-    },
-    paginatedData() {
-      const start = (this.currentPage - 1) * this.pageSize;
-      return this.tableData.slice(start, start + this.pageSize);
-    },
+    // totalItems() {
+    //   return this.tableData.length;
+    // },
+    // paginatedData() {
+    //   const start = (this.currentPage - 1) * this.pageSize;
+    //   return this.tableData.slice(start, start + this.pageSize);
+    // },
   },
   mounted() {
     this.init();
   },
   methods: {
+    keyToChineseEtype(num) {
+      const item = this.enterTypeList.find((element) => element.number === num);
+      return item ? item.name : null;
+    },
     handlePageChange(newPage) {
       this.currentPage = newPage;
     },
@@ -312,23 +335,31 @@ export default {
         .catch((error) => {
           console.error("Error fetching data:", error);
         });
+      await listEtypeAll().then((res) => {
+        this.enterTypeList = res;
+      })
       // 第一次的时候初始化from
       loading.close();
       this.resetForm();
     },
     submit() {
+      this.form.pageNum = 1;
+      this.getList();
+    },
+    getList() {
       const load = this.$loading({
-            lock: true,
-            text: "Loading",
-            spinner: "el-icon-loading",
-            background: "rgba(0, 0, 0, 0.7)",
-          });
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
       benefitList(this.form)
         .then((res) => {
           load.close();
           if (res && res?.rows) {
             this.mode = this.form.mode;
             this.tableData = res.rows;
+            this.total = res.total;
           }
         })
         .catch((error) => {
@@ -343,6 +374,8 @@ export default {
       );
       // 重置form表单
       this.form = {
+        pageNum: 1,
+        pageSize: 10,
         year: this.selectedYearArray[0].key,
         enterpriseName: null,
         code: this.selectedIndustryArray[0].key,