jonhon-mes-web/src/views/qualityManagement/inspectionArchiving/rbFilePreserve/addPreserve.vue

<template>
  <el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog">
    <div style="margin-bottom: 12px">
      <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}].name`" :rules="formRules.name">
                <el-input v-model="scope.row.name" ></el-input>
              <!-- <el-select 
                v-model="scope.row.name" 
                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="作业中心">
          <template #header>
            <span><i style="color: red">*</i>作业中心</span>
          </template>
          <template #default="scope">
            <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 workList" :key="item.id" :label="item.wcName" :value="item.id"></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}].ppsId`" :rules="formRules.ppsId">
                <el-select 
                    v-model="scope.row.ppsId"
                    remote
                    :remote-method="remoteMethod"
                    :loading="loading"
                    reserve-keyword
                    clearable
                    filterable
                    placeholder="请输入并搜索工序"
                    style="width: 100%"
                >
                    <el-option 
                    v-for="item in processList" 
                    :key="item.id" 
                    :label="item.name" 
                    :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
          </template>
        </el-table-column>
         <!-- 线上/下 -->
        <el-table-column align="center" label="线上/下">
          <template #default="scope">
            <el-form-item :prop="`tableData[${scope.$index}].line`" :rules="formRules.line">
                <div style="width:100%;display: flex;justify-content: center;">
                    <el-switch
                        v-model="scope.row.line"
                        size="large"
                        active-text="线上"
                        inactive-text="线下"
                    />
                </div>
            </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'; // 实际提交接口
import {getWorkList,getProcessList,addRecords} from '@/api/qualityManagement/inspectionArchiving/rbFilePreserve'

export default {
  props: {
    showDialog: { type: Boolean, default: false },
    moldAddMore: { type: Boolean, default: false },
    tabPosition: { type: String, default: '' },
  },
  data() {
    return {
      openShow: false,
      wcData: [],
      workList:[],
      processList: [], // 用于远程搜索的工序列表
      loading: false, // 搜索加载状态
      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'
          }
        ],

        // 数组中每一项的 name 字段校验
        name: [
          { required: true, message: '请输入模板名称', trigger: ['change', 'submit'] }
        ],

        // 数组中每一项的 wcId 字段校验
        wcId: [
          { 
            required: true, 
            message: '请选择作业中心', 
            trigger: ['change', 'submit'] 
          }
        ],

        // 数组中每一项的 ppsId 字段校验
        ppsId: [
          { 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() {
      getWorkList().then(res => {
        this.workList = res.data.data || [];
      });
    },

    selectChange(list, row) {
      row._select = !row._select;
    },

    // 新增一行（直接push到表单模型的 tableData 中）
    addTable() {
      this.form.tableData.push({
        _select: false, // 选择状态
        name: '', // 作业中心ID
        wcId: '', // 槽号/检查项
        ppsId: '' // 维护内容
      });
    },
    remoteMethod(query){
        console.log('query---------------',query)
        // if (!query.trim()) {
        //     this.processList = [];
        //     return;
        // }
        if (query) {
            this.loading = true
            getProcessList({
                name:query
            }).then(res =>{
                this.processList = res.data.data.records;
                this.loading = false
            })
        } else {
            // this.processList = [];
            this.loading = true
            getProcessList({
                size:9999,
                current:1
            }).then(res =>{
                this.processList = res.data.data.records;
                this.loading = false
            })
        }
    },
    // 删除选中行
    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);
        submitData.map(item => {
            item.line = item.line ? 1 : 0
        })
        console.log('submitData',submitData)
        addRecords(submitData).then(res => { 
            if(res.data.code === 200){
                this.$message.success('新增成功');
                this.closeDialog();
            }
        })
        } 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>