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/processRoute/processRouteItem/index.vue | 361 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 226 insertions(+), 135 deletions(-)
diff --git a/src/views/productionManagement/processRoute/processRouteItem/index.vue b/src/views/productionManagement/processRoute/processRouteItem/index.vue
index ce3ee0b..2a5186c 100644
--- a/src/views/productionManagement/processRoute/processRouteItem/index.vue
+++ b/src/views/productionManagement/processRoute/processRouteItem/index.vue
@@ -16,18 +16,10 @@
</div>
<div class="info-item">
<div class="info-label-wrapper">
- <span class="info-label">浜у搧鍚嶇О</span>
+ <span class="info-label">浜у搧绫诲瀷</span>
</div>
<div class="info-value-wrapper">
- <span class="info-value">{{ routeInfo.productName || '-' }}</span>
- </div>
- </div>
- <div class="info-item">
- <div class="info-label-wrapper">
- <span class="info-label">瑙勬牸鍚嶇О</span>
- </div>
- <div class="info-value-wrapper">
- <span class="info-value">{{ routeInfo.model || '-' }}</span>
+ <span class="info-value">{{ routeInfo.dictLabel || '-' }}</span>
</div>
</div>
<div class="info-item">
@@ -55,6 +47,7 @@
class="section-header">
<div class="section-title">宸ヨ壓璺嚎椤圭洰鍒楄〃</div>
<div class="section-actions">
+ <div class="sort-tip">鎷栨嫿琛ㄦ牸鎺掑簭</div>
<el-button icon="Grid"
@click="toggleView"
style="margin-right: 10px;">
@@ -71,7 +64,9 @@
:data="tableData"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
row-key="id"
+ height="350"
tooltip-effect="dark"
+ style="margin-bottom: 20px;"
class="lims-table">
<el-table-column align="center"
label="搴忓彿"
@@ -84,12 +79,6 @@
{{ getProcessName(scope.row.processId) || '-' }}
</template>
</el-table-column>
- <el-table-column label="浜у搧鍚嶇О"
- prop="productName"
- min-width="160" />
- <el-table-column label="瑙勬牸鍚嶇О"
- prop="model"
- min-width="140" />
<el-table-column label="鍙傛暟鍒楄〃"
min-width="160">
<template #default="scope">
@@ -99,14 +88,12 @@
@click="handleViewParams(scope.row)">鍙傛暟鍒楄〃</el-button>
</template>
</el-table-column>
- <el-table-column label="鍗曚綅"
- prop="unit"
- width="100" />
<el-table-column label="鏄惁璐ㄦ"
- prop="isQuality"
- width="100">
+ prop="isQuality">
<template #default="scope">
- {{scope.row.isQuality ? "鏄�" : "鍚�"}}
+ <el-tag :type="scope.row.isQuality == 1 ? 'success' : 'danger'">
+ {{scope.row.isQuality == 1 ? '鏄�' : '鍚�' }}
+ </el-tag>
</template>
</el-table-column>
<el-table-column label="鎿嶄綔"
@@ -119,10 +106,6 @@
size="small"
@click="handleEdit(scope.row)"
:disabled="scope.row.isComplete">缂栬緫</el-button>
- <!-- <el-button type="info"
- link
- size="small"
- @click="handleViewParams(scope.row)">鍙傛暟鍒楄〃</el-button> -->
<el-button type="danger"
link
size="small"
@@ -136,6 +119,7 @@
<div class="section-header">
<div class="section-title">宸ヨ壓璺嚎椤圭洰鍒楄〃</div>
<div class="section-actions">
+ <div class="sort-tip">闀挎寜鎷栨嫿鍗＄墖鎺掑簭</div>
<el-button icon="Menu"
@click="toggleView"
style="margin-right: 10px;">
@@ -159,22 +143,8 @@
<div class="card-process-name">{{ getProcessName(item.processId) || '-' }}</div>
</div>
<!-- 浜у搧淇℃伅 -->
- <div class="card-content">
- <div v-if="item.productName"
- class="product-info">
- <div class="product-name">{{ item.productName }}</div>
- <div v-if="item.model"
- class="product-model">
- {{ item.model }}
- <!-- <span v-if="item.unit" class="product-unit">{{ item.unit }}</span> -->
- </div>
- <el-tag type="primary"
- class="product-tag"
- v-if="item.isQuality">璐ㄦ</el-tag>
- </div>
- <div v-else
- class="product-info empty">鏆傛棤浜у搧淇℃伅</div>
- </div>
+ <!-- <div class="card-content">
+ </div> -->
<!-- 鎿嶄綔鎸夐挳 -->
<div class="card-footer">
<el-button type="primary"
@@ -196,6 +166,50 @@
</div>
</div>
</template>
+ <div class="section-BOM">
+ <div class="section-header">
+ <div class="section-title">BOM</div>
+ </div>
+ <div>
+ <!-- BOM琛ㄦ牸 -->
+ <el-table :data="bomTableData"
+ border
+ :preserve-expanded-content="false"
+ :default-expand-all="true"
+ style="width: 100%">
+ <el-table-column type="expand">
+ <template #default="props">
+ <el-table :data="props.row.bomList"
+ row-key="id"
+ default-expand-all
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+ style="width: 100%">
+ <el-table-column prop="productName"
+ label="浜у搧" />
+ <el-table-column prop="model"
+ label="瑙勬牸" />
+ <el-table-column prop="processName"
+ label="娑堣�楀伐搴�" />
+ <el-table-column prop="unitQuantity"
+ label="鍗曚綅浜у嚭鎵�闇�鏁伴噺" />
+ <el-table-column prop="unit"
+ label="鍗曚綅" />
+ </el-table>
+ </template>
+ </el-table-column>
+ <el-table-column label="BOM缂栧彿"
+ prop="bomNo" />
+ <el-table-column label="浜у搧绫诲瀷"
+ prop="dictLabel" />
+ <!-- <el-table-column label="浜у搧缂栫爜"
+ prop="productCode" />
+ <el-table-column label="浜у搧鍚嶇О"
+ prop="productName" />
+ <el-table-column label="瑙勬牸鍨嬪彿"
+ prop="model" /> -->
+ </el-table>
+ </div>
+ </div>
<!-- 鏂板/缂栬緫寮圭獥 -->
<el-dialog v-model="dialogVisible"
:title="operationType === 'add' ? '鏂板宸ヨ壓璺嚎椤圭洰' : '缂栬緫宸ヨ壓璺嚎椤圭洰'"
@@ -217,27 +231,11 @@
:value="process.id" />
</el-select>
</el-form-item>
- <el-form-item label="浜у搧鍚嶇О"
- prop="productModelId">
- <el-button type="primary"
- @click="showProductSelectDialog = true">
- {{ form.productName && form.model
- ? `${form.productName} - ${form.model}`
- : '閫夋嫨浜у搧' }}
- </el-button>
- </el-form-item>
- <el-form-item label="鍗曚綅"
- prop="unit">
- <el-input v-model="form.unit"
- :placeholder="form.productModelId ? '鏍规嵁閫夋嫨鐨勪骇鍝佽嚜鍔ㄥ甫鍑�' : '璇峰厛閫夋嫨浜у搧'"
- clearable
- :disabled="true" />
- </el-form-item>
<el-form-item label="鏄惁璐ㄦ"
prop="isQuality">
<el-switch v-model="form.isQuality"
- :active-value="true"
- inactive-value="false" />
+ :active-value="1"
+ :inactive-value="0" />
</el-form-item>
</el-form>
<template #footer>
@@ -255,8 +253,10 @@
<ProcessParamListDialog v-model="showParamListDialog"
:title="`${currentProcess ? getProcessName(currentProcess.processId) : ''} - 鍙傛暟鍒楄〃`"
:route-id="routeId"
- :editable="false"
+ :editable="editable"
+ :order-id="orderId"
:process="currentProcess"
+ :page-type="pageType"
:param-list="paramList"
@refresh="refreshParamList" />
</div>
@@ -284,10 +284,12 @@
findProductProcessRouteItemList,
deleteRouteItem,
addRouteItem,
+ findProcessParamListOrder,
addOrUpdateProductProcessRouteItem,
sortRouteItem,
} from "@/api/productionManagement/productProcessRoute.js";
import { processList } from "@/api/productionManagement/productionProcess.js";
+ import { queryList } from "@/api/productionManagement/productStructure.js";
import { useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import Sortable from "sortablejs";
@@ -298,6 +300,7 @@
const routeId = computed(() => route.query.id);
const orderId = computed(() => route.query.orderId);
const pageType = computed(() => route.query.type);
+ const editable = computed(() => route.query.editable === "true");
const tableLoading = ref(false);
const tableData = ref([]);
@@ -313,6 +316,7 @@
productName: "",
model: "",
bomNo: "",
+ dictLabel: "",
bomId: null,
description: "",
});
@@ -322,6 +326,7 @@
const showParamListDialog = ref(false);
const currentProcess = ref(null);
const paramList = ref([]);
+ const bomTableData = ref([]);
let tableSortable = null;
let cardSortable = null;
@@ -342,14 +347,11 @@
productName: "",
model: "",
unit: "",
- isQuality: false,
+ isQuality: 0,
});
const rules = {
processId: [{ required: true, message: "璇烽�夋嫨宸ュ簭", trigger: "change" }],
- productModelId: [
- { required: true, message: "璇烽�夋嫨浜у搧", trigger: "change" },
- ],
};
// 鏍规嵁宸ュ簭ID鑾峰彇宸ュ簭鍚嶇О
@@ -401,9 +403,32 @@
productName: route.query.productName || "",
model: route.query.model || "",
bomNo: route.query.bomNo || "",
+ dictLabel: route.query.dictLabel || "",
bomId: route.query.bomId || null,
description: route.query.description || "",
};
+
+ // 濡傛灉鏈塨omId锛岃幏鍙朆OM鏁版嵁
+ if (routeInfo.value.bomId) {
+ queryList(routeInfo.value.bomId)
+ .then(res => {
+ if (res.data) {
+ bomTableData.value = [
+ {
+ bomNo: routeInfo.value.bomNo,
+ dictLabel: routeInfo.value.dictLabel,
+ productCode: "",
+ productName: routeInfo.value.productName,
+ model: routeInfo.value.model,
+ bomList: res.data,
+ },
+ ];
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇BOM鏁版嵁澶辫触锛�", err);
+ });
+ }
};
// 鏂板
@@ -483,12 +508,10 @@
const addPromise = isOrderPage
? addRouteItem({
- productOrderId: orderId.value,
- productRouteId: routeId.value,
+ orderId: orderId.value,
+ routeId: routeId.value,
processId: form.value.processId,
- productModelId: form.value.productModelId,
isQuality: form.value.isQuality,
- dragSort,
})
: addOrUpdateProcessRouteItem({
routeId: routeId.value,
@@ -518,7 +541,6 @@
? addOrUpdateProductProcessRouteItem({
id: form.value.id,
processId: form.value.processId,
- productModelId: form.value.productModelId,
isQuality: form.value.isQuality,
})
: addOrUpdateProcessRouteItem({
@@ -641,6 +663,7 @@
ghostClass: "sortable-ghost",
handle: ".process-card",
filter: ".el-button",
+ delay: 500, // 闀挎寜500姣鍚庡紑濮嬫嫋鎷�
onEnd: evt => {
if (evt.oldIndex === evt.newIndex || !tableData.value[evt.oldIndex])
return;
@@ -711,50 +734,96 @@
const handleViewParams = process => {
currentProcess.value = process;
// 璋冪敤API鑾峰彇鍙傛暟鍒楄〃
- getProcessParamList({
- routeItemId: process.id,
- pageNum: 1,
- pageSize: 1000,
- })
- .then(res => {
- if (res.code === 200) {
- paramList.value = res.data?.records || [];
- } else {
- ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
- paramList.value = [];
- }
- showParamListDialog.value = true;
+ if (pageType.value === "order") {
+ findProcessParamListOrder({
+ orderId: orderId.value,
+ routeItemId: process.id,
+ pageNum: 1,
+ pageSize: 1000,
})
- .catch(err => {
- console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
- ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
- paramList.value = [];
- showParamListDialog.value = true;
- });
+ .then(res => {
+ if (res.code === 200) {
+ paramList.value = res.data || [];
+ } else {
+ ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ }
+ showParamListDialog.value = true;
+ })
+ .catch(err => {
+ console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
+ ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ showParamListDialog.value = true;
+ });
+ } else {
+ getProcessParamList({
+ routeItemId: process.id,
+ pageNum: 1,
+ pageSize: 1000,
+ })
+ .then(res => {
+ if (res.code === 200) {
+ paramList.value = res.data?.records || [];
+ } else {
+ ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ }
+ showParamListDialog.value = true;
+ })
+ .catch(err => {
+ console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
+ ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ showParamListDialog.value = true;
+ });
+ }
};
// 鍒锋柊鍙傛暟鍒楄〃
const refreshParamList = () => {
if (!currentProcess.value) return;
// 閲嶆柊璋冪敤API鑾峰彇鍙傛暟鍒楄〃
- getProcessParamList({
- routeItemId: currentProcess.value.id,
- pageNum: 1,
- pageSize: 1000,
- })
- .then(res => {
- if (res.code === 200) {
- paramList.value = res.data?.records || [];
- } else {
- ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
- paramList.value = [];
- }
+ if (pageType.value === "order") {
+ findProcessParamListOrder({
+ orderId: orderId.value,
+ routeItemId: currentProcess.value.id,
+ pageNum: 1,
+ pageSize: 1000,
})
- .catch(err => {
- console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
- ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
- paramList.value = [];
- });
+ .then(res => {
+ if (res.code === 200) {
+ paramList.value = res.data || [];
+ } else {
+ ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
+ ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ });
+ } else {
+ getProcessParamList({
+ routeItemId: currentProcess.value.id,
+ pageNum: 1,
+ pageSize: 1000,
+ })
+ .then(res => {
+ if (res.code === 200) {
+ paramList.value = res.data?.records || [];
+ } else {
+ ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
+ ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
+ paramList.value = [];
+ });
+ }
};
onUnmounted(() => {
@@ -765,14 +834,16 @@
<style scoped>
.card-container {
padding: 20px 0;
+ /* height: 350px; */
+ margin-bottom: 20px;
}
.cards-wrapper {
display: flex;
- gap: 16px;
+ gap: 24px;
overflow-x: auto;
padding: 10px 0;
- min-height: 200px;
+ /* min-height: 250px; */
}
.cards-wrapper::-webkit-scrollbar {
@@ -795,11 +866,12 @@
.process-card {
flex-shrink: 0;
- width: 220px;
+ /* width: 300px; */
background: #fff;
- border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- padding: 16px;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ /* padding: 30px 24px; */
+ padding: 25px 50px;
display: flex;
flex-direction: column;
cursor: move;
@@ -807,45 +879,45 @@
}
.process-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
- transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+ transform: translateY(-4px);
}
.card-header {
text-align: center;
- margin-bottom: 12px;
+ margin-bottom: 20px;
}
.card-number {
- width: 36px;
- height: 36px;
- line-height: 36px;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
border-radius: 50%;
background: #409eff;
color: #fff;
font-weight: bold;
- font-size: 16px;
- margin: 0 auto 8px;
+ font-size: 20px;
+ margin: 0 auto 16px;
}
.card-process-name {
- font-size: 14px;
+ font-size: 18px;
color: #333;
- font-weight: 500;
+ font-weight: 600;
word-break: break-all;
}
.card-content {
flex: 1;
- margin-bottom: 12px;
- min-height: 60px;
+ margin-bottom: 20px;
+ min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.product-info {
- font-size: 13px;
+ font-size: 14px;
color: #666;
text-align: center;
width: 100%;
@@ -858,7 +930,7 @@
}
.product-name {
- margin-bottom: 6px;
+ margin-bottom: 8px;
word-break: break-all;
line-height: 1.5;
text-align: center;
@@ -866,7 +938,7 @@
.product-model {
color: #909399;
- font-size: 12px;
+ font-size: 13px;
word-break: break-all;
line-height: 1.5;
text-align: center;
@@ -878,19 +950,32 @@
}
.product-tag {
- margin: 10px 0;
+ margin: 12px 0;
}
.card-footer {
display: flex;
- justify-content: space-around;
- padding-top: 12px;
+ justify-content: center;
+ gap: 20px;
+ padding-top: 16px;
border-top: 1px solid #f0f0f0;
}
.card-footer .el-button {
padding: 0;
- font-size: 12px;
+ font-size: 14px;
+ }
+
+ .card-footer .el-button:nth-child(1) {
+ color: #409eff;
+ }
+
+ .card-footer .el-button:nth-child(2) {
+ color: #67c23a;
+ }
+
+ .card-footer .el-button:nth-child(3) {
+ color: #f56c6c;
}
:deep(.sortable-ghost) {
@@ -902,13 +987,13 @@
opacity: 0.8;
}
- /* 琛ㄦ牸瑙嗗浘鏍峰紡 */
- :deep(.el-table__row) {
+ /* 琛ㄦ牸瑙嗗浘鏍峰紡 - 浠呭簲鐢ㄤ簬椤圭洰鍒楄〃 */
+ :deep(.lims-table .el-table__row) {
transition: background-color 0.2s;
cursor: move;
}
- :deep(.el-table__row:hover) {
+ :deep(.lims-table .el-table__row:hover) {
background-color: #f9fafc !important;
}
@@ -945,6 +1030,12 @@
display: flex;
align-items: center;
}
+ .sort-tip {
+ font-size: 12px;
+ color: #909399;
+ margin-left: 8px;
+ margin-right: 20px;
+ }
/* 宸ヨ壓璺嚎淇℃伅鍗＄墖鏍峰紡 */
.route-info-card {
@@ -957,7 +1048,7 @@
.route-info {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 16px;
padding: 4px;
}
--
Gitblit v1.9.3