| | |
| | | <!-- 煤质方案维护弹窗组件 --> |
| | | <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> |
| | | |
| | | <!-- 操作按钮区域 --> |
| | |
| | | </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: { |
| | |
| | | default: "", |
| | | }, |
| | | }); |
| | | |
| | | const copyForm = defineModel("copyForm", { |
| | | required: true, |
| | | type: Object, |
| | | }); |
| | | // ===== 事件定义 ===== |
| | | const emit = defineEmits(["submit", "handleBeforeClose"]); |
| | | |
| | |
| | | // ===== 表单验证规则 ===== |
| | | 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"}, |
| | | ], |
| | | }); |
| | | |
| | |
| | | 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)); |
| | | }; |
| | | |
| | | /** |
| | |
| | | * @param {Object} newForm - 新的表单数据 |
| | | */ |
| | | const initFormData = (newForm) => { |
| | | formData.value = { ...newForm }; |
| | | formData.value = {...newForm}; |
| | | // 处理 coalFieldList 字段:编辑时需要将字符串转换为数组供多选组件使用 |
| | | if (newForm.fieldIds) { |
| | | if (typeof newForm.fieldIds === 'string') { |
| | |
| | | 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)) { |
| | | // 确保数组中的值都是正确的对象格式 |
| | |
| | | // 如果是纯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}; |
| | | } |
| | | }); |
| | | } |
| | |
| | | */ |
| | | 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); |
| | |
| | | * 重置表单 |
| | | */ |
| | | const resetForm = () => { |
| | | if (!formRef.value) return; |
| | | formRef.value.resetFields(); |
| | | formData.value = JSON.parse(JSON.stringify(copyForm.value)); |
| | | initFormData(formData.value); |
| | | }; |
| | | |
| | | /** |