From 3c7dc97ce99b92fdda7c7028ce2c9fcd6df5fdb9 Mon Sep 17 00:00:00 2001
From: zhangdi <15053473693@163.com>
Date: Mon, 26 Jan 2026 11:29:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=87=E7=A8=8B=E9=A1=B9=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E9=A1=B5=E9=9D=A2=E6=8E=A5=E5=8F=A3=E8=81=94?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/inPlantProcessHandle.vue       | 257 ++++++++++++++++++
 .../processManagement/inPlantProcess.vue      |  27 +-
 2 files changed, 281 insertions(+), 3 deletions(-)
 create mode 100644 src/views/processManagement/components/inPlantProcessHandle.vue

diff --git a/src/views/processManagement/components/inPlantProcessHandle.vue b/src/views/processManagement/components/inPlantProcessHandle.vue
new file mode 100644
index 0000000..d470443
--- /dev/null
+++ b/src/views/processManagement/components/inPlantProcessHandle.vue
@@ -0,0 +1,257 @@
+<template>
+  <el-dialog title="新增" append-to-body :modelValue="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>
+
+    <!-- 单个 Form 包裹整个表格 -->
+    <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="form.tableData" @select="selectChange" border>
+        <el-table-column type="selection" width="55"></el-table-column>
+        
+        <!-- 作业中心（绑定数组字段） -->
+        <el-table-column align="center" label="事项" width="200">
+          <template #header>
+            <span><i style="color: red">*</i>事项</span>
+          </template>
+          <template #default="scope">
+            <!-- prop 格式：数组名[索引].字段名 -->
+            <el-form-item :prop="`tableData[${scope.$index}].matter`" :rules="formRules.matter">
+                <el-input 
+                v-model="scope.row.matter" 
+                placeholder="请输入"
+                style="width: 100%"
+                type="textarea"
+                :rows="2"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+
+        <!-- 描述 -->
+        <el-table-column align="center" label="描述">
+          <template #header>
+            <span><i style="color: red">*</i>描述</span>
+          </template>
+          <template #default="scope">
+            <el-form-item :prop="`tableData[${scope.$index}].process`" :rules="formRules.process">
+              <el-input 
+                v-model="scope.row.process" 
+                placeholder="请输入"
+                style="width: 100%"
+                type="textarea"
+                :rows="2"
+              ></el-input>
+            </el-form-item>
+          </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="submitForm">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { getWorkCenterList } from '@/api/processManagement/addQuantity.js';
+// import { submitBatchData } from '@/api/processManagement/periodical.js'; // 实际提交接口
+
+export default {
+  props: {
+    showDialog: { type: Boolean, default: false },
+    moldAddMore: { type: Boolean, default: false },
+    tabPosition: { type: String, default: '' },
+    rowData: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      openShow: false,
+      wcData: [],
+      formError: '', // 全局错误提示
+
+      // 单个表单模型：包含表格所有行数据
+      form: {
+        tableData: [] // 表格数据数组（直接绑定到 Form 模型）
+      },
+
+      // 统一校验规则：支持数组项校验
+      formRules: {
+        // 表格数据数组的整体校验（可选：如最少1行数据）
+        tableData: [
+          { 
+            required: true, 
+            message: '请至少添加一行数据', 
+            trigger: 'submit',
+            type: 'array' // 明确类型为数组
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value.length === 0) {
+                callback(new Error('请至少添加一行数据'));
+              } else {
+                callback();
+              }
+            },
+            trigger: 'submit'
+          }
+        ],
+
+        // 数组中每一项的 wcId 字段校验
+        matter: [
+          { required: true, message: '请输入', trigger: ['change', 'submit'] }
+        ],
+
+        // 数组中每一项的 preserveContent 字段校验
+        process: [
+          { required: true, message: '请输入', trigger: ['blur', 'submit'] },
+        ]
+      }
+    };
+  },
+  mounted() {
+    this.openShow = this.showDialog;
+    this.getWorkCenterList();
+    // 初始添加一行（可选）
+    if (this.moldAddMore && this.form.tableData.length === 0) {
+      this.addTable();
+    }
+  },
+  methods: {
+    getWorkCenterList() {
+      getWorkCenterList().then(res => {
+        this.wcData = res.data.data || [];
+      });
+    },
+
+    selectChange(list, row) {
+      row._select = !row._select;
+    },
+
+    // 新增一行（直接push到表单模型的 tableData 中）
+    addTable() {
+      this.form.tableData.push({
+        _select: false, // 选择状态
+        wcId: '', // 作业中心ID
+        batchNo: '', // 槽号/检查项
+        preserveContent: '' // 维护内容
+      });
+    },
+
+    // 删除选中行
+    delTable() {
+      this.form.tableData = this.form.tableData.filter(row => !row._select);
+    },
+
+    closeDialog() {
+      this.openShow = false;
+      this.$emit('closeDialog',true);
+      // 重置表单
+      this.form.tableData = [];
+      this.formError = '';
+      this.$refs.tableForm?.resetFields();
+    },
+
+    // 提交表单（单次校验所有行）
+    submitForm() {
+      this.formError = '';
+
+      // 调用单个 Form 的校验方法
+      this.$refs.tableForm.validate((isValid, invalidFields) => {
+        if (!isValid) {
+          // 校验失败：显示提示并滚动到第一个错误字段
+          this.formError = '存在未完善的字段，请检查表格中的红色提示';
+          
+          this.$nextTick(() => {
+            // 找到第一个错误字段并滚动到视图
+            const firstError = document.querySelector('.el-form-item.is-error');
+            if (firstError) {
+              firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+          });
+          return;
+        }
+
+        // 校验通过：准备提交数据（过滤无用字段）
+        const submitData = this.form.tableData.map(row => {
+          const { _select, ...validData } = row; // 剔除选择状态字段
+          return validData;
+        });
+
+        // 调用接口提交（实际项目替换）
+        try {
+          // const res = await submitBatchData(submitData);
+          // if (res.code === 200) {
+          //   this.$message.success('提交成功');
+          //   this.closeDialog();
+          //   this.$emit('submitSuccess', submitData);
+          // } else {
+          //   this.$message.error(res.msg || '提交失败');
+          // }
+
+          // 演示用
+          this.$message.success('提交成功');
+          this.closeDialog();
+          this.$emit('submitSuccess', submitData);
+        } catch (err) {
+          this.$message.error('网络错误，请稍后重试');
+          console.error('提交失败：', err);
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// 优化表单字段样式
+:deep(.el-table .el-form-item) {
+  margin-bottom: 0; // 去掉默认边距
+}
+
+// 错误提示样式优化
+:deep(.el-form-item__error) {
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+  background: #fff;
+  padding: 2px 4px;
+  border: 1px solid #f56c6c;
+  border-radius: 4px;
+}
+
+// 表格行高适配 textarea
+.el-table__row {
+  height: 80px !important;
+}
+
+.el-table__cell {
+  vertical-align: middle !important;
+}
+
+.error-message {
+  font-size: 14px;
+  line-height: 1.5;
+}
+:deep(.el-table .el-table__cell) {
+  height: 50px !important;
+  padding: 0 !important;
+  line-height: 50px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/processManagement/inPlantProcess.vue b/src/views/processManagement/inPlantProcess.vue
index 5fd2120..53f8031 100644
--- a/src/views/processManagement/inPlantProcess.vue
+++ b/src/views/processManagement/inPlantProcess.vue
@@ -25,12 +25,25 @@
         <el-button type="text" @click="handle(scope.row)">处理 </el-button>
       </template>
     </avue-crud>
+    <inPlantProcessHandle
+      v-if="showHandle"
+      :showDialog="showHandle"
+      :rowData="rowData"
+      @closeDialog="cancel()"
+    ></inPlantProcessHandle>
   </basic-container>
 </template>
 <script>
 import { getList } from '@/api/processManagement/inPlantProcess.js';
+import  inPlantProcessHandle  from './components/inPlantProcessHandle.vue';
 
 export default {
+  name: 'inPlantProcess',
+  components: {
+    inPlantProcessHandle,
+  },
+  props: {},
+
   data() {
     return {
       selectionList: [],
@@ -40,7 +53,6 @@ export default {
         height: 'auto',
         calcHeight: 32,
         tip: false,
-        size: 'medium',
         simplePage: true,
         searchShow: true,
         searchMenuSpan: 6,
@@ -92,7 +104,7 @@ export default {
             headerAlign: 'center',
             align: 'left',
             type: 'select',
-            filterable:true,
+            filterable: true,
             clearable: true,
             hide: true,
             dicUrl: '/blade-desk/bsWorkCenter/getList',
@@ -199,6 +211,7 @@ export default {
         currentPage: 1,
         total: 0,
       },
+      rowData:{}
     };
   },
   methods: {
@@ -213,10 +226,18 @@ export default {
         type: 'warning',
       }).then(() => {});
     },
+    handle(row) {
+      this.rowData = row;
+      this.showHandle = true;
+    },
+    cancel() {
+      this.showHandle = false;
+      this.onLoad(this.page, this.query);
+    },
     // 重置
     searchReset() {
       this.query = {};
-      this.onLoad(this.page);
+      this.onLoad(this.page, this.query);
     },
     // 搜索
     searchChange(params, done) {