feat: ✨新增【用户-管理员】功能

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tsdd-control",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "scripts": {
     "dev": "cross-env APP_ENV=dev vite",
     "build": "cross-env APP_ENV=prod vite build",

src/api/user.ts

@@ -52,3 +52,29 @@ export function userLiftbanPut(params: any) {
     method: 'put'
   });
 }
+
+// 管理员-列表
+export function adminList() {
+  return request({
+    url: `manager/user/admin`,
+    method: 'get'
+  });
+}
+
+// 管理员-新增
+export function adminAdd(data: any) {
+  return request({
+    url: `manager/user/admin`,
+    method: 'post',
+    data
+  });
+}
+
+// 管理员-删除
+export function adminDelete(data: any) {
+  return request({
+    url: `manager/user/admin`,
+    method: 'delete',
+    data
+  });
+}

src/menu/modules/user.ts

@@ -32,7 +32,7 @@ const home: Menu.MenuOptions = {
       name: 'userUserlist',
       path: '/user/userlist',
       meta: {
-        icon: 'i-bd-every-user',
+        icon: 'i-bd-user',
         isAffix: false,
         isFull: false,
         isHide: false,
@@ -54,6 +54,20 @@ const home: Menu.MenuOptions = {
         isLink: '',
         title: '封禁用户列表'
       }
+    },
+    {
+      component: '/user/administrator',
+      name: 'userAdministrator',
+      path: '/user/administrator',
+      meta: {
+        icon: 'i-bd-user-business',
+        isAffix: false,
+        isFull: false,
+        isHide: false,
+        isKeepAlive: true,
+        isLink: '',
+        title: '管理员'
+      }
     }
   ]
 };

src/pages/user/administrator/components/AdminAdd.vue

@@ -0,0 +1,110 @@
+<script lang="tsx" name="AdminAdd" setup>
+// API 接口
+import { adminAdd } from '@/api/user';
+import { ElMessage } from 'element-plus';
+import type { FormRules, FormInstance } from 'element-plus';
+
+interface IProps {
+  value: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  value: false
+});
+
+const emits = defineEmits<{
+  (e: 'update:value', item: boolean): void;
+  (e: 'ok', item: any): void;
+}>();
+
+watch(
+  () => props.value,
+  (n, _o) => {
+    props.value = n;
+    if (!n) {
+      formRef.value?.resetFields();
+    }
+  }
+);
+
+interface IFrom {
+  name: string;
+  login_name: string;
+  password: string;
+}
+
+const loaging = ref<boolean>(false);
+const formRef = ref<FormInstance>();
+const formData = reactive<IFrom>({
+  name: '',
+  login_name: '',
+  password: ''
+});
+
+const formRule = reactive<FormRules<IFrom>>({
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+  login_name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+});
+
+// 取消
+const onClose = () => {
+  emits('update:value', false);
+};
+
+// 确定
+const onSubmit = () => {
+  formRef.value?.validate((valid, _fields) => {
+    if (valid) {
+      loaging.value = true;
+      adminAdd(formData)
+        .then(res => {
+          loaging.value = false;
+          if (res.status == 200) {
+            ElMessage.success('新增成功！');
+            onClose();
+            emits('ok', true);
+          }
+        })
+        .catch(err => {
+          loaging.value = false;
+          if (err.status == 400) {
+            ElMessage.error(err.msg);
+          }
+        });
+    }
+  });
+};
+</script>
+
+<template>
+  <el-dialog
+    :model-value="value"
+    :width="460"
+    :align-center="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :draggable="true"
+    :z-index="99"
+    title="新增管理员"
+    @close="onClose"
+  >
+    <el-form ref="formRef" :model="formData" :rules="formRule">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="账号" prop="login_name">
+        <el-input v-model="formData.login_name" placeholder="请输入账号" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-space>
+        <el-button @click="onClose">取消</el-button>
+        <el-button type="primary" :loading="loaging" @click="onSubmit">确定</el-button>
+      </el-space>
+    </template>
+  </el-dialog>
+</template>

src/pages/user/administrator/index.vue

@@ -0,0 +1,172 @@
+<script lang="tsx" setup>
+// API 接口
+import { adminList, adminDelete } from '@/api/user';
+
+import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
+import AdminAdd from './components/AdminAdd.vue';
+import { BU_DOU_CONFIG } from '@/config';
+/**
+ * 表格
+ */
+const column = reactive<Column.ColumnOptions[]>([
+  {
+    prop: 'avatar',
+    label: '头像',
+    align: 'center',
+    width: 80,
+    render: (scope: any) => {
+      let img_url = '';
+      if (scope.row['uid']) {
+        img_url = `${BU_DOU_CONFIG.APP_URL}users/${scope.row['uid']}/avatar`;
+      }
+      return (
+        <ElAvatar src={img_url} size={54}>
+          {scope.row['name']}
+        </ElAvatar>
+      );
+    }
+  },
+  {
+    prop: 'uid',
+    label: '用户ID'
+  },
+  {
+    prop: 'name',
+    label: '昵称'
+  },
+  {
+    prop: 'username',
+    label: '用户'
+  },
+  {
+    prop: 'register_time',
+    label: '注册时间'
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 100,
+    render: (scope: any) => {
+      return (
+        <ElSpace>
+          <ElButton type="danger" onClick={() => onAdminDelete(scope.row)}>
+            删除
+          </ElButton>
+        </ElSpace>
+      );
+    }
+  }
+]);
+const loadTable = ref(false);
+const tableData = ref([]);
+
+const getTableList = () => {
+  loadTable.value = true;
+  adminList().then((res: any) => {
+    loadTable.value = false;
+    tableData.value = res;
+  });
+};
+// 刷新表格
+const onRefreshTable = () => {
+  getTableList();
+};
+
+// 管理员-新增
+const adminAddValue = ref(false);
+
+// 管理员-删除
+const onAdminDelete = (item: any) => {
+  ElMessageBox.confirm(`确定要删除管理员${item.name} 吗`, `删除管理员`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      const param = {
+        uid: item.uid
+      };
+      adminDelete(param)
+        .then((_res: any) => {
+          getTableList();
+          ElMessage({
+            type: 'success',
+            message: `删除管理成功！`
+          });
+        })
+        .catch(err => {
+          if (err.status == 400) {
+            ElMessage.error(err.msg);
+          }
+        });
+    })
+    .catch(() => {
+      console.log('取消');
+    });
+};
+
+onMounted(() => {
+  getTableList();
+});
+</script>
+
+<template>
+  <bd-page class="flex-col">
+    <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
+      <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
+        <div class="bd-title-left">
+          <p class="m-0 font-600">管理员</p>
+        </div>
+        <div class="flex items-center h-50px">
+          <el-form inline>
+            <el-form-item class="mb-0 !mr-0">
+              <el-button type="primary" @click="adminAddValue = true">新增管理员</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-hidden p-12px">
+        <el-table v-loading="loadTable" :data="tableData" :border="true" style="width: 100%; height: 100%">
+          <el-table-column type="index" :width="42" :align="'center'" :fixed="'left'">
+            <template #header>
+              <i-bd-setting class="cursor-pointer" size="16" />
+            </template>
+          </el-table-column>
+          <el-table-column v-for="item in column" v-bind="item" :key="item.prop">
+            <template #default="scope">
+              <template v-if="item.render">
+                <component :is="item.render" :row="scope.row"> </component>
+              </template>
+              <template v-else-if="item.formatter">
+                <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
+              </template>
+              <template v-else-if="item.prop">
+                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop!] }}</slot>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 新增管理员 -->
+    <AdminAdd v-model:value="adminAddValue" @ok="onRefreshTable" />
+  </bd-page>
+</template>
+
+<style lang="scss" scoped>
+// 样式
+.bd-title {
+  border-bottom: 1px solid var(--el-card-border-color);
+}
+</style>
+
+<route lang="yaml">
+meta:
+  title: 管理员
+  isAffix: false
+</route>