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
Unified 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. 444
      src/views/privilegeManagement/role/permissions.vue

34
src/api/jurisdiction.js
View File

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

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

@ -15,167 +15,62 @@
<el-button v-show="!add" @click="editPermission">编辑</el-button> <el-button v-show="!add" @click="editPermission">编辑</el-button>
</div> </div>
</div> </div>
<div v-if="!add"> <div v-if="!add" style="position: relative;">
<!-- <el-row class="rowBg" v-for="(items,index) in permissionsList"> <div class="mask" @click="showTips" v-if="!isEdit">
<el-col :span="24"> 查看状态,无法编辑
<div class="grid-content bg-purple-dark"> </div>
<el-checkbox <el-tree
@change="handleCheckedChange(index,items.permission.checked)" :props="props"
v-model="items.permission.checked" :data="permissionsList"
:disabled="!isEdit" show-checkbox
:active-text="items.permission.name" :default-checked-keys="checkedKey"
> default-expand-all
{{items.permission.name}} ref="tree"
</el-checkbox> node-key="permissionId"
<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> -->
</div> </div>
<div v-else> <div v-else>
<!-- <el-row class="rowBg" v-for="(items,index) in permissionsList"> <el-tree
<el-col :span="24"> :props="props"
<div class="grid-content bg-purple-dark"> :data="permissionsList"
<el-checkbox @change="handleCheckedChange(index,items.permission.checked)" show-checkbox
v-model="items.permission.checked" :default-checked-keys="checkedKey"
:disabled="isEdit" default-expand-all
:active-text="items.permission.name">{{items.permission.name}} ref="treeAdd"
</el-checkbox> node-key="permissionId"
<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> -->
</div> </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> <el-checkbox v-model="checkedAll" @change="handleCheckAllChange">选择全部</el-checkbox>
<div style="text-align: right;display: inline-block;top: 7px;"> <div style="text-align: right;display: inline-block;top: 7px;">
<el-button v-show="!add" @click="cancelEdit">取消</el-button> <el-button v-show="!add" @click="cancelEdit">取消</el-button>
<el-button type="primary" @click="confirmEdit">确认</el-button> <el-button type="primary" @click="confirmEdit">确认</el-button>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
<script> <script>
import Alert from "@/utils/alert"; import Alert from "@/utils/alert";
// import {ROLES_POST, ROLES_PUT} from '@/api/privilegeManagement' import { GET_PERMISSION_ALL,UPDATE_ROLE,ROLE_ADD } from '@/api/jurisdiction'
import {mapActions} from 'vuex'
export default { export default {
name: "permissions", name: "permissions",
props: ['roleId', 'roleName', 'permissionIds'], props: ['roleId', 'roleName'],
data() { data() {
return { return {
ruleName: '', ruleName: '',
title: '权限详情', title: '权限详情',
add: false, add: false,
isEdit: false, isEdit: false,
permissionsList: [ 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'}
]
}
],
checkedAll: false, checkedAll: false,
isIndeterminate: true, checkedKey: [],
//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] props: {
// permission: [] label: 'permissionName',
value: 'permissionId',
children: 'children',
}
} }
}, },
beforeMount() { beforeMount() {
@ -187,8 +82,7 @@
} }
}, },
mounted() { mounted() {
// this.getPermissions(); this.getPermissions();
}, },
watch: { watch: {
roleId() { roleId() {
@ -201,41 +95,51 @@
} }
}, },
methods: { methods: {
showTips() {
Alert.fail('点击编辑按钮即可开始编辑')
},
...mapActions(["delVisitedView"]),
/** /**
* 权限 * 获取当前所有权限以及设置账户所拥有的权限
*/ */
getPermissions() { getPermissions() {
this.ruleName = this.name; this.ruleName = this.roleName;
this.isEdit = false; this.isEdit = false;
let permissionsList = this.permissionsList; const params = { roleId:this.roleId }
let permissions = this.permissions; GET_PERMISSION_ALL(params).then(res => {
if (permissions == undefined) { if(res.code === 200) {
return false; this.permissionsList = res.data
} this.getDefault()
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; getDefault() {
} let defaultList = this.getDefaultKeys(this.permissionsList)
return subpermission; this.checkedKey = defaultList
}); },
return { /**
permission: permission, * 递归
subpermissions: subpermissions * 设置全部选中
*/
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() { confirmEdit() {
let permissions = []; if(this.add) {
this.permissionsList.map((items) => { this.establish();
if (items.permission.checked) { return
permissions.push(items.permission.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)
} }
items.subpermissions.map((item) => { }
if (item.checked) { if(!this.ruleName) {
permissions.push(item.value) Alert.fail('角色名称不能为空!')
return
}
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,
} }
return item; this.$emit('getList',showData)
}); } else {
Alert.fail('编辑失败,请重试')
return items; }
}); })
},
let ruleName = this.ruleName; /**
if (this.add) { * 创建新角色
if (!ruleName) { */
Alert.fail('角色名称不能为空'); establish() {
return false; 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) {
let params = { Alert.fail('角色名称不能为空!')
id: this.currId, return
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)
})
} else {
ROLES_PUT(params).then(res => {
Alert.success('更新成功');
this.isEdit = false;
this.$emit('success');
})
} }
if(!permissionIds.length) {
Alert.fail('权限不能为空!')
return
}
const params = {
roleName: this.ruleName,
permissionIds
}
ROLE_ADD(params).then(res => {
if(res.code === 200) {
Alert.success('添加角色成功')
}
})
}, },
/** /**
* 全选 * 全选
*/ */
handleCheckAllChange(val) { handleCheckAllChange() {
if (val) { let checkedKey = []
let permissionsList = this.permissionsList.map((items, index) => { if(this.checkedAll) {
items.permission.checked = true; checkedKey = this.getKeys(this.permissionsList)
items.subpermissions.map((item) => { }
item.checked = true; if(!this.add) {
return item; this.$refs.tree.setCheckedKeys(checkedKey)
});
return items;
});
this.permissionsList = permissionsList;
} else { } else {
let permissionsList = this.permissionsList.map((items, index) => { this.$refs.treeAdd.setCheckedKeys(checkedKey)
items.permission.checked = false;
items.subpermissions.map((item) => {
item.checked = false;
return item;
});
return items;
});
this.permissionsList = permissionsList;
} }
}, },
/** /**
* 主permission 的选中 * 递归
* @param idx * 设置全部选中
* @param checked
*/ */
handleCheckedChange(idx, checked) { getKeys(list) {
let permissionsList = this.permissionsList.map((items, index) => { let keyList = []
if (idx == index) { if(list && list.length) {
if (!checked) { for(let i = 0; i < list.length; i++) {
items.permission.checked = false; keyList.push(list[i].permissionId)
items.subpermissions.map((item) => { if(list[i].children && list[i].children.length) {
item.checked = false; const itemList = this.getKeys(list[i].children)
return item; keyList.push([...itemList])
});
} else {
items.permission.checked = true;
} }
} }
return items; }
}); return keyList
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;
}
}
});
}
return items;
});
this.permissionsList = permissionsList;
}, },
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <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 { .grid-content {
background: #fff; background: #fff;
padding: 20px; padding: 20px;

Write Preview
Loading…
Cancel
Save