角色管理完成
This commit is contained in:
xiayuping666
+3
-1
@@ -659,7 +659,9 @@ export default {
|
||||
"roles": ["admin", "common"],
|
||||
"icon": "el-icon-collection"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
@@ -41,6 +41,39 @@ export function deleteDept (id) {
|
||||
}
|
||||
})
|
||||
}
|
||||
// 获取所有的用户
|
||||
export function getallUser (params) {
|
||||
return request({
|
||||
url: `/manager/user/list`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 添加部门用户
|
||||
export function postDeptUser (data) {
|
||||
return request({
|
||||
url: `/manager/dept/user`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 添加部门用户
|
||||
export function deleteDeptUser (data) {
|
||||
return request({
|
||||
url: `/manager/dept/user`,
|
||||
method: 'DELETE',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改部门用户迁移到其他部门
|
||||
export function putDeptUser (data) {
|
||||
return request({
|
||||
url: `/manager/dept/user`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
+210
-13
@@ -30,11 +30,10 @@
|
||||
</el-card>
|
||||
<el-card shadow="hover" style=" margin-top: 20px;" >
|
||||
<div style="margin-bottom: 10px;">
|
||||
<el-button type="primary">添加人员</el-button>
|
||||
|
||||
<el-button @click="onClickAddUser" v-if="deptData.name" type="primary">添加人员</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="userArr"
|
||||
:data="deptUserArr"
|
||||
:row-style="{ height: '50px' }"
|
||||
border
|
||||
>
|
||||
@@ -51,11 +50,34 @@
|
||||
<img :src="scope.row.avatar" alt="" style="width: 100px; height: 100px;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限" prop="roleName"></el-table-column>
|
||||
|
||||
|
||||
<el-table-column label="角色" prop="roleName"></el-table-column>
|
||||
<el-table-column label="操作" prop="avatar">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="onClickTransfer(scope.row)"
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: #409eff"
|
||||
class="el-icon-back"
|
||||
type="text"
|
||||
size="small"
|
||||
>转移人员
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
@confirm="onClickDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-card>
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
@@ -114,16 +136,87 @@
|
||||
<el-button type="primary" @click="onClickAffirmUpdate">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 人员添加模态框 -->
|
||||
<el-dialog title="人员添加"
|
||||
:visible.sync="isAddUserDialog"
|
||||
width="60%">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb20">
|
||||
<div style="display: flex;">
|
||||
<div style="width: 50px; line-height: 28px; font-weight: 600;">搜索</div>
|
||||
<el-input v-model="userQuery.condition" placeholder="请输入用户名或手机号搜索" class="input-with-select">
|
||||
<el-button @click="onClickSearch" slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="allUserArr"
|
||||
:row-key="getRowKeys"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
:reserve-selection="true"
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column label="照片" prop="faceImg">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.faceImg" alt="" style="width: 100px; height: 100px;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="姓名" prop="name"></el-table-column>
|
||||
<el-table-column label="性别" prop="gender"></el-table-column>
|
||||
<el-table-column label="手机号" prop="mobile"></el-table-column>
|
||||
<el-table-column label="头像" prop="avatar">
|
||||
<template slot-scope="scope">
|
||||
<img :src="scope.row.avatar" alt="" style="width: 100px; height: 100px;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="userTotal"
|
||||
:pageNum="userQuery.current"
|
||||
:pageSize="userQuery.size"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="isAddUserDialog = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onClickAffirmAddUser">确定添加</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 人员添加模态框 -->
|
||||
<el-dialog title="部门人员转移"
|
||||
:visible.sync="isTransferDialog"
|
||||
width="30%">
|
||||
<el-form ref="transferForm" :model="deptForm" label-width="80px">
|
||||
<el-form-item label="当前部门" prop="newDeptId">
|
||||
<el-input v-model="deptData.name" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="新部门" prop="newDeptId">
|
||||
<Treeselect v-model="transferForm.newDeptId" :options="deptArr" :normalizer="normalizer" placeholder="选择上级部门" />
|
||||
</el-form-item>
|
||||
<div style="margin-top: 100px;"></div>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="isTransferDialog = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onClickAffirmTransferUser">确定转移</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import { getDept, getDeptUser, postDept, putDept, deleteDept } from "./api";
|
||||
import { getDept, getDeptUser, postDept, putDept, deleteDept, getallUser, postDeptUser, deleteDeptUser, putDeptUser } from "./api";
|
||||
import { formatDate } from "@/com/index";
|
||||
import CommonHead from './components/CommonHead.vue'
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
const errorMessages = {
|
||||
name: '请输入部门名称',
|
||||
sort: '请输入排序',
|
||||
@@ -145,7 +238,7 @@ export default {
|
||||
},
|
||||
|
||||
deptArr: [], // 校区班级列表
|
||||
userArr: [],// 学生列表
|
||||
deptUserArr: [],// 部门用户列表
|
||||
defaultCheckedKeys: [],
|
||||
isAddDialog: false, // 新增弹框
|
||||
isUpdateDialog: false, // 修改弹框
|
||||
@@ -160,7 +253,21 @@ export default {
|
||||
sort: '',
|
||||
deptId: null, // 部门id
|
||||
}, // 修改部门表单
|
||||
resource: 1
|
||||
resource: 1, // 是否是一级部门
|
||||
|
||||
isAddUserDialog: false, // 添加用户模态框
|
||||
allUserArr: [], // 所有用户列表
|
||||
userTotal: 0,
|
||||
userQuery: { // 获取所有用户参数
|
||||
current: 1,
|
||||
size: 10,
|
||||
condition: null, // 可以是用户名或手机号
|
||||
},
|
||||
multipleSelection: '', // 选中的用户
|
||||
isTransferDialog: false, // 转移用户模态框
|
||||
transferForm: {
|
||||
newDeptId: null,
|
||||
}, // 转移部门的模态框
|
||||
};
|
||||
},
|
||||
components: {
|
||||
@@ -170,11 +277,79 @@ export default {
|
||||
},
|
||||
async created() {
|
||||
this.deptList()
|
||||
this.allUserList()
|
||||
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 点击确定转移用户部门
|
||||
onClickAffirmTransferUser() {
|
||||
if(this.transferForm.newDeptId){
|
||||
putDeptUser(this.transferForm).then( res =>{
|
||||
this.$message.success('转移成功')
|
||||
this.isTransferDialog = false
|
||||
this.deptUserList(this.deptData.deptId)
|
||||
})
|
||||
}else {
|
||||
this.$message.error('请选择新部门')
|
||||
}
|
||||
// this.isTransferDialog = false
|
||||
console.log(this.transferForm)
|
||||
},
|
||||
// 点击转移用户
|
||||
onClickTransfer(row) {
|
||||
this.transferForm = {
|
||||
newDeptId: null,
|
||||
deptId: this.deptData.deptId,
|
||||
userid: row.userid
|
||||
}, // 转移部门的模态框
|
||||
this.isTransferDialog = true
|
||||
},
|
||||
// 点击删除
|
||||
onClickDelete(row) {
|
||||
console.log(row)
|
||||
let obj = { userid: row.userid, deptId: this.deptData.deptId }
|
||||
deleteDeptUser(obj).then( res =>{
|
||||
this.$message.success('删除成功')
|
||||
this.deptUserList(this.deptData.deptId)
|
||||
})
|
||||
},
|
||||
// 点击搜索
|
||||
onClickSearch() {
|
||||
this.userQuery.current = 1
|
||||
this.userQuery.size = 10
|
||||
this.allUserList()
|
||||
},
|
||||
// 点击添加用户
|
||||
onClickAddUser() {
|
||||
this.isAddUserDialog = true;
|
||||
if(this.multipleSelection.length){
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
this.multipleSelection = []
|
||||
}
|
||||
},
|
||||
onClickAffirmAddUser() {
|
||||
if(this.multipleSelection.length){
|
||||
let arr = []
|
||||
this.multipleSelection.forEach(item => {
|
||||
arr.push(item.userid)
|
||||
})
|
||||
let obj = { deptId: this.deptData.deptId, userIds: arr}
|
||||
// console.log(obj)
|
||||
postDeptUser(obj).then( res =>{
|
||||
this.$message.success('添加成功')
|
||||
this.isAddUserDialog = false
|
||||
this.deptUserList(this.deptData.deptId)
|
||||
})
|
||||
}else{
|
||||
this.$message.error('请勾选需要添加的人员')
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
console.log(val)
|
||||
},
|
||||
normalizer(node) {
|
||||
if (node.childrenList && !node.childrenList.length) {
|
||||
return { id: node.deptId, label: node.name, };
|
||||
@@ -201,7 +376,14 @@ export default {
|
||||
// 获取部门用户列表
|
||||
deptUserList(deptId){
|
||||
getDeptUser(deptId, this.query).then( res =>{
|
||||
this.userArr = res
|
||||
this.deptUserArr = res
|
||||
})
|
||||
},
|
||||
// 获取所有用户列表 用于添加部门人员
|
||||
allUserList() {
|
||||
getallUser(this.userQuery).then(res =>{
|
||||
this.allUserArr = res.records
|
||||
this.userTotal = res.total
|
||||
})
|
||||
},
|
||||
// 点击确定修改
|
||||
@@ -270,6 +452,16 @@ export default {
|
||||
this.$message({ type: 'info', message: '已取消删除' });
|
||||
});
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.userQuery.current = val;
|
||||
this.allUserList();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.userQuery.size = val;
|
||||
this.allUserList();
|
||||
},
|
||||
onChangeRadio() {
|
||||
this.resetDeptForm()
|
||||
},
|
||||
@@ -286,7 +478,12 @@ export default {
|
||||
sort: '',
|
||||
deptId: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
// 设置节点id
|
||||
getRowKeys(row) {
|
||||
return row.userid
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
@@ -174,12 +174,13 @@ export default {
|
||||
},
|
||||
// 登录按钮点击
|
||||
submitForm() {
|
||||
this.submit.loading = true;
|
||||
this.$router.push('/evaluate')
|
||||
console.log(this.$router)
|
||||
|
||||
if( rulesPhone(this.loginForm.phone) ){ // 判断是否存在手机号验证码
|
||||
if(this.loginForm.code){
|
||||
this.submit.loading = true;
|
||||
|
||||
// 登录发请求获取用户信息
|
||||
let obj = {...this.$store.state.loginConfig.loginConfig, ...this.loginForm}
|
||||
let formData = new FormData()
|
||||
@@ -209,6 +210,8 @@ export default {
|
||||
this.submit.loading = false;
|
||||
this.sendText = '发送'
|
||||
})
|
||||
}else{
|
||||
this.$message.error('请输入验证码！')
|
||||
}
|
||||
}else {
|
||||
this.$message.error('请输入正确的手机号！')
|
||||
|
||||
@@ -1,30 +1,37 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
|
||||
|
||||
// 修改获取增加权限
|
||||
export const rqModifyOrAddPermissions = (data) => request({
|
||||
url: `/user-dept/user/roleAuthority`,
|
||||
// 查询角色列表
|
||||
export function getRole (params) {
|
||||
return request({
|
||||
url: '/manager/role/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 添加角色
|
||||
export function postRole (data) {
|
||||
return request({
|
||||
url: '/manager/role',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
// 获取角色列表
|
||||
export const rqGetRoleList = (groupId=-1) => request({
|
||||
url: `/user-dept/user/role/${groupId}`,
|
||||
method: 'get',
|
||||
}
|
||||
// 修改角色
|
||||
export function putRole (data) {
|
||||
return request({
|
||||
url: '/manager/role',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
// 获取权限列表
|
||||
export const rqGetPermissionList = (parentId=0) => request({
|
||||
url: `/user-dept/user/authority/list/${parentId}`,
|
||||
method: 'get',
|
||||
})
|
||||
|
||||
// 根据id查询它有那些权限
|
||||
export const rqQueryPermission= (id) => request({
|
||||
url: `/user-dept/user/authority/${id}`,
|
||||
method: 'get',
|
||||
}
|
||||
// 删除角色
|
||||
export function deleteRole (id) {
|
||||
return request({
|
||||
url: '/manager/role',
|
||||
method: 'DELETE',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-form>
|
||||
<el-form-item label="角色范围" style="margin-top: 10px">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="firstLevelRoleid"
|
||||
placeholder="请选择所属范围"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in firstLevelRoleList"
|
||||
:label="item.name"
|
||||
:key="index"
|
||||
:value="item.id"
|
||||
@click.native="queryRoleList(item.id)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<CommonTables
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="RoleList"
|
||||
></CommonTables>
|
||||
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
title="设置权限"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-tree
|
||||
ref="treeOne"
|
||||
:data="LevelPermissionList"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmSettingRules" size="mini"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import {
|
||||
rqGetRoleList,
|
||||
rqGetPermissionList,
|
||||
rqQueryPermission,
|
||||
rqModifyOrAddPermissions,
|
||||
} from "./api";
|
||||
|
||||
export default {
|
||||
name: "rolePermissions",
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loading: false,
|
||||
ruleList: [],
|
||||
dialogVisible: false,
|
||||
|
||||
// 一级角色列表
|
||||
firstLevelRoleList: [],
|
||||
// 一级id
|
||||
firstLevelRoleid: "默认",
|
||||
//操作角色列表
|
||||
RoleList: [],
|
||||
// 一级权限列表
|
||||
LevelPermissionList: [],
|
||||
// 一级id
|
||||
firstLevelPermission: "",
|
||||
defaultProps: {
|
||||
children: "authorities",
|
||||
label: "alias",
|
||||
},
|
||||
// 角色的id
|
||||
formRC: {
|
||||
roleid: "",
|
||||
// 点击已经选中的id集合
|
||||
authorityids: [],
|
||||
},
|
||||
// 进来已经选择的
|
||||
selectedByDefault: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getRoleList();
|
||||
this.getPermissionList();
|
||||
this.queryRoleList(592539677);
|
||||
},
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("正在搜索");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.$message("角色新增请联系钉钉后台管理员");
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
this.$message("该角色暂时无法删除");
|
||||
},
|
||||
// 编辑
|
||||
async editData(item) {
|
||||
this.formRC.roleid = item.id;
|
||||
this.dialogVisible = true;
|
||||
console.log(item);
|
||||
let res = await rqQueryPermission(item.id);
|
||||
if (res.code == 200) {
|
||||
let arr = res.data.map((item, index) => {
|
||||
return item.id;
|
||||
});
|
||||
this.selectedByDefault = arr;
|
||||
this.$refs.treeOne.setCheckedKeys(arr);
|
||||
} else {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
})
|
||||
.catch((_) => {});
|
||||
},
|
||||
// 获取角色列表分类
|
||||
async getRoleList() {
|
||||
try {
|
||||
this.loading = true;
|
||||
// let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
|
||||
let result = await rqGetRoleList();
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.firstLevelRoleList = result.data;
|
||||
// this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 查询角色列表
|
||||
async queryRoleList(id) {
|
||||
try {
|
||||
this.loading = true;
|
||||
// let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
|
||||
let result = await rqGetRoleList(id);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.RoleList = result.data;
|
||||
// this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 获取权限列表
|
||||
async getPermissionList() {
|
||||
console.log(111);
|
||||
try {
|
||||
this.loading = true;
|
||||
// let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
|
||||
let result = await rqGetPermissionList();
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.LevelPermissionList = result.data;
|
||||
// this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
|
||||
// 确认新增或者修改按钮
|
||||
async confirmSettingRules() {
|
||||
const treeInstance = this.$refs.treeOne;
|
||||
// 调用 getCheckedNodes 方法获取已勾选的节点数组
|
||||
const checkedNodes = treeInstance.getCheckedNodes();
|
||||
console.log(checkedNodes);
|
||||
let arr = checkedNodes.map((ion, index) => {
|
||||
return ion.id;
|
||||
});
|
||||
this.formRC.authorityids = arr;
|
||||
let res = await rqModifyOrAddPermissions(this.formRC);
|
||||
if (res.code == 200) {
|
||||
this.$message.success("设置成功");
|
||||
this.dialogVisible = false;
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
this.$message.success("服务器错误");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
+175
-217
@@ -1,74 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover">
|
||||
<CommonHead
|
||||
@search-data="searchForm"
|
||||
@reset-data="reset"
|
||||
@newly-data="add"
|
||||
></CommonHead>
|
||||
<!-- newly-data删除所选事件 -->
|
||||
<!-- reset-data重置表单内容 -->
|
||||
<!-- search-data搜索事件，接收被搜索的内容 -->
|
||||
<el-form>
|
||||
<el-form-item label="角色范围" style="margin-top: 10px">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="firstLevelRoleid"
|
||||
placeholder="请选择所属范围"
|
||||
<!-- <h4>{{ classData.name}}</h4> -->
|
||||
<div style="display: flex;">
|
||||
<el-button @click="isAddDialog = true; resetForm()" size="mini" type="primary" class="el-icon-plus">新增角色</el-button>
|
||||
|
||||
<!-- <el-button @click="isAddDialog = true" slot="reference" style="margin-left: 10px;" class="el-icon-plus" type="text" size="small" >新增</el-button> -->
|
||||
<!-- <div style="margin-right: 10px; font-size: 16px; line-height: 27px; font-weight: 700;">{{ deptData.name }}</div> -->
|
||||
<!-- <div v-else style="margin-right: 10px; font-size: 16px; line-height: 27px;font-weight: 700;">{{ classData.name}}</div> -->
|
||||
<!-- <el-button @click="onClickUpdate" v-if="deptData.name" size="mini" type="warning" class="el-icon-edit">修改角色</el-button>
|
||||
<el-button @click="onClickRemove" v-if="deptData.name" size="mini" type="danger" class="el-icon-delete">删除</el-button> -->
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" style=" margin-top: 20px;" >
|
||||
<el-table
|
||||
:data="roleArr"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'childrenList'}"
|
||||
:row-style="{ height: '50px' }"
|
||||
border
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in firstLevelRoleList"
|
||||
:label="item.name"
|
||||
:key="index"
|
||||
:value="item.id"
|
||||
@click.native="queryRoleList(item.id)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table-column label="角色名" prop="name"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime"></el-table-column>
|
||||
<el-table-column label="排序" prop="sort"></el-table-column>
|
||||
<el-table-column label="操作" prop="avatar">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="resetForm();isAddDialog = true; roleForm.groupId = scope.row.id;"
|
||||
v-if="scope.row.groupId == -1"
|
||||
slot="reference"
|
||||
style="margin-left: 10px;"
|
||||
class="el-icon-plus"
|
||||
type="text"
|
||||
size="small"
|
||||
>新增</el-button>
|
||||
<el-button
|
||||
@click="resetForm(); roleForm = { ...scope.row }; ;isUpdateDialog = true;"
|
||||
slot="reference"
|
||||
style="margin-left: 10px;"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>修改</el-button>
|
||||
<el-popconfirm
|
||||
@confirm="onClickDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<CommonTables
|
||||
v-loading="loading"
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="RoleList"
|
||||
></CommonTables>
|
||||
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
:pageNum="query.current"
|
||||
:pageSize="query.size"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对话框 -->
|
||||
<el-dialog
|
||||
title="设置权限"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-tree
|
||||
ref="treeOne"
|
||||
:data="LevelPermissionList"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
>
|
||||
</el-tree>
|
||||
|
||||
<!-- 新增角色 -->
|
||||
<el-dialog
|
||||
title="新增角色"
|
||||
:visible.sync="isAddDialog"
|
||||
width="30%">
|
||||
<el-form ref="roleForm" :model="roleForm" label-width="80px">
|
||||
<el-form-item v-if="roleForm.groupId" label="上级角色" prop="groupId" >
|
||||
<el-select v-model="roleForm.groupId" disabled>
|
||||
<el-option
|
||||
v-for="item in roleArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model="roleForm.sort" type="number" placeholder="数值越小越靠前" ></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmSettingRules" size="mini"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button @click="isAddDialog = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onClickAffirm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 修改角色 -->
|
||||
<el-dialog
|
||||
title="修改角色"
|
||||
:visible.sync="isUpdateDialog"
|
||||
width="30%">
|
||||
<el-form ref="roleForm" :model="roleForm" label-width="80px">
|
||||
<!-- <el-form-item v-if="roleForm.groupId" label="上级角色" prop="groupId" >
|
||||
<el-select v-model="roleForm.groupId" disabled>
|
||||
<el-option
|
||||
v-for="item in roleArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input v-model="roleForm.sort" type="number" placeholder="数值越小越靠前" ></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="isAddDialog = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onClickUpdateAffirm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -76,187 +128,93 @@
|
||||
|
||||
<script>
|
||||
import columns from "./columns";
|
||||
import {
|
||||
rqGetRoleList,
|
||||
rqGetPermissionList,
|
||||
rqQueryPermission,
|
||||
rqModifyOrAddPermissions,
|
||||
} from "./api";
|
||||
import { getRole, postRole, putRole, deleteRole} from "./api";
|
||||
|
||||
const errorMessages = {
|
||||
name: '请输入角色名称',
|
||||
sort: '请输入排序',
|
||||
};
|
||||
export default {
|
||||
name: "rolePermissions",
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
total: 0,
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
size: 10,
|
||||
groupId: -1
|
||||
},
|
||||
loading: false,
|
||||
ruleList: [],
|
||||
dialogVisible: false,
|
||||
roleArr: [],
|
||||
isAddDialog: false,
|
||||
roleForm: {
|
||||
name: null,
|
||||
sort: null,
|
||||
groupId: null,
|
||||
},
|
||||
roleData: {}, // 点击新增选中的角色
|
||||
isUpdateDialog: false,
|
||||
|
||||
// 一级角色列表
|
||||
firstLevelRoleList: [],
|
||||
// 一级id
|
||||
firstLevelRoleid: "默认",
|
||||
//操作角色列表
|
||||
RoleList: [],
|
||||
// 一级权限列表
|
||||
LevelPermissionList: [],
|
||||
// 一级id
|
||||
firstLevelPermission: "",
|
||||
defaultProps: {
|
||||
children: "authorities",
|
||||
label: "alias",
|
||||
},
|
||||
// 角色的id
|
||||
formRC: {
|
||||
roleid: "",
|
||||
// 点击已经选中的id集合
|
||||
authorityids: [],
|
||||
},
|
||||
// 进来已经选择的
|
||||
selectedByDefault: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getRoleList();
|
||||
this.getPermissionList();
|
||||
this.queryRoleList(592539677);
|
||||
this.roleList();
|
||||
},
|
||||
methods: {
|
||||
// 搜索按钮
|
||||
searchForm() {
|
||||
this.$message("正在搜索");
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
this.bus.$emit("onCurrentContextmenuClick", {
|
||||
id: 0,
|
||||
path: this.$route.path,
|
||||
});
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.$message("角色新增请联系钉钉后台管理员");
|
||||
},
|
||||
// 删除
|
||||
async deleteData(row) {
|
||||
this.$message("该角色暂时无法删除");
|
||||
},
|
||||
// 编辑
|
||||
async editData(item) {
|
||||
this.formRC.roleid = item.id;
|
||||
this.dialogVisible = true;
|
||||
console.log(item);
|
||||
let res = await rqQueryPermission(item.id);
|
||||
if (res.code == 200) {
|
||||
let arr = res.data.map((item, index) => {
|
||||
return item.id;
|
||||
});
|
||||
this.selectedByDefault = arr;
|
||||
this.$refs.treeOne.setCheckedKeys(arr);
|
||||
// 点击确定新增
|
||||
onClickAffirm() {
|
||||
console.log(this.roleForm)
|
||||
let obj = { ...this.roleForm }
|
||||
if(obj.name === null){
|
||||
this.$message.error(errorMessages.name);
|
||||
}else if(obj.sort === null){
|
||||
this.$message.error(errorMessages.sort);
|
||||
}else {
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(val) {
|
||||
this.query.pageNum = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(val) {
|
||||
this.query.pageSize = val;
|
||||
this.getAttendanceFormData();
|
||||
},
|
||||
handleClose(done) {
|
||||
this.$confirm("确认关闭？")
|
||||
.then((_) => {
|
||||
done();
|
||||
obj.groupId ? '' : obj.groupId = -1
|
||||
postRole(obj).then(res =>{
|
||||
this.roleList();
|
||||
this.$message.success('新增成功')
|
||||
this.isAddDialog = false
|
||||
})
|
||||
.catch((_) => {});
|
||||
}
|
||||
},
|
||||
// 获取角色列表分类
|
||||
async getRoleList() {
|
||||
try {
|
||||
this.loading = true;
|
||||
// let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
|
||||
let result = await rqGetRoleList();
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.firstLevelRoleList = result.data;
|
||||
// this.total = result.data.total;
|
||||
// 点击确定修改
|
||||
onClickUpdateAffirm() {
|
||||
console.log(this.roleForm)
|
||||
putRole(this.roleForm).then(res =>{
|
||||
this.roleList();
|
||||
this.$message.success('修改成功')
|
||||
this.isUpdateDialog = false
|
||||
})
|
||||
},
|
||||
normalizer(node) {
|
||||
if (node.childrenList && !node.childrenList.length) {
|
||||
return { id: node.id, label: node.name, };
|
||||
}else {
|
||||
this.loading = false;
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
return { id: node.id, label: node.name, children: node.childrenList };
|
||||
}
|
||||
},
|
||||
// 查询角色列表
|
||||
async queryRoleList(id) {
|
||||
try {
|
||||
this.loading = true;
|
||||
// let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
|
||||
let result = await rqGetRoleList(id);
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.RoleList = result.data;
|
||||
// this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
// 获取角色列表
|
||||
roleList() {
|
||||
getRole(this.query).then(res =>{
|
||||
this.roleArr = res
|
||||
})
|
||||
},
|
||||
// 获取权限列表
|
||||
async getPermissionList() {
|
||||
console.log(111);
|
||||
try {
|
||||
this.loading = true;
|
||||
// let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
|
||||
let result = await rqGetPermissionList();
|
||||
if (result.code == 200) {
|
||||
this.loading = false;
|
||||
this.LevelPermissionList = result.data;
|
||||
// this.total = result.data.total;
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.$message.error("服务器错误");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.$message.error("网络错误");
|
||||
}
|
||||
// 点击删除
|
||||
onClickDelete(item){
|
||||
console.log(item)
|
||||
deleteRole(item.id).then(res =>{
|
||||
this.roleList();
|
||||
this.$message.success('删除成功')
|
||||
})
|
||||
},
|
||||
|
||||
// 确认新增或者修改按钮
|
||||
async confirmSettingRules() {
|
||||
const treeInstance = this.$refs.treeOne;
|
||||
// 调用 getCheckedNodes 方法获取已勾选的节点数组
|
||||
const checkedNodes = treeInstance.getCheckedNodes();
|
||||
console.log(checkedNodes);
|
||||
let arr = checkedNodes.map((ion, index) => {
|
||||
return ion.id;
|
||||
});
|
||||
this.formRC.authorityids = arr;
|
||||
let res = await rqModifyOrAddPermissions(this.formRC);
|
||||
if (res.code == 200) {
|
||||
this.$message.success("设置成功");
|
||||
this.dialogVisible = false;
|
||||
} else {
|
||||
this.dialogVisible = false;
|
||||
this.$message.success("服务器错误");
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.roleForm = {
|
||||
name: null,
|
||||
sort: null,
|
||||
groupId: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user