From 9412cc46c7d135d29dc6bf9b7ae36a3b6b17347c Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期三, 07 六月 2023 18:11:21 +0800 Subject: [PATCH] 分类树组件封装,联调真实表格数据 --- Source/UBCS-WEB/src/components/Crud/Crud.vue | 101 ++++++++---- Source/UBCS-WEB/src/store/index.js | 4 Source/UBCS-WEB/src/store/modules/master.js | 16 ++ Source/UBCS-WEB/src/main.js | 2 Source/UBCS-WEB/src/views/MasterData/items.vue | 182 +++++----------------- Source/UBCS-WEB/vue.config.js | 9 Source/UBCS-WEB/src/components/Master/MasterTree.vue | 124 +++++++++++++++ 7 files changed, 258 insertions(+), 180 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Crud/Crud.vue b/Source/UBCS-WEB/src/components/Crud/Crud.vue index 49edc24..6d66a84 100644 --- a/Source/UBCS-WEB/src/components/Crud/Crud.vue +++ b/Source/UBCS-WEB/src/components/Crud/Crud.vue @@ -97,17 +97,22 @@ return {} } }, - templateOid:{ - type:String, - default:"" - }, codeClassifyOid:{ type:String, default:"" + }, + coderuleoid:{ + type:String, + default:"" + }, + tableDataArray:{ + type:Array, + default:[] } }, data() { return { + templateOid:"", addvisible:false, editvisible:false, findvisible:false, @@ -135,26 +140,49 @@ }, tableData:[], tableHeadData:[], - items:{} + items:{}, + aaa:"" } }, computed:{ - }, created() { this.CrudHeaderRend(); - this.CrudRend() + this.$emit('tableData',this.tableData) + }, + mounted() { + }, activated() { this.doLayout() }, + watch:{ + codeClassifyOid:{ + handler(newval,oldval){ + this.codeClassifyOid=newval; + this.CrudHeaderRend() + }, + deep:true + }, + tableDataArray:{ + handler(newval,oldval){ + this.tableData=newval; + this.CrudRend() + } + } + }, methods: { + rend(){ + this.tableData=this.tableHeadData + }, handleSizeChange(val){ this.page.pageSize=val + this.$emit('pageSize',val) this.CrudRend() }, handleCurrentChange(val){ this.page.currentPage=val + this.$emit('currentPage',val) this.CrudRend() }, // 鐩戝惉鍗曞厓鏍肩偣鍑讳簨浠跺苟瀛樺偍姝e湪缂栬緫鐨勮 @@ -178,38 +206,41 @@ }, //琛ㄦ牸澶存覆鏌� CrudHeaderRend() { - MasterTable({ - codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", - functionId: 5, - _: 1685067339479 - }).then(res => { - this.options=res.data.tableDefineVO.seniorQueryColumns - this.List = res.data.tableDefineVO.cols[0]; - this.List.forEach(item => { - let columnItem = { - label: item.title, - prop: item.field, - type: this.columnType[item.type], - sortable: item.sort, - width: item.minWidth - }; - this.option.column.push(columnItem); - this.option.column=this.tableHeadData; + if(this.codeClassifyOid != ""){ + MasterTable({ + codeClassifyOid:this.codeClassifyOid, + functionId: 5, + }).then(res => { + this.options=res.data.tableDefineVO.seniorQueryColumns + this.List = res.data.tableDefineVO.cols[0]; + this.List.forEach(item => { + let columnItem = { + label: item.title, + prop: item.field, + type: this.columnType[item.type], + sortable: item.sort, + width: item.minWidth + }; + this.option.column.push(columnItem); + this.option.column=this.tableHeadData; + this.templateOid=res.data.tableDefineVO.oid + this.$emit('templateOid',this.templateOid) + }) }) - }) + } }, //琛ㄦ牸鏁版嵁 CrudRend() { - TableData({ - templateOid: this.templateOid, - codeClassifyOid: this.codeClassifyOid, - page: this.page.currentPage, - limit:this.page.pageSize, - }).then(res => { - this.page.total = res.data.total; - this.data = res.data.data; - this.tableData=res.data.data; - }) + TableData({ + templateOid: this.templateOid, + codeClassifyOid: this.codeClassifyOid, + page: this.page.currentPage, + limit:this.page.pageSize, + }).then(res => { + this.page.total = res.data.total; + this.data = res.data.data; + this.tableData=res.data.data; + }) }, // 鎺掑簭 sortChange(val) { diff --git a/Source/UBCS-WEB/src/components/Master/MasterTree.vue b/Source/UBCS-WEB/src/components/Master/MasterTree.vue new file mode 100644 index 0000000..e6f5bd5 --- /dev/null +++ b/Source/UBCS-WEB/src/components/Master/MasterTree.vue @@ -0,0 +1,124 @@ +<template> + <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false" + :option="Treeoption" + style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px" + @node-click=" nodeClick" + ></avue-tree> +</template> + +<script> +import {getTreeList} from "@/api/MasterData/master"; +import {mapMutations, mapState} from "vuex"; +import {TableData} from "@/api/GetItem"; + +export default { + name: "MasterTree", + props:{ + pageSize:{ + type:String, + default:"10" + }, + currentPage:{ + type:String, + default:"1" + }, + templateOid:{ + type:String, + default:'' + }, + }, + data(){ + return{ + tableDataArray:[], + codeClassifyOid:"", + coderuleoid:"", + CloneTreeAvueform:{}, + loading:false, + Treedata:[], + nodeClickList: "", + Treeoption: { + addBtn: false, + editBtn: false, + delBtn: false, + defaultExpandAll: false, + menu: false, + lazy: true, + // treeLoad:function (node,resolve){ + // console.log(node) + // console.log(resolve) + // } + treeLoad:function (node, resolve){ + if(node.data != false){ + const parentId = (node.level === 0) ? 0 : node.data.oid; + const parentBtmName = node.data.attributes.btmname + getTreeList({parentOid:parentId,parentBtmName:parentBtmName}).then(res=>{ + resolve(res.data.map(item=>{ + return { + ...item, + label:item.text + } + })) + }) + } + }, + }, + } + }, + created() { + this.getTreeList() + + }, + computed:{ + }, + methods:{ + //鑾峰彇鏁版嵁 + getTreeList(){ + getTreeList({'conditionMap[id]': 'wupin'}).then(res=>{ + this.Treedata=res.data + this.ModifyProperties(this.Treedata, 'text', 'label'); + this.codeClassifyOid=res.data[0].oid; + this.coderuleoid=res.data[0].attributes.coderuleoid; + this.$emit("codeClassifyOid", this.codeClassifyOid ) + this.$emit("coderuleoid", this.coderuleoid ) + }).catch(res=>{ + console.log(res) + }) + }, + + //瀹氫箟涓�涓慨鏀规暟鎹睘鎬у悕鐨勬柟娉� + ModifyProperties(obj, oldName, newName) { + for (let key in obj) { + if (key === oldName) { + obj[newName] = obj[key]; + delete obj[key]; + } + if (typeof obj[key] === 'object') { + this.ModifyProperties(obj[key], oldName, newName); + } + } + }, + //鏍戠偣鍑讳簨浠� + nodeClick(data){ + this.nodeClickList = data; + console.log(this.currentPage,this.pageSize) + TableData({ + templateOid: this.templateOid, + codeClassifyOid: this.codeClassifyOid, + page: this.pageSize, + limit:this.currentPage, + }).then(res => { + console.log(res) + // this.page.total = res.data.total; + // this.data = res.data.data; + this.tableDataArray=res.data.data; + this.$emit('tableDataArray',this.tableDataArray) + console.log(this.tableDataArray) + }) + } + } +} +</script> + +<style scoped> + +</style> diff --git a/Source/UBCS-WEB/src/main.js b/Source/UBCS-WEB/src/main.js index 082a2cd..297be45 100644 --- a/Source/UBCS-WEB/src/main.js +++ b/Source/UBCS-WEB/src/main.js @@ -47,6 +47,7 @@ import originalAdd from "@/views/modeling/originalAdd" import FormTemplateDialog from "@/components/FormTemplate/index" import linkTypeAdd from "@/views/modeling/LinkTypeAdd" +import MasterTree from "@/components/Master/MasterTree"; // 灏嗗伐鍏峰嚱鏁版坊鍔犲埌鍏ㄥ眬 import utilFunc from './util/func' @@ -95,6 +96,7 @@ Vue.component('referSelectBtmAttrDialog',referSelectBtmAttrDialog) Vue.component('FormTemplateDialog',FormTemplateDialog) Vue.component('LinkTypeAdd',linkTypeAdd) +Vue.component('MasterTree',MasterTree) // 鍔犺浇鐩稿叧url鍦板潃 Object.keys(urls).forEach(key => { diff --git a/Source/UBCS-WEB/src/store/index.js b/Source/UBCS-WEB/src/store/index.js index 805b864..78e2049 100644 --- a/Source/UBCS-WEB/src/store/index.js +++ b/Source/UBCS-WEB/src/store/index.js @@ -6,6 +6,7 @@ import logs from './modules/logs' import dict from './modules/dict' import getters from './getters' +import master from "./modules/master" Vue.use(Vuex) const store = new Vuex.Store({ @@ -14,7 +15,8 @@ common, logs, tags, - dict + dict, + master }, getters, }) diff --git a/Source/UBCS-WEB/src/store/modules/master.js b/Source/UBCS-WEB/src/store/modules/master.js new file mode 100644 index 0000000..d5d5467 --- /dev/null +++ b/Source/UBCS-WEB/src/store/modules/master.js @@ -0,0 +1,16 @@ + +const master = { + state:{ + codeClassifyOid:"" + }, + actions:{ + + }, + mutations:{ + codeClassifyOid(state,all){ + state.codeClassifyOid=all + console.log(state.codeClassifyOid) + } + } +} +export default master diff --git a/Source/UBCS-WEB/src/views/MasterData/items.vue b/Source/UBCS-WEB/src/views/MasterData/items.vue index a101488..02ff88b 100644 --- a/Source/UBCS-WEB/src/views/MasterData/items.vue +++ b/Source/UBCS-WEB/src/views/MasterData/items.vue @@ -2,21 +2,32 @@ <el-container> <el-aside> <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;"> - <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false" - :option="Treeoption" - style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px" - @node-click=" nodeClick" - ></avue-tree> +<!-- 鏍戠粍浠�--> + <master-tree @codeClassifyOid="codeClassifyOidList" + @coderuleoid="coderuleoidList" + :pageSize="this.pageSize" + :currentPage="this.currentPage" + :templateOid="this.templateOid" + @tableDataArray="tableDataArrays" + + ></master-tree> </basic-container> </el-aside> <el-main> - <TableCrud :page="this.page" :templateOid="this.templateOid" :codeClassifyOid="this.codeClassifyOid"></TableCrud> +<!-- 琛ㄦ牸缁勪欢--> + <TableCrud :page="this.page" + :codeClassifyOid="this.codeClassifyOid" + :coderuleoid="this.coderuleoid" + @pageSize="pageSizes" + @currentPage="currentPages" + @templateOid="templateOids" + :tableDataArray="tableDataArray" + ></TableCrud> </el-main> </el-container> </template> <script> -import {getTreeList} from "@/api/MasterData/master" export default { name: "items.vue", data(){ @@ -28,148 +39,35 @@ pageSize: 10, pageSizes: [10, 30, 50, 100, 200], }, - templateOid: "A12826E4-2B66-6D56-DE30-92BB1D7F607F", - codeClassifyOid: "D9CF223F-317D-71EB-BD11-433A94CAD9F3", - CloneTreeAvueform:{}, - loading:false, - Treedata:[], - Treeoption: { - addBtn: false, - editBtn: false, - delBtn: false, - defaultExpandAll: false, - menu: false, - lazy: true, - // treeLoad:function (node,resolve){ - // console.log(node) - // console.log(resolve) - // } - treeLoad:function (node, resolve){ - if(node.loading){ - const parentId = (node.level === 0) ? 0 : node.data.oid; - const parentBtmName = node.data.attributes.btmname - getTreeList({parentOid:parentId,parentBtmName:parentBtmName}).then(res=>{ - console.log(res) - }) - } - }, - }, - nodeClickList: "", + pageSize:"10", + currentPage:"1", + codeClassifyOid:"", + coderuleoid:"", + templateOid:"", + tableDataArray:[] } }, created() { - // this.getAttr() - this.getTreeList() }, methods:{ - getTreeList(){ - getTreeList({'conditionMap[id]': 'wupin'}).then(res=>{ - this.Treedata=res.data - this.ModifyProperties(this.Treedata, 'text', 'label'); - console.log(this.Treedata) - }).catch(res=>{ - console.log(res) - }) + codeClassifyOidList(val){ + this.codeClassifyOid=val; + console.log(val) }, - - //瀹氫箟涓�涓慨鏀规暟鎹睘鎬у悕鐨勬柟娉� - ModifyProperties(obj, oldName, newName) { - for (let key in obj) { - if (key === oldName) { - obj[newName] = obj[key]; - delete obj[key]; - } - if (typeof obj[key] === 'object') { - this.ModifyProperties(obj[key], oldName, newName); - } - } + coderuleoidList(val){ + this.coderuleoid=val; }, - //鏍戣妭鐐规坊鍔犳寜閽� - // TreeAdd() { - // this.TreeAddFormVisible = true; - // // 鍒ゆ柇褰撳墠鏄惁鏈夌偣鍑诲瓙椤� - // if (this.nodeClickList !== "") { - // this.TreeFlag = true - // } - // }, - // //鏍戣妭鐐规坊鍔犱簨浠� - // TreeAddHandler() { - // const data = this.TreeAddform - // this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid) - // TreeSave(data).then(() => { - // this.$message({ - // type: 'success', - // message: '娣诲姞鎴愬姛!' - // }); - // this.getAttr(); - // this.TreeAddFormVisible = false - // this.TreeAddform = "" - // }).catch(res => { - // this.$message({ - // type: 'warning', - // message: res - // }); - // }) - // }, - //鏍戣妭鐐瑰垹闄ゆ寜閽� - // TreeDel() { - // this.$confirm('鏄惁鍒犻櫎褰撳墠閫夋嫨鐨勫垎绫伙紝灏嗕細鎶婂瓙鍒嗙被涓�骞跺垹闄わ紝濡傛灉瀛樺湪缂栫爜鏁版嵁灏嗕笉鑳借鍒犻櫎锛屾槸鍚︾户缁紵', '鎻愮ず', { - // confirmButtonText: '纭畾', - // cancelButtonText: '鍙栨秷', - // type: 'warning', - // customClass: 'my-messagebox', - // }).then(() => { - // TreeCheckDel(this.nodeClickList).then(res => { - // if (res.data.data) { - // TreeDel(this.nodeClickList).then(() => { - // this.$message({ - // type: 'success', - // message: '鍒犻櫎鎴愬姛!' - // }); - // this.getAttr(); - // }).catch(res => { - // this.$message({ - // type: 'warning', - // message: res - // }); - // }) - // } else { - // this.$confirm('褰撳墠鏁版嵁鍖呭惈鏈変笅绾ф暟鎹紝瑕佸垹闄ょ殑璇濅細鍜屼笅绾ф暟鎹竴璧峰垹闄わ紝浣犵‘璁ょ户缁�?', '鎻愮ず', { - // confirmButtonText: '纭畾', - // cancelButtonText: '鍙栨秷', - // type: 'warning', - // customClass: 'my-messageboxs', - // }).then(() => { - // TreeDel(this.nodeClickList).then(() => { - // this.$message({ - // type: 'success', - // message: '鍒犻櫎鎴愬姛!' - // }); - // this.getAttr(); - // }).catch(res => { - // this.$message({ - // type: 'warning', - // message: res - // }); - // }) - // }).catch(() => { - // this.$message({ - // type: 'info', - // message: '宸插彇娑堝垹闄�' - // }); - // }); - // } - // }) - // }).catch(() => { - // this.$message({ - // type: 'info', - // message: '宸插彇娑堝垹闄�' - // }); - // }); - // }, - nodeClick(data){ - this.nodeClickList = data - console.log(data) + pageSizes(val){ + this.pageSize=val + }, + currentPages(val){ + this.currentPage=val + }, + templateOids(val){ + this.templateOid=val + }, + tableDataArrays(val){ + this.tableDataArray=val } } } diff --git a/Source/UBCS-WEB/vue.config.js b/Source/UBCS-WEB/vue.config.js index 9beaffe..f13452f 100644 --- a/Source/UBCS-WEB/vue.config.js +++ b/Source/UBCS-WEB/vue.config.js @@ -27,11 +27,16 @@ '/api': { //鏈湴鏈嶅姟鎺ュ彛鍦板潃 // target: 'http://localhost:37000', + // target: 'http://localhost:37000', + target: 'http://192.168.1.51:37000', + //target: 'http://192.168.3.7:37000', + // target: 'http://dev.vci-tech.com:37000', + // target: 'http://192.168.1.51:37000/', + // target: 'http://localhost:37000', // target: 'http://192.168.1.63:37000', //target: 'http://192.168.3.7:37000', // target: 'http://dev.vci-tech.com:37000', - target: 'http://dev.vci-tech.com:37000', - // target: 'http://192.168.1.51:37000/', + //target: 'http://192.168.1.51:37000/', //杩滅▼婕旂ず鏈嶅姟鍦板潃,鍙敤浜庣洿鎺ュ惎鍔ㄩ」鐩� // target: 'https://saber.bladex.vip/api', ws: true, -- Gitblit v1.9.3