114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-row :gutter="10">
|
|
<el-col :span="10" :xs="24">
|
|
<el-card class="box-card" shadow="always">
|
|
<template #header>
|
|
<svg-icon color="#333" icon-class="role"/>
|
|
角色列表
|
|
</template>
|
|
<role ref="role" @roleClick="handleRoleClick"/>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="6" :xs="24">
|
|
<el-card class="box-card" shadow="always">
|
|
<template #header>
|
|
<svg-icon color="#333" icon-class="menu"/>
|
|
<span style="margin:0 5px;">菜单分配</span>
|
|
<el-tag type="success" v-if="role.id" size="small">
|
|
<svg-icon color="green " icon-class="role"/>
|
|
{{ role.name }}
|
|
</el-tag>
|
|
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
|
|
</template>
|
|
<menus ref="menu" @menuClick="handleMenuClick" :role="role"/>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="8" :xs="24">
|
|
<el-card class="box-card" shadow="always">
|
|
<template #header>
|
|
<svg-icon color="#333" icon-class="perm"/>
|
|
<span style="margin:0 5px;">权限分配</span>
|
|
|
|
<el-tag type="success" style="margin:0 5px 0 0;" v-if="role.id" size="small">
|
|
<svg-icon color="green" icon-class="role"/>
|
|
{{ role.name }}
|
|
</el-tag>
|
|
<el-tag type="warning" style="margin:0 5px 0 0;" v-else size="small"> 请选择角色</el-tag>
|
|
|
|
<el-tag type="success" v-if="menu.id" size="small">
|
|
<svg-icon color="red" icon-class="menu"/>
|
|
{{ menu.name }}
|
|
</el-tag>
|
|
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
|
|
</template>
|
|
<perm ref="perm" :menu="menu" :role="role"/>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Role from './components/Role.vue'
|
|
import Menus from './components/Menu.vue'
|
|
import Perm from './components/Perm.vue'
|
|
import {reactive, toRefs} from "vue";
|
|
import {ElMessage} from "element-plus";
|
|
import SvgIcon from '@/components/SvgIcon/index.vue';
|
|
|
|
const state = reactive({
|
|
role: {
|
|
id: undefined,
|
|
name: '',
|
|
},
|
|
menu: {
|
|
id: undefined,
|
|
name: ''
|
|
}
|
|
})
|
|
|
|
const {role,menu} =toRefs(state)
|
|
|
|
function handleRoleClick(roleRow: any) {
|
|
if (roleRow) {
|
|
state.role = {
|
|
id: roleRow.id,
|
|
name: roleRow.name
|
|
}
|
|
} else {
|
|
state.role = {
|
|
id: undefined,
|
|
name: ''
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleMenuClick(menuRow: any) {
|
|
if (!state.role.id) {
|
|
ElMessage.warning('请选择角色')
|
|
return false
|
|
}
|
|
|
|
if (menuRow) {
|
|
state.menu = {
|
|
id: menuRow.id,
|
|
name: menuRow.label
|
|
}
|
|
} else {
|
|
state.menu = {
|
|
id: undefined,
|
|
name: ''
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|