From d1b82bdc296e7bf882f50015a56c99b05b5ff9fd Mon Sep 17 00:00:00 2001 From: ludc Date: 星期一, 25 三月 2024 18:31:16 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue | 296 +++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 195 insertions(+), 101 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue b/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue index 55a61d9..fd939dc 100644 --- a/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue +++ b/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue @@ -4,55 +4,65 @@ <!-- 宸︿晶鑿滃崟--> <el-aside> <basic-container> - <div style="height: calc(100vh - 142px);!important;"> + <div ref="TreeBox" style="height: calc(100vh - 144px);!important;"> <div class="headerCon" style="display: flex; flex-wrap: wrap;margin-bottom: 5px"> - <el-button plain size="small" type="primary" @click="TreeAdd">娣诲姞 + <el-button v-if="permissionList.TreeAddStatus" plain size="small" type="primary" @click="TreeAdd">娣诲姞 </el-button> - <el-button v-if="permissionList.TreeEditStatus" plain size="small" type="primary" @click="TreeEdit">淇敼 + <el-button v-if="permissionList.TreeEditStatus" v-show="allButtons" plain size="small" type="primary" + @click="TreeEdit">淇敼 </el-button> - <el-button v-if="permissionList.TreeDelStatus" plain size="small" type="primary" @click="TreeDel">鍒犻櫎 + <el-button v-if="permissionList.TreeDelStatus" v-show="allButtons" plain size="small" type="primary" + @click="TreeDel">鍒犻櫎 </el-button> - <el-button v-if="permissionList.flushedStatus" plain size="small" type="primary" @click="flushed">鍒锋柊 + <el-button v-if="permissionList.flushedStatus" v-show="allButtons" plain size="small" type="primary" + @click="flushed">鍒锋柊 </el-button> - <el-button v-if="permissionList.EnableStatus" plain size="small" type="primary" @click="Enable">鍚敤 + <el-button v-if="permissionList.EnableStatus" v-show="allButtons" plain size="small" type="primary" + @click="Enable">鍚敤 </el-button> - <el-button v-if="permissionList.DeactivateStatus" plain size="small" type="primary" @click="Deactivate">鍋滅敤 + <el-button v-if="permissionList.DeactivateStatus" v-show="allButtons" plain size="small" type="primary" + @click="Deactivate">鍋滅敤 </el-button> - <el-button v-if="permissionList.ImportExcelStatus" plain size="small" type="primary" + <el-button v-if="permissionList.ImportExcelStatus" v-show="allButtons" plain size="small" type="primary" @click.native="ImportExcel">瀵煎叆 </el-button> - <el-button v-if="permissionList.ExportExcelStatus" plain size="small" type="primary" @click="ExportExcel"> + <el-button v-if="permissionList.ExportExcelStatus" v-show="allButtons" plain size="small" type="primary" + @click="ExportExcel"> 瀵煎嚭 </el-button> - <el-button v-if="permissionList.flowingBtnStuatus" plain + <el-button v-if="permissionList.flowingBtnStuatus" v-show="allButtons" plain size="small" style="width: 56px;text-align: center;padding-left: 3px" type="primary" @click="flowingDependHandler">娴佹按澶勭悊 </el-button> - <el-button v-if="permissionList.classifyAuth" plain size="small" + <el-button v-if="permissionList.classifyAuth" v-show="allButtons" plain size="small" style="width: 56px;text-align: center;padding-left: 3px" type="primary" @click="classifyAuthHandler">鍒嗙被鎺堟潈 </el-button> + <el-button v-if="permissionList.classifyAuth" v-show="allButtons" plain size="small" + style="width: 56px;text-align: center;padding-left: 3px" type="primary" + @click="dataAuthHandler">鏁版嵁鎺堟潈 + </el-button> </div> <!-- 宸︿晶鏍�--> - - <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" - :defaultExpandAll="false" - :option="Treeoption" - class="classifyTree" - style="height: 690px" - @node-click="nodeClick" - > - <template slot-scope="{ node, data }" class="el-tree-node__label"> - <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item" - effect="dark" - open-delay="500" - placement="right-start"> + <div style="height: calc(100vh - 242px);overflow: auto"> + <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" + :defaultExpandAll="false" + :option="Treeoption" + class="classifyTree" + @node-click="nodeClick" + > + <template slot-scope="{ node, data }" class="el-tree-node__label"> + <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item" + effect="dark" + open-delay="500" + placement="right-start"> <span style="font-size: 14px;"> {{ (node || {}).label }} </span> - </el-tooltip> - </template> - </avue-tree> + </el-tooltip> + </template> + </avue-tree> + </div> </div> <!-- 鏍戣妭鐐规坊鍔犲璇濇--> @@ -113,13 +123,20 @@ </el-dialog> <!-- 鍒嗙被鎺堟潈瀵硅瘽妗�--> <classify-auth-dialog + :TreeNode="TreeEditObj" :classifyData="classifyData" :visible.sync="classifyAuthVisible" ></classify-auth-dialog> + <!-- 鏁版嵁鎺堟潈瀵硅瘽妗� --> + <data-auth-dialog + :TreeNode="TreeEditObj" + :classifyData="classifyData" + :visible.sync="dataAuthVisible" + ></data-auth-dialog> </basic-container> </el-aside> <el-main> - <basic-container style="height: calc(100vh - 150px);"> + <basic-container> <!-- 鍙充晶琛ㄦ牸--> <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs> <span v-if="type.prop==='tab1'"> @@ -147,31 +164,19 @@ @click="TemRefresh">鍒锋柊</el-button> <el-button v-if="permissionList.CloneBtnStuatus" plain size="small" type="primary" @click="CloneBtn">浠庡叾瀹冩ā鏉垮厠闅�</el-button> <!-- 鏌ヨ瀵硅瘽妗�--> - <el-dialog :visible.sync="FindFormVisible" append-to-body title="楂樼骇鏌ヨ"> - <div> - <el-button size="small" type="primary" @click="AdvQueries">鏌ヨ</el-button> - <el-button size="small" type="primary">閲嶇疆</el-button> - </div> - <div style="padding-left: 80px;margin-top: 15px;"> - <template v-for="(value, key) in FindSelect"> - <div style="display: flex; justify-content: space-around; width: 85%; margin-bottom: 15px"> - <el-select v-model="FindSelect[key]" placeholder="璇烽�夋嫨" style="width: 28%" - @change="handleSelectChange(key)"> - <el-option label="妯℃澘缂栧彿" value="0"></el-option> - <el-option label="妯℃澘鍚嶇О" value="1"></el-option> - <el-option label="妯℃澘鎻忚堪" value="2"></el-option> - <el-option label="鐗堟湰鍙�" value="3"></el-option> - <el-option label="鐘舵��" value="4"></el-option> - </el-select> - <el-select v-model="condition[0]" placeholder="璇烽�夋嫨" style="width: 15%"> - <el-option label="鍖呭惈" value="0"></el-option> - <el-option label="绛変簬" value="1"></el-option> - </el-select> - <el-input v-model="QueryArray[key]" style="width: 49%"></el-input> - <span> <i class="el-icon-delete" style="font-size: 22px;margin-top:8px;margin-left: 10px"/></span> + <el-dialog :visible.sync="FindFormVisible" append-to-body title="楂樼骇鏌ヨ" width="30%" @close="searchReset"> + <div style="text-align: center; margin-top: 5px;"> + <el-select v-model="searchSelect" style="width: 35%"> + <el-option v-for="item in crudFindTreeArray" :key="item.field" :label="item.title" + :value="item.queryField"></el-option> + </el-select> + <el-input v-model="SearchValue" + placeholder="璇疯緭鍏ュ叧閿瓧杩涜鏌ヨ" style="width: 45%; margin-left: 5px;"></el-input> </div> - </template> - </div> + <span slot="footer" class="dialog-footer"> + <el-button type="primary" @click="advQueries">鏌ヨ</el-button> + <el-button type="danger" @click="searchReset">閲嶇疆</el-button> + </span> </el-dialog> <!-- 妯℃澘鍏嬮殕 --> <el-dialog :before-close="cloneClose" :visible.sync="CloneVisible" append-to-body title="鍏嬮殕妯℃澘"> @@ -333,7 +338,6 @@ TreeSave, TreeDel, TreeCheckDel, - TreeObjcet, TreeEnable, TreeDeactivate, gridCodeClassifyTemplate, @@ -362,6 +366,41 @@ name: "classifyTrees.vue", data() { return { + crudFindTreeArray: [ + { + title: '妯℃澘缂栧彿', + field: 'id', + fieldType: 'text', + queryField: 'id' + }, + { + title: '妯℃澘鍚嶇О', + field: 'name', + fieldType: 'text', + queryField: 'name' + }, + { + title: '妯℃澘鎻忚堪', + field: 'description', + fieldType: 'text', + queryField: 'description' + }, + { + title: '鐗堟湰鍙�', + field: 'revisionSeq', + fieldType: 'text', + queryField: 'revisionSeq' + }, + { + title: '鐘舵��', + field: 'lcStatusText', + fieldType: 'text', + queryField: 'lcStatusText' + }, + ], + searchSelect: 'id', + SearchValue: '', + allButtons: Boolean, btnAuthList: [], activeName: 'first', masterRow: null, @@ -452,6 +491,8 @@ TreeAddFormVisible: false, //鍒嗙被鎺堟潈瀵硅瘽妗� classifyAuthVisible: false, + //鏁版嵁鎺堟潈瀵硅瘽妗� + dataAuthVisible: false, //褰撳墠鐐瑰嚮椤� nodeClickList: "", ClonenodeClickList: "", @@ -493,6 +534,7 @@ Treedata: [], CloneTreedata: [], Treeoption: { + height: 'auto', addBtn: false, editBtn: false, delBtn: false, @@ -543,7 +585,7 @@ }, { label: '鎻忚堪', - prop: 'desc', + prop: 'description', type: 'textarea', span: 24 } @@ -649,21 +691,31 @@ showEditBtn: false, //浼犻�掔粰鍒嗙被鎺堟潈瀛愮粍浠跺璇濇鐨勫綋鍓嶉�変腑鐨勫垎绫昏妭鐐逛俊鎭� classifyData: "", + } }, watch: {}, mounted() { - this.type = this.tabOption.column[0]; + this.type = this.tabOption.column[0] || {label: '鍩烘湰淇℃伅', prop: 'tab1'}; this.getAttr(); - const treeEle = this.$refs.tree.$el - treeEle.addEventListener('click', (e) => { - if (e.target.nodeName !== 'SPAN') { + // const treeEle = this.$refs.tree.$el; + const TreeBox = this.$refs.TreeBox; + // console.log(this.$refs.TreeBox) + // treeEle.addEventListener('click', (e) => { + // console.log('2') + // if (e.target.nodeName !== 'SPAN') { + // this.$refs.tree.setCurrentKey(null); + // this.nodeClickList = {}; + // this.TreeFlagCode = true; + // this.allButtons = false; + // } + // }, true) + TreeBox.addEventListener('click', (e) => { + if (e.target.nodeName !== 'SPAN' && e.target.nodeName !== 'BUTTON') { this.$refs.tree.setCurrentKey(null); this.nodeClickList = {}; this.TreeFlagCode = true; - // this.$nextTick(()=>{ - // this.btnAuthList = []; - // }) + this.allButtons = false; } }, true) }, @@ -671,7 +723,7 @@ ...mapGetters(["permission"]), permissionList() { return { - TreeAddStatus: this.vaildData(this.btnAuthList.tree_add, false), + TreeAddStatus: this.vaildData(this.permission.classifyTree.tree_add, false), TreeEditStatus: this.vaildData(this.btnAuthList.tree_edit, false), TreeDelStatus: this.vaildData(this.btnAuthList.tree_delete, false), flushedStatus: this.vaildData(this.btnAuthList.tree_break, false), @@ -688,7 +740,7 @@ }, treeStyle() { return { - height: this.btnAuthList.length > 0 ? '620px' : '785px', + height: this.allButtons ? '610px' : '690px', }; }, crudTreeOption() { @@ -696,7 +748,8 @@ index: true, border: true, columnBtn: false, - height: 180, + height: 150, + refreshBtn: false, addBtn: this.Formlist.length <= 0 && this.nodeClickList != "", editBtn: false, delBtn: false, @@ -746,7 +799,7 @@ codeClassifyOid: '' } } - } + }, }, created() { }, @@ -757,8 +810,17 @@ this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒') return; } - this.classifyData = this.nodeClickList; + // this.classifyData = this.nodeClickList; this.classifyAuthVisible = true; + }, + // 鏁版嵁鎺堟潈瀵硅瘽妗嗘墦寮� + dataAuthHandler() { + if (this.nodeClickList.oid === '' || this.nodeClickList.oid === undefined) { + this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒') + return; + } + // this.classifyData = this.nodeClickList; + this.dataAuthVisible = true; }, flowingDependHandler() { if (this.nodeClickList.length <= 0) { @@ -856,7 +918,12 @@ getAttr() { this.loading = true; return new Promise((resolve, reject) => { - getAtrrList() + let conditionMaps = {}; + conditionMaps["conditionMap[authType]"] = "classify_auth"; + conditionMaps["conditionMap[buttonCode]"] = "classifyTree"; + // 鍒嗙被鎺堟潈涓槸鍚﹀叿澶囨煡鐪嬫潈闄� + conditionMaps["conditionMap[menuCode]"] = "classify_view"; + getAtrrList(conditionMaps) .then(res => { this.Treedata = res.data; this.CloneTreedata = res.data; @@ -1071,7 +1138,6 @@ this.loading = false; } }, - async Deactivate() { if (Object.keys(this.nodeClickList).length < 1) { this.$message.warning('璇峰厛浠庢爲涓婇�夋嫨涓�鏉℃暟鎹�'); @@ -1116,7 +1182,12 @@ }, //鏍戠偣鍑讳簨浠� async nodeClick(data) { - getAuthButtonList({classifyId: data.oid,code:'classifyTree',authType:'classify_auth'}).then(res => { + const response = this.findTheTopLevelNode(data, this.Treedata) + this.classifyData = response; + // console.log(response) + // console.log('response',response.attributes.id) + this.allButtons = true; + getAuthButtonList({classifyId: data.oid, code: "classifyTree", authType: "classify_auth"}).then(res => { this.btnAuthList = res.data.data; }).catch(error => { console.log(error) @@ -1129,10 +1200,9 @@ this.crudArray = [] try { this.requestCount += 1; - const [res1, res2, res3] = await Promise.all([ - TreeObjcet(data.oid), + const [res1, res2] = await Promise.all([ + getObjectByOid(data.oid), gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}), - getObjectByOid(data.oid) ]); this.FlagObj = res1.data.data; this.Formlist = res2.data.data.filter(item => { @@ -1150,7 +1220,7 @@ this.ProData = []; this.crudOid = '' } - this.TreeEditObj = res3.data.data; + this.TreeEditObj = res1.data.data; if (this.TreeEditObj.isParticipateCheck === null || this.TreeEditObj.isParticipateCheck === undefined || this.TreeEditObj.isParticipateCheck === "") { this.$set(this.TreeEditObj, "isParticipateCheck", 1) return @@ -1159,7 +1229,32 @@ this.$message.error(error); } }, - + // 閫掑綊鏌ユ壘椤跺眰鑺傜偣Id + findTheTopLevelNode(data, TreeData) { + if (data.parentId === "") { + return data; + } + const parentNode = this.findParentNode(data.parentId, TreeData); + if (parentNode) { + return this.findTheTopLevelNode(parentNode, TreeData); // 缁х画鏌ユ壘鐖惰妭鐐� + } + }, + // 閫掑綊鏌ユ壘鍑烘潵澶氬眰鑺傜偣鐨勭埗鑺傜偣 + findParentNode(parentId, TreeData) { + for (const node of TreeData) { + if (node.oid === parentId) { + return node; + } + // 濡傛灉褰撳墠鑺傜偣杩樻湁瀛愯妭鐐癸紝缁х画鍘绘煡瀛愯妭鐐圭殑鐖惰妭鐐� + if (node.children) { + const parentNode = this.findParentNode(parentId, node.children); + if (parentNode) { + return parentNode; + } + } + } + return null; + }, async gridCode() { try { const res = await gridCodeClassifyTemplateAttr({ @@ -1210,34 +1305,28 @@ handleChange(column) { this.type = column; }, - AdvQueries() { - this.FindFormVisible = false - //濡傛灉鍏ㄩ儴涓虹┖ allEmpty涓簍rue - const allEmpty = Object.values(this.QueryArray).every(value => !value); - //濡傛灉鍏ㄩ儴涓虹┖锛岀偣鍑绘煡璇㈠嚭鐜版墍鏈夋暟鎹� - if (allEmpty) { - gridCodeClassifyTemplate().then(res => { - this.Formlist = res.data.data - }) + advQueries() { + if (this.SearchValue === "") { + this.$message.warning('璇疯緭鍏ヨ鏌ヨ鐨勫唴瀹癸紒'); } else { - //榛樿鏄瓑浜� - gridCodeClassifyFindTemplate({'conditionMap[id]': this.QueryArray.id}, - {'conditionMap[name]': this.QueryArray.name}, - {'conditionMap[description]': this.QueryArray.description}, - {'conditionMap[revisionValue]': this.QueryArray.revisionValue}, - {'conditionMap[lcStatus]': this.QueryArray.lcStatus} - ).then(res => { - this.Formlist = res.data.data - }) + const condition = { + 'conditionMap[codeclassifyoid]': this.nodeClickList.oid, + [`conditionMap[${this.searchSelect}]`]: this.SearchValue + }; + gridCodeClassifyFindTemplate(condition).then(res => { + if (res.data.data.length > 0) { + this.Formlist = res.data.data; + } else { + this.$message.error('鏆傛湭鏌ヨ鍒扮浉鍏虫ā鏉匡紒') + } + this.FindFormVisible = false; + }); } }, - //妯℃澘绠$悊娓叉煋 - CrudRend() { - gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': this.nodeClickList.oid}).then(res => { - this.Formlist = res.data.data - }) + searchReset() { + this.SearchValue = ""; + this.searchSelect = 'id' }, - //妯℃澘绠$悊琛ㄦ牸娣诲姞 CrudRowSave(row, done) { if (this.nodeClickList.length <= 0) { @@ -1435,9 +1524,9 @@ </script> <style lang="scss" scoped> -.el-container { - height: 100%; -} +//.el-container { +// height: 100%; +//} .el-aside { //height: calc(100% - 30px); @@ -1482,4 +1571,9 @@ .headerCon > .el-button:nth-child(9) { margin-left: 0; } + +///deep/.el-scrollbar__bar.is-vertical{ +// width: 8px; +//} + </style> -- Gitblit v1.9.3