From 3b2fc64298f65d956a92d5b7c66f4b292e3ef0e5 Mon Sep 17 00:00:00 2001
From: xuhaoyang <2661247335@qq.com>
Date: Tue, 13 Aug 2024 20:32:08 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E7=95=8C?=
=?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components.d.ts | 5 +-
src/components/CenterTask.vue | 2 +-
src/router/index.ts | 6 +-
src/views/Notice/ShowNotice.vue | 4 +-
src/views/UserManagement/UserManagement.vue | 222 ++++++++++++++++++++
5 files changed, 233 insertions(+), 6 deletions(-)
create mode 100644 src/views/UserManagement/UserManagement.vue
diff --git a/components.d.ts b/components.d.ts
index c9853f9..27445e1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -21,7 +21,6 @@ declare module 'vue' {
ElCol: typeof import('element-plus/es')['ElCol']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
- ElDialog: typeof import('element-plus/es')['ElDialog']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
@@ -32,6 +31,7 @@ declare module 'vue' {
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
+ ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
@@ -45,9 +45,9 @@ declare module 'vue' {
IEpArrowLeft: typeof import('~icons/ep/arrow-left')['default']
IEpArrowRight: typeof import('~icons/ep/arrow-right')['default']
IEpChatDotRound: typeof import('~icons/ep/chat-dot-round')['default']
- IEpCheck: typeof import('~icons/ep/check')['default']
IEpClose: typeof import('~icons/ep/close')['default']
IEpDocument: typeof import('~icons/ep/document')['default']
+ IEpEdit: typeof import('~icons/ep/edit')['default']
IEpHouse: typeof import('~icons/ep/house')['default']
IEpMessage: typeof import('~icons/ep/message')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
@@ -69,6 +69,7 @@ declare module 'vue' {
UserLoginChange: typeof import('./src/views/Login/components/UserLoginChange.vue')['default']
UserLoginEnrol: typeof import('./src/views/Login/components/UserLoginEnrol.vue')['default']
UserLoginHomepage: typeof import('./src/views/Login/components/UserLoginHomepage.vue')['default']
+ UserManagement: typeof import('./src/views/UserManagement/UserManagement.vue')['default']
WorkInfo: typeof import('./src/views/StuHomework/WorkInfo.vue')['default']
}
}
diff --git a/src/components/CenterTask.vue b/src/components/CenterTask.vue
index 66a5f4a..d7ec203 100644
--- a/src/components/CenterTask.vue
+++ b/src/components/CenterTask.vue
@@ -54,7 +54,7 @@
<span class="menu-text">设置</span>
</div>
</template>
- <el-menu-item index="5-1" class="Item">
+ <el-menu-item index="/UserManagement" class="Item">
<el-icon><i-ep-User /></el-icon>
<span class="menu-text">用户管ç†</span>
</el-menu-item>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9500e16..0586945 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -55,7 +55,11 @@ export const constantRoutes: RouteRecordRaw[] = [
path: 'Homework',
component: () => import('@/views/StuHomework/StuHomework.vue')
},
- { path: 'Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') }
+ { path: 'Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') },
+ {
+ path: 'UserManagement',
+ component: () => import('@/views/UserManagement/UserManagement.vue')
+ }
]
},
{
diff --git a/src/views/Notice/ShowNotice.vue b/src/views/Notice/ShowNotice.vue
index 3746807..f5a9df6 100644
--- a/src/views/Notice/ShowNotice.vue
+++ b/src/views/Notice/ShowNotice.vue
@@ -217,11 +217,11 @@ $divColor: white;
height: 40px;
font-size: large;
}
-::v-deep .el-table__header-wrapper th {
+:deep(.el-table__header-wrapper th) {
background-color: #f0f0f0;
height: 60px;
}
-::v-deep.el-table .el-table__body tr {
+:deep(.el-table .el-table__body tr) {
height: 60px;
}
.bottom-div {
diff --git a/src/views/UserManagement/UserManagement.vue b/src/views/UserManagement/UserManagement.vue
new file mode 100644
index 0000000..227f58e
--- /dev/null
+++ b/src/views/UserManagement/UserManagement.vue
@@ -0,0 +1,222 @@
+<template>
+ <div class="user-management">
+ <div class="top-div">
+ <el-popover placement="bottom" :width="100" trigger="click">
+ <template #reference>
+ <el-button class="batch-edit-button">
+ <el-icon :size="20">
+ <i-ep-edit />
+ </el-icon>
+ 批é‡ç¼–辑用户
+ </el-button>
+ </template>
+ <span style="font-weight: bold">修改角色</span>
+ <el-radio-group v-model="editIdentity">
+ <el-radio value="1" size="large">ä¸å¿ƒè§’色</el-radio>
+ <el-radio value="2" size="large">科技å会</el-radio>
+ </el-radio-group>
+ <hr />
+ <el-button type="danger" size="small">åˆ é™¤è§’è‰²</el-button>
+ </el-popover>
+ </div>
+ <div class="middle-div">
+ <span>å¦å·</span>
+ <div class="student-id">
+ <el-input v-model="studentId" style="width: 170px" placeholder="请输入å¦å·" />
+ </div>
+ <span>姓å</span>
+ <div class="states">
+ <el-input v-model="name" style="width: 170px" placeholder="请输入姓å" />
+ </div>
+ <span>å¹³å°è§’色</span>
+ <div class="identity">
+ <el-select v-model="identity" style="width: 170px">
+ <el-option
+ v-for="item in identities"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ <el-button type="primary" style="width: 80px; margin-right: -10px">æœç´¢</el-button>
+ <el-button type="default" style="width: 80px">é‡ç½®</el-button>
+ </div>
+ <div class="bottom-div">
+ <div class="table">
+ <el-table :data="tableData" style="width: 900px">
+ <el-table-column type="selection" width="30" />
+ <el-table-column prop="studentId" label="å¦å·" width="100" :resizable="false" />
+ <el-table-column prop="name" label="用户姓å" width="110" :resizable="false" />
+ <el-table-column prop="identity" label="å¹³å°è§’色" width="120" :resizable="false" />
+ <el-table-column prop="contact" label="è”系方å¼" width="300" :resizable="false" />
+ <el-table-column prop="recentlyLog" label="最近登录" width="180" :resizable="false" />
+ <el-table-column prop="operation" label="æ“作" width="60">
+ <template #default>
+ <el-popover placement="left" :width="100" trigger="click">
+ <template #reference>
+ <el-button link type="primary" size="small">编辑</el-button>
+ </template>
+ <span style="font-weight: bold">修改角色</span>
+ <el-radio-group v-model="editIdentity">
+ <el-radio value="1" size="large">ä¸å¿ƒè§’色</el-radio>
+ <el-radio value="2" size="large">科技å会</el-radio>
+ </el-radio-group>
+ <hr />
+ <el-button type="danger" size="small">åˆ é™¤è§’è‰²</el-button>
+ </el-popover>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div class="bottom">
+ <el-pagination background layout="prev, pager, next" :total="5" class="page" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+const studentId = ref('');
+const name = ref('');
+const identity = ref('全部');
+const editIdentity = ref('1');
+const identities = [
+ {
+ value: '全部',
+ label: '全部'
+ },
+ {
+ value: 'ä¸å¿ƒè§’色',
+ label: 'ä¸å¿ƒè§’色'
+ },
+ {
+ value: '科技å会',
+ label: '科技å会'
+ }
+];
+const tableData = [
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ },
+ {
+ studentId: '2023xxxx',
+ name: 'xxx',
+ identity: 'ä¸å¿ƒè§’色',
+ contact: '1233456789@qq.com 12345678909',
+ recentlyLog: '2024/05/03 12:00:00'
+ }
+]; //测试数æ®
+</script>
+
+<style lang="scss" scoped>
+.user-management {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ height: 100%;
+ width: 100%;
+}
+.top-div {
+ width: 80%;
+ height: 80px;
+ background-color: white;
+ border-radius: 10px;
+ position: relative;
+ min-width: 900px;
+}
+.middle-div {
+ @extend .top-div;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ span {
+ font-weight: bold;
+ margin-right: -15px;
+ }
+}
+.bottom-div {
+ @extend .top-div;
+ height: 500px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+}
+.batch-edit-button {
+ position: absolute;
+ top: 50%;
+ right: 30px;
+ transform: translateY(-50%);
+ border-radius: 5px;
+}
+.table {
+ border: rgb(246, 248, 251) solid 2px;
+}
+:deep(.el-table__header-wrapper th) {
+ background-color: #f0f0f0;
+ height: 30px;
+ text-align: center;
+}
+:deep(.el-table .el-table__body tr) {
+ height: 30px;
+ text-align: center;
+}
+.bottom {
+ position: relative;
+ width: 100%;
+ height: 30px;
+ .page {
+ position: absolute;
+ bottom: 0;
+ right: 50px;
+ }
+}
+</style>
--
GitLab