From 4374d51e79e4b3f9e1bf7a7f8c9754d54391ed0e Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Fri, 17 Apr 2026 11:48:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E7=8E=AF=E7=AE=A1=E7=90=86-=E7=8E=AF?=
 =?UTF-8?q?=E4=BF=9D=E7=AE=A1=E7=90=86-=E5=BA=9F=E6=B1=BD=E5=A4=84?=
 =?UTF-8?q?=E7=90=86-=E5=BA=9F=E6=B0=94=E5=8A=A0=E8=8D=AF=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95-=E6=96=B0=E5=A2=9E-=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/addEditDialogDosingRecord.vue  | 346 ++++++++++--------
 1 file changed, 191 insertions(+), 155 deletions(-)

diff --git a/src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue b/src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue
index 4e0d065..68c2297 100644
--- a/src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue
+++ b/src/views/safetyManagement/wasteGasSet/components/addEditDialogDosingRecord.vue
@@ -1,165 +1,201 @@
 <template>
-    <el-dialog title="新增" append-to-body v-model="openShow" width="70%" @close="closeDialog">
-        <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-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
-            <!-- 设施 -->
-            <el-table-column prop="device" label="设施" align="center" width="150">
-                <template #header>
-                    <span><i style="color: red">*</i>设施</span>
-                </template>
-                <template #default="scope">
-                    <el-input v-model="scope.row.device" placeholder="请输入" />
-                </template>
-            </el-table-column>
-            <el-table-column prop="drug" label="药品" align="center" width="150">
-                <template #header>
-                    <span><i style="color: red">*</i>药品</span>
-                </template>
-                <template #default="scope">
-                    <el-input v-model="scope.row.drug" placeholder="请输入" />
-                </template>
-            </el-table-column>
-            <el-table-column prop="dose" label="剂量(kg)" align="center" width="150">
-                <template #header>
-                    <span><i style="color: red">*</i>剂量(kg)</span>
-                </template>
-                <template #default="scope">
-                    <el-input v-model="scope.row.dose" type="number" placeholder="请输入" />
-                </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="dosingMan" label="加药人" align="center" width="150">
-                <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" 
-                            :label="item.name" 
-                            :value="item.id"
-                            />
-                    </el-select>
-                </template>
-            </el-table-column>
-            <el-table-column prop="memo" label="备注" align="center">
-                <template #default="scope">
-                    <el-input v-model="scope.row.memo" />
-                </template>
-            </el-table-column>
-        </el-table>
+  <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="170">
+          <template #header>
+            <span><i style="color: red">*</i>设施</span>
+          </template>
+          <template #default="scope">
+            <el-input v-model="scope.row.device" placeholder="请输入" />
+          </template>
+        </el-table-column>
+        <!-- 药品 -->
+        <el-table-column prop="drug" label="药品" align="center" width="170">
+          <template #header>
+            <span><i style="color: red">*</i>药品</span>
+          </template>
+          <template #default="scope">
+            <el-input v-model="scope.row.drug" placeholder="请输入" />
+          </template>
+        </el-table-column>
+        <!-- 剂量 -->
+        <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-number
+              controls-position="right"
+              v-model.number="scope.row.dose"
+              placeholder="请输入"
+            />
+          </template>
+        </el-table-column>
+        <!-- 加药人 -->
+        <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"
+                :label="item.name"
+                :value="item.id"
+              />
 
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="closeDialog">取 消</el-button>
-                <el-button type="primary" @click="submit">确 定</el-button>
-            </span>
-        </template>
-    </el-dialog>
+              <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" placeholder="请输入备注" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 <script>
-
 export default {
-    props: {
-        showDialog: {
-            type: Boolean,
-            default: false,
-        },
-        moldAddMore: {
-            type: Boolean,
-            default: false,
-        },
-        dosingManList: {
-            type: Array,
-            default: () => [] // 默认空数组
-        }
+  props: {
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+    moldAddMore: {
+      type: Boolean,
+      default: false,
+    },
+    dosingManList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      openShow: false,
+      tableData: [],
+      // 统一校验规则：支持数组项校验
+      formRules: {
+        // 表格整体校验：至少一行数据
+        tableData: [
+          {
+            required: true,
+            message: '请至少添加一行数据',
+            trigger: 'submit',
+            type: 'array',
+          },
+        ],
+        // 设施校验
+        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: {
+    // 监听父组件传入的显示状态，同步更新弹窗
+    showDialog: {
+      handler(newVal) {
+        this.openShow = newVal;
+      },
+      immediate: true,
     },
-    data() {
-        return {
-            openShow: false,
-            tableData: [
-                // 初始化一行空数据
-                {
-                    device: null,
-                    dosingTime: null,
-                    dosingMan: null,
-                    drug: null,
-                    dose: null,
-                    memo: '',
-                },
-            ],
-        };
+  },
+  methods: {
+    show() {
+      this.openShow = true;
+      this.tableData = [];
     },
-    watch: {
-        // 监听父组件传入的显示状态，同步更新弹窗
-        showDialog: {
-            handler(newVal) {
-                this.openShow = newVal;
-            },
-            immediate: true
-        },
+    closeDialog() {
+      this.openShow = false;
+      this.$emit('closeDialog');
+      // 重置表单
+      // this.form.tableData = [];
+      this.formError = '';
+      this.$refs.tableForm?.resetFields();
     },
-    methods: {
-        closeDialog() {
-            this.openShow = false;
-            this.$emit('closeDialog');
-        },
-        // 插入一行
-        addTable() {
-            this.tableData.push({
-                device: null,
-                    dosingTime: null,
-                    dosingMan: null,
-                    drug: null,
-                    dose: null,
-                    memo: '',
-            });
-        },
-        // 删除行
-        delTable() {
-            if (this.tableData.length <= 1) {
-                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) {
-                    // 指明具体缺少的字段
-                    const missingFields = [];
-                    if (!row.device) missingFields.push("设施");
-                    if (!row.dosingTime) missingFields.push("加药时间");
-                    if (!row.dosingMan) missingFields.push("加药人");
-                    if (!row.drug) missingFields.push("药品");
-                    if (!row.dose) missingFields.push("剂量(kg)");
-                    this.$message.error(`请完善必填项: ${missingFields.join(", ")}`);
-                    return false;
-                }
-                return true;
-            });
-            if (isValid) {
-                const submitData = this.tableData.map(row => ({
-                    ...row,
-                    dorType: 1
-                }));
-                // 如果所有必填项都填写了，则进行提交操作         
-                this.$emit("submitData", submitData); // 通知父组件刷新表格数据
-            }
-            
-        },    
+    // 插入一行
+    addTable() {
+      this.tableData.push({});
+    },
+
+    // 删除行
+    delTable() {
+      this.tableData.pop();
+    },
+    // 提交数据
+    submit() {
+      const isValid = this.tableData.every(row => {
+        // 检查所有必填项
+        if (!row.device || !row.drug || !row.dose || !row.dosingTime || !row.dosingMan) {
+          // 指明具体缺少的字段
+          const missingFields = [];
+          if (!row.device) missingFields.push('设施');
+          if (!row.drug) missingFields.push('药品');
+          if (!row.dose) missingFields.push('剂量(kg)');
+          if (!row.dosingTime) missingFields.push('加药时间');
+          if (!row.dosingMan) missingFields.push('加药人');
+          this.$message.error(`请完善必填项: ${missingFields.join(', ')}`);
+          return false;
+        }
+        return true;
+      });
+      if (isValid) {
+        const submitData = this.tableData.map(row => ({
+          ...row,
+          dorType: 1,
+        }));
+        // 如果所有必填项都填写了，则进行提交操作
+        this.$emit('submitData', submitData); // 通知父组件刷新表格数据
+        this.closeDialog();
+      }
     },
+  },
 };
-</script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file