feat: 权限管理/管理员

thxl2010 · Dec 2, 2021 · e800d93 · e800d93
1 parent 4477777
commit e800d93
Show file tree

Hide file tree

Showing 8 changed files with 508 additions and 7 deletions.
diff --git a/src/api/admin.ts b/src/api/admin.ts
@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+import { IListParams, Admin, AdminPostData } from './types/admin';
+import { IFormData } from './types/form';
+
+export const getAdmins = (params: IListParams) => {
+  return request<{
+    count: number;
+    list: Admin[];
+  }>({
+    method: 'GET',
+    url: '/setting/admin',
+    params,
+  });
+};
+
+export const createAdmin = (data: AdminPostData) => {
+  return request({
+    method: 'POST',
+    url: '/setting/admin',
+    data,
+  });
+};
+
+export const updateAdmin = (id: number, data: AdminPostData) => {
+  return request({
+    method: 'PUT',
+    url: `/setting/admin/${id}`,
+    data,
+  });
+};
+
+export const deleteAdmin = (id: number) => {
+  return request({
+    method: 'DELETE',
+    url: `/setting/admin/${id}`,
+  });
+};
+
+export const updateAdminStatus = (id: number, status: number) => {
+  return request({
+    method: 'PUT',
+    url: `/setting/set_status/${id}/${status}`,
+  });
+};
+
+export const getRoles = () => {
+  return request<IFormData>({
+    method: 'GET',
+    url: '/setting/admin/create',
+  }).then((data) => {
+    const roles = data.rules.find((item) => item.field === 'roles');
+    if (roles && roles.options) {
+      return roles.options;
+    }
+    return [];
+  });
+};
+
+export const getAdmin = (id: number) => {
+  return request<IFormData>({
+    method: 'GET',
+    url: `/setting/admin/${id}/edit`,
+  }).then((data) => {
+    const obj: Record<string, any> = {};
+    data.rules.forEach((item) => {
+      obj[item.field] = item.value;
+    });
+    return obj as {
+      account: string;
+      pwd: string;
+      conf_pwd: string;
+      real_name: string;
+      roles: string[];
+      status: 0 | 1;
+    };
+  });
+};
diff --git a/src/api/types/admin.ts b/src/api/types/admin.ts
@@ -0,0 +1,35 @@
+export interface IListParams {
+  page: number;
+  limit: number;
+  name: string;
+  roles: string;
+  status: 0 | 1 | '';
+}
+
+export interface Admin {
+  id: number;
+  account: string;
+  head_pic: string;
+  pwd: string;
+  real_name: string;
+  roles: string;
+  last_ip: string;
+  last_time: number;
+  add_time: number;
+  login_count: number;
+  level: number;
+  status: number;
+  is_del: number;
+  _add_time: string;
+  _last_time: string;
+  statusLoading?: boolean;
+}
+
+export interface AdminPostData {
+  account: string;
+  conf_pwd: string;
+  pwd: string;
+  roles: number[];
+  status: 0 | 1;
+  real_name: string;
+}
diff --git a/src/api/types/form.ts b/src/api/types/form.ts
@@ -0,0 +1,25 @@
+import { FormItemRule } from 'element-plus/es/components/form/src/form.type';
+
+export interface ISelectOptions {
+  label: string;
+  value: number;
+}
+
+export interface IFormRule {
+  title: string;
+  field: string;
+  props?: Record<string, any>;
+  type: string;
+  validate?: FormItemRule[];
+  value: string;
+  options?: ISelectOptions[];
+}
+
+export interface IFormData {
+  action: string;
+  info: string;
+  method: string;
+  status: boolean;
+  title: string;
+  rules: IFormRule[];
+}
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
@@ -7,7 +7,9 @@
       <el-header>
         <AppHeader />
       </el-header>
-      <el-main>Main</el-main>
+      <el-main>
+        <router-view />
+      </el-main>
     </el-container>
   </el-container>
 </template>

diff --git a/src/layout/components/AppMenu.vue b/src/layout/components/AppMenu.vue
@@ -35,8 +35,8 @@
         <el-icon><turn-off /></el-icon>
         <span>权限</span>
       </template>
-      <el-menu-item index="/permission/role">角色</el-menu-item>
       <el-menu-item index="/permission/admin">管理员</el-menu-item>
+      <el-menu-item index="/permission/role">角色</el-menu-item>
       <el-menu-item index="/permission/rule">规则</el-menu-item>
     </el-sub-menu>
     <el-menu-item index="/media">

diff --git a/src/types/element-plus.ts b/src/types/element-plus.ts
@@ -1,5 +1,7 @@
-import { ElForm } from 'element-plus';
+import { ElForm, ElDialog } from 'element-plus';
 import { FormItemRule } from 'element-plus/es/components/form/src/form.type';
 
 export type IElForm = InstanceType<typeof ElForm>;
+export type IElDialog = InstanceType<typeof ElDialog>;
+
 export type IFormRule = Record<string, FormItemRule[]>;
diff --git a/src/views/permission/admin/AdminForm.vue b/src/views/permission/admin/AdminForm.vue
@@ -0,0 +1,191 @@
+<template>
+  <app-dialog-form
+    :title="props.adminId ? '编辑管理员' : '添加管理员'"
+    :confirm="handleSubmit"
+    @closed="handleDialogClosed"
+    @open="handleDialogOpen"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item
+        label="管理员账号"
+        prop="account"
+      >
+        <el-input
+          v-model="formData.account"
+          placeholder="请输入管理员账号"
+        />
+      </el-form-item>
+      <el-form-item
+        label="管理员密码"
+        prop="pwd"
+      >
+        <el-input
+          v-model="formData.pwd"
+          type="password"
+          placeholder="请输入管理员密码"
+        />
+      </el-form-item>
+      <el-form-item
+        label="确认密码"
+        prop="conf_pwd"
+      >
+        <el-input
+          v-model="formData.conf_pwd"
+          type="password"
+          placeholder="请输入确认密码"
+        />
+      </el-form-item>
+      <el-form-item
+        label="管理员姓名"
+        prop="real_name"
+      >
+        <el-input
+          v-model="formData.real_name"
+          placeholder="请输入管理员姓名"
+        />
+      </el-form-item>
+      <el-form-item
+        label="管理员身份"
+        prop="roles"
+      >
+        <el-select
+          v-model="formData.roles"
+          multiple
+          placeholder="请选择管理员身份"
+        >
+          <el-option
+            v-for="item in roles"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            :label="1"
+          >
+            开启
+          </el-radio>
+          <el-radio
+            :label="0"
+          >
+            关闭
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+  </app-dialog-form>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getRoles, getAdmin, createAdmin, updateAdmin } from '@/api/admin'
+import type { PropType } from 'vue'
+import type { IElForm, IFormRule } from '@/types/element-plus'
+import type { ISelectOptions } from '@/api/types/form'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  adminId: { // 编辑的管理员 ID
+    type: Number as PropType<number | null>,
+    default: null
+  }
+})
+
+interface EmitsType {
+  (e: 'update:admin-id', value: number | null): void
+  (e: 'success'): void
+}
+
+const emit = defineEmits<EmitsType>()
+
+const form = ref<IElForm | null>(null)
+const formLoading = ref(false)
+const formData = ref({
+  account: '',
+  pwd: '',
+  conf_pwd: '',
+  roles: [] as number[],
+  status: 0 as 0 | 1,
+  real_name: ''
+})
+const roles = ref<ISelectOptions[]>([])
+
+const formRules: IFormRule = {
+  account: [
+    { required: true, message: '请输入管理员账号', trigger: 'blur' }
+  ],
+  pwd: [
+    { required: true, message: '请输入管理员密码', trigger: 'blur' }
+  ],
+  conf_pwd: [
+    { required: true, message: '请输入确认密码', trigger: 'blur' }
+  ],
+  roles: [
+    { required: true, message: '请选择管理员角色', trigger: 'blur' }
+  ],
+  real_name: [
+    { required: true, message: '请输入管理员姓名', trigger: 'blur' }
+  ]
+}
+
+const handleDialogOpen = () => {
+  formLoading.value = true
+  Promise.all([loadRoles(), loadAdmin()]).finally(() => {
+    formLoading.value = false
+  })
+}
+
+const loadRoles = async () => {
+  const data = await getRoles()
+  roles.value = data
+}
+
+const loadAdmin = async () => {
+  if (!props.adminId) {
+    return
+  }
+  const data = await getAdmin(props.adminId)
+  formData.value = {
+    ...data,
+    roles: data.roles.map(item => Number.parseInt(item))
+  }
+}
+
+const handleDialogClosed = () => {
+  emit('update:admin-id', null)
+  form.value?.clearValidate() // 清除验证结果
+  form.value?.resetFields() // 清除表单数据
+}
+
+const handleSubmit = async () => {
+  const valid = await form.value?.validate()
+  if (!valid) {
+    return
+  }
+  if (props.adminId) {
+    // 更新管理员
+    await updateAdmin(props.adminId, formData.value)
+  } else {
+    // 添加管理员
+    await createAdmin(formData.value)
+  }
+  emit('success')
+  ElMessage.success('保存成功')
+}
+
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  width: 100%;
+}
+</style>