jonhon-mes-web/src/views/aaaaaaaaaaaaa/addEditDialog.vue

<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}].wcId`" :rules="formRules.wcId">
              <el-select 
                v-model="scope.row.wcId" 
                placeholder="请选择"
                style="width: 100%"
              >
                <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="tabPosition === 'bathInspection' ? '槽号槽名' : '设备检查项'" width="200">
          <template #header>
            <span><i style="color: red">*</i>{{ tabPosition === 'bathInspection' ? '槽号槽名' : '设备检查项' }}</span>
          </template>
          <template #default="scope">
            <el-form-item :prop="`tableData[${scope.$index}].batchNo`" :rules="formRules.batchNo">
              <el-input 
                v-if="tabPosition === 'deviceInspection'" 
                v-model="scope.row.batchNo" 
                placeholder="请输入"
                style="width: 100%"
              ></el-input>
              <el-select 
                v-if="tabPosition === 'bathInspection'" 
                v-model="scope.row.batchNo" 
                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}].preserveContent`" :rules="formRules.preserveContent">
              <el-input 
                v-model="scope.row.preserveContent" 
                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: '' },
  },
  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');
      // 重置表单
      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>