From 8b5bfdeb201b2653fb648f742b6d4ff5ff05ff6c Mon Sep 17 00:00:00 2001
From: lixiangyu <lixiangyu@xalxzn.com>
Date: 星期三, 27 八月 2025 17:59:29 +0800
Subject: [PATCH] refactor(刀具管理): 重构刀具管理相关组件结构
---
src/views/cms/CuttingPropertiesList.vue | 378 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 287 insertions(+), 91 deletions(-)
diff --git a/src/views/cms/CuttingPropertiesList.vue b/src/views/cms/CuttingPropertiesList.vue
index 8d710c5..694e6d3 100644
--- a/src/views/cms/CuttingPropertiesList.vue
+++ b/src/views/cms/CuttingPropertiesList.vue
@@ -1,5 +1,17 @@
<template>
<a-card :bordered="false">
+ <!-- 鏂板鎸夐挳 -->
+ <div class="table-operator" style="margin-bottom: 10px;">
+ <a-button
+ @click="handleAdd"
+ type="primary"
+ icon="plus"
+ :disabled="queryParam.cuttingId === '-1' || !queryParam.cuttingId"
+ >
+ 鏂板
+ </a-button>
+ </div>
+
<!-- table鍖哄煙-begin -->
<div>
<a-table
@@ -35,23 +47,49 @@
</a-button>
</template>
- <span slot="action" slot-scope="text, record">
- <a @click="handleEdit(record)">缂栬緫</a>
+ <!-- 鍙紪杈戝崟鍏冩牸 -->
+ <template
+ v-for="col in ['propertyCode', 'propertyName', 'propertyUnit', 'propertyValue']"
+ :slot="col"
+ slot-scope="text, record"
+ >
+ <div :key="col">
+ <a-input
+ v-if="record.editable"
+ style="margin: -5px 0"
+ :value="text"
+ @change="e => handleChange(e.target.value, record.id, col)"
+ />
+ <template v-else>
+ {{ text }}
+ </template>
+ </div>
+ </template>
- <a-divider type="vertical" />
- <a-dropdown>
- <a class="ant-dropdown-link">鏇村 <a-icon type="down" /></a>
- <a-menu slot="overlay">
- <a-menu-item>
- <a @click="handleDetail(record)">璇︽儏</a>
- </a-menu-item>
- <a-menu-item>
- <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)">
- <a>鍒犻櫎</a>
- </a-popconfirm>
- </a-menu-item>
- </a-menu>
- </a-dropdown>
+ <!-- 鎿嶄綔鍒� -->
+ <span slot="action" slot-scope="text, record">
+ <div class="editable-row-operations">
+ <span v-if="record.editable">
+ <a-popconfirm title="纭畾淇濆瓨?" @confirm="() => save(record.id)">
+ <a>淇濆瓨</a>
+ </a-popconfirm>
+ <a style="margin-left: 8px" @click="() => cancel(record.id)">鍙栨秷</a>
+ </span>
+ <span v-else>
+ <a :disabled="editingKey !== ''" @click="() => edit(record.id)">缂栬緫</a>
+ <a-divider type="vertical" />
+ <a-dropdown>
+ <a class="ant-dropdown-link">鏇村 <a-icon type="down" /></a>
+ <a-menu slot="overlay">
+ <a-menu-item>
+ <a-popconfirm title="纭畾鍒犻櫎鍚�?" @confirm="() => handleDelete(record.id)">
+ <a>鍒犻櫎</a>
+ </a-popconfirm>
+ </a-menu-item>
+ </a-menu>
+ </a-dropdown>
+ </span>
+ </div>
</span>
</a-table>
@@ -60,91 +98,249 @@
</template>
<script>
+import '@/assets/less/TableExpand.less'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { putAction, getAction, postAction } from '@/api/manage'
- import '@/assets/less/TableExpand.less'
- import { mixinDevice } from '@/utils/mixin'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-
- export default {
- name: 'CuttingPropertiesList',
- mixins:[JeecgListMixin, mixinDevice],
- components: {
- },
- data () {
- return {
- description: '鍒�鍏锋墿灞曞睘鎬х鐞嗛〉闈�',
- // 琛ㄥご
- columns: [
- {
- title: '#',
- dataIndex: '',
- key:'rowIndex',
- width:60,
- align:"center",
- customRender:function (t,r,index) {
- return parseInt(index)+1;
- }
- },
- {
- title:'灞炴�х紪鐮�',
- align:"center",
- dataIndex: 'propertyCode'
- },
- {
- title:'灞炴�у悕绉�',
- align:"center",
- dataIndex: 'propertyName'
- },
- {
- title:'璁￠噺鍗曚綅',
- align:"center",
- dataIndex: 'propertyUnit'
- },
- {
- title:'灞炴�у��',
- align:"center",
- dataIndex: 'propertyValue'
+export default {
+ name: 'CuttingPropertiesList',
+ mixins:[JeecgListMixin, mixinDevice],
+ components: {
+ },
+ data () {
+ return {
+ description: '鍒�鍏锋墿灞曞睘鎬х鐞嗛〉闈�',
+ editingKey: '',
+ // 琛ㄥご
+ columns: [
+ {
+ title: '#',
+ dataIndex: '',
+ key:'rowIndex',
+ width:60,
+ align:"center",
+ customRender:function (t,r,index) {
+ return parseInt(index)+1;
}
- ],
- url: {
- list: "/cms/cuttingProperties/list",
- delete: "/cms/cuttingProperties/delete",
- deleteBatch: "/cms/cuttingProperties/deleteBatch",
- exportXlsUrl: "/cms/cuttingProperties/exportXls",
- importExcelUrl: "cms/cuttingProperties/importExcel",
-
},
- dictOptions:{},
- superFieldList:[],
- }
- },
- created() {
+ {
+ title:'灞炴�х紪鐮�',
+ align:"center",
+ dataIndex: 'propertyCode',
+ scopedSlots: { customRender: 'propertyCode' }
+ },
+ {
+ title:'灞炴�у悕绉�',
+ align:"center",
+ dataIndex: 'propertyName',
+ scopedSlots: { customRender: 'propertyName' }
+ },
+ {
+ title:'璁￠噺鍗曚綅',
+ align:"center",
+ dataIndex: 'propertyUnit',
+ scopedSlots: { customRender: 'propertyUnit' }
+ },
+ {
+ title:'灞炴�у��',
+ align:"center",
+ dataIndex: 'propertyValue',
+ scopedSlots: { customRender: 'propertyValue' }
+ },
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ align:"center",
+ scopedSlots: { customRender: 'action' },
+ width: 200,
+ }
+ ],
+ url: {
+ list: "/cms/cuttingProperties/list",
+ delete: "/cms/cuttingProperties/delete",
+ deleteBatch: "/cms/cuttingProperties/deleteBatch",
+ exportXlsUrl: "/cms/cuttingProperties/exportXls",
+ importExcelUrl: "cms/cuttingProperties/importExcel",
+ edit: "/cms/cuttingProperties/edit",
+ add: "/cms/cuttingProperties/add" // 娣诲姞鏂板鎺ュ彛
+ },
+ dictOptions:{},
+ superFieldList:[],
+ }
+ },
+ created() {
this.getSuperFieldList();
+ },
+ computed: {
+ importExcelUrl: function(){
+ return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
},
- computed: {
- importExcelUrl: function(){
- return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
- },
+ },
+ methods: {
+ initDictConfig(){
},
- methods: {
- initDictConfig(){
- },
- getSuperFieldList(){
- let fieldList=[];
- fieldList.push({type:'string',value:'cuttingId',text:'鍒�鍏稩D'})
- fieldList.push({type:'string',value:'propertyCode',text:'灞炴�х紪鐮�'})
- fieldList.push({type:'string',value:'propertyName',text:'灞炴�у悕绉�'})
- fieldList.push({type:'string',value:'propertyUnit',text:'璁￠噺鍗曚綅'})
- fieldList.push({type:'string',value:'propertyValue',text:'灞炴�у��'})
- this.superFieldList = fieldList
- },
- getCuttingProperties(cuttingId) {
+ getSuperFieldList(){
+ let fieldList=[];
+ fieldList.push({type:'string',value:'cuttingId',text:'鍒�鍏稩D'})
+ fieldList.push({type:'string',value:'propertyCode',text:'灞炴�х紪鐮�'})
+ fieldList.push({type:'string',value:'propertyName',text:'灞炴�у悕绉�'})
+ fieldList.push({type:'string',value:'propertyUnit',text:'璁￠噺鍗曚綅'})
+ fieldList.push({type:'string',value:'propertyValue',text:'灞炴�у��'})
+ this.superFieldList = fieldList
+ },
+ getCuttingProperties(cuttingId) {
this.queryParam.cuttingId = cuttingId;
this.loadData(1);
},
+
+ // 鏂板琛�
+ handleAdd() {
+ // 濡傛灉宸茬粡鍦ㄧ紪杈戠姸鎬侊紝涓嶅厑璁告柊澧�
+ if (this.editingKey !== '') {
+ // 鏌ユ壘姝ｅ湪缂栬緫鐨勮褰曞苟鍙栨秷缂栬緫
+ const editingRecord = this.dataSource.find(item => item.id === this.editingKey);
+ if (editingRecord) {
+ this.cancel(this.editingKey);
+ }
+ }
+
+ // 鍒涘缓鏂扮殑绌烘暟鎹」
+ const newRow = {
+ id: 'new_' + new Date().getTime(), // 涓存椂ID
+ cuttingId: this.queryParam.cuttingId,
+ propertyCode: '',
+ propertyName: '',
+ propertyUnit: '',
+ propertyValue: '',
+ editable: true,
+ isNew: true // 鏍囪涓烘柊娣诲姞鐨勮
+ };
+
+ // 灏嗘柊琛屾彃鍏ュ埌鏁版嵁婧愬紑澶�
+ this.dataSource = [newRow, ...this.dataSource];
+ this.editingKey = newRow.id;
+ },
+
+ // 缂栬緫琛屾暟鎹�
+ edit(key) {
+ // 鍏堜繚瀛樺綋鍓嶆暟鎹殑鍓湰
+ const newData = [...this.dataSource];
+ const target = newData.find(item => key === item.id);
+ this.editingKey = key;
+
+ if (target) {
+ target.editable = true;
+ this.dataSource = newData;
+ }
+ },
+
+ // 淇濆瓨缂栬緫鐨勬暟鎹�
+ save(key) {
+ const newData = [...this.dataSource];
+ const target = newData.find(item => key === item.id);
+
+ if (target) {
+ delete target.editable;
+ this.dataSource = newData;
+
+ // 鍒ゆ柇鏄柊澧炶繕鏄紪杈�
+ if (target.isNew) {
+ // 鏂板鎿嶄綔
+ const params = { ...target };
+ delete params.id;
+ delete params.isNew;
+ // 鍒犻櫎鍒涘缓鏃堕棿瀛楁锛岃鍚庣鑷姩鐢熸垚
+ delete params.createTime;
+ delete params.updateTime;
+
+ postAction(this.url.add, params).then(res => {
+ if (res.success) {
+ this.$message.success('鏂板鎴愬姛');
+ this.editingKey = '';
+ this.loadData(); // 閲嶆柊鍔犺浇鏁版嵁
+ } else {
+ this.$message.error(res.message);
+ }
+ }).catch(err => {
+ this.$message.error('鏂板澶辫触');
+ console.log(err);
+ });
+ } else {
+ // 缂栬緫鎿嶄綔 - 鍙彂閫侀渶瑕佹洿鏂扮殑瀛楁
+ const params = {
+ id: target.id,
+ propertyCode: target.propertyCode,
+ propertyName: target.propertyName,
+ propertyUnit: target.propertyUnit,
+ propertyValue: target.propertyValue,
+ // 涓嶅寘鍚� createTime 瀛楁
+ };
+
+ putAction(this.url.edit, params).then(res => {
+ if (res.success) {
+ this.$message.success('淇濆瓨鎴愬姛');
+ this.editingKey = '';
+ this.loadData(); // 閲嶆柊鍔犺浇鏁版嵁
+ } else {
+ this.$message.error(res.message);
+ }
+ }).catch(err => {
+ this.$message.error('淇濆瓨澶辫触');
+ console.log(err);
+ });
+ }
+ }
+ },
+
+ // 鍙栨秷缂栬緫
+ cancel(key) {
+ const newData = [...this.dataSource];
+ const targetIndex = newData.findIndex(item => key === item.id);
+ this.editingKey = '';
+
+ if (targetIndex >= 0) {
+ // 濡傛灉鏄柊澧炵殑琛岋紝鐩存帴鍒犻櫎
+ if (newData[targetIndex].isNew) {
+ newData.splice(targetIndex, 1);
+ this.dataSource = newData;
+ } else {
+ // 濡傛灉鏄紪杈戠殑琛岋紝浠庡悗绔噸鏂拌幏鍙栨暟鎹互鎭㈠鍘熷鍊�
+ const target = newData[targetIndex];
+ getAction(this.url.list, { id: key }).then(res => {
+ if(res.success && res.result.records.length > 0) {
+ const originalData = res.result.records[0];
+ Object.keys(target).forEach(key => {
+ if(key !== 'editable') {
+ target[key] = originalData[key];
+ }
+ });
+ delete target.editable;
+ this.dataSource = newData;
+ }
+ });
+ }
+ }
+ },
+
+ // 澶勭悊鍗曞厓鏍煎�煎彉鍖�
+ handleChange(value, key, column) {
+ const newData = [...this.dataSource];
+ const target = newData.find(item => key === item.id);
+
+ if (target) {
+ target[column] = value;
+ this.dataSource = newData;
+ }
}
}
+}
</script>
+
<style scoped>
- @import '~@assets/less/common.less';
-</style>
\ No newline at end of file
+@import '~@assets/less/common.less';
+
+.editable-row-operations a {
+ margin-right: 8px;
+}
+</style>
--
Gitblit v1.9.3