longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改角色管理

Browse Source
This commit is contained in:
龙运模 2024-07-16 18:34:49 +08:00
parent 6dd9d35ce3
commit 196d8cbb91
14 changed files with 495 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/model/system.js
View File

@ -223,9 +223,9 @@ export default {
template:{ template:{
url: `${config.API_URL}/company.import.template`, url: `${config.API_URL}/company.import.template`,
name: "公司资料导入模版", name: "公司资料导入模版",
responseType: 'arraybuffer', // responseType: 'arraybuffer',
get: async function (params) { post: async function (params) {
return await http.get(this.url,params); return await http.get(this.url,params,{responseType: 'arraybuffer'});
} }
}, },
import:{ import:{

2
src/components/scExport/index.vue
View File

@ -9,7 +9,7 @@
:visible="show" :visible="show"
> >
<template #reference> <template #reference>
<el-button :size="size" icon="sc-icon-Download" @click="exportClick">下载 {{show}}</el-button> <el-button :size="size" icon="sc-icon-Download" @click="exportClick">下载</el-button>
</template> </template>
<template #default> <template #default>
<div v-for="item in list" :key="item"> <div v-for="item in list" :key="item">

21
src/style/fix.scss
View File

@ -52,6 +52,26 @@
--el-pagination-button-width-small:28px; --el-pagination-button-width-small:28px;
--el-pagination-button-height-small:28px; --el-pagination-button-height-small:28px;
} }
.el-tabs.role_tabs{
--el-tabs-header-height:60px;
height: 100%;
display: flex;
flex-direction: column;
.el-tabs__header{
.el-tabs__nav{
padding: 0 20px;
}
}
.el-tabs__content{
flex: 1;
overflow: hidden;
padding-left: 10px;
padding-bottom: 10px;
.el-tab-pane{
height: 100%;
}
}
}
.el-menu {border: none!important;} .el-menu {border: none!important;}
.el-menu .el-menu-item.is-active{background: var(--el-menu-hover-bg-color);position: relative;} .el-menu .el-menu-item.is-active{background: var(--el-menu-hover-bg-color);position: relative;}
@ -70,6 +90,7 @@
.el-header .right-panel > * + * {margin-left:10px;} .el-header .right-panel > * + * {margin-left:10px;}
.el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;} .el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;}
.el-main {padding:10px;width: 100%;height: 100%;box-sizing: border-box;background: var(--el-color-white);border-radius: 4px;} .el-main {padding:10px;width: 100%;height: 100%;box-sizing: border-box;background: var(--el-color-white);border-radius: 4px;}
.el-main.treeMain{border-radius: 0;}
.el-main.nopadding {padding:0;background: #fff;display: flex;flex-direction: column;} .el-main.nopadding {padding:0;background: #fff;display: flex;flex-direction: column;}
.el-main.nopadding .scTable{flex: 1;overflow: hidden;} .el-main.nopadding .scTable{flex: 1;overflow: hidden;}

80
src/style/user.scss
View File

@ -107,3 +107,83 @@
} }
} }
} }
/** 角色设置 */
.bodyView{
display: flex;
font-size: 12px;
.viewLeft{
flex: 1;
display: flex;
flex-direction: column;
.treeUser{
padding: 10px 15px 10px 0;
}
}
.iconRight{
flex-basis: 30px;
display: flex;
align-items: center;
justify-content: center;
.icon{
width: 14px;
}
}
.viewRight{
flex: 1;
display: flex;
flex-direction: column;
.checkList{
display: flex;
justify-content: space-between;
margin:8px 15px 8px 15px;
.leftTitle{
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
color: var(--el-color-primary);
.avatar{
background: var(--el-color-primary);
color: var(--el-color-white);
border-radius: 50%;
display: inline-block;
height: 21px;
width: 21px;
text-align: center;
line-height: 21px;
}
.name{
margin-left: 10px;
}
}
.userBtn{
flex-basis: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.userBtn:hover{
color: var(--el-color-primary);
}
}
.checkList:first-child{
margin-top: 10px;
}
.checkList:last-child{
margin-bottom: 10px;
}
}
.viewTitle{
flex-basis: 35px;
}
.viewCom{
flex: 1;
border: 1px solid var(--el-border-color-light);
min-height: 200px;
max-height: 400px;
border-radius: 8px;
}
}

7
src/utils/request.js
View File

@ -33,6 +33,8 @@ let MessageBox_401_show = false
// HTTP response 拦截器 // HTTP response 拦截器
axios.interceptors.response.use( axios.interceptors.response.use(
(response) => { (response) => {
// const contentDisposition = response.headers['Content-Disposition'];
// console.log(response,677)
const token = response.headers.authorization; const token = response.headers.authorization;
if (token) { if (token) {
let reToken = token.replace(/Bearer /g, ""); let reToken = token.replace(/Bearer /g, "");
@ -69,7 +71,10 @@ axios.interceptors.response.use(
message: response.data.msg || "Status:500，服务器发生错误！", message: response.data.msg || "Status:500，服务器发生错误！",
}); });
} else if (api_code === 0 || api_code !== 200) { } else if (api_code === 0 || api_code !== 200) {
ElMessage.warning(response.data.message); const contentType = response.headers.get('Content-Type');
if(contentType.includes('application/json')){
ElMessage.warning(response.data.message);
}
} }
return response; return response;

15
src/utils/tool.js
View File

@ -306,4 +306,19 @@ tool.getParameterByName = function(name, url) {
return decodedValue; return decodedValue;
} }
tool.isBinaryString = function (str){
return /[^\t\n\r\x20-\x7E]/.test(str);
}
tool.isBinaryFile = function (file) {
const reader = new FileReader();
return new Promise((resolve) => {
reader.onloadend = () => {
const binaryString = reader.result;
resolve(tool.isBinaryString(binaryString));
};
reader.readAsBinaryString(file.slice(0, 1024));
});
}
export default tool export default tool

2
src/views/login/index.vue
View File

@ -156,7 +156,7 @@
.login_adv__mask { .login_adv__mask {
background-size: cover; background-size: cover;
background-position: 0; background-position: 20%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_back.png); background-image: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_back.png);
width: calc(100% - 460px); width: calc(100% - 460px);

14
src/views/setting/company/index.vue
View File

@ -154,10 +154,16 @@ export default {
}) })
}, },
async importTemplate() { async importTemplate() {
const res = await this.$API.system.company.template.get(); const res = await this.$API.system.company.template.post();
if(res.code == 200){ const blob = new Blob([res.data]);
console.log(res.data) const eLink = document.createElement('a');
} eLink.download = "company_import_template_20240716093538_6695ce6a3ca1f.xlsx";
eLink.style.display = 'none';
eLink.href = URL.createObjectURL(blob);
document.body.appendChild(eLink);
eLink.click();
URL.revokeObjectURL(eLink.href); // 释放URL 对象
document.body.removeChild(eLink);
}, },
//编辑 //编辑

2
src/views/setting/company/save.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="1200" destroy-on-close draggable @closed="$emit('closed')"> <el-dialog :title="titleMap[mode]" v-model="visible" :width="1200" destroy-on-close draggable @closed="$emit('closed')">
<el-scrollbar height="480px" style="padding: 0 20px;"> <el-scrollbar height="500px" style="padding: 0 20px;">
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="140px"> <el-form :model="form" :rules="rules" ref="dialogForm" label-width="140px">
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="11"> <el-col :span="11">

2
src/views/setting/role/dataTree.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- 自定义表格 --> <!-- 自定义表格 -->
<el-scrollbar max-height="400px"> <el-scrollbar height="100%">
<div class="customTable"> <div class="customTable">
<div class="tableBody" v-if="list.length>0"> <div class="tableBody" v-if="list.length>0">
<template v-for="(item,inde) in list" :key="inde"> <template v-for="(item,inde) in list" :key="inde">

381
src/views/setting/role/index.vue
View File

@ -1,60 +1,116 @@
<template> <template>
<el-container class="mainBox mainBoxHeaderNoBorder"> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新建</el-button> <el-button type="primary" :size="size" icon="el-icon-plus" @click="add">新增角色</el-button>
<el-button type="danger" :size="size" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button> <el-button type="danger" :size="size" plain icon="el-icon-delete" :disabled="roleCheckList.length==0" @click="batch_del"></el-button>
<el-button type="primary" :size="size" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button> <!-- <el-button type="primary" :size="size" plain :disabled="roleCheckList.length!=1" @click="permission">权限设置</el-button>-->
</div> </div>
<div class="right-panel"> <div class="right-panel">
</div> </div>
</el-header> </el-header>
<el-main class="nopadding"> <el-container class="mainBox" style="border-radius: 0;">
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" stripe :size="size"> <el-aside width="200px" v-loading="showGroupLoading">
<el-table-column type="selection" align="center" width="50"></el-table-column> <el-container>
<sc-table-column label="序号" align="center" type="index"></sc-table-column> <el-header>
<el-table-column label="角色名称" prop="label" width="150"></el-table-column> <el-input placeholder="输入关键字进行过滤" :size="size" v-model="groupFilterText" clearable></el-input>
<el-table-column label="创建时间" prop="date" width="180"></el-table-column> </el-header>
<el-table-column label="备注" prop="remark" min-width="150"></el-table-column> <el-main class="treeMain nopadding">
<el-table-column label="状态" prop="status" align="center" width="100"> <el-tree ref="group" class="menu" node-key="id" show-checkbox :data="group" :default-checked-keys="roleCheckList" :current-node-key="role_id" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @check-change="groupChange" @node-click="groupClick"></el-tree>
<template #default="scope"> </el-main>
<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch> </el-container>
</template> </el-aside>
</el-table-column> <el-container>
<el-table-column label="操作" fixed="right" align="center" width="170"> <el-main class="nopadding">
<template #default="scope"> <div class="btnPot" v-if="activeNum==0">
<el-dropdown> <el-button type="primary" plain :size="size" :loading="isSave" @click="submit">保存权限</el-button>
<el-button class="noBorderBtn" icon="el-icon-more" :size="size"></el-button> </div>
<template #dropdown> <div class="btnPot" v-if="activeNum==2">
<el-dropdown-menu> <el-button type="danger" plain :size="size" @click="deleteMember">移除成员</el-button>
<el-dropdown-item @click="table_edit(scope.row, 'edit')" icon="sc-icon-Edit">修改</el-dropdown-item> <el-button type="primary" plain :size="size" @click="getDeptTree">添加成员</el-button>
<el-dropdown-item @click="table_del(scope.row, 'delete')" icon="sc-icon-Delete" divided>删除</el-dropdown-item> </div>
</el-dropdown-menu> <el-tabs class="role_tabs" tab-position="top" @tab-change="activeClick">
</template> <el-tab-pane label="功能权限">
</el-dropdown> <dataTree ref="dataTree" :data="menu.list"/>
</template> </el-tab-pane>
</el-table-column> <el-tab-pane label="数据权限">
</scTable> </el-tab-pane>
</el-main> <el-tab-pane label="角色成员">
<members ref="members" :data="roleUser.list" />
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</el-container> </el-container>
<el-dialog
title="选择成员"
v-model="memberShow"
:width="720"
destroy-on-close
@closed="closedClose"
>
<div class="bodyView">
<div class="viewLeft">
<div class="viewTitle">部门</div>
<div class="viewCom">
<el-scrollbar>
<treeUser class="treeUser" ref="treeList" :data="deptTree" :userIds="userIds" @roleChecked="roleChecked" />
</el-scrollbar>
</div>
</div>
<div class="iconRight">
<div class="icon">
<el-icon-ArrowRight></el-icon-ArrowRight>
</div>
</div>
<div class="viewRight">
<div class="viewTitle">已选成员 ({{userCheckList.length}})</div>
<div class="viewCom">
<el-scrollbar>
<div class="checkList" v-for="(item,index) in userCheckList" :key="index" @click="deleteUser(item)">
<div class="leftTitle">
<div class="avatar">{{ userAvatar(item) }}</div>
<div class="name">{{item.name}}</div>
</div>
<div class="userBtn"><el-icon-Close></el-icon-Close></div>
</div>
</el-scrollbar>
</div>
</div>
</div>
<template #footer>
<el-button @click="memberShow = false">取 消</el-button>
<el-button type="primary" :loading="isMember" @click="userSubmit">保 存</el-button>
</template>
</el-dialog>
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog> <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
<permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog> <permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>
</template> </template>
<script> <script>
import saveDialog from './save' import saveDialog from './save';
import permissionDialog from './permission' import permissionDialog from './permission';
import dataTree from "./dataTree";
import members from "./members";
import treeUser from "./tree"
export default { export default {
name: 'role', name: 'role',
components: { components: {
saveDialog, saveDialog,
permissionDialog permissionDialog,
dataTree,
members,
treeUser
},
watch:{
groupFilterText(val) {
this.$refs.group.filter(val);
}
}, },
data() { data() {
return { return {
@ -64,14 +120,50 @@
save: false, save: false,
permission: false permission: false
}, },
showGroupLoading:false,
groupFilterText:"",
group:[],
list:{ list:{
apiObj: this.$API.system.role.list, apiObj: this.$API.system.role.list,
column:[] column:[]
}, },
selection: [],
isSave:false,
activeNum:0,
roleCheckList:[],
role_id:"",
menu: {
list: [],
},
roleUser:{
list:[]
},
memberShow:false,
deptTree:[],
isMember:false,
userCheckList:[],
userIds:[],
} }
}, },
mounted() {
this.getGroup(true);
},
methods: { methods: {
async getGroup(flag = false){
this.showGroupLoading = true;
const res = await this.$API.system.role.list.get();
if(res.code == 200){
this.group = res.data.rows;
this.role_id = res.data.rows && res.data.rows.length>0?res.data.rows[0].id:"";
if(flag){
await this.getMenu();
await this.getRoleList();
}
}
this.showGroupLoading = false;
},
//添加 //添加
add(){ add(){
this.dialog.save = true this.dialog.save = true
@ -90,8 +182,7 @@
permission(){ permission(){
this.dialog.permission = true; this.dialog.permission = true;
this.$nextTick(() => { this.$nextTick(() => {
const role_id = this.selection[0]["id"]; this.$refs.permissionDialog.open(this.role_id)
this.$refs.permissionDialog.open(role_id)
}) })
}, },
//删除 //删除
@ -102,32 +193,28 @@
const params = {ids: [row.id]}; const params = {ids: [row.id]};
const res = await this.$API.system.role.delete.post(params); const res = await this.$API.system.role.delete.post(params);
if(res.code == 200){ if(res.code == 200){
this.$refs.table.refresh() await this.getGroup(true);
this.$message.success("删除成功") this.$message.success("删除成功")
} }
}).catch(()=>{}) }).catch(()=>{})
}, },
//批量删除 //批量删除
async batch_del(){ async batch_del(){
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', { this.$confirm(`确定删除选中的 ${this.roleCheckList.length} 项吗？`, '提示', {
type: 'warning' type: 'warning'
}).then(async () => { }).then(async () => {
const loading = this.$loading(); const loading = this.$loading();
const params = {ids: this.selection.map(em=>em.id)}; const params = {ids: this.roleCheckList.map(em=>em)};
const res = await this.$API.system.role.delete.post(params); const res = await this.$API.system.role.delete.post(params);
if (res.code == 200) { if (res.code == 200) {
this.$refs.table.refresh() await this.getGroup(true);
this.$message.success("删除成功") this.$message.success("删除成功");
} }
loading.close(); loading.close();
}).catch(() => { }).catch(() => {
}) })
}, },
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//表格内开关 //表格内开关
changeSwitch(val, row){ changeSwitch(val, row){
row.$switch_status = true; row.$switch_status = true;
@ -161,16 +248,200 @@
return target return target
}, },
//本地更新数据 //本地更新数据
handleSaveSuccess(data, mode){ handleSaveSuccess(){
if(mode=='add'){ this.getGroup(true);
this.$refs.table.refresh() },
}else if(mode=='edit'){
this.$refs.table.refresh() //树过滤
groupFilterNode(value, data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//树选中事件
groupChange(data,isCheck){
let list = JSON.parse(JSON.stringify(this.roleCheckList));
if(isCheck){
this.roleCheckList.push(data.id);
}else{
this.roleCheckList = list.filter(em=>em != data.id);
} }
} },
//树点击事件
groupClick(data){
this.role_id = data.id;
this.getMenu();
this.getRoleList();
},
// 保存权限
submit() {
this.isSave = true;
const params = this.setList(this.$refs.dataTree.list);
setTimeout(async ()=>{
const res = await this.$API.system.role.roleAuth.post(params);
if(res.code === 200){
this.$message.success("授权成功");
await this.getMenu();
}
this.isSave = false;
})
},
setList(list){
let obj = {
role_id:this.role_id,
menu_permission:[],
data_permission:[]
}
list.forEach(item=>{
if(item.checked || item.isCheck){
obj.menu_permission.push(item.meta.code);
}
if(item.children){
item.children.forEach(em=>{
if(em.checked || em.isCheck){
obj.menu_permission.push(em.meta.code);
}
if(em.meta.data_permission){
let list = em.meta.data_permission.filter(e=>e.checked).map(u=>{
let obj = {
actions:u.actions,
title:u.title
}
return obj
});
if(list.length>0){
obj.data_permission.push({[em.meta.code]:list})
}
}
})
}
})
return obj
},
// 权限和角色成员
userAvatar(row) {
return row.name.substring(0, 1)
},
activeClick(e){
this.activeNum = e;
},
async getMenu() {
let params = {
role_id: this.role_id,
};
const res = await this.$API.system.role.roleMenu.post(params);
this.menu.list = res.data;
},
async getRoleList() {
let params = {
role_id: this.role_id,
};
const res = await this.$API.system.role.roleUser.post(params);
this.roleUser.list = res.data;
this.userCheckList = res.data;
this.userIds = res.data.map(item=>item.id);
},
async getDeptTree() {
this.memberShow = true;
const res = await this.$API.system.role.tree.post();
this.deptTree = this.treeShow(res.data);
},
// 数据增加收起
treeShow(list){
list.forEach(item=>{
item.isOpen = false;
if(item.children){
this.treeShow(item.children)
}
})
return list
},
roleChecked(em){
let arr = this.userIds;
if(arr.indexOf(em.id) ==-1){
this.userIds.push(em.id);
this.userCheckList.push(em);
return
}
this.userIds.forEach((item,index)=>{
if(item == em.id){
this.userIds.splice(index,1);
}
})
this.userCheckList.forEach((item,index)=>{
if(item.id == em.id){
this.userCheckList.splice(index,1);
}
})
},
deleteUser(em){
this.userIds.forEach((item,index)=>{
if(item == em.id){
this.userIds.splice(index,1);
}
})
this.userCheckList.forEach((item,index)=>{
if(item.id == em.id){
this.userCheckList.splice(index,1);
}
})
},
// 移除角色成员
deleteMember(){
this.$confirm(`确定删除选中成员吗？`, '提示', {
type: 'warning'
}).then(async () => {
let ids = [];
this.$refs.members.list.forEach(item=>{
if(item.checked){
ids.push(item.id);
}
})
setTimeout(async()=>{
let params = {
user_ids:ids,
role_id:this.role_id
}
const res = await this.$API.system.role.roleUserDel.post(params);
if(res.code == 200){
await this.getRoleList();
}
},100)
}).catch(()=>{})
},
// 关闭添加成员
closedClose(){
this.memberShow = false;
},
// 保存成员
async userSubmit() {
let params = {
role_ids: [this.role_id],
user_ids: this.userCheckList.map(em=>em.id)
};
this.isMember = true;
const res = await this.$API.system.role.roleUserAdd.post(params);
if(res.code == 200){
this.memberShow = false;
this.$message.success('保存成功');
this.isMember = false;
await this.getRoleList();
}
},
} }
} }
</script> </script>
<style> <style lang="scss" scoped>
.nopadding{
position: relative;
}
.btnPot{
position: absolute;
top: 16px;
right: 0;
z-index: 10;
}
</style> </style>

28
src/views/setting/role/members.vue
View File

@ -1,13 +1,14 @@
<template> <template>
<el-scrollbar max-height="400px"> <el-scrollbar class="scrollbar" height="100%">
<div class="customTable"> <div class="customTable">
<div :class="list.length===0?'thenTitle thenTitleBottom':'thenTitle'"> <div :class="list.length===0?'thenTitle thenTitleBottom':'thenTitle'">
<div class="tr"> <div class="tr">
<div class="th btnCheckout"><el-checkbox @change="allCheckChange" :indeterminate="isCheckFun" v-model="checkedFun" :size="size"></el-checkbox></div> <div class="th btnCheckout"><el-checkbox @change="allCheckChange" :indeterminate="isCheckFun" v-model="checkedFun" :size="size"></el-checkbox></div>
<div class="th seq">序号</div> <div class="th seq">序号</div>
<div class="th name">姓名</div> <div class="th name">姓名</div>
<div class="th department">部门</div>
<div class="th mobile">手机号</div> <div class="th mobile">手机号</div>
<div class="th email">邮箱</div>
<div class="th department">部门</div>
</div> </div>
</div> </div>
<div :class="list.length==0?'tableBody tableBodyNull':'tableBody'"> <div :class="list.length==0?'tableBody tableBodyNull':'tableBody'">
@ -16,8 +17,9 @@
<div class="td btnCheckout"><el-checkbox v-model="item.checked" :size="size"></el-checkbox></div> <div class="td btnCheckout"><el-checkbox v-model="item.checked" :size="size"></el-checkbox></div>
<div class="td seq">{{index+1}}</div> <div class="td seq">{{index+1}}</div>
<div class="td name">{{item.name}}</div> <div class="td name">{{item.name}}</div>
<div class="td department">{{item.department}}</div>
<div class="td mobile">{{item.mobile}}</div> <div class="td mobile">{{item.mobile}}</div>
<div class="td email">{{item.email}}</div>
<div class="td department">{{item.department}}</div>
</div> </div>
</template> </template>
<el-empty v-else :description="emptyText" :image-size="100"></el-empty> <el-empty v-else :description="emptyText" :image-size="100"></el-empty>
@ -83,6 +85,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scrollbar{
:deep(.el-scrollbar__view){
height: 100%;
}
}
.btnCheckout{ .btnCheckout{
flex-basis: 60px; flex-basis: 60px;
display: flex; display: flex;
@ -108,7 +115,13 @@ export default {
justify-content: center; justify-content: center;
} }
.mobile{ .mobile{
flex-basis: 150px; flex:1;
display: flex;
align-items: center;
justify-content: center;
}
.email{
flex:1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -116,6 +129,8 @@ export default {
.customTable{ .customTable{
border: 1px solid var(--el-border-color-light); border: 1px solid var(--el-border-color-light);
font-size: 12px; font-size: 12px;
display: flex;
flex-direction: column;
} }
.thenTitle .tr { .thenTitle .tr {
display: flex; display: flex;
@ -129,6 +144,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden;
} }
.th:first-child{ .th:first-child{
border-left: 0; border-left: 0;
@ -140,6 +156,9 @@ export default {
.tableBodyNull{ .tableBodyNull{
border-top:1px solid var(--el-border-color-light); border-top:1px solid var(--el-border-color-light);
} }
.tableBody{
flex: 1;
}
.tableBody .tr{ .tableBody .tr{
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@ -148,6 +167,7 @@ export default {
.td{ .td{
padding: 0 10px; padding: 0 10px;
border-left: 1px solid var(--el-border-color-light); border-left: 1px solid var(--el-border-color-light);
overflow: hidden;
.nextTd{ .nextTd{
display: flex; display: flex;
align-items: center; align-items: center;

82
src/views/setting/role/permission.vue
View File

@ -9,7 +9,7 @@
<div class="dialogBody"> <div class="dialogBody">
<div class="btnPot" v-if="activeNum==1"> <div class="btnPot" v-if="activeNum==1">
<el-button type="danger" plain :size="size" @click="deleteMember">移除成员</el-button> <el-button type="danger" plain :size="size" @click="deleteMember">移除成员</el-button>
<el-button type="primary" plain :size="size" @click="memberShow=true && this.getDeptTree()">添加成员</el-button> <el-button type="primary" plain :size="size" @click="getDeptTree">添加成员</el-button>
</div> </div>
<el-tabs tab-position="top" @tab-change="activeClick"> <el-tabs tab-position="top" @tab-change="activeClick">
<el-tab-pane label="角色权限"> <el-tab-pane label="角色权限">
@ -180,6 +180,7 @@ export default {
this.userIds = res.data.map(item=>item.id); this.userIds = res.data.map(item=>item.id);
}, },
async getDeptTree() { async getDeptTree() {
this.memberShow = true;
const res = await this.$API.system.role.tree.post(); const res = await this.$API.system.role.tree.post();
this.deptTree = this.treeShow(res.data); this.deptTree = this.treeShow(res.data);
}, },
@ -258,6 +259,7 @@ export default {
this.memberShow = false; this.memberShow = false;
this.$message.success('保存成功'); this.$message.success('保存成功');
this.isMember = false; this.isMember = false;
await this.getRoleList(); await this.getRoleList();
} }
}, },
@ -276,81 +278,5 @@ export default {
right: 0; right: 0;
z-index: 10; z-index: 10;
} }
.bodyView{
display: flex;
font-size: 12px;
.viewLeft{
flex: 1;
display: flex;
flex-direction: column;
.treeUser{
padding: 10px 15px 10px 0;
}
}
.iconRight{
flex-basis: 30px;
display: flex;
align-items: center;
justify-content: center;
.icon{
width: 14px;
}
}
.viewRight{
flex: 1;
display: flex;
flex-direction: column;
.checkList{
display: flex;
justify-content: space-between;
margin:8px 15px 8px 15px;
.leftTitle{
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
color: var(--el-color-primary);
.avatar{
background: var(--el-color-primary);
color: var(--el-color-white);
border-radius: 50%;
display: inline-block;
height: 21px;
width: 21px;
text-align: center;
line-height: 21px;
}
.name{
margin-left: 10px;
}
}
.userBtn{
flex-basis: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.userBtn:hover{
color: var(--el-color-primary);
}
}
.checkList:first-child{
margin-top: 10px;
}
.checkList:last-child{
margin-bottom: 10px;
}
}
.viewTitle{
flex-basis: 35px;
}
.viewCom{
flex: 1;
border: 1px solid var(--el-border-color-light);
min-height: 200px;
max-height: 400px;
border-radius: 8px;
}
}
</style> </style>

4
src/views/setting/user/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<el-container class="mainBox "> <el-container class="mainBox">
<el-aside width="200px" v-loading="showGroupLoading"> <el-aside width="200px" v-loading="showGroupLoading">
<el-container> <el-container>
<el-header> <el-header>
<el-input placeholder="输入关键字进行过滤" :size="size" v-model="groupFilterText" clearable></el-input> <el-input placeholder="输入关键字进行过滤" :size="size" v-model="groupFilterText" clearable></el-input>
</el-header> </el-header>
<el-main class="nopadding"> <el-main class="treeMain nopadding">
<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree> <el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
</el-main> </el-main>
</el-container> </el-container>