Skip to content

F
founder_vue
Commit f1b4c81a by maxiaohan
Options

角色管理 权限列表展示

parent 3e4f7b55
Showing with 215 additions and 307 deletions
src/views/SystemManage/RoleManage.vue
<template>
<div>
<el-container class="manage-page" direction="vertical">
<div class="sider">
<div class="btns">
<div class="add" @click="add">
<svg-icon
style="width: .8125rem;height: .8125rem;margin-bottom: -0.0625rem;margin-right: .25rem "
icon-class="ic_add"
/>
新增角色
</div>
<div class="img-btn" @click="copy">
<img
src="../../assets/img/role/copy.png"
style="height: .9375rem;width: .9375rem;margin-left:.0625rem ;margin-top: .25rem"
/>
</div>
<div class="img-btn" @click="del(diyRoleItemIndex)">
<img
src="../../assets/img/role/delete.png"
style="height: .9375rem;width: .9375rem;margin-left:.0625rem ;margin-top: .25rem"
/>
</div>
<el-container class="manage-page" direction="vertical">
<div class="sider">
<div class="btns">
<div class="add" @click="add">
<svg-icon
style="width: .8125rem;height: .8125rem;margin-bottom: -0.0625rem;margin-right: .25rem "
icon-class="ic_add"
/>
新增角色
</div>
<div class="img-btn" @click="copy">
<img
src="../../assets/img/role/copy.png"
style="height: .9375rem;width: .9375rem;margin-left:.0625rem ;margin-top: .25rem"
/>
</div>
<div class="default-role">
<div
class="default-role-item"
v-for="(item, index) in defaultRoleBtns"
:key="item.id"
:class="{ active: item.id === defaultRoleItemIndex }"
@click="chooseDefaultRoleItem(item)"
>
<div class="img-btn" @click="del(diyRoleItemIndex)">
<img
src="../../assets/img/role/delete.png"
style="height: .9375rem;width: .9375rem;margin-left:.0625rem ;margin-top: .25rem"
/>
</div>
</div>
<div class="default-role">
<div
class="default-role-item"
v-for="(item, index) in defaultRoleBtns"
:key="item.id"
:class="{ active: item.id === defaultRoleItemIndex }"
@click="chooseDefaultRoleItem(item)"
>
{{ item.name }}
</div>
</div>
<div class="diy-roles">
<div
class="diy-role-item"
v-for="(item, index) in diyRoleList"
:key="item.id"
:class="{ active: item.id === diyRoleItemIndex }"
@click="chooseDiyRoleItem(item.id)"
>
<div v-show="item.id !== diyRoleItemIndex" class="diy-edit-title">
{{ item.name }}
</div>
<el-input
v-show="item.id === diyRoleItemIndex"
size="mini"
class="diy-edit-title"
v-model="item.name"
></el-input>
<div class="diy-edit-btn">
<img class="img" :src="editurl" @click="editDiyRoleItem(index)" />
</div>
</div>
<div class="diy-roles">
<div
class="diy-role-item"
v-for="(item, index) in diyRoleList"
:key="item.id"
:class="{ active: item.id === diyRoleItemIndex }"
@click="chooseDiyRoleItem(item.id)"
>
<div v-show="item.id !== diyRoleItemIndex" class="diy-edit-title">
{{ item.name }}
</div>
<el-input
v-show="item.id === diyRoleItemIndex"
size="mini"
class="diy-edit-title"
v-model="item.name"
></el-input>
<div class="diy-edit-btn">
<img class="img" :src="editurl" @click="editDiyRoleItem(index)" />
</div>
</div>
</div>
<div class="main">
<div class="header">
<div class="btns">
<div class="btn" :class="{ active: funFlag }" @click="funAuth">
功能权限
</div>
<div class="btn" :class="{ active: dataFlag }" @click="dataAuth">
数据权限
</div>
</div>
<div class="save">
<div class="btn" @click="save">保存</div>
</div>
</div>
<div class="main">
<div class="header">
<div class="btns">
<div class="btn" :class="{ active: funFlag }" @click="funAuth">
功能权限
</div>
<div class="btn" :class="{ active: dataFlag }" @click="dataAuth">
数据权限
</div>
<div class="role-info">
<!-- 角色权限菜单列-->
<div class="menus">
<div class="div3">
<el-checkbox v-model="permissionDataList[0].id">
{{ permissionDataList[0].name }}
</el-checkbox>
<el-checkbox v-model="permissionDataList[1].id">
{{ permissionDataList[1].name }}
</el-checkbox>
<el-checkbox v-model="permissionDataList[2].id">
{{ permissionDataList[2].name }}
</el-checkbox>
</div>
<div class="div3">
<el-checkbox v-model="permissionDataList[3].id">
{{ permissionDataList[3].name }}
</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[4].id">
{{ permissionDataList[4].name }}
</el-checkbox>
</div>
<div @click="addrole">addrole</div>
<div class="save">
<div class="btn" @click="save">保存</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[5].id">
{{ permissionDataList[5].name }}
</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[6].id">
{{ permissionDataList[6].name }}
</el-checkbox>
</div>
<div class="div2">
<el-checkbox v-model="permissionDataList[7].id">
{{ permissionDataList[7].name }}
</el-checkbox>
</div>
<div class="div3">
<el-checkbox v-model="permissionDataList[8].id">
{{ permissionDataList[8].name }}
</el-checkbox>
</div>
</div>
<div class="role-info">
<!-- 角色权限菜单列-->
<div class="menus">
<div class="div3">
<el-checkbox v-model="permissionDataList[0].id">
{{ permissionDataList[0].name }}
</el-checkbox>
<el-checkbox v-model="permissionDataList[1].id">
{{ permissionDataList[1].name }}
</el-checkbox>
<el-checkbox v-model="permissionDataList[2].id">
{{ permissionDataList[2].name }}
</el-checkbox>
</div>
<div class="div3">
<el-checkbox v-model="permissionDataList[3].id">
{{ permissionDataList[3].name }}
</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[4].id">
{{ permissionDataList[4].name }}
</el-checkbox>
<div class="content">
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[0].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[5].id">
{{ permissionDataList[5].name }}
</el-checkbox>
<br />
<div
class="line"
v-for="item in permissionDataList[1].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div1">
<el-checkbox v-model="permissionDataList[6].id">
{{ permissionDataList[6].name }}
</el-checkbox>
</div>
<div class="div2">
<el-checkbox v-model="permissionDataList[7].id">
{{ permissionDataList[7].name }}
</el-checkbox>
</div>
<div class="div3">
<el-checkbox v-model="permissionDataList[8].id">
{{ permissionDataList[8].name }}
</el-checkbox>
<br />
<div
class="line"
v-for="item in permissionDataList[2].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="content">
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[0].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<br />
<div
class="line"
v-for="item in permissionDataList[1].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<br />
<div
class="line"
v-for="item in permissionDataList[2].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[3].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[3].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[4].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[4].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[5].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[5].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[6].children"
:key="item.id"
>
<el-checkbox v-model="item.flag"> {{ item.id }}</el-checkbox>
</div>
</div>
<div class="div1">
<div
class="line"
v-for="item in permissionDataList[6].children"
:key="item.id"
>
<el-checkbox v-model="item.flag"> {{ item.name }}</el-checkbox>
</div>
<div class="div2">
<div
class="line"
v-for="item in permissionDataList[7].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div2">
<div
class="line"
v-for="item in permissionDataList[7].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[8].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
<div class="div3">
<div
class="line"
v-for="item in permissionDataList[8].children"
:key="item.id"
>
<el-checkbox v-model="item.id"> {{ item.name }}</el-checkbox>
</div>
</div>
</div>
</div>
</el-container>
</div>
</div>
</el-container>
</template>
<script>
......@@ -227,110 +224,6 @@ export default {
permissionDataList: [],
// 保存的角色选项
roleMenusSelection: [],
// 角色权限菜单
roleMenus: [
{ name: "指掌纹采集", code: 0, flag: false },
{ name: "指掌纹录入", code: 1, flag: false },
{ name: "档案信息录入", code: 2, flag: false },
{ name: "综合认定", code: 3, flag: false },
{ name: "高级认定", code: 4, flag: false },
{ name: "质量检查", code: 5, flag: false },
{ name: "高级质量检查", code: 6, flag: false },
{ name: "信息管理", code: 7, flag: false },
{ name: "高级管理", code: 8, flag: false }
],
// 指掌纹采集菜单
printCollectMenus: [
{ name: "指掌纹采集", code: 0, flag: false },
{ name: "非违法人员指纹采集", code: 1, flag: false }
],
// 指掌纹录入菜单
printInputMenus: [
{ name: "图片导入", code: 0, flag: false },
{ name: "FPTX数据导入", code: 1, flag: false },
{ name: "人员指纹扫描", code: 2, flag: false },
{ name: "案件指纹扫描", code: 3, flag: false },
{ name: "笔录指纹", code: 4, flag: false }
],
// 档案信息录入菜单
fileInformationInputMenus: [
{ name: "人员文字信息录入", code: 0, flag: false },
{ name: "案件文字信息录入", code: 1, flag: false }
],
// 综合认定
comprehensiveMenus: [
{ name: "发查询", code: 0, flag: false },
{ name: "比中认定-隐藏条码号", code: 1, flag: false },
{ name: "比中信息反馈", code: 2, flag: false },
{ name: "比中信息管理", code: 3, flag: false },
{ name: "破案信息管理", code: 4, flag: false },
{ name: "导入比中认定", code: 5, flag: false },
{ name: "填写比中抓获", code: 6, flag: false },
{ name: "人员信息新增修改", code: 7, flag: false },
{ name: "比中信息反馈", code: 8, flag: false },
{ name: "关注人员", code: 9, flag: false },
{ name: "关注条件", code: 10, flag: false },
{ name: "协查信息上报", code: 11, flag: false },
{ name: "提取现勘信息", code: 12, flag: false },
{ name: "人员指纹编辑", code: 13, flag: false },
{ name: "案件指纹编辑", code: 14, flag: false },
{ name: "文字信息修改", code: 15, flag: false },
{ name: "二次打印", code: 16, flag: false },
{ name: "比中信息撤销", code: 17, flag: false }
],
// 高级认定
seniorMenus: [
{ name: "比中认定-显示条码号", code: 1, flag: false },
{ name: "高级案件编辑", code: 2, flag: false },
{ name: "人案控制条码规则", code: 3, flag: false },
{ name: "基本/比中数据上报", code: 4, flag: false },
{ name: "全用户认定权限", code: 5, flag: false }
],
// 质量检查
qualityTestingMenus: [
{ name: "比中信息复核", code: 1, flag: false },
{ name: "协查信息复核", code: 2, flag: false },
{ name: "人案控制条码规则", code: 3, flag: false }
],
// 高级质量检查
seniorQualityTestingMenus: [
{ name: "比中信息复核", code: 1, flag: false },
{ name: "协查信息复核", code: 2, flag: false },
{ name: "人案控制条码规则", code: 3, flag: false }
],
// 信息管理
informationManageMenus: [
{ name: "比中信息管理", code: 1, flag: false },
{ name: "破案信息管理", code: 2, flag: false },
{ name: "协查信息管理", code: 3, flag: false },
{ name: "工作信息统计", code: 4, flag: false },
{ name: "战果查询上报", code: 5, flag: false },
{ name: "人员队列管理", code: 6, flag: false },
{ name: "案件队列管理", code: 7, flag: false },
{ name: "系统操作日志", code: 8, flag: false },
{ name: "复制案件数据", code: 9, flag: false },
{ name: "FPTX数据导出", code: 10, flag: false },
{ name: "批量处理操作", code: 11, flag: false }
],
// 高级管理
seniorManageMenus: [
{ name: "人案更改条码号", code: 1, flag: false },
{ name: "人案控制条码规则", code: 2, flag: false },
{ name: "删除人员数据", code: 3, flag: false },
{ name: "删除案件数据", code: 4, flag: false },
{ name: "删除查询数据", code: 5, flag: false },
{ name: "系统用户管理", code: 6, flag: false },
{ name: "系统分库管理", code: 7, flag: false },
{ name: "资源库管理", code: 8, flag: false },
{ name: "协查用户管理", code: 9, flag: false },
{ name: "人员类型管理", code: 10, flag: false },
{ name: "用户组管理", code: 11, flag: false },
{ name: "查询模块管理", code: 12, flag: false },
{ name: "上报条件设置", code: 13, flag: false },
{ name: "本地重卡反馈", code: 14, flag: false },
{ name: "本地涉案反馈", code: 15, flag: false }
],
// 自定义的角色组
diyRoleList: [],
diyRoleItemIndex: -1,
......@@ -340,9 +233,9 @@ export default {
methods: {
// 获取权限列表
getPermissionDataLists() {
var arr = [];
this.$axios.get("/system/permissions").then(res => {
if (res.data.length > 0) {
var arr = [];
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].parentId === 0) {
res.data[i].children = [];
......@@ -384,17 +277,36 @@ export default {
this.$axios
.get("/system/roles")
.then(res => {
console.info(res);
this.roles = res.data;
res.data.forEach((item, index) => {
// item.flag = false;
// console.info(item);
if (index < 7) {
this.defaultRoleBtns.push(item);
} else {
this.diyRoleList.push(item);
}
});
if (res.data !== null) {
res.data.forEach((item, index) => {
var arr = [];
var rolePermissions = item.permissions;
for (let i = 0; i < rolePermissions; i++) {
if (rolePermissions[i].parentId === 0) {
rolePermissions[i].children = [];
arr.push(rolePermissions[i]);
}
if (rolePermissions[i].parentId !== 0) {
arr.forEach((father, index) => {
if (father.id === rolePermissions[i].parentId) {
father.children.push(rolePermissions[i]);
}
});
}
}
item.permissions = rolePermissions;
if (index < 7) {
this.defaultRoleBtns.push(item);
} else {
this.diyRoleList.push(item);
}
});
console.info("角色权限===》", this.defaultRoleBtns);
console.info("角色权限===》", this.diyRoleList);
} else {
this.$message.error("获取角色信息失败！");
}
})
.catch(failResponse => {});
},
......
src/views/login/Login1.vue
<template>
<div id="homepage_hero_module" class="homepage_hero_module">
<el-container class="manage-page" direction="vertical">
<!-- <div id="homepage_hero_module" class="homepage_hero_module">-->
<!-- <div class="video_container">-->
<!-- <div :style="fixStyle" class="filter"></div>-->
<!-- autoplay 自动播放 loop 循环播放 muted 静音播放-->
......@@ -59,7 +60,7 @@
</div>
</div>
</transition>
</div>
</el-container>
</template>
<script>
......@@ -174,7 +175,7 @@ export default {
</script>
<style scoped>
.homepage_hero_module {
.manage-page {
width: 100vw;
height: 100vh;
overflow: hidden;
......@@ -182,14 +183,9 @@ export default {
background-repeat: no-repeat;
background-size: 100% 100%;
}
/*.homepage_hero_module img {*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
/*video {*/
/* width: 100%;*/
/* height: 100%;*/
/*}*/
div {
/*display: inline-block;*/
}
.el-button--text {
width: 108px;
......
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