123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719 |
- <template>
- <div class="app-container">
- <el-row class="roleBox">
- <el-col :span="24" class="roleCol">
- <div class="roleH"></div>
- <span>功能权限</span>
- </el-col>
- <el-col :span="24" class="roleBot">
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" style="background-color: #2AC1CA;color: #fff;border: none;" plain icon="el-icon-plus"
- @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="primary" style="background-color: #FF9639;color: #fff;border: none;" plain icon="el-icon-refresh"
- @click="refreshFn" v-hasPermi="['system:role:list']">刷新</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="primary" style="background-color: #3C8DBC;color: #fff;border: none;" plain icon="el-icon-my-export"
- @click="handleAdd" v-hasPermi="['system:role:edit']">保存</el-button>
- </el-col>
- </el-row>
- </el-col>
- </el-row>
- <el-row class="roleCont" style="margin-top: 18px;">
- <el-col :span="5" class="searBoxs">
- <div class="searBox">
- <div class="searInput">
- <input type="text" v-model="queryParams.roleName" placeholder="请输入角色">
- </div>
- <div class="searBtn">
- <img src="@/assets/images/icon_sr_ss@2x.png" @click="handleQuery" alt="" class="icon">
- </div>
- </div>
- <div class="searList">
- <div class="searItem searItemLeft" element-loading-text="拼命加载中" v-loading.fullscreen.lock="fullscreenLoading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)" v-for="item in roleList" @click="searBtnFn(item)" :class="{'active': item.id == roleId}" :key="item.id">
- <span>
- {{item.roleName}}
- </span>
- <i class="el-icon-delete" @click.stop="handleDelete(item)" v-if="item.id == roleId"></i>
- </div>
- </div>
- <pagination sty v-show="total>0" :total="total" layout="prev, pager, next" :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize" />
- </el-col>
- <el-col :span="19" class="roleContr">
- <div class="roleContrBox">
- <el-col :span="7">
- <div class="searContLeft">
- <el-tree class="tree-border" @node-click="qxList" :data="deptOptions" default-expand-all ref="dept" node-key="id" :props="defaultProps"></el-tree>
- </div>
- </el-col>
- <el-col :span="17">
- <div class="searContRight">
- <div class="searTitle">
- <div class="searName">
- 功能
- </div>
- <div class="searItem" v-for="item in menusList.heads">
- <el-checkbox :label="item.name"></el-checkbox>
- </div>
- </div>
- <div class="searCont" v-if="menusList.sysMenus.length" v-for="items in menusList.sysMenus" @click="searIndex = items.id" :class="{'active': searIndex == items.id}" :key="items.id">
- <div class="searName">
- {{items.menuName}}
- </div>
- <div class="searItem" v-for="(itemChild,indexChild) in items.containsHead" :key="indexChild">
- <!-- <el-checkbox-group v-model="checkedCities">
- <el-checkbox v-for="(item,index) in items.containsHead" :key="index"></el-checkbox>
- </el-checkbox-group> -->
- <el-checkbox></el-checkbox>
- </div>
- </div>
- </div>
- </el-col>
- </div>
- </el-col>
- </el-row>
- <!-- 添加或修改角色配置对话框 -->
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="角色名称" prop="roleName">
- <el-input v-model="form.roleName" placeholder="请输入角色名称" />
- </el-form-item>
- <el-form-item label="权限字符" prop="roleKey">
- <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
- </el-form-item>
- <el-form-item label="角色顺序" prop="roleSort">
- <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
- </el-form-item>
- <el-form-item label="备注">
- <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- listRole,
- getRole,
- delRole,
- addRole,
- updateRole,
- exportRole,
- dataScope,
- changeRoleStatus
- } from "@/api/system/role";
- import {
- treeselect as menuTreeselect,
- listMenus,
- treeMenuNotAddLeafNode
- } from "@/api/system/menu";
- import {
- treeselect as deptTreeselect,
- roleDeptTreeselect
- } from "@/api/system/dept";
- export default {
- name: "Role",
- data() {
- return {
- fullscreenLoading: false,
- searIndex: '',
- data: [],
- defaultProps: {
- children: 'children',
- label: 'label'
- },
- indexs: 3,
- menusList: '',
- // 遮罩层
- loading: true,
- // 选中数组
- ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 角色表格数据
- roleList: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- // 是否显示弹出层(数据权限)
- openDataScope: false,
- menuExpand: false,
- menuNodeAll: false,
- deptExpand: true,
- deptNodeAll: false,
- // 日期范围
- dateRange: [],
- // 状态数据字典
- statusOptions: [],
- // 数据范围选项
- dataScopeOptions: [{
- value: "1",
- label: "全部数据权限"
- },
- {
- value: "2",
- label: "自定数据权限"
- },
- {
- value: "3",
- label: "本部门数据权限"
- },
- {
- value: "4",
- label: "本部门及以下数据权限"
- },
- {
- value: "5",
- label: "仅本人数据权限"
- }
- ],
- // 菜单列表
- menuOptions: [],
- // 部门列表
- deptOptions: [],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- roleName: undefined,
- roleKey: undefined,
- status: undefined
- },
- roleId: '',
- // 表单参数
- form: {},
- // 表单校验
- rules: {
- roleName: [{
- required: true,
- message: "角色名称不能为空",
- trigger: "blur"
- }],
- roleKey: [{
- required: true,
- message: "权限字符不能为空",
- trigger: "blur"
- }],
- roleSort: [{
- required: true,
- message: "角色顺序不能为空",
- trigger: "blur"
- }]
- }
- };
- },
- created() {
- this.getList();
- this.getDicts("sys_normal_disable").then(response => {
- this.statusOptions = response.data;
- });
- },
- methods: {
- qxList(e) {
- listMenus(e.id).then(res => {
- let data = res.data
- this.menusList = data
- })
- },
- refreshFn() {
- // this.getList()
- this.reload()
- // this.deptOptions = []
- },
- searBtnFn(item) {
- this.roleId = item.id
- this.handleUpdate()
- },
- handleNodeClick() {
- console.log(221)
- },
- /** 查询角色列表 */
- getList() {
- this.loading = true;
- listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
- response => {
- this.roleList = response.rows;
- this.total = response.total;
- this.loading = false;
- }
- );
- },
- /** 查询菜单树结构 */
- getMenuTreeselect() {
- menuTreeselect().then(response => {
- this.menuOptions = response.data;
- });
- },
- /** 查询部门树结构 */
- getDeptTreeselect() {
- deptTreeselect().then(response => {
- this.deptOptions = response.data;
- });
- },
- // 所有菜单节点数据
- getMenuAllCheckedKeys() {
- // 目前被选中的菜单节点
- let checkedKeys = this.$refs.menu.getCheckedKeys();
- // 半选中的菜单节点
- let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
- checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
- return checkedKeys;
- },
- // 所有部门节点数据
- getDeptAllCheckedKeys() {
- // 目前被选中的部门节点
- let checkedKeys = this.$refs.dept.getCheckedKeys();
- // 半选中的部门节点
- let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
- checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
- return checkedKeys;
- },
- /** 根据角色ID查询菜单树结构 */
- getRoleMenuTreeselect(id) {
- return treeMenuNotAddLeafNode(id).then(response => {
- this.menuOptions = response.menus;
- return response;
- });
- },
- /** 根据角色ID查询部门树结构 */
- getRoleDeptTreeselect(id) {
- return roleDeptTreeselect(id).then(response => {
- this.deptOptions = response.depts;
- return response;
- });
- },
- // 角色状态修改
- handleStatusChange(row) {
- let text = row.status === "0" ? "启用" : "停用";
- this.$confirm('确认要"' + text + '""' + row.roleName + '"角色吗?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return changeRoleStatus(row.id, row.status);
- }).then(() => {
- this.msgSuccess(text + "成功");
- }).catch(function() {
- row.status = row.status === "0" ? "1" : "0";
- });
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- // 取消按钮(数据权限)
- cancelDataScope() {
- this.openDataScope = false;
- this.reset();
- },
- // 表单重置
- reset() {
- if (this.$refs.menu != undefined) {
- this.$refs.menu.setCheckedKeys([]);
- }
- this.menuExpand = false,
- this.menuNodeAll = false,
- this.deptExpand = true,
- this.deptNodeAll = false,
- this.form = {
- id: undefined,
- roleName: undefined,
- roleKey: undefined,
- roleSort: 0,
- status: "0",
- menuIds: [],
- deptIds: [],
- menuCheckStrictly: true,
- deptCheckStrictly: true,
- remark: undefined
- };
- this.resetForm("form");
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.dateRange = [];
- this.resetForm("queryForm");
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map(item => item.id)
- this.single = selection.length != 1
- this.multiple = !selection.length
- },
- // 树权限(展开/折叠)
- handleCheckedTreeExpand(value, type) {
- if (type == 'menu') {
- let treeList = this.menuOptions;
- for (let i = 0; i < treeList.length; i++) {
- this.$refs.menu.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;
- }
- }
- },
- // 树权限(全选/全不选)
- handleCheckedTreeNodeAll(value, type) {
- if (type == 'menu') {
- this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
- } else if (type == 'dept') {
- this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
- }
- },
- // 树权限(父子联动)
- handleCheckedTreeConnect(value, type) {
- if (type == 'menu') {
- this.form.menuCheckStrictly = value ? true : false;
- } else if (type == 'dept') {
- this.form.deptCheckStrictly = value ? true : false;
- }
- },
- /** 新增按钮操作 */
- handleAdd() {
- this.reset();
- this.getMenuTreeselect();
- this.open = true;
- this.title = "添加角色";
- },
- /** 修改按钮操作 */
- handleUpdate() {
- this.reset();
- this.fullscreenLoading = true
- const roleMenu = this.getRoleMenuTreeselect(this.roleId);
- roleMenu.then(res => {
- // let checkedKeys = res.checkedKeys
- this.deptOptions = res.menus
- this.fullscreenLoading = false
- });
- },
- /** 选择角色权限范围触发 */
- dataScopeSelectChange(value) {
- if (value !== '2') {
- this.$refs.dept.setCheckedKeys([]);
- }
- },
- /** 分配数据权限操作 */
- handleDataScope(row) {
- this.reset();
- const roleDeptTreeselect = this.getRoleDeptTreeselect(row.id);
- getRole(row.id).then(response => {
- this.form = response.data;
- this.openDataScope = true;
- this.$nextTick(() => {
- roleDeptTreeselect.then(res => {
- this.$refs.dept.setCheckedKeys(res.checkedKeys);
- });
- });
- this.title = "分配数据权限";
- });
- },
- /** 提交按钮 */
- submitForm: function() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- if (this.form.id != undefined) {
- // this.form.menuIds = this.getMenuAllCheckedKeys();
- updateRole(this.form).then(response => {
- this.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- });
- } else {
- // this.form.menuIds = this.getMenuAllCheckedKeys();
- addRole(this.form).then(response => {
- this.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- });
- }
- }
- });
- },
- /** 提交按钮(数据权限) */
- submitDataScope: function() {
- if (this.form.id != undefined) {
- this.form.deptIds = this.getDeptAllCheckedKeys();
- dataScope(this.form).then(response => {
- this.msgSuccess("修改成功");
- this.openDataScope = false;
- this.getList();
- });
- }
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const ids = row.id || this.ids;
- this.$confirm('是否确认删除角色编号为"' + ids + '"的数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
-
- }).then(function() {
- return delRole(ids);
- }).then(() => {
- this.getList();
- this.deptOptions = []
- this.msgSuccess("删除成功");
- })
- },
- /** 导出按钮操作 */
- handleExport() {
- this.download('system/role/export', {
- ...this.queryParams
- }, `role_${new Date().getTime()}.xlsx`)
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .searItemLeft{
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .roleContrBox {
- background-color: #fff;
- border-radius: 6px;
- overflow: hidden;
- padding: 23px 0;
- height: calc(100% - 183px);
- }
- .roleContr {
- padding-left: 17px;
- .searContLeft {
- max-height: calc(100vh - 353px);
- overflow-y: auto;
- box-sizing: border-box;
- padding: 23px 17px 23px 23px;
- border-right: 2px solid #E5E5E5;
- &::-webkit-scrollbar {
- display: none;
- }
- }
- .searContRight {
- padding-left: 18px;
- .searTitle {
- display: flex;
- padding-left: 11px;
- margin-bottom: 26px;
- .searName {
- color: #343434;
- font-size: 12px;
- width: 156px;
- }
- .searItem {
- flex: 1;
- font-size: 12px;
- }
- }
- .searCont {
- display: flex;
- height: 23px;
- padding-left: 11px;
- align-items: center;
- margin-bottom: 4px;
- cursor: pointer;
- .searName {
- color: #343434;
- font-size: 12px;
- width: 156px;
- }
- .searItem {
- flex: 1;
- font-size: 12px;
- }
- &:hover {
- background-color: rgba(0, 0, 0, .1);
- }
- }
- .active {
- background-color: #CADBE4;
- .searName {
- color: #fff;
- }
- }
- }
- }
- .searBoxs {
- background-color: #fff;
- border-radius: 6px;
- box-sizing: border-box;
- padding: 23px;
- .searBox {
- display: flex;
- .searInput {
- flex: 1;
- height: 32px;
- margin-right: 8px;
- box-sizing: border-box;
- }
- input {
- width: 100%;
- height: 100%;
- background-color: #F7F6F6;
- border: none;
- padding: 0 7px;
- outline: none;
- &::placeholder {
- color: #AAAAAA;
- font-size: 12px;
- }
- }
- .searBtn {
- width: 30px;
- height: 32px;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #3C8DBC;
- cursor: pointer;
- .icon {
- width: 18px;
- height: 17px;
- }
- }
- }
- .searList {
- padding: 10px 0;
- .searItem {
- padding: 0 8px;
- line-height: 30px;
- font-size: 12px;
- color: #343434;
- cursor: pointer;
- }
- .active {
- background-color: #CADBE4;
- color: #3C8DBC;
- }
- }
- }
- .app-container {
- background-color: #EFF0FF;
- height: calc(100vh - 84px);
- box-sizing: border-box;
- }
- .roleBox {
- padding: 0 23px;
- background: #fff;
- border-radius: 6px;
- .roleCol {
- padding: 20px 0;
- border-bottom: 1px solid #E5E5E5;
- .roleH {
- width: 18px;
- height: 8px;
- border-radius: 4px;
- background-color: #3C8DBC;
- margin-bottom: 8px;
- }
- span {
- font-size: 15px;
- color: #3C8DBC;
- }
- }
- .roleBot {
- padding: 22px 0;
- .roleBtn {
- height: 32px;
- display: flex;
- border-radius: 3px;
- justify-content: center;
- align-items: center;
- width: 83px;
- margin-right: 18px;
- .icon {
- width: 14px;
- height: 14px;
- margin-right: 7px;
- }
- span {
- color: #fff;
- font-size: 12px;
- }
- }
- }
- }
- </style>
- <style>
- .el-icon-my-export {
- background: url('~@/assets/images/icon_btn_bc@2x.png') center no-repeat;
- background-size: 13px 13px;
- /* background-size: cover;*/
- }
- .el-icon-my-export:before {
- content: "替";
- font-size: 16px;
- visibility: hidden;
- }
- .el-icon-my-export {
- font-size: 16px;
- }
- .el-icon-my-export:before {
- content: "\e611";
- }
- </style>
|