From 55fdd88d12e656fae07f54e53af60fcf3bb19c8a Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期二, 26 三月 2024 17:12:09 +0800
Subject: [PATCH] 动态按钮封装方法-表格树添加默认新增子级按钮
---
Source/ProjectWeb/src/views/base/buttonForm.js | 31 +++++
Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue | 79 ++++--------
Source/ProjectWeb/src/views/base/buttonTable.js | 70 +++++++++++
Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue | 4
Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue | 175 ++++++++++++++++++++++++++++-
5 files changed, 301 insertions(+), 58 deletions(-)
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue
index 28b19a6..5ab9176 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-TreeTable.vue
@@ -12,14 +12,14 @@
</template>
<!--top鍖哄煙鎸夐挳-->
<template slot="menuLeft" slot-scope="scope">
- <dynamic-button :butttonList="componentVO.buttons" :selectList="selectList" LocationType="top"
- type="table"></dynamic-button>
+ <dynamic-button :butttonList="componentVO.buttons" :selectList="TreeSelectList" LocationType="top"
+ type="TreeTable"></dynamic-button>
</template>
<!--menu鍖哄煙鎸夐挳-->
<template slot="menu" slot-scope="scope">
- <dynamic-button :butttonList="componentVO.buttons" :scope="scope" :selectList="selectList" LocationType="menu"
- type="table"></dynamic-button>
+ <dynamic-button :butttonList="componentVO.buttons" :scope="scope" :selectList="TreeSelectList" LocationType="menu" default="default"
+ type="TreeTable"></dynamic-button>
</template>
</avue-crud>
</div>
@@ -180,7 +180,170 @@
comment: '鏃�'
},
],
- TreeSelectList: []
+ TreeSelectList: [],
+ // 琛ㄥ崟鏁版嵁
+ formList: [
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: null,
+ defaultValue: "",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "name",
+ hidden: false,
+ keyAttr: true,
+ prefix: null,
+ readOnly: false,
+ referConfig: null,
+ required: true,
+ selectLibFlag: null,
+ showField: null,
+ suffix: '$',
+ text: "鍚嶇О",
+ tooltips: '鍚嶇О',
+ type: "text",
+ unique: false,
+ verify: ""
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: null,
+ defaultValue: "",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "code",
+ hidden: false,
+ keyAttr: false,
+ prefix: null,
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: null,
+ showField: null,
+ suffix: null,
+ disabled: true,
+ text: "缂栫爜",
+ tooltips: null,
+ type: "text",
+ unique: false,
+ verify: ""
+ },
+ {
+ comboxKey: "EnumReviewType",
+ customClass: null,
+ data: null,
+ dateFormate: null,
+ defaultValue: "department",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "reviewtype",
+ hidden: false,
+ keyAttr: false,
+ prefix: null,
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: null,
+ showField: null,
+ suffix: null,
+ text: "绫诲瀷",
+ tooltips: null,
+ type: "combox",
+ unique: false,
+ verify: "",
+ dicData: [{
+ label: '娴嬭瘯1',
+ value: 'department'
+ }, {
+ label: '娴嬭瘯2',
+ value: 'departments'
+ }]
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: null,
+ defaultValue: "",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "creator",
+ hidden: true,
+ keyAttr: false,
+ prefix: null,
+ readOnly: true,
+ referConfig: null,
+ required: false,
+ selectLibFlag: null,
+ showField: null,
+ suffix: null,
+ text: "鍒涘缓浜�",
+ tooltips: null,
+ type: "text",
+ unique: false,
+ verify: ""
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: "yyyy-MM-dd HH:mm:ss",
+ defaultValue: "",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "createtime",
+ hidden: true,
+ keyAttr: false,
+ prefix: null,
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: null,
+ showField: null,
+ suffix: null,
+ text: "鍒涘缓鏃堕棿",
+ tooltips: null,
+ type: "datetime",
+ unique: false,
+ verify: ""
+ },
+ {
+ comboxKey: null,
+ customClass: null,
+ data: null,
+ dateFormate: null,
+ defaultValue: "",
+ displayExtension: "",
+ extendAttrMap: null,
+ extendAttrString: null,
+ field: "content",
+ hidden: false,
+ keyAttr: false,
+ prefix: null,
+ readOnly: false,
+ referConfig: null,
+ required: false,
+ selectLibFlag: null,
+ showField: null,
+ suffix: null,
+ text: "澶囨敞",
+ tooltips: null,
+ type: "textarea",
+ unique: false,
+ verify: ""
+ },
+ ],
+ formName: '',
+ visible:false
}
},
watch: {
@@ -220,7 +383,7 @@
methods: {
TreeSelectChange(row) {
this.TreeSelectList = row;
- }
+ },
}
}
</script>
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue
index 09606d7..52bf1b5 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue
@@ -1,8 +1,8 @@
<template>
<div>
<!--琛ㄦ牸鍩虹鎸夐挳-->
- <div v-if="type === 'table'">
- <!--top灞曠ず琛ㄦ牸涓婃柟鍖哄煙 menu灞曠ず琛ㄦ牸鎿嶄綔鏍忓尯鍩� -->
+ <div v-if="type === 'table' || type === 'TreeTable'">
+ <!--top灞曠ず琛ㄦ牸涓婃柟鍖哄煙 menu灞曠ず琛ㄦ牸鎿嶄綔鏍忓尯鍩� 鏃犲氨鏄粯璁� -->
<el-button v-for="item in basicButtonList.top"
v-if="LocationType === 'top'"
:key="item.oid" :icon="item.paramVOS.webUiButtonIcon"
@@ -12,6 +12,7 @@
{{ item.name }}
</el-button>
+ <el-button type="text" @click="handleDefaultAddChildren(scope.row)" v-if="(LocationType === 'menu' && this.default === 'default')">鏂板瀛愮骇</el-button>
<el-button v-for="item in basicButtonList.menu"
v-if="LocationType === 'menu'"
:key="item.oid"
@@ -21,6 +22,8 @@
@click="buttonClick(item)">
{{ item.name }}
</el-button>
+
+
<!-- 琛ㄦ牸鍐呮寜閽搷浣滃璇濇琛ㄥ崟 -->
<dynamic-table-form ref="dynamicForm" :formList="formList" :title="formName" :visible.sync="visible"
style="display: none"></dynamic-table-form>
@@ -59,7 +62,11 @@
type: Array
},
selectList: {
- type: Array
+ type: Array,
+ default: []
+ },
+ default:{
+ type:String,
}
},
data() {
@@ -235,7 +242,7 @@
if (this.type === 'form') {
return basicColumn;
- } else if (this.type === 'table') {
+ } else if (this.type === 'table' || this.type === 'TreeTable') {
const top = basicColumn.filter(item => item.paramVOS.webUiButtonLocation === 'top' || func.isEmpty(item.paramVOS.webUiButtonLocation)); // 杩囨护鍑烘潵琛ㄦ牸涓婇潰鍖哄煙灞曠ず鐨勬寜閽�
const menu = basicColumn.filter(item => item.paramVOS.webUiButtonLocation === 'menu'); // 杩囨护鍑烘潵鎿嶄綔鏍忓睍绀虹殑鎸夐挳
return {
@@ -246,55 +253,27 @@
}
},
methods: {
+ //琛ㄦ牸鏍戦粯璁ゆ柊澧炲瓙椤�
+ handleDefaultAddChildren(row){
+ this.visible = true;
+ this.formName = '鏂板瀛愮骇'
+ this.$refs.dynamicForm.form = row;
+ },
buttonClick(item) {
- this.formName = item.name;
-
- function handleAdd() {
- this.visible = true;
- }
-
- function handleEdit() {
- const location = item.paramVOS.webUiButtonLocation;
- if (location === 'menu') {
- this.visible = true;
- this.$refs.dynamicForm.form = this.scope.row;
- } else if (location === 'top' && this.selectList.length === 1) {
- this.visible = true;
- this.$refs.dynamicForm.form = this.selectList[0];
- } else {
- const messageText = this.selectList.length > 1 ? '鍙兘閫夋嫨涓�鏉℃暟鎹繘琛岀紪杈戯紒' : '璇烽�夋嫨涓�鏉℃暟鎹繘琛岀紪杈戯紒';
- this.$message.warning(messageText);
- }
- }
-
- function handleDelete() {
- const location = item.paramVOS.webUiButtonLocation;
- if (location === 'top') {
- if (this.selectList.length <= 0) {
- this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒')
- } else {
- this.$message.success('鍒犻櫎鎴愬姛锛�');
- }
- } else if (location === 'menu') {
- this.$message.success('鍒犻櫎鎴愬姛锛�');
- }
- }
-
- const methodHandlers = {
- add: handleAdd.bind(this),
- edit: handleEdit.bind(this),
- delete: handleDelete.bind(this),
- };
-
- const method = item.paramVOS.webUiButtonMethods;
- const handler = methodHandlers[method];
- if (handler) {
- handler();
- } else {
- this.$message.error('璇烽噸鏂伴厤缃寜閽紒')
+ // 鏍规嵁 type 鏉′欢鍔ㄦ�佸紩鍏ヤ笉鍚岀殑JS鏂囦欢锛屽苟浼犻�� item this 鍙傛暟
+ if (this.type === 'table') {
+ import('@/views/base/buttonTable').then(module => {
+ const buttonClickTable = module.default;
+ buttonClickTable.buttonClick(item,this);
+ })
+ } else if (this.type === 'form') {
+ import('@/views/base/buttonForm').then(module => {
+ const buttonClickForm = module.default;
+ buttonClickForm.buttonClick(item,this);
+ })
}
}
- }
+ },
}
</script>
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
index 14bcc52..65f7a43 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
+++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue
@@ -108,8 +108,8 @@
}
},
created() {
- debugger;
- this.components["my-dynamic-component"] = import(this.componentPath);
+ // debugger;
+ // this.components["my-dynamic-component"] = import(this.componentPath);
}
}
</script>
diff --git a/Source/ProjectWeb/src/views/base/buttonForm.js b/Source/ProjectWeb/src/views/base/buttonForm.js
new file mode 100644
index 0000000..30becea
--- /dev/null
+++ b/Source/ProjectWeb/src/views/base/buttonForm.js
@@ -0,0 +1,31 @@
+export default {
+ buttonClick(item,that) {
+ this.formName = item.name;
+ const method = item.paramVOS.webUiButtonMethods;
+
+ const handlers = {
+ add: () => this.handleAdd(that),
+ edit: () => this.handleEdit(that),
+ delete: () => this.handleDelete(that),
+ };
+
+ const handler = handlers[method];
+ if (handler) {
+ handler();
+ } else {
+ that.$message.error('璇烽噸鏂伴厤缃寜閽紒');
+ }
+ },
+
+ handleAdd(that) {
+ that.$message.success('琛ㄥ崟娣诲姞')
+ },
+
+ handleEdit(that) {
+ that.$message.success('琛ㄥ崟缂栬緫')
+ },
+
+ handleDelete(that) {
+ that.$message.success('琛ㄥ崟鍒犻櫎')
+ },
+}
diff --git a/Source/ProjectWeb/src/views/base/buttonTable.js b/Source/ProjectWeb/src/views/base/buttonTable.js
new file mode 100644
index 0000000..32964b5
--- /dev/null
+++ b/Source/ProjectWeb/src/views/base/buttonTable.js
@@ -0,0 +1,70 @@
+export default {
+ buttonClick(item,that) {
+ that.formName = item.name;
+ const location = item.paramVOS.webUiButtonLocation;
+ const method = item.paramVOS.webUiButtonMethods;
+ const messageOnlyText = that.selectList.length > 1 ? '鍙兘閫夋嫨涓�鏉℃暟鎹繘琛岀紪杈戯紒' : '璇烽�夋嫨涓�鏉℃暟鎹繘琛岀紪杈戯紒';
+ const messageAllText = '璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒'
+
+ const handlers = {
+ add: () => this.handleAdd(that,location),
+ edit: () => this.handleEdit(that,location, messageOnlyText),
+ delete: () => this.handleDelete(that,location, messageAllText),
+ };
+
+ const handler = handlers[method];
+ if (handler) {
+ handler();
+ } else {
+ that.$message.error('璇烽噸鏂伴厤缃寜閽紒');
+ }
+ },
+
+ handleAdd(that,location) {
+ if (location === 'top') {
+ that.visible = true;
+ } else {
+ that.$message.warning('璇烽噸鏂伴厤缃寜閽嚦涓婃柟鍖哄煙锛�');
+ }
+
+ },
+
+ handleEdit(that,location, messageOnlyText) {
+ if (location === 'menu') {
+ that.visible = true;
+ that.$refs.dynamicForm.form = that.scope.row;
+ console.log(that.scope.row)
+ } else if (location === 'top' && that.selectList.length === 1) {
+ that.visible = true;
+ that.$refs.dynamicForm.form = that.selectList[0];
+ } else {
+ that.$message.warning(messageOnlyText);
+ }
+
+ },
+
+ handleDelete(that,location, messageAllText) {
+ if (location === 'top') {
+ if (that.selectList.length <= 0) {
+ that.$message.warning(messageAllText);
+ } else {
+ that.$message.success('鍒犻櫎鎴愬姛锛�');
+ }
+ } else if (location === 'menu') {
+ that.$message.success('鍒犻櫎鎴愬姛锛�');
+ }
+
+ },
+ menuConfigurationWarning(location) {
+ if (location === 'menu') {
+ this.$message.warning('璇烽噸鏂伴厤缃寜閽嚦涓婃柟鍖哄煙');
+ return
+ }
+ },
+ topConfigurationWarning(location) {
+ if (location === ' top') {
+ this.$message.warning('璇烽噸鏂伴厤缃寜閽嚦鎿嶄綔鍖哄煙');
+ return
+ }
+ }
+}
--
Gitblit v1.9.3