角色管理机构管理初始化
This commit is contained in:
高云鹏
parent
3b6959d678
commit
ac735f23a8
5
ui/dasadmin/src/lang/common/en/management.ts
Normal file
5
ui/dasadmin/src/lang/common/en/management.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export default{
|
||||||
|
search:'Search',
|
||||||
|
add:'Add',
|
||||||
|
'Query roles by name':'Query roles by name',
|
||||||
|
}
|
||||||
5
ui/dasadmin/src/lang/common/zh-cn/management.ts
Normal file
5
ui/dasadmin/src/lang/common/zh-cn/management.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export default{
|
||||||
|
search:'搜索',
|
||||||
|
add:'新增',
|
||||||
|
'Query roles by name':'按名称查询角色',
|
||||||
|
}
|
||||||
@ -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',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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>
|
||||||
19
ui/dasadmin/src/views/backend/RoleManagement/type.ts
Normal file
19
ui/dasadmin/src/views/backend/RoleManagement/type.ts
Normal 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'
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user