| | |
| | | :close-on-click-modal="false" |
| | | @close="cancelDialog"> |
| | | <el-container style="height: 550px"> |
| | | <el-aside> |
| | | <basic-container style="height: 500px"> |
| | | <avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick"> |
| | | <el-aside style="height: 500px"> |
| | | <basic-container v-loading="leftLoading"> |
| | | <div style="height: 425px"> |
| | | <avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="font-size: 15px"> |
| | | <span> |
| | | <i class="el-icon-user-solid"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | | </avue-tree> |
| | | </div> |
| | | </basic-container> |
| | | </el-aside> |
| | | |
| | | <el-main> |
| | | <basic-container style="height: 500px"> |
| | | <el-main style="height: 500px"> |
| | | <basic-container v-loading="rightLoading"> |
| | | <h3 style="margin: 0">模块权限配置</h3> |
| | | <div style="height: 445px;"> |
| | | <avue-tree ref="uiTree" :data="uiTreeData" :option="uiTreeOption"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="font-size: 15px"> |
| | | <span> |
| | | <i :class="data.icon"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | |
| | | name: "UIDialog", |
| | | data() { |
| | | return { |
| | | leftLoading:false, |
| | | rightLoading:false, |
| | | dialog: { |
| | | showDialog: false, |
| | | title: "UI授权", |
| | |
| | | uiTreeOption: { |
| | | nodeKey:'oid', |
| | | checkOnClickNode:true, |
| | | defaultExpandKeys:[], |
| | | defaultExpandedKeys:this.defaultExpandKeys, |
| | | multiple: true, |
| | | menu: false, |
| | | addBtn: false, |
| | |
| | | this.dialog.showDialog = false; |
| | | }, |
| | | getTreeList() { |
| | | const loading = this.$loading({}); |
| | | this.leftLoading = true; |
| | | gridRoles().then(res => { |
| | | this.treeData = res.data.data; |
| | | loading.close(); |
| | | this.leftLoading = false; |
| | | }).catch(error=>{ |
| | | loading.close(); |
| | | this.leftLoading = false; |
| | | }) |
| | | }, |
| | | // 角色点击 |
| | | nodeClick(row,node) { |
| | | this.nodeRow = row; |
| | | const loading = this.$loading({}); |
| | | this.rightLoading = true; |
| | | const params = { |
| | | 'conditionMap[roleId]': this.nodeRow.oid, |
| | | 'conditionMap[type]': this.type, |
| | |
| | | this.defaultExpandKeys=['root']; |
| | | getUIAuthor(params).then(res => { |
| | | this.processChildren(res.data.data[0]); // 处理每个节点 |
| | | this.uiTreeOption.defaultExpandKeys=this.defaultExpandKeys; |
| | | this.uiTreeOption.defaultExpandedKeys=this.defaultExpandKeys; |
| | | this.uiTreeData = [{ |
| | | attributes: {}, |
| | | checked: false, |
| | |
| | | label: res.data.data[0].text, |
| | | children: res.data.data[0].children |
| | | }]; |
| | | loading.close(); |
| | | this.rightLoading = false; |
| | | }).catch(error => { |
| | | loading.close(); |
| | | this.rightLoading = false; |
| | | }) |
| | | }, |
| | | //处理树 |
| | | processChildren(item) { |
| | | if (item.children && item.children.length > 0) { |
| | | item.children = item.children.map(child => { |
| | | if(child.level<5){ |
| | | if(child.level<4){ |
| | | this.defaultExpandKeys.push(child.oid) |
| | | } |
| | | if(child.level==1){ |
| | | child.icon='el-icon-s-promotion'; |
| | | child.label=child.data.label+'('+child.data.name+')' |
| | | child.label=child.data.label+'('+child.data.name+')' |
| | | }else if(child.level==2){ |
| | | child.icon='el-icon-s-order'; |
| | | child.label=child.text |
| | |
| | | child.icon='el-icon-document'; |
| | | child.label=child.text |
| | | }else if(child.level==5){ |
| | | child.icon='el-icon-s-ticket'; |
| | | child.icon='el-icon-s-tools'; |
| | | child.label=child.text |
| | | } |
| | | this.processChildren(child); // 递归处理每个子节点 |