| | |
| | | label="规格"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="[{ required: true, message: '请选择规格', trigger: ['blur','change'] }]" |
| | | :rules="[{ required: false, message: '请选择规格', trigger: ['blur','change'] }]" |
| | | style="margin: 0"> |
| | | <el-select v-model="row.model" |
| | | placeholder="请选择规格" |
| | | clearable |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" |
| | | :disabled="!dataValue.isEdit" |
| | | style="width: 100%" |
| | | @visible-change="(v) => { if (v) openDialog(row.tempId) }"> |
| | | <el-option v-if="row.model" |
| | |
| | | label="消耗工序"> |
| | | <template #default="{ row, $index }"> |
| | | <el-form-item v-if="dataValue.isEdit" |
| | | :rules="dataValue.dataList.some(item => (item as any).tempId === row.tempId) ? [] : [{ required: true, message: '请选择消耗工序', trigger: 'change' }]" |
| | | :rules="[{ required: true, message: '请选择消耗工序', trigger: 'change' }]" |
| | | style="margin: 0"> |
| | | <el-select v-model="row.processId" |
| | | placeholder="请选择" |
| | | filterable |
| | | clearable |
| | | style="width: 100%" |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)"> |
| | | :disabled="!dataValue.isEdit"> |
| | | <el-option v-for="item in dataValue.processOptions" |
| | | :key="item.id" |
| | | :label="item.name" |
| | |
| | | style="margin: 0"> |
| | | <el-input-number v-model="row.unitQuantity" |
| | | :min="0" |
| | | :precision="2" |
| | | :step="1" |
| | | controls-position="right" |
| | | style="width: 100%" |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" /> |
| | | :disabled="!dataValue.isEdit" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | :step="1" |
| | | controls-position="right" |
| | | style="width: 100%" |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" /> |
| | | :disabled="!dataValue.isEdit" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <el-input v-model="row.unit" |
| | | placeholder="请输入单位" |
| | | clearable |
| | | :disabled="!dataValue.isEdit || dataValue.dataList.some(item => (item as any).tempId === row.tempId)" /> |
| | | :disabled="!dataValue.isEdit" /> |
| | | </el-form-item> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | fixed="right" |
| | | width="200"> |
| | | <template #default="{ row, $index }"> |
| | | <el-button v-if="dataValue.isEdit && !dataValue.dataList.some(item => (item as any).tempId === row.tempId)" |
| | | <el-button v-if="dataValue.isEdit" |
| | | type="danger" |
| | | text |
| | | @click="removeItem(row.tempId)">删除 |
| | |
| | | </el-table-column> |
| | | <el-table-column label="BOM编号" |
| | | prop="bomNo" /> |
| | | <el-table-column label="产品名称" |
| | | prop="productName" /> |
| | | <el-table-column label="规格型号" |
| | | prop="model" /> |
| | | <el-table-column label="产品类型" |
| | | prop="dictLabel" /> |
| | | </el-table> |
| | | <div v-if="dataValue.isEdit" |
| | | style="text-align: center;border: 1px solid #e4e7ed;padding: 10px;transition: all 0.3s ease;cursor: pointer;" |
| | | :class="{'hover-effect': dataValue.isEdit}"> |
| | | <el-button type="primary" |
| | | text |
| | | @click="addItem"> |
| | | <el-icon style="vertical-align: middle;margin-right: 5px;"> |
| | | <Plus /> |
| | | </el-icon> |
| | | 添加 |
| | | </el-button> |
| | | </div> |
| | | <product-select-dialog v-if="dataValue.showProductDialog" |
| | | v-model:model-value="dataValue.showProductDialog" |
| | | single |
| | | @confirm="handleProduct" /> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | // 从路由参数获取产品信息 |
| | | const routeBomNo = computed(() => route.query.bomNo || ""); |
| | | const routeProductName = computed(() => route.query.productName || ""); |
| | | const routeProductModelName = computed( |
| | | () => route.query.productModelName || "" |
| | | ); |
| | | const routeDictLabel = computed(() => route.query.dictLabel || ""); |
| | | |
| | | const routeOrderId = computed(() => route.query.orderId); |
| | | const pageType = computed(() => route.query.type); |
| | | const isOrderPage = computed( |
| | |
| | | |
| | | const tableData = reactive([ |
| | | { |
| | | productName: "", |
| | | model: "", |
| | | bomNo: "", |
| | | dictLabel: "", |
| | | }, |
| | | ]); |
| | | |
| | |
| | | const productData = row[0]; |
| | | |
| | | // 最外层组件中,与当前产品相同的产品只能有一个 |
| | | const isTopLevel = dataValue.dataList.some(item => (item as any).tempId === dataValue.currentRowName); |
| | | const isTopLevel = dataValue.dataList.some( |
| | | item => (item as any).tempId === dataValue.currentRowName |
| | | ); |
| | | if (isTopLevel) { |
| | | if (productData.productName === tableData[0].productName && |
| | | productData.model === tableData[0].model) { |
| | | if ( |
| | | productData.productName === tableData[0].productName && |
| | | productData.model === tableData[0].model |
| | | ) { |
| | | // 查找是否已经有其他顶层行已经是这个产品 |
| | | const hasOther = dataValue.dataList.some(item => |
| | | (item as any).tempId !== dataValue.currentRowName && |
| | | (item as any).productName === tableData[0].productName && |
| | | (item as any).model === tableData[0].model |
| | | const hasOther = dataValue.dataList.some( |
| | | item => |
| | | (item as any).tempId !== dataValue.currentRowName && |
| | | (item as any).productName === tableData[0].productName && |
| | | (item as any).model === tableData[0].model |
| | | ); |
| | | if (hasOther) { |
| | | ElMessage.warning("最外层和当前产品一样的一级只能有一个"); |
| | |
| | | |
| | | // 校验函数 |
| | | const validateItem = (item: any, isTopLevel = false) => { |
| | | console.log(item, "item"); |
| | | // 校验当前项的必填字段 |
| | | if (!item.model) { |
| | | ElMessage.error("请选择规格"); |
| | | isValid = false; |
| | | return; |
| | | } |
| | | if (!isTopLevel && !item.processId) { |
| | | if (!item.processId) { |
| | | ElMessage.error("请选择消耗工序"); |
| | | isValid = false; |
| | | return; |
| | |
| | | } |
| | | }; |
| | | |
| | | const removeItem = (tempId:string) => { |
| | | const removeItem = (tempId: string) => { |
| | | // 先尝试从顶层删除 |
| | | const topIndex = dataValue.dataList.findIndex(item => item.tempId === tempId); |
| | | if (topIndex !== -1) { |
| | |
| | | if (item.children && item.children.length > 0) { |
| | | delchildItem(item.children, tempId); |
| | | } |
| | | }); |
| | | }; |
| | | const addItem = () => { |
| | | dataValue.dataList.push({ |
| | | parentId: "", |
| | | parentTempId: "", |
| | | productName: "", |
| | | productId: "", |
| | | model: undefined, |
| | | productModelId: undefined, |
| | | processId: "", |
| | | processName: "", |
| | | unitQuantity: 0, |
| | | demandedQuantity: 0, |
| | | unit: "", |
| | | children: [], |
| | | tempId: new Date().getTime(), |
| | | }); |
| | | }; |
| | | const addItem2 = tempId => { |
| | |
| | | |
| | | onMounted(async () => { |
| | | // 从路由参数回显数据 |
| | | tableData[0].productName = routeProductName.value as string; |
| | | tableData[0].model = routeProductModelName.value as string; |
| | | tableData[0].bomNo = routeBomNo.value as string; |
| | | tableData[0].dictLabel = routeDictLabel.value as string; |
| | | |
| | | // 订单情况下禁用编辑 |
| | | if (isOrderPage.value) { |
| | |
| | | await fetchProcessOptions(); |
| | | await fetchData(); |
| | | }); |
| | | </script> |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .hover-effect:hover { |
| | | border-color: #409eff; |
| | | background-color: #ecf5ff; |
| | | transform: translateY(-2px); |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | } |
| | | </style> |