Browse Source

✨ feat(Admin):增加网站管理模块

Pchen. 8 months ago
parent
commit
f372978a2e
2 changed files with 93 additions and 0 deletions
  1. 44 0
      src/pages/Admin/Admin.vue
  2. 49 0
      src/pages/Admin/components/UserList.vue

+ 44 - 0
src/pages/Admin/Admin.vue

@@ -0,0 +1,44 @@
+<template>
+    <Header />
+    <div class="card">
+        <el-tabs v-model="activeName" class="tabs">
+            <el-tab-pane label="用户管理" name="用户管理">
+                <UserList />
+            </el-tab-pane>
+
+        </el-tabs>
+
+    </div>
+    <Footer />
+</template>
+
+<script setup>
+import Header from '../../components/Header.vue';
+import Footer from '../../components/Footer.vue';
+import UserList from './components/UserList.vue';
+
+document.documentElement.scrollTop = 0;
+const activeName = ref('用户管理');
+
+</script>
+
+<style scoped>
+.card {
+    width: 70%;
+    min-height: 70vh;
+    background-color: #fff;
+    margin: 0 auto;
+    padding: 35px;
+    border-radius: 10px;
+}
+
+@media only screen and (max-width: 768px) {
+    .card {
+        width: 95%;
+        min-height: 70vh;
+        background-color: transparent;
+        padding: 0px;
+        border-radius: 0px;
+    }
+}
+</style>

+ 49 - 0
src/pages/Admin/components/UserList.vue

@@ -0,0 +1,49 @@
+<template>
+    <el-table :data="users" style="width: 100%">
+        <el-table-column fixed prop="id" label="ID" width="50" />
+        <el-table-column label="用户名">
+            <template #default="scope">
+                <div style="display: flex; gap: 5px">
+                    <el-avatar :src="scope.row.avatar" :size="25" />
+                    {{ scope.row.username }}
+                </div>
+            </template>
+        </el-table-column>
+        <el-table-column prop="uuid" label="uuid" />
+        <el-table-column prop="wxid" label="企业微信ID" />
+        <el-table-column label="管理员权限">
+            <template #default="scope">
+                <el-tooltip :content="('管理员权限' + (scope.row.manage === 1 ? '开' : '关'))" placement="top">
+                    <el-switch v-model="scope.row.manage"
+                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
+                        :inactive-value="0" @click="SetPermission(scope.row)" />
+                </el-tooltip>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<script setup>
+import { App } from '../../../app/app';
+import { ServerAPI } from '../../../app/lib/ServerAPI';
+
+let users = ref([]);
+
+onMounted(() => {
+    ServerAPI.UserList(App.user.uuid, App.user.session, (r) => {
+        if (r.code == 0) {
+            users.value = r.data;
+        } else {
+            ElMessage.error(`拉取用户列表失败!${r.msg}`);
+        }
+    })
+})
+
+const SetPermission = async function (row) {
+    ServerAPI.SetPermission(App.user.uuid, App.user.session, row.id, row.manage, (r) => {
+        if (!r || r.code !== 0) 
+             return ElMessage.error(`切换失败!${r.msg}`);
+        ElMessage.success((row.manage === 1 ? '开启' : '关闭') + '成功');
+    })
+}
+</script>