ZhangBin
/
datang-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

角色管理功能完善

master
aBin 4 years ago
parent
ff4181a209
commit
b9fe3c11c0
3 changed files with 205 additions and 283 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      src/api/jurisdiction.js
  2. 10
      src/views/privilegeManagement/role/index.vue
  3. 432
      src/views/privilegeManagement/role/permissions.vue

34
src/api/jurisdiction.js
View File

@ -1,6 +1,7 @@
import request from '@/utils/request'
const admin = '/back/admin'
const role = '/back/role'
const permission = '/back/permission'
/**
@ -101,3 +102,36 @@ export function DELETE_ROLE(params) {
data: params
}).then(res => res.data)
}
/**
* 获取全部权限及选中的账户拥有的权限
*/
export function GET_PERMISSION_ALL(params) {
return request({
url: `${permission}/all`,
method: 'post',
data: params
}).then(res => res.data)
}
/**
* 修改角色权限信息
*/
export function UPDATE_ROLE(params) {
return request({
url: `${role}/update`,
method: 'post',
data: params
}).then(res => res.data)
}
/**
* 添加角色
*/
export function ROLE_ADD(params) {
return request({
url: `${role}/add`,
method: 'post',
data: params
}).then(res => res.data)
}

10
src/views/privilegeManagement/role/index.vue
View File

@ -42,7 +42,7 @@
</div>
</el-col>
<el-col :span="20" :xs="18" :md="19" style="border-left: 1px solid #d9d9d9">
<Permissions :roleId="roleId" :roleName="roleName" :permissionIds="permissionIds" @success="success"></Permissions>
<Permissions :roleId="roleId" :roleName="roleName" @success="success" @getList="getList"></Permissions>
</el-col>
</el-row>
</div>
@ -54,7 +54,6 @@
const Permissions = () => import('./permissions.vue');
import { GET_ROLE_LIST, DELETE_ROLE } from '@/api/jurisdiction'
import Alert from "@/utils/alert";
import {pageSize} from '../../../config';
export default {
name: "index",
@ -66,7 +65,6 @@
return {
roleId: '',
roleName: '',
permissionIds: [],
index: 0,
params: {
roleName: '',
@ -85,11 +83,14 @@
/**
* 获取列表数据
*/
getList() {
getList(showData) {
GET_ROLE_LIST(this.params).then(res => {
if(res.code === 200) {
this.lists = res.data.list;
this.count = res.data.total - 0;
if(showData && showData.roleId) {
this.openDetails(showData)
}
} else {
Alert.fail('查询角色列表失败,请重试')
}
@ -123,7 +124,6 @@
});
this.roleId = row.roleId;
this.roleName = row.roleName;
this.permissionIds = row.permissionIds;
this.lists = lists;
},

432
src/views/privilegeManagement/role/permissions.vue
View File

@ -15,167 +15,62 @@
<el-button v-show="!add" @click="editPermission">编辑</el-button>
</div>
</div>
<div v-if="!add">
<!-- <el-row class="rowBg" v-for="(items,index) in permissionsList">
<el-col :span="24">
<div class="grid-content bg-purple-dark">
<el-checkbox
@change="handleCheckedChange(index,items.permission.checked)"
v-model="items.permission.checked"
:disabled="!isEdit"
:active-text="items.permission.name"
>
{{items.permission.name}}
</el-checkbox>
<div v-for="(item,idx) in items.subpermissions" class="child-item">
<el-checkbox
@change="handleCheckedChangeChild(index,idx,item.checked)"
v-model="item.checked"
:disabled="!isEdit || !items.permission.checked"
:active-text="item.name"
>
{{item.name}}
</el-checkbox>
<div v-if="!add" style="position: relative;">
<div class="mask" @click="showTips" v-if="!isEdit">
查看状态,无法编辑
</div>
</div>
</el-col>
</el-row> -->
<el-tree
:props="props"
:data="permissionsList"
show-checkbox
:default-checked-keys="checkedKey"
default-expand-all
ref="tree"
node-key="permissionId"
/>
</div>
<div v-else>
<!-- <el-row class="rowBg" v-for="(items,index) in permissionsList">
<el-col :span="24">
<div class="grid-content bg-purple-dark">
<el-checkbox @change="handleCheckedChange(index,items.permission.checked)"
v-model="items.permission.checked"
:disabled="isEdit"
:active-text="items.permission.name">{{items.permission.name}}
</el-checkbox>
<div v-for="(item,idx) in items.subpermissions" class="child-item">
<el-checkbox @change="handleCheckedChangeChild(index,idx,item.checked)"
v-model="item.checked"
:disabled="isEdit || !items.permission.checked"
:active-text="item.name">{{item.name}}
</el-checkbox>
</div>
</div>
</el-col>
</el-row> -->
<el-tree
:props="props"
:data="permissionsList"
show-checkbox
:default-checked-keys="checkedKey"
default-expand-all
ref="treeAdd"
node-key="permissionId"
/>
</div>
<!-- <div v-show="isEdit || add" class="detail" style="border-top: 1px solid #d9d9d9">
<div v-show="isEdit || add" class="detail" style="border-top: 1px solid #d9d9d9">
<el-checkbox v-model="checkedAll" @change="handleCheckAllChange">选择全部</el-checkbox>
<div style="text-align: right;display: inline-block;top: 7px;">
<el-button v-show="!add" @click="cancelEdit">取消</el-button>
<el-button type="primary" @click="confirmEdit">确认</el-button>
</div>
</div> -->
</div>
</div>
</template>
<script>
import Alert from "@/utils/alert";
// import {ROLES_POST, ROLES_PUT} from '@/api/privilegeManagement'
import {mapActions} from 'vuex'
import { GET_PERMISSION_ALL,UPDATE_ROLE,ROLE_ADD } from '@/api/jurisdiction'
export default {
name: "permissions",
props: ['roleId', 'roleName', 'permissionIds'],
props: ['roleId', 'roleName'],
data() {
return {
ruleName: '',
title: '权限详情',
add: false,
isEdit: false,
permissionsList: [
{
permission: {name: '设备管理', value: '7'},
subpermissions: [
{name: '设备列表', value: '8'},
{name: '设备授权', value: '9'},
{name: '设备编辑', value: '10'}
]
},
{
permission: {name: '场地管理', value: '15'},
subpermissions: [
{name: '场地列表', value: '16'},
{name: '新增场地', value: '17'},
{name: '场地编辑', value: '18'}
]
},
{
permission: {name: '商品资料管理', value: '23'},
subpermissions: [
{name: '商品列表', value: '24'},
{name: "商品分类管理", value: '91'},
{name: '新建商品', value: '25'},
{name: '编辑商品', value: '26'}
]
},
{
permission: {name: '货道管理', value: '27'},
subpermissions: [
{name: "货道配货", value: '28'},
{name: '新建货道方案', value: '29'},
{name: '编辑货道方案', value: '30'},
{name: '货道状态', value: '54'}
]
},
{
permission: {name: '库存管理', value: '31'},
subpermissions: [
{name: '库存列表', value: '32'},
{name: '入库', value: '33'},
{name: '退货', value: '34'},
{name: '发货', value: '35'},
{name: '库存记录', value: '36'}
]
},
{
permission: {name: '分润管理', value: '37'},
subpermissions: [
{name: '设备分润', value: '38'},
{name: '场地分润', value: '38'},
{name: '新建分润方案', value: '39'},
{name: '编辑分润方案', value: '40'}
]
},
{
permission: {name: '补货管理', value: '41'},
subpermissions: [
{name: '补货记录', value: '42'},
{name: '补货', value: '43'}
]
},
{
permission: {name: '广告管理', value: '55'},
subpermissions: [
{name: '素材管理', value: '56'},
{name: '广告投放', value: '57'}
]
},
{
permission: {name: '子账号管理', value: '44'},
subpermissions: [
{name: '角色列表', value: '45'},
{name: '新建角色', value: '46'},
{name: '编辑角色', value: '47'},
{name: '子账号列表', value: '48'},
{name: '新建子账号', value: '49'},
{name: '编辑子账号', value: '50'}
]
},
{
permission: {name: '财务模块', value: ''},
subpermissions: [
{name: '钱包', value: '51'},
{name: '提现', value: '52'}
]
}
],
permissionsList: [],
checkedAll: false,
isIndeterminate: true,
//permission: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52]
// permission: []
checkedKey: [],
props: {
label: 'permissionName',
value: 'permissionId',
children: 'children',
}
}
},
beforeMount() {
@ -187,8 +82,7 @@
}
},
mounted() {
// this.getPermissions();
this.getPermissions();
},
watch: {
roleId() {
@ -201,41 +95,51 @@
}
},
methods: {
showTips() {
Alert.fail('点击编辑按钮即可开始编辑')
},
...mapActions(["delVisitedView"]),
/**
* 权限
* 获取当前所有权限以及设置账户所拥有的权限
*/
getPermissions() {
this.ruleName = this.name;
this.ruleName = this.roleName;
this.isEdit = false;
let permissionsList = this.permissionsList;
let permissions = this.permissions;
if (permissions == undefined) {
return false;
}
let newpermissionsList = permissionsList.map(item => {
item.permission.checked = false;
let permission = {
name: item.permission.name,
value: item.permission.value,
checked: permissions.includes(Number(item.permission.value))
};
let subpermissions = item.subpermissions.map(subpermission => {
subpermission.checked = false;
if (permissions.includes(Number(subpermission.value))) {
subpermission.checked = true;
const params = { roleId:this.roleId }
GET_PERMISSION_ALL(params).then(res => {
if(res.code === 200) {
this.permissionsList = res.data
this.getDefault()
}
return subpermission;
});
})
},
return {
permission: permission,
subpermissions: subpermissions
/**
* 设置默认选中的节点
*/
getDefault() {
let defaultList = this.getDefaultKeys(this.permissionsList)
this.checkedKey = defaultList
},
/**
* 递归
* 设置全部选中
*/
getDefaultKeys(list) {
let keyList = []
if(list && list.length) {
for(let i = 0; i < list.length; i++) {
if(list[i].own === 1) {
keyList.push(list[i].permissionId)
}
if(list[i].children && list[i].children.length) {
const itemList = this.getKeys(list[i].children)
keyList.push([...itemList])
}
}
});
this.permissionsList = newpermissionsList
}
return keyList
},
/**
@ -257,143 +161,127 @@
* 确定编辑
*/
confirmEdit() {
let permissions = [];
this.permissionsList.map((items) => {
if (items.permission.checked) {
permissions.push(items.permission.value)
if(this.add) {
this.establish();
return
}
items.subpermissions.map((item) => {
if (item.checked) {
permissions.push(item.value)
let permissionIds = [];
let list = this.$refs.tree.getCheckedNodes();
if(list.length) {
for(let i=0;i< list.length;i++) {
permissionIds.push(list[i].permissionId)
}
return item;
});
return items;
});
let ruleName = this.ruleName;
if (this.add) {
if (!ruleName) {
Alert.fail('角色名称不能为空');
return false;
}
if(!this.ruleName) {
Alert.fail('角色名称不能为空!')
return
}
let params = {
id: this.currId,
name: ruleName,
permissions
};
if (!this.currId) {
ROLES_POST(params).then(res => {
Alert.success('新增成功');
this.isEdit = false;
this.$emit('success');
setTimeout(() => {
this.delVisitedView(this.$route).then(res => {
this.$router.go(-1);
});
}, 1000)
})
if(!permissionIds.length) {
Alert.fail('权限不能为空!')
return
}
const params = {
roleId: this.roleId,
roleName: this.ruleName,
permissionIds,
}
UPDATE_ROLE(params).then(res => {
if(res.code === 200) {
Alert.success('编辑成功')
this.cancelEdit()
const showData = {
roleId: this.roleId,
roleName: this.ruleName,
}
this.$emit('getList',showData)
} else {
ROLES_PUT(params).then(res => {
Alert.success('更新成功');
this.isEdit = false;
this.$emit('success');
})
Alert.fail('编辑失败,请重试')
}
})
},
/**
* 全选
* 创建新角色
*/
handleCheckAllChange(val) {
if (val) {
let permissionsList = this.permissionsList.map((items, index) => {
items.permission.checked = true;
items.subpermissions.map((item) => {
item.checked = true;
return item;
});
return items;
});
this.permissionsList = permissionsList;
} else {
let permissionsList = this.permissionsList.map((items, index) => {
items.permission.checked = false;
items.subpermissions.map((item) => {
item.checked = false;
return item;
});
return items;
});
this.permissionsList = permissionsList;
establish() {
let permissionIds = [];
let list = this.$refs.treeAdd.getCheckedNodes();
if(list.length) {
for(let i=0;i< list.length;i++) {
permissionIds.push(list[i].permissionId)
}
}
if(!this.ruleName) {
Alert.fail('角色名称不能为空!')
return
}
if(!permissionIds.length) {
Alert.fail('权限不能为空!')
return
}
const params = {
roleName: this.ruleName,
permissionIds
}
ROLE_ADD(params).then(res => {
if(res.code === 200) {
Alert.success('添加角色成功')
}
})
},
/**
* 主permission 的选中
* @param idx
* @param checked
* 全选
*/
handleCheckedChange(idx, checked) {
let permissionsList = this.permissionsList.map((items, index) => {
if (idx == index) {
if (!checked) {
items.permission.checked = false;
items.subpermissions.map((item) => {
item.checked = false;
return item;
});
} else {
items.permission.checked = true;
handleCheckAllChange() {
let checkedKey = []
if(this.checkedAll) {
checkedKey = this.getKeys(this.permissionsList)
}
if(!this.add) {
this.$refs.tree.setCheckedKeys(checkedKey)
} else {
this.$refs.treeAdd.setCheckedKeys(checkedKey)
}
return items;
});
this.permissionsList = permissionsList;
},
/**
* 子 subpermissions 的选中
* @param index
* @param idxChild
* @param checked
* 递归
* 设置全部选中
*/
handleCheckedChangeChild(index, idxChild, checked) {
let permissionsList = this.permissionsList.map((items, indexs) => {
if (index == indexs) {
items.subpermissions.map((item, idx) => {
if (idxChild == idx) {
if (!checked) {
item.checked = false;
return item;
} else {
item.checked = true;
return item;
getKeys(list) {
let keyList = []
if(list && list.length) {
for(let i = 0; i < list.length; i++) {
keyList.push(list[i].permissionId)
if(list[i].children && list[i].children.length) {
const itemList = this.getKeys(list[i].children)
keyList.push([...itemList])
}
}
});
}
return items;
});
this.permissionsList = permissionsList;
return keyList
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.mask {
text-align: center;
padding-top: 100px;
color: #666;
font-size: 24px;
font-weight: bold;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(166,166,166,0.2);
z-index: 100;
}
.grid-content {
background: #fff;
padding: 20px;

Write Preview
Loading…
Cancel
Save