|
|
@@ -5,7 +5,7 @@ meta:
|
|
|
|
|
|
<script lang="ts" setup name="AppRolePermit">
|
|
|
import Permit from './components/Permit.vue'
|
|
|
-import { getAppPermitByList } from '@/api/apps/appPermitApi'
|
|
|
+import { getAppPermitListById } from '@/api/apps/appPermitApi'
|
|
|
import { getRoleByList } from '@/api/system/roleApi'
|
|
|
import useSettingsStore from '@/store/modules/settings'
|
|
|
|
|
|
@@ -20,7 +20,7 @@ interface TreeNode {
|
|
|
label: string
|
|
|
roleId: number
|
|
|
isLeaf: boolean
|
|
|
- children?: TreeNode[]
|
|
|
+ children?: any[]
|
|
|
}
|
|
|
|
|
|
const state = reactive({
|
|
|
@@ -28,6 +28,7 @@ const state = reactive({
|
|
|
curRoleId: 0,
|
|
|
roles: [] as TreeNode[],
|
|
|
permitList: [],
|
|
|
+ permitTreeData: [] as any[],
|
|
|
search: {
|
|
|
appId,
|
|
|
roleId: 0,
|
|
|
@@ -37,15 +38,31 @@ const state = reactive({
|
|
|
|
|
|
const roleTreeRef = ref()
|
|
|
|
|
|
+function tranListToTreeData(list: any[], rootValue: number): any[] {
|
|
|
+ const arr: any[] = []
|
|
|
+ list.forEach((item) => {
|
|
|
+ if (item.parentId === rootValue) {
|
|
|
+ // 找到之后 就要去找 item 下面有没有子节点
|
|
|
+ const children = tranListToTreeData(list, item.permitId)
|
|
|
+ if (children.length) {
|
|
|
+ // 如果children的长度大于0 说明找到了子节点
|
|
|
+ item.children = children
|
|
|
+ }
|
|
|
+ arr.push(item) // 将内容加入到数组中
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+}
|
|
|
+
|
|
|
// 查询Permit列表
|
|
|
-const getPermitData = async () => {
|
|
|
+const getAppRolePermitData = async () => {
|
|
|
const curRoleId = state.curRoleId
|
|
|
if (curRoleId > 0) {
|
|
|
- state.search.roleId = curRoleId
|
|
|
state.loading = true
|
|
|
- const { data } = await getAppPermitByList(state.search)
|
|
|
+ const { data } = await getAppPermitListById(appId, state.curRoleId)
|
|
|
state.loading = false
|
|
|
state.permitList = data
|
|
|
+ state.permitTreeData = tranListToTreeData(data, 0)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -55,7 +72,7 @@ const getRoleData = async () => {
|
|
|
const { data } = await getRoleByList({})
|
|
|
if (data && data.length > 0) {
|
|
|
state.curRoleId = data[0].roleId
|
|
|
- await getPermitData()
|
|
|
+ await getAppRolePermitData()
|
|
|
const children: TreeNode[] = []
|
|
|
data.forEach((item: any) => {
|
|
|
return children.push({
|
|
|
@@ -80,48 +97,58 @@ const getRoleData = async () => {
|
|
|
|
|
|
const onTreeNodeClick = async (node: TreeNode) => {
|
|
|
state.curRoleId = node.roleId
|
|
|
- await getPermitData()
|
|
|
+ await getAppRolePermitData()
|
|
|
}
|
|
|
+
|
|
|
const permitTableRef = ref()
|
|
|
const permitRef = ref()
|
|
|
|
|
|
const onPermitAdd = () => {
|
|
|
permitRef.value.showAddModel(appId, state.curRoleId)
|
|
|
}
|
|
|
-// 返回列表页
|
|
|
-function goBack() {
|
|
|
- if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
|
|
|
- tabbar.close({ name: 'appStore' })
|
|
|
- }
|
|
|
- else {
|
|
|
- router.push({ name: 'appStore' })
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
const onAddSub = (row: any) => {
|
|
|
window.console.log(row)
|
|
|
}
|
|
|
+
|
|
|
const onEdit = (row: { appId: any; roleId: any; permitId: any }) => {
|
|
|
const { appId, roleId, permitId } = row
|
|
|
permitRef.value.showEditModel(appId, roleId, permitId)
|
|
|
}
|
|
|
+
|
|
|
const onDelete = (row: any) => {
|
|
|
window.console.log(row)
|
|
|
}
|
|
|
+
|
|
|
const onUp = (row: any) => {
|
|
|
window.console.log(row)
|
|
|
}
|
|
|
const onDown = (row: any) => {
|
|
|
window.console.log(row)
|
|
|
}
|
|
|
+
|
|
|
// 组件处理成功回调
|
|
|
const onSuccess = () => {
|
|
|
+ getAppRolePermitData()
|
|
|
+}
|
|
|
|
|
|
+const onSearch = () => {
|
|
|
+ getAppRolePermitData()
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
getRoleData()
|
|
|
})
|
|
|
+
|
|
|
+// 返回列表页
|
|
|
+function goBack() {
|
|
|
+ if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
|
|
|
+ tabbar.close({ name: 'appStore' })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ router.push({ name: 'appStore' })
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -138,7 +165,7 @@ onMounted(() => {
|
|
|
</page-header>
|
|
|
|
|
|
<div class="page-main">
|
|
|
- <LayoutContainer hide-left-side-toggle>
|
|
|
+ <LayoutContainer left-side-width="250px" hide-left-side-toggle>
|
|
|
<template #leftSide>
|
|
|
<el-scrollbar class="tree">
|
|
|
<ElTree ref="roleTreeRef" :data="state.roles" default-expand-all node-key="roleId" @node-click="onTreeNodeClick">
|
|
|
@@ -146,7 +173,7 @@ onMounted(() => {
|
|
|
<div class="custom-tree-node">
|
|
|
<div class="label" :title="node.label">
|
|
|
<el-icon v-if="data.isLeaf" size="16px" style="margin-right: 5px;">
|
|
|
- <svg-icon name="uim:box" />
|
|
|
+ <svg-icon name="ep:avatar" />
|
|
|
</el-icon>
|
|
|
<div class="text">
|
|
|
{{ data.label }}
|
|
|
@@ -161,8 +188,8 @@ onMounted(() => {
|
|
|
<div class="container">
|
|
|
<tool-bar>
|
|
|
<template #right>
|
|
|
- <el-input v-model="state.search.keywords" placeholder="请输入关键词筛选字典项" clearable style="width: 200px;" />
|
|
|
- <el-button style="margin-left: 10px;" @click="getPermitData">
|
|
|
+ <el-input v-model="state.search.keywords" placeholder="请输入关键词筛选" clearable style="width: 200px;" />
|
|
|
+ <el-button style="margin-left: 10px;" @click="onSearch">
|
|
|
<template #icon>
|
|
|
<el-icon>
|
|
|
<svg-icon name="i-ep:search" />
|
|
|
@@ -179,17 +206,20 @@ onMounted(() => {
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</tool-bar>
|
|
|
- <el-table ref="permitTableRef" v-loading="state.loading" class="list-table" :data="state.permitList" border stripe highlight-current-row height="100%">
|
|
|
- <el-table-column type="selection" width="50" align="center" />
|
|
|
+ <el-table
|
|
|
+ ref="permitTableRef"
|
|
|
+ v-loading="state.loading"
|
|
|
+ class="list-table"
|
|
|
+ :data="state.permitTreeData"
|
|
|
+ row-key="permitId"
|
|
|
+ default-expand-all
|
|
|
+ size="small"
|
|
|
+ border stripe highlight-current-row
|
|
|
+ height="100%"
|
|
|
+ >
|
|
|
<el-table-column type="index" align="center" label="序号" width="70" />
|
|
|
|
|
|
- <el-table-column label="权限ID" width="100px">
|
|
|
- <template #default="{ row }">
|
|
|
- <span>{{ row.permitId }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="权限名称" width="200px">
|
|
|
+ <el-table-column label="权限名称" width="250px">
|
|
|
<template #default="{ row }">
|
|
|
<span>{{ row.permitTitle }}</span>
|
|
|
</template>
|
|
|
@@ -201,9 +231,10 @@ onMounted(() => {
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="默认" header-align="center" align="center" width="80">
|
|
|
+ <el-table-column label="类型" header-align="center" align="center" width="80">
|
|
|
<template #default="{ row }">
|
|
|
- <span>{{ row.isHome }}</span>
|
|
|
+ <span v-if="row.permitType === 0"><el-tag>分组</el-tag></span>
|
|
|
+ <span v-else><el-tag>权限</el-tag></span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
@@ -219,19 +250,17 @@ onMounted(() => {
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column label="操作" width="400" header-align="center" align="right">
|
|
|
+ <el-table-column label="操作" width="160" header-align="center" align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <el-button v-if="row.permitType === 0" size="small" type="primary" icon="el-icon-plus" @click="onAddSub(row)">
|
|
|
+ <el-button v-if="row.permitType === 0" size="small" type="primary" @click="onAddSub(row)">
|
|
|
添加
|
|
|
</el-button>
|
|
|
- <el-button size="small" type="success" icon="el-icon-edit" @click="onEdit(row)">
|
|
|
+ <el-button size="small" type="success" @click="onEdit(row)">
|
|
|
修改
|
|
|
</el-button>
|
|
|
- <el-button size="small" type="danger" icon="el-icon-delete" @click="onDelete(row)">
|
|
|
+ <el-button size="small" type="danger" @click="onDelete(row)">
|
|
|
删除
|
|
|
</el-button>
|
|
|
- <el-button size="small" type="info" icon="el-icon-top" @click="onUp(row)" />
|
|
|
- <el-button size="small" type="info" icon="el-icon-bottom" @click="onDown(row)" />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -243,13 +272,11 @@ onMounted(() => {
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.container {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
.absolute-container {
|
|
|
+ .page-header {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
:deep(.left-side) {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|