<template> <div> <div style="display: flex; height: 100%"> <base-layout title="组织机构" ref="organLayout" style="width: 20%" :bottonShow="false" :isPage="false" :operateButtonSwitch="false" :mainColor="mainColor" > <div slot="main" style="height: 100%"> <base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false" :menuData="orangData" @handleNodeClick="orangClick" ></base-tree> </div> </base-layout> <base-layout title="用户信息" ref="userLayout" @pageChange="pageChange" style="width: 80%" :buttonList="buttonList" :defaultButtonSwitch="false" @onFuncBtn="getFuncBtn" :isPage="true" > <div slot="main" slot-scope="{ tableHeight }" style="height: 100%"> <base-table ref="userCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading" @radioChange="userRadioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData" :tableColumn="tableColumn" > </base-table> </div> </base-layout> </div> <right-dialog ref="rightDialog" :menuData="menuData" v-if="permissionPopup"></right-dialog> <base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingDialog" class="userDialog" title="权限设置" width="50vw" top="5vh" :footerShow="true" @handleConfirmClick="settingConfirmClick" > <base-layout :showTitle="false" :defaultButtonSwitch="false"> <div slot="main"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :before-leave="beforeLeave"> <el-tab-pane label="菜单权限" name="jurisdictionSetting"> <jurisdiction-Setting ref="jurisdictionSetting" :menuData="menuData"></jurisdiction-Setting> </el-tab-pane> <el-tab-pane label="按钮权限" name="buttonSetting"> <button-setting ref="buttonSetting"></button-setting> </el-tab-pane> <el-tab-pane label="数据权限" name="dataSetting"> <data-setting ref="dataSetting"></data-setting> </el-tab-pane> </el-tabs> </div> </base-layout> </base-dialog> </div> </template> <script> import router from '@/router' import baseLayout from "@/components/base/baseNewLayout" import baseTable from '@/components/base/baseTable' import baseDialog from '@/components/base/BaseNewDialog/index.vue' import baseForm from '@/components/base/baseNewForm/index.vue' import baseTree from '@/components/base/BaseMenuTree/index.vue' import rightDialog from './rightDialog' import jurisdictionSetting from './jurisdictionSetting.vue' import buttonSetting from './buttonSetting.vue' import dataSetting from './dataSetting.vue' import configData from './configData' import { getCompanyId } from '@/utils/auth' import { GetMenuTree } from '@/api/apis/menuManage' import { userGetBillList } from '@/api/apis/userInformation' import { GetOrganTree } from '@/api/apis/organization' import { GetPppedomSet, GetMenuButton, GetAllButton, GetAllBillDataPepedom, GetAllBilldata, PopedomSaveData } from '@/api/apis/jurisdiction' import { authApi } from '@/api/apis/auth' export default { name: 'review', components: { buttonSetting, dataSetting, baseLayout, baseTable, baseDialog, baseForm, baseTree, jurisdictionSetting, rightDialog }, data() { return { activeName: 'jurisdictionSetting', radioIndex: false, userRadioId: false, settingDialog: false, // tableHeight: 'calc(100vh - 227px)', mainColor: '#f8f8f8', tabLoading: false, tableData: [], // 搜索配置 menuData: [], orangData: [], buttonList: [ { icon: 'el-icon-plus', menuName: '权限设置', btnFunciton: 'setting' } ], pageModel: { pageNum: 1, pageSize: 20, organId: '' }, defaultProps: { children: 'children', label: 'label' }, buttonArray: [], allButtonList: [], menuIDs: [], menuList: [], menuPopedom: [], permissionPopup: false } }, computed: { // 表头配置 tableColumn() { return configData.tableColumnJson } }, watch: { settingDialog: { deep: true, handler(newValue, oldValue) { if (newValue == false) { this.$refs.dataSetting.dataList = [] this.$refs.jurisdictionSetting.$refs.menuTree.$refs.elTree.setCheckedKeys( [] ) this.$refs.buttonSetting.classifyButtonList = [] } } } }, created() { }, onShow() { }, mounted() { this.initPage() this.getMenuData() }, filters: {}, methods: { beforeLeave(activeName, oldActiveName) { if (oldActiveName == 'jurisdictionSetting') { this.menuPopedom = this.$refs.jurisdictionSetting.menuPopedom this.checkdata = this.$refs.jurisdictionSetting.checkdata } if ( oldActiveName == 'jurisdictionSetting' && activeName == 'buttonSetting' ) { if (this.menuPopedom.length == 0) { this.$vmNews('当前用户未分配菜单权限') return false } } if (oldActiveName == 'dataSetting' && activeName == 'buttonSetting') { // return false } }, // 切换tab handleClick(tab, event) { if (this.activeName == 'buttonSetting') { this.checkdata = this.$refs.jurisdictionSetting.checkdata this.$refs.buttonSetting.GetAllButtonList( this.menuPopedom, this.checkdata ) } if (this.activeName == 'dataSetting') { this.$refs.dataSetting.inPage() } }, // 获取菜单选中 getMenuIDs(menuData) { menuData.forEach((el) => { if (el.type) { this.menuList.push(el) this.menuIDs.push(el.id) } if (el.children != null && el.children && el.children.length) { this.getMenuIDs(el.children) } }) }, // 初始化页面 initPage() { this.getTableList() this.getOrganList() }, //获取菜单树 async getMenuData() { // let res = await GetMenuButton({}); let res = await authApi('sysMenuConfigService', '', 'queryEntityTree', '', { state: 0 }) if (res.status == 200) { let arr = res.attribute this.menuData = res.attribute this.changeMenu(this.menuData, 0) // this.getButtonArray(this.menuData) } }, // 菜单树添加参数 changeMenu(data, num) { let level = num level = level + 1 data.forEach((el) => { el.buttonList = [] el.type = false if (el.children != null && el.children && el.children.length) { this.changeMenu(el.children, level) } }) }, addToButtonList(arr, newArr) { newArr.forEach((newItem) => { this.addToButtonListRecursive( arr, newItem.op_MenuID, newItem.op_OperateKindList ) }) return arr }, addToButtonListRecursive(arr, targetId, operateKindList) { for (let i = 0; i < arr.length; i++) { const item = arr[i] if (item.id == targetId) { item.buttonList = operateKindList.split(',') return item } if (item.children && item.children.length > 0) { this.addToButtonListRecursive( item.children, targetId, operateKindList ) } } }, // 获取用户信息列表 async getTableList() { this.tabLoading = true this.tableData = [] let params = { ...this.pageModel } let res = await authApi('sysUserService', '', 'queryEntityPage', '', params) if (res.status == 200) { this.tableData = res.attribute.list this.$nextTick(() => { this.$refs.userCustomtable.clearRadioIndex() this.$refs.userLayout.setPageTotal(res.attribute.total) }) this.tabLoading = false } }, getButtonArray(menuData) { menuData.forEach((el, index) => { this.allButtonList.forEach((item) => { if (el.id == item.MenuID) { item.active = false el.buttonList.push(item) } }) if (el.children != null && el.children && el.children.length) { this.getButtonArray(el.children) } }) }, // 单选 userRadioChange(val) { this.radioIndex = val.index this.userRadioId = val.id }, // 获取组织列表 async getOrganList() { this.$refs.baseTree.treeLoading = true setTimeout(() => { this.$refs.baseTree.treeLoading = false }, 3000) const res = await authApi('sysOrganService', '', 'queryEntityTree', '', { state: 0 }) // let res = await GetOrganTree(params); if (res.status == 200) { this.orangData = res.attribute this.$refs.baseTree.treeLoading = false } }, // 树状图点击 orangClick(data) { this.pageModel.organId = data.id this.resetTable() // this.result() }, resetTable() { this.pageModel.pageNum = 1 this.userRadioId = false this.radioIndex = false this.$nextTick(() => { this.$refs.userCustomtable.clearRadioIndex() this.$refs.userLayout.pageClear() }) this.getTableList() }, // 操作按钮事件 getFuncBtn(btnEven) { if (this.radioIndex === false) { this.$vmNews('请选择一条数据') return } this[btnEven.btnFunciton]() }, //点击权限设置 async setting() { this.getMenuData() this.permissionPopup = true this.$nextTick(async() => { this.$refs.rightDialog.drawer = true this.$refs.rightDialog.buttonLoading = true let params = { id: this.userRadioId, kindId: 1 } const res = await authApi('sysUserService', '', 'jurisdiction', '',params) if (res.status == 200) { const data = res.attribute this.$refs.rightDialog.exhibitList(res.attribute.menvVoList,res.attribute,this.userRadioId) } }) }, // setting() { // this.settingDialog = true // this.activeName = "jurisdictionSetting" // this.GetPppedomData() // }, async GetPppedomData() { let params = { objectID: this.userRadioId, kindid: 1 } let res = await GetPppedomSet(params) this.$refs.jurisdictionSetting.menuLoading = true setTimeout(() => { this.$refs.jurisdictionSetting.menuLoading = false }, 3000) if (res.code == 1) { const data = res.data let menuIDs = data[0].length > 0 ? data[0][0].fp_MenuIdList.split(',') : [] this.$refs.jurisdictionSetting.$refs.menuTree.selectData = menuIDs this.$refs.jurisdictionSetting.$refs.menuTree.checkChange(menuIDs) let buttonPopedom = this.getbuttonPopedomList(res.data[1]) this.$refs.buttonSetting.buttonPopedom = buttonPopedom let activeList = this.getActiveList(res.data[2]) this.$refs.dataSetting.activeList = activeList this.$refs.jurisdictionSetting.menuLoading = false // selectData } }, getActiveList(data) { let array = [] data.forEach((el) => { el.dp_popeList.split(',').forEach((item) => { array.push(item) }) }) return array }, getbuttonPopedomList(data) { let array = [] data.forEach((el) => { el.op_OperateKindList.split(',').forEach((item) => { array.push(item) }) }) return array }, pageChange(model) { this.pageModel.pageNum = model.page this.pageModel.pageSize = model.limit this.getTableList() }, settingConfirmClick() { let menuPopedom = this.$refs.jurisdictionSetting.menuPopedom.join(',') let buttonPopedom = this.getButtonPopedom( this.$refs.buttonSetting.classifyButtonList ) let dataPopedom = this.getDataPopedom(this.$refs.dataSetting.dataList) let params = { kindid: 1, objectID: this.userRadioId, menuPopedom: menuPopedom, buttonPopedom: buttonPopedom, dataPopedom: dataPopedom } this.saveData(params) }, async saveData(params) { let res = await PopedomSaveData(params) if (res.code == 1) { this.$vmNews('保存成功', 'success') this.activeName = 'jurisdictionSetting' this.settingDialog = false this.$store.dispatch('GenerateRoutes').then((accessRoutes) => { // 根据roles权限生成可访问的路由表 for (let i = 0, length = accessRoutes.length; i < length; i += 1) { const element = accessRoutes[i] router.addRoutes(accessRoutes) // 动态添加可访问路由表 } localStorage.setItem('routeList', JSON.stringify(accessRoutes)) }) } }, getDataPopedom(dataPopedom) { let array = [] dataPopedom.forEach((el) => { el.dp_popeList = [] el.buttonList.forEach((item) => { if (item.type) { el.dp_popeList.push(item.id) } }) }) dataPopedom.forEach((el) => { if (el.dp_popeList.length > 0) { let params = { dp_billKindID: el.billKindID, dp_popeList: el.dp_popeList.join(',') } array.push(params) } }) return array }, getButtonPopedom(buttonPopedom) { let array = [] // let op_OperateKindList = [] buttonPopedom.forEach((el) => { el.op_MenuID = el.id el.op_OperateKindList = [] el.buttonList.forEach((item) => { if (item.type) { el.op_OperateKindList.push(item.id) } }) }) buttonPopedom.forEach((el) => { if (el.op_OperateKindList.length > 0) { let params = { op_MenuID: el.op_MenuID, op_OperateKindList: el.op_OperateKindList.join(',') } array.push(params) } }) return array } } } </script> <style scoped lang="scss"> > > > .el-dialog__body { padding: 0 25px; } </style> <style scoped lang="scss"> .roleName { padding: 10px 0; width: 90px; border: 2px solid #f2f2f2; background-color: #f2f2f2; margin: 0px 10px 10px 0px; text-align: center; cursor: pointer; box-shadow: 0 0 0 2px #f2f2f2; border-radius: 5px; } .active { background-color: #00a490; border: 2px solid #ffffff; color: white; box-shadow: 0 0 0 2px #00a490; } .bigTitle { padding-bottom: 10px; margin: 10px 0; font-size: 16px; font-weight: bold; border-bottom: 1px solid #ccc; } .organizationBody { display: flex; justify-content: space-evenly; background-color: #f2f3f4; padding: 10px; } </style>