From 01074a91da735e1061b8004c1cbb4991cd8f4931 Mon Sep 17 00:00:00 2001 From: user Date: Tue, 15 Apr 2025 23:17:40 +0800 Subject: [PATCH] =?UTF-8?q?refactor(style-edit):=20=E6=9B=B4=E6=96=B0vxe-t?= =?UTF-8?q?able=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E4=BF=9D=E5=AD=98=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将vxe-table的编辑模式从'cell'改为'row'，并更新了相关依赖版本。优化了保存逻辑，确保数据提交后自动刷新表格数据 --- package-lock.json | 26 ++++----- package.json | 4 +- .../app/orders/style/style-edit.component.ts | 57 ++++++++++--------- .../webapp/app/orders/style/style-edit.vue | 7 +-- 4 files changed, 46 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index ffa0f6b..3896207 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,8 +34,8 @@ "vue-i18n": "11.1.0", "vue-router": "4.5.0", "vue-web-cam": "^1.9.0", - "vxe-pc-ui": "^4.4.21", - "vxe-table": "^4.11.28", + "vxe-pc-ui": "^4.5.22", + "vxe-table": "^4.13.3", "xe-utils": "^3.7.4" }, "devDependencies": { @@ -4365,9 +4365,9 @@ } }, "node_modules/@vxe-ui/core": { - "version": "4.0.38", - "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.0.38.tgz", - "integrity": "sha512-zQHcYUUsMUiDNi5buxP9AIz9Ru2BK5JXkKmtGZ5gjdr/nF8Nm/jcMcAdZXDmYAryn1BLka+ZTq83G++HkfWdBg==", + "version": "4.0.39", + "resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.0.39.tgz", + "integrity": "sha512-7lRfmnh6fAjbuKxQ1NcJVQ4Z8bXDYHtnTrzvUGREf3CsXu/PzUoyArHhOJH6yRmiNBfk29CCqVhiRsv4ngSViQ==", "license": "MIT", "dependencies": { "dom-zindex": "^1.0.6", @@ -13811,21 +13811,21 @@ } }, "node_modules/vxe-pc-ui": { - "version": "4.4.21", - "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.4.21.tgz", - "integrity": "sha512-g877IT/oXQH4MCnLEh+YZU0xQ+952X3OqktuQkuvQeqv+UgIQyK6eODiNAp9JdFhEcZPzfoUZMjjZt9eXpeqBg==", + "version": "4.5.22", + "resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.5.22.tgz", + "integrity": "sha512-SfVFZsqZch7vY8uf0Tx31n0emWdLVAB1CXpsl/58uoGfw2QWS2CaDVPWqP3E06lYeH8q+DkcBfYoXyXR1VkkgA==", "license": "MIT", "dependencies": { - "@vxe-ui/core": "^4.0.38" + "@vxe-ui/core": "^4.0.39" } }, "node_modules/vxe-table": { - "version": "4.11.28", - "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.11.28.tgz", - "integrity": "sha512-kp6qEAqVuMK1QinLK4xoPPzwAKZVEokYVLLJY3r+X7dtvRSi4c2YOJ7gdBZ9TJX1DDKmTYPZI9r4IR/MUoIaaA==", + "version": "4.13.3", + "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.13.3.tgz", + "integrity": "sha512-tc7EQ/YKSZcv4gVbGObbYws9a/Ium+u+8dkrcv1oKyur9wL9aRtG04/MIjuvhrgw1H+I0YgsjttT3j6mTdNR3g==", "license": "MIT", "dependencies": { - "vxe-pc-ui": "^4.4.19" + "vxe-pc-ui": "^4.5.22" } }, "node_modules/wait-on": { diff --git a/package.json b/package.json index 6b2ac29..db2f1c4 100644 --- a/package.json +++ b/package.json @@ -102,8 +102,8 @@ "vue-i18n": "11.1.0", "vue-router": "4.5.0", "vue-web-cam": "^1.9.0", - "vxe-pc-ui": "^4.4.21", - "vxe-table": "^4.11.28", + "vxe-pc-ui": "^4.5.22", + "vxe-table": "^4.13.3", "xe-utils": "^3.7.4" }, "devDependencies": { diff --git a/src/main/webapp/app/orders/style/style-edit.component.ts b/src/main/webapp/app/orders/style/style-edit.component.ts index 59b1d4c..cabad6b 100644 --- a/src/main/webapp/app/orders/style/style-edit.component.ts +++ b/src/main/webapp/app/orders/style/style-edit.component.ts @@ -63,18 +63,18 @@ export default defineComponent({ { field: 'process', title: 'jewpmsApp.style.base.process', - editRender: { name: 'select', options: processTypes, optionProps: { value: 'number', label: 'name' } }, + editRender: { name: 'VxeSelect', options: processTypes, optionProps: { value: 'number', label: 'name' } }, }, - { field: 'material', title: 'jewpmsApp.style.base.material', editRender: { name: 'input', autoSelect: true } }, - { field: 'setGroup', title: 'jewpmsApp.style.base.setGroup', editRender: { name: 'input' } }, - { field: 'quantity', title: 'jewpmsApp.style.base.quantity', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'weight', title: 'jewpmsApp.style.base.weight', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'custPrice', title: 'jewpmsApp.style.base.custPrice', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'costPrice', title: 'jewpmsApp.style.base.costPrice', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'custLabor', title: 'jewpmsApp.style.base.custLabor', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'costLabor', title: 'jewpmsApp.style.base.costLabor', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'unitHour', title: 'jewpmsApp.style.base.unitHour', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'remark', title: 'jewpmsApp.style.base.remark', editRender: { name: 'input' } }, + { field: 'material', title: 'jewpmsApp.style.base.material', editRender: { name: 'VxeInput', immediate: true, autoselect: true } }, + { field: 'setGroup', title: 'jewpmsApp.style.base.setGroup', editRender: { name: 'VxeInput', immediate: true, autoselect: true } }, + { field: 'quantity', title: 'jewpmsApp.style.base.quantity', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'weight', title: 'jewpmsApp.style.base.weight', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'custPrice', title: 'jewpmsApp.style.base.custPrice', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'costPrice', title: 'jewpmsApp.style.base.costPrice', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'custLabor', title: 'jewpmsApp.style.base.custLabor', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'costLabor', title: 'jewpmsApp.style.base.costLabor', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'unitHour', title: 'jewpmsApp.style.base.unitHour', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'remark', title: 'jewpmsApp.style.base.remark', editRender: { name: 'VxeInput', immediate: true, autoselect: true } }, { title: 'entity.action.actions', width: 100 }, ]; @@ -84,18 +84,18 @@ export default defineComponent({ { field: 'process', title: 'jewpmsApp.style.setting.process', - editRender: { name: 'select', options: settingTypes, optionProps: { value: 'number', label: 'name' } }, + editRender: { name: 'VxeSelect', options: settingTypes, optionProps: { value: 'number', label: 'name' } }, }, - { field: 'material', title: 'jewpmsApp.style.setting.material', editRender: { name: 'input', autoSelect: true } }, - { field: 'setGroup', title: 'jewpmsApp.style.setting.setGroup', editRender: { name: 'input' } }, - { field: 'quantity', title: 'jewpmsApp.style.setting.quantity', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'weight', title: 'jewpmsApp.style.setting.weight', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'custPrice', title: 'jewpmsApp.style.setting.custPrice', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'costPrice', title: 'jewpmsApp.style.setting.costPrice', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'custLabor', title: 'jewpmsApp.style.setting.custLabor', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'costLabor', title: 'jewpmsApp.style.setting.costLabor', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'unitHour', title: 'jewpmsApp.style.setting.unitHour', editRender: { name: 'input', props: { type: 'number' } } }, - { field: 'remark', title: 'jewpmsApp.style.setting.remark', editRender: { name: 'input' } }, + { field: 'material', title: 'jewpmsApp.style.setting.material', editRender: { name: 'input', immediate: true, autoselect: true } }, + { field: 'setGroup', title: 'jewpmsApp.style.setting.setGroup', editRender: { name: 'input', immediate: true, autoselect: true } }, + { field: 'quantity', title: 'jewpmsApp.style.setting.quantity', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'weight', title: 'jewpmsApp.style.setting.weight', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'custPrice', title: 'jewpmsApp.style.setting.custPrice', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'costPrice', title: 'jewpmsApp.style.setting.costPrice', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'custLabor', title: 'jewpmsApp.style.setting.custLabor', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'costLabor', title: 'jewpmsApp.style.setting.costLabor', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'unitHour', title: 'jewpmsApp.style.setting.unitHour', editRender: { name: 'VxeNumberInput', autoselect: true } }, + { field: 'remark', title: 'jewpmsApp.style.setting.remark', editRender: { name: 'input', immediate: true, autoselect: true } }, { title: 'entity.action.actions', width: 100 }, ]; @@ -315,18 +315,19 @@ export default defineComponent({ const saveDtlEvent = async row => { try { - // 保存行数据到数据库 - console.log(row); - await axios.put(`api/styledtls/${row.id}`, row); // 提交编辑状态 let $table = baseRef.value; if (activeTab.value === 'setting') $table = settingRef.value; if ($table) { - await $table.clearEdit(); + $table.clearEdit().then(() => { + axios.put(`api/styledtls/${row.id}`, row); + setTimeout(() => { + // 刷新数据 + loadStyleDtls(); + }, 300); + }); } alertService.showInfo(t$('jewpmsApp.style.updated', { param: row.name || row.process })); - // 刷新数据 - await loadStyleDtls(); } catch (e) { alertService.showHttpError(e); } diff --git a/src/main/webapp/app/orders/style/style-edit.vue b/src/main/webapp/app/orders/style/style-edit.vue index 5c2751f..11b20af 100644 --- a/src/main/webapp/app/orders/style/style-edit.vue +++ b/src/main/webapp/app/orders/style/style-edit.vue @@ -135,7 +135,7 @@ :data="baseDtls" stripe keepSource - :edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false, showStatus: true }" + :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showStatus: true }" > {{ processTypes.find(s => s.number === String(row.process))?.name || row.process }} -