安环管理-环保管理-废气处理-加药记录-新增-删除选中行优化

安环管理-环保管理-废气处理-加药记录-新增-删除选中行优化

src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue

@@ -9,10 +9,17 @@
   >
     <div style="margin-bottom: 12px" v-if="moldAddMore">
       <el-button type="primary" @click="addTable">插入一行</el-button>
-      <el-button type="danger" @click="delTable">删除行</el-button>
+      <el-button type="danger" @click="delTable">删除选中行</el-button>
     </div>
     <el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px">
-      <el-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
+      <el-table
+        :data="tableData"
+        @select="selectChange"
+        style="width: 100%"
+        border
+        :cell-style="{ padding: '5px' }"
+      >
+        <el-table-column type="selection" width="55" />
         <!-- 设施 -->
         <el-table-column prop="device" label="设施" align="center" width="170">
           <template #header>
@@ -114,6 +121,7 @@ export default {
     return {
       openShow: false,
       tableData: [],
+      formError: '', // 全局错误提示
       // 统一校验规则：支持数组项校验
       formRules: {
         // 表格整体校验：至少一行数据
@@ -156,18 +164,36 @@ export default {
       this.openShow = false;
       this.$emit('closeDialog');
       // 重置表单
-      // this.form.tableData = [];
+      this.tableData = [];
       this.formError = '';
       this.$refs.tableForm?.resetFields();
     },
+    // 选择事件处理
+    selectChange(list, row) {
+      // 根据选中的列表更新当前行的选中状态
+      const isSelected = list.some(item => item === row);
+      row._select = isSelected;
+    },
     // 插入一行
     addTable() {
-      this.tableData.push({});
+      this.tableData.push({
+        _select: false,
+        device: '',
+        drug: '',
+        dose: null,
+        dosingTime: '',
+        dosingMan: '',
+        memo: '',
+      });
     },
-
+    // 删除选中行
-    // 删除行
     delTable() {
-      this.tableData.pop();
+      const selectedRows = this.tableData.filter(row => row._select);
+      if (selectedRows.length === 0) {
+        this.$message.error('请至少选择一条数据');
+        return;
+      }
+      this.tableData = this.tableData.filter(row => !row._select);
     },
     // 提交数据
     submit() {
@@ -187,10 +213,13 @@ export default {
         return true;
       });
       if (isValid) {
-        const submitData = this.tableData.map(row => ({
+        const submitData = this.tableData.map(row => {
-          ...row,
+          const { _select, ...validData } = row;
-          dorType: 1,
+          return {
-        }));
+            ...validData,
+            dorType: 1,
+          };
+        });
         // 如果所有必填项都填写了，则进行提交操作
         this.$emit('submitData', submitData); // 通知父组件刷新表格数据
         this.closeDialog();

src/views/safetyManagement/wastewater/components/addEditDialogDosingRecord.vue

@@ -2,13 +2,14 @@
     <el-dialog title="新增" append-to-body v-model="openShow" width="70%" @close="closeDialog" destroy-on-close>
         <div style="margin-bottom: 12px" v-if="moldAddMore">
             <el-button type="primary" @click="addTable">插入一行</el-button>
-            <el-button type="danger" @click="delTable">删除行</el-button>
+            <el-button type="danger" @click="delTable">删除选中行</el-button>
         </div>
         <el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px">
             <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;">
                 {{ formError }}
             </div>
-            <el-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
+            <el-table :data="tableData" @select="selectChange" style="width: 100%" border :cell-style="{ padding: '5px' }">
+                <el-table-column type="selection" width="55" />
                 <!-- 设施 -->
                 <el-table-column prop="device" label="设施" align="center" width="170">
                     <template #header>
@@ -104,6 +105,7 @@ export default {
         return {
             openShow: false,
             tableData: [],
+            formError: '', // 全局错误提示
             // 统一校验规则：支持数组项校验
             formRules: {
                 // 表格整体校验：至少一行数据
@@ -157,18 +159,37 @@ export default {
             this.openShow = false;
             this.$emit('closeDialog');
             // 重置表单
-            // this.form.tableData = [];
+            this.tableData = [];
             this.formError = '';
             this.$refs.tableForm?.resetFields();
         },
+        // 选择事件处理
+        selectChange(list, row) {
+            // 根据选中的列表更新当前行的选中状态
+            const isSelected = list.some(item => item === row);
+            row._select = isSelected;
+        },
         // 插入一行
         addTable() {
-            this.tableData.push({});
+            this.tableData.push({
+                _select: false,
+                device: '',
+                drug: '',
+                dose: null,
+                dosingTime: '',
+                dosingMan: '',
+                memo: ''
+            });
         },
         
-        // 删除行
+        // 删除选中行
         delTable() {
-            this.tableData.pop()
+            const selectedRows = this.tableData.filter(row => row._select);
+            if (selectedRows.length === 0) {
+                this.$message.error('请至少选择一条数据');
+                return;
+            }
+            this.tableData = this.tableData.filter(row => !row._select);
         },
         // 提交数据
         submit() {
@@ -188,10 +209,13 @@ export default {
                 return true;
             });
             if (isValid) {
-                const submitData = this.tableData.map(row => ({
+                const submitData = this.tableData.map(row => {
-                    ...row,
+                    const { _select, ...validData } = row;
-                    dorType: 2
+                    return {
-                }));
+                        ...validData,
+                        dorType: 2
+                    };
+                });
                 // 如果所有必填项都填写了，则进行提交操作         
                 this.$emit("submitData", submitData); // 通知父组件刷新表格数据
                 this.closeDialog()