| | |
| | | border |
| | | @row-click="singleElection" |
| | | highlight-current-row |
| | | height="calc(100% - 80px)" |
| | | height="calc(100% - 80px)" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | width="55" |
| | | row-key="id" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-radio |
| | |
| | | </div> |
| | | </div> |
| | | <el-divider class="divider" /> |
| | | |
| | | <el-table |
| | | :data="usertableData" |
| | | border |
| | | style="width: 100%" |
| | | height="calc(100% - 80px)" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | <el-table-column |
| | | type="selection" |
| | | width="55" |
| | | > </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | | :label="$t('dataManage.styleObj.index')" |
| | | /> |
| | | <el-table-column |
| | | prop="resName" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.name')" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="server" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.server')" |
| | | > |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <div |
| | | style="margin-top: 10px; text-align: center" |
| | | class="pagination_box" |
| | | > |
| | | <el-pagination |
| | | @size-change="userhandleSizeChange" |
| | | @current-change="userhandleCurrentChange" |
| | | :current-page="userlistData.pageIndex" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="userlistData.pageSize" |
| | | layout="prev, pager, next" |
| | | :total="usercount" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="menuSettings_tree"> |
| | | <My-bread |
| | | :list="[ |
| | | `${$t('operatManage.operatManage')}`, |
| | | `${$t('operatManage.RoleResAuthorization')}`, |
| | | ]" |
| | | ></My-bread> |
| | | |
| | | <el-divider /> |
| | | <div class="menuTreeBox"> |
| | | <el-tree |
| | | :data="depList" |
| | | :props="defaultProps" |
| | | :show-checkbox="true" |
| | | :check-on-click-node="true" |
| | | :check-strictly="true" |
| | | node-key="id" |
| | | @check="treeCheck" |
| | | ref="treeForm" |
| | | :data="Layertree" |
| | | show-checkbox |
| | | node-key="layerid" |
| | | ref="layerFrom" |
| | | :props="defaultLayerrops" |
| | | accordion |
| | | :default-expanded-keys="[1]" |
| | | > |
| | | </el-tree> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="menuSettings_tree" |
| | | style="margin-left: 10px; width: calc(50% - 172px)" |
| | | > |
| | | <div |
| | | style=" |
| | | font-size: 14px; |
| | | color: #606266; |
| | | line-height: 1; |
| | | cursor: text; |
| | | position: relative; |
| | | top: 10px; |
| | | margin-left: 10px; |
| | | " |
| | | > |
| | | {{ $t('operatManage.UserRoleAuthorizationObj.RoleTable') }} |
| | | </div> |
| | | <el-divider /> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | @row-click="singleElection" |
| | | highlight-current-row |
| | | height="85%" |
| | | :header-cell-style="{ |
| | | background: 'transparent', |
| | | }" |
| | | > |
| | | <el-table-column align="center" width="55"> |
| | | <template slot-scope="scope"> |
| | | |
| | | <el-radio |
| | | class="radio" |
| | | v-model="templateSelection" |
| | | :label="scope.row.id" |
| | | > </el-radio |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | | :label="$t('dataManage.styleObj.index')" |
| | | /> |
| | | <el-table-column |
| | | prop="name" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.name')" |
| | | > |
| | | </el-table-column> |
| | | </el-table> |
| | | <div style="text-align: center; margin-top: 20px"> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="listData.pageIndex" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="userlistData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="count" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | <div class="menuSettings"> |
| | | <div |
| | | style=" |
| | | font-size: 14px; |
| | | color: #606266; |
| | | line-height: 1; |
| | | cursor: text; |
| | | position: relative; |
| | | top: 5px; |
| | | margin-left: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | " |
| | | > |
| | | <span> |
| | | {{ $t('operatManage.UserRoleAuthorizationObj.userTable') }}</span |
| | | > |
| | | <div class="btn" style="margin-left: auto"> |
| | | <el-button |
| | | v-if="menuStatus.insert" |
| | | type="primary" |
| | | icon="el-icon-circle-plus-outline" |
| | | size="small" |
| | | :disabled="roleid == null ? true : false" |
| | | @click="adduser" |
| | | >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button |
| | | > |
| | | <el-button |
| | | v-if="menuStatus.delete" |
| | | type="danger" |
| | | icon="el-icon-delete" |
| | | size="small" |
| | | @click="deletesUser" |
| | | :disabled="roleid == null ? true : false" |
| | | >{{ $t('operatManage.UserRoleAuthorizationObj.delete') }}</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | <el-divider class="divider" /> |
| | | |
| | | <el-table |
| | | :data="usertableData" |
| | | stripe |
| | | style="width: 100%" |
| | | height="85%" |
| | | @selection-change="handleSelectionChange" |
| | | :header-cell-style="{ |
| | | background: 'transparent', |
| | | }" |
| | | > |
| | | <el-table-column type="selection" width="55"> </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | | :label="$t('dataManage.styleObj.index')" |
| | | /> |
| | | <el-table-column |
| | | prop="resName" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.name')" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="server" |
| | | :label="$t('operatManage.UserRoleAuthorizationObj.server')" |
| | | > |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <div style="margin-top: 20px; text-align: center" class="pagination_box"> |
| | | <el-pagination |
| | | @size-change="userhandleSizeChange" |
| | | @current-change="userhandleCurrentChange" |
| | | :current-page="userlistData.pageIndex" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :page-size="userlistData.pageSize" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="usercount" |
| | | > |
| | | </el-pagination> |
| | | </div> |
| | | </div> --> |
| | | <el-dialog |
| | | :title="$t('operatManage.UserRoleAuthorizationObj.Added')" |
| | | :visible.sync="dialogTableVisible" |
| | |
| | | import { |
| | | queryDepTree, |
| | | select_Role_ByPageAndCount, |
| | | roleReselectByPageAndCount, |
| | | roleResDeletes, |
| | | resSelectCountForRole, |
| | | |
| | | roleResInserts, |
| | | |
| | | roleLayer_selectResByRole, |
| | | roleLayer_inserts, |
| | | roleLayer_deletes |
| | | } from '../../api/api'; |
| | | export default { |
| | | //import引入的组件需要注入到对象中才能使用 |
| | |
| | | templateSelection: '', |
| | | // 当前选择的行的数据 |
| | | checkList: [], |
| | | |
| | | defaultLayerrops: { |
| | | children: "children", |
| | | label: "cnName", |
| | | }, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'name', |
| | |
| | | debid: null, |
| | | roleid: null, |
| | | addmultipleSelection: [], |
| | | layerData: [], |
| | | layeroption: [], |
| | | Layertree: [] |
| | | |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | }) |
| | | .catch(() => { }); |
| | | }, |
| | | adduser() { |
| | | this.dialogTableVisible = true; |
| | | this.getadduserList(); |
| | | async adduser() { |
| | | var val = this.$refs.layerFrom.getCheckedNodes(false, true); // 利用这个方法就可以获取到子节点+父节点) |
| | | |
| | | var std = []; |
| | | for (var i in val) { |
| | | if (val[i].id == 0) { |
| | | val[i].roleid = this.roleid |
| | | std.push(val[i]) |
| | | } |
| | | } |
| | | if (std.length == 0) { |
| | | return |
| | | } |
| | | |
| | | const data = await roleLayer_inserts(std); |
| | | |
| | | if (data.code != 200) { |
| | | this.$message.error('授权失败'); |
| | | } else { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '授权成功!', |
| | | }); |
| | | } |
| | | this.getuserList(); |
| | | // this.dialogTableVisible = true; |
| | | // this.getadduserList(); |
| | | }, |
| | | //用户删除 |
| | | async deletesUser() { |
| | | let arr = []; |
| | | this.usermultipleSelection.forEach((e) => { |
| | | arr.push(e.id); |
| | | }); |
| | | this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(async () => { |
| | | const data = await roleResDeletes({ ids: arr.toString() }); |
| | | if (data.code == 200) { |
| | | this.InsertFormdialog = false; |
| | | this.$message({ |
| | | message: '删除成功!', |
| | | type: 'success', |
| | | }); |
| | | this.getuserList(); |
| | | } else { |
| | | this.$message({ |
| | | message: '删除失败!', |
| | | type: 'warning', |
| | | }); |
| | | var val = this.$refs.layerFrom.getCheckedNodes(false, true); // 利用这个方法就可以获取到子节点+父节点) |
| | | var std = []; |
| | | for (var i in val) { |
| | | if (val[i].id > 0) { |
| | | std.push(val[i].id) |
| | | } |
| | | }).catch(() => { |
| | | } |
| | | var res = this.layeroption; |
| | | var arr = []; |
| | | for (var i in res) { |
| | | if (res[i].id > 0 && std.indexOf(res[i].id) == -1) { |
| | | arr.push(res[i].id) |
| | | } |
| | | } |
| | | if (arr.length == 0) { |
| | | return |
| | | } |
| | | const data = await roleLayer_deletes({ ids: arr.toString() }); |
| | | if (data.code != 200) { |
| | | this.$message.error('授权失败'); |
| | | } else { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | type: 'success', |
| | | message: '授权成功!', |
| | | }); |
| | | }); |
| | | // const data = await roleResDeletes({ ids: arr.toString() }); |
| | | // if (data.code !== 200) { |
| | | // return this.$message.error('删除失败'); |
| | | // } |
| | | // this.$message({ |
| | | // message: '删除成功', |
| | | // type: 'success', |
| | | } |
| | | this.getuserList() |
| | | // let arr = []; |
| | | // this.usermultipleSelection.forEach((e) => { |
| | | // arr.push(e.id); |
| | | // }); |
| | | // this.getuserList(); |
| | | // this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', { |
| | | // confirmButtonText: '确定', |
| | | // cancelButtonText: '取消', |
| | | // type: 'warning' |
| | | // }).then(async () => { |
| | | // const data = await roleResDeletes({ ids: arr.toString() }); |
| | | // if (data.code == 200) { |
| | | // this.InsertFormdialog = false; |
| | | // this.$message({ |
| | | // message: '删除成功!', |
| | | // type: 'success', |
| | | // }); |
| | | // this.getuserList(); |
| | | // } else { |
| | | // this.$message({ |
| | | // message: '删除失败!', |
| | | // type: 'warning', |
| | | // }); |
| | | // } |
| | | // }).catch(() => { |
| | | // this.$message({ |
| | | // type: 'info', |
| | | // message: '已取消删除' |
| | | // }); |
| | | // }); |
| | | |
| | | }, |
| | | //用户表多选 |
| | | handleSelectionChange(val) { |
| | |
| | | handleCurrentChange(val) { |
| | | this.listData.pageIndex = val; |
| | | this.getRole(); |
| | | }, |
| | | //获取资源列表 |
| | | async getlayerTree() { |
| | | // this.layerData = [] |
| | | // const data = await res_selectAll(); |
| | | // if (data.code != 200) { |
| | | // return this.$message.error("图层列表查询失败"); |
| | | // } |
| | | // var val = this.setTreeData(data.result); |
| | | // val.sort(function (a, b) { |
| | | // return a.sort - b.sort |
| | | // }) |
| | | // this.layerData = val |
| | | }, |
| | | setTreeData(source) { |
| | | let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆 |
| | | return cloneData.filter((father) => { |
| | | // 循环所有项 |
| | | let branchArr = cloneData.filter((child) => father.layerid == child.pid); // 对比ID,分别上下级菜单,并返回数据 |
| | | branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值 |
| | | // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c , 那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2; |
| | | // 由此循环多次后,就能形成相应的树形数据结构 |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | }, |
| | | // 角色单选 |
| | | singleElection(row) { |
| | |
| | | } |
| | | }, |
| | | async getadduserList() { |
| | | this.addlistData.roleid = this.roleid; |
| | | // this.addlistData.roleid = this.roleid; |
| | | |
| | | // this.addlistData.debid = this.debid; |
| | | const data = await resSelectCountForRole(this.addlistData); |
| | | if (data.code !== 200) { |
| | | return this.$message.error('新增资源列表请求错误'); |
| | | } |
| | | // // this.addlistData.debid = this.debid; |
| | | // const data = await resSelectCountForRole(this.addlistData); |
| | | // if (data.code !== 200) { |
| | | // return this.$message.error('新增资源列表请求错误'); |
| | | // } |
| | | |
| | | this.gridData = data.result; |
| | | this.addcount = data.count; |
| | | // this.gridData = data.result; |
| | | // this.addcount = data.count; |
| | | |
| | | |
| | | }, |
| | | // 用户表请求 |
| | | async getuserList() { |
| | | const data = await roleReselectByPageAndCount(this.userlistData); |
| | | this.Layertree = []; |
| | | this.layeroption = []; |
| | | |
| | | const data = await roleLayer_selectResByRole({ roleid: this.userlistData.roleid }); |
| | | if (data.code !== 200) { |
| | | return this.$message.error('用户资源列表请求错误'); |
| | | return this.$message.error('根据ID查询资源失败'); |
| | | } |
| | | this.usertableData = data.result; |
| | | this.usercount = data.count; |
| | | var std = []; |
| | | this.layeroption = data.result; |
| | | for (var i in data.result) { |
| | | if (data.result[i].id > 0 && data.result[i].isLayer != 0) { |
| | | std.push(data.result[i].layerid) |
| | | } |
| | | } |
| | | var val = this.setTreeData(data.result); |
| | | |
| | | |
| | | this.Layertree = val |
| | | this.$refs.layerFrom.setCheckedKeys(std); |
| | | }, |
| | | // 角色表请求 |
| | | async getRole() { |
| | |
| | | } |
| | | } |
| | | this.getMenuTree(); |
| | | // this.getlayerTree(); |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | height: calc(100% - 20px); |
| | | //height: 98%; |
| | | width: 98%; |
| | | padding:10px 1%; |
| | | padding: 10px 1%; |
| | | |
| | | .menuSettings_tree { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | .content_left_box{ |
| | | .content_left_box { |
| | | padding: 10px; |
| | | width: 20%; |
| | | height: calc(100% - 20px); |
| | |
| | | .el-table /deep/ tr { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | </style> |