| | |
| | | <div style="height: calc(100vh - 195px);"> |
| | | <avue-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> |
| | |
| | | <basic-container v-loading="treeLoading"> |
| | | <h3 style="margin: 0 0 10px 0">功能权限配置</h3> |
| | | <div> |
| | | <el-button icon="el-icon-place" plain size="small" type="primary" @click="saveHandler">授权</el-button> |
| | | <el-button icon="el-icon-close" plain size="small" style="margin-right: 40px;" type="primary" |
| | | <el-button v-if="permissionList.rightBtn" icon="el-icon-place" plain size="small" type="primary" @click="saveHandler">授权</el-button> |
| | | <el-button v-if="permissionList.resetBtn" icon="el-icon-close" plain size="small" style="margin-right: 40px;" type="primary" |
| | | @click="clearValue">重置 |
| | | </el-button> |
| | | </div> |
| | | <div style="height: calc(100vh - 232px);margin-top: 10px;"> |
| | | <avue-tree ref="uiTree" :data="uiTreeData" :node-key="id" :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> |
| | |
| | | <script> |
| | | import {gridRoles} from "@/api/system/role/api"; |
| | | import {getSysModelAuthTreeMenuByPID, getSysModelAuth, saveRoleRight} from "@/api/authority/functionView/api" |
| | | import {mapGetters} from "vuex"; |
| | | |
| | | export default { |
| | | name: "index", |
| | |
| | | contextData: [] |
| | | } |
| | | }, |
| | | computed:{ |
| | | ...mapGetters(["permission"]), |
| | | permissionList() { |
| | | return { |
| | | rightBtn: this.vaildData(this.permission[this.$route.query.id].RIGHT, false), |
| | | resetBtn: this.vaildData(this.permission[this.$route.query.id].reset, false), |
| | | }; |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getTreeList(); |
| | | this.getUITree(); |
| | |
| | | this.treeLoading = true; |
| | | getSysModelAuth({roleId: row.oid}).then(res => { |
| | | const data = res.data.data; |
| | | // console.log(data); |
| | | this.$refs.uiTree.setCheckedKeys(data); |
| | | this.treeLoading = false; |
| | | }) |
| | |
| | | this.defaultExpandKeys = ['root']; |
| | | getSysModelAuthTreeMenuByPID(params).then(res => { |
| | | console.log(res); |
| | | this.processChildren(res.data.data); // 处理每个节点 |
| | | let data= [{ |
| | | attributes: {}, |
| | | checked: false, |
| | | expanded: true, |
| | | data: "root", |
| | | childType: 1, |
| | | icon: 'el-icon-s-home', |
| | | id: 'root', |
| | | name:'功能模块', |
| | | children: res.data.data |
| | | }]; |
| | | this.processChildren(data[0]); // 处理每个节点 |
| | | this.uiTreeOption.defaultExpandedKeys = this.defaultExpandKeys; |
| | | this.uiTreeData = res.data.data; |
| | | this.uiTreeData = data; |
| | | this.treeLoading = false; |
| | | }).catch(error => { |
| | | this.treeLoading = false; |
| | |
| | | processChildren(item) { |
| | | if (item.children && item.children.length > 0) { |
| | | item.children = item.children.map(child => { |
| | | if (child.level < 2) { |
| | | // 默认树节点展开两层效果 |
| | | if (!child.childType) { |
| | | // 默认树节点展开,最子级不展开 |
| | | this.defaultExpandKeys.push(child.id) |
| | | } |
| | | if (child.level == 1) { |
| | | child.icon = 'el-icon-s-promotion'; |
| | | child.label = child.data.label + '(' + child.data.name + ')' |
| | | } else if (child.level == 2) { |
| | | child.icon = 'el-icon-s-order'; |
| | | child.label = child.text |
| | | } else if (child.level == 3) { |
| | | child.icon = 'el-icon-office-building'; |
| | | child.label = child.text |
| | | } else if (child.level == 4) { |
| | | child.icon = 'el-icon-s-promotion'; |
| | | if (child.childType == 1) { |
| | | child.icon = 'el-icon-document'; |
| | | child.label = child.text |
| | | } else if (child.level == 5) { |
| | | } else if (child.childType == 2) { |
| | | child.icon = 'el-icon-s-tools'; |
| | | child.label = child.text |
| | | } |
| | | this.processChildren(child); // 递归处理每个子节点 |
| | | return child; // 只返回子节点的 attributes |
| | |
| | | saveHandler() { |
| | | const selectTreeList = this.$refs.uiTree.getCheckedNodes(); |
| | | const selectParentList = this.$refs.uiTree.getHalfCheckedNodes(); |
| | | |
| | | console.log(selectTreeList); |
| | | console.log(selectParentList); |
| | | |
| | | if (selectTreeList.length == 0) { |
| | | this.$message.error("请选择功能模块"); |
| | |
| | | } |
| | | }) |
| | | const data = [...parentData,...formData]; |
| | | data.shift(); |
| | | const params = { |
| | | roleId: this.nodeRow.oid, |
| | | roleData: data |
| | | } |
| | | saveRoleRight(params).then(res => { |
| | | console.log(res); |
| | | if (res.data.code === 200) { |
| | | this.$message.success("授权成功"); |
| | | } |