<!-- 煤质方案维护弹窗组件 -->
|
<template>
|
<el-dialog v-model="dialogVisible" :title="title" width="600" :close-on-click-modal="false"
|
:before-close="handleClose">
|
<!-- 表单区域 -->
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px"
|
style="max-width: 400px; margin: 0 auto">
|
<!-- 方案名称输入框 -->
|
<el-form-item label="煤质方案名称" prop="plan">
|
<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>
|
</el-form-item>
|
|
<!-- 方案描述文本域 -->
|
<el-form-item label="煤质方案描述" prop="schemeDesc">
|
<el-input v-model="formData.schemeDesc" type="textarea" placeholder="请输入煤质方案描述" :rows="3" />
|
</el-form-item>
|
|
<!-- 操作按钮区域 -->
|
<el-form-item class="dialog-footer">
|
<el-button v-if="isEditMode" @click="resetForm">重置</el-button>
|
<el-button v-else @click="cancelForm">取消</el-button>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ref, reactive, watch, computed, onMounted } from "vue";
|
import { getCoalFieldList, addOrEditCoalPlan } from "@/api/basicInformation/coalQualityMaintenance";
|
|
// ===== 组件属性定义 =====
|
const props = defineProps({
|
/** 关闭弹窗前的回调函数 */
|
beforeClose: {
|
type: Function,
|
default: () => { },
|
},
|
/** 表单数据 */
|
form: {
|
type: Object,
|
default: () => ({}),
|
},
|
/** 操作类型：add-新增，edit-编辑 */
|
addOrEdit: {
|
type: String,
|
default: "add",
|
},
|
/** 弹窗标题 */
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
|
// ===== 事件定义 =====
|
const emit = defineEmits(["submit", "handleBeforeClose"]);
|
|
// ===== 响应式数据 =====
|
/** 表单引用 */
|
const formRef = ref();
|
|
/** 煤质字段选项列表 */
|
const fieldOptions = reactive([]);
|
|
/** 弹窗显示状态 */
|
const dialogVisible = defineModel("coalQualityMaintenanceDialogFormVisible", {
|
required: true,
|
type: Boolean,
|
});
|
|
/** 表单数据 */
|
const formData = ref({});
|
|
// ===== 计算属性 =====
|
/** 是否为编辑模式 */
|
const isEditMode = computed(() => props.addOrEdit === 'edit');
|
|
// ===== 表单验证规则 =====
|
const formRules = reactive({
|
plan: [
|
{ required: true, message: "请输入方案名称", trigger: "blur" },
|
],
|
coalFieldList: [
|
{ 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));
|
};
|
|
/**
|
* 将数组格式的煤质字段转换为字符串
|
*/
|
const stringifyCoalFields = (coalFieldsArray) => {
|
if (!Array.isArray(coalFieldsArray)) return '';
|
return coalFieldsArray.join(',');
|
};
|
|
/**
|
* 初始化表单数据
|
* @param {Object} newForm - 新的表单数据
|
*/
|
const initFormData = (newForm) => {
|
formData.value = { ...newForm };
|
console.log(formData.value)
|
// 处理 coalFieldList 字段：编辑时需要将字符串转换为数组供多选组件使用
|
if (newForm.coalFields) {
|
if (typeof newForm.coalFields === 'string') {
|
// 将字符串转换为ID数组，然后匹配对应的选项对象
|
const ids = parseCoalFields(newForm.coalFields);
|
formData.value.coalFieldList = ids.map(id => {
|
const option = fieldOptions.find(opt => opt.value === id);
|
return option || { fields: `字段${id}`, value: id };
|
});
|
} else if (Array.isArray(newForm.coalFieldList)) {
|
// 确保数组中的值都是正确的对象格式
|
formData.value.coalFieldList = newForm.coalFieldList.map(item => {
|
if (typeof item === 'object' && item.value !== undefined) {
|
return item;
|
} else {
|
// 如果是纯ID，需要匹配对应的选项
|
const id = parseInt(item);
|
const option = fieldOptions.find(opt => opt.value === id);
|
return option || { fields: `字段${id}`, value: id };
|
}
|
});
|
}
|
} else {
|
// 如果没有 coalFieldList，初始化为空数组
|
formData.value.coalFieldList = [];
|
}
|
};
|
|
// ===== 生命周期钩子 =====
|
/**
|
* 组件挂载时获取煤质字段选项
|
*/
|
onMounted(async () => {
|
try {
|
const { data, code } = await getCoalFieldList();
|
if (code === 200) {
|
// 构建选项数据，格式化为{ label, value }
|
fieldOptions.push(...data.map(item => ({
|
label: item.fieldName,
|
value: item.id,
|
fields:item.fields
|
})));
|
} else {
|
console.error("获取煤质字段列表失败", data);
|
}
|
} catch (error) {
|
console.error("获取煤质字段列表异常", error);
|
}
|
});
|
|
// ===== 监听器 =====
|
/**
|
* 监听表单数据变化，实现数据回显
|
*/
|
watch(() => props.form, initFormData, {
|
deep: true,
|
immediate: true
|
});
|
|
// ===== 事件处理函数 =====
|
/**
|
* 提交表单
|
*/
|
const submitForm = async () => {
|
if (!formRef.value) return;
|
|
// 初始化字段数组
|
formData.value.fieldIds = [];
|
formData.value.coalFields = [];
|
|
// 安全处理 coalFieldList 数据
|
if (formData.value.coalFieldList && Array.isArray(formData.value.coalFieldList)) {
|
formData.value.coalFieldList.forEach((element) => {
|
// 检查元素是否为对象并且有必要的属性
|
if (element && typeof element === 'object') {
|
if (element.value !== undefined) {
|
formData.value.fieldIds.push(element.value);
|
}
|
if (element.fields !== undefined) {
|
formData.value.coalFields.push(element.fields);
|
}
|
} else {
|
// 如果元素是简单值，直接使用
|
formData.value.fieldIds.push(element);
|
// 尝试从 fieldOptions 中找到对应的 label
|
const option = fieldOptions.find(opt => opt.value === element);
|
if (option) {
|
formData.value.coalFields.push(option.fields);
|
}
|
}
|
});
|
}
|
|
// 删除临时字段
|
delete formData.value.coalFieldList;
|
|
try {
|
// 准备提交数据：将数组转换为字符串
|
const submitData = {
|
...formData.value,
|
coalFields: stringifyCoalFields(formData.value.coalFields),
|
fieldIds: stringifyCoalFields(formData.value.fieldIds)
|
};
|
|
// 删除不需要的时间字段（编辑时）
|
if (isEditMode.value) {
|
delete submitData.createTime;
|
delete submitData.updateTime;
|
}
|
|
// 调用API提交数据
|
const result = await addOrEditCoalPlan(submitData);
|
|
// 构建响应数据并触发提交事件
|
const responseData = {
|
title: isEditMode.value ? "编辑" : "新增",
|
...submitData,
|
result
|
};
|
emit("submit", responseData);
|
} catch (error) {
|
console.error("表单提交失败", error);
|
}
|
};
|
|
/**
|
* 取消操作
|
*/
|
const cancelForm = () => {
|
dialogVisible.value = false;
|
formData.value = {};
|
};
|
|
/**
|
* 重置表单
|
*/
|
const resetForm = () => {
|
if (!formRef.value) return;
|
formRef.value.resetFields();
|
};
|
|
/**
|
* 关闭弹窗
|
*/
|
const handleClose = () => {
|
emit("handleBeforeClose");
|
dialogVisible.value = false;
|
};
|
</script>
|
<style lang="scss" scoped>
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
flex-direction: column;
|
}
|
</style>
|
