¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div> |
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
| | | <el-form-item label="ç¨æ·åç§°ï¼"> |
| | | <el-input v-model="formInline.roleName" ize="mini" placeholder="请è¾å
¥ç¨æ·åç§°"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">æç´¢</el-button> |
| | | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <el-divider></el-divider> |
| | | <div class="roleCotent"> |
| | | <div class="roleLeft roleBox"> |
| | | <div class="roleTable"> |
| | | <el-table ref="roleTable" highlight-current-row :data="tableData" @row-click="handleRoleClick" |
| | | style="width: 100%" height="calc(100% - 1px)"> |
| | | <el-table-column label="è§è²ç¼å·" prop="roleId" align="center" /> |
| | | <el-table-column label="è§è²åç§°" prop="roleName" align="center" /> |
| | | <el-table-column label="æéå符" prop="roleKey" align="center" /> |
| | | <el-table-column label="æ¾ç¤ºé¡ºåº" prop="roleSort" align="center" /> |
| | | <el-table-column label="å建æ¶é´" align="center" prop="createTime"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.createTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="rolePage"> |
| | | <pagination v-show="formInline.total > 0" :total="formInline.total" :page.sync="formInline.pageNum" |
| | | :limit.sync="formInline.pageSize" @pagination="getList" /> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="roleRight roleBox"> |
| | | |
| | | <el-form> |
| | | <el-form-item label="èåæé" v-show="false"> |
| | | <el-checkbox v-model="menuExpand" |
| | | @change="handleCheckedTreeExpand($event, 'menu')">å±å¼/æå </el-checkbox> |
| | | <el-checkbox v-model="menuNodeAll" |
| | | @change="handleCheckedTreeNodeAll($event, 'menu')">å
¨é/å
¨ä¸é</el-checkbox> |
| | | <el-checkbox v-model="form.menuCheckStrictly" |
| | | @change="handleCheckedTreeConnect($event, 'menu')">ç¶åèå¨</el-checkbox> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="roleTreeBox"> |
| | | <div class="treeBox"> |
| | | <el-tree ref="powerTree" class="tree-border" :data="menuOptions" show-checkbox node-key="id" |
| | | :check-strictly="!form.menuCheckStrictly" empty-text="å è½½ä¸ï¼è¯·ç¨å" |
| | | :default-expanded-keys="expanded" :props="defaultProps"></el-tree> |
| | | </div> |
| | | </div> |
| | | <div class="roeleSubmit"> |
| | | <el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleUpload">æäº¤</el-button> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | addRole, |
| | | listRole, |
| | | getRole, |
| | | updateRole, |
| | | } from "@/api/system/role"; |
| | | import { |
| | | treeselect as menuTreeselect, |
| | | roleMenuTreeselect |
| | | } from "@/api/system/menu" |
| | | export default { |
| | | data() { |
| | | return { |
| | | formInline: { |
| | | roleName: '', |
| | | total: 0, |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | }, |
| | | tableData: [], |
| | | checkRow: null, |
| | | form: {}, |
| | | menuOptions: [], |
| | | checkedKeys: [], |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "label" |
| | | }, |
| | | menuExpand: false, |
| | | menuNodeAll: false, |
| | | menuIds: [], |
| | | expanded: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.resetQuery(); |
| | | }, |
| | | methods: { |
| | | // æç´¢äºä»¶ |
| | | handleQuery() { |
| | | this.formInline.pageNum = 1 |
| | | this.getRoleData(); |
| | | }, |
| | | // éç½®äºä»¶ |
| | | resetQuery() { |
| | | this.formInline = { |
| | | roleName: '', |
| | | total: 0, |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | } |
| | | this.$nextTick(() => { |
| | | this.getRoleData(); |
| | | }) |
| | | }, |
| | | // å页ç¹å»äºä»¶ |
| | | getList() { |
| | | this.getRoleData(); |
| | | }, |
| | | // è¡¨æ ¼è¡ç¹å»äºä»¶ |
| | | handleRoleClick(row, column, event) { |
| | | this.checkRow = row; |
| | | this.getTreePower(); |
| | | }, |
| | | |
| | | // è·åè§è²åè¡¨æ°æ® |
| | | getRoleData() { |
| | | listRole(this.formInline).then(response => { |
| | | if (response.code != 200) { |
| | | return this.$message({ |
| | | message: 'è§è²å表æ¥è¯¢å¤±è´¥', |
| | | type: 'warning' |
| | | }); |
| | | }; |
| | | this.formInline.total = response.total; |
| | | var table_data = response.rows.filter(item => { |
| | | if (item.roleId != 1) { |
| | | return item |
| | | } |
| | | }) |
| | | this.tableData = table_data; |
| | | this.checkRow = this.tableData[0]; |
| | | this.getTreePower(); |
| | | this.$refs.roleTable.setCurrentRow(this.checkRow); |
| | | |
| | | }) |
| | | }, |
| | | // è·åèåæé |
| | | getTreePower() { |
| | | this.menuExpand = false; |
| | | this.menuNodeAll = false; |
| | | this.menuOptions = []; |
| | | this.checkedKeys = []; |
| | | this.menuIds = []; |
| | | roleMenuTreeselect(this.checkRow.roleId).then(response => { |
| | | if (response.code != 200) { |
| | | return this.$message({ |
| | | message: 'èåå表æ¥è¯¢å¤±è´¥', |
| | | type: 'warning' |
| | | }); |
| | | } |
| | | this.menuOptions = response.menus; |
| | | this.menuIds = this.getMenuIds(this.menuOptions, []) |
| | | this.checkedKeys = response.checkedKeys; |
| | | |
| | | this.expanded= [this.menuOptions[0].id] |
| | | this.getRole() |
| | | }); |
| | | |
| | | }, |
| | | getMenuIds(node, ids) { |
| | | for (var i in node) { |
| | | const child = node[i]; |
| | | if (child.children) { |
| | | this.getMenuIds(child.children, ids) |
| | | } else { |
| | | ids.push(node[i].id) |
| | | } |
| | | } |
| | | return ids; |
| | | |
| | | }, |
| | | // æ ¹æ®id æ¥è¯¢è§è² |
| | | getRole() { |
| | | getRole(this.checkRow.roleId).then(response => { |
| | | if (response.code != 200) { |
| | | return this.$message({ |
| | | message: 'è§è²ä¿¡æ¯è·å失败', |
| | | type: 'warning' |
| | | }); |
| | | } |
| | | this.form = response.data |
| | | let checkedKeys = this.checkedKeys; |
| | | checkedKeys.forEach(v => { |
| | | this.$nextTick(() => { |
| | | this.$refs.powerTree.setChecked(v, true, false); |
| | | }); |
| | | }); |
| | | |
| | | |
| | | |
| | | }) |
| | | }, |
| | | isElTreeAllSelected(tree) { |
| | | // å设treeæ¯el-treeçå®ä¾ï¼å¯ä»¥éè¿Vueå®ä¾è®¿é®å° |
| | | const getAllNodes = (tree) => { |
| | | let allNodes = []; |
| | | const traverse = (node) => { |
| | | allNodes.push(node); |
| | | |
| | | node.childNodes.forEach((child) => traverse(child)); |
| | | }; |
| | | traverse(tree); |
| | | return allNodes; |
| | | }; |
| | | |
| | | const allNodes = getAllNodes(tree); // è·åææèç¹ |
| | | return allNodes.every(node => node.checked); // æ£æ¥æ¯ä¸ªèç¹æ¯å¦éä¸ |
| | | }, |
| | | // æ æéï¼å
¨é/å
¨ä¸éï¼ |
| | | handleCheckedTreeNodeAll(value, type) { |
| | | if (type == "menu") { |
| | | this.$refs.powerTree.setCheckedNodes(value ? this.menuOptions : []); |
| | | } else if (type == "dept") { |
| | | this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []); |
| | | } |
| | | }, |
| | | // æ æéï¼å±å¼/æå ï¼ |
| | | handleCheckedTreeExpand(value, type) { |
| | | if (type == "menu") { |
| | | let treeList = this.menuOptions; |
| | | for (let i = 0; i < treeList.length; i++) { |
| | | this.$refs.powerTree.store.nodesMap[treeList[i].id].expanded = value; |
| | | } |
| | | } else if (type == "dept") { |
| | | let treeList = this.deptOptions; |
| | | for (let i = 0; i < treeList.length; i++) { |
| | | this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value; |
| | | } |
| | | } |
| | | }, |
| | | // ææèåèç¹æ°æ® |
| | | getMenuAllCheckedKeys() { |
| | | // ç®å被éä¸çèåèç¹ |
| | | let checkedKeys = this.$refs.powerTree.getCheckedKeys(); |
| | | // åéä¸çèåèç¹ |
| | | let halfCheckedKeys = this.$refs.powerTree.getHalfCheckedKeys(); |
| | | checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys); |
| | | return checkedKeys; |
| | | }, |
| | | //ä¿®æ¹æäº¤ |
| | | handleUpload() { |
| | | if (this.form.roleId != undefined) { |
| | | this.form.menuIds = this.getMenuAllCheckedKeys(); |
| | | updateRole(this.form).then(response => { |
| | | this.$modal.msgSuccess("ä¿®æ¹æå"); |
| | | this.getTreePower(); |
| | | }); |
| | | } else { |
| | | this.form.menuIds = this.getMenuAllCheckedKeys(); |
| | | addRole(this.form).then(response => { |
| | | this.$modal.msgSuccess("æ°å¢æå"); |
| | | |
| | | this.getTreePower(); |
| | | }); |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .app-container { |
| | | height: calc(100vh - 84px); |
| | | width: 100%; |
| | | position: absolute; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .roleCotent { |
| | | flex: 1; |
| | | display: flex; |
| | | } |
| | | |
| | | .roleRight { |
| | | flex: 1; |
| | | padding: 10px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .roeleSubmit { |
| | | margin: 10px 0px; |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: end; |
| | | } |
| | | |
| | | .roleTreeBox { |
| | | flex: 1; |
| | | position: relative; |
| | | |
| | | |
| | | .treeBox { |
| | | // padding: 10px; |
| | | overflow: auto; |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | // border: 1px solid #e5e6e7; |
| | | // background: #FFFFFF none; |
| | | border-radius: 4px; |
| | | |
| | | ::v-deep .tree-border { |
| | | margin: 0; |
| | | border: transparent; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .roleLeft { |
| | | width: 60%; |
| | | height: 100%; |
| | | margin-right: 1%; |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .roleTable { |
| | | flex: 1; |
| | | } |
| | | |
| | | .rolePage { |
| | | margin: 10px 20px 20px 0px; |
| | | } |
| | | } |
| | | |
| | | .roleBox { |
| | | border: 1px solid #DCDFE6; |
| | | box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2); |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | |
| | | |
| | | ::v-deep .el-divider--horizontal { |
| | | margin: 0px 0px 22px 0px; |
| | | |
| | | } |
| | | } |
| | | </style> |