角色管理机构管理初始化

This commit is contained in:
高云鹏 2024-06-24 10:12:26 +08:00
parent 3b6959d678
commit ac735f23a8
7 changed files with 220 additions and 0 deletions

View File

@ -0,0 +1,5 @@
export default{
search:'Search',
add:'Add',
'Query roles by name':'Query roles by name',
}

View File

@ -0,0 +1,5 @@
export default{
search:'搜索',
add:'新增',
'Query roles by name':'按名称查询角色',
}

View File

@ -867,6 +867,34 @@ const menu = [
},
],
},
{
id: 91,
pid: 92,
type: 'menu',
title: '角色管理',
name: 'routine\/roleManagement',
path: 'routine\/roleManagement',
icon: 'fa fa-folder',
menu_type: 'tab',
url: '',
component: '\/src\/views\/backend\/RoleManagement\/RoleManagement.vue',
keepalive: 'routine\/roleManagement',
extend: 'none',
},
{
id: 93,
pid: 94,
type: 'menu',
title: '机构管理',
name: 'routine\/institutionalManagement',
path: 'routine\/institutionalManagement',
icon: 'fa fa-folder',
menu_type: 'tab',
url: '',
component: '\/src\/views\/backend\/InstitutionalManagement\/InstitutionalManagement.vue',
keepalive: 'routine\/institutionalManagement',
extend: 'none',
},
],
},
// {

View File

@ -0,0 +1,76 @@
<template>
<div class="instititionalManagement">
<el-container>
<el-aside class="defaultAside">
<el-header class="treeHeader">
<el-input v-model="searchInputTreeValue" :placeholder="treeSearchInputPlaceholder" class="searchInput"></el-input>
</el-header>
<el-main>
<el-tree :data="treeData"></el-tree>
</el-main>
</el-aside>
<el-container>
<el-header class="defaultHeader">
<div class="searchPart">
<el-input class="searchInput"></el-input>
<el-button type="primary" :icon="Search" class="defaultBtn">{{ t('management.search') }}</el-button>
</div>
<el-button type="primary" :icon="Plus" class="defaultBtn">{{ t('management.add') }}</el-button>
</el-header>
<el-main>
<el-table></el-table>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElContainer, ElAside, ElHeader, ElMain, ElInput, ElButton, ElTable, ElTree } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const treeSearchInputPlaceholder = '搜索机构'
const searchInputTreeValue = ref<string>('')
const treeData = ref()
</script>
<style lang="scss" scoped>
@mixin searchInput($value) {
margin-right: $value;
width: 220px;
height: 40px;
}
.instititionalManagement {
.defaultAside {
width: 260px;
.treeHeader {
display: flex;
align-items: center;
justify-content: center;
.searchInput {
@include searchInput(0);
}
}
}
.defaultHeader {
display: flex;
justify-content: space-between;
align-items: center;
.searchPart {
display: flex;
justify-content: space-between;
align-items: center;
}
.defaultBtn {
width: 88px;
height: 40px;
}
.searchInput {
@include searchInput(10px);
}
}
}
</style>

View File

@ -0,0 +1,87 @@
<template>
<div class="roleManagement">
<el-container>
<el-header class="containerHeader">
<div class="searchPart">
<el-input class="searchInput" v-model:value="searchInputValue" :placeholder="searchInputPlacehoder"></el-input>
<el-button type="primary" :icon="Search" class="defaultBtn" @click="searchClick">{{ t('management.search') }}</el-button>
</div>
<el-button type="primary" :icon="Plus" class="defaultBtn" @click="addClick">{{ t('management.add') }}</el-button>
</el-header>
<el-main class="containerMain">
<el-table :data="tableData">
<el-table-column
v-for="item in tableColumn"
:key="item.key"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"
:align="item.align ?? 'center'"
></el-table-column>
</el-table>
</el-main>
</el-container>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElContainer, ElHeader, ElMain, ElInput, ElButton, ElTable, ElTableColumn } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
import { tableDataType, tableColumnType, roleDataEnum, roleTableDataKeyType } from './type'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const searchInputPlacehoder = t('management.Query roles by name')
const searchInputValue = ref<string>('')
const searchClick = () => {
if (!searchInputValue.value) return
}
const tableColumn = ref<tableColumnType<roleTableDataKeyType>[]>([
{
key: '1',
prop: 'roleName',
label: roleDataEnum['roleName'],
},
{
key: '2',
prop: 'roleCode',
label: roleDataEnum['roleCode'],
},
{
key: '3',
prop: 'remark',
label: roleDataEnum['remark'],
},
])
const tableData = ref<tableDataType[]>([])
const addClick = () => {
//
}
</script>
<style scoped lang="scss">
.roleManagement {
width: 100%;
height: 100%;
.containerHeader {
display: flex;
align-items: center;
justify-content: space-between;
.searchInput {
margin-right: 10px;
width: 220px;
height: 40px;
}
.defaultBtn {
width: 88px;
height: 40px;
}
}
.containerMain {
width: 100%;
}
}
</style>

View File

@ -0,0 +1,19 @@
export enum roleDataEnum {
roleName = '角色名称',
roleCode = '角色编码',
remark = '备注',
}
export type roleTableDataKeyType = keyof typeof roleDataEnum
export type tableDataType = {
roleName: string
roleCode: number
remark: string
}
export type tableColumnType<T extends roleTableDataKeyType> = {
key: string
prop: T
label: (typeof roleDataEnum)[T]
fixed?: boolean
align?: 'left' | 'center' | 'right'
}