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/business.d.ts

@@ -1,19 +0,0 @@
-/** 用户相关模块 */
-declare namespace Auth {
-  /** 用户角色类型 */
-  type RoleType = 'super' | 'admin' | 'user'
-}
-/* 系统消息 */
-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/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>

src/views/setting/account/index.vue

@@ -1,7 +1,217 @@
-<script setup lang="ts"></script>
+<script setup lang="tsx">
+import type { DataTableColumns, FormInst } from 'naive-ui'
+import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
+import TableModal from './components/TableModal.vue'
+import { fetchUserPage } from '@/service'
+import { useLoading } from '@/hooks'
+import { Gender } from '@/constants'
+import CopyText from '@/components/custom/CopyText.vue'
+
+const { loading, startLoading, endLoading } = useLoading(false)
+
+const initialModel = {
+  condition_1: '',
+  condition_2: '',
+}
+const model = ref({ ...initialModel })
+function handleResetSearch() {
+  model.value = { ...initialModel }
+}
+
+const formRef = ref<FormInst | null>()
+const modalRef = ref()
+
+function delteteUser(id: number) {
+  window.$message.success(`删除用户id:${id}`)
+}
+
+const columns: DataTableColumns<Auth.User> = [
+  {
+    title: '姓名',
+    align: 'center',
+    key: 'userName',
+  },
+  {
+    title: '性别',
+    align: 'center',
+    key: 'gender',
+    render: (row) => {
+      const tagType = {
+        0: 'primary',
+        1: 'success',
+      } as const
+      if (row.gender) {
+        return (
+          <NTag type={tagType[row.gender]}>
+            {Gender[row.gender]}
+          </NTag>
+        )
+      }
+    },
+  },
+  {
+    title: '邮箱',
+    align: 'center',
+    key: 'email',
+  },
+  {
+    title: '联系方式',
+    align: 'center',
+    key: 'tel',
+    render: (row) => {
+      return (
+        <CopyText value={row.tel} />
+      )
+    },
+  },
+  {
+    title: '状态',
+    align: 'center',
+    key: 'status',
+    render: (row) => {
+      return (
+        <NSwitch
+          value={row.status}
+          checked-value={1}
+          unchecked-value={0}
+          onUpdateValue={disabled =>
+            handleUpdateDisabled(disabled, row.id!)}
+        >
+          {{ checked: () => '启用', unchecked: () => '禁用' }}
+        </NSwitch>
+      )
+    },
+  },
+  {
+    title: '操作',
+    align: 'center',
+    key: 'actions',
+    render: (row) => {
+      const rowData = row as unknown as Auth.User
+      return (
+        <NSpace justify="center">
+          <NButton
+            size="small"
+            onClick={() => modalRef.value.openModal('edit', rowData)}
+          >
+            编辑
+          </NButton>
+          <NPopconfirm onPositiveClick={() => delteteUser(rowData.id!)}>
+            {{
+              default: () => '确认删除',
+              trigger: () => <NButton size="small" type="error">删除</NButton>,
+            }}
+          </NPopconfirm>
+        </NSpace>
+      )
+    },
+  },
+]
+
+const listData = ref<CommonList.UserList[]>([])
+function handleUpdateDisabled(disabled: boolean, id: number) {
+  const index = listData.value.findIndex(item => item.id === id)
+  if (index > -1)
+    listData.value[index].disabled = disabled
+}
+
+async function getUserList() {
+  startLoading()
+  await fetchUserPage().then((res: any) => {
+    listData.value = res.data.list
+    endLoading()
+  })
+}
+
+onMounted(() => {
+  getUserList()
+})
+
+function changePage(page: number, size: number) {
+  window.$message.success(`分页器:${page},${size}`)
+}
+
+const treeData = ref([
+  {
+    id: '1',
+    label: '安徽总公司',
+    children: [
+      {
+        id: '2',
+        label: '合肥分公司',
+        children: [
+          {
+            id: '4',
+            label: '财务部门',
+          },
+          {
+            id: '5',
+            label: '采购部门',
+          },
+        ],
+      },
+      {
+        id: '3',
+        label: '芜湖分公司',
+      },
+    ],
+  },
+])
+</script>
 
 <template>
-  <div>用户设置</div>
-</template>
+  <n-flex>
+    <n-card class="w-70">
+      <n-tree
+        block-line
+        :data="treeData"
+        key-field="id"
+      />
+    </n-card>
 
-<style scoped></style>
+    <NSpace vertical class="flex-1">
+      <n-card>
+        <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>
+            <n-form-item label="性别" path="condition_2">
+              <n-input v-model:value="model.condition_2" placeholder="请输入" />
+            </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-card>
+
+      <n-card class="flex-1">
+        <NSpace vertical size="large">
+          <div class="flex gap-4">
+            <NButton type="primary" @click="modalRef.openModal('add')">
+              <template #icon>
+                <icon-park-outline-add-one />
+              </template>
+              新建用户
+            </NButton>
+          </div>
+          <n-data-table :columns="columns" :data="listData" :loading="loading" />
+          <Pagination :count="100" @change="changePage" />
+          <TableModal ref="modalRef" modal-name="用户" />
+        </NSpace>
+      </n-card>
+    </NSpace>
+  </n-flex>
+</template>

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

@@ -3,8 +3,9 @@ import type {
   FormItemRule,
 } from 'naive-ui'
 import HelpInfo from '@/components/common/HelpInfo.vue'
-import { useLoading } from '@/hooks'
+import { useBoolean, useLoading } from '@/hooks'
 import { Regex } from '@/constants'
+import { fetchRoleList } from '@/service'
 
 interface Props {
   modalName?: string
@@ -20,6 +21,10 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
+
+const { loading: submitLoading, startLoading, endLoading } = useLoading(false)
+
 const defaultFormModal: AppRoute.RowRoute = {
   'name': '',
   'path': '',
@@ -51,11 +56,11 @@ const modalTitle = computed(() => {
   return `${titleMap[modalType.value]}${props.modalName}`
 })
 
-const modalVisible = ref(false)
 async function openModal(type: ModalType = 'add', data: AppRoute.RowRoute) {
   emit('open')
   modalType.value = type
-  modalVisible.value = true
+  getRoleList()
+  showModal()
   const handlers = {
     async add() {
       formModel.value = { ...defaultFormModal }
@@ -72,10 +77,8 @@ async function openModal(type: ModalType = 'add', data: AppRoute.RowRoute) {
   await handlers[type]()
 }
 
-const { loading: submitLoading, startLoading, endLoading } = useLoading(false)
-
 function closeModal() {
-  modalVisible.value = false
+  hiddenModal()
   endLoading()
   emit('close')
 }
@@ -171,20 +174,11 @@ const rules = {
   },
 }
 
-const options = [
-  {
-    label: 'super',
-    value: 'super',
-  },
-  {
-    label: 'admin',
-    value: 'admin',
-  },
-  {
-    label: 'user',
-    value: 'user',
-  },
-]
+const options = ref<Auth.Role[]>([])
+async function getRoleList() {
+  const { data } = await fetchRoleList()
+  options.value = data
+}
 </script>
 
 <template>
@@ -196,7 +190,9 @@ const options = [
     }"
   >
     <n-form
-      ref="formRef" :rules="rules" label-placement="left" :model="formModel" label-align="left" :label-width="100"
+      ref="formRef"
+      :rules="rules" label-placement="left" :label-width="100"
+      :model="formModel"
       :disabled="modalType === 'view'"
     >
       <n-grid :cols="2" :x-gap="18">
@@ -287,7 +283,12 @@ const options = [
             访问角色
             <HelpInfo message="不填写则表示所有角色都可以访问" />
           </template>
-          <n-select v-model:value="formModel['meta.roles']" multiple filterable :options="options" />
+          <n-select
+            v-model:value="formModel['meta.roles']" multiple filterable
+            label-field="role"
+            value-field="id"
+            :options="options"
+          />
         </n-form-item-grid-item>
       </n-grid>
     </n-form>

src/views/setting/menu/index.vue

@@ -5,6 +5,7 @@ import TableModal from './components/TableModal.vue'
 import { fetchAllRoutes } from '@/service'
 import { useLoading } from '@/hooks'
 import { arrayToTree, renderIcon } from '@/utils'
+import CopyText from '@/components/custom/CopyText.vue'
 
 const { loading, startLoading, endLoading } = useLoading(false)
 
@@ -44,10 +45,11 @@ const columns: DataTableColumns<AppRoute.RowRoute> = [
   {
     title: '路径',
     key: 'path',
-    ellipsis: {
-      tooltip: true,
+    render: (row) => {
+      return (
+        <CopyText value={row.path} />
+      )
     },
-
   },
   {
     title: '组件路径',