mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
384 lines
10 KiB
Vue
384 lines
10 KiB
Vue
<template>
|
|
<div class="role">
|
|
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
|
|
|
<div class="content-table">
|
|
<ComTable
|
|
:columns="columns"
|
|
:table-data="tableData"
|
|
@handlePagesizeChange="handlePagesizeChange"
|
|
ref="comTable"
|
|
:table-option="tableOption"
|
|
:page-option="pageOption"
|
|
>
|
|
<template #is_open="record">
|
|
<!-- 0:禁用; 1:启用 -->
|
|
<a-tag :color="record.is_open == 0 ? 'red' : 'green'">{{
|
|
record.is_open == 0 ? '禁用' : '启用'
|
|
}}</a-tag>
|
|
</template>
|
|
<template #permission="record">
|
|
<!-- 0:禁用; 1:启用 -->
|
|
<span>{{ record.permission.map((item) => item.name).toString() }}</span>
|
|
</template>
|
|
|
|
<template #action="record">
|
|
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
|
</template>
|
|
</ComTable>
|
|
</div>
|
|
<a-modal
|
|
v-model:open="formModal"
|
|
width="950px"
|
|
style="top: 80px"
|
|
:footer="null"
|
|
:destroy-on-close="true"
|
|
>
|
|
<!-- action:edit add -->
|
|
<EditCom
|
|
:show-flag="formModal"
|
|
:record="record"
|
|
@operateForm="operateForm"
|
|
type="role"
|
|
:action="formStatus"
|
|
></EditCom>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { columnList, roleOptions } from '../../../public/config/columnList'
|
|
import { getReq, postReq } from '@/request/api.js'
|
|
import ComTable from '@/components/ComTable'
|
|
import OperateCom from '@/components/OperateCom'
|
|
import EditCom from '@/components/EditCom.vue'
|
|
import { ConsoleSqlOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
|
import { createVNode } from 'vue'
|
|
|
|
import searchBox from '@/components/SearchBox.vue'
|
|
export default {
|
|
name: '',
|
|
components: {
|
|
searchBox,
|
|
EditCom,
|
|
ComTable,
|
|
OperateCom
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
tableData:[],
|
|
|
|
formModal: false,
|
|
formState: {},
|
|
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
|
pageOption: {
|
|
pageSize: 10,
|
|
page: 1
|
|
},
|
|
btnOptionList: [],
|
|
paramsDate: {},
|
|
tableOption: {
|
|
select: false
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
created() {
|
|
let info = []
|
|
let col = columnList.find((i) => i.page == 'role').columns
|
|
if (col.length) {
|
|
col.forEach((item) => {
|
|
info.push(this.$setWidth(item))
|
|
})
|
|
}
|
|
this.columns = info
|
|
},
|
|
|
|
mounted() {
|
|
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
|
this.btnOptionList = this.$getBtns(['新增'])
|
|
this.getList()
|
|
},
|
|
|
|
methods: {
|
|
async getList() {
|
|
this.$refs.comTable.loading = true
|
|
|
|
const { page, pageSize } = this.pageOption
|
|
|
|
const params = {
|
|
...this.paramsDate,
|
|
page_size: pageSize,
|
|
page
|
|
}
|
|
|
|
try {
|
|
const res = await getReq('/queryRoleList', params)
|
|
if (res.errcode === 0) {
|
|
this.$refs.comTable.loading = false
|
|
|
|
this.tableData = res.data
|
|
|
|
this.pageOption = {
|
|
page: res.page,
|
|
pageSize: res.page_size,
|
|
count: res.count
|
|
}
|
|
} else {
|
|
const err = { tip: res.errmsg }
|
|
throw err
|
|
}
|
|
} catch (error) {
|
|
this.$refs.comTable.loading = false
|
|
|
|
//统一处理报错提示
|
|
}
|
|
},
|
|
mergePermissionData(routeData, permissionData) {
|
|
// 创建权限ID快速索引
|
|
const permissionMap = new Map()
|
|
|
|
// 构建权限配置映射表（含子权限处理）
|
|
const flattenPermissions = (data) => {
|
|
data.forEach((item) => {
|
|
// 初始化权限项的默认值（关键修改）
|
|
const permissionItem = {
|
|
...item,
|
|
key: item.permission_id,
|
|
is_add: Boolean(+item.is_add) || false,
|
|
is_del: Boolean(+item.is_del) || false,
|
|
is_edit: Boolean(+item.is_edit) || false,
|
|
is_view: Boolean(+item.is_view) || false,
|
|
// 确保子权限容器存在
|
|
children: item.children ? [...item.children] : []
|
|
}
|
|
|
|
permissionMap.set(item.permission_id, permissionItem)
|
|
|
|
// 递归处理子权限
|
|
if (item.children?.length) {
|
|
flattenPermissions(item.children)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 初始化扁平化处理
|
|
flattenPermissions(permissionData)
|
|
|
|
// 递归构建合并后的树形结构
|
|
const buildTree = (data) => {
|
|
return data
|
|
.map((routeItem) => {
|
|
const permissionItem = permissionMap.get(routeItem.permission_id) || {
|
|
key: routeItem.permission_id,
|
|
is_add: false,
|
|
is_del: false,
|
|
is_edit: false,
|
|
is_view: false
|
|
}
|
|
|
|
// 基础合并：路由结构+权限配置
|
|
const mergedItem = {
|
|
...routeItem,
|
|
...permissionItem,
|
|
// 初始化子权限容器
|
|
children: routeItem.children ? buildTree(routeItem.children) : []
|
|
}
|
|
|
|
// 特殊处理：父级权限的联动计算
|
|
this.calculateParentPermissions(mergedItem)
|
|
|
|
return mergedItem
|
|
})
|
|
.filter(Boolean) // 过滤无效节点
|
|
}
|
|
|
|
return buildTree(routeData)
|
|
},
|
|
calculateParentPermissions(node) {
|
|
if (node.children?.length) {
|
|
node.is_view = node.children.some((child) => child.is_view === '1') ? true : false
|
|
node.is_add = node.children.some((child) => child.is_add === '1') ? true : false
|
|
node.is_edit = node.children.some((child) => child.is_edit === '1') ? true : false
|
|
node.is_del = node.children.some((child) => child.is_del === '1') ? true : false
|
|
}
|
|
},
|
|
async getPermissionList() {
|
|
let arr = []
|
|
const res = await getReq('/queryPermissionList', { page_size: 1000, page: 1 })
|
|
|
|
if (res.errcode === 0) {
|
|
arr = res.data
|
|
|
|
// const permissionData = JSON.parse(localStorage.getItem('permission'));
|
|
// const permissionData = res.data
|
|
|
|
// arr = permissionData.map((item) => ({
|
|
// ...item,
|
|
// key: item.permission_id,
|
|
|
|
// // 转换操作权限为布尔值
|
|
// ...this.getPerOperBoolean(item),
|
|
// // 递归处理children
|
|
// children: item.children
|
|
// ? item.children.map((child) => ({
|
|
// ...child,
|
|
// ...this.getPerOperBoolean(child),
|
|
// key: child.permission_id,
|
|
// // 继续递归处理子项
|
|
// children: child.children
|
|
// ? child.children.map((grandchild) => ({
|
|
// ...grandchild,
|
|
// ...this.getPerOperBoolean(grandchild)
|
|
// }))
|
|
// : []
|
|
// }))
|
|
// : []
|
|
// }))
|
|
}
|
|
|
|
return arr
|
|
},
|
|
|
|
// 新增专用方法处理操作权限转换
|
|
getPerOperBoolean(data) {
|
|
return {
|
|
is_add: data ? Boolean(+data.is_add) : false,
|
|
is_del: data ? Boolean(+data.is_del) : false,
|
|
is_edit: data ? Boolean(+data.is_edit) : false,
|
|
is_view: data ? Boolean(+data.is_view) : false
|
|
}
|
|
},
|
|
operateForm(type, record = {}) {
|
|
this.formStatus = type
|
|
switch (type) {
|
|
case 'add':
|
|
this.formState = {}
|
|
this.getRuleFormInfo()
|
|
|
|
break
|
|
case 'edit':
|
|
case 'read':
|
|
this.formState = record
|
|
this.getRuleFormInfo(record)
|
|
break
|
|
|
|
case 'del':
|
|
this.handleDelete([record.role_id], this.getList)
|
|
|
|
break
|
|
|
|
case 'back':
|
|
this.formModal = false
|
|
this.getList()
|
|
break
|
|
|
|
default:
|
|
break
|
|
}
|
|
},
|
|
// 删除操作
|
|
async handleDelete(id, callback) {
|
|
const that = this
|
|
this.$Modal.confirm({
|
|
title: '你确认删除数据吗?',
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
|
|
async onOk() {
|
|
try {
|
|
const res = await getReq('/deleteRole', { role_id: id })
|
|
if (res.errcode === 0) {
|
|
this.$message.success(res.errmsg)
|
|
this.pageOption.page = 1
|
|
callback()
|
|
} else {
|
|
throw res
|
|
}
|
|
} catch (error) {
|
|
callback()
|
|
}
|
|
},
|
|
onCancel() {},
|
|
class: 'test'
|
|
})
|
|
},
|
|
async getRuleFormInfo(record) {
|
|
function getInfo(data, url) {
|
|
return new Promise((reslove, reject) => {
|
|
getReq(data, url).then((res) => {
|
|
reslove(res.data)
|
|
})
|
|
})
|
|
}
|
|
|
|
let row = {}
|
|
if (record && record.role_id) {
|
|
this.record = record
|
|
row = record
|
|
}
|
|
const perList = await this.getPermissionList()
|
|
this.processedData = this.mergePermissionData(
|
|
perList,
|
|
record && record.permission.length ? record.permission : []
|
|
)
|
|
const newData = JSON.parse(JSON.stringify(this.processedData))
|
|
|
|
roleOptions.forEach((e, index) => {
|
|
e.list.forEach((i) => {
|
|
if (i.key == 'permission') {
|
|
i.tableData = newData
|
|
if (record && record.role_id) {
|
|
i.selectTableData = this.extractAllIds(record.permission)
|
|
} else {
|
|
i.selectTableData = []
|
|
}
|
|
} else {
|
|
e.ruleForm[i.key] = row ? row[i.key] : ''
|
|
}
|
|
})
|
|
})
|
|
this.formModal = true
|
|
},
|
|
// 定义提取所有ID的函数
|
|
extractAllIds(treeData) {
|
|
const idSet = new Set()
|
|
|
|
// 递归遍历函数
|
|
const traverse = (node) => {
|
|
// 添加当前节点ID
|
|
if (node.permission_id) {
|
|
idSet.add(node.permission_id)
|
|
}
|
|
|
|
// 递归处理子节点
|
|
if (node.children && node.children.length > 0) {
|
|
node.children.forEach((child) => traverse(child))
|
|
}
|
|
}
|
|
|
|
// 处理所有根节点
|
|
treeData.forEach((node) => traverse(node))
|
|
|
|
return Array.from(idSet)
|
|
},
|
|
handlePagesizeChange(pageOption) {
|
|
this.pageOption.pageSize = pageOption.pageSize
|
|
this.pageOption.page = pageOption.page
|
|
this.getList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.role {
|
|
height: 100%;
|
|
|
|
padding: 0 20px;
|
|
.content-table {
|
|
height: calc(100% - 92px);
|
|
}
|
|
}
|
|
</style>
|