Răsfoiți Sursa

feat: 新增作业票批量删除功能,优化删除条件与选中项管理

xieyong 6 zile în urmă
părinte
comite
9ddf2f7e87
1 a modificat fișierele cu 104 adăugiri și 5 ștergeri
  1. 104 5
      src/views/DangerousWorkList/workTicketDialog.vue

+ 104 - 5
src/views/DangerousWorkList/workTicketDialog.vue

@@ -11,6 +11,7 @@
       <!-- 搜索区域 -->
       <div class="search-area">
         <seek-page
+          ref="seekPage"
           :seekList="seekList"
           @search="handleSearch"
           :formLength="4"
@@ -19,15 +20,20 @@
 
       <!-- 列表视图 -->
       <div class="list-view">
+        <!--
+          v-if="work.id":el-dialog 首次打开才会渲染弹窗内容,表格也是此时才挂载。
+          表格挂载后由自身 mounted 触发首次加载,避免首次打开时 $refs.table 还不存在而不发请求。
+        -->
         <ele-pro-table
+          v-if="work.id"
           ref="table"
           row-key="id"
           :columns="columns"
           :datasource="datasource"
           :cache-key="cacheKeyUrl"
           max-height="500px"
-          :initLoad="false"
           @columns-change="handleColumnChange"
+          @selection-change="handleSelectionChange"
         >
           <template v-slot:toolbar>
             <div class="toolbar-left">
@@ -38,6 +44,17 @@
                 @click="handleAdd"
                 >申请作业票</el-button
               >
+              <el-button
+                type="danger"
+                size="small"
+                icon="el-icon-delete"
+                :disabled="!selectedRows.length"
+                @click="handleBatchDelete"
+                >批量删除</el-button
+              >
+              <span class="toolbar-tip"
+                >仅草稿(待提交)状态的作业票可删除</span
+              >
             </div>
           </template>
           <template v-slot:workType="{ row }">
@@ -61,7 +78,7 @@
         </ele-pro-table>
       </div>
     </div>
-    <add ref="addRef" @reload="$refs.table.reload()"> </add>
+    <add ref="addRef" @reload="reloadTable"> </add>
   </ele-modal>
 </template>
 
@@ -80,6 +97,10 @@
     4: '已驳回'
   };
 
+  // 草稿(待提交)状态,只有该状态的作业票允许删除
+  const DRAFT_STATUS = 1;
+  const DELETE_TIP = '仅草稿(待提交)状态的作业票可以删除';
+
   export default {
     mixins: [tabMixins, dictMixins],
     components: { add },
@@ -88,7 +109,18 @@
         visible: false,
         // 所属的危险作业
         work: {},
+        // 表格选中的作业票
+        selectedRows: [],
         columns: [
+          {
+            columnKey: 'selection',
+            type: 'selection',
+            width: 50,
+            align: 'center',
+            fixed: 'left',
+            // 只有草稿(待提交)状态的作业票允许勾选,避免误删已提交的票
+            selectable: (row) => this.isDraft(row)
+          },
           {
             columnKey: 'index',
             label: '序号',
@@ -209,6 +241,8 @@
       work: {
         immediate: true,
         handler(val) {
+          // 首次打开弹窗时表格尚未挂载(el-dialog 懒渲染),由表格自身 mounted 触发加载;
+          // 这里只处理弹窗已打开、切换所属危险作业的场景
           if (val?.id && this.$refs.table) {
             this.$refs.table.reload({ page: 1 });
           }
@@ -220,6 +254,8 @@
       // 打开弹窗,work 可以是危险作业对象或危险作业id
       open(work) {
         this.work = work && work.id ? work : { id: work };
+        // 重置上一次打开时残留的查询条件,保证界面条件与本次请求参数一致
+        this.$refs.seekPage?.reset();
         this.visible = true;
       },
       handleAdd() {
@@ -231,7 +267,12 @@
       },
 
       handleSearch(where) {
-        this.$refs.table.reload({ page: 1, where });
+        this.reloadTable({ page: 1, where });
+      },
+
+      // 表格可能尚未挂载(弹窗首次打开时),此处统一做存在性判断
+      reloadTable(option) {
+        this.$refs.table && this.$refs.table.reload(option);
       },
 
       // 作业类型名称
@@ -253,7 +294,11 @@
       },
 
       handleDelete(row) {
-        this.$confirm('确认删除吗?', '提示', {
+        if (!this.isDraft(row)) {
+          this.$message.warning(DELETE_TIP);
+          return;
+        }
+        this.$confirm('确认删除该草稿作业票吗?删除后不可恢复。', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
@@ -261,12 +306,59 @@
           .then(() => {
             ticketRemove([row.id]).then(() => {
               this.$message.success('删除成功');
-              this.$refs.table.reload();
+              this.clearSelection();
+              this.reloadTable();
             });
           })
           .catch(() => {});
       },
 
+      // 批量删除:仅允许删除草稿(待提交)状态的作业票
+      handleBatchDelete() {
+        const rows = this.selectedRows || [];
+        if (!rows.length) {
+          this.$message.warning('请至少选择一条数据');
+          return;
+        }
+        if (rows.some((row) => !this.isDraft(row))) {
+          this.$message.warning(DELETE_TIP);
+          return;
+        }
+        this.$confirm(
+          `确认删除选中的 ${rows.length} 条草稿作业票吗?删除后不可恢复。`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        )
+          .then(() => {
+            ticketRemove(rows.map((row) => row.id)).then(() => {
+              this.$message.success('删除成功');
+              this.clearSelection();
+              this.reloadTable();
+            });
+          })
+          .catch(() => {});
+      },
+
+      // 是否草稿(待提交)状态,只有该状态允许删除
+      isDraft(row) {
+        return Number(row?.status) === DRAFT_STATUS;
+      },
+
+      // 多选
+      handleSelectionChange(rows) {
+        this.selectedRows = rows || [];
+      },
+
+      // 清空选中项
+      clearSelection() {
+        this.selectedRows = [];
+        this.$refs.table && this.$refs.table.clearSelection();
+      },
+
       async datasource({ page, limit, where }) {
         const body = {
           ...where,
@@ -316,4 +408,11 @@
       font-size: 12px;
     }
   }
+
+  .toolbar-tip {
+    margin-left: 12px;
+    font-size: 12px;
+    color: #909399;
+    line-height: 32px;
+  }
 </style>