feat: add user manage

src/components/common/Pagination.vue

@@ -20,6 +20,7 @@ function changePage() {
     v-if="props.count > 0"
     v-model:page="page"
     v-model:page-size="pageSize"
+    :page-sizes="[10, 20, 30, 50]"
     :item-count="props.count"
     :display-order="displayOrder"
     show-size-picker

src/components/custom/CopyText.vue

@@ -2,7 +2,7 @@
 const props = defineProps<{
   maxLength?: string
 }>()
-const modelValue = defineModel<string>()
+const modelValue = defineModel<string>('value')
 </script>
 
 <template>

src/service/api/system.ts

@@ -1,5 +1,15 @@
 import { request } from '../http'
 
+// 获取所有路由信息
 export function fetchAllRoutes() {
   return request.Get<Service.ResponseResult<AppRoute.RowRoute[]> >('/getUserRoutes')
 }
+
+// 获取所有用户信息
+export function fetchUserPage() {
+  return request.Get<Service.ResponseResult<Auth.User[]> >('/userPage')
+}
+// 获取所有角色列表
+export function fetchRoleList() {
+  return request.Get<Service.ResponseResult<Auth.Role[]> >('/role/list')
+}

src/typings/api.d.ts

@@ -2,22 +2,12 @@
 
 /** 后端返回的用户相关类型 */
 declare namespace ApiAuth {
-  /* 登录返回的用户字段 */
-  interface loginInfo {
+  /* 登录返回的用户字段, 该数据是根据用户表扩展而来, 部分字段可能需要覆盖，例如id */
+  interface loginInfo extends Auth.User {
     /** 用户id */
     id: number
-    /** 用户名 */
-    userName: string
-    /* 用户头像 */
-    avatar?: string
-    /* 用户邮箱 */
-    email?: string
-    /* 用户昵称 */
-    nickname?: string
-    /* 用户电话 */
-    tel?: string
     /** 用户角色类型 */
-    role: Auth.RoleType
+    role: RoleType
     /** 访问toekn */
     accessToken: string
     /** 刷新toekn */

src/typings/entities.d.ts

@@ -0,0 +1,55 @@
+/* 存放数据库实体表类型 */
+
+/** 通用状态类型 false | true */
+type CommonStatus = 0 | 1
+
+/** 用户相关模块 */
+declare namespace Auth {
+  /** 用户角色类型 */
+  type RoleType = 'super' | 'admin' | 'user'
+
+  /** 用户信息 */
+  interface User {
+    /** 用户id */
+    id?: number
+    /** 用户名 */
+    userName?: string
+    /* 用户头像 */
+    avatar?: string
+    /* 用户性别 */
+    gender?: CommonStatus
+    /* 用户邮箱 */
+    email?: string
+    /* 用户昵称 */
+    nickname?: string
+    /* 用户电话 */
+    tel?: string
+    /** 用户角色类型 */
+    role?: RoleType[]
+    /** 用户状态 */
+    status?: CommonStatus
+    /** 备注 */
+    remark?: string
+  }
+
+  interface Role {
+    /** 用户id */
+    id?: number
+    /** 用户名 */
+    role?: RoleType
+  }
+}
+/* 系统消息 */
+declare namespace Message {
+  interface List {
+    id: number
+    type: 0 | 1 | 2
+    title: string
+    icon: string
+    tagTitle?: string
+    tagType?: 'error' | 'info' | 'success' | 'warning'
+    description?: string
+    isRead?: boolean
+    date: string
+  }
+}

src/views/demo/clipboard/index.vue

@@ -12,7 +12,7 @@ const text = ref('Hello nova-admin')
       </n-button>
     </n-input-group>
     <n-h3>copy-text 组件</n-h3>
-    <copy-text v-model="text" />
+    <copy-text v-model:value="text" />
   </n-card>
 </template>
 

src/views/list/commonList/index.vue

@@ -168,36 +168,36 @@ function handleAddTable() {
 <template>
   <NSpace vertical size="large">
     <n-card>
-      <n-form ref="formRef" :model="model" label-placement="left" :show-feedback="false">
-        <n-grid :x-gap="30" :cols="4">
-          <n-form-item-gi label="姓名" path="condition_1">
+      <n-form ref="formRef" :model="model" label-placement="left" inline :show-feedback="false">
+        <n-flex>
+          <n-form-item label="姓名" path="condition_1">
             <n-input v-model:value="model.condition_1" placeholder="请输入" />
-          </n-form-item-gi>
-          <n-form-item-gi label="年龄" path="condition_2">
+          </n-form-item>
+          <n-form-item label="年龄" path="condition_2">
             <n-input v-model:value="model.condition_2" placeholder="请输入" />
-          </n-form-item-gi>
-          <n-form-item-gi label="性别" path="condition_3">
+          </n-form-item>
+          <n-form-item label="性别" path="condition_3">
             <n-input v-model:value="model.condition_3" placeholder="请输入" />
-          </n-form-item-gi>
-          <n-form-item-gi label="地址" path="condition_4">
+          </n-form-item>
+          <n-form-item label="地址" path="condition_4">
             <n-input v-model:value="model.condition_4" placeholder="请输入" />
-          </n-form-item-gi>
-        </n-grid>
+          </n-form-item>
+          <n-flex class="ml-auto">
+            <NButton type="primary" @click="getUserList">
+              <template #icon>
+                <icon-park-outline-search />
+              </template>
+              搜索
+            </NButton>
+            <NButton strong secondary @click="handleResetSearch">
+              <template #icon>
+                <icon-park-outline-redo />
+              </template>
+              重置
+            </NButton>
+          </n-flex>
+        </n-flex>
       </n-form>
-      <n-flex class="mt-1em" justify="end">
-        <NButton type="primary" @click="getUserList">
-          <template #icon>
-            <icon-park-outline-search />
-          </template>
-          搜索
-        </NButton>
-        <NButton strong secondary @click="handleResetSearch">
-          <template #icon>
-            <icon-park-outline-redo />
-          </template>
-          重置
-        </NButton>
-      </n-flex>
     </n-card>
     <n-card>
       <NSpace vertical size="large">

src/views/setting/account/components/TableModal.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { useBoolean, useLoading } from '@/hooks'
+import { fetchRoleList } from '@/service'
+
+interface Props {
+  modalName?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modalName: '',
+})
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
+
+const { loading: submitLoading, startLoading, endLoading } = useLoading(false)
+
+const formModel = ref()
+const defaultFormModal: Auth.User = {
+  userName: '',
+  gender: undefined,
+  email: '',
+  tel: '',
+  role: [],
+  status: 1,
+}
+
+type ModalType = 'add' | 'view' | 'edit'
+const modalType = shallowRef<ModalType>('add')
+const modalTitle = computed(() => {
+  const titleMap: Record<ModalType, string> = {
+    add: '添加',
+    view: '查看',
+    edit: '编辑',
+  }
+  return `${titleMap[modalType.value]}${props.modalName}`
+})
+
+async function openModal(type: ModalType = 'add', data: any) {
+  emit('open')
+  modalType.value = type
+  showModal()
+  getRoleList()
+  const handlers = {
+    async add() {
+      formModel.value = { ...defaultFormModal }
+    },
+    async view() {
+      if (data)
+        formModel.value = { ...data }
+    },
+    async edit() {
+      if (data)
+        formModel.value = { ...data }
+    },
+  }
+  await handlers[type]()
+}
+
+function closeModal() {
+  hiddenModal()
+  endLoading()
+  emit('close')
+}
+
+defineExpose({
+  openModal,
+})
+
+const formRef = ref()
+async function submitModal() {
+  const handlers = {
+    async add() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          window.$message.success('模拟新增成功')
+          resolve(true)
+        }, 2000)
+      })
+    },
+    async edit() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          window.$message.success('模拟编辑成功')
+          resolve(true)
+        }, 2000)
+      })
+    },
+    async view() {
+      return true
+    },
+  }
+  await formRef.value?.validate()
+  startLoading()
+  await handlers[modalType.value]() && closeModal()
+}
+
+const rules = {
+  userName: {
+    required: true,
+    message: '请输入用户名',
+    trigger: 'blur',
+  },
+}
+
+const options = ref<Auth.Role[]>([])
+async function getRoleList() {
+  const { data } = await fetchRoleList()
+  options.value = data
+}
+</script>
+
+<template>
+  <n-modal
+    v-model:show="modalVisible"
+    :mask-closable="false"
+    preset="card"
+    :title="modalTitle"
+    class="w-700px"
+    :segmented="{
+      content: true,
+      action: true,
+    }"
+  >
+    <n-form ref="formRef" :rules="rules" label-placement="left" :model="formModel" :label-width="100" :disabled="modalType === 'view'">
+      <n-grid :cols="2" :x-gap="18">
+        <n-form-item-grid-item :span="1" label="用户名" path="userName">
+          <n-input v-model:value="formModel.userName" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="1" label="性别" path="gender">
+          <n-radio-group v-model:value="formModel.gender">
+            <n-space>
+              <n-radio :value="1">
+                男
+              </n-radio>
+              <n-radio :value="0">
+                女
+              </n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="1" label="邮箱" path="email">
+          <n-input v-model:value="formModel.email" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="1" label="联系方式" path="tel">
+          <n-input v-model:value="formModel.tel" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="2" label="角色" path="role">
+          <n-select
+            v-model:value="formModel.role" multiple filterable
+            label-field="role"
+            value-field="id"
+            :options="options"
+          />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="2" label="备注" path="remark">
+          <n-input v-model:value="formModel.remark" type="textarea" />
+        </n-form-item-grid-item>
+        <n-form-item-grid-item :span="1" label="用户状态" path="status">
+          <n-switch
+            v-model:value="formModel.status"
+            :checked-value="1" :unchecked-value="0"
+          >
+            <template #checked>
+              启用
+            </template>
+            <template #unchecked>
+              禁用
+            </template>
+          </n-switch>
+        </n-form-item-grid-item>
+      </n-grid>
+    </n-form>
+    <template #action>
+      <n-space justify="center">
+        <n-button @click="closeModal">
+          取消
+        </n-button>
+        <n-button type="primary" :loading="submitLoading" @click="submitModal">
+          提交
+        </n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>