| | |
| | | ></el-date-picker>
|
| | | </el-form-item>
|
| | | <el-form-item>
|
| | | <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
| | | <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>
|
| | |
| | | <el-col :span="1.5">
|
| | | <el-button
|
| | | type="primary"
|
| | | plain
|
| | | icon="el-icon-plus"
|
| | | size="mini"
|
| | | @click="handleAdd"
|
| | |
| | | <el-col :span="1.5">
|
| | | <el-button
|
| | | type="success"
|
| | | plain
|
| | | icon="el-icon-edit"
|
| | | size="mini"
|
| | | :disabled="single"
|
| | |
| | | <el-col :span="1.5">
|
| | | <el-button
|
| | | type="danger"
|
| | | plain
|
| | | icon="el-icon-delete"
|
| | | size="mini"
|
| | | :disabled="multiple"
|
| | |
| | | <el-col :span="1.5">
|
| | | <el-button
|
| | | type="warning"
|
| | | plain
|
| | | icon="el-icon-download"
|
| | | size="mini"
|
| | | :loading="exportLoading"
|
| | | @click="handleExport"
|
| | | v-hasPermi="['system:role:export']"
|
| | | >导出</el-button>
|
| | |
| | | </el-radio-group>
|
| | | </el-form-item>
|
| | | <el-form-item label="菜单权限">
|
| | | <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-tree
|
| | | class="tree-border"
|
| | | :data="menuOptions"
|
| | | show-checkbox
|
| | | ref="menu"
|
| | | node-key="id"
|
| | | :check-strictly="!form.menuCheckStrictly"
|
| | | empty-text="加载中,请稍后"
|
| | | :props="defaultProps"
|
| | | ></el-tree>
|
| | |
| | | <el-input v-model="form.roleKey" :disabled="true" />
|
| | | </el-form-item>
|
| | | <el-form-item label="权限范围">
|
| | | <el-select v-model="form.dataScope">
|
| | | <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
|
| | | <el-option
|
| | | v-for="item in dataScopeOptions"
|
| | | :key="item.value"
|
| | |
| | | </el-select>
|
| | | </el-form-item>
|
| | | <el-form-item label="数据权限" v-show="form.dataScope == 2">
|
| | | <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
|
| | | <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
|
| | | <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
|
| | | <el-tree
|
| | | class="tree-border"
|
| | | :data="deptOptions"
|
| | | show-checkbox
|
| | | default-expand-all
|
| | | ref="dept"
|
| | | node-key="id"
|
| | | :check-strictly="!form.deptCheckStrictly"
|
| | | empty-text="加载中,请稍后"
|
| | | :props="defaultProps"
|
| | | ></el-tree>
|
| | |
| | | return {
|
| | | // 遮罩层
|
| | | loading: true,
|
| | | // 导出遮罩层
|
| | | exportLoading: false,
|
| | | // 选中数组
|
| | | ids: [],
|
| | | // 非单个禁用
|
| | |
| | | open: false,
|
| | | // 是否显示弹出层(数据权限)
|
| | | openDataScope: false,
|
| | | menuExpand: false,
|
| | | menuNodeAll: false,
|
| | | deptExpand: true,
|
| | | deptNodeAll: false,
|
| | | // 日期范围
|
| | | dateRange: [],
|
| | | // 状态数据字典
|
| | |
| | | // 所有菜单节点数据
|
| | | getMenuAllCheckedKeys() {
|
| | | // 目前被选中的菜单节点
|
| | | let checkedKeys = this.$refs.menu.getHalfCheckedKeys();
|
| | | let checkedKeys = this.$refs.menu.getCheckedKeys();
|
| | | // 半选中的菜单节点
|
| | | let halfCheckedKeys = this.$refs.menu.getCheckedKeys();
|
| | | let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
|
| | | checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
| | | return checkedKeys;
|
| | | },
|
| | | // 所有部门节点数据
|
| | | getDeptAllCheckedKeys() {
|
| | | // 目前被选中的部门节点
|
| | | let checkedKeys = this.$refs.dept.getHalfCheckedKeys();
|
| | | let checkedKeys = this.$refs.dept.getCheckedKeys();
|
| | | // 半选中的部门节点
|
| | | let halfCheckedKeys = this.$refs.dept.getCheckedKeys();
|
| | | let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
|
| | | checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
| | | return checkedKeys;
|
| | | },
|
| | |
| | | if (this.$refs.menu != undefined) {
|
| | | this.$refs.menu.setCheckedKeys([]);
|
| | | }
|
| | | this.menuExpand = false,
|
| | | this.menuNodeAll = false,
|
| | | this.deptExpand = true,
|
| | | this.deptNodeAll = false,
|
| | | this.form = {
|
| | | roleId: undefined,
|
| | | roleName: undefined,
|
| | |
| | | status: "0",
|
| | | menuIds: [],
|
| | | deptIds: [],
|
| | | menuCheckStrictly: true,
|
| | | deptCheckStrictly: true,
|
| | | remark: undefined
|
| | | };
|
| | | this.resetForm("form");
|
| | |
| | | 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.open = true;
|
| | | this.$nextTick(() => {
|
| | | roleMenu.then(res => {
|
| | | this.$refs.menu.setCheckedKeys(res.checkedKeys);
|
| | | let checkedKeys = res.checkedKeys
|
| | | checkedKeys.forEach((v) => {
|
| | | this.$nextTick(()=>{
|
| | | this.$refs.menu.setChecked(v, true ,false);
|
| | | })
|
| | | })
|
| | | });
|
| | | });
|
| | | this.title = "修改角色";
|
| | | });
|
| | | },
|
| | | /** 选择角色权限范围触发 */
|
| | | dataScopeSelectChange(value) {
|
| | | if(value !== '2') {
|
| | | this.$refs.dept.setCheckedKeys([]);
|
| | | }
|
| | | },
|
| | | /** 分配数据权限操作 */
|
| | | handleDataScope(row) {
|
| | |
| | | if (this.form.roleId != undefined) {
|
| | | this.form.menuIds = this.getMenuAllCheckedKeys();
|
| | | updateRole(this.form).then(response => {
|
| | | if (response.code === 200) {
|
| | | this.msgSuccess("修改成功");
|
| | | this.open = false;
|
| | | this.getList();
|
| | | }
|
| | | this.msgSuccess("修改成功");
|
| | | this.open = false;
|
| | | this.getList();
|
| | | });
|
| | | } else {
|
| | | this.form.menuIds = this.getMenuAllCheckedKeys();
|
| | | addRole(this.form).then(response => {
|
| | | if (response.code === 200) {
|
| | | this.msgSuccess("新增成功");
|
| | | this.open = false;
|
| | | this.getList();
|
| | | }
|
| | | this.msgSuccess("新增成功");
|
| | | this.open = false;
|
| | | this.getList();
|
| | | });
|
| | | }
|
| | | }
|
| | |
| | | if (this.form.roleId != undefined) {
|
| | | this.form.deptIds = this.getDeptAllCheckedKeys();
|
| | | dataScope(this.form).then(response => {
|
| | | if (response.code === 200) {
|
| | | this.msgSuccess("修改成功");
|
| | | this.openDataScope = false;
|
| | | this.getList();
|
| | | }
|
| | | this.msgSuccess("修改成功");
|
| | | this.openDataScope = false;
|
| | | this.getList();
|
| | | });
|
| | | }
|
| | | },
|
| | |
| | | }).then(() => {
|
| | | this.getList();
|
| | | this.msgSuccess("删除成功");
|
| | | }).catch(function() {});
|
| | | }).catch(() => {});
|
| | | },
|
| | | /** 导出按钮操作 */
|
| | | handleExport() {
|
| | |
| | | confirmButtonText: "确定",
|
| | | cancelButtonText: "取消",
|
| | | type: "warning"
|
| | | }).then(function() {
|
| | | }).then(() => {
|
| | | this.exportLoading = true;
|
| | | return exportRole(queryParams);
|
| | | }).then(response => {
|
| | | this.download(response.msg);
|
| | | }).catch(function() {});
|
| | | this.exportLoading = false;
|
| | | }).catch(() => {});
|
| | | }
|
| | | }
|
| | | };
|