[feature] 多身份功能补齐

src/pages/base/index.vue

@@ -3,7 +3,7 @@ import {useUserStore} from "@/store";
 import {storeToRefs} from "pinia";
 
 let store = useUserStore();
-const {user, theme,isAdministrator} = storeToRefs(store);
+const {user, theme, identity} = storeToRefs(store);
 
 function changeTheme(newTheme: string) {
     theme.value = newTheme;
@@ -26,11 +26,17 @@ function changeTheme(newTheme: string) {
                         <p>欢迎回来：{{ user }}</p>
                     </div>
                     <div id="identities">
-                        <t-tag v-if="!isAdministrator" shape="round" theme="success" variant="light-outline" @click="isAdministrator = !isAdministrator">
+                        <t-tag v-if="identity === 'user'" shape="round" theme="success" variant="light-outline"
+                               @click="identity = 'admin'">
                             <span>&nbsp &nbsp借阅者</span>
                         </t-tag>
-                        <t-tag v-if="isAdministrator" shape="round" theme="primary" variant="light-outline" @click="isAdministrator = !isAdministrator">
+                        <t-tag v-if="identity === 'admin'" shape="round" theme="primary" variant="light-outline"
-                            <span>&nbsp &nbsp管理员</span>
+                               @click="identity = 'systemAdmin'">
+                            <span>&nbsp &nbsp图书管理员</span>
+                        </t-tag>
+                        <t-tag v-if="identity === 'systemAdmin'" shape="round" theme="primary" variant="light-outline"
+                               @click="identity = 'user'">
+                            <span>&nbsp &nbsp系统管理员</span>
                         </t-tag>
                     </div>
                 </div>
@@ -58,26 +64,62 @@ function changeTheme(newTheme: string) {
                     <!--                        </template>-->
                     <!--                        主页-->
                     <!--                    </t-menu-item>-->
-                    <t-menu-item value="list" :to="'/base/list'">
+                    <t-menu-item value="list" :to="'/base/list'" v-if="identity === 'user'">
                         <template #icon>
                             <t-icon name="search"/>
                         </template>
                         图书列表
                     </t-menu-item>
                     <t-menu-item value="reservation"
-                                 :to="'/base/reservation'">
+                                 :to="'/base/reservation'" v-if="identity === 'user' || identity==='admin'">
                         <template #icon>
                             <t-icon name="precise-monitor"/>
                         </template>
                         预定列表
                     </t-menu-item>
                     <t-menu-item value="record"
-                                 :to="'/base/record'">
+                                 :to="'/base/record'" v-if="identity === 'user'">
                         <template #icon>
                             <t-icon name="edit-1"/>
                         </template>
                         借阅记录
                     </t-menu-item>
+                    <t-menu-item value="borrow" :to="'/base/borrow'" v-if="identity === 'admin'">
+                        <template #icon>
+                            <t-icon name="search"/>
+                        </template>
+                        借书
+                    </t-menu-item>
+                    <t-menu-item value="return"
+                                 :to="'/base/return'" v-if="identity === 'admin'">
+                        <template #icon>
+                            <t-icon name="precise-monitor"/>
+                        </template>
+                        还书
+                    </t-menu-item>
+
+
+                    <t-menu-item value="peopleManage"
+                                 :to="'/base/people-manage'" v-if="identity === 'systemAdmin'">
+                        <template #icon>
+                            <t-icon name="search"/>
+                        </template>
+                        人员管理
+                    </t-menu-item>
+                    <t-menu-item value="none1"
+                                 :to="'/base/record'" v-if="identity === 'systemAdmin'">
+                        <template #icon>
+                            <t-icon name="edit-1"/>
+                        </template>
+                        图书管理
+                    </t-menu-item>
+                    <t-menu-item value="none2"
+                                 :to="'/base/record'" v-if="identity === 'systemAdmin'">
+                        <template #icon>
+                            <t-icon name="precise-monitor"/>
+                        </template>
+                        修改历史
+                    </t-menu-item>
 
                 </t-menu>
 
@@ -93,7 +135,8 @@ function changeTheme(newTheme: string) {
                         </router-view>
                     </t-content>
 
-                    <t-footer style="text-align: center"> Copyright @ 2024-2024 AlexJR?. All Rights Reserved<br>由TDesign强力驱动
+                    <t-footer style="text-align: center"> Copyright @ 2024-2024 沈嘉瑞 吴肸昊 谢清华 杨可. All Rights
+                        Reserved<br>
                     </t-footer>
                 </t-layout>
             </div>

src/pages/borrow/index.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+import {useUserStore} from "@/store";
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+
+const {theme} = storeToRefs(useUserStore());
+const lightTheme = computed(() => theme.value === 'light');
+</script>
+<template>
+    <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
+        <t-typography-title level="h2">借阅</t-typography-title>
+        <div id="formDiv">
+            <t-form :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}" class="form">
+                <t-form-item label="借阅证号" class="input">
+                    <t-input placeholder="借阅证号"></t-input>
+                </t-form-item>
+                <t-form-item label="图书标识号" class="input">
+                    <t-input placeholder="图书标识号"></t-input>
+                </t-form-item>
+                <t-form-item label="借阅时间" class="input">
+                    <t-input placeholder="借阅时间" suffix="天"></t-input>
+                </t-form-item>
+                <t-form-item  >
+                    <t-button>生成借阅表</t-button>
+                </t-form-item>
+            </t-form>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import '@/index.less';
+
+@basic-color: var(--basic-color);
+.search {
+    background-color: @basic-color;
+}
+
+.form {
+    background-color: @basic-color;
+}
+
+#formDiv {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.input {
+    width: 490px;
+}
+</style>

src/pages/peopleManage/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+import {useUserStore} from "@/store";
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+import PeopleTable from "@/pages/peopleManage/modules/peopleTable.vue";
+
+const {theme} = storeToRefs(useUserStore());
+const lightTheme = computed(() => theme.value === 'light');
+</script>
+<template>
+    <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
+        <div style="display: flex;justify-content: space-between;">
+            <t-input placeholder="请输入书名" style="width: 800px"></t-input>
+            <t-button>新增人员</t-button>
+        </div>
+        <people-table/>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import '@/index.less';
+
+@basic-color: var(--basic-color);
+.search {
+    background-color: @basic-color;
+}
+</style>

src/pages/peopleManage/modules/peopleTable.vue

@@ -0,0 +1,76 @@
+<script setup lang="tsx">
+
+import SuperTable from "@/components/super-table.vue";
+import type {TableProps} from "tdesign-vue-next";
+import {ref} from "vue";
+import {useUsersStore, useUserStore} from "@/store";
+import {storeToRefs} from "pinia";
+
+/*
+    {
+        "id": 10,
+        "name": "郑爽",
+        "type": "图书管理员"
+    }
+ */
+const data = useUsersStore().infos;
+console.log(data)
+const {identity} = storeToRefs(useUserStore());
+const columns = ref<TableProps['columns']>([
+    {
+        colKey: "id",
+        title: "ID",
+    },
+    {
+        colKey: "name",
+        title: "姓名",
+    },
+    {
+        colKey: "type",
+        title: "类型",
+        width: 150,
+        cell: (_, row: any) => GetTypeHtml(row!)
+    },
+    {
+        colKey: "operation",
+        title: "操作",
+        fixed: 'right',
+        width: 200,
+        cell: () => GetOperationHtml()
+    }
+]);
+
+function GetTypeHtml({row: {type}}: { row: { type: string } }) {
+    switch (type) {
+        case '借阅者':
+            return <t-tag shape="round" theme="success" variant="light-outline">
+                <span>借阅者</span>
+            </t-tag>
+        case '图书管理员':
+            return <t-tag shape="round" theme="primary" variant="light-outline">
+                <span>图书管理员</span>
+            </t-tag>
+    }
+}
+
+function GetOperationHtml() {
+    return <div style="display: flex; justify-content: space-around;"><t-button>编辑</t-button><t-button>删除</t-button></div>
+}
+
+const configurableColumns = ref(['id', 'name', 'type', 'operation']);
+const indexColumns = ref([...configurableColumns.value]);
+// const defaultDisplayColumns = ref([...configurableColumns.value]);
+// const pagination = ref<TableProps['pagination']>({
+//     defaultPageSize: 10,
+//     total: 10,
+//     defaultCurrent: 1,
+// })
+</script>
+
+<template>
+    <super-table :data="data" :columns="columns" :configurable-columns="configurableColumns"
+                 :index-columns="indexColumns"/>
+</template>
+
+<style scoped>
+</style>

src/pages/record/index.vue

@@ -12,7 +12,6 @@ const lightTheme = computed(() => theme.value === 'light');
     <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
         <t-input placeholder="请输入书名"></t-input>
         <record-table/>
-<!--        <borrow/>-->
     </div>
 </template>
 

src/pages/record/modules/recordTable.vue

@@ -16,8 +16,7 @@ import {storeToRefs} from "pinia";
             },
  */
 const data = useRecordStore().infos;
-const {isAdministrator} = storeToRefs(useUserStore());
+const {identity} = storeToRefs(useUserStore());
-console.log(isAdministrator.value)
 const columns = ref<TableProps['columns']>([
     {
         colKey: "title",
@@ -63,19 +62,22 @@ function GetTypeHtml({row: {status}}: { row: { status: string } }) {
 }
 
 function GetOperationHtml() {
-    if (!isAdministrator.value)
+    switch (identity.value) {
-        return <t-button>归还</t-button>
+        case 'user':
+            return <t-button>续借</t-button>
+        case 'admin':
             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]);
+// const defaultDisplayColumns = ref([...configurableColumns.value]);
-const pagination = ref<TableProps['pagination']>({
+// const pagination = ref<TableProps['pagination']>({
-    defaultPageSize: 10,
+//     defaultPageSize: 10,
-    total: 10,
+//     total: 10,
-    defaultCurrent: 1,
+//     defaultCurrent: 1,
-})
+// })
 </script>
 
 <template>

src/pages/return/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+
+import {useUserStore} from "@/store";
+import {storeToRefs} from "pinia";
+import {computed} from "vue";
+
+const {theme} = storeToRefs(useUserStore());
+const lightTheme = computed(() => theme.value === 'light');
+</script>
+<template>
+    <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
+        <t-typography-title level="h2">归还</t-typography-title>
+        <div id="formDiv">
+            <t-form :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}" class="form">
+                <t-form-item label="图书标识号" class="input">
+                    <t-input placeholder="图书标识号"></t-input>
+                </t-form-item>
+                <t-form-item  >
+                    <t-button>还书检验</t-button>
+                </t-form-item>
+            </t-form>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import '@/index.less';
+
+@basic-color: var(--basic-color);
+.search {
+    background-color: @basic-color;
+}
+
+.form {
+    background-color: @basic-color;
+}
+
+#formDiv {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.input {
+    width: 490px;
+}
+</style>

src/router/index.ts

@@ -1,5 +1,6 @@
 import {createRouter, createWebHashHistory} from "vue-router";
 import type {RouteRecordRaw} from "vue-router";
+
 const defaultRouterList: Array<RouteRecordRaw> = [
     {
         path: '/',
@@ -34,7 +35,23 @@ const defaultRouterList: Array<RouteRecordRaw> = [
                 path: 'settings',
                 name: 'settings',
                 component: () => import('@/pages/settings/index.vue'),
+            },
+            {
+                path: 'borrow',
+                name: 'borrow',
+                component: () => import('@/pages/borrow/index.vue'),
+            },
+            {
+                path: 'return',
+                name: 'return',
+                component: () => import('@/pages/return/index.vue')
+            },
+            {
+                path: 'people-manage',
+                name: 'people-manage',
+                component: () => import('@/pages/peopleManage/index.vue')
             }
+
         ]
     }
 

src/store/index.ts

@@ -3,6 +3,8 @@ const store = createPinia();
 
 export * from './modules/user';
 export * from './modules/list';
+export  * from './modules/record';
+export * from './modules/users';
 export {store};
 
 export default store;

src/store/modules/user.ts

@@ -4,7 +4,7 @@ interface UserState {
     user: string;
     theme: string;
     isLogin: boolean;
-    isAdministrator: boolean;
+    identity: 'admin' | 'user' | 'systemAdmin';
 }
 
 export const useUserStore = defineStore('User', {
@@ -12,7 +12,7 @@ export const useUserStore = defineStore('User', {
         user: "AlexJR",
         theme: 'light',
         isLogin: false,
-        isAdministrator: false
+        identity: 'user',
     }),
     actions: {
         async login() {

src/store/modules/users.ts

@@ -0,0 +1,59 @@
+import {defineStore} from "pinia";
+
+export const useUsersStore = defineStore('Users', {
+    state: () => ({
+        infos: [
+            {
+                "id": 1,
+                "name": "张伟",
+                "type": "借阅者"
+            },
+            {
+                "id": 2,
+                "name": "李娜",
+                "type": "图书管理员"
+            },
+            {
+                "id": 3,
+                "name": "王强",
+                "type": "借阅者"
+            },
+            {
+                "id": 4,
+                "name": "赵敏",
+                "type": "图书管理员"
+            },
+            {
+                "id": 5,
+                "name": "刘洋",
+                "type": "借阅者"
+            },
+            {
+                "id": 6,
+                "name": "陈杰",
+                "type": "借阅者"
+            },
+            {
+                "id": 7,
+                "name": "孙丽",
+                "type": "图书管理员"
+            },
+            {
+                "id": 8,
+                "name": "周华",
+                "type": "借阅者"
+            },
+            {
+                "id": 9,
+                "name": "吴敏",
+                "type": "借阅者"
+            },
+            {
+                "id": 10,
+                "name": "郑爽",
+                "type": "图书管理员"
+            }
+        ]
+    }),
+    actions: {}
+})