安环管理-环保管理-废汽处理-废气加药记录-新增-优化

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

@@ -1,12 +1,20 @@
 <template>
-    <el-dialog title="新增" append-to-body v-model="openShow" width="70%" @close="closeDialog">
+  <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>
     </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-column prop="device" label="设施" align="center" width="150">
+        <el-table-column prop="device" label="设施" align="center" width="170">
           <template #header>
             <span><i style="color: red">*</i>设施</span>
           </template>
@@ -14,7 +22,8 @@
             <el-input v-model="scope.row.device" placeholder="请输入" />
           </template>
         </el-table-column>
-            <el-table-column prop="drug" label="药品" align="center" width="150">
+        <!-- 药品 -->
+        <el-table-column prop="drug" label="药品" align="center" width="170">
           <template #header>
             <span><i style="color: red">*</i>药品</span>
           </template>
@@ -22,42 +31,61 @@
             <el-input v-model="scope.row.drug" placeholder="请输入" />
           </template>
         </el-table-column>
-            <el-table-column prop="dose" label="剂量(kg)" align="center" width="150">
+        <!-- 剂量 -->
+        <el-table-column prop="dose" label="剂量(kg)" align="center" width="170">
           <template #header>
             <span><i style="color: red">*</i>剂量(kg)</span>
           </template>
           <template #default="scope">
-                    <el-input v-model="scope.row.dose" type="number" placeholder="请输入" />
+            <el-input-number
-                </template>
+              controls-position="right"
-            </el-table-column>
+              v-model.number="scope.row.dose"
-            <el-table-column prop="dosingTime" label="加药时间" align="center" width="210">
+              placeholder="请输入"
-                <template #header>
+            />
-                    <span><i style="color: red" >*</i>加药时间</span>
-                </template>
-                <template #default="scope">
-                    <el-date-picker v-model="scope.row.dosingTime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择日期" style="width: 100%" />
           </template>
         </el-table-column>
-            <el-table-column prop="dosingMan" label="加药人" align="center" width="150">
+        <!-- 加药人 -->
+        <el-table-column prop="dosingMan" label="加药人" align="center" width="170">
           <template #header>
             <span><i style="color: red">*</i>加药人</span>
           </template>
           <template #default="scope">
             <el-select v-model="scope.row.dosingMan" placeholder="请选择" style="width: 100%">
-                       <el-option v-for="item in dosingManList" :key="item.id" 
+              <el-option
+                v-for="item in dosingManList"
+                :key="item.id"
                 :label="item.name"
                 :value="item.id"
               />
+
+              <el-option />
             </el-select>
           </template>
         </el-table-column>
+        <!-- 加药时间 -->
+        <el-table-column prop="dosingTime" label="加药时间" align="center" width="210">
+          <template #header>
+            <span><i style="color: red">*</i>加药时间</span>
+          </template>
+          <template #default="scope">
+            <el-date-picker
+              v-model="scope.row.dosingTime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="datetime"
+              placeholder="选择时间"
+              style="width: 100%"
+            />
+          </template>
+        </el-table-column>
+        <!-- 备注（输入框） -->
         <el-table-column prop="memo" label="备注" align="center">
           <template #default="scope">
-                    <el-input v-model="scope.row.memo" />
+            <el-input v-model="scope.row.memo" placeholder="请输入备注" />
           </template>
         </el-table-column>
       </el-table>
-
+    </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="closeDialog">取 消</el-button>
@@ -67,7 +95,6 @@
   </el-dialog>
 </template>
 <script>
-
 export default {
   props: {
     showDialog: {
@@ -80,23 +107,35 @@ export default {
     },
     dosingManList: {
       type: Array,
-            default: () => [] // 默认空数组
+      default: () => [],
-        }
+    },
   },
   data() {
     return {
       openShow: false,
+      tableData: [],
+      // 统一校验规则：支持数组项校验
+      formRules: {
+        // 表格整体校验：至少一行数据
         tableData: [
-                // 初始化一行空数据
           {
-                    device: null,
+            required: true,
-                    dosingTime: null,
+            message: '请至少添加一行数据',
-                    dosingMan: null,
+            trigger: 'submit',
-                    drug: null,
+            type: 'array',
-                    dose: null,
-                    memo: '',
           },
         ],
+        // 设施校验
+        device: [{ required: true, message: '请输入设施名称', trigger: ['blur', 'submit'] }],
+        // 药品校验
+        drug: [{ required: true, message: '请输入药品名称', trigger: ['blur', 'submit'] }],
+        // 剂量校验：必填 + 数字 + 大于0
+        dose: [{ required: true, message: '请输入剂量', trigger: ['blur', 'submit'] }],
+        // 加药人校验
+        dosingMan: [{ required: true, message: '请选择加药人', trigger: ['change', 'submit'] }],
+        // 加药时间校验
+        dosingTime: [{ required: true, message: '请选择加药时间', trigger: ['change', 'submit'] }],
+      },
     };
   },
   watch: {
@@ -105,46 +144,44 @@ export default {
       handler(newVal) {
         this.openShow = newVal;
       },
-            immediate: true
+      immediate: true,
     },
   },
   methods: {
+    show() {
+      this.openShow = true;
+      this.tableData = [];
+    },
     closeDialog() {
       this.openShow = false;
       this.$emit('closeDialog');
+      // 重置表单
+      // this.form.tableData = [];
+      this.formError = '';
+      this.$refs.tableForm?.resetFields();
     },
     // 插入一行
     addTable() {
-            this.tableData.push({
+      this.tableData.push({});
-                device: null,
-                    dosingTime: null,
-                    dosingMan: null,
-                    drug: null,
-                    dose: null,
-                    memo: '',
-            });
     },
+
     // 删除行
     delTable() {
-            if (this.tableData.length <= 1) {
+      this.tableData.pop();
-                this.$message.warning('至少保留一行数据');
-                return;
-            }
-            this.tableData.pop(); // 删除最后一行
     },
     // 提交数据
     submit() {
       const isValid = this.tableData.every(row => {
         // 检查所有必填项
-                if (!row.device || !row.dosingTime || !row.dosingMan || !row.drug || !row.dose) {
+        if (!row.device || !row.drug || !row.dose || !row.dosingTime || !row.dosingMan) {
           // 指明具体缺少的字段
           const missingFields = [];
-                    if (!row.device) missingFields.push("设施");
+          if (!row.device) missingFields.push('设施');
-                    if (!row.dosingTime) missingFields.push("加药时间");
+          if (!row.drug) missingFields.push('药品');
-                    if (!row.dosingMan) missingFields.push("加药人");
+          if (!row.dose) missingFields.push('剂量(kg)');
-                    if (!row.drug) missingFields.push("药品");
+          if (!row.dosingTime) missingFields.push('加药时间');
-                    if (!row.dose) missingFields.push("剂量(kg)");
+          if (!row.dosingMan) missingFields.push('加药人');
-                    this.$message.error(`请完善必填项: ${missingFields.join(", ")}`);
+          this.$message.error(`请完善必填项: ${missingFields.join(', ')}`);
           return false;
         }
         return true;
@@ -152,14 +189,13 @@ export default {
       if (isValid) {
         const submitData = this.tableData.map(row => ({
           ...row,
-                    dorType: 1
+          dorType: 1,
         }));
         // 如果所有必填项都填写了，则进行提交操作
-                this.$emit("submitData", submitData); // 通知父组件刷新表格数据
+        this.$emit('submitData', submitData); // 通知父组件刷新表格数据
+        this.closeDialog();
       }
-            
     },
   },
 };
 </script>
-<style lang="scss" scoped></style>