feat:修改layout
This commit is contained in:
fangyunong
parent
9ceb97c10c
commit
6830fff764
@ -5,7 +5,11 @@ interface UserListQuery{
|
||||
page:number
|
||||
pageSize:number
|
||||
}
|
||||
export function getUserList(data:UserListQuery){
|
||||
interface UserListReturn{
|
||||
totalCount:number,
|
||||
users:UserRaw[]
|
||||
}
|
||||
export function getUserList(data:UserListQuery):Promise<UserListReturn>{
|
||||
return http({
|
||||
url:"/api/v1/AdminRoleControllers/SearchUserFromRole",
|
||||
method:'POST',
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<n-avatar src="@/assets/images/luolan_avatar.jpg" round :size="45"
|
||||
fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
|
||||
</n-avatar>
|
||||
<p class="username">白盐浊泉</p>
|
||||
<p class="username">{{ userStore.userInfo.userName }}</p>
|
||||
<n-dropdown :options="options" @select="handleSelect">
|
||||
<n-icon :size="16" color="#000" style="cursor: pointer;">
|
||||
<CaretDownOutline />
|
||||
@ -19,8 +19,7 @@
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { removeToken } from '@/utils/auth';
|
||||
|
||||
|
||||
import { useUserStore } from '@/store/user';
|
||||
import {
|
||||
Pencil as EditIcon,
|
||||
LogOutOutline as LogoutIcon,
|
||||
@ -29,6 +28,7 @@ import {
|
||||
} from '@vicons/ionicons5';
|
||||
import { NIcon } from 'naive-ui';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
function renderIcon(icon: Component) {
|
||||
return () => {
|
||||
|
||||
@ -22,6 +22,7 @@ import { storeToRefs } from 'pinia';
|
||||
import { RouterLink } from 'vue-router';
|
||||
const appStore = useAppStore();
|
||||
const activeKey = ref('default');
|
||||
const router = useRouter();
|
||||
const { menuApp } = storeToRefs(appStore);
|
||||
import SvgIcon from '@/components/SvgIcon.vue';
|
||||
const expandIcon = () => {
|
||||
@ -30,7 +31,12 @@ const expandIcon = () => {
|
||||
|
||||
function renderIcon(iconClass: string) {
|
||||
return () => h(SvgIcon, { iconClass, width: '16', height: '16' })
|
||||
};
|
||||
watch(() => router.currentRoute.value, (newName) => {
|
||||
if (newName) {
|
||||
activeKey.value = newName.fullPath as string;
|
||||
}
|
||||
},{ immediate: true });
|
||||
// 后面改成动态的
|
||||
const menuOptions: MenuOption[] = [
|
||||
{
|
||||
@ -44,12 +50,12 @@ const menuOptions: MenuOption[] = [
|
||||
},
|
||||
{ default: () => '概览' }
|
||||
),
|
||||
key: 'default',
|
||||
key: '/layout',
|
||||
icon: renderIcon('mainproject')
|
||||
},
|
||||
{
|
||||
label: '角色管理',
|
||||
key: 'role',
|
||||
key: '/role',
|
||||
icon: renderIcon('mainproject'),
|
||||
children: [
|
||||
{
|
||||
@ -62,14 +68,14 @@ const menuOptions: MenuOption[] = [
|
||||
},
|
||||
{ default: () => '权限分配' }
|
||||
),
|
||||
key: 'role-auth',
|
||||
key: '/layout/role',
|
||||
icon: renderIcon('mainproject')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '系统配置',
|
||||
key: 'system',
|
||||
key: '/system',
|
||||
icon: renderIcon('mainproject'),
|
||||
children: [
|
||||
{
|
||||
@ -82,7 +88,7 @@ const menuOptions: MenuOption[] = [
|
||||
},
|
||||
{ default: () => '菜单管理' }
|
||||
),
|
||||
key: 'system-menu',
|
||||
key: '/layout/menu',
|
||||
icon: renderIcon('mainproject')
|
||||
},
|
||||
{
|
||||
@ -95,7 +101,7 @@ const menuOptions: MenuOption[] = [
|
||||
},
|
||||
{ default: () => '字典配置' }
|
||||
),
|
||||
key: 'system-dict',
|
||||
key: '/layout/dict',
|
||||
icon: renderIcon('mainproject')
|
||||
},
|
||||
{
|
||||
@ -108,7 +114,7 @@ const menuOptions: MenuOption[] = [
|
||||
},
|
||||
{ default: () => '全局参数' }
|
||||
),
|
||||
key: 'system-globalSys',
|
||||
key: '/layout/globalSys',
|
||||
icon: renderIcon('mainproject')
|
||||
}
|
||||
]
|
||||
|
||||
@ -17,8 +17,12 @@
|
||||
<n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
|
||||
:min-height="`${height}px`" />
|
||||
<div class="table-main__pagination">
|
||||
<n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :page-count="data.length"
|
||||
show-size-picker :page-sizes="[10, 20, 30, 40]" />
|
||||
<n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :item-count="data.length"
|
||||
show-size-picker :page-sizes="[10, 20, 30, 40]">
|
||||
<template #prefix="{ itemCount, startIndex }">
|
||||
共 {{ itemCount }} 项
|
||||
</template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -31,48 +35,64 @@ import { DataTableColumns, NButton, useMessage } from 'naive-ui';
|
||||
|
||||
const message = useMessage();
|
||||
const tableMainRef = ref<HTMLElement | null>(null);
|
||||
const roleName = ref('admin');
|
||||
const roleName = ref('');
|
||||
const total = ref(0);
|
||||
const pagination = reactive<PageController>({
|
||||
pageSize: 10,
|
||||
page: 1,
|
||||
});
|
||||
const data = ref([]);
|
||||
const height = ref(null);
|
||||
|
||||
// 列接口数据
|
||||
interface RowData {
|
||||
name: string
|
||||
sex: 'female' | 'male' | 'unknown',
|
||||
address: string
|
||||
}
|
||||
// 类似render - 函数式组件渲染
|
||||
function createColumns({
|
||||
sendMail
|
||||
}: {
|
||||
sendMail: (rowData: RowData) => void
|
||||
}): DataTableColumns<RowData> {
|
||||
sendMail: (rowData: UserRaw) => void
|
||||
}): DataTableColumns<UserRaw> {
|
||||
return [
|
||||
{
|
||||
title: '用户名',
|
||||
key: 'name'
|
||||
key: 'userName'
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
key: 'sex'
|
||||
key: 'sex',
|
||||
render(row: UserRaw) {
|
||||
return h('span', {}, {
|
||||
default: () => `${row.sex || '未知'}`
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
title: '职位',
|
||||
key: 'jobCode',
|
||||
render(row: UserRaw) {
|
||||
return h('span', {}, {
|
||||
default: () => `${row.jobCode || '无职位'}`
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
title: '菜单权限',
|
||||
key: 'menuName',
|
||||
render(row: UserRaw) {
|
||||
return h('span', {}, {
|
||||
default: () => `${row.menuName || '无权限'}`
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render(row) {
|
||||
render(row: UserRaw) {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => sendMail(row)
|
||||
},
|
||||
{ default: () => 'Send Email' }
|
||||
{ default: () => '点击用户' }
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -81,23 +101,19 @@ function createColumns({
|
||||
// 生成表格列
|
||||
const columns = createColumns({
|
||||
sendMail(rowData) {
|
||||
message.error(`我点击了${rowData.name}`);
|
||||
message.error(`我点击了${rowData.userName}`);
|
||||
}
|
||||
})
|
||||
const height = ref(null);
|
||||
const data = Array.from({ length: 10 }).map((_, index) => ({
|
||||
key: index,
|
||||
name: `Edward King ${index}`,
|
||||
sex: 'female',
|
||||
address: `London, Park Lane no. ${index}`
|
||||
}));
|
||||
|
||||
|
||||
const init = async () => {
|
||||
try {
|
||||
const result = await getUserList({
|
||||
const { users, totalCount } = await getUserList({
|
||||
...pagination,
|
||||
roleName: roleName.value
|
||||
});
|
||||
console.log(result, 'result');
|
||||
total.value = totalCount;
|
||||
data.value = users;
|
||||
} catch (error) {
|
||||
message.error(error.message);
|
||||
}
|
||||
|
||||
30
src/vite-env.d.ts
vendored
30
src/vite-env.d.ts
vendored
@ -10,6 +10,32 @@ declare module "@/utils/*";
|
||||
declare module "@/router/*";
|
||||
|
||||
interface PageController {
|
||||
page:number
|
||||
pageSize:number
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
// 用户信息 - 后端返回
|
||||
interface UserRaw {
|
||||
accessFailedCount: number;
|
||||
birthday?: string;
|
||||
concurrencyStamp: string;
|
||||
config?:string;
|
||||
description?:string;
|
||||
email:string;
|
||||
emailConfirmed: boolean;
|
||||
id: string;
|
||||
jobCode?:string;
|
||||
jobName?:string;
|
||||
lockoutEnabled: boolean;
|
||||
lockoutEnd?:string;
|
||||
menuCode?:string;
|
||||
menuName?:string;
|
||||
normalizedEmail: string;
|
||||
normalizedUserName: string;
|
||||
passwordHash: string;
|
||||
phoneNumber?:string;
|
||||
phoneNumberConfirmed: boolean;
|
||||
securityStamp:string;
|
||||
sex?:string;
|
||||
twoFactorEnabled: boolean;
|
||||
userName: string;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user