From 217cda7380e07a355053e6ca34fb77334248b7db Mon Sep 17 00:00:00 2001
From: chenhj <1263187585@qq.com>
Date: 星期三, 25 三月 2026 17:23:13 +0800
Subject: [PATCH] feat(productionOrder): 添加生产订单结束功能并优化界面组件
---
src/views/productionManagement/productionOrder/index.vue | 655 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 365 insertions(+), 290 deletions(-)
diff --git a/src/views/productionManagement/productionOrder/index.vue b/src/views/productionManagement/productionOrder/index.vue
index 9a4620f..829f7ab 100644
--- a/src/views/productionManagement/productionOrder/index.vue
+++ b/src/views/productionManagement/productionOrder/index.vue
@@ -9,7 +9,7 @@
clearable
prefix-icon="Search"
style="width: 160px;"
- @change="handleQuery" />
+ @change="handleQuery"/>
</el-form-item>
<el-form-item label="鍚堝悓鍙�:">
<el-input v-model="searchForm.salesContractNo"
@@ -17,7 +17,7 @@
clearable
prefix-icon="Search"
style="width: 160px;"
- @change="handleQuery" />
+ @change="handleQuery"/>
</el-form-item>
<el-form-item label="浜у搧鍚嶇О:">
<el-input v-model="searchForm.productCategory"
@@ -25,7 +25,7 @@
clearable
prefix-icon="Search"
style="width: 160px;"
- @change="handleQuery" />
+ @change="handleQuery"/>
</el-form-item>
<el-form-item label="瑙勬牸:">
<el-input v-model="searchForm.specificationModel"
@@ -33,14 +33,17 @@
clearable
prefix-icon="Search"
style="width: 160px;"
- @change="handleQuery" />
+ @change="handleQuery"/>
</el-form-item>
<el-form-item>
<el-button type="primary"
- @click="handleQuery">鎼滅储</el-button>
+ @click="handleQuery">鎼滅储
+ </el-button>
</el-form-item>
</el-form>
<div>
+ <el-button type="primary" @click="isShowNewModal = true">鏂板</el-button>
+ <el-button type="danger" @click="handleDelete">鍒犻櫎</el-button>
<el-button @click="handleOut">瀵煎嚭</el-button>
</div>
</div>
@@ -51,12 +54,14 @@
:page="page"
:tableLoading="tableLoading"
:row-class-name="tableRowClassName"
+ :isSelection="true"
+ @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' : ''"
+ :percentage="toProgressPercentage(row?.completionStatus)"
+ :color="progressColor(toProgressPercentage(row?.completionStatus))"
+ :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''"
/>
</template>
</PIMTable>
@@ -73,267 +78,293 @@
<el-option v-for="item in routeOptions"
:key="item.id"
:label="`${item.processRouteCode || ''}`"
- :value="item.id" />
+ :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>
+ <el-button @click="bindRouteDialogVisible = false">鍙� 娑�</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 { ElMessageBox } from "element-plus";
- import dayjs from "dayjs";
- import { useRouter } from "vue-router";
- import {
- productOrderListPage,
- listProcessRoute,
- bindingRoute,
- listProcessBom,
- } from "@/api/productionManagement/productionOrder.js";
- import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js";
- const { proxy } = getCurrentInstance();
+import {onMounted, ref} from "vue";
+import {ElMessageBox} from "element-plus";
+import dayjs from "dayjs";
+import {useRouter} from "vue-router";
+import {
+ productOrderListPage,
+ listProcessRoute,
+ bindingRoute,
+ delProductOrder, finishOrder,
+} from "@/api/productionManagement/productionOrder.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 router = useRouter();
+const NewProductOrder = defineAsyncComponent(() => import("@/views/productionManagement/productionOrder/New.vue"));
- const tableColumn = ref([
- {
- label: "鐢熶骇璁㈠崟鍙�",
- prop: "npsNo",
- width: '120px',
- },
- {
- label: "閿�鍞悎鍚屽彿",
- prop: "salesContractNo",
- width: '150px',
- },
- {
- label: "瀹㈡埛鍚嶇О",
- prop: "customerName",
- width: '200px',
- },
- {
- label: "浜у搧鍚嶇О",
- prop: "productCategory",
- width: '120px',
- },
- {
- label: "瑙勬牸",
- prop: "specificationModel",
- 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: "deliveryDate",
- formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
- width: 120,
- },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 200,
- operation: [
- {
- name: "宸ヨ壓璺嚎",
- type: "text",
- clickFun: row => {
- showRouteItemModal(row);
- },
+const {proxy} = getCurrentInstance();
+
+const router = useRouter();
+const isShowNewModal = ref(false);
+
+const tableColumn = ref([
+ {
+ label: "鐢熶骇璁㈠崟鍙�",
+ prop: "npsNo",
+ width: '120px',
+ },
+ {
+ label: "浜у搧鍚嶇О",
+ prop: "productCategory",
+ width: '120px',
+ },
+ {
+ label: "瑙勬牸",
+ prop: "specificationModel",
+ width: '120px',
+ },
+ {
+ label: "UID鐮�",
+ prop: "uidNo",
+ width: '120px',
+ },
+ {
+ label: "宸ヨ壓璺嚎缂栧彿",
+ prop: "processRouteCode",
+ width: '200px',
+ },
+ {
+ label: "棰勮鐢熶骇鏁伴噺",
+ prop: "quantity",
+ width: '140px',
+ },
+ {
+ 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: "deliveryDate",
+ formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+ width: 120,
+ },
+ {
+ label: "棰勮鏃ョ▼锛堝ぉ锛�",
+ prop: "expectedSchedule",
+ width: 120,
+ },
+ {
+ label: "鍒堕�犵彮缁�",
+ prop: "manufacturingTeam",
+ width: 120,
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 200,
+ operation: [
+ {
+ name: "宸ヨ壓璺嚎",
+ type: "text",
+ clickFun: row => {
+ showRouteItemModal(row);
},
- {
- name: "缁戝畾宸ヨ壓璺嚎",
- type: "text",
- showHide: row => !row.processRouteCode,
- clickFun: row => {
- openBindRouteDialog(row);
- },
+ },
+ {
+ name: "缁戝畾宸ヨ壓璺嚎",
+ type: "text",
+ showHide: row => !row.processRouteCode,
+ clickFun: row => {
+ openBindRouteDialog(row);
},
- {
- name: "浜у搧缁撴瀯",
- type: "text",
- clickFun: row => {
- showProductStructure(row);
- },
+ },
+ {
+ name: "浜у搧缁撴瀯",
+ type: "text",
+ clickFun: row => {
+ showProductStructure(row);
},
- ],
- },
- ]);
- const tableData = ref([]);
- const tableLoading = ref(false);
- const page = reactive({
- current: 1,
- size: 100,
- total: 0,
- });
+ },
+ {
+ name: "缁撴潫鐢熶骇",
+ type: "text",
+ showHide: row => !row.isEnd,
+ clickFun: row => {
+ handleFinishOrder(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: "",
- productCategory: "",
- specificationModel: "",
- },
- });
- const { searchForm } = toRefs(data);
+const data = reactive({
+ searchForm: {
+ customerName: "",
+ salesContractNo: "",
+ projectName: "",
+ productCategory: "",
+ specificationModel: "",
+ },
+});
+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);
- };
+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";
- };
+// 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.isFh) return '';
+// 娣诲姞琛ㄨ绫诲悕鏂规硶
+const tableRowClassName = ({row}) => {
+ if (!row.deliveryDate) 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 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 bindForm = reactive({
- orderId: null,
- routeId: null,
- });
+// 缁戝畾宸ヨ壓璺嚎寮规
+const bindRouteDialogVisible = ref(false);
+const bindRouteLoading = ref(false);
+const bindRouteSaving = ref(false);
+const routeOptions = 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.productModelId) {
- proxy.$modal.msgWarning("褰撳墠璁㈠崟缂哄皯浜у搧鍨嬪彿锛屾棤娉曟煡璇㈠伐鑹鸿矾绾�");
- bindRouteDialogVisible.value = false;
- return;
- }
- bindRouteLoading.value = true;
- try {
- const res = await listProcessRoute({ productModelId: row.productModelId });
- routeOptions.value = res.data || [];
- } catch (e) {
- console.error("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触锛�", e);
- proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触");
- } finally {
- bindRouteLoading.value = false;
- }
- };
+const openBindRouteDialog = async row => {
+ bindForm.orderId = row.id;
+ bindForm.routeId = null;
+ bindRouteDialogVisible.value = true;
+ routeOptions.value = [];
+ if (!row.productModelId) {
+ proxy.$modal.msgWarning("褰撳墠璁㈠崟缂哄皯浜у搧鍨嬪彿锛屾棤娉曟煡璇㈠伐鑹鸿矾绾�");
+ bindRouteDialogVisible.value = false;
+ return;
+ }
+ bindRouteLoading.value = true;
+ try {
+ const res = await listProcessRoute({productModelId: row.productModelId});
+ routeOptions.value = res.data || [];
+ } 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 handleQuery = () => {
- page.current = 1;
+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();
- };
- 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)
+ } catch (e) {
+ console.error("缁戝畾宸ヨ壓璺嚎澶辫触锛�", e);
+ proxy.$modal.msgError("缁戝畾宸ヨ壓璺嚎澶辫触");
+ } finally {
+ bindRouteSaving.value = 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.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;
@@ -342,74 +373,118 @@
.catch(() => {
tableLoading.value = false;
});
- };
+};
- const showRouteItemModal = async row => {
- const orderId = row.id;
- try {
- const res = await getOrderProcessRouteMain(orderId);
- const data = res.data || {};
- if (!data || !data.id) {
- proxy.$modal.msgWarning("鏈壘鍒板叧鑱旂殑宸ヨ壓璺嚎");
- return;
- }
- router.push({
- path: "/productionManagement/processRouteItem",
- query: {
- id: data.id,
- processRouteCode: data.processRouteCode || "",
- productName: data.productName || "",
- model: data.model || "",
- bomNo: data.bomNo || "",
- description: data.description || "",
- orderId,
- type: "order",
- },
- });
- } catch (e) {
- console.error("鑾峰彇宸ヨ壓璺嚎涓讳俊鎭け璐ワ細", e);
- proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎淇℃伅澶辫触");
+const showRouteItemModal = async row => {
+ const orderId = row.id;
+ try {
+ const res = await getOrderProcessRouteMain(orderId);
+ const data = res.data || {};
+ if (!data || !data.id) {
+ proxy.$modal.msgWarning("鏈壘鍒板叧鑱旂殑宸ヨ壓璺嚎");
+ return;
}
- };
-
- const showProductStructure = row => {
router.push({
- path: "/productionManagement/productStructureDetail",
+ path: "/productionManagement/processRouteItem",
query: {
- id: row.id,
- bomNo: row.bomNo || "",
- productName: row.productCategory || "",
- productModelName: row.specificationModel || "",
- orderId: row.id,
+ id: data.id,
+ processRouteCode: data.processRouteCode || "",
+ productName: data.productName || "",
+ model: data.model || "",
+ bomNo: data.bomNo || "",
+ description: data.description || "",
+ orderId,
type: "order",
},
});
- };
+ } catch (e) {
+ console.error("鑾峰彇宸ヨ壓璺嚎涓讳俊鎭け璐ワ細", e);
+ proxy.$modal.msgError("鑾峰彇宸ヨ壓璺嚎淇℃伅澶辫触");
+ }
+};
- // 瀵煎嚭
- const handleOut = () => {
- ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
- confirmButtonText: "纭",
- cancelButtonText: "鍙栨秷",
- type: "warning",
- })
+const showProductStructure = row => {
+ router.push({
+ path: "/productionManagement/productStructureDetail",
+ query: {
+ id: row.id,
+ bomNo: row.bomNo || "",
+ productName: row.productCategory || "",
+ productModelName: row.specificationModel || "",
+ orderId: row.id,
+ type: "order",
+ },
+ });
+};
+
+// 琛ㄦ牸閫夋嫨鏁版嵁
+const handleSelectionChange = (selection) => {
+ selectedRows.value = selection;
+};
+
+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 = () => {};
+const handleConfirmRoute = () => {
+};
- onMounted(() => {
- getList();
- });
+const handleFinishOrder = (row) => {
+ ElMessageBox.confirm("鏄惁纭缁撴潫锛�", "缁撴潫", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(() => {
+ finishOrder(row.id).then(res => {
+ proxy.$modal.msgSuccess("缁撴潫鎴愬姛");
+ getList()
+ })
+ })
+ .catch(() => {
+ proxy.$modal.msg("宸插彇娑�");
+ });
+};
+onMounted(() => {
+ getList();
+});
</script>
<style scoped lang="scss">
-.search_form{
+.search_form {
align-items: start;
}
@@ -425,7 +500,7 @@
background-color: #f80202;
}
-::v-deep .purple{
+::v-deep .purple {
background-color: #F4DEFA;
}
</style>
--
Gitblit v1.9.3