<template>
|
<div>
|
<el-dialog v-model="isShow"
|
title="编辑工艺路线"
|
width="400"
|
@close="closeModal">
|
<el-form label-width="140px"
|
:model="formState"
|
label-position="top"
|
ref="formRef">
|
<el-form-item label="产品类型"
|
prop="dictCode"
|
:rules="[
|
{
|
required: true,
|
message: '请选择产品类型',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.dictCode"
|
placeholder="请选择产品类型"
|
clearable
|
style="width: 100%"
|
@change="handleProductTypeChange">
|
<el-option v-for="item in productTypeOptions"
|
:key="item.dictCode"
|
:label="item.dictLabel"
|
:value="item.dictCode" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="BOM"
|
prop="bomId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择BOM',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.bomId"
|
placeholder="请选择BOM"
|
clearable
|
:disabled="!formState.dictCode || bomOptions.length === 0"
|
style="width: 100%">
|
<el-option v-for="item in bomOptions"
|
:key="item.id"
|
:label="item.bomNo || `BOM-${item.id}`"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="description">
|
<el-input v-model="formState.description"
|
type="textarea" />
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary"
|
@click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
computed,
|
getCurrentInstance,
|
onMounted,
|
nextTick,
|
watch,
|
} from "vue";
|
import { update } from "@/api/productionManagement/processRoute.js";
|
import { listPage } from "@/api/productionManagement/productBom.js";
|
import { getDicts } from "@/api/system/dict/data.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
|
record: {
|
type: Object,
|
required: true,
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "completed"]);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
dictCode: undefined,
|
dictLabel: "",
|
bomId: undefined,
|
description: "",
|
});
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit("update:visible", val);
|
},
|
});
|
|
const productTypeOptions = ref([]);
|
const bomOptions = ref([]);
|
|
let { proxy } = getCurrentInstance();
|
|
// 获取产品类型字典
|
const getProductTypeOptions = () => {
|
getDicts("product_type")
|
.then(res => {
|
if (res.code === 200) {
|
productTypeOptions.value = res.data;
|
}
|
})
|
.catch(err => {
|
console.error("获取产品类型字典失败：", err);
|
});
|
};
|
|
// 根据产品类型获取BOM列表
|
const getBomListByProductType = async dictCode => {
|
if (!dictCode) {
|
bomOptions.value = [];
|
return;
|
}
|
try {
|
// 使用listPage接口，根据dictCode查询BOM
|
const res = await listPage({ dictCode });
|
// 处理返回的BOM数据
|
let bomList = [];
|
if (res.data && res.data.records) {
|
bomList = res.data.records;
|
}
|
bomOptions.value = bomList;
|
if (bomList.length === 0) {
|
proxy.$modal.msgError("该产品类型没有BOM，请先创建BOM");
|
}
|
} catch (error) {
|
// 如果接口返回404或其他错误，说明没有BOM
|
proxy.$modal.msgError("该产品类型没有BOM，请先创建BOM");
|
bomOptions.value = [];
|
}
|
};
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
// 设置表单数据
|
const setFormData = () => {
|
if (props.record) {
|
formState.value = {
|
...props.record,
|
dictCode: props.record.dictCode,
|
dictLabel: props.record.dictLabel || "",
|
bomId: props.record.bomId,
|
description: props.record.description || "",
|
};
|
// 如果有产品类型，加载BOM列表
|
if (props.record.dictCode) {
|
getBomListByProductType(props.record.dictCode);
|
}
|
}
|
};
|
|
// 产品类型选择处理
|
const handleProductTypeChange = async dictCode => {
|
if (dictCode) {
|
const selectedType = productTypeOptions.value.find(item => item.dictCode === dictCode);
|
if (selectedType) {
|
formState.value.dictLabel = selectedType.dictLabel;
|
}
|
// 如果当前选择的BOM不在新列表中，则重置BOM选择
|
formState.value.bomId = undefined;
|
await getBomListByProductType(dictCode);
|
// 触发表单验证更新
|
proxy.$refs["formRef"]?.validateField("dictCode");
|
} else {
|
formState.value.dictLabel = "";
|
bomOptions.value = [];
|
}
|
};
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
// 验证是否选择了产品类型和BOM
|
if (!formState.value.dictCode) {
|
proxy.$modal.msgError("请选择产品类型");
|
return;
|
}
|
if (!formState.value.bomId) {
|
proxy.$modal.msgError("请选择BOM");
|
return;
|
}
|
update(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit("completed");
|
proxy.$modal.msgSuccess("提交成功");
|
});
|
}
|
});
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
|
// 监听弹窗打开，初始化表单数据
|
watch(
|
() => props.visible,
|
visible => {
|
if (visible && props.record) {
|
nextTick(() => {
|
setFormData();
|
});
|
}
|
},
|
{ immediate: true }
|
);
|
|
onMounted(() => {
|
getProductTypeOptions();
|
if (props.visible && props.record) {
|
setFormData();
|
}
|
});
|
</script>
|
