From 452e5c5e9a340367c8fdb14b0bdecc96dcb29491 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期三, 19 八月 2026 11:01:28 +0800
Subject: [PATCH] fix(router): 更新一袋一码首页路由标题
---
src/views/mes/pro/workorder/index.vue | 421 +++++++++++++++++++++++++++++++++------------------
1 files changed, 270 insertions(+), 151 deletions(-)
diff --git a/src/views/mes/pro/workorder/index.vue b/src/views/mes/pro/workorder/index.vue
index 164b891..05d1c44 100644
--- a/src/views/mes/pro/workorder/index.vue
+++ b/src/views/mes/pro/workorder/index.vue
@@ -1,162 +1,176 @@
<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
+ import type { VxeTableGridOptions } from "#/adapter/vxe-table";
+ import type { MesProWorkOrderApi } from "#/api/mes/pro/workorder";
-import { ref } from 'vue';
+ import { ref } from "vue";
-import { DocAlert, Page, useVbenModal } from '..\..\..\..\packages\effects\common-ui\src';
-import {
- BarcodeBizTypeEnum,
- MesProWorkOrderStatusEnum,
- MesProWorkOrderTypeEnum,
-} from '..\..\..\..\packages\constants\src';
-import { downloadFileFromBlobPart } from '..\..\..\..\packages\utils\src';
+ import { Page, useVbenModal } from "@vben/common-ui";
+ import {
+ MesProWorkOrderStatusEnum,
+ MesProWorkOrderTypeEnum,
+ } from "@vben/constants";
+ import { downloadFileFromBlobPart } from "@vben/utils";
-import { Button, message } from 'ant-design-vue';
+ import { Button, message, Progress, Steps, Popover, Modal } from "ant-design-vue";
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
- cancelWorkOrder,
- deleteWorkOrder,
- exportWorkOrder,
- getWorkOrderPage,
-} from '#/api/mes/pro/workorder';
-import { $t } from '#/locales';
-import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+ import { ACTION_ICON, TableAction, useVbenVxeGrid } from "#/adapter/vxe-table";
+ import {
+ cancelWorkOrder,
+ deleteWorkOrder,
+ exportWorkOrder,
+ getWorkOrderPage,
+ } from "#/api/mes/pro/workorder";
+ import { $t } from "#/locales";
+ import ArchiveDetail from '#/views/mes/pd/archive/modules/detail.vue';
+// import { BarcodeDetail } from '#/views/wls/barcode/components';
-import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
+ import { useGridColumns, useGridFormSchema } from "./data";
+ import Form from "./modules/form.vue";
-const [FormModal, formModalApi] = useVbenModal({
- connectedComponent: Form,
- destroyOnClose: true,
-});
-
-const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 鏉＄爜璇︽儏寮圭獥
-
-/** 鍒锋柊琛ㄦ牸 */
-function handleRefresh() {
- gridApi.query();
-}
-
-/** 鍒涘缓宸ュ崟 */
-function handleCreate() {
- formModalApi.setData({ formType: 'create' }).open();
-}
-
-/** 鏂板瀛愬伐鍗� */
-function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
- formModalApi.setData({ formType: 'create', parentRow: row }).open();
-}
-
-/** 鏌ョ湅宸ュ崟璇︽儏 */
-function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
- formModalApi.setData({ formType: 'detail', id: row.id }).open();
-}
-
-/** 缂栬緫宸ュ崟 */
-function handleEdit(row: MesProWorkOrderApi.WorkOrder) {
- formModalApi.setData({ formType: 'update', id: row.id }).open();
-}
-
-/** 瀹屾垚宸ュ崟 */
-function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
- formModalApi.setData({ formType: 'finish', id: row.id }).open();
-}
-
-/** 鍒犻櫎宸ュ崟 */
-async function handleDelete(row: MesProWorkOrderApi.WorkOrder) {
- const hideLoading = message.loading({
- content: $t('ui.actionMessage.deleting', [row.code]),
- duration: 0,
+ const [FormModal, formModalApi] = useVbenModal({
+ connectedComponent: Form,
+ destroyOnClose: true,
});
- try {
- await deleteWorkOrder(row.id!);
- message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
- handleRefresh();
- } finally {
- hideLoading();
+
+ const archiveDetailRef = ref<InstanceType<typeof ArchiveDetail>>();
+// const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 鏉＄爜璇︽儏寮圭獥
+
+ /** 鍒锋柊琛ㄦ牸 */
+ function handleRefresh() {
+ gridApi.query();
}
-}
-/** 鍙栨秷宸ュ崟 */
-async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
- await cancelWorkOrder(row.id!);
- message.success('宸ュ崟宸插彇娑�');
- handleRefresh();
-}
+ /** 鍒涘缓璁㈠崟 */
+ function handleCreate() {
+ formModalApi.setData({ formType: "create" }).open();
+ }
-/** 鏌ョ湅宸ュ崟鏉＄爜 */
-function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
- barcodeDetailRef.value?.openByBusiness(
- row.id!,
- BarcodeBizTypeEnum.WORKORDER,
- row.code,
- row.name,
- );
-}
+ /** 鏂板瀛愯鍗� */
+ function handleAddChild(row: MesProWorkOrderApi.WorkOrder) {
+ formModalApi.setData({ formType: "create", parentRow: row }).open();
+ }
-/** 瀵煎嚭琛ㄦ牸 */
-async function handleExport() {
- const data = await exportWorkOrder(await gridApi.formApi.getValues());
- downloadFileFromBlobPart({ fileName: '鐢熶骇宸ュ崟.xls', source: data });
-}
+ /** 鏌ョ湅璁㈠崟璇︽儏 */
+ function handleDetail(row: MesProWorkOrderApi.WorkOrder) {
+ formModalApi.setData({ formType: "detail", id: row.id }).open();
+ }
-const [Grid, gridApi] = useVbenVxeGrid({
- formOptions: {
- schema: useGridFormSchema(),
- },
- gridOptions: {
- columns: useGridColumns(),
- height: 'auto',
- keepSource: true,
- proxyConfig: {
- ajax: {
- query: async ({ page }, formValues) => {
- return await getWorkOrderPage({
- pageNo: page.currentPage,
- pageSize: page.pageSize,
- ...formValues,
- });
+ /** 缂栬緫璁㈠崟 */
+ function handleEdit(row: MesProWorkOrderApi.WorkOrder) {
+ formModalApi.setData({ formType: "update", id: row.id }).open();
+ }
+
+ /** 瀹屾垚璁㈠崟 */
+ function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
+ formModalApi.setData({ formType: "finish", id: row.id }).open();
+ }
+
+ /** 瀹屾垚璁㈠崟鍓嶆牎楠� */
+ function handleCheckFinish(row: MesProWorkOrderApi.WorkOrder) {
+ if (row.productionStatus !== 2) {
+ Modal.confirm({
+ title: '鎿嶄綔纭',
+ content: '璇ヨ鍗曟湭瀹屾垚锛屾槸鍚︾‘璁よ缁х画瀹屾垚锛�',
+ onOk() {
+ handleFinish(row);
+ },
+ });
+ } else {
+ handleFinish(row);
+ }
+ }
+
+ /** 鍒犻櫎璁㈠崟 */
+ async function handleDelete(row: MesProWorkOrderApi.WorkOrder) {
+ const hideLoading = message.loading({
+ content: $t("ui.actionMessage.deleting", [row.code]),
+ duration: 0,
+ });
+ try {
+ await deleteWorkOrder(row.id!);
+ message.success($t("ui.actionMessage.deleteSuccess", [row.code]));
+ handleRefresh();
+ } finally {
+ hideLoading();
+ }
+ }
+
+ /** 鍙栨秷璁㈠崟 */
+ async function handleCancel(row: MesProWorkOrderApi.WorkOrder) {
+ await cancelWorkOrder(row.id!);
+ message.success("璁㈠崟宸插彇娑�");
+ handleRefresh();
+ }
+
+ /** 鏌ョ湅璁㈠崟鏉＄爜 */
+ // function handleBarcode(row: MesProWorkOrderApi.WorkOrder) {
+ // barcodeDetailRef.value?.openByBusiness(
+ // row.id!,
+ // BarcodeBizTypeEnum.WORKORDER,
+ // row.code,
+ // row.name
+ // );
+ // }
+
+ /** 瀵煎嚭琛ㄦ牸 */
+ async function handleExport() {
+ const data = await exportWorkOrder(await gridApi.formApi.getValues());
+ downloadFileFromBlobPart({ fileName: "鐢熶骇璁㈠崟.xls", source: data });
+ }
+
+ const [Grid, gridApi] = useVbenVxeGrid({
+ formOptions: {
+ schema: useGridFormSchema(),
+ },
+ gridOptions: {
+ columns: useGridColumns(),
+ height: "auto",
+ keepSource: true,
+ proxyConfig: {
+ ajax: {
+ query: async ({ page }, formValues) => {
+ return await getWorkOrderPage({
+ pageNo: page.currentPage,
+ pageSize: page.pageSize,
+ ...formValues,
+ });
+ },
},
},
- },
- rowConfig: {
- keyField: 'id',
- isHover: true,
- },
- toolbarConfig: {
- refresh: true,
- search: true,
- },
- treeConfig: {
- parentField: 'parentId',
- rowField: 'id',
- transform: true,
- expandAll: true,
- reserve: true,
- },
- } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
-});
+ rowConfig: {
+ keyField: "id",
+ isHover: true,
+ },
+ toolbarConfig: {
+ refresh: true,
+ search: true,
+ },
+ treeConfig: {
+ parentField: "parentId",
+ rowField: "id",
+ transform: true,
+ expandAll: true,
+ reserve: true,
+ },
+ } as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
+ });
+
+ /** 鑾峰彇宸ュ簭鑺傜偣鐘舵�佹牱寮忕被 */
+ function getProcessNodeStatus(percent: number) {
+ if (percent >= 100) return 'completed';
+ if (percent > 0) return 'in-progress';
+ return 'pending';
+ }
</script>
<template>
<Page auto-content-height>
- <template #doc>
- <DocAlert
- title="銆愮敓浜с�戠敓浜у伐鍗�"
- url="https://doc.iocoder.cn/mes/pro/work-order/"
- />
- </template>
-
<FormModal @success="handleRefresh" />
-
- <Grid table-title="鐢熶骇宸ュ崟鍒楄〃">
+ <Grid table-title="鐢熶骇璁㈠崟鍒楄〃">
<template #toolbar-tools>
- <TableAction
- :actions="[
+ <TableAction :actions="[
{
- label: $t('ui.actionTitle.create', ['宸ュ崟']),
+ label: $t('ui.actionTitle.create', ['璁㈠崟']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['mes:pro-work-order:create'],
@@ -169,17 +183,39 @@
auth: ['mes:pro-work-order:export'],
onClick: handleExport,
},
- ]"
- />
+ ]" />
</template>
<template #code="{ row }">
- <Button type="link" @click="handleDetail(row)">
+ <Button type="link"
+ @click="handleDetail(row)">
{{ row.code }}
</Button>
</template>
+ <template #processProgressList="{ row }">
+ <div v-if="row.processProgressList && row.processProgressList.length > 0" class="process-node-list">
+ <div
+ v-for="(item, index) in row.processProgressList"
+ :key="index"
+ class="process-node-item"
+ >
+ <div class="process-node-dot" :class="getProcessNodeStatus(item.progressPercent || item.progress || 0)"></div>
+ <div class="process-node-info">
+ <span class="process-node-name" :title="item.processName ">{{ item.processName }}</span>
+ <span class="process-node-percent">{{ item.progress || 0 }}%</span>
+ </div>
+ <div v-if="index !== row.processProgressList.length - 1" class="process-node-line"></div>
+ </div>
+ </div>
+ <span v-else>-</span>
+ </template>
+ <template #completionProgress="{ row }">
+ <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
+ <Progress :percent="row.completionProgress || 0" :show-info="false" size="small" style="flex: 1; margin: 0;" />
+ <span style="white-space: nowrap; min-width: 40px; text-align: left;">{{ row.completionProgress || 0 }}%</span>
+ </div>
+ </template>
<template #actions="{ row }">
- <TableAction
- :actions="[
+ <TableAction :actions="[
{
label: $t('common.edit'),
type: 'link',
@@ -213,8 +249,10 @@
label: '瀹屾垚',
type: 'link',
auth: ['mes:pro-work-order:update'],
- ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
- onClick: handleFinish.bind(null, row),
+ ifShow:
+ row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
+ !!row.quantityProduced,
+ onClick: handleCheckFinish.bind(null, row),
},
{
label: '鍙栨秷',
@@ -223,20 +261,101 @@
auth: ['mes:pro-work-order:update'],
ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
popConfirm: {
- title: '纭瑕佸彇娑堣宸ュ崟鍚楋紵鍙栨秷鍚庝笉鍙仮澶嶃��',
+ title: '纭瑕佸彇娑堣璁㈠崟鍚楋紵鍙栨秷鍚庝笉鍙仮澶嶃��',
confirm: handleCancel.bind(null, row),
},
},
+ // {
+ // label: '鏉＄爜',
+ // type: 'link',
+ // auth: ['mes:pro-work-order:query'],
+ // onClick: handleBarcode.bind(null, row),
+ // },
{
- label: '鏉＄爜',
+ label: '褰掓。',
type: 'link',
- auth: ['mes:pro-work-order:query'],
- onClick: handleBarcode.bind(null, row),
+ onClick: () => archiveDetailRef.value?.open(row.productCode),
},
- ]"
- />
+ ]" />
</template>
</Grid>
- <BarcodeDetail ref="barcodeDetailRef" />
+ <!-- <BarcodeDetail ref="barcodeDetailRef" /> -->
+ <ArchiveDetail ref="archiveDetailRef" />
</Page>
</template>
+
+<style scoped>
+.process-node-list {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ overflow-y: hidden;
+ max-width: 100%;
+ padding-bottom: 4px;
+}
+
+/* Custom scrollbar to make it sleek */
+.process-node-list::-webkit-scrollbar {
+ height: 4px;
+}
+.process-node-list::-webkit-scrollbar-thumb {
+ background-color: #d9d9d9;
+ border-radius: 4px;
+}
+.process-node-list::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.process-node-item {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.process-node-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 6px;
+}
+
+.process-node-dot.completed {
+ background-color: #52c41a;
+}
+.process-node-dot.in-progress {
+ background-color: #1890ff;
+}
+.process-node-dot.pending {
+ background-color: #d9d9d9;
+}
+
+.process-node-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-right: 12px;
+ font-size: 12px;
+ line-height: 1.2;
+}
+
+.process-node-name {
+ color: #333;
+ max-width: 80px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.process-node-percent {
+ color: #888;
+ font-size: 11px;
+}
+
+.process-node-line {
+ width: 20px;
+ height: 1px;
+ background-color: #e8e8e8;
+ margin-right: 12px;
+}
+
+</style>
--
Gitblit v1.9.3