From 85f537c10aa40041ed0cb5b367302402a1a226ca Mon Sep 17 00:00:00 2001
From: lichx <lchx751176501@gmail.com>
Date: Mon, 30 Dec 2024 12:45:04 +0800
Subject: [PATCH] =?UTF-8?q?[feature]=20=E5=A4=9A=E8=BA=AB=E4=BB=BD?=
=?UTF-8?q?=E5=8A=9F=E8=83=BD=E8=A1=A5=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/base/index.vue | 59 ++++++++++++--
src/pages/borrow/index.vue | 55 ++++++++++++++
src/pages/peopleManage/index.vue | 28 +++++++
.../peopleManage/modules/peopleTable.vue | 76 +++++++++++++++++++
src/pages/record/index.vue | 1 -
src/pages/record/modules/recordTable.vue | 24 +++---
src/pages/return/index.vue | 49 ++++++++++++
src/router/index.ts | 17 +++++
src/store/index.ts | 2 +
src/store/modules/user.ts | 4 +-
src/store/modules/users.ts | 59 ++++++++++++++
11 files changed, 352 insertions(+), 22 deletions(-)
create mode 100644 src/pages/borrow/index.vue
create mode 100644 src/pages/peopleManage/index.vue
create mode 100644 src/pages/peopleManage/modules/peopleTable.vue
create mode 100644 src/pages/return/index.vue
create mode 100644 src/store/modules/users.ts
diff --git a/src/pages/base/index.vue b/src/pages/base/index.vue
index 93fb9a2..7387247 100644
--- a/src/pages/base/index.vue
+++ b/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>   借阅者</span>
</t-tag>
- <t-tag v-if="isAdministrator" shape="round" theme="primary" variant="light-outline" @click="isAdministrator = !isAdministrator">
- <span>   管理员</span>
+ <t-tag v-if="identity === 'admin'" shape="round" theme="primary" variant="light-outline"
+ @click="identity = 'systemAdmin'">
+ <span>   图书管理员</span>
+ </t-tag>
+ <t-tag v-if="identity === 'systemAdmin'" shape="round" theme="primary" variant="light-outline"
+ @click="identity = 'user'">
+ <span>   系统管理员</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>
diff --git a/src/pages/borrow/index.vue b/src/pages/borrow/index.vue
new file mode 100644
index 0000000..3a24d42
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/peopleManage/index.vue b/src/pages/peopleManage/index.vue
new file mode 100644
index 0000000..ab32145
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/peopleManage/modules/peopleTable.vue b/src/pages/peopleManage/modules/peopleTable.vue
new file mode 100644
index 0000000..69e3a1d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/record/index.vue b/src/pages/record/index.vue
index db16d88..b3fa751 100644
--- a/src/pages/record/index.vue
+++ b/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>
diff --git a/src/pages/record/modules/recordTable.vue b/src/pages/record/modules/recordTable.vue
index 0a4f6c2..9ff6fc7 100644
--- a/src/pages/record/modules/recordTable.vue
+++ b/src/pages/record/modules/recordTable.vue
@@ -16,8 +16,7 @@ import {storeToRefs} from "pinia";
},
*/
const data = useRecordStore().infos;
-const {isAdministrator} = storeToRefs(useUserStore());
-console.log(isAdministrator.value)
+const {identity} = storeToRefs(useUserStore());
const columns = ref<TableProps['columns']>([
{
colKey: "title",
@@ -63,19 +62,22 @@ function GetTypeHtml({row: {status}}: { row: { status: string } }) {
}
function GetOperationHtml() {
- if (!isAdministrator.value)
- return <t-button>归还</t-button>
- return <t-button>取消预订</t-button>
+ switch (identity.value) {
+ 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 pagination = ref<TableProps['pagination']>({
- defaultPageSize: 10,
- total: 10,
- defaultCurrent: 1,
-})
+// const defaultDisplayColumns = ref([...configurableColumns.value]);
+// const pagination = ref<TableProps['pagination']>({
+// defaultPageSize: 10,
+// total: 10,
+// defaultCurrent: 1,
+// })
</script>
<template>
diff --git a/src/pages/return/index.vue b/src/pages/return/index.vue
new file mode 100644
index 0000000..69d96b3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 8b743b8..1b8dd7e 100644
--- a/src/router/index.ts
+++ b/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')
}
+
]
}
diff --git a/src/store/index.ts b/src/store/index.ts
index 5ea67d4..8a18d0c 100644
--- a/src/store/index.ts
+++ b/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;
\ No newline at end of file
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 51fe652..663ffdc 100644
--- a/src/store/modules/user.ts
+++ b/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() {
diff --git a/src/store/modules/users.ts b/src/store/modules/users.ts
new file mode 100644
index 0000000..6d9a45b
--- /dev/null
+++ b/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: {}
+})
\ No newline at end of file