From 2ee312d3c399ddc62a06189367fa3879fca7daef Mon Sep 17 00:00:00 2001 From: wangting <675591594@qq.com> Date: 星期五, 10 五月 2024 15:35:24 +0800 Subject: [PATCH] UI展示 --- Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue | 301 ++++++++++++++++---------------------------------- 1 files changed, 97 insertions(+), 204 deletions(-) diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue index 1c26a42..8390cda 100644 --- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue +++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue @@ -1,26 +1,30 @@ <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" - :type="item.paramVOS.webUiButtonType || 'primary'" plain + :key="item.oid" :icon="item.paramVOS.icon" + :type="item.paramVOS.btnType || 'primary'" plain size="small" @click="buttonClick(item)"> {{ item.name }} </el-button> + <el-button type="text" @click="handleDefaultAddChildren(scope.row)" v-if="(LocationType === 'menu' && type === 'TreeTable')">鏂板瀛愮骇</el-button> + <el-button type="text" icon="el-icon-view" size="small" plain @click="$emit('rowView',scope.row,scope.index)" v-if="LocationType === 'menu'">鏌ョ湅</el-button> <el-button v-for="item in basicButtonList.menu" v-if="LocationType === 'menu'" :key="item.oid" - :icon="item.paramVOS.webUiButtonIcon ? item.paramVOS.webUiButtonIcon : (item.paramVOS.webUiButtonMethods === 'edit' ? 'el-icon-edit' : (item.paramVOS.webUiButtonMethods === 'delete' ? 'el-icon-delete' : ''))" - :type="item.paramVOS.webUiButtonType || 'text'" plain + :icon="item.paramVOS.icon ? item.paramVOS.icon : (item.id === 'edit' ? 'el-icon-edit' : (item.id === 'delete' ||item.id === 'del' ? 'el-icon-delete' : ''))" + :type="item.paramVOS.btnType || 'text'" plain size="small" - @click="buttonClick(item,scope)"> + @click="buttonClick(item,scope.row)"> {{ item.name }} </el-button> + + <!-- 琛ㄦ牸鍐呮寜閽搷浣滃璇濇琛ㄥ崟 --> <dynamic-table-form ref="dynamicForm" :formList="formList" :title="formName" :visible.sync="visible" style="display: none"></dynamic-table-form> @@ -28,12 +32,29 @@ <div v-else-if="type === 'form'"> <el-button v-for="item in basicButtonList" :key="item.oid" - :icon="item.paramVOS.webUiButtonIcon" - :type="(item.paramVOS.webUiButtonType !== 'text' ? item.paramVOS.buttonType : 'primary') || 'primary'" + :icon="item.paramVOS.icon" + :type="item.paramVOS.btnType || 'primary'" plain size="small" @click="buttonClick(item)"> {{ item.name }} + </el-button> + </div> + <div v-else-if="type === 'tree'" class="tree-buttons"> + <el-button v-for="item in basicButtonList" + :key="item.oid" + :icon="item.paramVOS.icon" + :type="item.paramVOS.btnType || 'primary'" + plain + size="small" + @click="buttonClick(item)"> + {{ item.name }} + </el-button> + <el-button type="primary" + plain + size="small" + @click="$emit('refresh')"> + 鍒锋柊 </el-button> </div> </div> @@ -42,10 +63,16 @@ <script> import func from "@/util/func"; import {validatenull} from "@/util/validate"; +import {doAction} from '@/components/actions/base/BaseAction'; +import Vue from "vue"; export default { name: "dynamic-button", props: { + componentVO: { + type: Object, + default: {} + }, type: { type: String }, @@ -57,231 +84,97 @@ }, butttonList: { type: Array - } + }, + sourceData: { + //鎸夐挳鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁 + type: Object, + default: {} + }, + dataStore: { + //鎸夐挳鎵�灞炲尯鍩熼�変腑鏁版嵁 + type: Array, + default: [] + }, }, data() { return { visible: false, formName: '', // 琛ㄥ崟鏁版嵁 - 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: "" - }, - ], + formList: [], } }, computed: { basicButtonList() { - // const basicColumn = this.butttonList.filter(item => item.id !== 'launchworkflow'); // 棣栧厛杩囨护鍑烘潵鍩虹琛ㄥ崟浜嬩欢鐨勬寜閽� const basicColumn = this.butttonList; + if (!basicColumn || !Array.isArray(basicColumn)) { + return []; // 濡傛灉 basicColumn 鏈畾涔夋垨鑰呬笉鏄暟缁勶紝杩斿洖绌烘暟缁� + } - if (this.type === 'form') { - + if (this.type === 'form' || this.type === 'tree') { return basicColumn; - - } else if (this.type === 'table') { - - const top = basicColumn.filter(item => item.paramVOS.webUiButtonLocation === 'top' || func.isEmpty(item.paramVOS.webUiButtonLocation)); // 杩囨护鍑烘潵琛ㄦ牸涓婇潰鍖哄煙灞曠ず鐨勬寜閽� - const menu = basicColumn.filter(item => item.paramVOS.webUiButtonLocation === 'menu'); // 杩囨护鍑烘潵鎿嶄綔鏍忓睍绀虹殑鎸夐挳 - + } else if (this.type === 'table' || this.type === 'TreeTable') { + const top = basicColumn.filter(item => { + if (item.paramVOS && item.paramVOS.webUiButtonLocation && item.paramVOS.webUiButtonLocation !== 'menu') { + return true; + } else if (item.id != "edit" && item.id != "del" && item.id != "delete" && item.id != "refresh") { + return true; + } + return false + }); + const menu = basicColumn.filter(item => { + if (item.paramVOS && item.paramVOS.webUiButtonLocation && item.paramVOS.webUiButtonLocation === 'menu') { + return true + } else if (item.id == "edit" || item.id == "del" || item.id == "delete"){ + return true; + } + return false; + }); return { top: top, - menu: menu + menu: menu, }; } } }, methods: { - buttonClick(item) { - this.formName = item.name; - - function handleAdd() { - this.visible = true; + //琛ㄦ牸鏍戦粯璁ゆ柊澧炲瓙椤� + handleDefaultAddChildren(row) { + this.visible = true; + this.formName = '鏂板瀛愮骇' + this.$refs.dynamicForm.form = row; + }, + buttonClick(buttonitem,rowData) { + const paramVOS = buttonitem.paramVOS; + const DefineVO = this.componentVO.treeDefineVO || this.componentVO.tableDefineVO || this.componentVO.treeTableDefineVO || this.componentVO.formDefineVO; + if (!paramVOS['title']) { + paramVOS['title'] = buttonitem.name + (DefineVO.title || ''); } - function handleEdit() { - this.visible = true; - this.$refs.dynamicForm.form = this.scope.row; + if (!paramVOS['type']) { + paramVOS['type'] = DefineVO.btmType; } - function handleDelete() { - this.$message.success('鍒犻櫎鎴愬姛锛�'); + if (paramVOS['BSContent'] || paramVOS['BSContext']) { + paramVOS['context'] = paramVOS['BSContext'] || paramVOS['BSContent'] + paramVOS['content'] = paramVOS['BSContext'] || paramVOS['BSContent']; } - 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('璇烽噸鏂伴厤缃寜閽紒') - } + const that = this; + //paramVOS.customBtn //寮圭獥榛樿鏈変繚瀛樻寜閽�,customBtn涓簍rue鏃跺唴瀹瑰睍绀鸿嚜瀹氫箟鎸夐挳 + doAction(buttonitem, { + paramVOS: paramVOS, + dataStore: rowData || this.dataStore || [], + sourceData: this.sourceData || {} + }, function (actionType,data) { + that.$emit("afterMethod",actionType,data); + }); } - } + }, } </script> <style scoped> </style> + -- Gitblit v1.9.3