feat: 新增用户管理

src/apis/system/index.ts

@@ -1,3 +1,4 @@
+export * from './user'
 export * from './role'
 export * from './menu'
 export * from './dept'

src/apis/system/type.ts

@@ -1,3 +1,36 @@
+/** 系统用户类型 */
+export interface UserResp {
+  id: string
+  username: string
+  nickname: string
+  avatar: string
+  gender: number
+  email: string
+  phone: string
+  description: string
+  status: 1 | 2
+  isSystem?: boolean
+  createUserString: string
+  createTime: string
+  updateUserString: string
+  updateTime: string
+  deptId: string
+  deptName: string
+  disabled: boolean
+}
+export type UserDetailResp = UserResp & {
+  roleIds?: Array<number>
+  roleNames: string
+  pwdResetTime?: string
+}
+export interface UserQuery {
+  description?: string
+  status?: number
+  deptId?: string
+  sort: Array<string>
+}
+export interface UserPageQuery extends PageQuery, UserQuery {}
+
 /** 系统角色类型 */
 export interface RoleResp {
   id: string

src/apis/system/user.ts

@@ -0,0 +1,39 @@
+import http from '@/utils/http'
+import type * as System from './type'
+
+const BASE_URL = '/system/user'
+
+/** @desc 查询用户列表 */
+export function listUser(query: System.UserPageQuery) {
+  return http.get<PageRes<System.UserResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询用户详情 */
+export function getUser(id: string) {
+  return http.get<System.UserDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增用户 */
+export function addUser(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改用户 */
+export function updateUser(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除用户 */
+export function deleteUser(ids: string | Array<string>) {
+  return http.del(`${BASE_URL}/${ids}`)
+}
+
+/** @desc 导出用户 */
+export function exportUser(query: System.UserQuery) {
+  return http.download<any>(`${BASE_URL}/export`, query)
+}
+
+/** @desc 重置密码 */
+export function resetUserPwd(data: any, id: string) {
+  return http.patch(`${BASE_URL}/${id}/password`, data)
+}

src/components/GiForm/src/GiForm.vue

@@ -19,6 +19,15 @@
                 ></a-input>
               </template>
 
+              <template v-if="item.type === 'input-password'">
+                <a-input-password
+                  :placeholder="`请输入${item.label}`"
+                  v-bind="(item.props as A.InputInstance['$props'])"
+                  :model-value="modelValue[item.field as keyof typeof modelValue]"
+                  @update:model-value="valueChange($event, item.field)"
+                ></a-input-password>
+              </template>
+
               <template v-if="item.type === 'input-number'">
                 <a-input-number
                   :placeholder="`请输入${item.label}`"

src/views/system/user/UserAddModal.vue

@@ -0,0 +1,188 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 520 ? 520 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
+      <a-form-item label="用户名" field="username">
+        <a-input v-model.trim="form.username" placeholder="请输入用户名" :max-length="64" />
+      </a-form-item>
+      <a-form-item label="昵称" field="nickname">
+        <a-input v-model.trim="form.nickname" placeholder="请输入昵称" :max-length="30" />
+      </a-form-item>
+      <a-form-item v-if="!isUpdate" label="密码" field="password">
+        <a-input-password v-model.trim="form.password" placeholder="请输入密码" :max-length="32" />
+      </a-form-item>
+      <a-form-item label="手机号码" field="phone">
+        <a-input v-model.trim="form.phone" placeholder="请输入手机号码" />
+      </a-form-item>
+      <a-form-item label="邮箱" field="email">
+        <a-input v-model.trim="form.email" placeholder="请输入邮箱" :max-length="255" />
+      </a-form-item>
+      <a-form-item label="性别" field="gender">
+        <a-radio-group v-model="form.gender">
+          <a-radio :value="1">男</a-radio>
+          <a-radio :value="2">女</a-radio>
+          <a-radio :value="0" disabled>未知</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="所属部门" field="deptId">
+        <a-tree-select
+          v-model="form.deptId"
+          :data="deptList"
+          placeholder="请选择所属部门"
+          allow-clear
+          allow-search
+          :filter-tree-node="filterDeptOptions"
+        />
+      </a-form-item>
+      <a-form-item label="角色" field="roleIds">
+        <a-select
+          v-model="form.roleIds"
+          :options="roleList"
+          placeholder="请选择角色"
+          multiple
+          allow-clear
+          :allow-search="{ retainInputValue: true }"
+        />
+      </a-form-item>
+      <a-form-item label="描述" field="description">
+        <a-textarea
+          v-model.trim="form.description"
+          placeholder="请输入描述"
+          show-word-limit
+          :max-length="200"
+          :auto-size="{ minRows: 3, maxRows: 5 }"
+        />
+      </a-form-item>
+      <a-form-item label="状态" field="status">
+        <a-switch
+          v-model="form.status"
+          :disabled="form.isSystem"
+          :checked-value="1"
+          :unchecked-value="2"
+          checked-text="启用"
+          unchecked-text="禁用"
+          type="round"
+        />
+      </a-form-item>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { getUser, addUser, updateUser } from '@/apis'
+import type { Gender, Status } from '@/types/global'
+import { Message, type FormInstance, type TreeNodeData } from '@arco-design/web-vue'
+import { useForm } from '@/hooks'
+import { useDept, useRole } from '@/hooks/app'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const { roleList, getRoleList } = useRole()
+const { deptList, getDeptList } = useDept()
+// 过滤部门
+const filterDeptOptions = (searchKey: string, nodeData: TreeNodeData) => {
+  if (nodeData.title) {
+    return nodeData.title.toLowerCase().indexOf(searchKey.toLowerCase()) > -1
+  }
+  return false
+}
+
+const dataId = ref('')
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改用户' : '新增用户'))
+const formRef = ref<FormInstance>()
+
+const rules: FormInstance['rules'] = {
+  username: [
+    { required: true, message: '请输入用户名' },
+  ],
+  nickname: [
+    { required: true, message: '请输入昵称' },
+  ],
+  password: [{ required: true, message: '请输入密码' }],
+  deptId: [{ required: true, message: '请选择所属部门' }],
+  roleIds: [{ required: true, message: '请选择角色' }],
+}
+
+const { form, resetForm } = useForm({
+  id: '',
+  username: '',
+  nickname: '',
+  gender: 1 as Gender,
+  phone: '',
+  email: '',
+  deptId: '',
+  roleIds: [] as string[],
+  description: '',
+  status: 1 as Status,
+  type: 2 as 1 | 2,
+  disabled: false
+})
+
+// 重置
+const reset = () => {
+  formRef.value?.resetFields()
+  resetForm()
+}
+
+const visible = ref(false)
+// 新增
+const onAdd = () => {
+  if (!deptList.value.length) {
+    getDeptList()
+  }
+  if (!roleList.value.length) {
+    getRoleList()
+  }
+  reset()
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  if (!deptList.value.length) {
+    await getDeptList()
+  }
+  if (!roleList.value.length) {
+    await getRoleList()
+  }
+  reset()
+  dataId.value = id
+  const res = await getUser(id)
+  Object.assign(form, res.data)
+  visible.value = true
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.validate()
+    if (isInvalid) return false
+    if (isUpdate.value) {
+      await updateUser(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      await addUser(form)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+defineExpose({ onAdd, onUpdate })
+</script>

src/views/system/user/UserDetailDrawer.vue

@@ -0,0 +1,59 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    title="用户详情"
+    :width="width >= 580 ? 580 : '100%'"
+    :footer="false"
+  >
+    <a-descriptions :column="2" size="large" class="general-description">
+      <a-descriptions-item label="ID" :span="2">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="用户名">{{ dataDetail?.username }}</a-descriptions-item>
+      <a-descriptions-item label="昵称">{{ dataDetail?.nickname }}</a-descriptions-item>
+      <a-descriptions-item label="性别">
+        <span v-if="dataDetail?.gender === 1">男</span>
+        <span v-else-if="dataDetail?.gender === 2">女</span>
+        <span v-else>未知</span>
+      </a-descriptions-item>
+      <a-descriptions-item label="状态">
+        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
+        <a-tag v-else color="red">禁用</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="手机号">{{ dataDetail?.phone }}</a-descriptions-item>
+      <a-descriptions-item label="邮箱">{{ dataDetail?.email }}</a-descriptions-item>
+      <a-descriptions-item label="所属部门">{{ dataDetail?.deptName }}</a-descriptions-item>
+      <a-descriptions-item label="角色">{{ dataDetail?.roleNames }}</a-descriptions-item>
+      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
+      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
+      <a-descriptions-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { getUser, type UserDetailResp } from '@/apis'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+
+const visible = ref(false)
+const dataId = ref('')
+const dataDetail = ref<UserDetailResp>()
+// 查询详情
+const getDataDetail = async () => {
+  const res = await getUser(dataId.value)
+  dataDetail.value = res.data
+}
+
+// 打开详情
+const open = async (id: string) => {
+  dataId.value = id
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped></style>

src/views/system/user/UserResetPwdModal.vue

@@ -0,0 +1,73 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="重置密码"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :modal-style="{ maxWidth: '520px' }"
+    width="90%"
+    @before-ok="save"
+    @close="reset"
+  >
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { resetUserPwd } from '@/apis'
+import { Message } from '@arco-design/web-vue'
+import { GiForm, type Columns } from '@/components/GiForm'
+import { useForm } from '@/hooks'
+import { encryptByRsa } from '@/utils/encrypt'
+
+const dataId = ref('')
+const formRef = ref<InstanceType<typeof GiForm>>()
+
+const options: Options = {
+  form: {},
+  col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
+  btns: { hide: true }
+}
+
+const columns: Columns = [
+  { label: '密码', field: 'newPassword', type: 'input-password', rules: [{ required: true, message: '请输入密码' }] },
+]
+
+const { form, resetForm } = useForm({
+  newPassword: ''
+})
+
+// 重置
+const reset = () => {
+  formRef.value?.formRef?.resetFields()
+  resetForm()
+}
+
+const visible = ref(false)
+// 重置
+const onReset = (id: string) => {
+  reset()
+  dataId.value = id
+  visible.value = true
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.formRef?.validate()
+    if (isInvalid) return false
+    await resetUserPwd({ newPassword: encryptByRsa(form.newPassword) || ''}, dataId.value)
+    Message.success('重置成功')
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+defineExpose({ onReset })
+</script>

src/views/system/user/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="gi_page">
+    <a-card title="用户管理" class="general-card">
+      <a-row :gutter="16">
+        <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
+          <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
+            <template #prefix><icon-search /></template>
+          </a-input>
+          <a-tree
+            ref="treeRef"
+            :data="deptList"
+            default-expand-all
+            show-line
+            block-node
+            @select="handleSelectDept"
+          >
+          </a-tree>
+        </a-col>
+
+        <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20">
+          <GiTable
+            ref="tableRef"
+            row-key="id"
+            :data="dataList"
+            :columns="columns"
+            :loading="loading"
+            :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+            :pagination="pagination"
+            :disabledColumnKeys="['nickname']"
+            @refresh="search"
+          >
+            <template #custom-left>
+              <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+                <template #prefix><icon-search /></template>
+              </a-input>
+              <a-select
+                v-model="queryForm.status"
+                :options="DisEnableStatusList"
+                placeholder="请选择状态"
+                allow-clear
+                style="width: 150px"
+                @change="search"
+              />
+              <a-button @click="reset">重置</a-button>
+            </template>
+            <template #custom-right>
+              <a-button type="primary" @click="onAdd">
+                <template #icon><icon-plus /></template>
+                <span>新增</span>
+              </a-button>
+              <a-tooltip content="导出">
+                <a-button @click="onExport">
+                  <template #icon>
+                    <icon-download />
+                  </template>
+                </a-button>
+              </a-tooltip>
+            </template>
+            <template #nickname="{ record }">
+              <GiCellAvatar :avatar="getAvatar(record.avatar, record.gender)" :name="record.nickname" is-link @click="openDetail(record)" />
+            </template>
+            <template #gender="{ record }">
+              <GiCellGender :gender="record.gender" />
+            </template>
+            <template #status="{ record }">
+              <GiCellStatus :status="record.status" />
+            </template>
+            <template #isSystem="{ record }">
+              <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+              <a-tag v-else color="arcoblue" size="small">否</a-tag>
+            </template>
+            <template #action="{ record }">
+              <a-space>
+                <template #split>
+                  <a-divider direction="vertical" :margin="0" />
+                </template>
+                <a-link @click="onUpdate(record)">修改</a-link>
+                <a-link
+                  status="danger"
+                  :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+                  :disabled="record.disabled"
+                  @click="onDelete(record)"
+                >
+                  删除
+                </a-link>
+                <a-dropdown>
+                  <a-button type="text">更多</a-button>
+                  <template #content>
+                    <a-doption @click="onResetPwd(record)">重置密码</a-doption>
+                  </template>
+                </a-dropdown>
+              </a-space>
+            </template>
+          </GiTable>
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <UserAddModal ref="UserAddModalRef" @save-success="search" />
+    <UserDetailDrawer ref="UserDetailDrawerRef" />
+    <UserResetPwdModal ref="UserResetPwdModalRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { listUser, deleteUser, exportUser, type UserResp } from '@/apis'
+import type { TableInstance, TreeInstance } from '@arco-design/web-vue'
+import UserAddModal from './UserAddModal.vue'
+import UserDetailDrawer from './UserDetailDrawer.vue'
+import UserResetPwdModal from './UserResetPwdModal.vue'
+import { useTable, useDownload } from '@/hooks'
+import { useDept } from '@/hooks/app'
+import { isMobile } from '@/utils'
+import getAvatar from '@/utils/avatar'
+import { DisEnableStatusList } from '@/constant/common'
+
+defineOptions({ name: 'User' })
+
+const columns: TableInstance['columns'] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined
+  },
+  {
+    title: '昵称',
+    slotName: 'nickname',
+    width: 170,
+    ellipsis: true,
+    tooltip: true,
+    fixed: !isMobile() ? 'left' : undefined
+  },
+  { title: '用户名', dataIndex: 'username', width: 120, ellipsis: true, tooltip: true },
+  { title: '状态', slotName: 'status', align: 'center' },
+  { title: '性别', slotName: 'gender', align: 'center' },
+  { title: '手机号', dataIndex: 'phone', width: 170, ellipsis: true, tooltip: true },
+  { title: '邮箱', dataIndex: 'email', width: 170, ellipsis: true, tooltip: true },
+  { title: '所属部门', dataIndex: 'deptName', ellipsis: true, tooltip: true },
+  { title: '系统内置', slotName: 'isSystem', width: 100, align: 'center', show: false },
+  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', show: false, ellipsis: true, tooltip: true },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', show: false, ellipsis: true, tooltip: true },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
+  { title: '操作', slotName: 'action', width: 200, align: 'center', fixed: !isMobile() ? 'right' : undefined }
+]
+
+const queryForm = reactive({
+  description: undefined,
+  status: undefined,
+  deptId: undefined,
+  sort: ['createTime,desc']
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete
+} = useTable((p) => listUser({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
+
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.status = undefined
+  search()
+}
+
+// 删除
+const onDelete = (item: UserResp) => {
+  return handleDelete(() => deleteUser(item.id), {
+    content: `是否确定删除用户 [${item.nickname}(${item.username})]？`,
+    showModal: true
+  })
+}
+
+// 导出
+const onExport = ()=>{
+  useDownload(() => exportUser(queryForm))
+}
+
+const treeRef = ref<TreeInstance>()
+const deptName = ref('')
+// 查询部门列表
+const { deptList, getDeptList } = useDept({
+  onSuccess: () => {
+    nextTick(() => {
+      treeRef.value?.expandAll(true)
+    })
+  }
+})
+watch(deptName, (val) => {
+  getDeptList(val)
+})
+
+// 根据选中部门查询
+const handleSelectDept = (keys: Array<any>) => {
+  if (queryForm.deptId === keys[0]) {
+    queryForm.deptId = undefined
+    // 如已选中，再次点击则取消选中
+    treeRef.value?.selectNode(keys, false)
+  } else {
+    queryForm.deptId = keys.length === 1 ? keys[0] : undefined
+  }
+  search()
+}
+
+const UserAddModalRef = ref<InstanceType<typeof UserAddModal>>()
+// 新增
+const onAdd = () => {
+  UserAddModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (item: UserResp) => {
+  UserAddModalRef.value?.onUpdate(item.id)
+}
+
+const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
+// 打开详情
+const openDetail = (item: UserResp) => {
+  UserDetailDrawerRef.value?.open(item.id)
+}
+
+const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
+// 重置密码
+const onResetPwd = (item: UserResp) => {
+  UserResetPwdModalRef.value?.onReset(item.id)
+}
+
+onMounted(() => {
+  getDeptList()
+})
+</script>
+
+<style lang="scss" scoped></style>