From 06d627bc28e77e1a314d8e35914512d63dbab1bd Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期五, 20 三月 2026 17:14:48 +0800
Subject: [PATCH] fix: 点击取消时将表单子元素全部销毁
---
src/views/productionManagement/productStructure/Detail/index.vue | 84 +++++++++++++++++++++++++++---------------
1 files changed, 54 insertions(+), 30 deletions(-)
diff --git a/src/views/productionManagement/productStructure/Detail/index.vue b/src/views/productionManagement/productStructure/Detail/index.vue
index 7b2c7e5..2ed9507 100644
--- a/src/views/productionManagement/productStructure/Detail/index.vue
+++ b/src/views/productionManagement/productStructure/Detail/index.vue
@@ -38,12 +38,12 @@
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"
@@ -57,14 +57,14 @@
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"
@@ -85,7 +85,7 @@
: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>
@@ -102,7 +102,7 @@
: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>
@@ -115,7 +115,7 @@
<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>
@@ -123,7 +123,7 @@
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)">鍒犻櫎
@@ -141,13 +141,21 @@
</el-table-column>
<el-table-column label="BOM缂栧彿"
prop="bomNo" />
- <el-table-column label="浜у搧缂栫爜"
- prop="productCode" />
- <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
@@ -194,11 +202,8 @@
// 浠庤矾鐢卞弬鏁拌幏鍙栦骇鍝佷俊鎭�
const routeBomNo = computed(() => route.query.bomNo || "");
- const routeProductCode = computed(() => route.query.productCode || "");
- 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(
@@ -218,9 +223,8 @@
const tableData = reactive([
{
- productName: "",
- model: "",
bomNo: "",
+ dictLabel: "",
},
]);
@@ -332,12 +336,7 @@
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;
@@ -431,6 +430,23 @@
}
});
};
+ 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 => {
dataValue.dataList.map(item => {
if (item.tempId === tempId) {
@@ -510,9 +526,8 @@
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) {
@@ -523,4 +538,13 @@
await fetchProcessOptions();
await fetchData();
});
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file
--
Gitblit v1.9.3