修复检验方法性能评审记录组件卡死问题

src/views/business/testMethod/review.vue

@@ -15,13 +15,11 @@
         @click="goRemove"
         >删除</el-button
       >
-      <!-- <el-button type="primary" icon="el-icon-delete">导出</el-button>
-            <el-button type="primary" icon="el-icon-delete">导入</el-button> -->
     </div>
     <el-table
       ref="reviewTable"
       :key="tableKey"
-      :data="statData"
+      :data="currentPageData"
       border
       stripe
       highlight-current-row
@@ -31,7 +29,12 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" />
-      <el-table-column type="index" label="序号" width="55" prop="date" />
+      <!-- 修改序号列，显示全局序号 -->
+      <el-table-column label="序号" width="55">
+        <template v-slot="{ $index }">
+          {{ (pagination.currentPage - 1) * pagination.pageSize + $index + 1 }}
+        </template>
+      </el-table-column>
       <el-table-column label="检验方法" width="300">
         <template v-slot="{ row }">
           <span style="margin-left: 10px">{{
@@ -39,31 +42,7 @@
           }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column
-                label="项目与方法"
-                width="140"
-            >
-                <template v-slot="{ row }">
-                    <span style="margin-left: 10px">{{ getProjectAndMethod(row.xiangMuFangFa) }}</span>
-                </template>
-            </el-table-column> -->
       <el-table-column prop="xiangMuMingCheng" label="检测项目" width="300" />
-      <!-- 12.30 -->
-      <!-- <el-table-column
-                prop="sheBeiMingCheng"
-                label="设备名称"
-                width="220"
-            />
-            <el-table-column
-                prop="sheBeiBianHao"
-                label="设备编号"
-                width="140"
-            />
-            <el-table-column
-                prop="faXianWenTi"
-                label="发现的问题"
-                width="220"
-            /> -->
       <el-table-column label="操作">
         <template v-slot="{ row, $index }">
           <span v-if="btnShsow" class="spanto" @click="handleEdit(row, $index)"
@@ -73,22 +52,23 @@
           <span class="spanto" @click="handleSelect(row)"
             ><i class="el-icon-view" />查阅</span
           >
-          <!-- <el-button
-                        v-if="btnShsow"
-                        size="mini"
-                        type="primary"
-                        icon="el-icon-edit-outline"
-                        @click="handleEdit(row,$index)"
-                    >编辑</el-button>
-                    <el-button
-                        size="mini"
-                        icon="el-icon-view"
-                        type="primary"
-                        @click="handleSelect(row)"
-                    >查阅</el-button> -->
         </template>
       </el-table-column>
     </el-table>
+    
+    <!-- 分页控件 -->
+    <el-pagination
+      v-if="pagination.total > 0"
+      :current-page="pagination.currentPage"
+      :page-sizes="[5, 10, 20]"
+      :page-size="pagination.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      style="margin-top: 15px; text-align: left;"
+    />
+    
     <reviewDialog
       v-if="dialogFormVisibles"
       :visidial="dialogFormVisibles"
@@ -98,8 +78,6 @@
       @getData="getData"
       @getcolse="getcolse"
     />
-
-    <!-- :select_edit-change="selectEditchange"-->
   </div>
 </template>
 
@@ -146,10 +124,22 @@ export default {
       tableKey: 0,
       multipleSelection: [],
       selectEditData: '',
+      // 修改分页配置
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
       configList: []
     }
   },
   computed: {
+    // 计算当前页数据
+    currentPageData() {
+      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
+      const end = start + this.pagination.pageSize
+      return this.statData.slice(start, end)
+    },
     getJianYanFangFaName() {
       return (jianYanFangFa) => {
         if (!this.jianYanFangFaNameCache[jianYanFangFa]) {
@@ -173,6 +163,7 @@ export default {
         if (val.lieBiaoShuJu) {
           if (this.isFirst) {
             this.statData = JSON.parse(val.lieBiaoShuJu)
+            this.pagination.total = this.statData.length // 更新总条数
             this.isFirst = false
           }
         }
@@ -210,6 +201,7 @@ export default {
           pingShenJieLun: item.jieLun,
           faXianDeWenTi: item.faXianWenTi
         }))
+        this.pagination.total = val.length // 更新总条数
         this.$emit('change-data', 'lieBiaoShuJu', JSON.stringify(val))
         this.$emit('change-data', 'jyffxnpsjlzb', t)
       },
@@ -218,16 +210,28 @@ export default {
   },
   created() {
     // 初始化时加载所有需要的数据
-    this.statData.forEach((row) => {
-      this.loadJianYanFangFaName(row.jianYanFangFa)
-      this.loadProjectAndMethodName(row.xiangMuFangFa)
-    })
+    if (this.statData && this.statData.length > 0) {
+      this.statData.forEach((row) => {
+        this.loadJianYanFangFaName(row.jianYanFangFa)
+        this.loadProjectAndMethodName(row.xiangMuFangFa)
+      })
+    }
   },
   methods: {
+    // 每页条数改变
+    handleSizeChange(val) {
+      this.pagination.pageSize = val
+      this.pagination.currentPage = 1 // 重置到第一页
+      this.refreshTable()
+    },
+    // 当前页改变
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this.refreshTable()
+    },
     async loadJianYanFangFaName(jianYanFangFa) {
       try {
         const methodName = await this.jian(jianYanFangFa)
-
         this.jianYanFangFaNameCache[jianYanFangFa] = methodName
         this.refreshTable()
       } catch (error) {
@@ -268,10 +272,15 @@ export default {
       }
       this.loadJianYanFangFaName(obj.jianYanFangFa)
       this.loadProjectAndMethodName(obj.xiangMuFangFa)
+      
+      // 添加或修改数据后，可能需要调整分页
+      const totalPages = Math.ceil(this.statData.length / this.pagination.pageSize)
+      if (this.pagination.currentPage > totalPages) {
+        this.pagination.currentPage = totalPages
+      }
     },
     async jian(val) {
       try {
-        // const sql1 = `select * FROM t_bzffglb WHERE id_='${val}'`
         const response = await this.$common.request('query', {
           key: 'getBzffglbById',
           params: [val]
@@ -287,7 +296,6 @@ export default {
     },
     async xiang(val) {
       try {
-        // const sql2 = `select * FROM neng_li_fan_wei_ WHERE id_='${val}'`
         const response = await this.$common.request('query', {
           key: 'getNlfwbById',
           params: [val]
@@ -312,15 +320,30 @@ export default {
         })
         return
       }
+      
+      // 删除选中的数据
       this.statData = this.statData.filter(
         (item) => !this.multipleSelection.includes(item)
       )
+      
+      // 删除后调整分页
+      const totalPages = Math.ceil(this.statData.length / this.pagination.pageSize)
+      if (this.pagination.currentPage > totalPages && totalPages > 0) {
+        this.pagination.currentPage = totalPages
+      } else if (totalPages === 0) {
+        this.pagination.currentPage = 1
+      }
+      
+      this.multipleSelection = []
     },
     handleEdit(row, index) {
+      // 计算实际在statData中的索引
+      const actualIndex = (this.pagination.currentPage - 1) * this.pagination.pageSize + index
+      
       // 编辑操作
       this.selectEditchange = true
       this.selectEditData = row
-      this.selectEditData.rowIndex = index
+      this.selectEditData.rowIndex = actualIndex
       this.dialogFormVisibles = true
     },
     handleSelect(row) {
@@ -331,7 +354,6 @@ export default {
     },
     // 配置完成之后评审内容数据自动带出
     configData() {
-      // const sql = `select * from  t_jyffxnpspzb`
       this.$common
         .request('query', {
           key: 'getJyffxnpspzb',
@@ -361,6 +383,11 @@ export default {
   .hand-btn {
     width: 100%;
     text-align: right;
+    background-color: azure !important; /* 背景颜色 */
+    border-top: 1px solid #EBEEF5;
+    border-left: 1px solid #EBEEF5;
+    border-right: 1px solid #EBEEF5;
+    margin-bottom: 0;
   }
   ::v-deep .blue-header .el-table__header th {
     background-color: #84d5cf !important; /* 背景颜色 */
@@ -392,4 +419,4 @@ export default {
     border-radius: 8px;
   }
 }
-</style>
+</style>