提交 2a4a0176 authored 作者: 龙菲's avatar 龙菲

修改用户角色权限绑定为树形结构

上级 a8757360
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"axios": "0.18.1", "axios": "0.18.1",
"core-js": "3.6.5", "core-js": "3.6.5",
"echarts": "^5.4.0", "echarts": "^5.4.0",
"el-tree-transfer": "^2.4.7",
"element-ui": "2.13.2", "element-ui": "2.13.2",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
......
...@@ -125,6 +125,15 @@ export function getUserOwnRoles(id) { ...@@ -125,6 +125,15 @@ export function getUserOwnRoles(id) {
}) })
} }
export function getUserOwnRolesV1(id) {
return request({
url: 'sys/user/v1/roles/' + id,
method: 'get'
})
}
// 更新用户角色信息 // 更新用户角色信息
export function updateUserOwnRoles(id,data) { export function updateUserOwnRoles(id,data) {
return request({ return request({
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<el-input v-else v-model="userInfoForm.phone"></el-input> <el-input v-else v-model="userInfoForm.phone"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.native="handleSubmitUserInfo">{{ <el-button type="primary" @click.native="handleSubmitUserInfo" icon="el-icon-circle-check">{{
isEditingUserInfo ? "保存" : "修改个人信息" isEditingUserInfo ? "保存" : "修改个人信息"
}}</el-button> }}</el-button>
<el-button <el-button
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<el-input v-model="pwdForm.checkPass" type="password"></el-input> <el-input v-model="pwdForm.checkPass" type="password"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.native="handleSubmitPwd" <el-button type="primary" icon="el-icon-circle-check" @click.native="handleSubmitPwd"
>保存</el-button >保存</el-button
> >
<el-button type="primary" @click.native="handleCancelChangePwd" <el-button type="primary" @click.native="handleCancelChangePwd"
......
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading" <el-button type="primary" @click="handleSubmit" :loading="loading"
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</div> </div>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-button <el-button
type="primary" type="primary"
@click.native="handleOperation({ type: 'add' })" @click.native="handleOperation({ type: 'add' })"
icon="el-icon-s-promotion" icon="el-icon-plus"
> >
发布</el-button 发布</el-button
> >
......
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="app-container"> <div class="app-container">
<div class="top-bar"> <div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" /> <SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-s-promotion"> <el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-plus">
发布</el-button> 添加</el-button>
</div> </div>
<TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates"> <TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates">
<template v-slot:status="data"> <template v-slot:status="data">
......
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="top-bar"> <div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" /> <SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button type="primary" @click.native="handleOperation('add')"> <el-button type="primary" @click.native="handleOperation('add')">
<i class="el-icon-s-promotion"></i> <i class="el-icon-plus"></i>
添加</el-button 添加</el-button
> >
</div> </div>
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>保存<i class="el-icon-s-promotion" style="margin-left: 5px"></i >保存<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
dialogVisible: false, dialogVisible: false,
options: [ options: [
{ label: "所有", value: 1 }, { label: "所有", value: 1 },
{ label: "自定义部门", value: 2 }, // { label: "自定义部门", value: 2 },
{ label: "本部门及以下部门", value: 3 }, { label: "本部门及以下部门", value: 3 },
{ label: "本部门", value: 4 }, { label: "本部门", value: 4 },
{ label: "自己", value: 5 }, { label: "自己", value: 5 },
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-s-promotion" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
......
<template> <template>
<el-dialog <el-dialog
:visible="dialogVisible" :visible="dialogVisible"
width="40%" width="30%"
style="height: 98%" style="height: 98%"
:before-close="handleClose" :before-close="handleClose"
top="5vh" top="5vh"
...@@ -12,26 +12,35 @@ ...@@ -12,26 +12,35 @@
<div class="label">赋予角色</div> <div class="label">赋予角色</div>
</div> </div>
<div class="dialog-content"> <div class="dialog-content">
<el-transfer <el-tree
v-model="own" :data="allRole"
:data="roles" show-checkbox
:titles="['赋予角色', '拥有角色']" default-expand-all
></el-transfer> node-key="id"
ref="myTree"
highlight-current
:props="{ label: 'name' }"
:default-checked-keys="ownRoles"
>
</el-tree>
</div> </div>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import treeTransfer from "el-tree-transfer";
import { updateUserOwnRoles } from "@/api/user"; import { updateUserOwnRoles } from "@/api/user";
export default { export default {
name: "EditRole", name: "EditRole",
components: {}, components: {
treeTransfer,
},
props: { props: {
visible: { visible: {
type: Boolean, type: Boolean,
...@@ -57,14 +66,34 @@ export default { ...@@ -57,14 +66,34 @@ export default {
}, },
roleData(value) { roleData(value) {
if (Object.keys(value).length > 0) { if (Object.keys(value).length > 0) {
let that = this;
const { allRole, ownRoles } = value; const { allRole, ownRoles } = value;
this.roles = allRole.map((item) => { this.allRole = allRole;
return { this.ownRoles = ownRoles;
key: item.id, // if (ownRoles.length > 0) {
label: item.name, // ownRoles.map((id) => {
}; // findObj(allRole, id);
}); // });
this.own = ownRoles; // function findObj(arr, id) {
// if (arr.length > 0) {
// arr.map((v) => {
// if (v.id == id) {
// that.toData.push(v);
// }
// if (v.children) {
// findObj(v.children, id);
// }
// });
// }
// }
// }
// this.allRolesData = JSON.parse(JSON.stringify(allRole));
// let fromData = JSON.parse(JSON.stringify(allRole));
// this.fromData = fromData.map((item) => {
// item.pid = 0;
// return item;
// });
} }
}, },
id(value) { id(value) {
...@@ -78,10 +107,12 @@ export default { ...@@ -78,10 +107,12 @@ export default {
dialogForm: {}, dialogForm: {},
formLabelWidth: "100px", formLabelWidth: "100px",
dialogVisible: false, dialogVisible: false,
data: [],
roles: [],
own: [],
userId: null, userId: null,
allRole: [],
ownRoles: [],
// fromData: [],
// toData: [],
// allRolesData: [], //留存数据,因为el-tree-transfer 左边数据需要pid为0 ,后期提交时根据该数据重新构造
}; };
}, },
methods: { methods: {
...@@ -91,14 +122,10 @@ export default { ...@@ -91,14 +122,10 @@ export default {
}, },
async handleSubmit() { async handleSubmit() {
console.log("this.own", this.own); let ids = this.$refs.myTree.getCheckedKeys(true);
console.log("this.roles", this.roles); let params = ids;
let params = this.own;
// console.log(params);
// console.log(this.userId);
let res = await updateUserOwnRoles(this.userId, params); let res = await updateUserOwnRoles(this.userId, params);
console.log("res", res);
if (res.code == 0) { if (res.code == 0) {
this.$message.success("修改成功!"); this.$message.success("修改成功!");
this.roles = []; this.roles = [];
...@@ -107,6 +134,7 @@ export default { ...@@ -107,6 +134,7 @@ export default {
this.$emit("handleClose"); this.$emit("handleClose");
} }
}, },
reload() { reload() {
this.$emit("refresh"); this.$emit("refresh");
this.$emit("handleClose"); this.$emit("handleClose");
...@@ -116,7 +144,8 @@ export default { ...@@ -116,7 +144,8 @@ export default {
.then((_) => { .then((_) => {
done(); done();
this.$emit("handleClose"); this.$emit("handleClose");
this.files = []; this.allRole = [];
this.ownRoles = [];
}) })
.catch((_) => {}); .catch((_) => {});
}, },
......
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<el-button <el-button
type="primary" type="primary"
@click.native="handleOperation({ type: 'add' })" @click.native="handleOperation({ type: 'add' })"
icon="el-icon-s-promotion" icon="el-icon-plus"
> >
新增</el-button 新增</el-button
> >
...@@ -86,6 +86,7 @@ import { ...@@ -86,6 +86,7 @@ import {
getUserList, getUserList,
deleteUser, deleteUser,
getUserOwnRoles, getUserOwnRoles,
getUserOwnRolesV1
} from "@/api/user"; } from "@/api/user";
import InfoEditDialog from "./components/InfoEditDialog.vue"; import InfoEditDialog from "./components/InfoEditDialog.vue";
import EditRole from "./components/EditRole.vue"; import EditRole from "./components/EditRole.vue";
...@@ -239,7 +240,7 @@ export default { ...@@ -239,7 +240,7 @@ export default {
break; break;
case "editRole": case "editRole":
this.editRoleVisible = true; this.editRoleVisible = true;
let roleRes = await getUserOwnRoles(row.id); let roleRes = await getUserOwnRolesV1(row.id);
this.currentRoleData = roleRes.data; this.currentRoleData = roleRes.data;
this.currentId = row.id; this.currentId = row.id;
break; break;
......
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button> <el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit" <el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i >确定<i class="el-icon-circle-check" style="margin-left: 5px"></i
></el-button> ></el-button>
</div> </div>
</el-dialog> </el-dialog>
......
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
<el-button <el-button
type="primary" type="primary"
@click.native="handleOperation({ type: 'add' })" @click.native="handleOperation({ type: 'add' })"
icon="el-icon-s-promotion" icon="el-icon-plus"
> >
发布</el-button 添加</el-button
> >
</div> </div>
<TablePage <TablePage
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论