|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
|
|
|
- <el-form-item label="角色名称" prop="roleName">
|
|
|
+ <el-form-item label="角色名称:" prop="roleName">
|
|
|
<el-input
|
|
|
v-model="queryParams.roleName"
|
|
|
placeholder="请输入角色名称"
|
|
@@ -11,7 +11,7 @@
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="权限字符" prop="roleKey">
|
|
|
+ <el-form-item label="权限字符:" prop="roleKey">
|
|
|
<el-input
|
|
|
v-model="queryParams.roleKey"
|
|
|
placeholder="请输入权限字符"
|
|
@@ -21,13 +21,13 @@
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
+ <el-form-item label="状态:" prop="status">
|
|
|
<el-select
|
|
|
v-model="queryParams.status"
|
|
|
- placeholder="角色状态"
|
|
|
+ placeholder="请选择角色状态"
|
|
|
clearable
|
|
|
size="small"
|
|
|
- style="width: 140px"
|
|
|
+ style="width: 160px"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="dict in statusOptions"
|
|
@@ -37,7 +37,7 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="创建时间">
|
|
|
+ <el-form-item label="创建时间:">
|
|
|
<el-date-picker
|
|
|
v-model="dateRange"
|
|
|
size="small"
|
|
@@ -141,50 +141,64 @@
|
|
|
/>
|
|
|
|
|
|
<!-- 添加或修改角色配置对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="cancel" :close-on-click-modal="false">
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body :before-close="cancel" :close-on-click-modal="false">
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
- <el-form-item label="角色名称" prop="roleName">
|
|
|
- <el-input v-model.trim="form.roleName" placeholder="请输入角色名称" maxlength="20" show-word-limit/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="roleKey">
|
|
|
- <span slot="label">
|
|
|
- <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
|
|
|
- <i class="el-icon-question"></i>
|
|
|
- </el-tooltip>
|
|
|
- 权限字符
|
|
|
- </span>
|
|
|
- <el-input v-model.trim="form.roleKey" placeholder="请输入权限字符" maxlength="20" show-word-limit />
|
|
|
- </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-radio-group v-model="form.status">
|
|
|
- <el-radio
|
|
|
- v-for="dict in statusOptions"
|
|
|
- :key="dict.dictValue"
|
|
|
- :label="dict.dictValue"
|
|
|
- >{{dict.dictLabel}}</el-radio>
|
|
|
- </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-form-item>
|
|
|
- <el-form-item label="备注">
|
|
|
- <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入内容" maxlength="20" show-word-limit></el-input>
|
|
|
- </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="角色名称" prop="roleName">
|
|
|
+ <el-input v-model.trim="form.roleName" placeholder="请输入角色名称" maxlength="20" show-word-limit/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item prop="roleKey">
|
|
|
+ <span slot="label">
|
|
|
+ <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
|
|
|
+ <i class="el-icon-question"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ 权限字符
|
|
|
+ </span>
|
|
|
+ <el-input v-model.trim="form.roleKey" placeholder="请输入权限字符" maxlength="20" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="角色顺序" prop="roleSort">
|
|
|
+ <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio
|
|
|
+ v-for="dict in statusOptions"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictValue"
|
|
|
+ >{{dict.dictLabel}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <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-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入内容" maxlength="20" show-word-limit></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
@@ -195,40 +209,50 @@
|
|
|
</el-dialog>
|
|
|
|
|
|
<!-- 分配角色数据权限对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body >
|
|
|
+ <el-dialog :title="title" :visible.sync="openDataScope" width="650px" append-to-body >
|
|
|
<el-form :model="form" label-width="80px">
|
|
|
- <el-form-item label="角色名称">
|
|
|
- <el-input v-model="form.roleName" :disabled="true" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="权限字符">
|
|
|
- <el-input v-model="form.roleKey" :disabled="true" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="权限范围">
|
|
|
- <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
|
|
|
- <el-option
|
|
|
- v-for="item in dataScopeOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </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>
|
|
|
- </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="角色名称">
|
|
|
+ <el-input v-model="form.roleName" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="权限字符">
|
|
|
+ <el-input v-model="form.roleKey" :disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="权限范围">
|
|
|
+ <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in dataScopeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <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>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button type="primary" @click="submitDataScope" v-if="!loading">确 定</el-button>
|
|
@@ -238,7 +262,6 @@
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
|
|
|
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
|