From 9bca5ca91f2ec5107c6e10c8d18588636213bd58 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 16 一月 2026 16:56:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_New' into dev_New
---
src/views/productionManagement/productionProcess/index.vue | 96 +
src/views/productionManagement/processRoute/index.vue | 12
src/views/productionManagement/workOrder/index.vue | 108 +
src/views/productionManagement/processRoute/processRouteItem/index.vue | 1133 ++++++++++-----
src/api/productionManagement/productionOrder.js | 28
src/api/inventoryManagement/stockIn.js | 87 +
src/components/PageHeader/index.vue | 53
src/views/productionManagement/productionProcess/Edit.vue | 32
src/views/productionManagement/productStructure/index.vue | 301 +++
src/api/inventoryManagement/stockManage.js | 27
src/api/productionManagement/processRouteItem.js | 41
src/views/productionManagement/processRoute/New.vue | 171 +-
src/api/productionManagement/processRoute.js | 8
src/api/productionManagement/productStructure.js | 4
src/api/productionManagement/productBom.js | 47
src/api/productionManagement/productionProcess.js | 18
src/components/QRCodeGenerator/index.vue | 859 ++++++-----
src/views/productionManagement/productionReporting/Input.vue | 10
src/api/productionManagement/productProcessRoute.js | 62
src/views/productionManagement/productStructure/Detail/index.vue | 109
/dev/null | 555 -------
src/views/productionManagement/productionReporting/index.vue | 109 -
src/api/inventoryManagement/stockOut.js | 21
src/main.js | 3
src/views/productionManagement/productionOrder/index.vue | 234 ++
src/views/productionManagement/processRoute/Edit.vue | 232 ++-
src/views/collaborativeApproval/noticeManagement/index.vue | 3
src/views/productionManagement/productionProcess/New.vue | 3
28 files changed, 2,588 insertions(+), 1,778 deletions(-)
diff --git a/src/api/inventoryManagement/stockIn.js b/src/api/inventoryManagement/stockIn.js
index 55cef01..3481415 100644
--- a/src/api/inventoryManagement/stockIn.js
+++ b/src/api/inventoryManagement/stockIn.js
@@ -9,6 +9,50 @@
});
};
+// 鏌ヨ鐢熶骇鍏ュ簱淇℃伅鍒楄〃
+export const getStockInPageByProduction = (params) => {
+ return request({
+ url: "/stockin/listPageByProduction",
+ method: "get",
+ params,
+ });
+};
+
+// 鏌ヨ鐢熶骇鍏ュ簱淇℃伅鍒楄〃
+export const getStockInPageByProductProduction = (params) => {
+ return request({
+ url: "/stockin/listPageByProductProduction",
+ method: "get",
+ params,
+ });
+};
+
+// 鍑哄簱鍙拌处-鏌ヨ鑷畾涔夊叆搴撲俊鎭垪琛�
+export const getStockInPageByCustom = (params) => {
+ return request({
+ url: "/stockmanagement/listPageByCustom",
+ method: "get",
+ params,
+ });
+};
+// 鍏ュ簱绠＄悊-鏌ヨ鑷畾涔夊叆搴撲俊鎭垪琛�
+export const getInPageByCustom = (params) => {
+ return request({
+ url: "/stockin/listPageByCustom",
+ method: "get",
+ params,
+ });
+};
+
+// 鍑哄簱鍙拌处-鏌ヨ鐢熶骇鍑哄簱淇℃伅鍒楄〃
+export const getStockInPageByProduct = (params) => {
+ return request({
+ url: "/stockmanagement/listPageByProduct",
+ method: "get",
+ params,
+ });
+};
+
// 淇敼鍏ュ簱瀛樹俊鎭�
export const updateStockIn = (data) => {
return request({
@@ -26,6 +70,14 @@
data,
});
};
+// 淇敼鏉愭枡搴撳瓨淇℃伅
+export const updateManagementByCustom = (data) => {
+ return request({
+ url: "/stockin/updateManagementByCustom ",
+ method: "post",
+ data,
+ });
+};
// 鏂板鍟嗗搧鍏ュ簱淇℃伅
export function addSutockIn(data) {
@@ -36,6 +88,32 @@
})
}
+// 鏂板鑷畾涔夊叆搴撲俊鎭�
+export function addStockInCustom(data) {
+ return request({
+ url: '/stockin/addCustom',
+ method: 'post',
+ data: data
+ })
+}
+
+// 缂栬緫鑷畾涔夊叆搴撲俊鎭�
+export function updateStockInCustom(data) {
+ return request({
+ url: '/stockin/updateCustom',
+ method: 'post',
+ data: data
+ })
+}
+// 缂栬緫鎴愬搧鍏ュ簱淇℃伅
+export function updateProduct(data) {
+ return request({
+ url: '/stockin/update',
+ method: 'post',
+ data: data
+ })
+}
+
// 鍒犻櫎鍏ュ簱淇℃伅
export function delStockIn(ids) {
return request({
@@ -45,6 +123,15 @@
})
}
+// 鍒犻櫎鑷畾涔夊叆搴撲俊鎭�
+export function delStockInCustom(ids) {
+ return request({
+ url: '/stockin/delteCustom',
+ method: 'post',
+ data: ids
+ })
+}
+
// 瀵煎嚭鍏ュ簱淇℃伅
export function exportStockIn(query) {
return request({
diff --git a/src/api/inventoryManagement/stockManage.js b/src/api/inventoryManagement/stockManage.js
index bb2081b..e2a4ebf 100644
--- a/src/api/inventoryManagement/stockManage.js
+++ b/src/api/inventoryManagement/stockManage.js
@@ -9,6 +9,31 @@
});
};
+// 鏌ヨ鐢熶骇鍏ュ簱搴撳瓨淇℃伅鍒楄〃
+export const getStockManagePageByProduction = (params) => {
+ return request({
+ url: "/stockin/listPageCopyByProduction",
+ method: "get",
+ params,
+ });
+};
+// 鏌ヨ鎴愬搧搴撳瓨淇℃伅鍒楄〃
+export const getStockManageProduction = (params) => {
+ return request({
+ url: "/stockin/listPageProductionStock",
+ method: "get",
+ params,
+ });
+};
+// 鏌ヨ鑷畾涔夊叆搴撳簱瀛樹俊鎭垪琛�
+export const getStockManagePageByCustom = (params) => {
+ return request({
+ url: "/stockin/listPageCopyByCustom",
+ method: "get",
+ params,
+ });
+};
+
// 淇敼搴撳瓨淇℃伅
export const updateStockManage = (data) => {
@@ -38,7 +63,7 @@
})
}
-//鍑哄簱鎺ュ彛
+// 鍑哄簱绠＄悊-棰嗙敤鎺ュ彛
export const stockOut = (data) => {
return request({
url: '/stockmanagement/stockout',
diff --git a/src/api/inventoryManagement/stockOut.js b/src/api/inventoryManagement/stockOut.js
index 5d410d9..f1b36d9 100644
--- a/src/api/inventoryManagement/stockOut.js
+++ b/src/api/inventoryManagement/stockOut.js
@@ -1,9 +1,18 @@
import request from "@/utils/request";
-//鏌ヨ鍑哄簱鍒楄〃
+// 鍑哄簱鍙拌处-閲囪喘鍑哄簱鏌ヨ鍑哄簱鍒楄〃
export const getStockOutPage = (params) => {
return request({
url: "/stockmanagement/listPage",
+ method: "get",
+ params,
+ });
+};
+
+// 鍑哄簱鍙拌处-鐢熶骇鍑哄簱鏌ヨ鍑哄簱鍒楄〃
+export const getStockOutSemiProductPage = (params) => {
+ return request({
+ url: "/stockmanagement/listPageBySemiProduct",
method: "get",
params,
});
@@ -35,13 +44,3 @@
data: ids
})
}
-
-//瀵煎嚭鍑哄簱淇℃伅
-export const exportStockOut = (query) => {
- return request({
- url: '/stockmanagement/export',
- method: 'get',
- params: query,
- responseType: 'blob'
- })
-}
\ No newline at end of file
diff --git a/src/api/productionManagement/processRoute.js b/src/api/productionManagement/processRoute.js
index 4d16775..c13b2fc 100644
--- a/src/api/productionManagement/processRoute.js
+++ b/src/api/productionManagement/processRoute.js
@@ -31,4 +31,12 @@
method: 'put',
data: data,
})
+}
+
+// 鑾峰彇璇︽儏
+export function getById(id) {
+ return request({
+ url: `/processRoute/${id}`,
+ method: 'get',
+ })
}
\ No newline at end of file
diff --git a/src/api/productionManagement/processRouteItem.js b/src/api/productionManagement/processRouteItem.js
index ad4861c..9e81406 100644
--- a/src/api/productionManagement/processRouteItem.js
+++ b/src/api/productionManagement/processRouteItem.js
@@ -3,17 +3,36 @@
// 鍒楄〃鏌ヨ
export function findProcessRouteItemList(query) {
- return request({
- url: "/processRouteItem/list",
- method: "get",
- params: query,
- });
+ return request({
+ url: "/processRouteItem/list",
+ method: "get",
+ params: query,
+ });
}
export function addOrUpdateProcessRouteItem(data) {
- return request({
- url: "/processRouteItem",
- method: "post",
- data: data,
- });
-}
\ No newline at end of file
+ return request({
+ url: "/processRouteItem",
+ method: "post",
+ data: data,
+ });
+}
+
+// 鎺掑簭鎺ュ彛
+export function sortProcessRouteItem(data) {
+ return request({
+ url: "/processRouteItem/sort",
+ method: "post",
+ data: data,
+ });
+}
+
+// 鎵归噺鍒犻櫎鎺ュ彛
+export function batchDeleteProcessRouteItem(ids) {
+ // 灏唅d鏁扮粍杞崲涓洪�楀彿鍒嗛殧鐨勫瓧绗︿覆锛屾嫾鎺ュ埌URL鍚庨潰
+ const idsStr = Array.isArray(ids) ? ids.join(",") : ids;
+ return request({
+ url: `/processRouteItem/batchDelete/${idsStr}`,
+ method: "delete",
+ });
+}
diff --git a/src/api/productionManagement/productBom.js b/src/api/productionManagement/productBom.js
new file mode 100644
index 0000000..893755b
--- /dev/null
+++ b/src/api/productionManagement/productBom.js
@@ -0,0 +1,47 @@
+// 浜у搧BOM椤甸潰鎺ュ彛
+import request from "@/utils/request";
+
+// 鍒嗛〉鏌ヨ
+export function listPage(query) {
+ return request({
+ url: "/productBom/listPage",
+ method: "get",
+ params: query,
+ });
+}
+
+// 鏂板
+export function add(data) {
+ return request({
+ url: "/productBom/add",
+ method: "post",
+ data: data,
+ });
+}
+
+// 淇敼
+export function update(data) {
+ return request({
+ url: "/productBom/update",
+ method: "put",
+ data: data,
+ });
+}
+
+// 鎵归噺鍒犻櫎
+export function batchDelete(ids) {
+ return request({
+ url: "/productBom/batchDelete",
+ method: "delete",
+ data: ids,
+ });
+}
+
+// 鏍规嵁浜у搧鍨嬪彿ID鏌ヨBOM
+export function getByModel(productModelId) {
+ return request({
+ url: "/productBom/getByModel",
+ method: "get",
+ params: { productModelId },
+ });
+}
diff --git a/src/api/productionManagement/productProcessRoute.js b/src/api/productionManagement/productProcessRoute.js
index d756e26..e8d5da5 100644
--- a/src/api/productionManagement/productProcessRoute.js
+++ b/src/api/productionManagement/productProcessRoute.js
@@ -3,26 +3,52 @@
// 鍒楄〃鏌ヨ
export function findProductProcessRouteItemList(query) {
- return request({
- url: "/productProcessRoute/list",
- method: "get",
- params: query,
- });
+ return request({
+ url: "/productProcessRoute/list",
+ method: "get",
+ params: query,
+ });
}
export function addOrUpdateProductProcessRouteItem(data) {
- return request({
- url: "/productProcessRoute/updateRouteItem",
- method: "post",
- data: data,
- });
+ return request({
+ url: "/productProcessRoute/updateRouteItem",
+ method: "post",
+ data: data,
+ });
}
-// 鍒犻櫎瀹㈡埛妗ｆ
-export function deleteRouteItem(ids) {
- return request({
- url: '/productProcessRoute/deleteRouteItem',
- method: 'delete',
- data: ids
- })
-}
\ No newline at end of file
+// 鐢熶骇璁㈠崟涓嬶細鏂板宸ヨ壓璺嚎椤圭洰
+export function addRouteItem(data) {
+ return request({
+ url: "/productProcessRoute/addRouteItem",
+ method: "post",
+ data,
+ });
+}
+
+// 鑾峰彇鐢熶骇璁㈠崟鍏宠仈鐨勫伐鑹鸿矾绾夸富淇℃伅
+export function listMain(orderId) {
+ return request({
+ url: "/productProcessRoute/listMain",
+ method: "get",
+ params: { orderId },
+ });
+}
+
+// 鍒犻櫎宸ヨ壓璺嚎椤圭洰锛堣矾鐢卞悗鎷兼帴 id锛�
+export function deleteRouteItem(id) {
+ return request({
+ url: `/productProcessRoute/deleteRouteItem/${id}`,
+ method: "delete",
+ });
+}
+
+// 鐢熶骇璁㈠崟涓嬶細鎺掑簭宸ヨ壓璺嚎椤圭洰
+export function sortRouteItem(data) {
+ return request({
+ url: "/productProcessRoute/sortRouteItem",
+ method: "post",
+ data,
+ });
+}
diff --git a/src/api/productionManagement/productStructure.js b/src/api/productionManagement/productStructure.js
index 074e27a..e69e14a 100644
--- a/src/api/productionManagement/productStructure.js
+++ b/src/api/productionManagement/productStructure.js
@@ -4,7 +4,7 @@
// 鍒嗛〉鏌ヨ
export function queryList(id) {
return request({
- url: "/productStructure/listByproductModelId/" + id,
+ url: "/productStructure/listBybomId/" + id,
method: "get",
});
}
@@ -15,4 +15,4 @@
method: "post",
data: data,
});
-}
\ No newline at end of file
+}
diff --git a/src/api/productionManagement/productionOrder.js b/src/api/productionManagement/productionOrder.js
index 0c37be1..9f110a7 100644
--- a/src/api/productionManagement/productionOrder.js
+++ b/src/api/productionManagement/productionOrder.js
@@ -10,7 +10,6 @@
});
}
-
export function productOrderListPage(query) {
return request({
url: "/productOrder/page",
@@ -19,6 +18,33 @@
});
}
+// 鐢熶骇璁㈠崟-鎸変骇鍝佸瀷鍙锋煡璇㈠彲鐢ㄥ伐鑹鸿矾绾垮垪琛�
+export function listProcessRoute(query) {
+ return request({
+ url: "/productOrder/listProcessRoute",
+ method: "get",
+ params: query,
+ });
+}
+
+// 鐢熶骇璁㈠崟-缁戝畾宸ヨ壓璺嚎
+export function bindingRoute(data) {
+ return request({
+ url: "/productOrder/bindingRoute",
+ method: "post",
+ data,
+ });
+}
+
+// 鐢熶骇璁㈠崟-鏌ヨ浜у搧缁撴瀯鍒楄〃
+export function listProcessBom(query) {
+ return request({
+ url: "/productOrder/listProcessBom",
+ method: "get",
+ params: query,
+ });
+}
+
// 鑾峰彇鐐掓満姝ｅ湪宸ヤ綔閲忔暟鎹�
export function schedulingList(query) {
return request({
diff --git a/src/api/productionManagement/productionProcess.js b/src/api/productionManagement/productionProcess.js
index e3cd929..d3a453c 100644
--- a/src/api/productionManagement/productionProcess.js
+++ b/src/api/productionManagement/productionProcess.js
@@ -48,4 +48,22 @@
url: "/productProcess/list",
method: "get",
});
+}
+
+// 瀵煎叆鏁版嵁
+export function importData(data) {
+ return request({
+ url: "/productProcess/importData",
+ method: "post",
+ data: data,
+ });
+}
+
+// 涓嬭浇妯℃澘
+export function downloadTemplate() {
+ return request({
+ url: "/productProcess/downloadTemplate",
+ method: "post",
+ responseType: "blob",
+ });
}
\ No newline at end of file
diff --git a/src/components/PageHeader/index.vue b/src/components/PageHeader/index.vue
new file mode 100644
index 0000000..d8fc6fa
--- /dev/null
+++ b/src/components/PageHeader/index.vue
@@ -0,0 +1,53 @@
+<template>
+ <div class="page-header-wrapper">
+ <el-page-header @back="handleBack" :content="content">
+ <template #icon v-if="$slots.icon">
+ <slot name="icon"></slot>
+ </template>
+ <template #title v-if="$slots.title">
+ <slot name="title"></slot>
+ </template>
+ <template #content v-if="$slots.content">
+ <slot name="content"></slot>
+ </template>
+ <template #extra>
+ <slot name="extra">
+ <slot name="right-button"></slot>
+ </slot>
+ </template>
+ </el-page-header>
+ </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+ content: {
+ type: String,
+ default: ''
+ }
+})
+
+const emit = defineEmits(['back'])
+
+const router = useRouter()
+
+const handleBack = () => {
+ emit('back')
+ // 榛樿杩斿洖鍒颁笂涓�绾�
+ router.back()
+}
+</script>
+
+<style scoped>
+.page-header-wrapper {
+ margin-bottom: 16px;
+}
+
+.page-header-wrapper :deep(.el-page-header__extra) {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+</style>
diff --git a/src/components/QRCodeGenerator/index.vue b/src/components/QRCodeGenerator/index.vue
index 1708130..fd44f44 100644
--- a/src/components/QRCodeGenerator/index.vue
+++ b/src/components/QRCodeGenerator/index.vue
@@ -1,70 +1,79 @@
<template>
<div class="qr-code-generator">
<!-- 浜岀淮鐮佺敓鎴愯〃鍗� -->
- <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="qr-form">
+ <el-form :model="form"
+ :rules="rules"
+ ref="formRef"
+ label-width="120px"
+ class="qr-form">
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="鏍囪瘑绫诲瀷" prop="type">
- <el-select v-model="form.type" placeholder="璇烽�夋嫨鏍囪瘑绫诲瀷" style="width: 100%">
- <el-option label="浜岀淮鐮�" value="qrcode"></el-option>
- <el-option label="闃蹭吉鐮�" value="security"></el-option>
+ <el-form-item label="鏍囪瘑绫诲瀷"
+ prop="type">
+ <el-select v-model="form.type"
+ placeholder="璇烽�夋嫨鏍囪瘑绫诲瀷"
+ style="width: 100%">
+ <el-option label="浜岀淮鐮�"
+ value="qrcode"></el-option>
+ <el-option label="闃蹭吉鐮�"
+ value="security"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鍐呭" prop="content">
- <el-input
- v-model="form.content"
- placeholder="璇疯緭鍏ヨ缂栫爜鐨勫唴瀹�"
- :type="form.type === 'security' ? 'textarea' : 'text'"
- :rows="form.type === 'security' ? 3 : 1"
- ></el-input>
+ <el-form-item label="鍐呭"
+ prop="content">
+ <el-input v-model="form.content"
+ placeholder="璇疯緭鍏ヨ缂栫爜鐨勫唴瀹�"
+ :type="form.type === 'security' ? 'textarea' : 'text'"
+ :rows="form.type === 'security' ? 3 : 1"></el-input>
</el-form-item>
</el-col>
</el-row>
-
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="灏哄" prop="size">
- <el-input-number
- v-model="form.size"
- :min="100"
- :max="500"
- :step="50"
- style="width: 100%"
- ></el-input-number>
+ <el-form-item label="灏哄"
+ prop="size">
+ <el-input-number v-model="form.size"
+ :min="100"
+ :max="500"
+ :step="50"
+ style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="杈硅窛" prop="margin">
- <el-input-number
- v-model="form.margin"
- :min="0"
- :max="10"
- :step="1"
- style="width: 100%"
- ></el-input-number>
+ <el-form-item label="杈硅窛"
+ prop="margin">
+ <el-input-number v-model="form.margin"
+ :min="0"
+ :max="10"
+ :step="1"
+ style="width: 100%"></el-input-number>
</el-form-item>
</el-col>
</el-row>
-
<el-row :gutter="20">
<el-col :span="12">
- <el-form-item label="鍓嶆櫙鑹�" prop="foregroundColor">
- <el-color-picker v-model="form.foregroundColor" style="width: 100%"></el-color-picker>
+ <el-form-item label="鍓嶆櫙鑹�"
+ prop="foregroundColor">
+ <el-color-picker v-model="form.foregroundColor"
+ style="width: 100%"></el-color-picker>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="鑳屾櫙鑹�" prop="backgroundColor">
- <el-color-picker v-model="form.backgroundColor" style="width: 100%"></el-color-picker>
+ <el-form-item label="鑳屾櫙鑹�"
+ prop="backgroundColor">
+ <el-color-picker v-model="form.backgroundColor"
+ style="width: 100%"></el-color-picker>
</el-form-item>
</el-col>
</el-row>
-
<el-row :gutter="20">
<el-col :span="24">
<el-form-item>
- <el-button type="primary" @click="generateCode" :loading="generating">
+ <el-button type="primary"
+ @click="generateCode"
+ :loading="generating">
鐢熸垚{{ form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�' }}
</el-button>
<el-button @click="resetForm">閲嶇疆</el-button>
@@ -72,18 +81,17 @@
</el-col>
</el-row>
</el-form>
-
<!-- 鐢熸垚鐨勭爜鏄剧ず鍖哄煙 -->
- <div v-if="generatedCodeUrl" class="code-display">
+ <div v-if="generatedCodeUrl"
+ class="code-display">
<el-divider content-position="center">
{{ form.type === 'qrcode' ? '鐢熸垚鐨勪簩缁寸爜' : '鐢熸垚鐨勯槻浼爜' }}
</el-divider>
-
<div class="code-container">
<div class="code-image">
- <img :src="generatedCodeUrl" :alt="form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'" />
+ <img :src="generatedCodeUrl"
+ :alt="form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'" />
</div>
-
<div class="code-info">
<p><strong>鍐呭锛�</strong>{{ form.content }}</p>
<p><strong>绫诲瀷锛�</strong>{{ form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�' }}</p>
@@ -91,60 +99,71 @@
<p><strong>鐢熸垚鏃堕棿锛�</strong>{{ generateTime }}</p>
</div>
</div>
-
<div class="code-actions">
- <el-button type="success" @click="downloadCode" icon="Download">
+ <el-button type="success"
+ @click="downloadCode"
+ icon="Download">
涓嬭浇鍥剧墖
</el-button>
- <el-button type="primary" @click="copyToClipboard" icon="CopyDocument">
+ <el-button type="primary"
+ @click="copyToClipboard"
+ icon="CopyDocument">
澶嶅埗鍐呭
</el-button>
- <el-button @click="printCode" icon="Printer">
+ <el-button @click="printCode"
+ icon="Printer">
鎵撳嵃
</el-button>
</div>
</div>
-
<!-- 鎵归噺鐢熸垚瀵硅瘽妗� -->
- <el-dialog v-model="batchDialogVisible" title="鎵归噺鐢熸垚" width="600px">
- <el-form :model="batchForm" label-width="120px">
+ <el-dialog v-model="batchDialogVisible"
+ title="鎵归噺鐢熸垚"
+ width="600px">
+ <el-form :model="batchForm"
+ label-width="120px">
<el-form-item label="鐢熸垚鏁伴噺">
- <el-input-number v-model="batchForm.quantity" :min="1" :max="100" style="width: 100%"></el-input-number>
+ <el-input-number v-model="batchForm.quantity"
+ :min="1"
+ :max="100"
+ style="width: 100%"></el-input-number>
</el-form-item>
<el-form-item label="鍓嶇紑">
- <el-input v-model="batchForm.prefix" placeholder="璇疯緭鍏ュ墠缂�锛屽锛歅ROD_"></el-input>
+ <el-input v-model="batchForm.prefix"
+ placeholder="璇疯緭鍏ュ墠缂�锛屽锛歅ROD_"></el-input>
</el-form-item>
<el-form-item label="璧峰缂栧彿">
- <el-input-number v-model="batchForm.startNumber" :min="1" style="width: 100%"></el-input-number>
+ <el-input-number v-model="batchForm.startNumber"
+ :min="1"
+ style="width: 100%"></el-input-number>
</el-form-item>
</el-form>
-
<template #footer>
<div class="dialog-footer">
+ <el-button type="primary"
+ @click="generateBatchCodes">寮�濮嬬敓鎴�</el-button>
<el-button @click="batchDialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary" @click="generateBatchCodes">寮�濮嬬敓鎴�</el-button>
</div>
</template>
</el-dialog>
-
<!-- 鎵归噺鐢熸垚缁撴灉 -->
- <div v-if="batchCodes.length > 0" class="batch-results">
+ <div v-if="batchCodes.length > 0"
+ class="batch-results">
<el-divider content-position="center">鎵归噺鐢熸垚缁撴灉</el-divider>
-
<div class="batch-grid">
- <div
- v-for="(code, index) in batchCodes"
- :key="index"
- class="batch-item"
- >
- <img :src="code.url" :alt="code.content" />
+ <div v-for="(code, index) in batchCodes"
+ :key="index"
+ class="batch-item">
+ <img :src="code.url"
+ :alt="code.content" />
<p class="batch-content">{{ code.content }}</p>
- <el-button size="small" @click="downloadSingleCode(code)">涓嬭浇</el-button>
+ <el-button size="small"
+ @click="downloadSingleCode(code)">涓嬭浇</el-button>
</div>
</div>
-
<div class="batch-actions">
- <el-button type="success" @click="downloadAllCodes">涓嬭浇鍏ㄩ儴</el-button>
+ <el-button type="success"
+ @click="downloadAllCodes">涓嬭浇鍏ㄩ儴</el-button>
<el-button @click="clearBatchCodes">娓呯┖缁撴灉</el-button>
</div>
</div>
@@ -152,390 +171,396 @@
</template>
<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import QRCode from 'qrcode'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Download, CopyDocument, Printer } from '@element-plus/icons-vue'
+ import { ref, reactive, computed, onMounted } from "vue";
+ import QRCode from "qrcode";
+ import { ElMessage, ElMessageBox } from "element-plus";
+ import { Download, CopyDocument, Printer } from "@element-plus/icons-vue";
-// 瀹氫箟缁勪欢鍚嶇О
-defineOptions({
- name: 'QRCodeGenerator'
-})
+ // 瀹氫箟缁勪欢鍚嶇О
+ defineOptions({
+ name: "QRCodeGenerator",
+ });
-// 琛ㄥ崟鏁版嵁
-const form = reactive({
- type: 'qrcode',
- content: '',
- size: 200,
- margin: 2,
- foregroundColor: '#000000',
- backgroundColor: '#FFFFFF'
-})
+ // 琛ㄥ崟鏁版嵁
+ const form = reactive({
+ type: "qrcode",
+ content: "",
+ size: 200,
+ margin: 2,
+ foregroundColor: "#000000",
+ backgroundColor: "#FFFFFF",
+ });
-// 琛ㄥ崟楠岃瘉瑙勫垯
-const rules = {
- type: [{ required: true, message: '璇烽�夋嫨鏍囪瘑绫诲瀷', trigger: 'change' }],
- content: [{ required: true, message: '璇疯緭鍏ュ唴瀹�', trigger: 'blur' }]
-}
+ // 琛ㄥ崟楠岃瘉瑙勫垯
+ const rules = {
+ type: [{ required: true, message: "璇烽�夋嫨鏍囪瘑绫诲瀷", trigger: "change" }],
+ content: [{ required: true, message: "璇疯緭鍏ュ唴瀹�", trigger: "blur" }],
+ };
-// 鍝嶅簲寮忔暟鎹�
-const formRef = ref()
-const generating = ref(false)
-const generatedCodeUrl = ref('')
-const generateTime = ref('')
-const batchDialogVisible = ref(false)
-const batchForm = reactive({
- quantity: 10,
- prefix: '',
- startNumber: 1
-})
-const batchCodes = ref([])
+ // 鍝嶅簲寮忔暟鎹�
+ const formRef = ref();
+ const generating = ref(false);
+ const generatedCodeUrl = ref("");
+ const generateTime = ref("");
+ const batchDialogVisible = ref(false);
+ const batchForm = reactive({
+ quantity: 10,
+ prefix: "",
+ startNumber: 1,
+ });
+ const batchCodes = ref([]);
-// 鐢熸垚浜岀淮鐮佹垨闃蹭吉鐮�
-const generateCode = async () => {
- try {
- await formRef.value.validate()
-
- if (!form.content.trim()) {
- ElMessage.warning('璇疯緭鍏ヨ缂栫爜鐨勫唴瀹�')
- return
- }
-
- generating.value = true
-
- if (form.type === 'qrcode') {
- // 鐢熸垚浜岀淮鐮�
- generatedCodeUrl.value = await QRCode.toDataURL(form.content, {
- width: form.size,
- margin: form.margin,
- color: {
- dark: form.foregroundColor,
- light: form.backgroundColor
- },
- errorCorrectionLevel: 'M'
- })
- } else {
- // 鐢熸垚闃蹭吉鐮侊紙浣跨敤浜岀淮鐮佹妧鏈紝浣嗗唴瀹规牸寮忎笉鍚岋級
- const securityContent = generateSecurityCode(form.content)
- generatedCodeUrl.value = await QRCode.toDataURL(securityContent, {
- width: form.size,
- margin: form.margin,
- color: {
- dark: form.foregroundColor,
- light: form.backgroundColor
- },
- errorCorrectionLevel: 'H' // 闃蹭吉鐮佷娇鐢ㄦ渶楂樼籂閿欑骇鍒�
- })
- }
-
- generateTime.value = new Date().toLocaleString()
- ElMessage.success('鐢熸垚鎴愬姛锛�')
-
- } catch (error) {
- console.error('鐢熸垚澶辫触:', error)
- ElMessage.error('鐢熸垚澶辫触锛�' + error.message)
- } finally {
- generating.value = false
- }
-}
+ // 鐢熸垚浜岀淮鐮佹垨闃蹭吉鐮�
+ const generateCode = async () => {
+ try {
+ await formRef.value.validate();
-// 鐢熸垚闃蹭吉鐮佸唴瀹�
-const generateSecurityCode = (content) => {
- const timestamp = Date.now()
- const random = Math.random().toString(36).substr(2, 8)
- return `SEC_${content}_${timestamp}_${random}`
-}
+ if (!form.content.trim()) {
+ ElMessage.warning("璇疯緭鍏ヨ缂栫爜鐨勫唴瀹�");
+ return;
+ }
-// 涓嬭浇鐢熸垚鐨勭爜
-const downloadCode = () => {
- if (!generatedCodeUrl.value) {
- ElMessage.warning('璇峰厛鐢熸垚鐮�')
- return
- }
-
- const a = document.createElement('a')
- a.href = generatedCodeUrl.value
- a.download = `${form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'}_${new Date().getTime()}.png`
- document.body.appendChild(a)
- a.click()
- document.body.removeChild(a)
- ElMessage.success('涓嬭浇鎴愬姛锛�')
-}
+ generating.value = true;
-// 澶嶅埗鍐呭鍒板壀璐存澘
-const copyToClipboard = async () => {
- try {
- await navigator.clipboard.writeText(form.content)
- ElMessage.success('鍐呭宸插鍒跺埌鍓创鏉�')
- } catch (error) {
- // 闄嶇骇鏂规
- const textArea = document.createElement('textarea')
- textArea.value = form.content
- document.body.appendChild(textArea)
- textArea.select()
- document.execCommand('copy')
- document.body.removeChild(textArea)
- ElMessage.success('鍐呭宸插鍒跺埌鍓创鏉�')
- }
-}
-
-// 鎵撳嵃鐮�
-const printCode = () => {
- if (!generatedCodeUrl.value) {
- ElMessage.warning('璇峰厛鐢熸垚鐮�')
- return
- }
-
- const printWindow = window.open('', '_blank')
- printWindow.document.write(`
- <html>
- <head>
- <title>鎵撳嵃${form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'}</title>
- <style>
- body { text-align: center; padding: 20px; }
- img { max-width: 100%; height: auto; }
- .info { margin: 20px 0; }
- </style>
- </head>
- <body>
- <h2>${form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'}</h2>
- <img src="${generatedCodeUrl.value}" alt="${form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'}" />
- <div class="info">
- <p><strong>鍐呭锛�</strong>${form.content}</p>
- <p><strong>鐢熸垚鏃堕棿锛�</strong>${generateTime.value}</p>
- </div>
- </body>
- </html>
- `)
- printWindow.document.close()
- printWindow.print()
-}
-
-// 閲嶇疆琛ㄥ崟
-const resetForm = () => {
- formRef.value.resetFields()
- generatedCodeUrl.value = ''
- generateTime.value = ''
- batchCodes.value = []
-}
-
-// 鎵归噺鐢熸垚
-const generateBatchCodes = async () => {
- if (!batchForm.prefix.trim()) {
- ElMessage.warning('璇疯緭鍏ュ墠缂�')
- return
- }
-
- batchCodes.value = []
- generating.value = true
-
- try {
- for (let i = 0; i < batchForm.quantity; i++) {
- const number = batchForm.startNumber + i
- const content = `${batchForm.prefix}${number.toString().padStart(6, '0')}`
-
- let codeUrl
- if (form.type === 'qrcode') {
- codeUrl = await QRCode.toDataURL(content, {
+ if (form.type === "qrcode") {
+ // 鐢熸垚浜岀淮鐮�
+ generatedCodeUrl.value = await QRCode.toDataURL(form.content, {
width: form.size,
margin: form.margin,
color: {
dark: form.foregroundColor,
- light: form.backgroundColor
- }
- })
+ light: form.backgroundColor,
+ },
+ errorCorrectionLevel: "M",
+ });
} else {
- const securityContent = generateSecurityCode(content)
- codeUrl = await QRCode.toDataURL(securityContent, {
+ // 鐢熸垚闃蹭吉鐮侊紙浣跨敤浜岀淮鐮佹妧鏈紝浣嗗唴瀹规牸寮忎笉鍚岋級
+ const securityContent = generateSecurityCode(form.content);
+ generatedCodeUrl.value = await QRCode.toDataURL(securityContent, {
width: form.size,
margin: form.margin,
color: {
dark: form.foregroundColor,
- light: form.backgroundColor
- }
- })
+ light: form.backgroundColor,
+ },
+ errorCorrectionLevel: "H", // 闃蹭吉鐮佷娇鐢ㄦ渶楂樼籂閿欑骇鍒�
+ });
}
-
- batchCodes.value.push({
- content,
- url: codeUrl
- })
+
+ generateTime.value = new Date().toLocaleString();
+ ElMessage.success("鐢熸垚鎴愬姛锛�");
+ } catch (error) {
+ console.error("鐢熸垚澶辫触:", error);
+ ElMessage.error("鐢熸垚澶辫触锛�" + error.message);
+ } finally {
+ generating.value = false;
}
-
- ElMessage.success(`鎵归噺鐢熸垚瀹屾垚锛屽叡鐢熸垚 ${batchForm.quantity} 涓爜`)
- batchDialogVisible.value = false
-
- } catch (error) {
- console.error('鎵归噺鐢熸垚澶辫触:', error)
- ElMessage.error('鎵归噺鐢熸垚澶辫触锛�' + error.message)
- } finally {
- generating.value = false
- }
-}
+ };
-// 涓嬭浇鍗曚釜鎵归噺鐢熸垚鐨勭爜
-const downloadSingleCode = (code) => {
- const a = document.createElement('a')
- a.href = code.url
- a.download = `${code.content}.png`
- document.body.appendChild(a)
- a.click()
- document.body.removeChild(a)
-}
+ // 鐢熸垚闃蹭吉鐮佸唴瀹�
+ const generateSecurityCode = content => {
+ const timestamp = Date.now();
+ const random = Math.random().toString(36).substr(2, 8);
+ return `SEC_${content}_${timestamp}_${random}`;
+ };
-// 涓嬭浇鎵�鏈夋壒閲忕敓鎴愮殑鐮�
-const downloadAllCodes = async () => {
- if (batchCodes.value.length === 0) {
- ElMessage.warning('娌℃湁鍙笅杞界殑鐮�')
- return
- }
-
- try {
- // 浣跨敤JSZip鎵撳寘涓嬭浇
- const JSZip = await import('jszip')
- const zip = new JSZip.default()
-
- batchCodes.value.forEach((code, index) => {
- // 灏哹ase64杞崲涓篵lob
- const base64Data = code.url.split(',')[1]
- const byteCharacters = atob(base64Data)
- const byteNumbers = new Array(byteCharacters.length)
- for (let i = 0; i < byteCharacters.length; i++) {
- byteNumbers[i] = byteCharacters.charCodeAt(i)
+ // 涓嬭浇鐢熸垚鐨勭爜
+ const downloadCode = () => {
+ if (!generatedCodeUrl.value) {
+ ElMessage.warning("璇峰厛鐢熸垚鐮�");
+ return;
+ }
+
+ const a = document.createElement("a");
+ a.href = generatedCodeUrl.value;
+ a.download = `${
+ form.type === "qrcode" ? "浜岀淮鐮�" : "闃蹭吉鐮�"
+ }_${new Date().getTime()}.png`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ ElMessage.success("涓嬭浇鎴愬姛锛�");
+ };
+
+ // 澶嶅埗鍐呭鍒板壀璐存澘
+ const copyToClipboard = async () => {
+ try {
+ await navigator.clipboard.writeText(form.content);
+ ElMessage.success("鍐呭宸插鍒跺埌鍓创鏉�");
+ } catch (error) {
+ // 闄嶇骇鏂规
+ const textArea = document.createElement("textarea");
+ textArea.value = form.content;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand("copy");
+ document.body.removeChild(textArea);
+ ElMessage.success("鍐呭宸插鍒跺埌鍓创鏉�");
+ }
+ };
+
+ // 鎵撳嵃鐮�
+ const printCode = () => {
+ if (!generatedCodeUrl.value) {
+ ElMessage.warning("璇峰厛鐢熸垚鐮�");
+ return;
+ }
+
+ const printWindow = window.open("", "_blank");
+ printWindow.document.write(`
+ <html>
+ <head>
+ <title>鎵撳嵃${form.type === "qrcode" ? "浜岀淮鐮�" : "闃蹭吉鐮�"}</title>
+ <style>
+ body { text-align: center; padding: 20px; }
+ img { max-width: 100%; height: auto; }
+ .info { margin: 20px 0; }
+ </style>
+ </head>
+ <body>
+ <h2>${form.type === "qrcode" ? "浜岀淮鐮�" : "闃蹭吉鐮�"}</h2>
+ <img src="${generatedCodeUrl.value}" alt="${
+ form.type === "qrcode" ? "浜岀淮鐮�" : "闃蹭吉鐮�"
+ }" />
+ <div class="info">
+ <p><strong>鍐呭锛�</strong>${form.content}</p>
+ <p><strong>鐢熸垚鏃堕棿锛�</strong>${generateTime.value}</p>
+ </div>
+ </body>
+ </html>
+ `);
+ printWindow.document.close();
+ printWindow.print();
+ };
+
+ // 閲嶇疆琛ㄥ崟
+ const resetForm = () => {
+ formRef.value.resetFields();
+ generatedCodeUrl.value = "";
+ generateTime.value = "";
+ batchCodes.value = [];
+ };
+
+ // 鎵归噺鐢熸垚
+ const generateBatchCodes = async () => {
+ if (!batchForm.prefix.trim()) {
+ ElMessage.warning("璇疯緭鍏ュ墠缂�");
+ return;
+ }
+
+ batchCodes.value = [];
+ generating.value = true;
+
+ try {
+ for (let i = 0; i < batchForm.quantity; i++) {
+ const number = batchForm.startNumber + i;
+ const content = `${batchForm.prefix}${number
+ .toString()
+ .padStart(6, "0")}`;
+
+ let codeUrl;
+ if (form.type === "qrcode") {
+ codeUrl = await QRCode.toDataURL(content, {
+ width: form.size,
+ margin: form.margin,
+ color: {
+ dark: form.foregroundColor,
+ light: form.backgroundColor,
+ },
+ });
+ } else {
+ const securityContent = generateSecurityCode(content);
+ codeUrl = await QRCode.toDataURL(securityContent, {
+ width: form.size,
+ margin: form.margin,
+ color: {
+ dark: form.foregroundColor,
+ light: form.backgroundColor,
+ },
+ });
+ }
+
+ batchCodes.value.push({
+ content,
+ url: codeUrl,
+ });
}
- const byteArray = new Uint8Array(byteNumbers)
-
- zip.file(`${code.content}.png`, byteArray)
- })
-
- const content = await zip.generateAsync({ type: 'blob' })
- const a = document.createElement('a')
- a.href = URL.createObjectURL(content)
- a.download = `鎵归噺${form.type === 'qrcode' ? '浜岀淮鐮�' : '闃蹭吉鐮�'}_${new Date().getTime()}.zip`
- document.body.appendChild(a)
- a.click()
- document.body.removeChild(a)
- URL.revokeObjectURL(a.href)
-
- ElMessage.success('鎵归噺涓嬭浇瀹屾垚锛�')
- } catch (error) {
- console.error('鎵归噺涓嬭浇澶辫触:', error)
- ElMessage.error('鎵归噺涓嬭浇澶辫触锛岃閫愪釜涓嬭浇')
- }
-}
-// 娓呯┖鎵归噺鐢熸垚缁撴灉
-const clearBatchCodes = () => {
- batchCodes.value = []
-}
+ ElMessage.success(`鎵归噺鐢熸垚瀹屾垚锛屽叡鐢熸垚 ${batchForm.quantity} 涓爜`);
+ batchDialogVisible.value = false;
+ } catch (error) {
+ console.error("鎵归噺鐢熸垚澶辫触:", error);
+ ElMessage.error("鎵归噺鐢熸垚澶辫触锛�" + error.message);
+ } finally {
+ generating.value = false;
+ }
+ };
-// 鏆撮湶鏂规硶缁欑埗缁勪欢
-defineExpose({
- generateCode,
- downloadCode,
- resetForm,
- form
-})
+ // 涓嬭浇鍗曚釜鎵归噺鐢熸垚鐨勭爜
+ const downloadSingleCode = code => {
+ const a = document.createElement("a");
+ a.href = code.url;
+ a.download = `${code.content}.png`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ };
+
+ // 涓嬭浇鎵�鏈夋壒閲忕敓鎴愮殑鐮�
+ const downloadAllCodes = async () => {
+ if (batchCodes.value.length === 0) {
+ ElMessage.warning("娌℃湁鍙笅杞界殑鐮�");
+ return;
+ }
+
+ try {
+ // 浣跨敤JSZip鎵撳寘涓嬭浇
+ const JSZip = await import("jszip");
+ const zip = new JSZip.default();
+
+ batchCodes.value.forEach((code, index) => {
+ // 灏哹ase64杞崲涓篵lob
+ const base64Data = code.url.split(",")[1];
+ const byteCharacters = atob(base64Data);
+ const byteNumbers = new Array(byteCharacters.length);
+ for (let i = 0; i < byteCharacters.length; i++) {
+ byteNumbers[i] = byteCharacters.charCodeAt(i);
+ }
+ const byteArray = new Uint8Array(byteNumbers);
+
+ zip.file(`${code.content}.png`, byteArray);
+ });
+
+ const content = await zip.generateAsync({ type: "blob" });
+ const a = document.createElement("a");
+ a.href = URL.createObjectURL(content);
+ a.download = `鎵归噺${
+ form.type === "qrcode" ? "浜岀淮鐮�" : "闃蹭吉鐮�"
+ }_${new Date().getTime()}.zip`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(a.href);
+
+ ElMessage.success("鎵归噺涓嬭浇瀹屾垚锛�");
+ } catch (error) {
+ console.error("鎵归噺涓嬭浇澶辫触:", error);
+ ElMessage.error("鎵归噺涓嬭浇澶辫触锛岃閫愪釜涓嬭浇");
+ }
+ };
+
+ // 娓呯┖鎵归噺鐢熸垚缁撴灉
+ const clearBatchCodes = () => {
+ batchCodes.value = [];
+ };
+
+ // 鏆撮湶鏂规硶缁欑埗缁勪欢
+ defineExpose({
+ generateCode,
+ downloadCode,
+ resetForm,
+ form,
+ });
</script>
<style scoped>
-.qr-code-generator {
- padding: 20px;
-}
+ .qr-code-generator {
+ padding: 20px;
+ }
-.qr-form {
- background: #f8f9fa;
- padding: 20px;
- border-radius: 8px;
- margin-bottom: 20px;
-}
+ .qr-form {
+ background: #f8f9fa;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ }
-.code-display {
- margin-top: 30px;
-}
+ .code-display {
+ margin-top: 30px;
+ }
-.code-container {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 40px;
- margin: 20px 0;
-}
-
-.code-image img {
- border: 2px solid #e0e0e0;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.code-info {
- text-align: left;
- min-width: 200px;
-}
-
-.code-info p {
- margin: 8px 0;
- color: #666;
-}
-
-.code-actions {
- text-align: center;
- margin: 20px 0;
-}
-
-.code-actions .el-button {
- margin: 0 10px;
-}
-
-.batch-results {
- margin-top: 30px;
-}
-
-.batch-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- gap: 20px;
- margin: 20px 0;
-}
-
-.batch-item {
- text-align: center;
- padding: 15px;
- border: 1px solid #e0e0e0;
- border-radius: 8px;
- background: #fff;
-}
-
-.batch-item img {
- width: 100px;
- height: 100px;
- margin-bottom: 10px;
-}
-
-.batch-content {
- font-size: 12px;
- color: #666;
- margin: 10px 0;
- word-break: break-all;
-}
-
-.batch-actions {
- text-align: center;
- margin: 20px 0;
-}
-
-.batch-actions .el-button {
- margin: 0 10px;
-}
-
-@media (max-width: 768px) {
.code-container {
- flex-direction: column;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 40px;
+ margin: 20px 0;
}
-
+
+ .code-image img {
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
+
+ .code-info {
+ text-align: left;
+ min-width: 200px;
+ }
+
+ .code-info p {
+ margin: 8px 0;
+ color: #666;
+ }
+
+ .code-actions {
+ text-align: center;
+ margin: 20px 0;
+ }
+
+ .code-actions .el-button {
+ margin: 0 10px;
+ }
+
+ .batch-results {
+ margin-top: 30px;
+ }
+
.batch-grid {
- grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 20px;
+ margin: 20px 0;
}
-}
+
+ .batch-item {
+ text-align: center;
+ padding: 15px;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ background: #fff;
+ }
+
+ .batch-item img {
+ width: 100px;
+ height: 100px;
+ margin-bottom: 10px;
+ }
+
+ .batch-content {
+ font-size: 12px;
+ color: #666;
+ margin: 10px 0;
+ word-break: break-all;
+ }
+
+ .batch-actions {
+ text-align: center;
+ margin: 20px 0;
+ }
+
+ .batch-actions .el-button {
+ margin: 0 10px;
+ }
+
+ @media (max-width: 768px) {
+ .code-container {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .batch-grid {
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ }
+ }
</style>
diff --git a/src/main.js b/src/main.js
index abaac2e..0b3f714 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,6 +52,8 @@
import DictTag from "@/components/DictTag";
// 琛ㄦ牸缁勪欢
import PIMTable from "@/components/PIMTable/PIMTable.vue";
+// 椤甸潰澶撮儴缁勪欢
+import PageHeader from "@/components/PageHeader/index.vue";
import { getToken } from "@/utils/auth";
import {
@@ -93,6 +95,7 @@
app.component("RightToolbar", RightToolbar);
app.component("Editor", Editor);
app.component("PIMTable", PIMTable);
+app.component("PageHeader", PageHeader);
app.use(router);
app.use(store);
diff --git a/src/views/collaborativeApproval/noticeManagement/index.vue b/src/views/collaborativeApproval/noticeManagement/index.vue
index 6b0ea98..d92adea 100644
--- a/src/views/collaborativeApproval/noticeManagement/index.vue
+++ b/src/views/collaborativeApproval/noticeManagement/index.vue
@@ -855,6 +855,9 @@
color: #606266;
line-height: 1.6;
font-size: 14px;
+ word-break: break-all;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
}
.card-footer {
diff --git a/src/views/productionManagement/processRoute/Edit.vue b/src/views/productionManagement/processRoute/Edit.vue
index 2ede998..0c0fe0f 100644
--- a/src/views/productionManagement/processRoute/Edit.vue
+++ b/src/views/productionManagement/processRoute/Edit.vue
@@ -8,46 +8,45 @@
>
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
<el-form-item
- label="浜у搧澶х被锛�"
- prop="productId"
- :rules="[
- {
- required: true,
- message: '璇烽�夋嫨浜у搧澶х被',
- }
- ]"
- >
- <el-tree-select
- v-model="formState.productId"
- placeholder="璇烽�夋嫨"
- clearable
- check-strictly
- @change="getModels"
- :data="productOptions"
- :render-after-expand="false"
- style="width: 100%"
- />
- </el-form-item>
-
- <el-form-item
- label="瑙勬牸鍨嬪彿锛�"
+ label="浜у搧鍚嶇О"
prop="productModelId"
:rules="[
{
required: true,
- message: '璇烽�夋嫨瑙勬牸鍨嬪彿',
+ message: '璇烽�夋嫨浜у搧',
+ trigger: 'change',
+ }
+ ]"
+ >
+ <el-button type="primary" @click="showProductSelectDialog = true">
+ {{ formState.productName && formState.productModelName
+ ? `${formState.productName} - ${formState.productModelName}`
+ : '閫夋嫨浜у搧' }}
+ </el-button>
+ </el-form-item>
+
+ <el-form-item
+ label="BOM"
+ prop="bomId"
+ :rules="[
+ {
+ required: true,
+ message: '璇烽�夋嫨BOM',
+ trigger: 'change',
}
]"
>
<el-select
- v-model="formState.productModelId"
- placeholder="璇烽�夋嫨"
+ v-model="formState.bomId"
+ placeholder="璇烽�夋嫨BOM"
clearable
+ :disabled="!formState.productModelId || bomOptions.length === 0"
+ style="width: 100%"
>
<el-option
- v-for="item in productModelsOptions"
+ v-for="item in bomOptions"
:key="item.id"
- :label="item.model"
+ :label="item.bomNo || `BOM-${item.id}`"
:value="item.id"
/>
</el-select>
@@ -57,6 +56,13 @@
<el-input v-model="formState.description" type="textarea" />
</el-form-item>
</el-form>
+
+ <!-- 浜у搧閫夋嫨寮圭獥 -->
+ <ProductSelectDialog
+ v-model="showProductSelectDialog"
+ @confirm="handleProductSelect"
+ single
+ />
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">纭</el-button>
@@ -68,9 +74,10 @@
</template>
<script setup>
-import {ref, computed, getCurrentInstance, onMounted} from "vue";
+import {ref, computed, getCurrentInstance, onMounted, nextTick, watch} from "vue";
import {update} from "@/api/productionManagement/processRoute.js";
-import {modelList, productTreeList} from "@/api/basicData/product.js";
+import {getByModel} from "@/api/productionManagement/productBom.js";
+import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
const props = defineProps({
visible: {
@@ -87,7 +94,14 @@
const emit = defineEmits(['update:visible', 'completed']);
// 鍝嶅簲寮忔暟鎹紙鏇夸唬閫夐」寮忕殑 data锛�
-const formState = ref({});
+const formState = ref({
+ productId: undefined,
+ productModelId: undefined,
+ productName: "",
+ productModelName: "",
+ bomId: undefined,
+ description: '',
+});
const isShow = computed({
get() {
@@ -98,66 +112,111 @@
},
});
+const showProductSelectDialog = ref(false);
+const bomOptions = ref([]);
+
let { proxy } = getCurrentInstance()
-const productModelsOptions = ref([])
-const productOptions = ref([])
const closeModal = () => {
isShow.value = false;
};
+// 璁剧疆琛ㄥ崟鏁版嵁
const setFormData = () => {
- formState.value = props.record
-}
-
-const getProductOptions = () => {
- productTreeList().then((res) => {
- productOptions.value = convertIdToValue(res);
- });
-};
-const getModels = (value) => {
- formState.value.productModelId = undefined;
- productModelsOptions.value = [];
- if (value) {
- modelList({ id: value }).then((res) => {
- productModelsOptions.value = res;
- });
- }
-};
-
-const findNodeById = (nodes, productId) => {
- for (let i = 0; i < nodes.length; i++) {
- if (nodes[i].value === productId) {
- return nodes[i].label; // 鎵惧埌鑺傜偣锛岃繑鍥炶鑺傜偣鐨刲abel
- }
- if (nodes[i].children && nodes[i].children.length > 0) {
- const foundNode = findNodeById(nodes[i].children, productId);
- if (foundNode) {
- return foundNode; // 鍦ㄥ瓙鑺傜偣涓壘鍒帮紝鐩存帴杩斿洖锛堝凡缁忔槸label瀛楃涓诧級
- }
- }
- }
- return null; // 娌℃湁鎵惧埌鑺傜偣锛岃繑鍥瀗ull
-};
-
-function convertIdToValue(data) {
- return data.map((item) => {
- const { id, children, ...rest } = item;
- const newItem = {
- ...rest,
- value: id, // 灏� id 鏀逛负 value
+ if (props.record) {
+ formState.value = {
+ ...props.record,
+ productId: props.record.productId,
+ productModelId: props.record.productModelId,
+ productName: props.record.productName || "",
+ // 娉ㄦ剰锛歳ecord涓殑瀛楁鏄痬odel锛岄渶瑕佹槧灏勫埌productModelName
+ productModelName: props.record.model || props.record.productModelName || "",
+ bomId: props.record.bomId,
+ description: props.record.description || '',
};
- if (children && children.length > 0) {
- newItem.children = convertIdToValue(children);
+ // 濡傛灉鏈変骇鍝佸瀷鍙稩D锛屽姞杞紹OM鍒楄〃
+ if (props.record.productModelId) {
+ loadBomList(props.record.productModelId);
}
-
- return newItem;
- });
+ }
}
+
+// 鍔犺浇BOM鍒楄〃
+const loadBomList = async (productModelId) => {
+ if (!productModelId) {
+ bomOptions.value = [];
+ return;
+ }
+ try {
+ const res = await getByModel(productModelId);
+ // 澶勭悊杩斿洖鐨凚OM鏁版嵁锛氬彲鑳芥槸鏁扮粍銆佸璞℃垨鍖呭惈data瀛楁
+ let bomList = [];
+ if (Array.isArray(res)) {
+ bomList = res;
+ } else if (res && res.data) {
+ bomList = Array.isArray(res.data) ? res.data : [res.data];
+ } else if (res && typeof res === 'object') {
+ bomList = [res];
+ }
+ bomOptions.value = bomList;
+ } catch (error) {
+ console.error("鍔犺浇BOM鍒楄〃澶辫触锛�", error);
+ bomOptions.value = [];
+ }
+};
+
+// 浜у搧閫夋嫨澶勭悊
+const handleProductSelect = async (products) => {
+ if (products && products.length > 0) {
+ const product = products[0];
+ // 鍏堟煡璇OM鍒楄〃锛堝繀閫夛級
+ try {
+ const res = await getByModel(product.id);
+ // 澶勭悊杩斿洖鐨凚OM鏁版嵁锛氬彲鑳芥槸鏁扮粍銆佸璞℃垨鍖呭惈data瀛楁
+ let bomList = [];
+ if (Array.isArray(res)) {
+ bomList = res;
+ } else if (res && res.data) {
+ bomList = Array.isArray(res.data) ? res.data : [res.data];
+ } else if (res && typeof res === 'object') {
+ bomList = [res];
+ }
+
+ if (bomList.length > 0) {
+ formState.value.productModelId = product.id;
+ formState.value.productName = product.productName;
+ formState.value.productModelName = product.model;
+ // 濡傛灉褰撳墠閫夋嫨鐨凚OM涓嶅湪鏂板垪琛ㄤ腑锛屽垯閲嶇疆BOM閫夋嫨
+ const currentBomExists = bomList.some(bom => bom.id === formState.value.bomId);
+ if (!currentBomExists) {
+ formState.value.bomId = undefined;
+ }
+ bomOptions.value = bomList;
+ showProductSelectDialog.value = false;
+ // 瑙﹀彂琛ㄥ崟楠岃瘉鏇存柊
+ proxy.$refs["formRef"]?.validateField('productModelId');
+ } else {
+ proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
+ }
+ } catch (error) {
+ // 濡傛灉鎺ュ彛杩斿洖404鎴栧叾浠栭敊璇紝璇存槑娌℃湁BOM
+ proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
+ }
+ }
+};
const handleSubmit = () => {
proxy.$refs["formRef"].validate(valid => {
if (valid) {
+ // 楠岃瘉鏄惁閫夋嫨浜嗕骇鍝佸拰BOM
+ if (!formState.value.productModelId) {
+ proxy.$modal.msgError("璇烽�夋嫨浜у搧");
+ return;
+ }
+ if (!formState.value.bomId) {
+ proxy.$modal.msgError("璇烽�夋嫨BOM");
+ return;
+ }
update(formState.value).then(res => {
// 鍏抽棴妯℃�佹
isShow.value = false;
@@ -176,11 +235,18 @@
});
+// 鐩戝惉寮圭獥鎵撳紑锛屽垵濮嬪寲琛ㄥ崟鏁版嵁
+watch(() => props.visible, (visible) => {
+ if (visible && props.record) {
+ nextTick(() => {
+ setFormData();
+ });
+ }
+}, { immediate: true });
+
onMounted(() => {
- getProductOptions()
- getModels(props.record.productId)
- nextTick(() => {
- setFormData()
- });
-})
+ if (props.visible && props.record) {
+ setFormData();
+ }
+});
</script>
diff --git a/src/views/productionManagement/processRoute/New.vue b/src/views/productionManagement/processRoute/New.vue
index 856a2a4..62c6873 100644
--- a/src/views/productionManagement/processRoute/New.vue
+++ b/src/views/productionManagement/processRoute/New.vue
@@ -8,46 +8,45 @@
>
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
<el-form-item
- label="浜у搧澶х被锛�"
- prop="productId"
- :rules="[
- {
- required: true,
- message: '璇烽�夋嫨浜у搧澶х被',
- }
- ]"
- >
- <el-tree-select
- v-model="formState.productId"
- placeholder="璇烽�夋嫨"
- clearable
- check-strictly
- @change="getModels"
- :data="productOptions"
- :render-after-expand="false"
- style="width: 100%"
- />
- </el-form-item>
-
- <el-form-item
- label="瑙勬牸鍨嬪彿锛�"
+ label="浜у搧鍚嶇О"
prop="productModelId"
:rules="[
{
required: true,
- message: '璇烽�夋嫨瑙勬牸鍨嬪彿',
+ message: '璇烽�夋嫨浜у搧',
+ trigger: 'change',
+ }
+ ]"
+ >
+ <el-button type="primary" @click="showProductSelectDialog = true">
+ {{ formState.productName && formState.productModelName
+ ? `${formState.productName} - ${formState.productModelName}`
+ : '閫夋嫨浜у搧' }}
+ </el-button>
+ </el-form-item>
+
+ <el-form-item
+ label="BOM"
+ prop="bomId"
+ :rules="[
+ {
+ required: true,
+ message: '璇烽�夋嫨BOM',
+ trigger: 'change',
}
]"
>
<el-select
- v-model="formState.productModelId"
- placeholder="璇烽�夋嫨"
+ v-model="formState.bomId"
+ placeholder="璇烽�夋嫨BOM"
clearable
+ :disabled="!formState.productModelId || bomOptions.length === 0"
+ style="width: 100%"
>
<el-option
- v-for="item in productModelsOptions"
+ v-for="item in bomOptions"
:key="item.id"
- :label="item.model"
+ :label="item.bomNo || `BOM-${item.id}`"
:value="item.id"
/>
</el-select>
@@ -57,6 +56,13 @@
<el-input v-model="formState.description" type="textarea" />
</el-form-item>
</el-form>
+
+ <!-- 浜у搧閫夋嫨寮圭獥 -->
+ <ProductSelectDialog
+ v-model="showProductSelectDialog"
+ @confirm="handleProductSelect"
+ single
+ />
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit">纭</el-button>
@@ -68,9 +74,10 @@
</template>
<script setup>
-import {ref, computed, getCurrentInstance, onMounted} from "vue";
+import {ref, computed, getCurrentInstance} from "vue";
import {add} from "@/api/productionManagement/processRoute.js";
-import {modelList, productTreeList} from "@/api/basicData/product.js";
+import {getByModel} from "@/api/productionManagement/productBom.js";
+import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
const props = defineProps({
visible: {
@@ -85,6 +92,9 @@
const formState = ref({
productId: undefined,
productModelId: undefined,
+ productName: "",
+ productModelName: "",
+ bomId: undefined,
description: '',
});
@@ -97,66 +107,73 @@
},
});
-const productModelsOptions = ref([])
-const productOptions = ref([])
+const showProductSelectDialog = ref(false);
+const bomOptions = ref([]);
let { proxy } = getCurrentInstance()
const closeModal = () => {
+ // 閲嶇疆琛ㄥ崟鏁版嵁
+ formState.value = {
+ productId: undefined,
+ productModelId: undefined,
+ productName: "",
+ productModelName: "",
+ bomId: undefined,
+ description: '',
+ };
+ bomOptions.value = [];
isShow.value = false;
};
-const getProductOptions = () => {
- productTreeList().then((res) => {
- productOptions.value = convertIdToValue(res);
- });
-};
-const getModels = (value) => {
- formState.value.productId = undefined;
- formState.value.productModelId = undefined;
- productModelsOptions.value = [];
-
- if (value) {
- formState.value.productId = findNodeById(productOptions.value, value) || undefined;
- modelList({ id: value }).then((res) => {
- productModelsOptions.value = res;
- });
- }
-};
-
-const findNodeById = (nodes, productId) => {
- for (let i = 0; i < nodes.length; i++) {
- if (nodes[i].value === productId) {
- return nodes[i].label; // 鎵惧埌鑺傜偣锛岃繑鍥炶鑺傜偣鐨刲abel
- }
- if (nodes[i].children && nodes[i].children.length > 0) {
- const foundNode = findNodeById(nodes[i].children, productId);
- if (foundNode) {
- return foundNode; // 鍦ㄥ瓙鑺傜偣涓壘鍒帮紝鐩存帴杩斿洖锛堝凡缁忔槸label瀛楃涓诧級
+// 浜у搧閫夋嫨澶勭悊
+const handleProductSelect = async (products) => {
+ if (products && products.length > 0) {
+ const product = products[0];
+ // 鍏堟煡璇OM鍒楄〃锛堝繀閫夛級
+ try {
+ const res = await getByModel(product.id);
+ // 澶勭悊杩斿洖鐨凚OM鏁版嵁锛氬彲鑳芥槸鏁扮粍銆佸璞℃垨鍖呭惈data瀛楁
+ let bomList = [];
+ if (Array.isArray(res)) {
+ bomList = res;
+ } else if (res && res.data) {
+ bomList = Array.isArray(res.data) ? res.data : [res.data];
+ } else if (res && typeof res === 'object') {
+ bomList = [res];
}
+
+ if (bomList.length > 0) {
+ formState.value.productModelId = product.id;
+ formState.value.productName = product.productName;
+ formState.value.productModelName = product.model;
+ formState.value.bomId = undefined; // 閲嶇疆BOM閫夋嫨
+ bomOptions.value = bomList;
+ showProductSelectDialog.value = false;
+ // 瑙﹀彂琛ㄥ崟楠岃瘉鏇存柊
+ proxy.$refs["formRef"]?.validateField('productModelId');
+ } else {
+ proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
+ }
+ } catch (error) {
+ // 濡傛灉鎺ュ彛杩斿洖404鎴栧叾浠栭敊璇紝璇存槑娌℃湁BOM
+ proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
}
}
- return null; // 娌℃湁鎵惧埌鑺傜偣锛岃繑鍥瀗ull
};
-
-function convertIdToValue(data) {
- return data.map((item) => {
- const { id, children, ...rest } = item;
- const newItem = {
- ...rest,
- value: id, // 灏� id 鏀逛负 value
- };
- if (children && children.length > 0) {
- newItem.children = convertIdToValue(children);
- }
-
- return newItem;
- });
-}
const handleSubmit = () => {
proxy.$refs["formRef"].validate(valid => {
if (valid) {
+ // 楠岃瘉鏄惁閫夋嫨浜嗕骇鍝佸拰BOM
+ if (!formState.value.productModelId) {
+ proxy.$modal.msgError("璇烽�夋嫨浜у搧");
+ return;
+ }
+ if (!formState.value.bomId) {
+ proxy.$modal.msgError("璇烽�夋嫨BOM");
+ return;
+ }
add(formState.value).then(res => {
// 鍏抽棴妯℃�佹
isShow.value = false;
@@ -174,8 +191,4 @@
handleSubmit,
isShow,
});
-
-onMounted(() => {
- getProductOptions()
-})
</script>
diff --git a/src/views/productionManagement/processRoute/index.vue b/src/views/productionManagement/processRoute/index.vue
index 7d5ab5d..41103f9 100644
--- a/src/views/productionManagement/processRoute/index.vue
+++ b/src/views/productionManagement/processRoute/index.vue
@@ -80,6 +80,10 @@
prop: "model",
},
{
+ label: "BOM缂栧彿",
+ prop: "bomNo",
+ },
+ {
label: "鎻忚堪",
prop: "description",
},
@@ -166,7 +170,13 @@
router.push({
path: '/productionManagement/processRouteItem',
query: {
- id: row.id
+ id: row.id,
+ processRouteCode: row.processRouteCode || '',
+ productName: row.productName || '',
+ model: row.model || '',
+ bomNo: row.bomNo || '',
+ description: row.description || '',
+ type: 'route',
}
})
};
diff --git a/src/views/productionManagement/processRoute/processRouteItem/index.vue b/src/views/productionManagement/processRoute/processRouteItem/index.vue
index 641ffff..18e21e8 100644
--- a/src/views/productionManagement/processRoute/processRouteItem/index.vue
+++ b/src/views/productionManagement/processRoute/processRouteItem/index.vue
@@ -1,133 +1,207 @@
<template>
<div class="app-container">
- <div class="operate-button">
- <div style="margin-bottom: 15px;">
- <el-button
- type="primary"
- @click="isShowProductSelectDialog = true"
- >
- 閫夋嫨浜у搧
- </el-button>
- <el-button type="primary" @click="handleSubmit">纭</el-button>
+ <PageHeader content="宸ヨ壓璺嚎椤圭洰" />
+
+ <!-- 宸ヨ壓璺嚎淇℃伅灞曠ず -->
+ <el-card v-if="routeInfo.processRouteCode" class="route-info-card" shadow="hover">
+ <div class="route-info">
+ <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.processRouteCode }}</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.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>
+ </div>
+ </div>
+ <div class="info-item">
+ <div class="info-label-wrapper">
+ <span class="info-label">BOM缂栧彿</span>
+ </div>
+ <div class="info-value-wrapper">
+ <span class="info-value">{{ routeInfo.bomNo || '-' }}</span>
+ </div>
+ </div>
+ <div class="info-item full-width" v-if="routeInfo.description">
+ <div class="info-label-wrapper">
+ <span class="info-label">鎻忚堪</span>
+ </div>
+ <div class="info-value-wrapper">
+ <span class="info-value">{{ routeInfo.description }}</span>
+ </div>
+ </div>
</div>
-
- <el-switch
- v-model="isTable"
- inline-prompt
- active-text="琛ㄦ牸"
- inactive-text="鍒楄〃"
- @change="handleViewChange"
- />
+ </el-card>
+
+ <!-- 琛ㄦ牸瑙嗗浘 -->
+ <div v-if="viewMode === 'table'" class="section-header">
+ <div class="section-title">宸ヨ壓璺嚎椤圭洰鍒楄〃</div>
+ <div class="section-actions">
+ <el-button
+ icon="Grid"
+ @click="toggleView"
+ style="margin-right: 10px;"
+ >
+ 鍗＄墖瑙嗗浘
+ </el-button>
+ <el-button type="primary" @click="handleAdd">鏂板</el-button>
+ </div>
</div>
<el-table
- v-if="isTable"
- ref="multipleTable"
+ v-if="viewMode === 'table'"
+ ref="tableRef"
v-loading="tableLoading"
border
- :data="routeItems"
+ :data="tableData"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
row-key="id"
tooltip-effect="dark"
class="lims-table"
- style="cursor: move;"
>
- <el-table-column align="center" label="搴忓彿" width="60">
+ <el-table-column align="center" label="搴忓彿" width="60" type="index" />
+ <el-table-column label="宸ュ簭鍚嶇О" prop="processId" width="200">
<template #default="scope">
- {{ scope.$index + 1 }}
+ {{ getProcessName(scope.row.processId) || '-' }}
</template>
</el-table-column>
-
- <el-table-column
- v-for="(item, index) in tableColumn"
- :key="index"
- :label="item.label"
- :width="item.width"
- show-overflow-tooltip
- >
- <template #default="scope" v-if="item.dataType === 'action'">
- <el-button
- v-for="(op, opIndex) in item.operation"
- :key="opIndex"
- :type="op.type"
- :link="op.link"
- size="small"
- @click.stop="op.clickFun(scope.row)"
- >
- {{ op.name }}
- </el-button>
- </template>
-
- <template #default="scope" v-else>
- <template v-if="item.prop === 'processId'">
- <el-select
- v-model="scope.row[item.prop]"
- style="width: 100%;"
- @mousedown.stop
- >
- <el-option
- v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id"
- />
- </el-select>
- </template>
- <template v-else>
- {{ scope.row[item.prop] || '-' }}
- </template>
+ <el-table-column label="浜у搧鍚嶇О" prop="productName" min-width="160" />
+ <el-table-column label="瑙勬牸鍚嶇О" prop="model" min-width="140" />
+ <el-table-column label="鍗曚綅" prop="unit" width="100" />
+ <el-table-column label="鎿嶄綔" align="center" fixed="right" width="150">
+ <template #default="scope">
+ <el-button type="primary" link size="small" @click="handleEdit(scope.row)">缂栬緫</el-button>
+ <el-button type="danger" link size="small" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
-
- <!-- 浣跨敤鏅�歞iv鏇夸唬el-steps -->
- <div
- v-else
- ref="stepsContainer"
- class="mb5 custom-steps"
- >
- <div
- v-for="(item, index) in routeItems"
- :key="item.id"
- class="custom-step draggable-step"
- :data-id="item.id"
- style="cursor: move; flex: 0 0 auto; min-width: 220px;"
- >
- <div class="step-content">
- <div class="step-number">{{ index + 1 }}</div>
- <el-card
- :header="item.productName"
- class="step-card"
- style="cursor: move;"
+
+ <!-- 鍗＄墖瑙嗗浘 -->
+ <template v-else>
+ <div class="section-header">
+ <div class="section-title">宸ヨ壓璺嚎椤圭洰鍒楄〃</div>
+ <div class="section-actions">
+ <el-button
+ icon="Menu"
+ @click="toggleView"
+ style="margin-right: 10px;"
>
- <div class="step-card-content">
- <p>{{ item.model }}</p>
- <p>{{ item.unit }}</p>
- <el-select
- v-model="item.processId"
- style="width: 100%;"
- @mousedown.stop
- >
- <el-option
- v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id"
- />
- </el-select>
- </div>
- <template #footer>
- <div class="step-card-footer">
- <el-button type="danger" link size="small" @click.stop="removeItemByID(item.id)">鍒犻櫎</el-button>
- </div>
- </template>
- </el-card>
+ 琛ㄦ牸瑙嗗浘
+ </el-button>
+ <el-button type="primary" @click="handleAdd">鏂板</el-button>
</div>
</div>
- </div>
+ <div v-loading="tableLoading" class="card-container">
+ <div
+ ref="cardsContainer"
+ class="cards-wrapper"
+ >
+ <div
+ v-for="(item, index) in tableData"
+ :key="item.id || index"
+ class="process-card"
+ :data-index="index"
+ >
+ <!-- 搴忓彿鍦嗗湀 -->
+ <div class="card-header">
+ <div class="card-number">{{ index + 1 }}</div>
+ <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>
+ </div>
+ <div v-else class="product-info empty">鏆傛棤浜у搧淇℃伅</div>
+ </div>
+
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <div class="card-footer">
+ <el-button type="primary" link size="small" @click="handleEdit(item)">缂栬緫</el-button>
+ <el-button type="danger" link size="small" @click="handleDelete(item)">鍒犻櫎</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ <!-- 鏂板/缂栬緫寮圭獥 -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="operationType === 'add' ? '鏂板宸ヨ壓璺嚎椤圭洰' : '缂栬緫宸ヨ壓璺嚎椤圭洰'"
+ width="500px"
+ @close="closeDialog"
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="120px"
+ >
+ <el-form-item label="宸ュ簭" prop="processId">
+ <el-select
+ v-model="form.processId"
+ placeholder="璇烽�夋嫨宸ュ簭"
+ clearable
+ style="width: 100%"
+ >
+ <el-option
+ v-for="process in processOptions"
+ :key="process.id"
+ :label="process.name"
+ :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>
+
+ <template #footer>
+ <el-button @click="closeDialog">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleSubmit" :loading="submitLoading">纭畾</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 浜у搧閫夋嫨瀵硅瘽妗� -->
<ProductSelectDialog
- v-model="isShowProductSelectDialog"
- @confirm="handelSelectProducts"
+ v-model="showProductSelectDialog"
+ @confirm="handleProductSelect"
+ single
/>
</div>
</template>
@@ -135,178 +209,285 @@
<script setup>
import { ref, computed, getCurrentInstance, onMounted, onUnmounted, nextTick } from "vue";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
-import { findProcessRouteItemList, addOrUpdateProcessRouteItem } from "@/api/productionManagement/processRouteItem.js";
+import { findProcessRouteItemList, addOrUpdateProcessRouteItem, sortProcessRouteItem, batchDeleteProcessRouteItem } from "@/api/productionManagement/processRouteItem.js";
+import { findProductProcessRouteItemList, deleteRouteItem, addRouteItem, addOrUpdateProductProcessRouteItem, sortRouteItem } from "@/api/productionManagement/productProcessRoute.js";
import { processList } from "@/api/productionManagement/productionProcess.js";
-import Sortable from 'sortablejs';
-import { useRoute, useRouter } from 'vue-router'
-
-const processOptions = ref([]);
-const tableLoading = ref(false);
-const isShowProductSelectDialog = ref(false);
-const routeItems = ref([]);
-let tableSortable = null;
-let stepsSortable = null;
-const multipleTable = ref(null);
-const stepsContainer = ref(null);
-const isTable = ref(true);
+import { useRoute } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import Sortable from 'sortablejs'
const route = useRoute()
-const router = useRouter()
-const routeId = computed({
- get() {
- return route.query.id;
- },
+const { proxy } = getCurrentInstance() || {};
- set(val) {
- emit('update:router', val)
- }
+const routeId = computed(() => route.query.id);
+const orderId = computed(() => route.query.orderId);
+const pageType = computed(() => route.query.type);
+
+const tableLoading = ref(false);
+const tableData = ref([]);
+const dialogVisible = ref(false);
+const operationType = ref('add'); // add | edit
+const formRef = ref(null);
+const submitLoading = ref(false);
+const cardsContainer = ref(null);
+const tableRef = ref(null);
+const viewMode = ref('table'); // table | card
+const routeInfo = ref({
+ processRouteCode: '',
+ productName: '',
+ model: '',
+ bomNo: '',
+ description: ''
});
+const processOptions = ref([]);
+const showProductSelectDialog = ref(false);
+let tableSortable = null;
+let cardSortable = null;
-const tableColumn = ref([
- { label: "浜у搧鍚嶇О", prop: "productName"},
- { label: "瑙勬牸鍚嶇О", prop: "model" },
- { label: "鍗曚綅", prop: "unit" },
- { label: "宸ュ簭鍚嶇О", prop: "processId", width: 200 },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 100,
- operation: [
- {
- name: "鍒犻櫎",
- type: "danger",
- link: true,
- clickFun: (row) => {
- const idx = routeItems.value.findIndex(item => item.id === row.id);
- if (idx > -1) {
- removeItem(idx)
- }
- }
- }
- ]
- }
-]);
-
-const removeItem = (index) => {
- routeItems.value.splice(index, 1);
- nextTick(() => initSortable());
-};
-
-const removeItemByID = (id) => {
- const idx = routeItems.value.findIndex(item => item.id === id);
- if (idx > -1) {
- routeItems.value.splice(idx, 1);
- nextTick(() => initSortable());
- }
-};
-
-const handelSelectProducts = (products) => {
- destroySortable();
-
- const newData = products.map(({ id, ...product }) => ({
- ...product,
- productModelId: id,
- routeId: routeId.value,
- id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
- processId: undefined
- }));
-
- console.log('閫夋嫨浜у搧鍓嶆暟缁�:', routeItems.value);
- routeItems.value.push(...newData);
- routeItems.value = [...routeItems.value];
- console.log('閫夋嫨浜у搧鍚庢暟缁�:', routeItems.value);
-
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
+// 鍒囨崲瑙嗗浘
+const toggleView = () => {
+ viewMode.value = viewMode.value === 'table' ? 'card' : 'table';
+ // 鍒囨崲瑙嗗浘鍚庨噸鏂板垵濮嬪寲鎷栨嫿鎺掑簭
nextTick(() => {
- // 寮哄埗閲嶆柊娓叉煋缁勪欢
- if (proxy?.$forceUpdate) {
- proxy.$forceUpdate();
- }
-
- const temp = [...routeItems.value];
- routeItems.value = [];
- nextTick(() => {
- routeItems.value = temp;
- initSortable();
- });
+ initSortable();
});
};
-const findProcessRouteItems = () => {
+const form = ref({
+ id: undefined,
+ routeId: routeId.value,
+ processId: undefined,
+ productModelId: undefined,
+ productName: "",
+ model: "",
+ unit: "",
+});
+
+const rules = {
+ processId: [{ required: true, message: '璇烽�夋嫨宸ュ簭', trigger: 'change' }],
+ productModelId: [{ required: true, message: '璇烽�夋嫨浜у搧', trigger: 'change' }],
+};
+
+// 鏍规嵁宸ュ簭ID鑾峰彇宸ュ簭鍚嶇О
+const getProcessName = (processId) => {
+ if (!processId) return '';
+ const process = processOptions.value.find(p => p.id === processId);
+ return process ? process.name : '';
+};
+
+// 鑾峰彇鍒楄〃
+const getList = () => {
tableLoading.value = true;
- findProcessRouteItemList({ routeId: routeId.value })
- .then(res => {
- tableLoading.value = false;
- routeItems.value = res.data.map(item => ({
- ...item,
- processId: item.processId === 0 ? undefined : item.processId
- }));
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
- });
- })
- .catch(err => {
- tableLoading.value = false;
- console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
+ const listPromise =
+ pageType.value === "order"
+ ? findProductProcessRouteItemList({ orderId: orderId.value })
+ : findProcessRouteItemList({ routeId: routeId.value });
+
+ listPromise
+ .then(res => {
+ tableData.value = res.data || [];
+ tableLoading.value = false;
+ // 鍒楄〃鍔犺浇瀹屾垚鍚庡垵濮嬪寲鎷栨嫿鎺掑簭
+ nextTick(() => {
+ initSortable();
});
+ })
+ .catch(err => {
+ tableLoading.value = false;
+ console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
+ proxy?.$modal?.msgError("鑾峰彇鍒楄〃澶辫触");
+ });
};
-const findProcessList = () => {
+// 鑾峰彇宸ュ簭鍒楄〃
+const getProcessList = () => {
processList({})
- .then(res => {
- processOptions.value = res.data;
- })
- .catch(err => {
- console.error("鑾峰彇宸ュ簭澶辫触锛�", err);
- });
+ .then(res => {
+ processOptions.value = res.data || [];
+ })
+ .catch(err => {
+ console.error("鑾峰彇宸ュ簭澶辫触锛�", err);
+ });
};
-const { proxy } = getCurrentInstance() || {};
+// 鑾峰彇宸ヨ壓璺嚎璇︽儏锛堜粠璺敱鍙傛暟鑾峰彇锛�
+const getRouteInfo = () => {
+ routeInfo.value = {
+ processRouteCode: route.query.processRouteCode || '',
+ productName: route.query.productName || '',
+ model: route.query.model || '',
+ bomNo: route.query.bomNo || '',
+ description: route.query.description || ''
+ };
+};
-const handleSubmit = () => {
- const hasEmptyProcess = routeItems.value.some(item => !item.processId);
- if (hasEmptyProcess) {
- proxy?.$modal?.msgError("璇蜂负鎵�鏈夐」鐩�夋嫨宸ュ簭");
- return;
- }
+// 鏂板
+const handleAdd = () => {
+ operationType.value = 'add';
+ resetForm();
+ dialogVisible.value = true;
+};
- addOrUpdateProcessRouteItem({
+// 缂栬緫
+const handleEdit = (row) => {
+ operationType.value = 'edit';
+ form.value = {
+ id: row.id,
routeId: routeId.value,
- processRouteItem: routeItems.value.map(({ id, ...item }) => item)
+ processId: row.processId,
+ productModelId: row.productModelId,
+ productName: row.productName || "",
+ model: row.model || "",
+ unit: row.unit || "",
+ };
+ dialogVisible.value = true;
+};
+
+// 鍒犻櫎
+const handleDelete = (row) => {
+ ElMessageBox.confirm('纭鍒犻櫎璇ュ伐鑹鸿矾绾块」鐩紵', '鎻愮ず', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
})
- .then(res => {
- router.push({
- path: '/productionManagement/processRoute',
+ .then(() => {
+ // 鐢熶骇璁㈠崟涓嬩娇鐢� productProcessRoute 鐨勫垹闄ゆ帴鍙ｏ紙璺敱鍚庢嫾鎺� id锛夛紝鍏跺畠鎯呭喌浣跨敤宸ヨ壓璺嚎椤圭洰鎵归噺鍒犻櫎鎺ュ彛
+ const deletePromise =
+ pageType.value === 'order'
+ ? deleteRouteItem(row.id)
+ : batchDeleteProcessRouteItem([row.id]);
+
+ deletePromise
+ .then(() => {
+ proxy?.$modal?.msgSuccess('鍒犻櫎鎴愬姛');
+ getList();
})
- proxy?.$modal?.msgSuccess("鎻愪氦鎴愬姛");
- })
- .catch(err => {
- proxy?.$modal?.msgError(`鎻愪氦澶辫触锛�${err.msg || "缃戠粶寮傚父"}`);
- });
+ .catch(() => {
+ proxy?.$modal?.msgError('鍒犻櫎澶辫触');
+ });
+ })
+ .catch(() => {});
};
-const destroySortable = () => {
- if (tableSortable) {
- tableSortable.destroy();
- tableSortable = null;
- }
- if (stepsSortable) {
- stepsSortable.destroy();
- stepsSortable = null;
+// 浜у搧閫夋嫨
+const handleProductSelect = (products) => {
+ if (products && products.length > 0) {
+ const product = products[0];
+ form.value.productModelId = product.id;
+ form.value.productName = product.productName;
+ form.value.model = product.model;
+ form.value.unit = product.unit || "";
+ showProductSelectDialog.value = false;
+ // 瑙﹀彂琛ㄥ崟楠岃瘉
+ formRef.value?.validateField('productModelId');
}
};
+// 鎻愪氦
+const handleSubmit = () => {
+ formRef.value.validate((valid) => {
+ if (valid) {
+ submitLoading.value = true;
+
+ if (operationType.value === 'add') {
+ // 鏂板锛氫紶鍗曚釜瀵硅薄锛屽寘鍚玠ragSort瀛楁
+ // dragSort = 褰撳墠鍒楄〃闀垮害 + 1锛岃〃绀烘柊澧炶褰曟帓鍦ㄦ渶鍚�
+ const dragSort = tableData.value.length + 1;
+ const isOrderPage = pageType.value === 'order';
+
+ const addPromise = isOrderPage
+ ? addRouteItem({
+ productOrderId: orderId.value,
+ productRouteId: routeId.value,
+ processId: form.value.processId,
+ productModelId: form.value.productModelId,
+ dragSort,
+ })
+ : addOrUpdateProcessRouteItem({
+ routeId: routeId.value,
+ processId: form.value.processId,
+ productModelId: form.value.productModelId,
+ dragSort,
+ });
+
+ addPromise
+ .then(() => {
+ proxy?.$modal?.msgSuccess('鏂板鎴愬姛');
+ closeDialog();
+ getList();
+ })
+ .catch(() => {
+ proxy?.$modal?.msgError('鏂板澶辫触');
+ })
+ .finally(() => {
+ submitLoading.value = false;
+ });
+ } else {
+ // 缂栬緫锛氱敓浜ц鍗曚笅浣跨敤 productProcessRoute/updateRouteItem锛屽叾瀹冩儏鍐典娇鐢ㄥ伐鑹鸿矾绾块」鐩洿鏂版帴鍙�
+ const isOrderPage = pageType.value === 'order';
+
+ const updatePromise = isOrderPage
+ ? addOrUpdateProductProcessRouteItem({
+ id: form.value.id,
+ processId: form.value.processId,
+ productModelId: form.value.productModelId,
+ })
+ : addOrUpdateProcessRouteItem({
+ routeId: routeId.value,
+ processId: form.value.processId,
+ productModelId: form.value.productModelId,
+ id: form.value.id,
+ });
+
+ updatePromise
+ .then(() => {
+ proxy?.$modal?.msgSuccess('淇敼鎴愬姛');
+ closeDialog();
+ getList();
+ })
+ .catch(() => {
+ proxy?.$modal?.msgError('淇敼澶辫触');
+ })
+ .finally(() => {
+ submitLoading.value = false;
+ });
+ }
+ }
+ });
+};
+
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+ form.value = {
+ id: undefined,
+ routeId: routeId.value,
+ processId: undefined,
+ productModelId: undefined,
+ productName: "",
+ model: "",
+ unit: "",
+ };
+ formRef.value?.resetFields();
+};
+
+// 鍏抽棴寮圭獥
+const closeDialog = () => {
+ dialogVisible.value = false;
+ resetForm();
+};
+
+// 鍒濆鍖栨嫋鎷芥帓搴�
const initSortable = () => {
destroySortable();
-
- if (isTable.value) {
- if (!multipleTable.value) return;
- const tbody = multipleTable.value.$el.querySelector('.el-table__body tbody') ||
- multipleTable.value.$el.querySelector('.el-table__body-wrapper > table > tbody');
+
+ if (viewMode.value === 'table') {
+ // 琛ㄦ牸瑙嗗浘鐨勬嫋鎷芥帓搴�
+ if (!tableRef.value) return;
+
+ const tbody = tableRef.value.$el.querySelector('.el-table__body tbody') ||
+ tableRef.value.$el.querySelector('.el-table__body-wrapper > table > tbody');
+
if (!tbody) return;
tableSortable = new Sortable(tbody, {
@@ -315,189 +496,381 @@
handle: '.el-table__row',
filter: '.el-button, .el-select',
onEnd: (evt) => {
- if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;
+ if (evt.oldIndex === evt.newIndex || !tableData.value[evt.oldIndex]) return;
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭锛屼笌琛ㄦ牸妯″紡淇濇寔涓�鑷�
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- routeItems.value = [...routeItems.value];
- console.log('鎺掑簭鍚庢暟缁�:', routeItems.value);
+ // 閲嶆柊鎺掑簭鏁扮粍
+ const moveItem = tableData.value.splice(evt.oldIndex, 1)[0];
+ tableData.value.splice(evt.newIndex, 0, moveItem);
+
+ // 璁＄畻鏂扮殑搴忓彿锛坉ragSort浠�1寮�濮嬶級
+ const newIndex = evt.newIndex;
+ const dragSort = newIndex + 1;
+
+ // 璋冪敤鎺掑簭鎺ュ彛
+ if (moveItem.id) {
+ const isOrderPage = pageType.value === 'order';
+ const sortPromise = isOrderPage
+ ? sortRouteItem({
+ id: moveItem.id,
+ dragSort: dragSort
+ })
+ : sortProcessRouteItem({
+ id: moveItem.id,
+ dragSort: dragSort
+ });
+
+ sortPromise
+ .then(() => {
+ // 鏇存柊鎵�鏈夎鐨刣ragSort
+ tableData.value.forEach((item, index) => {
+ if (item.id) {
+ item.dragSort = index + 1;
+ }
+ });
+ proxy?.$modal?.msgSuccess('鎺掑簭鎴愬姛');
+ })
+ .catch((err) => {
+ // 鎺掑簭澶辫触锛屾仮澶嶅師鏁扮粍
+ tableData.value.splice(newIndex, 1);
+ tableData.value.splice(evt.oldIndex, 0, moveItem);
+ proxy?.$modal?.msgError('鎺掑簭澶辫触');
+ console.error("鎺掑簭澶辫触锛�", err);
+ });
+ }
}
});
} else {
- if (!stepsContainer.value) return;
+ // 鍗＄墖瑙嗗浘鐨勬嫋鎷芥帓搴�
+ if (!cardsContainer.value) return;
- // 淇敼锛氱洿鎺ヤ娇鐢╯tepsContainer.value浣滀负鎷栨嫿瀹瑰櫒
- const stepsList = stepsContainer.value;
- if (!stepsList) {
- console.warn('鏈壘鍒版楠ゆ潯鎷栨嫿瀹瑰櫒');
- return;
- }
-
- // 淇敼锛氱畝鍖栨嫋鎷介厤缃�
- stepsSortable = new Sortable(stepsList, {
+ cardSortable = new Sortable(cardsContainer.value, {
animation: 150,
ghostClass: 'sortable-ghost',
- draggable: '.draggable-step', // 鍙嫋鎷藉厓绱�
- handle: '.draggable-step, .step-card', // 鎷栨嫿鎵嬫焺
- filter: '.el-button, .el-select, .el-input', // 杩囨护鎸夐挳/閫夋嫨鍣�
- forceFallback: true,
- fallbackClass: 'sortable-fallback',
- preventOnFilter: true,
- scroll: true,
- scrollSensitivity: 30,
- scrollSpeed: 10,
- bubbleScroll: true,
+ handle: '.process-card',
+ filter: '.el-button',
onEnd: (evt) => {
- if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;
+ if (evt.oldIndex === evt.newIndex || !tableData.value[evt.oldIndex]) return;
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- routeItems.value = [...routeItems.value];
+ // 閲嶆柊鎺掑簭鏁扮粍
+ const moveItem = tableData.value.splice(evt.oldIndex, 1)[0];
+ tableData.value.splice(evt.newIndex, 0, moveItem);
+
+ // 璁＄畻鏂扮殑搴忓彿锛坉ragSort浠�1寮�濮嬶級
+ const newIndex = evt.newIndex;
+ const dragSort = newIndex + 1;
+
+ // 璋冪敤鎺掑簭鎺ュ彛
+ if (moveItem.id) {
+ const isOrderPage = pageType.value === 'order';
+ const sortPromise = isOrderPage
+ ? sortRouteItem({
+ id: moveItem.id,
+ dragSort: dragSort
+ })
+ : sortProcessRouteItem({
+ id: moveItem.id,
+ dragSort: dragSort
+ });
+
+ sortPromise
+ .then(() => {
+ // 鏇存柊鎵�鏈夎鐨刣ragSort
+ tableData.value.forEach((item, index) => {
+ if (item.id) {
+ item.dragSort = index + 1;
+ }
+ });
+ proxy?.$modal?.msgSuccess('鎺掑簭鎴愬姛');
+ })
+ .catch((err) => {
+ // 鎺掑簭澶辫触锛屾仮澶嶅師鏁扮粍
+ tableData.value.splice(newIndex, 1);
+ tableData.value.splice(evt.oldIndex, 0, moveItem);
+ proxy?.$modal?.msgError('鎺掑簭澶辫触');
+ console.error("鎺掑簭澶辫触锛�", err);
+ });
+ }
}
});
-
- // 璋冭瘯锛氭墦鍗板鍣ㄥ拰瀹炰緥锛岀‘璁ょ粦瀹氭垚鍔�
- console.log('姝ラ鏉℃嫋鎷藉鍣�:', stepsList);
- console.log('Sortable瀹炰緥:', stepsSortable);
}
};
-const handleViewChange = () => {
- destroySortable();
- // 寤惰繜鍒濆鍖栵紝纭繚瑙嗗浘鍒囨崲鍚嶥OM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
- });
+// 閿�姣佹嫋鎷芥帓搴�
+const destroySortable = () => {
+ if (tableSortable) {
+ tableSortable.destroy();
+ tableSortable = null;
+ }
+ if (cardSortable) {
+ cardSortable.destroy();
+ cardSortable = null;
+ }
};
onMounted(() => {
- findProcessRouteItems();
- findProcessList();
+ getRouteInfo();
+ getList();
+ getProcessList();
});
onUnmounted(() => {
destroySortable();
});
-
-defineExpose({
- handleSubmit,
-});
</script>
<style scoped>
+.card-container {
+ padding: 20px 0;
+}
+
+.cards-wrapper {
+ display: flex;
+ gap: 16px;
+ overflow-x: auto;
+ padding: 10px 0;
+ min-height: 200px;
+}
+
+.cards-wrapper::-webkit-scrollbar {
+ height: 8px;
+}
+
+.cards-wrapper::-webkit-scrollbar-track {
+ background: #f1f1f1;
+ border-radius: 4px;
+}
+
+.cards-wrapper::-webkit-scrollbar-thumb {
+ background: #c1c1c1;
+ border-radius: 4px;
+}
+
+.cards-wrapper::-webkit-scrollbar-thumb:hover {
+ background: #a8a8a8;
+}
+
+.process-card {
+ flex-shrink: 0;
+ width: 220px;
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ cursor: move;
+ transition: all 0.3s;
+}
+
+.process-card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ transform: translateY(-2px);
+}
+
+.card-header {
+ text-align: center;
+ margin-bottom: 12px;
+}
+
+.card-number {
+ width: 36px;
+ height: 36px;
+ line-height: 36px;
+ border-radius: 50%;
+ background: #409eff;
+ color: #fff;
+ font-weight: bold;
+ font-size: 16px;
+ margin: 0 auto 8px;
+}
+
+.card-process-name {
+ font-size: 14px;
+ color: #333;
+ font-weight: 500;
+ word-break: break-all;
+}
+
+.card-content {
+ flex: 1;
+ margin-bottom: 12px;
+ min-height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.product-info {
+ font-size: 13px;
+ color: #666;
+ text-align: center;
+ width: 100%;
+}
+
+.product-info.empty {
+ color: #999;
+ text-align: center;
+ padding: 20px 0;
+}
+
+.product-name {
+ margin-bottom: 6px;
+ word-break: break-all;
+ line-height: 1.5;
+ text-align: center;
+}
+
+.product-model {
+ color: #909399;
+ font-size: 12px;
+ word-break: break-all;
+ line-height: 1.5;
+ text-align: center;
+}
+
+.product-unit {
+ margin-left: 4px;
+ color: #409eff;
+}
+
+.card-footer {
+ display: flex;
+ justify-content: space-around;
+ padding-top: 12px;
+ border-top: 1px solid #f0f0f0;
+}
+
+.card-footer .el-button {
+ padding: 0;
+ font-size: 12px;
+}
+
:deep(.sortable-ghost) {
- opacity: 0.6;
+ opacity: 0.5;
background-color: #f5f7fa !important;
}
+:deep(.sortable-drag) {
+ opacity: 0.8;
+}
+
+/* 琛ㄦ牸瑙嗗浘鏍峰紡 */
:deep(.el-table__row) {
transition: background-color 0.2s;
+ cursor: move;
}
:deep(.el-table__row:hover) {
background-color: #f9fafc !important;
}
-:deep(.el-card__footer){
- padding: 0 !important;
+/* 鍖哄煙鏍囬鏍峰紡 */
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
}
-.operate-button {
+.section-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ padding-left: 12px;
+ position: relative;
+ margin-bottom: 0;
+}
+
+.section-title::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 16px;
+ background: #409eff;
+ border-radius: 2px;
+}
+
+.section-actions {
display: flex;
align-items: center;
- justify-content: space-between;
}
-/* 淇敼锛氳嚜瀹氫箟姝ラ鏉″鍣ㄦ牱寮� */
-.custom-steps {
- min-height: 100px;
- padding: 10px 0;
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- align-items: flex-start;
+/* 宸ヨ壓璺嚎淇℃伅鍗＄墖鏍峰紡 */
+.route-info-card {
+ margin-bottom: 20px;
+ border: 1px solid #e4e7ed;
+ background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+ border-radius: 8px;
+ overflow: hidden;
}
-/* 淇敼锛氳嚜瀹氫箟姝ラ椤规牱寮� */
-.custom-step {
- cursor: move !important;
- padding: 8px;
- position: relative;
- transition: all 0.2s ease;
- flex: 0 0 auto;
- min-width: 220px;
- touch-action: none;
+.route-info {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 16px;
+ padding: 4px;
}
-/* 鎷栨嫿鎮诞鏍峰紡锛屾彁绀哄彲鎷栨嫿 */
-.custom-step:hover {
- background-color: rgba(64, 158, 255, 0.05);
- transform: translateY(-2px);
-}
-
-.sortable-ghost {
- opacity: 0.4;
- background-color: #f5f7fa !important;
- border: 2px dashed #409eff;
- margin: 10px;
- transform: scale(1.02);
-}
-
-.sortable-fallback {
- opacity: 0.9;
- background-color: #f5f7fa;
- border: 1px solid #409eff;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
- transform: rotate(2deg);
- margin: 10px;
-}
-
-.step-card {
- cursor: move !important;
- transition: box-shadow 0.2s ease;
- user-select: none;
- -webkit-user-select: none;
- pointer-events: auto;
- margin: 10px;
- height: 260px;
-}
-
-.step-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.step-content {
- width: 245px;
- user-select: none;
-}
-
-.step-card-content {
+.info-item {
display: flex;
flex-direction: column;
- align-items: center;
- height: 140px;
+ background: #ffffff;
+ border-radius: 6px;
+ padding: 14px 16px;
+ border: 1px solid #f0f2f5;
+ transition: all 0.3s ease;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
-.step-card-footer {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 10px;
+.info-item:hover {
+ border-color: #409eff;
+ box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+ transform: translateY(-1px);
}
-/* 鑷畾涔夊簭鍙锋牱寮忎紭鍖� */
-.step-number {
- font-weight: bold;
- text-align: center;
- width: 36px;
- height: 36px;
- line-height: 36px;
- margin: 0 auto 10px;
- background: #409eff;
- color: #fff;
- border-radius: 50%;
- font-size: 14px;
+.info-item.full-width {
+ grid-column: 1 / -1;
+}
+
+.info-label-wrapper {
+ margin-bottom: 8px;
+}
+
+.info-label {
+ display: inline-block;
+ color: #909399;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 2px 0;
+ position: relative;
+}
+
+.info-label::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 20px;
+ height: 2px;
+ background: linear-gradient(90deg, #409eff, transparent);
+ border-radius: 1px;
+}
+
+.info-value-wrapper {
+ flex: 1;
+}
+
+.info-value {
+ display: block;
+ color: #303133;
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 1.5;
+ word-break: break-all;
}
</style>
diff --git a/src/views/productionManagement/productStructure/Detail/index.vue b/src/views/productionManagement/productStructure/Detail/index.vue
index a131830..20a472b 100644
--- a/src/views/productionManagement/productStructure/Detail/index.vue
+++ b/src/views/productionManagement/productStructure/Detail/index.vue
@@ -1,30 +1,32 @@
<template>
<div class="app-container">
- <el-button v-if="dataValue.isEdit"
- type="primary"
- @click="addItem"
- style="margin-bottom: 10px">娣诲姞
- </el-button>
- <el-button v-if="!dataValue.isEdit"
- type="primary"
- @click="dataValue.isEdit = true"
- style="margin-bottom: 10px">缂栬緫
- </el-button>
- <el-button v-if="dataValue.isEdit"
- type="primary"
- @click="cancelEdit"
- style="margin-bottom: 10px">鍙栨秷
- </el-button>
- <el-button type="primary"
- :loading="dataValue.loading"
- @click="submit"
- :disabled="!dataValue.isEdit"
- style="margin-bottom: 10px">纭
- </el-button>
+ <PageHeader content="浜у搧缁撴瀯璇︽儏">
+ <template #right-button>
+ <el-button v-if="dataValue.isEdit && !isOrderPage"
+ type="primary"
+ @click="addItem">娣诲姞
+ </el-button>
+ <el-button v-if="!dataValue.isEdit && !isOrderPage"
+ type="primary"
+ @click="dataValue.isEdit = true">缂栬緫
+ </el-button>
+ <el-button v-if="dataValue.isEdit && !isOrderPage"
+ type="primary"
+ @click="cancelEdit">鍙栨秷
+ </el-button>
+ <el-button v-if="!isOrderPage"
+ type="primary"
+ :loading="dataValue.loading"
+ @click="submit"
+ :disabled="!dataValue.isEdit">纭
+ </el-button>
+ </template>
+ </PageHeader>
<el-table
:data="tableData"
border
:preserve-expanded-content="false"
+ :default-expand-all="true"
style="width: 100%"
>
<el-table-column type="expand">
@@ -91,7 +93,8 @@
</el-form-item>
</template>
</el-table-column>
- <el-table-column prop="demandedQuantity"
+ <el-table-column v-if="isOrderPage"
+ prop="demandedQuantity"
label="闇�姹傛�婚噺">
<template #default="{ row, $index }">
<el-form-item :prop="`dataList.${$index}.demandedQuantity`"
@@ -120,25 +123,10 @@
</el-form-item>
</template>
</el-table-column>
- <el-table-column prop="diskQuantity"
- label="鐩樻暟锛堢洏锛�">
- <template #default="{ row, $index }">
- <el-form-item :prop="`dataList.${$index}.diskQuantity`"
- :rules="[{ required: true, message: '璇疯緭鍏ョ洏鏁�', trigger: ['blur','change'] }]"
- style="margin: 0">
- <el-input-number v-model="row.diskQuantity"
- :min="0"
- :precision="0"
- :step="1"
- controls-position="right"
- style="width: 100%"
- :disabled="!dataValue.isEdit" />
- </el-form-item>
- </template>
- </el-table-column>
<el-table-column label="鎿嶄綔" fixed="right" width="100">
<template #default="{ row, $index }">
- <el-button type="danger"
+ <el-button v-if="dataValue.isEdit"
+ type="danger"
text
@click="dataValue.dataList.splice($index, 1)">鍒犻櫎
</el-button>
@@ -148,10 +136,9 @@
</el-form>
</template>
</el-table-column>
- <el-table-column label="浜у搧缂栫爜" prop="productCode" />
+ <el-table-column label="BOM缂栧彿" prop="bomNo" />
<el-table-column label="浜у搧鍚嶇О" prop="productName" />
<el-table-column label="瑙勬牸鍨嬪彿" prop="model" />
- <el-table-column label="鍗曚綅" prop="unit" />
</el-table>
<product-select-dialog v-if="dataValue.showProductDialog"
@@ -170,6 +157,7 @@
ref,
} from "vue";
import { queryList, add } from "@/api/productionManagement/productStructure.js";
+import { listProcessBom } from "@/api/productionManagement/productionOrder.js";
import { list } from "@/api/productionManagement/productionProcess";
import { ElMessage } from "element-plus";
import {useRoute, useRouter} from "vue-router";
@@ -195,6 +183,13 @@
}
});
+// 浠庤矾鐢卞弬鏁拌幏鍙栦骇鍝佷俊鎭�
+const routeBomNo = computed(() => route.query.bomNo || '');
+const routeProductName = computed(() => route.query.productName || '');
+const routeProductModelName = computed(() => route.query.productModelName || '');
+const routeOrderId = computed(() => route.query.orderId);
+const pageType = computed(() => route.query.type);
+const isOrderPage = computed(() => pageType.value === 'order' && routeOrderId.value);
const dataValue = reactive({
dataList: [],
@@ -210,8 +205,7 @@
{
productName: "",
model: "",
- unit: "",
- productCode: "",
+ bomNo: "",
}
])
@@ -221,12 +215,15 @@
};
const fetchData = async () => {
- const { data } = await queryList(routeId.value);
- tableData[0].productName = data.productName;
- tableData[0].model = data.model;
- tableData[0].unit = data.unit;
- tableData[0].productCode = data.productCode;
- dataValue.dataList = data.productStructureList;
+ if (isOrderPage.value) {
+ // 璁㈠崟鎯呭喌锛氫娇鐢ㄨ鍗曠殑浜у搧缁撴瀯鎺ュ彛
+ const { data } = await listProcessBom({ orderId: routeOrderId.value });
+ dataValue.dataList = data || [];
+ } else {
+ // 闈炶鍗曟儏鍐碉細浣跨敤鍘熸潵鐨勬帴鍙�
+ const { data } = await queryList(routeId.value);
+ dataValue.dataList = data || [];
+ }
};
const fetchProcessOptions = async () => {
@@ -242,6 +239,7 @@
row[0].productName;
dataValue.dataList[dataValue.currentRowIndex].model = row[0].model;
dataValue.dataList[dataValue.currentRowIndex].productModelId = row[0].id;
+ dataValue.dataList[dataValue.currentRowIndex].unit = row[0].unit || "";
dataValue.showProductDialog = false;
};
@@ -251,7 +249,7 @@
dataValue.loading = true;
if (valid) {
add({
- parentId: routeId.value,
+ bomId: routeId.value,
productStructureList: dataValue.dataList || [],
}).then(res => {
router.push({
@@ -277,7 +275,6 @@
unitQuantity: 0,
demandedQuantity: 0,
unit: "",
- diskQuantity: 0,
});
};
@@ -287,6 +284,16 @@
};
onMounted(() => {
+ // 浠庤矾鐢卞弬鏁板洖鏄炬暟鎹�
+ tableData[0].productName = routeProductName.value;
+ tableData[0].model = routeProductModelName.value;
+ tableData[0].bomNo = routeBomNo.value;
+
+ // 璁㈠崟鎯呭喌涓嬬鐢ㄧ紪杈�
+ if (isOrderPage.value) {
+ dataValue.isEdit = false;
+ }
+
fetchData();
fetchProcessOptions();
});
diff --git a/src/views/productionManagement/productStructure/index.vue b/src/views/productionManagement/productStructure/index.vue
index e32ff8d..d8ce689 100644
--- a/src/views/productionManagement/productStructure/index.vue
+++ b/src/views/productionManagement/productStructure/index.vue
@@ -1,5 +1,9 @@
<template>
<div class="app-container">
+ <div style="text-align: right; margin-bottom: 10px;">
+ <el-button type="primary" @click="handleAdd">鏂板</el-button>
+ <el-button type="danger" plain @click="handleBatchDelete" :disabled="selectedRows.length === 0">鍒犻櫎</el-button>
+ </div>
<PIMTable
rowKey="id"
:column="tableColumn"
@@ -14,100 +18,323 @@
<el-button
type="primary"
text
- @click="showDetail(row.id)">{{ row.productName }}
+ @click="showDetail(row)">{{ row.bomNo }}
</el-button>
</template>
</PIMTable>
<StructureEdit v-if="showEdit" v-model:show-model="showEdit" :record="currentRow"/>
+
+ <!-- 鏂板/缂栬緫寮圭獥 -->
+ <el-dialog
+ v-model="dialogVisible"
+ :title="operationType === 'add' ? '鏂板BOM' : '缂栬緫BOM'"
+ width="600px"
+ @close="closeDialog"
+ >
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="120px"
+ >
+ <el-form-item label="浜у搧鍚嶇О" prop="productModelId">
+ <el-button type="primary" @click="showProductSelectDialog = true">
+ {{ form.productName || '閫夋嫨浜у搧' }}
+ </el-button>
+ </el-form-item>
+ <el-form-item label="鐗堟湰鍙�" prop="version">
+ <el-input v-model="form.version" placeholder="璇疯緭鍏ョ増鏈彿" clearable />
+ </el-form-item>
+ <el-form-item label="澶囨敞" prop="remark">
+ <el-input
+ v-model="form.remark"
+ type="textarea"
+ :rows="3"
+ placeholder="璇疯緭鍏ュ娉�"
+ clearable
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="closeDialog">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleSubmit">纭畾</el-button>
+ </template>
+ </el-dialog>
+
+ <!-- 浜у搧閫夋嫨寮圭獥 -->
+ <ProductSelectDialog
+ v-model="showProductSelectDialog"
+ @confirm="handleProductSelect"
+ single
+ />
</div>
</template>
<script setup>
-import {ref} from "vue";
-import {productModelList} from "@/api/basicData/productModel.js";
+import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineAsyncComponent } from "vue";
+import { listPage, add, update, batchDelete } from "@/api/productionManagement/productBom.js";
import { useRouter } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
const router = useRouter()
+const { proxy } = getCurrentInstance()
const StructureEdit = defineAsyncComponent(() => import('@/views/productionManagement/productStructure/StructureEdit.vue'))
const tableColumn = ref([
{
- label: "浜у搧缂栫爜",
- prop: "productCode",
- slot: "detail"
+ label: "BOM缂栧彿",
+ prop: "bomNo",
+ dataType: 'slot',
+ slot: "detail",
+ minWidth: 140
},
{
label: "浜у搧鍚嶇О",
prop: "productName",
- dataType: 'slot',
- slot: "detail"
+
+ minWidth: 160
},
{
label: "瑙勬牸鍨嬪彿",
- prop: "model",
+ prop: "productModelName",
+ minWidth: 140
},
{
- label: "鍗曚綅",
- prop: "unit",
+ label: "鐗堟湰鍙�",
+ prop: "version",
+ width: 100
+ },
+ {
+ label: "澶囨敞",
+ prop: "remark",
+ minWidth: 160
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 150,
+ operation: [
+ {
+ name: "缂栬緫",
+ type: "text",
+ clickFun: (row) => {
+ handleEdit(row)
+ }
+ },
+ {
+ name: "鍒犻櫎",
+ type: "danger",
+ link: true,
+ clickFun: (row) => {
+ handleDelete(row)
+ }
+ }
+ ]
}
]);
+
const tableData = ref([]);
const tableLoading = ref(false);
const showEdit = ref(false);
const selectedRows = ref([]);
const currentRow = ref({});
+const dialogVisible = ref(false);
+const operationType = ref('add'); // add | edit
+const formRef = ref(null);
+const showProductSelectDialog = ref(false);
+
const page = reactive({
current: 1,
size: 10,
total: 0,
});
+
const data = reactive({
form: {
+ id: undefined,
productName: "",
+ productModelName: "",
+ productModelId: "",
+ remark: "",
+ version: ""
},
rules: {
- productName: [{required: true, message: "璇疯緭鍏�", trigger: "blur"}],
- },
- modelForm: {
- otherModel: '',
- model: "",
- unit: "",
- speculativeTradingName: [],
- },
+ productModelId: [{ required: true, message: "璇烽�夋嫨浜у搧", trigger: "change" }],
+ version: [{ required: true, message: "璇疯緭鍏ョ増鏈彿", trigger: "blur" }]
+ }
});
-const {form, rules} = toRefs(data);
+
+const { form, rules } = toRefs(data);
+
// 琛ㄦ牸閫夋嫨鏁版嵁
const handleSelectionChange = (selection) => {
selectedRows.value = selection;
};
-// 鏌ヨ瑙勬牸鍨嬪彿
+// 鍒嗛〉
const pagination = (obj) => {
page.current = obj.page;
page.size = obj.limit;
- getModelList();
+ getList();
};
-const showDetail = (id) => {
+// 鏌ヨ鍒楄〃
+const getList = () => {
+ tableLoading.value = true;
+ listPage({
+ current: page.current,
+ size: page.size,
+ })
+ .then((res) => {
+ const records = res?.data?.records || [];
+ tableData.value = records;
+ page.total = res?.data?.total || 0;
+ })
+ .catch((err) => {
+ console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
+ })
+ .finally(() => {
+ tableLoading.value = false;
+ });
+};
+
+// 鏂板
+const handleAdd = () => {
+ operationType.value = 'add';
+ Object.assign(form.value, {
+ id: undefined,
+ productName: "",
+ productModelName: "",
+ productModelId: "",
+ remark: "",
+ version: ""
+ });
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const handleEdit = (row) => {
+ operationType.value = 'edit';
+ Object.assign(form.value, {
+ id: row.id,
+ productName: row.productName || "",
+ productModelName: row.productModelName || "",
+ productModelId: row.productModelId || "",
+ remark: row.remark || "",
+ version: row.version || ""
+ });
+ dialogVisible.value = true;
+};
+
+// 鍒犻櫎锛堝崟鏉★級
+const handleDelete = (row) => {
+ ElMessageBox.confirm('纭鍒犻櫎璇OM锛�', '鎻愮ず', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+ .then(() => {
+ batchDelete([row.id])
+ .then(() => {
+ proxy.$modal.msgSuccess('鍒犻櫎鎴愬姛');
+ getList();
+ })
+ .catch(() => {
+ proxy.$modal.msgError('鍒犻櫎澶辫触');
+ });
+ })
+ .catch(() => {});
+};
+
+// 鎵归噺鍒犻櫎
+const handleBatchDelete = () => {
+ if (!selectedRows.value.length) {
+ proxy.$modal.msgWarning('璇烽�夋嫨鏁版嵁');
+ return;
+ }
+ const ids = selectedRows.value.map(item => item.id);
+ ElMessageBox.confirm('閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�', '鍒犻櫎鎻愮ず', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+ .then(() => {
+ batchDelete(ids)
+ .then(() => {
+ proxy.$modal.msgSuccess('鍒犻櫎鎴愬姛');
+ getList();
+ })
+ .catch(() => {
+ proxy.$modal.msgError('鍒犻櫎澶辫触');
+ });
+ })
+ .catch(() => {});
+};
+
+// 浜у搧閫夋嫨
+const handleProductSelect = (products) => {
+ if (products && products.length > 0) {
+ const product = products[0];
+ form.value.productModelId = product.id;
+ form.value.productName = product.productName;
+ form.value.productModelName = product.model;
+ }
+ showProductSelectDialog.value = false;
+};
+
+// 鎻愪氦琛ㄥ崟
+const handleSubmit = () => {
+ formRef.value.validate((valid) => {
+ if (valid) {
+ const payload = { ...form.value };
+ if (operationType.value === 'add') {
+ add(payload)
+ .then(() => {
+ proxy.$modal.msgSuccess('鏂板鎴愬姛');
+ closeDialog();
+ getList();
+ })
+ .catch(() => {
+ proxy.$modal.msgError('鏂板澶辫触');
+ });
+ } else {
+ update(payload)
+ .then(() => {
+ proxy.$modal.msgSuccess('淇敼鎴愬姛');
+ closeDialog();
+ getList();
+ })
+ .catch(() => {
+ proxy.$modal.msgError('淇敼澶辫触');
+ });
+ }
+ }
+ });
+};
+
+// 鍏抽棴寮圭獥
+const closeDialog = () => {
+ dialogVisible.value = false;
+ formRef.value?.resetFields();
+};
+
+// 鏌ョ湅璇︽儏
+const showDetail = (row) => {
router.push({
path: '/productionManagement/productStructureDetail',
query: {
- id: id
+ id: row.id,
+ bomNo: row.bomNo || '',
+ productName: row.productName || '',
+ productModelName: row.productModelName || ''
}
- })
-}
-const getModelList = () => {
- tableLoading.value = true;
- productModelList({
- current: page.current,
- size: page.size,
- }).then((res) => {
- tableData.value = res.records;
- page.total = res.total;
- tableLoading.value = false;
});
};
+
onMounted(() => {
- getModelList();
-})
+ getList();
+});
</script>
diff --git a/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue b/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue
deleted file mode 100644
index 354f9de..0000000
--- a/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue
+++ /dev/null
@@ -1,555 +0,0 @@
-<template>
- <div>
- <el-dialog v-model="isShow"
- title="宸ヨ壓璺嚎椤圭洰"
- width="800px"
- @close="closeModal">
- <div class="operate-button">
- <el-button type="primary"
- @click="isShowProductSelectDialog = true"
- class="mb5"
- style="margin-bottom: 10px;">
- 閫夋嫨浜у搧
- </el-button>
- <el-switch v-model="isTable"
- inline-prompt
- active-text="琛ㄦ牸"
- inactive-text="鍒楄〃"
- @change="handleViewChange" />
- </div>
- <el-table v-if="isTable"
- ref="multipleTable"
- v-loading="tableLoading"
- border
- :data="routeItems"
- :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
- row-key="id"
- tooltip-effect="dark"
- class="lims-table"
- style="cursor: move;">
- <el-table-column align="center"
- label="搴忓彿"
- width="60">
- <template #default="scope">
- {{ scope.$index + 1 }}
- </template>
- </el-table-column>
- <el-table-column v-for="(item, index) in tableColumn"
- :key="index"
- :label="item.label"
- :width="item.width"
- show-overflow-tooltip>
- <template #default="scope"
- v-if="item.dataType === 'action'">
- <el-button v-for="(op, opIndex) in item.operation"
- :key="opIndex"
- :type="op.type"
- :link="op.link"
- size="small"
- @click.stop="op.clickFun(scope.row)">
- {{ op.name }}
- </el-button>
- </template>
- <template #default="scope"
- v-else>
- <template v-if="item.prop === 'processId'">
- <el-select v-model="scope.row[item.prop]"
- style="width: 100%;"
- @mousedown.stop>
- <el-option v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id" />
- </el-select>
- </template>
- <template v-else>
- {{ scope.row[item.prop] || '-' }}
- </template>
- </template>
- </el-table-column>
- </el-table>
- <!-- 浣跨敤鏅�歞iv鏇夸唬el-steps -->
- <div v-else
- ref="stepsContainer"
- class="mb5 custom-steps"
- style="padding: 10px 0; display: flex; flex-wrap: nowrap; gap: 20px; align-items: flex-start;">
- <div v-for="(item, index) in routeItems"
- :key="item.id"
- class="custom-step draggable-step"
- :data-id="item.id"
- style="cursor: move; flex: 0 0 auto; min-width: 220px;">
- <div class="step-content">
- <div class="step-number">{{ index + 1 }}</div>
- <el-card :header="item.productName"
- class="step-card"
- style="cursor: move;">
- <div class="step-card-content">
- <p>{{ item.model }}</p>
- <p>{{ item.unit }}</p>
- <el-select v-model="item.processId"
- style="width: 100%;"
- @mousedown.stop>
- <el-option v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id" />
- </el-select>
- </div>
- <template #footer>
- <div class="step-card-footer">
- <el-button type="danger"
- link
- size="small"
- @click.stop="removeItemByID(item.id)">鍒犻櫎</el-button>
- </div>
- </template>
- </el-card>
- </div>
- </div>
- </div>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary"
- @click="handleSubmit">纭</el-button>
- <el-button @click="closeModal">鍙栨秷</el-button>
- </div>
- </template>
- </el-dialog>
- <ProductSelectDialog v-model="isShowProductSelectDialog"
- @confirm="handelSelectProducts" />
- </div>
-</template>
-
-<script setup>
- import {
- ref,
- computed,
- getCurrentInstance,
- onMounted,
- onUnmounted,
- nextTick,
- } from "vue";
- import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
- import {
- findProductProcessRouteItemList,
- addOrUpdateProductProcessRouteItem,
- deleteRouteItem,
- } from "@/api/productionManagement/productProcessRoute.js";
- import { processList } from "@/api/productionManagement/productionProcess.js";
- import Sortable from "sortablejs";
-
- const props = defineProps({
- visible: {
- type: Boolean,
- required: true,
- default: false,
- },
- record: {
- type: Object,
- required: true,
- default: () => ({}),
- },
- });
-
- const emit = defineEmits(["update:visible", "completed"]);
-
- const processOptions = ref([]);
- const tableLoading = ref(false);
- const isShowProductSelectDialog = ref(false);
- const routeItems = ref([]);
- let tableSortable = null;
- let stepsSortable = null;
- const multipleTable = ref(null);
- const stepsContainer = ref(null);
- const isTable = ref(true);
-
- const isShow = computed({
- get() {
- return props.visible;
- },
- set(val) {
- emit("update:visible", val);
- },
- });
-
- const tableColumn = ref([
- { label: "浜у搧鍚嶇О", prop: "productName", width: 180 },
- { label: "瑙勬牸鍚嶇О", prop: "model", width: 150 },
- { label: "鍗曚綅", prop: "unit", width: 80 },
- { label: "宸ュ簭鍚嶇О", prop: "processId", width: 180 },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 100,
- operation: [
- {
- name: "鍒犻櫎",
- type: "danger",
- link: true,
- clickFun: row => {
- console.log(row.id, "鍒犻櫎");
-
- const dragSortx = routeItems.value.findIndex(
- item => item.dragSort === row.dragSort
- );
- const idx = routeItems.value.findIndex(item => item.id === row.id);
- console.log(idx, "idx");
- if (row.id) {
- deleteRouteItemByIds({ id: row.id }, idx);
- } else {
- removeItem(dragSortx);
- }
- },
- },
- ],
- },
- ]);
-
- const removeItem = index => {
- console.log("杞垹闄�", index);
-
- routeItems.value.splice(index, 1);
- updateDragSort();
- nextTick(() => initSortable());
- };
-
- const removeItemByID = id => {
- const idx = routeItems.value.findIndex(item => item.id === id);
- if (idx > -1) {
- routeItems.value.splice(idx, 1);
- updateDragSort();
- nextTick(() => initSortable());
- }
- };
-
- const deleteRouteItemByIds = (ids, index) => {
- deleteRouteItem(ids).then(res => {
- routeItems.value.splice(index, 1);
- updateDragSort();
- nextTick(() => initSortable());
- });
- };
-
- const closeModal = () => {
- isShow.value = false;
- };
-
- const updateDragSort = () => {
- routeItems.value.forEach((item, index) => {
- item.dragSort = index + 1;
- });
- routeItems.value = [...routeItems.value];
- console.log("鏇存柊鍚庣殑鏁扮粍:", routeItems.value);
- };
-
- const handelSelectProducts = products => {
- destroySortable();
-
- // 璁＄畻鏂扮殑dragSort鍊艰捣濮嬬偣
- const maxDragSort =
- routeItems.value.length > 0
- ? Math.max(...routeItems.value.map(item => item.dragSort || 0))
- : 0;
-
- const newData = products.map(({ id, ...product }, index) => ({
- ...product,
- productModelId: id,
- routeId: props.record.id,
- // id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
- processId: undefined,
- dragSort: maxDragSort + index + 1,
- }));
-
- console.log("閫夋嫨浜у搧鍓嶆暟缁�:", routeItems.value);
- routeItems.value.push(...newData);
- updateDragSort();
- console.log("閫夋嫨浜у搧鍚庢暟缁�:", routeItems.value);
-
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
- nextTick(() => {
- // 寮哄埗閲嶆柊娓叉煋缁勪欢
- if (proxy?.$forceUpdate) {
- proxy.$forceUpdate();
- }
-
- const temp = [...routeItems.value];
- routeItems.value = [];
- nextTick(() => {
- routeItems.value = temp;
- initSortable();
- });
- });
- };
-
- const findProcessRouteItems = () => {
- tableLoading.value = true;
- findProductProcessRouteItemList({ orderId: props.record.id })
- .then(res => {
- tableLoading.value = false;
- routeItems.value = res.data.map(item => ({
- ...item,
- processId: item.processId === 0 ? undefined : item.processId,
- }));
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
- });
- })
- .catch(err => {
- tableLoading.value = false;
- console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
- });
- };
-
- const findProcessList = () => {
- processList({})
- .then(res => {
- processOptions.value = res.data;
- })
- .catch(err => {
- console.error("鑾峰彇宸ュ簭澶辫触锛�", err);
- });
- };
-
- const { proxy } = getCurrentInstance() || {};
-
- const handleSubmit = () => {
- const hasEmptyProcess = routeItems.value.some(item => !item.processId);
- if (hasEmptyProcess) {
- proxy?.$modal?.msgError("璇蜂负鎵�鏈夐」鐩�夋嫨宸ュ簭");
- return;
- }
-
- addOrUpdateProductProcessRouteItem({
- routeId: props.record.id,
- processRouteItem: routeItems.value,
- })
- .then(res => {
- isShow.value = false;
- emit("completed");
- proxy?.$modal?.msgSuccess("鎻愪氦鎴愬姛");
- })
- .catch(err => {
- proxy?.$modal?.msgError(`鎻愪氦澶辫触锛�${err.msg || "缃戠粶寮傚父"}`);
- });
- };
-
- const destroySortable = () => {
- if (tableSortable) {
- tableSortable.destroy();
- tableSortable = null;
- }
- if (stepsSortable) {
- stepsSortable.destroy();
- stepsSortable = null;
- }
- };
-
- const initSortable = () => {
- destroySortable();
-
- if (isTable.value) {
- if (!multipleTable.value) return;
- const tbody =
- multipleTable.value.$el.querySelector(".el-table__body tbody") ||
- multipleTable.value.$el.querySelector(
- ".el-table__body-wrapper > table > tbody"
- );
- if (!tbody) return;
-
- tableSortable = new Sortable(tbody, {
- animation: 150,
- ghostClass: "sortable-ghost",
- handle: ".el-table__row",
- filter: ".el-button, .el-select",
- onEnd: evt => {
- if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex])
- return;
-
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭锛屼笌琛ㄦ牸妯″紡淇濇寔涓�鑷�
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- updateDragSort();
- console.log("鎺掑簭鍚庢暟缁�:", routeItems.value);
- },
- });
- } else {
- if (!stepsContainer.value) return;
-
- // 淇敼锛氱洿鎺ヤ娇鐢╯tepsContainer.value浣滀负鎷栨嫿瀹瑰櫒
- const stepsList = stepsContainer.value;
- if (!stepsList) {
- console.warn("鏈壘鍒版楠ゆ潯鎷栨嫿瀹瑰櫒");
- return;
- }
-
- // 淇敼锛氱畝鍖栨嫋鎷介厤缃�
- stepsSortable = new Sortable(stepsList, {
- animation: 150,
- ghostClass: "sortable-ghost",
- draggable: ".draggable-step", // 鍙嫋鎷藉厓绱�
- handle: ".draggable-step, .step-card", // 鎷栨嫿鎵嬫焺
- filter: ".el-button, .el-select, .el-input", // 杩囨护鎸夐挳/閫夋嫨鍣�
- forceFallback: true,
- fallbackClass: "sortable-fallback",
- preventOnFilter: true,
- scroll: true,
- scrollSensitivity: 30,
- scrollSpeed: 10,
- bubbleScroll: true,
- onEnd: evt => {
- if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex])
- return;
-
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- updateDragSort();
- },
- });
-
- // 璋冭瘯锛氭墦鍗板鍣ㄥ拰瀹炰緥锛岀‘璁ょ粦瀹氭垚鍔�
- console.log("姝ラ鏉℃嫋鎷藉鍣�:", stepsList);
- console.log("Sortable瀹炰緥:", stepsSortable);
- }
- };
-
- const handleViewChange = () => {
- destroySortable();
- // 寤惰繜鍒濆鍖栵紝纭繚瑙嗗浘鍒囨崲鍚嶥OM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
- });
- };
-
- onMounted(() => {
- findProcessRouteItems();
- findProcessList();
- });
-
- onUnmounted(() => {
- destroySortable();
- });
-
- defineExpose({
- closeModal,
- handleSubmit,
- isShow,
- });
-</script>
-
-<style scoped>
- :deep(.sortable-ghost) {
- opacity: 0.6;
- background-color: #f5f7fa !important;
- }
-
- :deep(.el-table__row) {
- transition: background-color 0.2s;
- }
-
- :deep(.el-table__row:hover) {
- background-color: #f9fafc !important;
- }
-
- :deep(.el-card__footer) {
- padding: 0 !important;
- }
-
- .operate-button {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- /* 淇敼锛氳嚜瀹氫箟姝ラ鏉″鍣ㄦ牱寮� */
- .custom-steps {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
- gap: 20px;
- min-height: 100px;
- }
-
- /* 淇敼锛氳嚜瀹氫箟姝ラ椤规牱寮� */
- .custom-step {
- cursor: move !important;
- padding: 8px;
- position: relative;
- transition: all 0.2s ease;
- flex: 0 0 auto;
- min-width: 220px;
- touch-action: none;
- }
-
- /* 鎷栨嫿鎮诞鏍峰紡锛屾彁绀哄彲鎷栨嫿 */
- .custom-step:hover {
- background-color: rgba(64, 158, 255, 0.05);
- transform: translateY(-2px);
- }
-
- .sortable-ghost {
- opacity: 0.4;
- background-color: #f5f7fa !important;
- border: 2px dashed #409eff;
- margin: 10px;
- transform: scale(1.02);
- }
-
- .sortable-fallback {
- opacity: 0.9;
- background-color: #f5f7fa;
- border: 1px solid #409eff;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
- transform: rotate(2deg);
- margin: 10px;
- }
-
- .step-card {
- cursor: move !important;
- transition: box-shadow 0.2s ease;
- user-select: none;
- -webkit-user-select: none;
- pointer-events: auto;
- margin: 10px;
- height: 240px;
- }
-
- .step-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
- }
-
- .step-content {
- width: 220px;
- user-select: none;
- }
-
- .step-card-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .step-card-footer {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 10px;
- }
-
- /* 鑷畾涔夊簭鍙锋牱寮忎紭鍖� */
- .step-number {
- font-weight: bold;
- text-align: center;
- width: 36px;
- height: 36px;
- line-height: 36px;
- margin: 0 auto 10px;
- background: #409eff;
- color: #fff;
- border-radius: 50%;
- font-size: 14px;
- }
-</style>
diff --git a/src/views/productionManagement/productionOrder/index.vue b/src/views/productionManagement/productionOrder/index.vue
index df7f950..9250eb8 100644
--- a/src/views/productionManagement/productionOrder/index.vue
+++ b/src/views/productionManagement/productionOrder/index.vue
@@ -8,7 +8,7 @@
placeholder="璇疯緭鍏�"
clearable
prefix-icon="Search"
- style="width: 200px;"
+ style="width: 160px;"
@change="handleQuery" />
</el-form-item>
<el-form-item label="鍚堝悓鍙�:">
@@ -16,7 +16,7 @@
placeholder="璇疯緭鍏�"
clearable
prefix-icon="Search"
- style="width: 200px;"
+ style="width: 160px;"
@change="handleQuery" />
</el-form-item>
<el-form-item label="浜у搧鍚嶇О:">
@@ -24,7 +24,7 @@
placeholder="璇疯緭鍏�"
clearable
prefix-icon="Search"
- style="width: 200px;"
+ style="width: 160px;"
@change="handleQuery" />
</el-form-item>
<el-form-item label="瑙勬牸:">
@@ -32,7 +32,7 @@
placeholder="璇疯緭鍏�"
clearable
prefix-icon="Search"
- style="width: 200px;"
+ style="width: 160px;"
@change="handleQuery" />
</el-form-item>
<el-form-item>
@@ -50,12 +50,41 @@
:tableData="tableData"
:page="page"
:tableLoading="tableLoading"
- @pagination="pagination"></PIMTable>
+ @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>
- <process-route-item-form v-if="isShowItemModal"
- v-model:visible="isShowItemModal"
- :record="record"
- @completed="getList" />
+ <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>
</div>
</template>
@@ -63,30 +92,75 @@
import { onMounted, ref } from "vue";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
- import { productOrderListPage } from "@/api/productionManagement/productionOrder.js";
+ 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 ProcessRouteItemForm from "@/views/productionManagement/productionOrder/ProcessRouteItemForm.vue";
+
+ const router = useRouter();
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: '140px',
+ },
+ {
+ 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,
},
{
dataType: "action",
@@ -100,6 +174,21 @@
type: "text",
clickFun: row => {
showRouteItemModal(row);
+ },
+ },
+ {
+ name: "缁戝畾宸ヨ壓璺嚎",
+ type: "text",
+ showHide: row => !row.processRouteCode,
+ clickFun: row => {
+ openBindRouteDialog(row);
+ },
+ },
+ {
+ name: "浜у搧缁撴瀯",
+ type: "text",
+ clickFun: row => {
+ showProductStructure(row);
},
},
],
@@ -123,6 +212,77 @@
},
});
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 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 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;
+ }
+ };
// 鏌ヨ鍒楄〃
/** 鎼滅储鎸夐挳鎿嶄綔 */
@@ -161,11 +321,46 @@
});
};
- const isShowItemModal = ref(false);
- const record = ref({});
- const showRouteItemModal = row => {
- isShowItemModal.value = true;
- record.value = row;
+ 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 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",
+ },
+ });
};
// 瀵煎嚭
@@ -176,7 +371,7 @@
type: "warning",
})
.then(() => {
- proxy.download("/salesLedger/scheduling/export", {}, "鐢熶骇璁㈠崟.xlsx");
+ proxy.download("/productOrder/export", {...searchForm.value}, "鐢熶骇璁㈠崟.xlsx");
})
.catch(() => {
proxy.$modal.msg("宸插彇娑�");
@@ -190,4 +385,7 @@
});
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.search_form{
+ align-items: start;
+}</style>
diff --git a/src/views/productionManagement/productionProcess/Edit.vue b/src/views/productionManagement/productionProcess/Edit.vue
index 31e3109..f979d51 100644
--- a/src/views/productionManagement/productionProcess/Edit.vue
+++ b/src/views/productionManagement/productionProcess/Edit.vue
@@ -22,6 +22,9 @@
]">
<el-input v-model="formState.name" />
</el-form-item>
+ <el-form-item label="宸ュ簭缂栧彿" prop="no">
+ <el-input v-model="formState.no" />
+ </el-form-item>
<el-form-item label="宸ヨ祫瀹氶" prop="salaryQuota">
<el-input v-model="formState.salaryQuota" type="number" :step="0.001" />
</el-form-item>
@@ -40,7 +43,7 @@
</template>
<script setup>
-import { ref, computed, getCurrentInstance } from "vue";
+import { ref, computed, getCurrentInstance, watch } from "vue";
import {update} from "@/api/productionManagement/productionProcess.js";
const props = defineProps({
@@ -61,6 +64,7 @@
const formState = ref({
id: props.record.id,
name: props.record.name,
+ no: props.record.no,
remark: props.record.remark,
salaryQuota: props.record.salaryQuota,
});
@@ -74,6 +78,32 @@
},
});
+// 鐩戝惉 record 鍙樺寲锛屾洿鏂拌〃鍗曟暟鎹�
+watch(() => props.record, (newRecord) => {
+ if (newRecord && isShow.value) {
+ formState.value = {
+ id: newRecord.id,
+ name: newRecord.name || '',
+ no: newRecord.no || '',
+ remark: newRecord.remark || '',
+ salaryQuota: newRecord.salaryQuota || '',
+ };
+ }
+}, { immediate: true, deep: true });
+
+// 鐩戝惉寮圭獥鎵撳紑锛岄噸鏂板垵濮嬪寲琛ㄥ崟鏁版嵁
+watch(() => props.visible, (visible) => {
+ if (visible && props.record) {
+ formState.value = {
+ id: props.record.id,
+ name: props.record.name || '',
+ no: props.record.no || '',
+ remark: props.record.remark || '',
+ salaryQuota: props.record.salaryQuota || '',
+ };
+ }
+});
+
let { proxy } = getCurrentInstance()
const closeModal = () => {
diff --git a/src/views/productionManagement/productionProcess/New.vue b/src/views/productionManagement/productionProcess/New.vue
index a73a755..7558ba7 100644
--- a/src/views/productionManagement/productionProcess/New.vue
+++ b/src/views/productionManagement/productionProcess/New.vue
@@ -22,6 +22,9 @@
]">
<el-input v-model="formState.name" />
</el-form-item>
+ <el-form-item label="宸ュ簭缂栧彿" prop="no">
+ <el-input v-model="formState.no" />
+ </el-form-item>
<el-form-item label="宸ヨ祫瀹氶" prop="salaryQuota">
<el-input v-model="formState.salaryQuota" type="number" :step="0.001" />
</el-form-item>
diff --git a/src/views/productionManagement/productionProcess/index.vue b/src/views/productionManagement/productionProcess/index.vue
index ea2a341..7ab8c9a 100644
--- a/src/views/productionManagement/productionProcess/index.vue
+++ b/src/views/productionManagement/productionProcess/index.vue
@@ -30,6 +30,7 @@
class="mb10">
<el-button type="primary"
@click="showNewModal">鏂板宸ュ簭</el-button>
+ <el-button type="info" plain @click="handleImport">瀵煎叆</el-button>
<el-button type="danger"
@click="handleDelete"
:disabled="selectedRows.length === 0"
@@ -52,14 +53,29 @@
v-model:visible="isShowEditModal"
:record="record"
@completed="getList" />
+ <ImportDialog
+ ref="importDialogRef"
+ v-model="importDialogVisible"
+ title="瀵煎叆宸ュ簭"
+ :action="importAction"
+ :headers="importHeaders"
+ :auto-upload="false"
+ :on-success="handleImportSuccess"
+ :on-error="handleImportError"
+ @confirm="handleImportConfirm"
+ @download-template="handleDownloadTemplate"
+ @close="handleImportClose"
+ />
</div>
</template>
<script setup>
- import { onMounted, ref } from "vue";
+ import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
import NewProcess from "@/views/productionManagement/productionProcess/New.vue";
import EditProcess from "@/views/productionManagement/productionProcess/Edit.vue";
- import { listPage, del } from "@/api/productionManagement/productionProcess.js";
+ import ImportDialog from "@/components/Dialog/ImportDialog.vue";
+ import { listPage, del, importData, downloadTemplate } from "@/api/productionManagement/productionProcess.js";
+ import { getToken } from "@/utils/auth";
const data = reactive({
searchForm: {
@@ -70,13 +86,14 @@
const { searchForm } = toRefs(data);
const tableColumn = ref([
{
- label: "宸ュ簭鍚嶇О",
- prop: "name",
- },
- {
label: "宸ュ簭缂栧彿",
prop: "no",
},
+ {
+ label: "宸ュ簭鍚嶇О",
+ prop: "name",
+ },
+
{
label: "宸ヨ祫瀹氶",
prop: "salaryQuota",
@@ -84,6 +101,10 @@
{
label: "澶囨敞",
prop: "remark",
+ },
+ {
+ label: "鏇存柊鏃堕棿",
+ prop: "updateTime",
},
{
dataType: "action",
@@ -108,12 +129,18 @@
const isShowNewModal = ref(false);
const isShowEditModal = ref(false);
const record = ref({});
+ const importDialogVisible = ref(false);
+ const importDialogRef = ref(null);
const page = reactive({
current: 1,
size: 100,
total: 0,
});
const { proxy } = getCurrentInstance();
+
+ // 瀵煎叆鐩稿叧閰嶇疆
+ const importAction = import.meta.env.VITE_APP_BASE_API + "/productProcess/importData";
+ const importHeaders = { Authorization: "Bearer " + getToken() };
// 鏌ヨ鍒楄〃
/** 鎼滅储鎸夐挳鎿嶄綔 */
@@ -195,6 +222,63 @@
}
}
+ // 瀵煎叆
+ const handleImport = () => {
+ importDialogVisible.value = true;
+ };
+
+ // 纭瀵煎叆
+ const handleImportConfirm = () => {
+ if (importDialogRef.value) {
+ importDialogRef.value.submit();
+ }
+ };
+
+ // 瀵煎叆鎴愬姛
+ const handleImportSuccess = (response) => {
+ if (response.code === 200) {
+ proxy.$modal.msgSuccess("瀵煎叆鎴愬姛");
+ importDialogVisible.value = false;
+ if (importDialogRef.value) {
+ importDialogRef.value.clearFiles();
+ }
+ getList();
+ } else {
+ proxy.$modal.msgError(response.msg || "瀵煎叆澶辫触");
+ }
+ };
+
+ // 瀵煎叆澶辫触
+ const handleImportError = (error) => {
+ proxy.$modal.msgError("瀵煎叆澶辫触锛�" + (error.message || "鏈煡閿欒"));
+ };
+
+ // 鍏抽棴瀵煎叆寮圭獥
+ const handleImportClose = () => {
+ if (importDialogRef.value) {
+ importDialogRef.value.clearFiles();
+ }
+ };
+
+ // 涓嬭浇妯℃澘
+ const handleDownloadTemplate = async () => {
+ try {
+ const res = await downloadTemplate();
+ const blob = new Blob([res], {
+ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+ });
+ const url = window.URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = "宸ュ簭瀵煎叆妯℃澘.xlsx";
+ link.click();
+ window.URL.revokeObjectURL(url);
+ proxy.$modal.msgSuccess("妯℃澘涓嬭浇鎴愬姛");
+ } catch (error) {
+ proxy.$modal.msgError("妯℃澘涓嬭浇澶辫触");
+ }
+ };
+
// 瀵煎嚭
// const handleOut = () => {
// ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚鍑猴紝鏄惁纭瀵煎嚭锛�", "瀵煎嚭", {
diff --git a/src/views/productionManagement/productionReporting/Input.vue b/src/views/productionManagement/productionReporting/Input.vue
index 7959848..3ba68f7 100644
--- a/src/views/productionManagement/productionReporting/Input.vue
+++ b/src/views/productionManagement/productionReporting/Input.vue
@@ -59,13 +59,21 @@
prop: 'productNo',
},
{
- label: '浜у搧鍨嬪彿',
+ label: '鎶曞叆浜у搧鍚嶇О',
+ prop: 'productName',
+ },
+ {
+ label: '鎶曞叆浜у搧鍨嬪彿',
prop: 'model',
},
{
label: '鎶曞叆鏁伴噺',
prop: 'quantity',
},
+ {
+ label: '鍗曚綅',
+ prop: 'unit',
+ },
]
const isShow = computed({
diff --git a/src/views/productionManagement/productionReporting/index.vue b/src/views/productionManagement/productionReporting/index.vue
index b34b14e..f4137af 100644
--- a/src/views/productionManagement/productionReporting/index.vue
+++ b/src/views/productionManagement/productionReporting/index.vue
@@ -115,7 +115,7 @@
</template>
</el-table-column>
<el-table-column label="鎿嶄綔"
- width="60">
+ >
<template #default="scope">
<el-button link
type="primary"
@@ -139,9 +139,6 @@
<input-modal v-if="isShowInput"
v-model:visible="isShowInput"
:production-product-main-id="isShowingId" />
- <output-modal v-if="isShowOutput"
- v-model:visible="isShowOutput"
- :production-product-main-id="isShowingId" />
</div>
</template>
@@ -157,7 +154,6 @@
import { productionProductMainListPage } from "@/api/productionManagement/productionProductMain.js";
import { userListNoPageByTenantId } from "@/api/system/user.js";
import InputModal from "@/views/productionManagement/productionReporting/Input.vue";
- import OutputModal from "@/views/productionManagement/productionReporting/Output.vue";
const data = reactive({
searchForm: {
@@ -187,92 +183,52 @@
width: 120,
},
{
- label: "鎶ュ伐鐘舵��",
- prop: "status",
- dataType: "tag",
- formatData: params => {
- if (params == 3) {
- return "宸叉姤宸�";
- } else if (params == 1) {
- return "寰呯敓浜�";
- } else {
- return "鐢熶骇涓�";
- }
- },
- formatType: params => {
- if (params == 3) {
- return "success";
- } else if (params == 1) {
- return "primary";
- } else {
- return "warning";
- }
- },
+ label: "閿�鍞悎鍚屽彿",
+ prop: "salesContractNo",
+ width: 120,
},
{
- label: "宸ュ崟鐘舵��",
- prop: "workOrderStatus",
- dataType: "tag",
- formatData: params => {
- switch (params) {
- case "1":
- return "寰呯‘璁�";
- case "2":
- return "寰呯敓浜�";
- case "3":
- return "鐢熶骇涓�";
- case "4":
- return "宸茬敓浜�";
- default:
- return "";
- }
- },
- formatType: params => {
- switch (params) {
- case "1":
- return "primary";
- case "2":
- return "info";
- case "3":
- return "warning";
- case "4":
- return "success";
- default:
- return "";
- }
- },
+ label: "浜у搧鍚嶇О",
+ prop: "productName",
+ width: 120,
},
{
- label: "鐢熶骇鏃堕棿",
+ label: "浜у搧瑙勬牸鍨嬪彿",
+ prop: "productModelName",
+ width: 120,
+ },
+ {
+ label: "浜у嚭鏁伴噺",
+ prop: "quantity",
+ width: 120,
+ },
+ // {
+ // label: "鎶ュ簾鏁伴噺",
+ // prop: "scrapQuantity",
+ // width: 120,
+ // },
+ {
+ label: "鍗曚綅",
+ prop: "unit",
+ width: 120,
+ },
+
+ {
+ label: "鍒涘缓鏃堕棿",
prop: "createTime",
width: 120,
- formatData: params => {
- const date = new Date(params);
- return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
- 2,
- "0"
- )}-${String(date.getDate()).padStart(2, "0")}`;
- },
},
{
dataType: "action",
label: "鎿嶄綔",
align: "center",
fixed: "right",
- width: 230,
operation: [
{
name: "鏌ョ湅鎶曞叆",
type: "text",
clickFun: row => {
showInput(row);
- },
- },
- {
- name: "鏌ョ湅浜у嚭",
- type: "text",
- clickFun: row => {
- showOutput(row);
},
},
{
@@ -449,13 +405,6 @@
const isShowingId = ref(0);
const showInput = row => {
isShowInput.value = true;
- isShowingId.value = row.id;
- };
-
- // 鎵撳紑浜у嚭妯℃�佹
- const isShowOutput = ref(false);
- const showOutput = row => {
- isShowOutput.value = true;
isShowingId.value = row.id;
};
diff --git a/src/views/productionManagement/workOrder/index.vue b/src/views/productionManagement/workOrder/index.vue
index 34b368d..f5d2bc1 100644
--- a/src/views/productionManagement/workOrder/index.vue
+++ b/src/views/productionManagement/workOrder/index.vue
@@ -23,7 +23,11 @@
:tableData="tableData"
:page="page"
:tableLoading="tableLoading"
- @pagination="pagination"></PIMTable>
+ @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="editDialogVisible"
title="缂栬緫鏃堕棿"
@@ -90,7 +94,7 @@
<span class="info-label">浜у搧瑙勬牸</span>
<span class="info-value">{{ transferCardRowData.model }}</span>
</div>
- <div class="info-item">
+ <!-- <div class="info-item">
<span class="info-label">宸ュ崟鐘舵��</span>
<span class="info-value">{{
transferCardRowData.status === 1 ? '寰呯‘璁�' :
@@ -99,7 +103,8 @@
transferCardRowData.status === 4 ? '宸茬敓浜�' :
transferCardRowData.status
}}</span>
- </div>
+ </div> -->
+
<div class="info-item">
<span class="info-label">璁″垝寮�濮嬫椂闂�</span>
<span class="info-value">{{ transferCardRowData.planStartTime }}</span>
@@ -115,12 +120,12 @@
</div>
<div class="info-group">
<div class="info-item">
- <span class="info-label"> </span>
- <span class="info-value"> </span>
+ <span class="info-label">闇�姹傛暟閲�</span>
+ <span class="info-value">{{ transferCardRowData.planQuantity }}</span>
</div>
<div class="info-item">
- <span class="info-label">璁″垝鏁伴噺</span>
- <span class="info-value">{{ transferCardRowData.planQuantity }}</span>
+ <span class="info-label">瀹屾垚鏁伴噺</span>
+ <span class="info-value">{{ transferCardRowData.completeQuantity }}</span>
</div>
<div class="info-item">
<span class="info-label">鑹搧鏁伴噺</span>
@@ -176,10 +181,17 @@
placeholder="璇疯緭鍏ユ湰娆＄敓浜ф暟閲�" />
</el-form-item>
<el-form-item label="鐝粍淇℃伅">
- <el-input v-model="reportForm.userName"
- style="width: 300px"
- readonly
- placeholder="璇疯緭鍏ョ彮缁勪俊鎭�" />
+ <el-select v-model="reportForm.userId"
+ style="width: 300px"
+ placeholder="璇烽�夋嫨鐝粍淇℃伅"
+ clearable
+ filterable
+ @change="handleUserChange">
+ <el-option v-for="user in userOptions"
+ :key="user.userId"
+ :label="user.userName"
+ :value="user.userId" />
+ </el-select>
</el-form-item>
</el-form>
<template #footer>
@@ -202,7 +214,7 @@
updateProductWorkOrder,
addProductMain,
} from "@/api/productionManagement/workOrder.js";
- import { getUserProfile } from "@/api/system/user.js";
+ import { getUserProfile, userListNoPageByTenantId } from "@/api/system/user.js";
import QRCode from "qrcode";
import { getCurrentInstance, reactive, toRefs } from "vue";
const { proxy } = getCurrentInstance();
@@ -236,13 +248,20 @@
prop: "processName",
},
{
- label: "寰呯敓浜ф暟閲�",
+ label: "闇�姹傛暟閲�",
prop: "planQuantity",
width: "140",
},
{
- label: "璁″垝鐢熶骇鏁伴噺",
- prop: "quantity",
+ label: "瀹屾垚鏁伴噺",
+ prop: "completeQuantity",
+ width: "140",
+ },
+ {
+ label: "瀹屾垚杩涘害",
+ prop: "completionStatus",
+ dataType: "slot",
+ slot: "completionStatus",
width: "140",
},
{
@@ -304,6 +323,7 @@
const transferCardQrUrl = ref("");
const transferCardRowData = ref(null);
const reportDialogVisible = ref(false);
+ const userOptions = ref([]);
const reportForm = reactive({
planQuantity: 0,
quantity: 0,
@@ -327,6 +347,20 @@
},
});
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 progressColor = percentage => {
+ const p = toProgressPercentage(percentage);
+ if (p < 30) return "#f56c6c";
+ if (p < 50) return "#e6a23c";
+ if (p < 80) return "#409eff";
+ return "#67c23a";
+ };
let editrow = ref(null);
// 鏌ヨ鍒楄〃
@@ -356,9 +390,7 @@
const showTransferCard = async row => {
transferCardRowData.value = row;
- const qrContent =
- proxy.javaApi + "/work-order?orderRow=" + JSON.stringify(row);
- console.log(qrContent, "qrContent");
+ const qrContent = String(row.id);
transferCardQrUrl.value = await QRCode.toDataURL(qrContent);
transferCardVisible.value = true;
@@ -395,7 +427,17 @@
reportForm.workOrderId = row.id;
reportForm.reportWork = row.reportWork;
reportForm.productMainId = row.productMainId;
- // 鑾峰彇褰撳墠鐧诲綍鐢ㄦ埛淇℃伅
+ // 鑾峰彇褰撳墠鐧诲綍鐢ㄦ埛淇℃伅锛岃缃负榛樿閫変腑
+ getUserProfile()
+ .then(res => {
+ if (res.code === 200) {
+ reportForm.userId = res.data.userId;
+ reportForm.userName = res.data.userName;
+ }
+ })
+ .catch(err => {
+ console.error("鑾峰彇鐢ㄦ埛淇℃伅澶辫触", err);
+ });
reportDialogVisible.value = true;
};
@@ -433,18 +475,34 @@
});
};
- onMounted(() => {
- getList();
- getUserProfile()
+ // 鑾峰彇鐢ㄦ埛鍒楄〃
+ const getUserList = () => {
+ userListNoPageByTenantId()
.then(res => {
if (res.code === 200) {
- reportForm.userName = res.data.userName;
- reportForm.userId = res.data.userId;
+ userOptions.value = res.data || [];
}
})
.catch(err => {
- console.error("鑾峰彇鐢ㄦ埛淇℃伅澶辫触", err);
+ console.error("鑾峰彇鐢ㄦ埛鍒楄〃澶辫触", err);
});
+ };
+
+ // 鐢ㄦ埛閫夋嫨鍙樺寲鏃舵洿鏂� userName
+ const handleUserChange = (userId) => {
+ if (userId) {
+ const selectedUser = userOptions.value.find(user => user.userId === userId);
+ if (selectedUser) {
+ reportForm.userName = selectedUser.userName;
+ }
+ } else {
+ reportForm.userName = "";
+ }
+ };
+
+ onMounted(() => {
+ getList();
+ getUserList();
});
</script>
--
Gitblit v1.9.3