<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="productId">
|
<el-tree-select
|
v-model="formState.productId"
|
placeholder="请选择"
|
clearable
|
check-strictly
|
@change="getModels"
|
:data="productOptions"
|
:render-after-expand="false"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
|
<el-form-item label="规格型号：" prop="productModelId">
|
<el-select
|
v-model="formState.productModelId"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="item in productModelsOptions"
|
:key="item.id"
|
:label="item.model"
|
: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} from "vue";
|
import {add} from "@/api/productionManagement/processRoute.js";
|
import {modelList, productTreeList} from "@/api/basicData/product.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
});
|
|
const emit = defineEmits(['update:visible', 'completed']);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
productId: undefined,
|
productModelId: undefined,
|
description: '',
|
});
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit('update:visible', val);
|
},
|
});
|
|
const productModelsOptions = ref([])
|
const productOptions = ref([])
|
|
let { proxy } = getCurrentInstance()
|
|
const closeModal = () => {
|
isShow.value = false;
|
};
|
|
const getProductOptions = () => {
|
productTreeList().then((res) => {
|
productOptions.value = convertIdToValue(res);
|
});
|
};
|
const getModels = (value) => {
|
formState.value.productId = undefined;
|
formState.value.productModelId = undefined;
|
productModelsOptions.value = [];
|
|
if (value) {
|
formState.value.productId = findNodeById(productOptions.value, value) || undefined;
|
modelList({ id: value }).then((res) => {
|
productModelsOptions.value = res;
|
});
|
}
|
};
|
|
const findNodeById = (nodes, productId) => {
|
for (let i = 0; i < nodes.length; i++) {
|
if (nodes[i].value === productId) {
|
return nodes[i].label; // 找到节点，返回该节点的label
|
}
|
if (nodes[i].children && nodes[i].children.length > 0) {
|
const foundNode = findNodeById(nodes[i].children, productId);
|
if (foundNode) {
|
return foundNode; // 在子节点中找到，直接返回（已经是label字符串）
|
}
|
}
|
}
|
return null; // 没有找到节点，返回null
|
};
|
|
function convertIdToValue(data) {
|
return data.map((item) => {
|
const { id, children, ...rest } = item;
|
const newItem = {
|
...rest,
|
value: id, // 将 id 改为 value
|
};
|
if (children && children.length > 0) {
|
newItem.children = convertIdToValue(children);
|
}
|
|
return newItem;
|
});
|
}
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
add(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit('completed');
|
proxy.$modal.msgSuccess("提交成功");
|
})
|
}
|
})
|
};
|
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
|
onMounted(() => {
|
getProductOptions()
|
})
|
</script>
|
