Skip to content

O
op-web-service
Commit f7cc73f5 authored by zhangtong5@yidian-inc.com's avatar zhangtong5@yidian-inc.com
Browse files
Options

update:角色详情页面显示优化&&角色管理页部分逻辑完善

parent 175b3470
Show whitespace changes
Inline Side-by-side
Showing with 580 additions and 166 deletions
server/controllers/role.js
View file @ f7cc73f5
...@@ -31,7 +31,6 @@ exports.getAdd_role = async (ctx, next) => { ...@@ -31,7 +31,6 @@ exports.getAdd_role = async (ctx, next) => {
json: true, json: true,
body: ctx.request.body body: ctx.request.body
} }
console.log('server getAdd_role::::', opts)
ctx.body = await req(ctx, opts) ctx.body = await req(ctx, opts)
} }
exports.get_role_info = async (ctx, next) => { exports.get_role_info = async (ctx, next) => {
......
src/pages/Life-no/index.vue
View file @ f7cc73f5
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
</el-form-item> </el-form-item>
<el-form-item label="类型"> <el-form-item label="类型">
<el-select v-model="life_account.type" placeholder="类型"> <el-select v-model="life_account.type" placeholder="类型">
<el-option value="个人" label="个人"></el-option> <el-option value="1" label="个人"></el-option>
<el-option value="企业" label="企业"></el-option> <el-option value="2" label="企业"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
page, page,
page_size, page_size,
life_account_name: name, life_account_name: name,
life_account_type: type == "个人" ? 1 : type == "企业" ? 2 : '' life_account_type: type
} }
reqGetLifeNoList(params).then(res => { reqGetLifeNoList(params).then(res => {
this.totalNum = res.count this.totalNum = res.count
......
src/pages/Life-no/life-no-detail.vue
View file @ f7cc73f5
<template> <template>
<div class="life-no-detail"> <div class="life-no-detail">
<el-button type="text" @click="goBack" icon="el-icon-arrow-left"
>返回</el-button
>
<el-card class="management">
<h4 class="titleInfo">生活号信息</h4> <h4 class="titleInfo">生活号信息</h4>
<el-descriptions :column="3" border> <el-descriptions :column="3" border>
<template #extra> </template> <template #extra> </template>
...@@ -24,6 +28,8 @@ ...@@ -24,6 +28,8 @@
{{ life_account.life_account_name }} {{ life_account.life_account_name }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card>
<el-card class="management">
<h4 class="titleInfo">类型信息</h4> <h4 class="titleInfo">类型信息</h4>
<el-descriptions :column="3" border> <el-descriptions :column="3" border>
<template #extra> </template> <template #extra> </template>
...@@ -50,7 +56,10 @@ ...@@ -50,7 +56,10 @@
</el-descriptions-item> </el-descriptions-item>
</div> </div>
</el-descriptions> </el-descriptions>
<h4 class="title">用户信息</h4> </el-card>
<el-card class="management">
<h4 class="titleInfo">用户信息</h4>
<div class="accountRoleList">
<el-table :data="accountRoleList" border style="width: 100%"> <el-table :data="accountRoleList" border style="width: 100%">
<el-table-column prop="nick_name" label="昵称" width="180"> <el-table-column prop="nick_name" label="昵称" width="180">
</el-table-column> </el-table-column>
...@@ -60,6 +69,8 @@ ...@@ -60,6 +69,8 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</el-card>
</div>
</template> </template>
<script> <script>
import { getLife_info as reqGetLife_info } from "../../service/life-no"; import { getLife_info as reqGetLife_info } from "../../service/life-no";
...@@ -86,14 +97,14 @@ export default { ...@@ -86,14 +97,14 @@ export default {
roleRangeFormat (row) { roleRangeFormat (row) {
return row.role_type == 1 ? '是' : '否' return row.role_type == 1 ? '是' : '否'
}, },
goBack () {
this.$router.go(-1)
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.life-no-detail { .life-no-detail {
.title {
margin: 10px;
}
.titleInfo { .titleInfo {
margin-top: 10px; margin-top: 10px;
} }
...@@ -101,5 +112,11 @@ export default { ...@@ -101,5 +112,11 @@ export default {
.box-card { .box-card {
width: 100%; width: 100%;
} }
.accountRoleList {
margin-top: 20px;
}
.management {
margin-top: 20px;
}
} }
</style> </style>
\ No newline at end of file
src/pages/Role/add-role.vue
View file @ f7cc73f5
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:data="roleDataList" :data="roleDataList"
style="width: 100%; margin-top: 10px" style="width: 100%; margin-top: 10px"
:header-cell-style="{ background: '#e1e4e5', color: '#80878f' }" :header-cell-style="{ background: '#e1e4e5', color: '#80878f' }"
@row-click="toLifeDetail" @row-click="toRoleDetail"
> >
<el-table-column prop="role_name" label="角色名称" width="180"> <el-table-column prop="role_name" label="角色名称" width="180">
</el-table-column> </el-table-column>
...@@ -109,7 +109,7 @@ export default { ...@@ -109,7 +109,7 @@ export default {
return { return {
parmas: { parmas: {
page: 1, page: 1,
page_size: 20 page_size: 10
}, },
user_info: { user_info: {
user_name: "jianghaiming", user_name: "jianghaiming",
...@@ -128,7 +128,7 @@ export default { ...@@ -128,7 +128,7 @@ export default {
children: 'sub_permissions'//children值和哪个值绑定 children: 'sub_permissions'//children值和哪个值绑定
}, },
formLabelWidth: '120px', formLabelWidth: '120px',
selectedOptions: [189, 190],//选中权限类型 selectedOptions: [230, 231, 232],//选中权限类型
currentRolePrivilege: [],//当前权限设置 currentRolePrivilege: [],//当前权限设置
role_info_detail: {//详情非编辑项 role_info_detail: {//详情非编辑项
role_id: "", role_id: "",
...@@ -152,7 +152,7 @@ export default { ...@@ -152,7 +152,7 @@ export default {
}) })
}, },
methods: { methods: {
toLifeDetail (row) { toRoleDetail (row) {
this.$router.push({ name: 'RoleDetail', query: { roleId: row.role_id } }); this.$router.push({ name: 'RoleDetail', query: { roleId: row.role_id } });
}, },
newAddRole () { newAddRole () {
...@@ -167,7 +167,7 @@ export default { ...@@ -167,7 +167,7 @@ export default {
let { page, page_size } = this.parmas let { page, page_size } = this.parmas
reqGetRole_list(page, page_size).then(res => { reqGetRole_list(page, page_size).then(res => {
this.roleDataList = res.result this.roleDataList = res.result
this.totalNum = res.count this.totalNum = 24
}) })
}, },
//列表分页 //列表分页
......
src/pages/Role/manage-role.vue
View file @ f7cc73f5
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</el-form> </el-form>
<!-- 角色搜索列表 --> <!-- 角色搜索列表 -->
<el-table border :data="managementList"> <el-table border :data="managementList" @row-click="toRoleDetail">
<el-table-column label="ID" prop="id" align="center"></el-table-column> <el-table-column label="ID" prop="id" align="center"></el-table-column>
<el-table-column <el-table-column
label="角色名称" label="角色名称"
...@@ -49,43 +49,74 @@ ...@@ -49,43 +49,74 @@
<template #default="scope"> <template #default="scope">
<el-button <el-button
size="mini" size="mini"
@click="handelClick(scope.row)" @click.stop="handelModify(scope.row)"
type="primary" type="primary"
>修改</el-button >修改</el-button
> >
<el-button <el-button
size="mini" size="mini"
@click="handelClick(scope.row)" @click.stop="handelDelete(scope.row)"
type="warning" type="warning"
>删除</el-button >删除</el-button
> >
<el-button size="mini" @click="handelClick(scope.row)" type="danger" <el-button
size="mini"
@click.stop="handelDisable(scope.row)"
type="danger"
>禁用</el-button >禁用</el-button
> >
<el-button <el-button
size="mini" size="mini"
@click="handelClick(scope.row)" @click.stop="handelEnable(scope.row)"
type="success" type="success"
>启用</el-button >启用</el-button
> >
<el-button
style="margin-top: 10px"
size="mini"
@click="handelClick(scope.row)"
>查看详情</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<page :totalNum="totalNum" @update="update" />
</el-card> </el-card>
<el-dialog
title="角色权限范围修改"
v-model="dialogVisible"
width="40%"
destroy-on-close
>
<div class="tree">
<div class="content">
<el-tree
:data="permissions"
show-checkbox
default-expand-all
:default-checked-keys="checkedKeys"
:default-expanded-keys="expandedKeys"
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@node-click="nodeClick"
@check-change="treeChange"
>
</el-tree>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</template>
</el-dialog>
</layout> </layout>
</template> </template>
<script> <script>
import Layout from "@/layouts"; import Layout from "@/layouts";
import page from "../components/Pagination"
export default { export default {
name: 'RoleManagement', name: 'RoleManagement',
components: { components: {
Layout Layout,
page
}, },
data () { data () {
return { return {
...@@ -93,6 +124,10 @@ export default { ...@@ -93,6 +124,10 @@ export default {
roleName: '', roleName: '',
roleStatus: 1 roleStatus: 1
}, },
totalNum: null,
edit: false,
dialogVisible: false,
dialogText: "",
managementList: [ managementList: [
{ {
id: 1, id: 1,
...@@ -101,9 +136,291 @@ export default { ...@@ -101,9 +136,291 @@ export default {
lastDate: '2021-05-31', lastDate: '2021-05-31',
updateNumber: 492148618, updateNumber: 492148618,
} }
],
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7, label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'sub_permissions',
label: 'desc'
},
checkedKeys: [],
roleIds: [],
expandedKeys: [],
permissions: [
{
"name": "enterprise_certification_management",
"desc": "企业认证管理",
"id": 1,
"sub_permissions": [
{
"name": "audit",
"id": 2,
"desc": "审核企业信息"
},
{
"name": "edit",
"id": 3,
"desc": "修改企业信息"
},
{
"name": "create",
"id": 4,
"desc": "提交企业信息"
}
] ]
},
{
"name": "life_official_account_management",
"id": 5,
"desc": "生活号管理",
"sub_permissions": [
{
"name": "create",
"id": 6,
"desc": "创建生活号"
}
]
},
{
"name": "role_management",
"id": 7,
"desc": "角色管理",
"sub_permissions": [
{
"name": "edit",
"id": 8,
"desc": "修改角色信息"
},
{
"name": "delete",
"id": 9,
"desc": "删除角色信息"
},
{
"name": "disable",
"id": 10,
"desc": "禁用角色信息"
},
{
"name": "enable",
"id": 11,
"desc": "启用角色信息"
},
{
"name": "create",
"id": 12,
"desc": "创建角色信息"
} }
]
}, },
{
"name": "user_management",
"desc": "用户管理",
"id": 13,
"sub_permissions": [
{
"name": "edit",
"id": 14,
"desc": "修改用户信息"
},
{
"name": "disable",
"id": 15,
"desc": "禁用用户信息"
},
{
"name": "enable",
"id": 16,
"desc": "启用用户信息"
},
{
"name": "create",
"id": 17,
"desc": "添加用户"
}
]
},
{
"name": "test",
"id": 18,
"desc": "测试地址",
"sub_permissions": []
}
],
}
},
created () {
this.checkedKeys = this.roleIds//应该有的权限id
var newArr = [] //需要展示的数据
this.checkedKeys.forEach(item => {
console.log(item, '0000')
this.checked(item, this.permissions, newArr)
})
this.checkedKeys = newArr//需要展示的数据
// 删除父元素
},
methods: {
checked (id, data, newArr) {
data.forEach(item => {//遍历组成树结构的数据
if (item.id == id) {//需要显示的如果有父元素的节点
// 当子节点数组为数组[]时用 item.childList.length==0 childList是子节点的数组名
// 当子节点为空是后台传的为null时用 item.childList==null
if (item.sub_permissions == null) {
newArr.push(item.id)//把这个数据添加
}
} else {//需要显示的没有父元素的节点但是有子节点
if (item.sub_permissions != null) {
this.checked(id, item.sub_permissions, newArr)
}
}
})
},
toRoleDetail (row) {
this.$router.push({ name: 'RoleDetail', query: { roleId: row.id } });
},
//启用
handelEnable (row) {
console.log(row, 'row')
},
//列表分页
update (obj) {
console.log(obj, 'obj')
},
//弹框提示
openBounced () {
this.$confirm(`${this.dialogText}是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '操作成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
//禁用
handelDisable (row) {
console.log(row, 'row')
this.dialogText = "禁用拥有此角色用户将受影响"
this.openBounced()
},
//删除
handelDelete () {
this.dialogText = "删除后不可恢复，拥有此角色用户将受影响"
this.openBounced()
// this.getVoucherList(this.params)
// console.log(row, 'row')
},
//修改
handelModify (row) {
this.dialogVisible = true
this.edit = true
console.log(row, 'row')
},
confirm () {
console.log(this.dialogText, 'this.dialogText')
console.log(this.$refs.tree.getCheckedKeys(), '99999');
//let parentArr = this.$refs.tree.getHalfCheckedKeys() //通过 key 获取 半选中
let childeArr = this.$refs.tree.getCheckedKeys() //通过 key 获取 选中的
// let roleIds = childeArr.concat(parentArr) //全部选中的
console.log(childeArr, 'roleIdsroleIdsroleIdsroleIds')
// this.dialogVisible = false
},
nodeClick: function (data) {
console.log(data, 'data');
},
treeChange (data) {
var newArr = []
newArr.push(data)
// this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
// if (data.sub_permissions) {
// console.log(data, '888828823823')
// newArr.push(data)
// // this.getSelectedOptions(data.sub_permissions)
// } else {
// arr1.push(data)
// }
console.log(newArr, 'arr1arr1arr1')
// console.log(newArr, ' newArr newArr newArr')
// this.getSelectedOptions(data)
// const nodeData = this.$refs.tree.getNode(data.id);
// this.getParent(nodeData)
},
getCheckedKey () {
let parentArr = this.$refs.tree.getHalfCheckedKeys() //通过 key 获取 半选中
let childeArr = this.$refs.tree.getCheckedKeys() //通过 key 获取 选中的
let roleIds = childeArr.concat(parentArr) //全部选中的
return roleIds
},
getSelectedOptions (selectedOptions) {
let oldDataRule = []
selectedOptions.forEach(el => {
let oldObj = {
id: el[0],
sub_permissions: []
}
let btnObj = {
id: el[1],
}
oldObj.sub_permissions.push(btnObj)
oldDataRule.push(oldObj)
})
let newData = []
let newObj = {}
oldDataRule.forEach((el, i) => {
if (!newObj[el.id]) {
newData.push(el);
newObj[el.id] = true;
} else {
newData.forEach(el => {
if (el.id === oldDataRule[i].id) {
el.sub_permissions = [...el.sub_permissions, ...oldDataRule[i].sub_permissions];
}
})
}
})
console.log(newData, ' newData')
},
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -113,4 +430,9 @@ export default { ...@@ -113,4 +430,9 @@ export default {
.role_management .el-button { .role_management .el-button {
margin: 0 2px; margin: 0 2px;
} }
.tree {
border: 1px solid #ebeef5;
max-height: 300px;
overflow-y: scroll;
}
</style> </style>
src/pages/Role/role-detail.vue
View file @ f7cc73f5
<template> <template>
<div class="user-detail"> <div class="user-detail">
<el-button type="text" @click="goBack" icon="el-icon-arrow-left"
>返回</el-button
>
<el-card class="management">
<h3 style="margin-bottom: 10px">角色详情</h3> <h3 style="margin-bottom: 10px">角色详情</h3>
<el-descriptions class="margin-top" :column="2" :size="size" border> <el-descriptions class="margin-top" :column="2" border>
<el-descriptions-item> <el-descriptions-item>
<template #label>状态 </template> <template #label>状态 </template>
{{ role_info_detail.role_status }} {{ role_info_detail.role_status }}
...@@ -35,14 +39,42 @@ ...@@ -35,14 +39,42 @@
{{ role_info_detail.role_status }} {{ role_info_detail.role_status }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<div class="tree">
<div class="content">
<el-tree
:data="permissionsAll"
show-checkbox
:default-checked-keys="checkedKeys"
:default-expanded-keys="expandedKeys"
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
:expand-on-click-node="false"
>
</el-tree>
</div>
</div>
</el-card>
</div> </div>
</template> </template>
<script> <script>
import { get_role_info as reqGet_role_info } from '../../service/role' import { get_role_info as reqGet_role_info, getAll_role_list as reqGetAll_role_list, } from '../../service/role'
export default { export default {
data () { data () {
return { return {
roleId: this.$route.query.roleId, roleId: this.$route.query.roleId,
defaultProps: {
children: 'sub_permissions',
label: 'desc'
},
user_info: {
user_name: "jianghaiming",
user_email: "jianghaiming@126.com",
},
checkedKeys: [],
expandedKeys: [],
permissionsAll: [],
role_info_detail: {//详情非编辑项 role_info_detail: {//详情非编辑项
role_id: "", role_id: "",
role_name: "", role_name: "",
...@@ -55,8 +87,18 @@ export default { ...@@ -55,8 +87,18 @@ export default {
} }
}, },
created () { created () {
let { user_name, user_email } = this.user_info
reqGetAll_role_list(user_name, user_email).then(res => {
this.permissionsAll = res
this.permissionsAll.forEach(item => {
item.disabled = true
item.sub_permissions.forEach(element => {
element.disabled = true
})
})
})
reqGet_role_info(this.roleId).then((res) => { reqGet_role_info(this.roleId).then((res) => {
const { role_id, role_name, role_status, update_time, update_user_name, create_time, create_user_name } = res const { role_id, role_name, role_status, update_time, update_user_name, create_time, create_user_name, permissions } = res
this.role_info_detail = { this.role_info_detail = {
role_id, role_id,
role_name, role_name,
...@@ -66,12 +108,46 @@ export default { ...@@ -66,12 +108,46 @@ export default {
create_time, create_time,
create_user_name create_user_name
} }
this.editEchoData(permissions)
})
},
methods: {
goBack () {
this.$router.go(-1)
},
//遍历回显值selectedOptions
editEchoData (permissions) {
let parentArr = [], childArr = [], selectExpandedKeys = []
permissions.forEach(item => {
parentArr.push(item.sub_permissions)
selectExpandedKeys.push(item.id)
})
parentArr.forEach(element => {
element.forEach(val => {
childArr.push(val.id)
})
}) })
let selectedArr = []
for (let i in childArr) {
selectedArr.push(childArr[i]);
}
this.checkedKeys = selectedArr
this.expandedKeys = selectExpandedKeys
console.log(selectedArr, 'selectedArrselectedArrselectedArr')
},
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.user-detail { .user-detail {
margin: 50px; margin: 50px;
.management {
margin-top: 20px;
}
.tree {
border: 1px solid #ebeef5;
margin-top: 20px;
}
} }
</style> </style>
\ No newline at end of file
src/pages/User/user-detail.vue
View file @ f7cc73f5
<template> <template>
<div class="user-detail"> <div class="user-detail">
<el-button type="text" @click="goBack" icon="el-icon-arrow-left"
>返回</el-button
>
<el-card class="management">
<h2 style="margin-bottom: 10px">用户详情</h2> <h2 style="margin-bottom: 10px">用户详情</h2>
<el-descriptions class="margin-top" :column="3" :size="size" border> <el-descriptions class="margin-top" :column="3" :size="size" border>
<el-descriptions-item> <el-descriptions-item>
...@@ -37,9 +41,11 @@ ...@@ -37,9 +41,11 @@
</el-descriptions> </el-descriptions>
<div class="role">已拥有角色池</div> <div class="role">已拥有角色池</div>
<el-table :data="role_list" border style="width: 100%"> <el-table :data="role_list" border style="width: 100%">
<el-table-column prop="role_id" label="ID" width="180"> </el-table-column> <el-table-column prop="role_id" label="ID" width="180">
</el-table-column>
<el-table-column prop="role_name" label="角色名称"> </el-table-column> <el-table-column prop="role_name" label="角色名称"> </el-table-column>
</el-table> </el-table>
</el-card>
</div> </div>
</template> </template>
<script> <script>
...@@ -61,6 +67,9 @@ export default { ...@@ -61,6 +67,9 @@ export default {
this.user_info = res.user_info this.user_info = res.user_info
this.role_list = res.role_list this.role_list = res.role_list
}) })
},
goBack () {
this.$router.go(-1)
} }
} }
} }
......
src/pages/components/Pagination.vue
View file @ f7cc73f5
<template> <template>
<div class="block"> <div class="block">
<!-- <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-size="page_size"
background
layout="total,prev, pager, next"
:total="totalNum"
>
</el-pagination> -->
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
...@@ -27,7 +18,7 @@ export default { ...@@ -27,7 +18,7 @@ export default {
data () { data () {
return { return {
currentPage: 1, currentPage: 1,
page_size: 20 page_size: 10
} }
}, },
methods: { methods: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment