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/productionOrder/index.vue | 745 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 574 insertions(+), 171 deletions(-)
diff --git a/src/views/productionManagement/productionOrder/index.vue b/src/views/productionManagement/productionOrder/index.vue
index 87ca041..a306bff 100644
--- a/src/views/productionManagement/productionOrder/index.vue
+++ b/src/views/productionManagement/productionOrder/index.vue
@@ -1,182 +1,585 @@
<template>
- <div class="app-container">
- <div class="search_form">
- <div>
- <span class="search_title">瀹㈡埛鍚嶇О锛�</span>
- <el-input
- v-model="searchForm.customerName"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- prefix-icon="Search"
- />
- <span class="search_title ml10">椤圭洰鍚嶇О锛�</span>
- <el-input
- v-model="searchForm.customerName"
- style="width: 240px"
- placeholder="璇疯緭鍏�"
- @change="handleQuery"
- clearable
- prefix-icon="Search"
- />
- <span class="search_title ml10">褰曞叆鏃ユ湡锛�</span>
- <el-date-picker v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
- placeholder="璇烽�夋嫨" clearable @change="changeDaterange" />
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
- >鎼滅储</el-button
- >
- </div>
- <div>
- <el-button @click="handleOut">瀵煎嚭</el-button>
- </div>
- </div>
- <div class="table_list">
- <PIMTable
- rowKey="id"
- :column="tableColumn"
- :tableData="tableData"
- :page="page"
- :tableLoading="tableLoading"
- @pagination="pagination"
- ></PIMTable>
- </div>
- </div>
+ <div class="app-container">
+ <div class="search_form">
+ <el-form :model="searchForm"
+ :inline="true">
+ <el-form-item label="浜у搧鍚嶇О:">
+ <el-input v-model="searchForm.productName"
+ placeholder="璇疯緭鍏�"
+ clearable
+ prefix-icon="Search"
+ style="width: 160px;"
+ @change="handleQuery" />
+ </el-form-item>
+ <el-form-item label="瑙勬牸:">
+ <el-input v-model="searchForm.model"
+ placeholder="璇疯緭鍏�"
+ clearable
+ prefix-icon="Search"
+ style="width: 160px;"
+ @change="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鐘舵��:">
+ <el-select v-model="searchForm.status"
+ placeholder="璇烽�夋嫨"
+ style="width: 160px;"
+ @change="handleQuery">
+ <el-option v-for="item in statusOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary"
+ @click="handleQuery">鎼滅储</el-button>
+ <el-button type="primary"
+ @click="handleReset">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <div>
+ <el-button type="danger"
+ @click="handleDelete">閫�鍥�</el-button>
+ <el-button @click="handleOut">瀵煎嚭</el-button>
+ </div>
+ </div>
+ <div class="table_list">
+ <PIMTable rowKey="id"
+ :column="tableColumn"
+ :tableData="tableData"
+ :page="page"
+ :tableLoading="tableLoading"
+ :row-class-name="tableRowClassName"
+ :isSelection="true"
+ :selectable="row => row.status != 4"
+ @selection-change="handleSelectionChange"
+ @pagination="pagination">
+ <template #completionStatus="{ row }">
+ <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
+ :color="progressColor(toProgressPercentage(row?.completionStatus))"
+ :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
+ </template>
+ </PIMTable>
+ </div>
+ <el-dialog v-model="bindRouteDialogVisible"
+ title="缁戝畾宸ヨ壓璺嚎"
+ width="500px">
+ <el-form label-width="90px">
+ <el-form-item label="宸ヨ壓璺嚎">
+ <el-select v-model="bindForm.routeId"
+ placeholder="璇烽�夋嫨宸ヨ壓璺嚎"
+ style="width: 100%;"
+ :loading="bindRouteLoading">
+ <el-option v-for="item in routeOptions"
+ :key="item.id"
+ :label="`${item.processRouteCode || ''}`"
+ :value="item.id" />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="bindRouteDialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary"
+ :loading="bindRouteSaving"
+ @click="handleBindRouteConfirm">纭� 璁�</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <new-product-order v-if="isShowNewModal"
+ v-model:visible="isShowNewModal"
+ @completed="handleQuery" />
+ </div>
</template>
<script setup>
-import {onMounted, ref} from "vue";
-import {
- listCustomer,
-} from "@/api/basicData/customerFile.js";
-import { ElMessageBox } from "element-plus";
-import dayjs from "dayjs";
-const { proxy } = getCurrentInstance();
+ import { onMounted, ref } from "vue";
+ import { ElMessageBox } from "element-plus";
+ import dayjs from "dayjs";
+ import { useRouter } from "vue-router";
+ import { getDicts } from "@/api/system/dict/data";
+ import {
+ productOrderListPage,
+ listProcessRoute,
+ bindingRoute,
+ listProcessBom,
+ delProductOrder,
+ } from "@/api/productionManagement/productionOrder.js";
+ import { listPage } from "@/api/productionManagement/processRoute.js";
+ import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js";
+ import { fileDel } from "@/api/financialManagement/revenueManagement.js";
+ import PIMTable from "@/components/PIMTable/PIMTable.vue";
+ const NewProductOrder = defineAsyncComponent(() =>
+ import("@/views/productionManagement/productionOrder/New.vue")
+ );
-const tableColumn = ref([
- {
- label: "褰曞叆鏃ユ湡",
- prop: "customerName",
- width: 120,
- },
- {
- label: "鍚堝悓鍙�",
- prop: "taxpayerIdentificationNumber",
- width: 220,
- },
- {
- label: "瀹㈡埛鍚堝悓鍙�",
- prop: "addressPhone",
- width: 250,
- },
- {
- label: "瀹㈡埛鍚嶇О",
- prop: "contactPerson",
- },
- {
- label: "椤圭洰鍚嶇О",
- prop: "contactPhone",
- width:150
- },
- {
- label: "浜у搧澶х被",
- prop: "basicBankAccount",
- width: 220,
- },
- {
- label: "瑙勬牸鍨嬪彿",
- prop: "bankAccount",
- width: 220,
- },
- {
- label: "鍗曚綅",
- prop: "bankCode",
- width:220
- },
- {
- label: "鏁伴噺",
- prop: "maintainer",
- },
- {
- label: "鎺掍骇鏁伴噺",
- prop: "maintenanceTime",
- width: 100,
- },
- {
- label: "瀹屽伐鏁伴噺",
- prop: "maintenanceTime",
- width: 100,
- },
-]);
-const tableData = ref([]);
-const tableLoading = ref(false);
-const page = reactive({
- current: 1,
- size: 100,
- total: 0,
-});
+ const { proxy } = getCurrentInstance();
-const data = reactive({
- searchForm: {
- customerName: "",
- entryDate: [
- dayjs().format("YYYY-MM-DD"),
- dayjs().add(1, "day").format("YYYY-MM-DD"),
- ], // 褰曞叆鏃ユ湡
- entryDateStart: dayjs().format("YYYY-MM-DD"),
- entryDateEnd: dayjs().add(1, "day").format("YYYY-MM-DD"),
- },
-});
-const { searchForm } = toRefs(data);
+ const router = useRouter();
+ const isShowNewModal = ref(false);
-// 鏌ヨ鍒楄〃
-/** 鎼滅储鎸夐挳鎿嶄綔 */
-const handleQuery = () => {
- page.current = 1;
- getList();
-};
-const pagination = (obj) => {
- page.current = obj.page;
- page.size = obj.limit;
- getList();
-};
-const changeDaterange = (value) => {
- if (value) {
- searchForm.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
- searchForm.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
- } else {
- searchForm.entryDateStart = undefined;
- searchForm.entryDateEnd = undefined;
- }
- handleQuery();
-};
-const getList = () => {
- tableLoading.value = true;
- listCustomer({ ...searchForm.value, ...page }).then((res) => {
- tableLoading.value = false;
- tableData.value = res.records;
- page.total = res.total;
- });
-};
+ const tableColumn = ref([
+ {
+ label: "鐘舵��",
+ prop: "status",
+ dataType: "tag",
-// 瀵煎嚭
-const handleOut = () => {
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
- .then(() => {
- proxy.download("/basic/customer/export", {}, "瀹㈡埛妗ｆ.xlsx");
- })
- .catch(() => {
- proxy.$modal.msg("宸插彇娑�");
- });
-};
+ formatData: val => {
+ const statusMap = {
+ 1: "寰呭紑濮�",
+ 2: "杩涜涓�",
+ 3: "宸插畬鎴�",
+ 4: "宸插彇娑�",
+ };
+ return statusMap[val] || "";
+ },
+ formatType: val => {
+ const statusMap = {
+ 1: "error",
+ 2: "warning",
+ 3: "success",
+ 4: "info",
+ };
+ return statusMap[val] || "info";
+ },
+ width: 100,
+ },
+ {
+ label: "鐢熶骇璁㈠崟鍙�",
+ prop: "npsNo",
+ width: "120px",
+ },
+ {
+ label: "浜у搧鍚嶇О",
+ prop: "productName",
+ width: "120px",
+ },
+ {
+ label: "瑙勬牸",
+ prop: "model",
+ width: "120px",
+ },
+ {
+ label: "鐗╂枡缂栫爜",
+ prop: "materialCode",
+ width: "120px",
+ },
+ {
+ label: "宸ヨ壓璺嚎缂栧彿",
+ prop: "processRouteCode",
+ width: "200px",
+ },
+ {
+ label: "闇�姹傛暟閲�",
+ prop: "quantity",
+ },
+ {
+ label: "瀹屾垚鏁伴噺",
+ prop: "completeQuantity",
+ },
+ {
+ dataType: "slot",
+ label: "瀹屾垚杩涘害",
+ prop: "completionStatus",
+ slot: "completionStatus",
+ width: 180,
+ },
+ {
+ label: "寮�濮嬫棩鏈�",
+ prop: "startTime",
+ formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+ width: 120,
+ },
+ {
+ label: "缁撴潫鏃ユ湡",
+ prop: "endTime",
+ formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+ width: 120,
+ },
+ {
+ label: "浜や粯鏃ユ湡",
+ prop: "planCompleteTime",
+ formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+ width: 120,
+ },
-onMounted(() => {
- getList();
-});
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 300,
+ operation: [
+ {
+ name: "鏉ユ簮",
+ type: "text",
+ clickFun: row => {
+ showSourceData(row);
+ },
+ },
+ {
+ name: "宸ヨ壓璺嚎",
+ type: "text",
+ clickFun: row => {
+ showRouteItemModal(row);
+ },
+ },
+ {
+ name: "缁戝畾宸ヨ壓璺嚎",
+ type: "text",
+ showHide: row => !row.routeId,
+ clickFun: row => {
+ openBindRouteDialog(row);
+ },
+ },
+ {
+ name: "鍒犻櫎",
+ type: "text",
+ showHide: row => row.status == 4,
+ clickFun: row => {
+ handleDeleteSolo(row);
+ },
+ },
+ // {
+ // name: "浜у搧缁撴瀯",
+ // type: "text",
+ // clickFun: row => {
+ // showProductStructure(row);
+ // },
+ // },
+ ],
+ },
+ ]);
+ const tableData = ref([]);
+ const tableLoading = ref(false);
+ const page = reactive({
+ current: 1,
+ size: 100,
+ total: 0,
+ });
+ const selectedRows = ref([]);
+
+ const data = reactive({
+ searchForm: {
+ customerName: "",
+ salesContractNo: "",
+ projectName: "",
+ productName: "",
+ model: "",
+ },
+ });
+ const { searchForm } = toRefs(data);
+
+ const toProgressPercentage = val => {
+ const n = Number(val);
+ if (!Number.isFinite(n)) return 0;
+ if (n <= 0) return 0;
+ if (n >= 100) return 100;
+ return Math.round(n);
+ };
+
+ // 30/50/80/100 鍒嗘棰滆壊锛氱孩/姗�/钃�/缁�
+ const progressColor = percentage => {
+ const p = toProgressPercentage(percentage);
+ if (p < 30) return "#f56c6c";
+ if (p < 50) return "#e6a23c";
+ if (p < 80) return "#409eff";
+ return "#67c23a";
+ };
+
+ // 娣诲姞琛ㄨ绫诲悕鏂规硶
+ const tableRowClassName = ({ row }) => {
+ // if (!row.planCompleteTime) return "";
+ // if (row.isFh) return "";
+ // const diff = row.deliveryDaysDiff;
+ // if (diff === 15) {
+ // return "yellow";
+ // } else if (diff === 10) {
+ // return "pink";
+ // } else if (diff === 2) {
+ // return "purple";
+ // } else if (diff < 2) {
+ // return "red";
+ // }
+ };
+
+ // 缁戝畾宸ヨ壓璺嚎寮规
+ const bindRouteDialogVisible = ref(false);
+ const bindRouteLoading = ref(false);
+ const bindRouteSaving = ref(false);
+ const routeOptions = ref([]);
+ const productTypeOptions = ref([]);
+ const bindForm = reactive({
+ orderId: null,
+ routeId: null,
+ });
+
+ const openBindRouteDialog = async row => {
+ bindForm.orderId = row.id;
+ bindForm.routeId = null;
+ bindRouteDialogVisible.value = true;
+ routeOptions.value = [];
+ if (!row.model) {
+ proxy.$modal.msgWarning("褰撳墠璁㈠崟缂哄皯浜у搧鍨嬪彿锛屾棤娉曟煡璇㈠伐鑹鸿矾绾�");
+ bindRouteDialogVisible.value = false;
+ return;
+ }
+ bindRouteLoading.value = true;
+ const distName =
+ row.productName == "鏉挎潗"
+ ? row.productName
+ : row.productName + "-" + row.strength;
+
+ try {
+ // 鑾峰彇浜у搧绫诲瀷瀛楀吀
+ const dictRes = await getDicts("product_type");
+ if (dictRes.code === 200) {
+ productTypeOptions.value = dictRes.data;
+ // 鐢╠istName鍖归厤dictLabel锛岃幏鍙杁ictCode
+ const matchedType = productTypeOptions.value.find(
+ item => item.dictLabel === distName
+ );
+ const dictCode = matchedType ? matchedType.dictCode : row.productType;
+
+ // 浣跨敤dictCode鏌ヨ宸ヨ壓璺嚎鍒楄〃
+ const res = await listPage({ dictCode, status: true });
+ routeOptions.value = res.data.records || [];
+ }
+ } catch (e) {
+ console.error("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触锛�", e);
+ proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触");
+ } finally {
+ bindRouteLoading.value = false;
+ }
+ };
+
+ const handleBindRouteConfirm = async () => {
+ if (!bindForm.routeId) {
+ proxy.$modal.msgWarning("璇烽�夋嫨宸ヨ壓璺嚎");
+ return;
+ }
+ bindRouteSaving.value = true;
+ try {
+ await bindingRoute({
+ id: bindForm.orderId,
+ routeId: bindForm.routeId,
+ });
+ proxy.$modal.msgSuccess("缁戝畾鎴愬姛");
+ bindRouteDialogVisible.value = false;
+ getList();
+ } catch (e) {
+ console.error("缁戝畾宸ヨ壓璺嚎澶辫触锛�", e);
+ proxy.$modal.msgError("缁戝畾宸ヨ壓璺嚎澶辫触");
+ } finally {
+ bindRouteSaving.value = false;
+ }
+ };
+ const statusOptions = ref([
+ { value: 1, label: "寰呭紑濮�" },
+ { value: 2, label: "杩涜涓�" },
+ { value: 3, label: "宸插畬鎴�" },
+ { value: 4, label: "宸插彇娑�" },
+ ]);
+ const handleReset = () => {
+ searchForm.value = {
+ customerName: "",
+ salesContractNo: "",
+ projectName: "",
+ productName: "",
+ model: "",
+ status: "",
+ };
+ handleQuery();
+ };
+ // 鏌ヨ鍒楄〃
+ /** 鎼滅储鎸夐挳鎿嶄綔 */
+ const handleQuery = () => {
+ page.current = 1;
+ getList();
+ };
+ const pagination = obj => {
+ page.current = obj.page;
+ page.size = obj.limit;
+ getList();
+ };
+ const changeDaterange = value => {
+ if (value) {
+ searchForm.value.entryDateStart = value[0];
+ searchForm.value.entryDateEnd = value[1];
+ } else {
+ searchForm.value.entryDateStart = undefined;
+ searchForm.value.entryDateEnd = undefined;
+ }
+ handleQuery();
+ };
+ const getList = () => {
+ tableLoading.value = true;
+ // 鏋勯�犱竴涓柊鐨勫璞★紝涓嶅寘鍚玡ntryDate瀛楁
+ const params = { ...searchForm.value, ...page };
+ params.entryDate = undefined;
+ productOrderListPage(params)
+ .then(res => {
+ tableLoading.value = false;
+ tableData.value = res.data.records;
+ page.total = res.data.total;
+ })
+ .catch(() => {
+ tableLoading.value = false;
+ });
+ };
+
+ const showRouteItemModal = async row => {
+ const orderId = row.id;
+ try {
+ router.push({
+ path: "/productionManagement/processRouteItem",
+ query: {
+ id: row.routeId,
+ processRouteCode: row.processRouteCode || "",
+ productName: row.productName || "",
+ model: row.model || "",
+ bomNo: row.bomNo || "",
+ bomId: row.bomId || "",
+ description: row.description || "",
+ dictLabel:
+ row.productName == "鏉挎潗"
+ ? row.productName
+ : row.productName + "-" + row.strength,
+ orderId: row.id,
+ type: "order",
+ editable: true,
+ },
+ });
+ } catch (e) {
+ console.error("鑾峰彇宸ヨ壓璺嚎涓讳俊鎭け璐ワ細", e);
+ proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎淇℃伅澶辫触");
+ }
+ };
+
+ const showProductStructure = row => {
+ if (!row.processRouteCode) {
+ proxy.$modal.msgWarning("璇峰厛缁戝畾宸ヨ壓璺嚎");
+ return;
+ }
+ router.push({
+ path: "/productionManagement/productStructureDetail",
+ query: {
+ id: row.id,
+ bomNo: row.bomNo || "",
+ productName: row.productName || "",
+ productModelName: row.model || "",
+ orderId: row.id,
+ type: "order",
+ },
+ });
+ };
+
+ // 鏌ョ湅鏉ユ簮鐢熶骇璁″垝鏁版嵁
+ const showSourceData = row => {
+ // 杩欓噷闇�瑕佹牴鎹疄闄呯殑API鍜岃矾鐢辫繘琛岃皟鏁�
+ // 鍋囪鐢熶骇璁㈠崟涓湁鐢熶骇璁″垝ID瀛楁锛屾瘮濡俻roductionPlanId
+ if (row.productionPlanId) {
+ // 璺宠浆鍒扮敓浜ц鍒掕鎯呴〉闈�
+ router.push({
+ path: "/productionManagement/productionPlan",
+ query: {
+ id: row.productionPlanId,
+ },
+ });
+ } else {
+ proxy.$modal.msgWarning("褰撳墠璁㈠崟娌℃湁鍏宠仈鐨勭敓浜ц鍒�");
+ }
+ };
+
+ // 琛ㄦ牸閫夋嫨鏁版嵁
+ const handleSelectionChange = selection => {
+ selectedRows.value = selection;
+ };
+ const handleDeleteSolo = row => {
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚��鍥烇紝鏄惁纭閫�鍥烇紵", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ delProductOrder([row.id]).then(res => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
+
+ const handleDelete = () => {
+ let ids = [];
+ if (selectedRows.value.length > 0) {
+ ids = selectedRows.value.map(item => item.id);
+ } else {
+ proxy.$modal.msgWarning("璇烽�夋嫨鏁版嵁");
+ return;
+ }
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚��鍥烇紝鏄惁纭閫�鍥烇紵", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ delProductOrder(ids).then(res => {
+ proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+ getList();
+ });
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
+
+ // 瀵煎嚭
+ const handleOut = () => {
+ ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ proxy.download(
+ "/productOrder/export",
+ { ...searchForm.value },
+ "鐢熶骇璁㈠崟.xlsx"
+ );
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+ };
+
+ const handleConfirmRoute = () => {};
+
+ onMounted(() => {
+ getList();
+ });
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+ .search_form {
+ align-items: start;
+ }
+
+ ::v-deep .yellow {
+ background-color: #faf0de;
+ }
+
+ ::v-deep .pink {
+ background-color: #fae1de;
+ }
+
+ ::v-deep .red {
+ background-color: #f80202;
+ }
+
+ ::v-deep .purple {
+ background-color: #f4defa;
+ }
+</style>
--
Gitblit v1.9.3