gaoluyang
2 天以前 df1406d0f571972d033dffd6a93fb4b94febeb56
src/views/basicInformation/mould/coalQualityMaintenance.vue
@@ -1,25 +1,26 @@
<!-- 煤质方案维护弹窗组件 -->
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false"
    :before-close="handleClose">
             :before-close="handleClose">
    <!-- 表单区域 -->
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px"
      style="max-width: 400px; margin: 0 auto">
             style="max-width: 400px; margin: 0 auto">
      <!-- 方案名称输入框 -->
      <el-form-item label="煤质方案名称" prop="plan">
        <el-input v-model="formData.plan" placeholder="请输入煤质方案名称" clearable />
        <el-input v-model="formData.plan" placeholder="请输入煤质方案名称" clearable/>
      </el-form-item>
      <!-- 煤质字段多选下拉框 -->
      <el-form-item label="煤质方案类型" prop="coalFieldList">
        <el-select v-model="formData.coalFieldList" placeholder="请选择煤质方案类型" style="width: 100%" clearable multiple>
          <el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item" />
        <el-select v-model="formData.coalFieldList" placeholder="请选择煤质方案类型" style="width: 100%" clearable
                   multiple>
          <el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item"/>
        </el-select>
      </el-form-item>
      <!-- 方案描述文本域 -->
      <el-form-item label="煤质方案描述" prop="schemeDesc">
        <el-input v-model="formData.schemeDesc" type="textarea" placeholder="请输入煤质方案描述" :rows="3" />
        <el-input v-model="formData.schemeDesc" type="textarea" placeholder="请输入煤质方案描述" :rows="3"/>
      </el-form-item>
      <!-- 操作按钮区域 -->
@@ -32,15 +33,16 @@
  </el-dialog>
</template>
<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { getCoalFieldList, addOrEditCoalPlan } from "@/api/basicInformation/coalQualityMaintenance";
import {ref, reactive, watch, computed, onMounted} from "vue";
import {getCoalFieldList, addOrEditCoalPlan} from "@/api/basicInformation/coalQualityMaintenance";
// ===== 组件属性定义 =====
const props = defineProps({
  /** 关闭弹窗前的回调函数 */
  beforeClose: {
    type: Function,
    default: () => { },
    default: () => {
    },
  },
  /** 表单数据 */
  form: {
@@ -58,7 +60,10 @@
    default: "",
  },
});
const copyForm = defineModel("copyForm", {
  required: true,
  type: Object,
});
// ===== 事件定义 =====
const emit = defineEmits(["submit", "handleBeforeClose"]);
@@ -85,10 +90,10 @@
// ===== 表单验证规则 =====
const formRules = reactive({
  plan: [
    { required: true, message: "请输入方案名称", trigger: "blur" },
    {required: true, message: "请输入方案名称", trigger: "blur"},
  ],
  coalFieldList: [
    { required: true, message: "请选择方案类型", trigger: "blur" },
    {required: true, message: "请选择方案类型", trigger: "blur"},
  ],
});
@@ -99,9 +104,9 @@
const parseCoalFields = (coalFieldsStr) => {
  if (!coalFieldsStr || typeof coalFieldsStr !== 'string') return [];
  return coalFieldsStr
    .split(',')
    .map(id => parseInt(id.trim()))
    .filter(id => !isNaN(id));
      .split(',')
      .map(id => parseInt(id.trim()))
      .filter(id => !isNaN(id));
};
/**
@@ -117,7 +122,7 @@
 * @param {Object} newForm - 新的表单数据
 */
const initFormData = (newForm) => {
  formData.value = { ...newForm };
  formData.value = {...newForm};
  // 处理 coalFieldList 字段:编辑时需要将字符串转换为数组供多选组件使用
  if (newForm.fieldIds) {
    if (typeof newForm.fieldIds === 'string') {
@@ -125,7 +130,7 @@
      const ids = parseCoalFields(newForm.fieldIds);
      formData.value.coalFieldList = ids.map(id => {
        const option = fieldOptions.find(opt => opt.value === id);
        return option || { fields: `字段${id}`, value: id };
        return option || {fields: `字段${id}`, value: id};
      });
    } else if (Array.isArray(newForm.coalFieldList)) {
      // 确保数组中的值都是正确的对象格式
@@ -136,7 +141,7 @@
          // 如果是纯ID,需要匹配对应的选项
          const id = parseInt(item);
          const option = fieldOptions.find(opt => opt.value === id);
          return option || { fields: `字段${id}`, value: id };
          return option || {fields: `字段${id}`, value: id};
        }
      });
    }
@@ -152,13 +157,13 @@
 */
onMounted(async () => {
  try {
    const { data, code } = await getCoalFieldList();
    const {data, code} = await getCoalFieldList();
    if (code === 200) {
      // 构建选项数据,格式化为{ label, value }
      fieldOptions.push(...data.map(item => ({
        label: item.fieldName,
        value: item.id,
        fields:item.fields
        fields: item.fields
      })));
    } else {
      console.error("获取煤质字段列表失败", data);
@@ -248,8 +253,8 @@
 * 重置表单
 */
const resetForm = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
  initFormData(formData.value);
};
/**