From daeaadd1ca23beaa4a435aa908bf548e6322041d Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期四, 25 五月 2023 19:06:58 +0800 Subject: [PATCH] 处理分类树问题以及搭建组件布局 --- Source/UBCS-WEB/src/components/Tree/classifyTrees.vue | 112 +++++++++++++--------- Source/UBCS-WEB/src/components/Crud/Crud.vue | 19 +++ Source/UBCS-WEB/src/components/Tree/classifyTreeform.vue | 10 + Source/UBCS-WEB/src/main.js | 2 Source/UBCS-WEB/src/views/MasterData/items.vue | 77 +++++++++++++++ Source/UBCS-WEB/src/components/Tree/attrCrud.vue | 23 ++-- Source/UBCS-WEB/src/views/modeling/classifyTree.vue | 1 7 files changed, 184 insertions(+), 60 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Crud/Crud.vue b/Source/UBCS-WEB/src/components/Crud/Crud.vue new file mode 100644 index 0000000..30b5efe --- /dev/null +++ b/Source/UBCS-WEB/src/components/Crud/Crud.vue @@ -0,0 +1,19 @@ +<template> + <avue-crud :data="data" ></avue-crud> +</template> + +<script> +export default { + name: "Crud.vue", + data(){ + return{ + data:[], + option:{} + } + } +} +</script> + +<style scoped> + +</style> diff --git a/Source/UBCS-WEB/src/components/Tree/attrCrud.vue b/Source/UBCS-WEB/src/components/Tree/attrCrud.vue index e5871d2..4121adf 100644 --- a/Source/UBCS-WEB/src/components/Tree/attrCrud.vue +++ b/Source/UBCS-WEB/src/components/Tree/attrCrud.vue @@ -539,7 +539,7 @@ cell: false, labelWidth: 110, width: 125, - sortable: true, + sortable: false, }, { label: "灞炴�т腑鏂囧悕绉�", @@ -860,16 +860,17 @@ }, // 鎺掑簭 sortChange(val) { - switch (val.order) { - // case "ascending": - // this.data = this.data.sort((a,b) => { return b['name'].localeCompare(a['name']) }) - // this.data = this.data.sort((a,b) => { return b['id'].localeCompare(a['id']) }) - // break; - // case "descending": - // this.data = this.data.sort((a,b) => { return a['name'].localeCompare(b['name']) }) - // this.data = this.data.sort((a,b) => { return a['id'].localeCompare(b['id']) }) - // break; - } + console.log(val) + // switch (val.order) { + // // case "ascending": + // // this.data = this.data.sort((a,b) => { return b['name'].localeCompare(a['name']) }) + // // this.data = this.data.sort((a,b) => { return b['id'].localeCompare(a['id']) }) + // // break; + // // case "descending": + // // this.data = this.data.sort((a,b) => { return a['name'].localeCompare(b['name']) }) + // // this.data = this.data.sort((a,b) => { return a['id'].localeCompare(b['id']) }) + // // break; + // } } } } diff --git a/Source/UBCS-WEB/src/components/Tree/classifyTreeform.vue b/Source/UBCS-WEB/src/components/Tree/classifyTreeform.vue index dadabd7..5ff1791 100644 --- a/Source/UBCS-WEB/src/components/Tree/classifyTreeform.vue +++ b/Source/UBCS-WEB/src/components/Tree/classifyTreeform.vue @@ -42,7 +42,8 @@ }, { label:"鎻忚堪", - prop:"description" + prop:"description", + labelWidth:128, }, { label: '瀛樺偍鐨勪笟鍔$被鍨�', @@ -57,17 +58,18 @@ }, { label:"缂栫爜瑙勫垯", - prop:"coderuleoidName" + prop:"coderuleoidName", + labelWidth:128, }, { - label:"蹇界暐澶у皬鍐欐煡閲�", + label:"鍏抽敭灞炴�ф煡璇㈣鍒�", prop:"codekeyattrrepeatoidName", labelWidth:128, }, { label:"鐩镐技鏌ヨ瑙勫垯", prop:"codeResembleRuleOidName", - labelWidth:100, + labelWidth:128, }, ] }, diff --git a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue index 4039188..f3d1fd1 100644 --- a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue +++ b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue @@ -12,7 +12,6 @@ <el-button plain size="small" type="primary" @click="flushed">鍒锋柊</el-button> </div> <div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px"> - </div> </div> <!-- 鏍戣妭鐐规坊鍔犲璇濇--> @@ -50,9 +49,9 @@ </el-dialog> <!-- 淇敼瀵硅瘽妗�--> <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="淇敼鍒嗙被"> - <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform> + <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform> </el-dialog> - <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false" + <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" :defaultExpandAll="false" :option="Treeoption" style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px" @node-click=" nodeClick" @@ -74,6 +73,7 @@ @row-save="CrudRowSave" @row-del="CrudRowDel" @row-update="CrudRowUpdata" + :before-close="beforeClose" > <template slot="menuLeft"> <el-button plain size="small" type="primary" @click="FindFormVisible = true;">鏌ヨ</el-button> @@ -118,12 +118,12 @@ <el-container> <el-aside width="300px"> <div style="margin-bottom: 5px"><el-tag>涓婚搴撳垎绫�</el-tag></div> + <!-- 鍏嬮殕妯℃澘鐨勬爲 娌跨敤棣栭〉鏍戠殑loading鍜宱ption锛屼絾鏄痙ata鍜寁-model缁戝畾鐨勬暟鎹垱寤轰竴涓柊鐨勫彉閲忥紝鍙﹀鐐瑰嚮鏂规硶涔熸槸閲嶆柊鑾峰彇鏉ユ搷浣滃厠闅嗘ā鏉跨殑鏁版嵁--> <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false" :option="Treeoption" style="height: 50.5vh;margin-right: 10px" - @node-click=" nodeClick" - @check-change="checkChange" + @node-click="ClonenodeClick" > </avue-tree> </el-aside> @@ -244,6 +244,7 @@ TreeAddFormVisible: false, //褰撳墠鐐瑰嚮椤� nodeClickList: "", + ClonenodeClickList:"", //鍒嗙被鍜屼富棰樺簱鐘舵�� TreeFlag: false, //鏍戝姞杞� @@ -264,7 +265,10 @@ }, //avue-tree鏁版嵁锛屾殏鏃舵病鏈変綔鐢紝閲岄潰鍔熻兘鐢╡lement鍐欎簡锛屽彧鐢╝vue鐨勪竴涓爲缁勪欢涓嶇敤鍐呯疆琛ㄥ崟浜嗐�� TreeAvueform: {}, + //鍏嬮殕鏍� + CloneTreeAvueform:{}, Treedata: [], + CloneTreedata:[], Treeoption: { addBtn: false, editBtn: false, @@ -290,7 +294,7 @@ CloneSelectOptions: [{ value: '0', label: '妯℃澘缂栧彿' - }, + }, { value: '1', label: '妯℃澘鍚嶇О' @@ -343,7 +347,7 @@ }, { label: "妯℃澘鍚嶇О", - prop: "name" + prop: "name", }, { label: "妯℃澘鎻忚堪", @@ -401,18 +405,20 @@ getAttr() { getAtrrList().then(res => { this.Treedata = res.data; - this.Treedata.forEach(() => { + this.CloneTreedata = res.data; + this.Treedata.forEach((item) => { for (let i = 0; i < this.Treedata.length; i++) { this.Treedata[i].value = i; } }) //璋冪敤淇敼灞炴�у悕鏂规硶 this.ModifyProperties(this.Treedata, 'text', 'label'); + this.ModifyProperties(this.CloneTreedata, 'text', 'label'); }).catch(res => { this.$message.error(res) }) }, - //瀹氫箟涓�涓慨鏀瑰璞″睘鎬у悕鐨勬柟娉� 杩欓噷鍒敼锛侊紒锛佸ソ鍍忔槸鍚庡彴鎺ュ彛鏁版嵁瀛楁涓嶄竴鑷达紝娣诲姞鐨勬柟娉曘�傚叿浣撲粈涔堝師鍥犳垜涔熷繕璁颁簡 + //瀹氫箟涓�涓慨鏀规暟鎹睘鎬у悕鐨勬柟娉� ModifyProperties(obj, oldName, newName) { for (let key in obj) { if (key === oldName) { @@ -598,21 +604,12 @@ }) //妯℃澘绠$悊琛ㄦ牸鏁版嵁 await gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}).then(res => { - if (this.CloneVisible != true) { - this.Formlist = res.data.data.filter(item => { - if (item.codeclassifyoid != "") { - this.codeClassifyOid = item.codeclassifyoid - return item.codeclassifyoid == this.nodeClickList.oid - } - }) - } else { - this.CloneFormlist = res.data.data.filter(item => { - if (item.codeclassifyoid != "") { - this.codeClassifyOid = item.codeclassifyoid - return item.codeclassifyoid == this.nodeClickList.oid - } - }) - } + this.Formlist = res.data.data.filter(item => { + if (item.codeclassifyoid != "") { + this.codeClassifyOid = item.codeclassifyoid + return item.codeclassifyoid == this.nodeClickList.oid + } + }) gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => { this.ProData = res.data.data console.log(this.ProData) @@ -633,9 +630,22 @@ console.log(error) } }, + //鍏嬮殕妯℃澘鏍戠殑鐐瑰嚮鍒囨崲鏁版嵁 + async ClonenodeClick(data){ + this.ClonenodeClickList=data; + console.log("aaa",this.ClonenodeClickList.oid) + await gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}).then(res=>{ + this.CloneFormlist = res.data.data.filter(item => { + if (item.codeclassifyoid != "") { + this.codeClassifyOid = item.codeclassifyoid + return item.codeclassifyoid == this.ClonenodeClickList.oid + } + }) + }) + }, //tab鏍忓垏鎹� handleChange(column) { - this.type = column + this.type = column; }, // //楂樼骇鏌ヨ鎸夐挳 // handleSelectChange(key) { @@ -702,22 +712,24 @@ this.Formlist = res.data.data }) }, + //妯℃澘绠$悊琛ㄦ牸娣诲姞 CrudRowSave(row,done) { - debugger - console.log(nodeClickList.length) if (this.nodeClickList.length <= 0) { this.$message({ type: 'warning', message: '璇峰厛浠庢爲涓婇�夋嫨涓�鏉℃暟鎹�!' }); } else { - console.log(this.nodeClickList) let codeClassifyOid = this.codeClassifyOid this.$set(row, "codeclassifyoid", codeClassifyOid) addSave(row).then(res => { + this.$message({ + type: "success", + message: "娣诲姞鎴愬姛!" + }); + done(row) this.CrudRend() - done() }).catch(res => { this.$message({ type: 'info', @@ -727,14 +739,16 @@ } }, //妯℃澘绠$悊淇敼 - CrudRowUpdata(row) { - editSave(row).then(() => { + CrudRowUpdata(row,index,done) { + editSave(row).then((res) => { this.CrudRend() - }).catch(res => { this.$message({ - type: 'info', - message: res + type: "success", + message: "鎿嶄綔鎴愬姛!" }); + done() + }).catch(res => { + console.log(res) }) }, //妯℃澘绠$悊鍒犻櫎 @@ -777,7 +791,7 @@ }, //鍏嬮殕妯℃澘閫夋嫨纭畾 Clonehandler(){ - if(this.CloneFormlist.length <= 0){ + if(this.CloneSelect.length <= 0){ this.$message({ type: 'warning', message: '璇烽�夋嫨瑕佸厠闅嗙殑妯℃澘!' @@ -788,7 +802,8 @@ message: '鍙兘閫夋嫨涓�鏉℃暟鎹�!' }); } else { - this.CloneinnerVisible=true + this.CloneinnerVisible=true; + } }, //鐐瑰嚮浠庡叾瀹冩ā鏉垮厠闅� @@ -804,16 +819,27 @@ }, //鍏嬮殕妯℃澘鍗曢�夋鏀瑰彉 selectionChange(row){ - console.log(row) - this.CloneSelect=row + this.CloneSelect=row; + //鍙屽悜缁戝畾锛屾彁浜よ〃鍗曡緭鍏ユ鍥炲~涓婂綋鍓嶉�夋嫨鐨勬暟鎹� this.CloneModel.id=row[0].id; this.CloneModel.name=row[0].name; + //杩欓噷鏈夌偣缁曪紝CloneSelect鏄垜閫夋嫨妗嗛�夋嫨鐨勬暟鎹�傜瓑浜巘his.nodeClickList.oid鏄洜涓猴紝鍏嬮殕妯℃澘浼犻�掓暟鎹鎶婂綋鍓嶉�夋嫨鏍戠殑oid浼犻�掔粰鍚庣銆傝�屼笉鏄綋鍓嶈鍏嬮殕妯℃澘鐨刼id + this.CloneSelect[0].codeclassifyoid=this.nodeClickList.oid }, //鍏嬮殕琛ㄥ崟鎻愪氦 - Clonesubmit(done){ + Clonesubmit(row,done){ + //閲嶆柊璧嬪�糃loneSelect浼犻�掔殑鏁版嵁涓鸿緭鍏ユ鍙互淇敼鐨勬暟鎹紝CloneModel鎻愪氦琛ㄥ崟杈撳叆妗嗗弻鍚戠粦瀹氭暟鎹� + this.CloneSelect[0].id=this.CloneModel.id; + this.CloneSelect[0].name=this.CloneModel.name; copy(this.CloneSelect[0]).then(res=>{ - console.log(res) - done() + //鍥犱负鏄祵濂楀脊绐楁墍浠ユ墜鍔ㄥ叧闂瑿loneinnerVisible锛孋loneVisible涓や釜寮圭獥銆� + this.CloneinnerVisible=false + this.CloneVisible=false + this.$message.success("澶嶅埗鎴愬姛") + this.CrudRend() + done(row) + }).catch(res=>{ + done(res) }) }, //鍒锋柊 @@ -831,10 +857,6 @@ setTimeout(() => { this.FormLoing = false }, 600); - }, - // 宸︽爲澶氶�� - checkChange(val) { - console.log(val) }, } } diff --git a/Source/UBCS-WEB/src/main.js b/Source/UBCS-WEB/src/main.js index df2be16..054fbb3 100644 --- a/Source/UBCS-WEB/src/main.js +++ b/Source/UBCS-WEB/src/main.js @@ -40,6 +40,7 @@ import referConfigCrudDialog from "@/components/code-dialog-page/referConfigCrudDialog" import referConfigFormDialog from "@/components/code-dialog-page/referConfigFormDialog" import businessAdd from "@/views/modeling/BusinessAdd" +import TableCrud from "@/components/Crud/Crud" // 娉ㄥ唽鍏ㄥ眬crud椹卞姩 window.$crudCommon = crudCommon; @@ -78,6 +79,7 @@ Vue.component('referConfigFormDialog',referConfigFormDialog) Vue.component('businessAdd',businessAdd) Vue.component('attrCrud',attrCrud) +Vue.component('TableCrud',TableCrud) diff --git a/Source/UBCS-WEB/src/views/MasterData/items.vue b/Source/UBCS-WEB/src/views/MasterData/items.vue new file mode 100644 index 0000000..94b1072 --- /dev/null +++ b/Source/UBCS-WEB/src/views/MasterData/items.vue @@ -0,0 +1,77 @@ +<template> + <el-container> + <el-aside> + <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;"> + <avue-tree :option="option" :data="data" v-model="form" style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px"></avue-tree> + </basic-container> + </el-aside> + <el-main> + <TableCrud></TableCrud> + </el-main> + </el-container> +</template> + +<script> +export default { + name: "items.vue", + data(){ + return{ + form:{}, + data:[ + { + value:0, + label:'涓�绾ч儴闂�', + children:[ + { + value:1, + label:'涓�绾ч儴闂�1', + },{ + value:2, + label:'涓�绾ч儴闂�2', + } + ] + },{ + value:3, + label:'浜岀骇閮ㄩ棬', + children:[ + { + value:4, + label:'浜岀骇閮ㄩ棬1', + },{ + value:5, + label:'浜岀骇閮ㄩ棬2', + } + ] + } + ], + option:{ + title:'鎴戞槸鏍囬', + filterText:"鎼滅储鍏抽敭瀛楄嚜瀹氫箟", + defaultExpandAll:true, + addBtnText:'鏂板鑷畾涔夋枃妗�', + editBtnText:'淇敼鑷畾涔夋枃妗�', + delBtnText:'鍒犻櫎鑷畾涔夋枃妗�', + defaultExpandedKeys:[1], + height:900, + formOption:{ + labelWidth:100, + column:[{ + label:'鑷畾涔夐」', + prop:'label' + }], + }, + props:{ + labelText:'鏍囬', + label:'label', + value:'value', + children:'children' + } + } + } + } +} +</script> + +<style scoped> + +</style> diff --git a/Source/UBCS-WEB/src/views/modeling/classifyTree.vue b/Source/UBCS-WEB/src/views/modeling/classifyTree.vue index 761a794..d3596ee 100644 --- a/Source/UBCS-WEB/src/views/modeling/classifyTree.vue +++ b/Source/UBCS-WEB/src/views/modeling/classifyTree.vue @@ -15,6 +15,7 @@ crudTreeOption: { index: true, border: true, + height:180, column: [ { label: "妯℃澘缂栧彿", -- Gitblit v1.9.3