|
|
|
@ -1,16 +1,16 @@ |
|
|
|
<script setup> |
|
|
|
import {nextTick, onMounted, reactive, ref} from 'vue' |
|
|
|
import {ElMessage} from 'element-plus' |
|
|
|
import { nextTick, onMounted, reactive, ref } from 'vue' |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import _ from 'lodash' |
|
|
|
import request from '@/util/http' |
|
|
|
import API from '@/util/http' |
|
|
|
import {useAdminStore} from "@/store/index.js" |
|
|
|
import {storeToRefs} from "pinia" |
|
|
|
import { useAdminStore } from "@/store/index.js" |
|
|
|
import { storeToRefs } from "pinia" |
|
|
|
|
|
|
|
const adminStore = useAdminStore(); |
|
|
|
const {adminData, menuTree} = storeToRefs(adminStore); |
|
|
|
import {permissionMapping, findMenuById} from "@/utils/menuTreePermission.js" |
|
|
|
import {tr} from 'element-plus/es/locales.mjs' |
|
|
|
const { adminData, menuTree } = storeToRefs(adminStore); |
|
|
|
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js" |
|
|
|
import { tr } from 'element-plus/es/locales.mjs' |
|
|
|
|
|
|
|
// 表单验证ref |
|
|
|
const Ref = ref(null) |
|
|
|
@ -139,7 +139,7 @@ const handleDialogClose = function () { |
|
|
|
const permissionList = ref([]) |
|
|
|
const getRoles = async function () { |
|
|
|
try { |
|
|
|
const res = await API({url: '/role/selectAll'}) |
|
|
|
const res = await API({ url: '/role/selectAll' }) |
|
|
|
permissionList.value = res.data.map(item => ({ |
|
|
|
label: item.roleName, |
|
|
|
value: item.id |
|
|
|
@ -238,7 +238,7 @@ const getLists = async function () { |
|
|
|
} |
|
|
|
const res = await API({ |
|
|
|
url: '/menu/tree', |
|
|
|
data: {id: roleId} |
|
|
|
data: { id: roleId } |
|
|
|
}) |
|
|
|
data.value = res.data |
|
|
|
data.value = filterPermission(data.value) |
|
|
|
@ -248,7 +248,7 @@ const getLists = async function () { |
|
|
|
if (addRole.value.parentId && addRole.value.parentId !== 2) { |
|
|
|
const result = await API({ |
|
|
|
url: '/general/roleMarket', |
|
|
|
data: {id: addRole.value.parentId} |
|
|
|
data: { id: addRole.value.parentId } |
|
|
|
}) |
|
|
|
if (result.code === 200) { |
|
|
|
if (typeof result.data === 'string' && result.data) { |
|
|
|
@ -306,17 +306,17 @@ const goldenBeanMenuIds = new Set([ |
|
|
|
// 23// 金豆客户账户明细 |
|
|
|
const filterGoldenBeanMenus = (tree) => { |
|
|
|
return tree |
|
|
|
.filter(item => { |
|
|
|
// 排除金豆相关的顶层菜单 |
|
|
|
if (goldenBeanMenuIds.has(item.id)) { |
|
|
|
return false |
|
|
|
} |
|
|
|
// 递归处理子菜单 |
|
|
|
if (item.children && item.children.length > 0) { |
|
|
|
item.children = filterGoldenBeanMenus(item.children) |
|
|
|
} |
|
|
|
return true |
|
|
|
}) |
|
|
|
.filter(item => { |
|
|
|
// 排除金豆相关的顶层菜单 |
|
|
|
if (goldenBeanMenuIds.has(item.id)) { |
|
|
|
return false |
|
|
|
} |
|
|
|
// 递归处理子菜单 |
|
|
|
if (item.children && item.children.length > 0) { |
|
|
|
item.children = filterGoldenBeanMenus(item.children) |
|
|
|
} |
|
|
|
return true |
|
|
|
}) |
|
|
|
} |
|
|
|
// 过滤权限模块(????????)俺不会 |
|
|
|
const filterPermission = (tree) => { |
|
|
|
@ -331,7 +331,7 @@ const filterPermission = (tree) => { |
|
|
|
} |
|
|
|
// 处理编辑角色权限时的勾选事件 |
|
|
|
const handleEditRolePermissionCheck = (checkedNodes, checkedInfo) => { |
|
|
|
const {checkedKeys, checkedNodes: allCheckedNodes} = checkedInfo |
|
|
|
const { checkedKeys, checkedNodes: allCheckedNodes } = checkedInfo |
|
|
|
|
|
|
|
// 判断是否有选中的节点 |
|
|
|
if (allCheckedNodes.length === 0) { |
|
|
|
@ -356,7 +356,7 @@ const handleEditRolePermissionCheck = (checkedNodes, checkedInfo) => { |
|
|
|
//用于标记是否勾选频道管理 |
|
|
|
const ifHasChannel = ref(false) |
|
|
|
const handleCheckChange = async (checkedNodes, checkedInfo) => { |
|
|
|
const {checkedKeys, checkedNodes: allCheckedNodes} = checkedInfo |
|
|
|
const { checkedKeys, checkedNodes: allCheckedNodes } = checkedInfo |
|
|
|
|
|
|
|
// 判断是否有选中的节点 |
|
|
|
if (allCheckedNodes.length === 0) { |
|
|
|
@ -492,7 +492,7 @@ const permissionEditRoleInit = async function (row) { |
|
|
|
// 调用 /tree 接口，使用上级角色 ID 获取权限列表 |
|
|
|
const res = await API({ |
|
|
|
url: '/menu/tree', |
|
|
|
data: {id: roleId} |
|
|
|
data: { id: roleId } |
|
|
|
}); |
|
|
|
data.value = res.data; |
|
|
|
data.value = filterPermission(data.value) |
|
|
|
@ -602,11 +602,11 @@ const selectParentNodesForSubmit = (treeData, nodeId, checkedKeys) => { |
|
|
|
|
|
|
|
const Rolerules = reactive({ |
|
|
|
roleName: [ |
|
|
|
{required: true, message: '请输入角色名称', trigger: 'blur'}, |
|
|
|
{min: 2, max: 20, message: '角色名称长度应在2-20个字符之间', trigger: 'blur'} |
|
|
|
{ required: true, message: '请输入角色名称', trigger: 'blur' }, |
|
|
|
{ min: 2, max: 20, message: '角色名称长度应在2-20个字符之间', trigger: 'blur' } |
|
|
|
], |
|
|
|
market: [ |
|
|
|
{required: true, message: '请选择归属地区', trigger: 'change'} |
|
|
|
{ required: true, message: '请选择归属地区', trigger: 'change' } |
|
|
|
], |
|
|
|
checkedKeys: [ |
|
|
|
{ |
|
|
|
@ -643,7 +643,7 @@ onMounted(async function () { |
|
|
|
<el-card class="card1" style="margin-bottom: 1vh;"> |
|
|
|
<div style="display: flex;"> |
|
|
|
<el-text size="large">角色名称：</el-text> |
|
|
|
<el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable/> |
|
|
|
<el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable /> |
|
|
|
<div style="margin-left: auto;"> |
|
|
|
<el-button type="primary" @click="searchRole()" :disabled="!canLook" v-if="canLook">查询</el-button> |
|
|
|
<el-button type="success" @click="reset()">重置</el-button> |
|
|
|
@ -654,21 +654,21 @@ onMounted(async function () { |
|
|
|
<el-card class="card2"> |
|
|
|
<div class="add-item"> |
|
|
|
<el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()" :disabled="!canAdd" |
|
|
|
v-if="canAdd">新增角色 |
|
|
|
v-if="canAdd">新增角色 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-table :data="roleData" style="width: 82vw;height:71.3vh" show-overflow-tooltip |
|
|
|
:row-style="{ height: '56px' }"> |
|
|
|
:row-style="{ height: '56px' }"> |
|
|
|
<el-table-column type="index" label="序号" width="100px" fixed="left"> |
|
|
|
<template #default="scope"> |
|
|
|
<span>{{ |
|
|
|
scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize |
|
|
|
}}</span> |
|
|
|
scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize |
|
|
|
}}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="roleName" label="角色名称"/> |
|
|
|
<el-table-column prop="roleName" label="角色名称" /> |
|
|
|
<el-table-column prop="fatherName" label="上级角色"> |
|
|
|
<template #default="scope"> |
|
|
|
{{ scope.row.fatherName || '-' }} |
|
|
|
@ -684,7 +684,7 @@ onMounted(async function () { |
|
|
|
<el-table-column prop="operation" label="操作" width="200px"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="warning" text @click="permissionEditRoleInit(scope.row)" |
|
|
|
:disabled="(scope.row.id === 2) || (scope.row.id === 1) || !canEdit" v-if="canEdit"> |
|
|
|
:disabled="(scope.row.id === 2) || (scope.row.id === 1) || !canEdit" v-if="canEdit"> |
|
|
|
编辑 |
|
|
|
</el-button> |
|
|
|
</template> |
|
|
|
@ -694,10 +694,8 @@ onMounted(async function () { |
|
|
|
|
|
|
|
<div style="margin-top: 20px;display: flex;"> |
|
|
|
<el-pagination background :current-page="getRoleObj.pageNum" :page-size="getRoleObj.pageSize" |
|
|
|
:page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="roleTotal" |
|
|
|
@size-change="handleRolePageSizeChange" |
|
|
|
@current-change="handleRoleCurrentChange"></el-pagination> |
|
|
|
:page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="roleTotal" |
|
|
|
@size-change="handleRolePageSizeChange" @current-change="handleRoleCurrentChange"></el-pagination> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
@ -705,8 +703,8 @@ onMounted(async function () { |
|
|
|
<!-- 角色菜单树展示 --> |
|
|
|
<el-dialog v-model="menuTreeVisible" :title='`权限详情：${currentRoleName}`' width="600px"> |
|
|
|
<el-tree :data="currentRoleMenuTree" node-key="id" :props="{ label: 'menuName', children: 'children' }" |
|
|
|
show-checkbox check-strictly :expand-on-click-node="false" |
|
|
|
:default-expanded-keys="currentRoleMenuTree.map(item => item.id)" :default-checked-keys="Rolecheckedkeys"/> |
|
|
|
show-checkbox check-strictly :expand-on-click-node="false" |
|
|
|
:default-expanded-keys="currentRoleMenuTree.map(item => item.id)" :default-checked-keys="Rolecheckedkeys" /> |
|
|
|
<template #footer> |
|
|
|
<el-button @click="menuTreeVisible = false" type="primary">关闭</el-button> |
|
|
|
</template> |
|
|
|
@ -714,30 +712,29 @@ onMounted(async function () { |
|
|
|
|
|
|
|
<!-- 新增角色 --> |
|
|
|
<el-dialog v-model="permissionAddVisible" title="新增角色" width="800px" :close-on-click-modal="false" |
|
|
|
@close="handleDialogClose"> |
|
|
|
@close="handleDialogClose"> |
|
|
|
<template #footer> |
|
|
|
<el-form ref="Ref" :rules="Rolerules" :model="addRole" label-width="auto" |
|
|
|
style="max-width: 600px; align-items: center"> |
|
|
|
style="max-width: 600px; align-items: center"> |
|
|
|
<el-form-item prop="roleName" label="角色名称:" required> |
|
|
|
<el-input v-model="addRole.roleName" placeholder="请输入角色名称" style="width: 220px"/> |
|
|
|
<el-input v-model="addRole.roleName" placeholder="请输入角色名称" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="parentName" label="上级角色:"> |
|
|
|
<el-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists" |
|
|
|
clearable> |
|
|
|
<el-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists" clearable> |
|
|
|
<el-option v-for="item in permissionList" :key="item.value" :label="item.label" |
|
|
|
:value="item.value"></el-option> |
|
|
|
:value="item.value"></el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="market" label="归属地区:" required> |
|
|
|
<el-select v-model="addRole.market" placeholder="请选择归属地区" style="width: 220px" clearable> |
|
|
|
<el-option v-for="item in addRoleMarket" :key="item" :label="item" :value="item"/> |
|
|
|
<el-option v-for="item in addRoleMarket" :key="item" :label="item" :value="item" /> |
|
|
|
</el-select> |
|
|
|
<text>(此地区无实际意义，仅用于各分部负责人查看其地区角色)</text> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="checkedKeys" label="权限列表:" required> |
|
|
|
<el-tree v-if="data.length > 0" :data="data" show-checkbox node-key="id" |
|
|
|
:props="{ label: 'menuName', children: 'children' }" :checked-keys="addRole.checkedKeys" |
|
|
|
:check-strictly="false" @check="handleCheckChange"> |
|
|
|
:props="{ label: 'menuName', children: 'children' }" :checked-keys="addRole.checkedKeys" |
|
|
|
:check-strictly="false" @check="handleCheckChange"> |
|
|
|
<template #default="{ node }"> |
|
|
|
<span>{{ node.label }}</span> |
|
|
|
</template> |
|
|
|
@ -746,9 +743,9 @@ onMounted(async function () { |
|
|
|
<span style="color: #999;">暂无数据</span> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-show="ifHasChannel" label="频道名称:" required> |
|
|
|
<el-form-item v-show="ifHasChannel" label="频道名称:" required> |
|
|
|
<el-select v-model="addRole.channel" placeholder="请选择频道" style="width: 220px" filterable clearable> |
|
|
|
<el-option v-for="item in channelList" :key="item" :label="item" :value="item"/> |
|
|
|
<el-option v-for="item in channelList" :key="item" :label="item" :value="item" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -766,25 +763,25 @@ onMounted(async function () { |
|
|
|
<el-dialog v-model="permissionEditRoleVisible" title="编辑角色" width="800px" :close-on-click-modal="false"> |
|
|
|
<template #footer> |
|
|
|
<el-form ref="Ref" :rules="Rolerules" :model="permissionEditRoleObj" label-width="auto" |
|
|
|
style="max-width: 600px; align-items: center"> |
|
|
|
style="max-width: 600px; align-items: center"> |
|
|
|
<el-form-item prop="roleName" label="角色名称:" required> |
|
|
|
<el-input v-model="permissionEditRoleObj.roleName" placeholder="请输入角色名称" style="width: 220px"/> |
|
|
|
<el-input v-model="permissionEditRoleObj.roleName" placeholder="请输入角色名称" style="width: 220px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="parentName" label="上级角色:"> |
|
|
|
<el-input v-model="permissionEditRoleObj.parentName" placeholder="无上级角色" disabled style="width: 220px"> |
|
|
|
<el-option v-for="item in permissionList" :key="item.value" :label="item.label" |
|
|
|
:value="item.value"></el-option> |
|
|
|
:value="item.value"></el-option> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="market" label="归属地区" required> |
|
|
|
<el-input v-model="permissionEditRoleObj.market" placeholder="请输入归属地区" style="width: 220px" disabled/> |
|
|
|
<el-input v-model="permissionEditRoleObj.market" placeholder="请输入归属地区" style="width: 220px" disabled /> |
|
|
|
<text>(此地区无实际意义，仅用于各分部负责人查看其地区角色)</text> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item prop="checkedKeys" label="权限列表:" required> |
|
|
|
<el-tree v-if="data.length > 0" :data="data" show-checkbox node-key="id" ref="treeRef" |
|
|
|
:props="{ label: 'menuName', children: 'children' }" |
|
|
|
:default-checked-keys="permissionEditRoleObj.checkedKeys" :check-strictly="false" |
|
|
|
@check="handleEditRolePermissionCheck"> |
|
|
|
:props="{ label: 'menuName', children: 'children' }" |
|
|
|
:default-checked-keys="permissionEditRoleObj.checkedKeys" :check-strictly="false" |
|
|
|
@check="handleEditRolePermissionCheck"> |
|
|
|
<!-- <template #default="{ node, data }"> data删掉了，不影响功能 --> |
|
|
|
<template #default="{ node }"> |
|
|
|
<span>{{ node.label }}</span> |
|
|
|
@ -797,7 +794,7 @@ onMounted(async function () { |
|
|
|
|
|
|
|
<el-form-item v-show="ifHasChannel" label="频道名称:" required> |
|
|
|
<el-select v-model="permissionEditRoleObj.channel" placeholder="请选择频道" style="width: 220px" clearable> |
|
|
|
<el-option v-for="item in channelList" :key="item" :label="item" :value="item"/> |
|
|
|
<el-option v-for="item in channelList" :key="item" :label="item" :value="item" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -833,7 +830,7 @@ onMounted(async function () { |
|
|
|
:deep(.el-table__header-wrapper), |
|
|
|
:deep(.el-table__body-wrapper), |
|
|
|
:deep(.el-table__cell), |
|
|
|
/* 表格 */ |
|
|
|
/* 表格 */ |
|
|
|
:deep(.el-table__body td) { |
|
|
|
background-color: #F3FAFE !important; |
|
|
|
} |
|
|
|
|
zhangrenyuan
1 week ago