102 lines
2.5 KiB
Vue
102 lines
2.5 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="menu"/>
|
|
角色列表
|
|
</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="state.role.id" size="small">{{ state.role.name }}</el-tag>
|
|
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
|
|
</template>
|
|
<menus ref="menu" @menuClick="handleMenuClick" :role="state.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="menu"/>
|
|
<span style="margin:0 5px;">权限分配</span>
|
|
<el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
|
|
<el-tag type="warning" v-else size="small"> 请选择角色</el-tag>
|
|
|
|
<el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
|
|
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
|
|
</template>
|
|
<!--<perm ref="perm" :menu="state.menu" :role="state.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 {reactive} 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: ''
|
|
}
|
|
})
|
|
|
|
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.name
|
|
}
|
|
} else {
|
|
state.menu = {
|
|
id: undefined,
|
|
name: ''
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|