工艺管理接口联调

src/views/processManagement/components/addinPlantMaintenanceDialog.vue

@@ -0,0 +1,343 @@
+<template>
+  <el-dialog title="新增" append-to-body :modelValue="openShow" width="80%" @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="作业中心" >
+          <template #header>
+            <span><i style="color: red">*</i>作业中心</span>
+          </template>
+          <template #default="scope">
+            <!-- prop 格式：数组名[索引].字段名 -->
+            <el-form-item :prop="`tableData[${scope.$index}].wcId`" :rules="formRules.wcId">
+              <el-select v-model="scope.row.wcId" placeholder="请选择" >
+                <el-option
+                  v-for="item in wcData"
+                  :key="item.id"
+                  :value="item.id"
+                  :label="item.wcName"
+                ></el-option>
+              </el-select>
+            </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}].batchNo`" :rules="formRules.batchNo">
+              <el-select v-model="scope.row.batchNo" placeholder="请选择" >
+                <el-option label="#21" value="1"></el-option>
+                <el-option label="11" value="11"></el-option>
+                <el-option label="#22" value="3"></el-option>
+              </el-select>
+            </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}].proItem`" :rules="formRules.proItem">
+              <el-input
+                v-model="scope.row.proItem"
+                placeholder="请输入"
+                style="width: 100%"
+              ></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}].condition`"
+              :rules="formRules.condition"
+            >
+              <el-input
+                v-model="scope.row.condition"
+                placeholder="请输入"
+                style="width: 100%"
+              ></el-input>
+            </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="确认到期日期" >
+          <template #default="scope">
+            <el-form-item :prop="`tableData[${scope.$index}].lastDueTime`">
+              <el-date-picker
+                v-model="scope.row.lastDueTime"
+                placeholder="请输入"
+                style="width: 100%"
+              ></el-date-picker>
+            </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}].remDays`" :rules="formRules.remDays">
+              <el-input
+                v-model="scope.row.batchNo"
+                placeholder="请输入"
+                style="width: 100%"
+              ></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}].proMan`" :rules="formRules.proMan">
+              <el-select v-model="scope.row.proMan" placeholder="请选择" style="width: 100%">
+                <el-option label="#21" value="1"></el-option>
+                <el-option label="11" value="11"></el-option>
+                <el-option label="#22" value="3"></el-option>
+              </el-select>
+            </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}].remark`" :rules="formRules.remark">
+              <el-input
+                v-model="scope.row.remark"
+                placeholder="请输入"
+                style="width: 100%"
+              ></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: '' },
+  },
+  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 字段校验
+        wcId: [{ required: true, message: '请选择作业中心', trigger: ['change', 'submit'] }],
+
+        // 数组中每一项的 batchNo 字段校验
+        batchNo: [
+          {
+            required: true,
+            message: `请${this.tabPosition === 'bathInspection' ? '选择' : '输入'}${
+              this.tabPosition === 'bathInspection' ? '槽号槽名' : '设备检查项'
+            }`,
+            trigger: ['change', 'submit'],
+          },
+        ],
+
+        // 数组中每一项的 preserveContent 字段校验
+        preserveContent: [
+          { required: true, message: '请填写维护内容', trigger: ['blur', 'submit'] },
+          { max: 200, message: '维护内容不能超过200个字符', trigger: ['input', '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>

src/views/processManagement/components/inPlantMaintenance.vue

@@ -19,6 +19,7 @@
       @row-update="rowUpdate"
     >
       <template #menu-left>
+         <el-button type="primary" @click="handleAdd">新增 </el-button>
         <el-button type="danger" @click="handleDelete">删除 </el-button>
       </template>
       <template #menu-right>
@@ -36,6 +37,10 @@
       importUrl="/blade-desk/dsSpecialPro/import-excel-SpecialPro"
       @closeDialog="closeDialog"
     ></basic-import>
+
+    <!-- 新增 -->
+    <addinPlantMaintenanceDialog v-if="showAddDialog" :showDialog="showAddDialog"  :moldAddMore="moldAddMore" @closeDialog="closeAddDialog"></addinPlantMaintenanceDialog>
+
   </div>
 </template>
 <script>
@@ -47,12 +52,16 @@ import {
   getEquipmentList,
 } from '@/api/processManagement/specialProcess';
 import basicImport from '@/components/basic-import/main.vue';
+import addinPlantMaintenanceDialog from './addinPlantMaintenanceDialog.vue';
 export default {
   components: {
     basicImport,
+    addinPlantMaintenanceDialog
   },
   data() {
     return {
+      showAddDialog: false,
+      moldAddMore:true,
       isShowImport: false,
       data: [],
       selectionList: [],
@@ -70,8 +79,8 @@ export default {
         index: true,
         selection: true,
         viewBtn: false,
-        delBtn: true,
         addBtn: true,
+        delBtn: true,
         editBtnText: '修改',
         addBtnIcon: ' ',
         viewBtnIcon: ' ',
@@ -290,6 +299,13 @@ export default {
     };
   },
   methods: {
+    handleAdd(){
+      this.showAddDialog = true
+    },  
+    closeAddDialog(){
+      this.showAddDialog = false
+      this.onLoad(this.page,this.query)
+    },
     equipmentChange(val,type){
       console.log(val,'val')
       if(val&&type=='equipmentId'){

src/views/processManagement/procepssPlanning.vue

@@ -338,7 +338,7 @@ export default {
           },
           {
             label: '维护人',
-            prop: 'updateUser',
+            prop: 'updateUserStr',
             sortable: true,
             search: false,
             overHidden: true,