[feature] 身份信息
This commit is contained in:
parent
45ea6b7f76
commit
4e767dfa95
|
@ -3,7 +3,7 @@ import {useUserStore} from "@/store";
|
|||
import {storeToRefs} from "pinia";
|
||||
|
||||
let store = useUserStore();
|
||||
const {user, theme} = storeToRefs(store);
|
||||
const {user, theme,isAdministrator} = storeToRefs(store);
|
||||
|
||||
function changeTheme(newTheme: string) {
|
||||
theme.value = newTheme;
|
||||
|
@ -25,13 +25,21 @@ function changeTheme(newTheme: string) {
|
|||
<div id="info">
|
||||
<p>欢迎回来:{{ user }}</p>
|
||||
</div>
|
||||
<div id="identities">
|
||||
<t-tag v-if="!isAdministrator" shape="round" theme="success" variant="light-outline" @click="isAdministrator = !isAdministrator">
|
||||
<span>   借阅者</span>
|
||||
</t-tag>
|
||||
<t-tag v-if="isAdministrator" shape="round" theme="primary" variant="light-outline" @click="isAdministrator = !isAdministrator">
|
||||
<span>   管理员</span>
|
||||
</t-tag>
|
||||
</div>
|
||||
</div>
|
||||
<template #operations>
|
||||
<t-icon class="t-menu__operations-icon" :name="theme==='light'?'sunny':'moon'"
|
||||
@click="changeTheme(theme==='light'?'dark':'light')"/>
|
||||
<!-- <a href="/#/base/homepage">-->
|
||||
<!-- <t-icon class="t-menu__operations-icon" name="home"/>-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="/#/base/homepage">-->
|
||||
<!-- <t-icon class="t-menu__operations-icon" name="home"/>-->
|
||||
<!-- </a>-->
|
||||
<a href="/#/base/settings">
|
||||
<t-icon class="t-menu__operations-icon" name="setting"/>
|
||||
</a>
|
||||
|
@ -44,12 +52,12 @@ function changeTheme(newTheme: string) {
|
|||
<t-layout>
|
||||
<t-aside id="aside">
|
||||
<t-menu theme="light" default-value="homepage" style="margin-right: 50px">
|
||||
<!-- <t-menu-item value="homepage" :to="'/base/homepage'">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <t-icon name="dashboard"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- 主页-->
|
||||
<!-- </t-menu-item>-->
|
||||
<!-- <t-menu-item value="homepage" :to="'/base/homepage'">-->
|
||||
<!-- <template #icon>-->
|
||||
<!-- <t-icon name="dashboard"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- 主页-->
|
||||
<!-- </t-menu-item>-->
|
||||
<t-menu-item value="list" :to="'/base/list'">
|
||||
<template #icon>
|
||||
<t-icon name="search"/>
|
||||
|
@ -145,6 +153,7 @@ function changeTheme(newTheme: string) {
|
|||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 设置滚动条的宽度和高度 */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
|
|
|
@ -4,6 +4,8 @@ import SuperTable from "@/components/super-table.vue";
|
|||
import type {TableProps} from "tdesign-vue-next";
|
||||
import {ref} from "vue";
|
||||
import {useRecordStore} from "@/store/modules/record.ts";
|
||||
import {useUserStore} from "@/store";
|
||||
import {storeToRefs} from "pinia";
|
||||
|
||||
/*
|
||||
{
|
||||
|
@ -14,6 +16,8 @@ import {useRecordStore} from "@/store/modules/record.ts";
|
|||
},
|
||||
*/
|
||||
const data = useRecordStore().infos;
|
||||
const {isAdministrator} = storeToRefs(useUserStore());
|
||||
console.log(isAdministrator.value)
|
||||
const columns = ref<TableProps['columns']>([
|
||||
{
|
||||
colKey: "title",
|
||||
|
@ -31,6 +35,13 @@ const columns = ref<TableProps['columns']>([
|
|||
colKey: "status",
|
||||
title: "状态",
|
||||
cell: (_, row: any) => GetTypeHtml(row!)
|
||||
},
|
||||
{
|
||||
colKey: "operation",
|
||||
title: "操作",
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
cell: () => GetOperationHtml()
|
||||
}
|
||||
]);
|
||||
|
||||
|
@ -50,6 +61,13 @@ function GetTypeHtml({row: {status}}: { row: { status: string } }) {
|
|||
</t-tag>
|
||||
}
|
||||
}
|
||||
|
||||
function GetOperationHtml() {
|
||||
if (!isAdministrator.value)
|
||||
return <t-button>归还</t-button>
|
||||
return <t-button>取消预订</t-button>
|
||||
}
|
||||
|
||||
const configurableColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
|
||||
const indexColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
|
||||
const defaultDisplayColumns = ref([...configurableColumns.value]);
|
||||
|
@ -61,7 +79,8 @@ const pagination = ref<TableProps['pagination']>({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<super-table :data="data" :columns="columns" :configurable-columns="configurableColumns" :index-columns="indexColumns" />
|
||||
<super-table :data="data" :columns="columns" :configurable-columns="configurableColumns"
|
||||
:index-columns="indexColumns"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
@ -47,10 +47,9 @@ const lightTheme = computed(() => theme.value === 'light');
|
|||
.info {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
background-color: @basic-color;
|
||||
}
|
||||
|
||||
.true-info {
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import {defineStore} from "pinia";
|
||||
|
||||
interface UserState {
|
||||
user:string;
|
||||
user: string;
|
||||
theme: string;
|
||||
isLogin: boolean;
|
||||
isAdministrator: boolean;
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('User', {
|
||||
|
@ -11,6 +12,7 @@ export const useUserStore = defineStore('User', {
|
|||
user: "AlexJR",
|
||||
theme: 'light',
|
||||
isLogin: false,
|
||||
isAdministrator: false
|
||||
}),
|
||||
actions: {
|
||||
async login() {
|
||||
|
|
Loading…
Reference in New Issue