jonhon-mes-web/src/views/processManagement/bathRefine/components/addAccumulateClassDialog.vue

<template>
  <el-dialog
    :title="title"
    append-to-body
    :modelValue="openShow"
    width="70%"
    @close="closeDialog"
    fullscreen
  >
    <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" v-if="moldAddMore"></el-table-column>

        <el-table-column align="center" label="作业中心" prop="wcId">
          <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"
                clearable
                filterable
                @change="changeWorkCenter(scope.$index)"
              >
                <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="作业槽" prop="batchNo">
          <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"
                clearable
                filterable
                @change="changeBatchNo(scope.$index)"
              >
                <el-option
                  v-for="item in scope.row.batchNoOptions"
                  :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="设备" prop="device">
          <template #header>
            <span><i style="color: red">*</i>设备</span>
          </template>
          <template #default="scope">
            <el-form-item :prop="`tableData[${scope.$index}].device`" :rules="formRules.device">
              <el-select
                v-model="scope.row.device"
                clearable
                filterable
                @change="changeDevice(scope.$index)"
              >
                <el-option
                  v-for="item in scope.row.deviceOptions"
                  :key="item.id"
                  :label="`${item.deviceName}/${item.deviceCode}`"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column align="center" label="规则类型" prop="ruleType">
          <template #header>
            <span><i style="color: red">*</i>规则类型</span>
          </template>
          <template #default="scope">
            <el-form-item :prop="`tableData[${scope.$index}].ruleType`" :rules="formRules.ruleType">
              <el-select v-model="scope.row.ruleType" clearable filterable>
                <el-option
                  v-for="item in ruleTypeData"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="维护内容" prop="preserveContent">
          <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"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="添加量" prop="addQuantityType" width="250">
          <!-- <template #header>
            <span><i style="color: red">*</i>添加量</span>
          </template> -->
          <template #default="scope">
            <!-- <el-form-item
              :prop="`tableData[${scope.$index}].addQuantity`"
              :rules="formRules.addQuantity"
            > -->
            <el-radio-group v-model="scope.row.addQuantityType">
              <el-radio label="1">当前值</el-radio>
              <el-radio label="2">自定义</el-radio>
            </el-radio-group>

            <el-input v-if="scope.row.addQuantityType == '2'" v-model="scope.row.addQuantity"></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="添加量倍数" prop="addQuantityMultiple">
          <!-- <template #header>
            <span><i style="color: red">*</i>添加量倍数</span>
          </template> -->
          <template #default="scope">
            <!-- <el-form-item
              :prop="`tableData[${scope.$index}].addQuantityMultiple`"
              :rules="formRules.addQuantityMultiple"
            > -->
            <el-input v-model="scope.row.addQuantityMultiple"></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计触发值" prop="cumulativeTriggerValue">
          <template #header>
            <span><i style="color: red">*</i>累计触发值</span>
          </template>
          <template #default="scope">
            <el-form-item
              :prop="`tableData[${scope.$index}].cumulativeTriggerValue`"
              :rules="formRules.cumulativeTriggerValue"
            >
              <el-input v-model="scope.row.cumulativeTriggerValue"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计初始值" prop="cumulativeInitialValue">
          <template #default="scope">
            <el-date-picker
              style="width: 100%"
              v-if="
                scope.row.ruleType == 3 ||
                scope.row.ruleType == 2 ||
                scope.row.ruleType == 5 ||
                scope.row.ruleType == 6
              "
              v-model="scope.row.cumulativeInitialValue"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
            <el-input
              v-else
              v-model="scope.row.cumulativeInitialValue"
              :disabled="scope.row.ruleType == 4 || scope.row.ruleType == 1"
            ></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="有效期" prop="periodOfValidity" width="200">
          <template #default="scope">
            <el-radio-group v-model="scope.row.periodOfValidity">
              <el-radio label="1">长期</el-radio>
              <el-radio label="2">一次性</el-radio>
            </el-radio-group>
          </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 { add, update } from '@/api/processManagement/planClass.js';
import { getTank } from '@/api/tankSolutionSystem/info';
import { getEquipmentList } from '@/api/processManagement/specialProcess';
export default {
  props: {
    showDialog: { type: Boolean, default: false },
    moldAddMore: { type: Boolean, default: false },
    tabPosition: { type: String, default: '' },
    title: { type: String, default: '' },
    maintainData: { type: Array, default: [] },
  },
  data() {
    return {
      batchNoOptions: [],
      ruleTypeData: [
        {
          label: '电量差类',
          value: 1,
        },

        {
          label: '主盐添加量类',
          value: 4,
        },
        {
          label: '累计电量类',
          value: 2,
        },
        {
          label: '累计生产日期',
          value: 3,
        },

        {
          label: '累计生产面积',
          value: 5,
        },
        {
          label: '累计主盐添加量',
          value: 6,
        },
      ],
      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: '请选择',
            trigger: ['change', 'submit'],
          },
        ],
        // 数组中每一项的 preserveContent 字段校验
        preserveContent: [
          { required: true, message: '请填写维护内容', trigger: ['blur', 'submit'] },
          { max: 200, message: '维护内容不能超过200个字符', trigger: ['input', 'submit'] },
        ],
        ruleType: [{ required: true, message: '请选择', trigger: ['change', 'submit'] }],
        addQuantity: [{ required: true, message: '请输入', trigger: ['change', 'submit'] }],
        addQuantityMultiple: [{ required: true, message: '请输入', trigger: ['change', 'submit'] }],
        cumulativeTriggerValue: [
          { required: true, message: '请输入', trigger: ['change', 'submit'] },
        ],
        cumulativeInitialValue: [
          { required: true, message: '请输入', trigger: ['change', 'submit'] },
        ],
        device: [{ required: true, message: '请选择', trigger: ['change', 'submit'] }],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.getWorkCenterList();
    if (this.title == '新增') {
      // 初始添加一行（可选）
      if (this.moldAddMore && this.form.tableData.length === 0) {
        this.addTable();
      }
    } else {
      this.maintainData.forEach((item, index) => {
        this.getTankList(item.wcId, index);
        this.getEquipmentList(item.wcId, index);
      });
      this.form.tableData = this.maintainData;
    }
  },
  methods: {
    // 切换作业中心
    changeWorkCenter(index) {
      this.form.batchNo = '';
      this.form.tableData[index].device = '';
      this.getTankList(this.form.tableData[index].wcId, index);
      this.getEquipmentList(this.form.tableData[index].wcId, index);
    }, // 查询作业槽下拉列表
    getTankList(val, index) {
      getTank({ workstationId: val ? val : '' }).then(res => {
        this.form.tableData[index].batchNoOptions = res.data.data;
      });
    },
    getEquipmentList(val, index) {
      getEquipmentList({ workstationId: val ? val : '' }).then(res => {
        this.form.tableData[index].deviceOptions = res.data.data.records;
      });
    },
    changeDevice(index) {
      let select = this.form.tableData[index].deviceOptions.filter(
        row => row.id == this.form.tableData[index].device
      );
      this.form.tableData[index].deviceName = select[0].deviceName;
    },
    changeBatchNo(index) {
      let select = this.form.tableData[index].batchNoOptions.filter(
        row => row.id == this.form.tableData[index].batchNo
      );
      console.log(select, 'select');
      this.form.tableData[index].batchNoName = select[0].name;
    },
    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: '', // 维护内容
        bbpType: 2,
        periodOfValidity: 2,
      });
    },

    // 删除选中行
    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 {
          add(submitData).then(res => {
            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>