| | |
| | | <el-row :gutter="16"> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="产品名称:" |
| | | prop="productId" |
| | | label="部件名称" |
| | | prop="name" |
| | | :rules="[ |
| | | { |
| | | required: true, |
| | | message: '请选择产品名称', |
| | | }, |
| | | ]"> |
| | | <el-tree-select |
| | | v-model="formState.productId" |
| | | placeholder="请选择产品名称" |
| | | clearable |
| | | filterable |
| | | check-strictly |
| | | :data="productCategoryOptions" |
| | | :render-after-expand="false" |
| | | style="width: 100%" |
| | | @change="handleProductChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item |
| | | label="产品规格:" |
| | | prop="productModelId" |
| | | :rules="[ |
| | | { |
| | | required: true, |
| | | message: '请选择产品规格', |
| | | }, |
| | | ]"> |
| | | <el-select v-model="formState.productModelId" |
| | | placeholder="请选择产品规格" |
| | | clearable |
| | | filterable |
| | | :disabled="!formState.productId" |
| | | style="width: 100%"> |
| | | <el-option v-for="item in modelOptions" |
| | | :key="item.id" |
| | | :label="item.model" |
| | | :value="item.id" /> |
| | | </el-select> |
| | | message: '请输入部件名称', |
| | | } |
| | | ]" |
| | | > |
| | | <el-input v-model="formState.name" placeholder="请输入部件名称" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="部件编号" prop="no"> |
| | | <el-input v-model="formState.no" /> |
| | | <el-input v-model="formState.no" placeholder="请输入部件编号" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="计划执行人员" prop="executorId"> |
| | | <el-select |
| | | v-model="formState.executorId" |
| | | placeholder="请选择计划执行人员" |
| | | clearable |
| | | filterable |
| | | style="width: 100%" |
| | | @change="handleExecutorChange" |
| | | > |
| | | <el-option |
| | | v-for="item in plannerOptions" |
| | | :key="item.userId" |
| | | :label="item.nickName" |
| | | :value="item.userId" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="是否质检" prop="isQuality"> |
| | | <el-switch v-model="formState.isQuality" :active-value="true" inactive-value="false"/> |
| | | </el-form-item> |
| | |
| | | <script setup> |
| | | import { ref, computed, getCurrentInstance, watch, onMounted } from "vue"; |
| | | import {update} from "@/api/productionManagement/productionProcess.js"; |
| | | import { modelListPage, productTreeList } from "@/api/basicData/product"; |
| | | import { userListNoPageByTenantId } from "@/api/system/user.js"; |
| | | |
| | | const props = defineProps({ |
| | |
| | | const formState = ref({ |
| | | id: props.record.id, |
| | | name: props.record.name, |
| | | productId: props.record.productId, |
| | | productModelId: props.record.productModelId, |
| | | type: props.record.type, |
| | | no: props.record.no, |
| | | remark: props.record.remark, |
| | | salaryQuota: props.record.salaryQuota, |
| | | plannerId: props.record.plannerId, |
| | | plannerName: props.record.plannerName, |
| | | executorId: props.record.executorId, |
| | | executorName: props.record.executorName, |
| | | isQuality: props.record.isQuality, |
| | | }); |
| | | const productCategoryOptions = ref([]); |
| | | const modelOptions = ref([]); |
| | | const plannerOptions = ref([]); |
| | | |
| | | const isShow = computed({ |
| | |
| | | formState.value = { |
| | | id: newRecord.id, |
| | | name: newRecord.name || '', |
| | | productId: newRecord.productId, |
| | | productModelId: getRecordProductModelId(newRecord), |
| | | no: newRecord.no || '', |
| | | type: newRecord.type, |
| | | no: newRecord.no || '', |
| | | remark: newRecord.remark || '', |
| | | salaryQuota: newRecord.salaryQuota || '', |
| | | plannerId: newRecord.plannerId, |
| | | plannerName: newRecord.plannerName || '', |
| | | executorId: newRecord.executorId, |
| | | executorName: newRecord.executorName || '', |
| | | isQuality: props.record.isQuality, |
| | | }; |
| | | } |
| | |
| | | formState.value = { |
| | | id: props.record.id, |
| | | name: props.record.name || '', |
| | | productId: props.record.productId, |
| | | productModelId: getRecordProductModelId(props.record), |
| | | no: props.record.no || '', |
| | | type: props.record.type, |
| | | no: props.record.no || '', |
| | | remark: props.record.remark || '', |
| | | salaryQuota: props.record.salaryQuota || '', |
| | | plannerId: props.record.plannerId, |
| | | plannerName: props.record.plannerName || '', |
| | | executorId: props.record.executorId, |
| | | executorName: props.record.executorName || '', |
| | | isQuality: props.record.isQuality, |
| | | }; |
| | | getModelOptions(formState.value.productId); |
| | | } |
| | | }); |
| | | |
| | |
| | | return; |
| | | } |
| | | callback(); |
| | | }; |
| | | |
| | | const convertProductTree = list => { |
| | | return (list || []).map(item => { |
| | | const children = convertProductTree(item.children || item.childList || []); |
| | | return { |
| | | ...item, |
| | | value: item.id, |
| | | label: item.name || item.label, |
| | | children, |
| | | disabled: children.length > 0, |
| | | }; |
| | | }); |
| | | }; |
| | | |
| | | const findNodeById = (nodes, targetId) => { |
| | | for (const node of nodes || []) { |
| | | if (String(node.value) === String(targetId)) { |
| | | return node; |
| | | } |
| | | if (node.children && node.children.length > 0) { |
| | | const found = findNodeById(node.children, targetId); |
| | | if (found) return found; |
| | | } |
| | | } |
| | | return null; |
| | | }; |
| | | |
| | | const findNodeIdByLabel = (nodes, targetLabel) => { |
| | | for (const node of nodes || []) { |
| | | if (node.label === targetLabel) { |
| | | return node.value; |
| | | } |
| | | if (node.children && node.children.length > 0) { |
| | | const found = findNodeIdByLabel(node.children, targetLabel); |
| | | if (found !== null && found !== undefined) return found; |
| | | } |
| | | } |
| | | return undefined; |
| | | }; |
| | | |
| | | function findModelIdByName(models, modelName) { |
| | | if (!modelName) { |
| | | return undefined; |
| | | } |
| | | const matched = (models || []).find(item => String(item.model) === String(modelName)); |
| | | return matched?.id; |
| | | } |
| | | |
| | | function getRecordProductModelId(record) { |
| | | if (!record) { |
| | | return undefined; |
| | | } |
| | | return record.productModelId ?? record.modelId ?? record.specificationModelId ?? undefined; |
| | | } |
| | | |
| | | function syncProductModelIdFromModelName() { |
| | | if (formState.value.productModelId || modelOptions.value.length === 0) { |
| | | return; |
| | | } |
| | | const modelName = props.record?.productModel || props.record?.model || props.record?.specificationModel || ""; |
| | | const matchedId = findModelIdByName(modelOptions.value, modelName); |
| | | if (matchedId !== undefined) { |
| | | formState.value.productModelId = matchedId; |
| | | } |
| | | } |
| | | |
| | | const getProductCategoryOptions = async () => { |
| | | try { |
| | | const res = await productTreeList(); |
| | | const list = Array.isArray(res) ? res : res?.data || []; |
| | | productCategoryOptions.value = convertProductTree(list); |
| | | if (!formState.value.productId && formState.value.name) { |
| | | formState.value.productId = findNodeIdByLabel(productCategoryOptions.value, formState.value.name); |
| | | } |
| | | await getModelOptions(formState.value.productId); |
| | | syncProductModelIdFromModelName(); |
| | | } catch (e) { |
| | | productCategoryOptions.value = []; |
| | | } |
| | | }; |
| | | |
| | | const getModelOptions = async productId => { |
| | | if (!productId) { |
| | | modelOptions.value = []; |
| | | return; |
| | | } |
| | | try { |
| | | const res = await modelListPage({ |
| | | id: productId, |
| | | current: 1, |
| | | size: 999, |
| | | }); |
| | | const records = res?.records || res?.data?.records || []; |
| | | modelOptions.value = records; |
| | | syncProductModelIdFromModelName(); |
| | | } catch (e) { |
| | | modelOptions.value = []; |
| | | } |
| | | }; |
| | | |
| | | const getPlannerOptions = async () => { |
| | |
| | | formState.value.plannerName = selectedUser?.nickName || ''; |
| | | }; |
| | | |
| | | const handleProductChange = async value => { |
| | | const selectedNode = findNodeById(productCategoryOptions.value, value); |
| | | formState.value.name = selectedNode?.label || ''; |
| | | formState.value.productModelId = undefined; |
| | | await getModelOptions(value); |
| | | const handleExecutorChange = value => { |
| | | const selectedUser = plannerOptions.value.find(item => String(item.userId) === String(value)); |
| | | formState.value.executorName = selectedUser?.nickName || ''; |
| | | }; |
| | | |
| | | const closeModal = () => { |
| | |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | getProductCategoryOptions(); |
| | | getPlannerOptions(); |
| | | }); |
| | | |