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 | 104 ++++++++++++++++++++++++++++++++++-----------------
1 files changed, 69 insertions(+), 35 deletions(-)
diff --git a/src/views/productionManagement/productStructure/Detail/index.vue b/src/views/productionManagement/productStructure/Detail/index.vue
index 3a76e48..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,24 @@
</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>
@@ -191,10 +202,8 @@
// 浠庤矾鐢卞弬鏁拌幏鍙栦骇鍝佷俊鎭�
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(
@@ -214,9 +223,8 @@
const tableData = reactive([
{
- productName: "",
- model: "",
bomNo: "",
+ dictLabel: "",
},
]);
@@ -264,15 +272,20 @@
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("鏈�澶栧眰鍜屽綋鍓嶄骇鍝佷竴鏍风殑涓�绾у彧鑳芥湁涓�涓�");
@@ -321,13 +334,9 @@
// 鏍￠獙鍑芥暟
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;
@@ -390,7 +399,7 @@
}
};
- const removeItem = (tempId:string) => {
+ const removeItem = (tempId: string) => {
// 鍏堝皾璇曚粠椤跺眰鍒犻櫎
const topIndex = dataValue.dataList.findIndex(item => item.tempId === tempId);
if (topIndex !== -1) {
@@ -419,6 +428,23 @@
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 => {
@@ -500,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) {
@@ -513,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