Browse Source

refactor: 移除表格多选功能,改用行内操作按钮

统一三个页面的表格操作栏样式,移除批量选择相关逻辑,将修改删除操作改为行内按钮,简化页面交互逻辑
huoyi 3 weeks ago
parent
commit
f50fa0448a

+ 10 - 18
src/views/ledgerManage/contractExpirationLedger/index.vue

@@ -41,15 +41,12 @@
41 41
 
42 42
     <div class="operation-container">
43 43
       <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
44
-      <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
45
-      <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
46 44
       <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
47 45
       <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
48 46
     </div>
49 47
 
50 48
     <el-table v-loading="loading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px;"
51
-      @selection-change="handleSelectionChange" @expand-change="handleExpandChange">
52
-      <el-table-column type="selection" width="55" align="center" />
49
+      @expand-change="handleExpandChange">
53 50
       <el-table-column type="expand">
54 51
         <template #default="scope">
55 52
           <div class="detail-container">
@@ -80,6 +77,12 @@
80 77
       <el-table-column label="合同名称" prop="contractName" align="center" min-width="150" show-overflow-tooltip />
81 78
       <el-table-column label="合同开始日期" prop="contractStartDate" align="center" min-width="130" />
82 79
       <el-table-column label="合同结束日期" prop="contractEndDate" align="center" min-width="130" />
80
+      <el-table-column label="操作" align="center" width="150" fixed="right">
81
+        <template #default="scope">
82
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
83
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
84
+        </template>
85
+      </el-table-column>
83 86
     </el-table>
84 87
 
85 88
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@@ -203,9 +206,6 @@ const total = ref(0)
203 206
 const list = ref([])
204 207
 const queryFormRef = ref(null)
205 208
 const formRef = ref(null)
206
-const ids = ref([])
207
-const single = ref(true)
208
-const multiple = ref(true)
209 209
 const open = ref(false)
210 210
 const title = ref('')
211 211
 
@@ -293,12 +293,6 @@ const resetQuery = () => {
293 293
   handleQuery()
294 294
 }
295 295
 
296
-const handleSelectionChange = (selection) => {
297
-  ids.value = selection.map(item => item.id)
298
-  single.value = selection.length !== 1
299
-  multiple.value = !selection.length
300
-}
301
-
302 296
 const handleExpandChange = async (row, expandedRows) => {
303 297
   if (expandedRows.includes(row) && (!row.ledgerContractExpirationDetailList || row.ledgerContractExpirationDetailList.length === 0)) {
304 298
     try {
@@ -318,17 +312,15 @@ const handleAdd = () => {
318 312
 
319 313
 const handleUpdate = async (row) => {
320 314
   reset()
321
-  const id = row.id || ids.value[0]
322
-  const res = await getContractExpirationLedger(id)
315
+  const res = await getContractExpirationLedger(row.id)
323 316
   form.value = res.data || {}
324 317
   open.value = true
325 318
   title.value = '修改合同到期信息'
326 319
 }
327 320
 
328 321
 const handleDelete = (row) => {
329
-  const deleteIds = row.id || ids.value
330
-  proxy.$modal.confirm('是否确认删除合同到期信息编号为"' + deleteIds + '"的数据项?').then(() => {
331
-    return delContractExpirationLedger(deleteIds)
322
+  proxy.$modal.confirm('是否确认删除合同到期信息编号为"' + row.id + '"的数据项?').then(() => {
323
+    return delContractExpirationLedger(row.id)
332 324
   }).then(() => {
333 325
     getList()
334 326
     proxy.$modal.msgSuccess('删除成功')

+ 10 - 19
src/views/ledgerManage/qualificationSummary/index.vue

@@ -33,15 +33,11 @@
33 33
 
34 34
     <div class="operation-container">
35 35
       <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
36
-      <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
37
-      <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
38 36
       <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
39 37
       <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
40 38
     </div>
41 39
 
42
-    <el-table v-loading="loading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px;"
43
-      @selection-change="handleSelectionChange">
44
-      <el-table-column type="selection" width="55" align="center" />
40
+    <el-table v-loading="loading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px;">
45 41
       <el-table-column label="序号" type="index" width="60" align="center">
46 42
         <template #default="scope">
47 43
           {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
@@ -69,6 +65,12 @@
69 65
           </span>
70 66
         </template>
71 67
       </el-table-column>
68
+      <el-table-column label="操作" align="center" width="150" fixed="right">
69
+        <template #default="scope">
70
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
71
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
72
+        </template>
73
+      </el-table-column>
72 74
     </el-table>
73 75
 
74 76
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@@ -183,9 +185,6 @@ const total = ref(0)
183 185
 const list = ref([])
184 186
 const queryFormRef = ref(null)
185 187
 const formRef = ref(null)
186
-const ids = ref([])
187
-const single = ref(true)
188
-const multiple = ref(true)
189 188
 
190 189
 const queryParams = reactive({
191 190
   pageNum: 1,
@@ -265,12 +264,6 @@ const resetQuery = () => {
265 264
   handleQuery()
266 265
 }
267 266
 
268
-const handleSelectionChange = (selection) => {
269
-  ids.value = selection.map(item => item.id)
270
-  single.value = selection.length !== 1
271
-  multiple.value = !selection.length
272
-}
273
-
274 267
 const handleAdd = () => {
275 268
   reset()
276 269
   open.value = true
@@ -279,17 +272,15 @@ const handleAdd = () => {
279 272
 
280 273
 const handleUpdate = async (row) => {
281 274
   reset()
282
-  const id = row.id || ids.value[0]
283
-  const res = await getQualificationSummary(id)
275
+  const res = await getQualificationSummary(row.id)
284 276
   form.value = res.data || {}
285 277
   open.value = true
286 278
   title.value = '修改证书信息'
287 279
 }
288 280
 
289 281
 const handleDelete = (row) => {
290
-  const deleteIds = row.id || ids.value
291
-  proxy.$modal.confirm('是否确认删除证书信息编号为"' + deleteIds + '"的数据项?').then(() => {
292
-    return delQualificationSummary(deleteIds)
282
+  proxy.$modal.confirm('是否确认删除证书信息编号为"' + row.id + '"的数据项?').then(() => {
283
+    return delQualificationSummary(row.id)
293 284
   }).then(() => {
294 285
     getList()
295 286
     proxy.$modal.msgSuccess('删除成功')

+ 10 - 19
src/views/performanceManage/exemptEvaluation/index.vue

@@ -24,15 +24,11 @@
24 24
 
25 25
     <div class="operation-container">
26 26
       <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
27
-      <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
28
-      <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
29 27
       <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button>
30 28
       <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
31 29
     </div>
32 30
 
33
-    <el-table v-loading="loading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px;"
34
-      @selection-change="handleSelectionChange">
35
-      <el-table-column type="selection" width="55" align="center" />
31
+    <el-table v-loading="loading" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px;">
36 32
       <el-table-column label="序号" type="index" width="60" align="center">
37 33
         <template #default="scope">
38 34
           {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
@@ -41,6 +37,12 @@
41 37
       <el-table-column label="年度月份" prop="yearAndMonth" align="center" min-width="150" />
42 38
       <el-table-column label="姓名" prop="userName" align="center" min-width="120" />
43 39
       <el-table-column label="不参加考核原因" prop="reason" align="center" min-width="200" show-overflow-tooltip />
40
+      <el-table-column label="操作" align="center" width="150" fixed="right">
41
+        <template #default="scope">
42
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
43
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
44
+        </template>
45
+      </el-table-column>
44 46
     </el-table>
45 47
 
46 48
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@@ -114,9 +116,6 @@ const total = ref(0)
114 116
 const list = ref([])
115 117
 const queryFormRef = ref(null)
116 118
 const formRef = ref(null)
117
-const ids = ref([])
118
-const single = ref(true)
119
-const multiple = ref(true)
120 119
 const open = ref(false)
121 120
 const title = ref('')
122 121
 
@@ -190,12 +189,6 @@ const resetQuery = () => {
190 189
   handleQuery()
191 190
 }
192 191
 
193
-const handleSelectionChange = (selection) => {
194
-  ids.value = selection.map(item => item.id)
195
-  single.value = selection.length !== 1
196
-  multiple.value = !selection.length
197
-}
198
-
199 192
 const handleAdd = () => {
200 193
   reset()
201 194
   open.value = true
@@ -204,17 +197,15 @@ const handleAdd = () => {
204 197
 
205 198
 const handleUpdate = async (row) => {
206 199
   reset()
207
-  const id = row.id || ids.value[0]
208
-  const res = await getExemptEvaluation(id)
200
+  const res = await getExemptEvaluation(row.id)
209 201
   form.value = res.data || {}
210 202
   open.value = true
211 203
   title.value = '修改不参加绩效考核人员'
212 204
 }
213 205
 
214 206
 const handleDelete = (row) => {
215
-  const deleteIds = row.id || ids.value
216
-  proxy.$modal.confirm('是否确认删除不参加绩效考核人员编号为"' + deleteIds + '"的数据项?').then(() => {
217
-    return delExemptEvaluation(deleteIds)
207
+  proxy.$modal.confirm('是否确认删除不参加绩效考核人员编号为"' + row.id + '"的数据项?').then(() => {
208
+    return delExemptEvaluation(row.id)
218 209
   }).then(() => {
219 210
     getList()
220 211
     proxy.$modal.msgSuccess('删除成功')