refactor: 优化用户管理代码

2025-09-08 22:57:11 +08:00 · 2024-11-13 22:42:38 +08:00
parent 293718f670
commit f650a6f3ae
11 changed files with 259 additions and 267 deletions
--- a/src/constant/common.ts
+++ b/src/constant/common.ts
@@ -1,5 +1,14 @@
-interface LabelValueItem { label: string, value: number, color: string }
+interface LabelValueItem { label: string, value: number, color?: string }
+
+/** @desc 状态 */
 export const DisEnableStatusList: LabelValueItem[] = [
  { label: '启用', value: 1, color: 'green' },
  { label: '禁用', value: 2, color: 'red' },
 ]
+
+/** @desc 性别 */
+export const GenderList: LabelValueItem[] = [
+  { label: '男', value: 1 },
+  { label: '女', value: 2 },
+  { label: '未知', value: 0 },
+]
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -51,7 +51,6 @@ declare module 'vue' {
    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
-    UserSelectContent: typeof import('./../components/UserSelect/component/UserSelectContent.vue')['default']
    Verify: typeof import('./../components/Verify/index.vue')['default']
    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
--- a/src/views/dashboard/workplace/components/Carousel.vue
+++ b/src/views/dashboard/workplace/components/Carousel.vue
@@ -22,11 +22,11 @@
 <script lang="ts" setup>
 const images = [
  {
-    src: `https://continew.top/qrcode-text.png?${new Date().getTime()}`,
+    src: `https://continew.top/qrcode-text.jpg?${new Date().getTime()}`,
    url: 'https://continew.top/about/intro.html',
  },
  {
-    src: `https://continew.top/sponsor.png?${new Date().getTime()}`,
+    src: `https://continew.top/sponsor.jpg?${new Date().getTime()}`,
    url: 'https://continew.top/sponsor.html',
  },
 ]
--- a/src/views/dashboard/workplace/components/Project.vue
+++ b/src/views/dashboard/workplace/components/Project.vue
@@ -49,19 +49,8 @@
                </a-typography-text>
              </a-typography-paragraph>
            </template>
-            <template #avatar>
-              <a-avatar-group :size="32" :max-count="7">
-                <a-avatar
-                  v-for="(contributor, idx) in item.contributors"
-                  :key="idx"
-                  :title="contributor.name"
-                >
-                  <img :src="contributor.avatar" alt="avatar" />
-                </a-avatar>
-              </a-avatar-group>
-            </template>
          </a-card-meta>
-          <template v-if="!loading && item.status !== '孵化'" #actions>
+          <template #actions>
            <a-tooltip content="点个 Star 吧">
              <span class="icon-hover">
                <a :href="item.url" target="_blank" rel="noopener"><IconThumbUp :size="20" /></a>
@@ -75,9 +64,6 @@
 </template>

 <script lang="ts" setup>
-import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios'
-import qs from 'query-string'
-
 const list = [
  {
    alias: 'ContiNew Admin',
@@ -140,43 +126,6 @@ const list = [
    statusColor: 'rgb(var(--warning-6))',
  },
 ]
-
-const get = <T = unknown>(url: string, params?: object, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
-  return new Promise((resolve, reject) => {
-    axios
-      .request<T>({
-        method: 'get',
-        url,
-        params,
-        paramsSerializer: (obj) => {
-          return qs.stringify(obj)
-        },
-        ...config,
-      })
-      .then((res: AxiosResponse) => resolve(res.data))
-      .catch((err: { msg: string }) => reject(err))
-  })
-}
-
-const loading = ref(false)
-// 查询数据
-const getDataList = async () => {
-  try {
-    loading.value = true
-    for (const item of list) {
-      const { data } = await get(`https://api.charles7c.top/git/repos/contributors/${item.owner}/${item.name}`)
-      item.contributors = data
-    }
-  } catch (err) {
-    // console.log(err)
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  getDataList()
-})
 </script>

 <style scoped lang="less">
@@ -185,9 +134,9 @@ onMounted(() => {
  overflow: hidden;
  .badge {
    position: absolute;
-    font-size: 10px;
-    height: 16px;
-    line-height: 16px;
+    font-size: 11px;
+    height: 18px;
+    line-height: 18px;
    text-align: center;
    width: 74px;
    color: #fff;
--- a/src/views/system/user/UserAddDrawer.vue
+++ b/src/views/system/user/UserAddDrawer.vue
@@ -8,78 +8,17 @@
    @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" show-word-limit />
-      </a-form-item>
-      <a-form-item label="昵称" field="nickname">
-        <a-input v-model.trim="form.nickname" placeholder="请输入昵称" :max-length="30" show-word-limit />
-      </a-form-item>
-      <a-form-item v-if="!isUpdate" label="密码" field="password">
-        <a-input-password v-model.trim="form.password" placeholder="请输入密码" :max-length="32" show-word-limit />
-      </a-form-item>
-      <a-form-item label="手机号码" field="phone">
-        <a-input v-model.trim="form.phone" placeholder="请输入手机号码" :max-length="11" />
-      </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>
+    <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
  </a-drawer>
 </template>

 <script setup lang="ts">
-import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue'
+import { Message, type TreeNodeData } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
-import { addUser, getUser, updateUser } from '@/apis/system'
+import { addUser, getUser, updateUser } from '@/apis/system/user'
+import { type Columns, GiForm, type Options } from '@/components/GiForm'
 import type { Gender, Status } from '@/types/global'
+import { GenderList } from '@/constant/common'
 import { useForm } from '@/hooks'
 import { useDept, useRole } from '@/hooks/app'
 import { encryptByRsa } from '@/utils/encrypt'
@@ -87,30 +26,141 @@ import { encryptByRsa } from '@/utils/encrypt'
 const emit = defineEmits<{
  (e: 'save-success'): void
 }>()
+
 const { width } = useWindowSize()
-const { roleList, getRoleList } = useRole()
-const { deptList, getDeptList } = useDept()
-// 过滤部门
-const filterDeptOptions = (searchKey: string, nodeData: TreeNodeData) => {
-  if (nodeData.title) {
-    return nodeData.title.toLowerCase().includes(searchKey.toLowerCase())
-  }
-  return false
-}

 const dataId = ref('')
+const visible = ref(false)
 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 formRef = ref<InstanceType<typeof GiForm>>()
+const { roleList, getRoleList } = useRole()
+const { deptList, getDeptList } = useDept()
+
+const options: Options = {
+  form: { size: 'large' },
+  btns: { hide: true },
 }

+const columns: Columns = reactive([
+  {
+    label: '用户名',
+    field: 'username',
+    type: 'input',
+    props: {
+      placeholder: '请输入用户名',
+      maxLength: 64,
+      showWordLimit: true,
+    },
+    rules: [{ required: true, message: '请输入用户名' }],
+  },
+  {
+    label: '昵称',
+    field: 'nickname',
+    type: 'input',
+    props: {
+      placeholder: '请输入昵称',
+      maxLength: 30,
+      showWordLimit: true,
+    },
+    rules: [{ required: true, message: '请输入昵称' }],
+  },
+  {
+    label: '密码',
+    field: 'password',
+    type: 'input-password',
+    props: {
+      placeholder: '请输入密码',
+      maxLength: 32,
+      showWordLimit: true,
+    },
+    rules: [{ required: true, message: '请输入密码' }],
+    hide: () => {
+      return isUpdate.value
+    },
+  },
+  {
+    label: '手机号码',
+    field: 'phone',
+    type: 'input',
+    props: {
+      placeholder: '请输入手机号码',
+      maxLength: 11,
+    },
+  },
+  {
+    label: '邮箱',
+    field: 'email',
+    type: 'input',
+    props: {
+      placeholder: '请输入邮箱',
+      maxLength: 255,
+    },
+  },
+  {
+    label: '性别',
+    field: 'gender',
+    type: 'radio-group',
+    options: GenderList,
+  },
+  {
+    label: '所属部门',
+    field: 'deptId',
+    type: 'tree-select',
+    data: deptList,
+    props: {
+      placeholder: '请选择所属部门',
+      allowClear: true,
+      allowSearch: true,
+      fallbackOption: false,
+      filterTreeNode(searchKey: string, nodeData: TreeNodeData) {
+        if (nodeData.title) {
+          return nodeData.title.toLowerCase().includes(searchKey.toLowerCase())
+        }
+        return false
+      },
+    },
+    rules: [{ required: true, message: '请选择所属部门' }],
+  },
+  {
+    label: '角色',
+    field: 'roleIds',
+    type: 'select',
+    options: roleList,
+    props: {
+      placeholder: '请选择角色',
+      multiple: true,
+      allowClear: true,
+      allowSearch: true,
+    },
+    rules: [{ required: true, message: '请选择角色' }],
+  },
+  {
+    label: '描述',
+    field: 'description',
+    type: 'textarea',
+    props: {
+      placeholder: '请输入描述',
+      maxLength: 200,
+      showWordLimit: true,
+      autoSize: { minRows: 3, maxRows: 5 },
+    },
+  },
+  {
+    label: '状态',
+    field: 'status',
+    type: 'switch',
+    props: {
+      type: 'round',
+      checkedValue: 1,
+      uncheckedValue: 2,
+      checkedText: '启用',
+      uncheckedText: '禁用',
+    },
+  },
+])
+
 const { form, resetForm } = useForm({
  gender: 1 as Gender,
  status: 1 as Status,
@@ -118,44 +168,15 @@ const { form, resetForm } = useForm({

 // 重置
 const reset = () => {
-  formRef.value?.resetFields()
+  formRef.value?.formRef?.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 () => {
  const rawPassword = form.password
  try {
-    const isInvalid = await formRef.value?.validate()
+    const isInvalid = await formRef.value?.formRef?.validate()
    if (isInvalid) return false
    if (isUpdate.value) {
      await updateUser(form, dataId.value)
@@ -175,5 +196,35 @@ const save = async () => {
  }
 }

+// 新增
+const onAdd = async () => {
+  reset()
+  if (!deptList.value.length) {
+    await getDeptList()
+  }
+  if (!roleList.value.length) {
+    await getRoleList()
+  }
+  dataId.value = ''
+  visible.value = true
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  reset()
+  dataId.value = id
+  if (!deptList.value.length) {
+    await getDeptList()
+  }
+  if (!roleList.value.length) {
+    await getRoleList()
+  }
+  const { data } = await getUser(id)
+  Object.assign(form, data)
+  visible.value = true
+}
+
 defineExpose({ onAdd, onUpdate })
 </script>
+
+<style lang="scss" scoped></style>
--- a/src/views/system/user/UserDetailDrawer.vue
+++ b/src/views/system/user/UserDetailDrawer.vue
@@ -30,27 +30,28 @@

 <script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core'
-import { type UserDetailResp, getUser } from '@/apis/system'
+import { type UserDetailResp, getUser } from '@/apis/system/user'

 const { width } = useWindowSize()

 const dataId = ref('')
 const dataDetail = ref<UserDetailResp>()
+const visible = ref(false)
+
 // 查询详情
 const getDataDetail = async () => {
-  const res = await getUser(dataId.value)
-  dataDetail.value = res.data
+  const { data } = await getUser(dataId.value)
+  dataDetail.value = data
 }

-const visible = ref(false)
-// 详情
-const onDetail = async (id: string) => {
+// 打开
+const onOpen = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
 }

-defineExpose({ onDetail })
+defineExpose({ onOpen })
 </script>

 <style lang="scss" scoped></style>
--- a/src/views/system/user/UserImportDrawer.vue
+++ b/src/views/system/user/UserImportDrawer.vue
@@ -99,8 +99,10 @@ import { useDownload, useForm } from '@/hooks'
 const emit = defineEmits<{
  (e: 'save-success'): void
 }>()
+
 const { width } = useWindowSize()

+const visible = ref(false)
 const formRef = ref<FormInstance>()
 const uploadFile = ref([])

@@ -129,12 +131,6 @@ const reset = () => {
  resetForm()
 }

-const visible = ref(false)
-const onImport = () => {
-  reset()
-  visible.value = true
-}
-
 // 下载模板
 const downloadTemplate = () => {
  useDownload(() => downloadUserImportTemplate())
@@ -181,7 +177,13 @@ const save = async () => {
  }
 }

-defineExpose({ onImport })
+// 打开
+const onOpen = () => {
+  reset()
+  visible.value = true
+}
+
+defineExpose({ onOpen })
 </script>

 <style lang="scss" scoped>
--- a/src/views/system/user/UserResetPwdModal.vue
+++ b/src/views/system/user/UserResetPwdModal.vue
@@ -24,7 +24,9 @@ import { encryptByRsa } from '@/utils/encrypt'
 const emit = defineEmits<{
  (e: 'save-success'): void
 }>()
+
 const dataId = ref('')
+const visible = ref(false)
 const formRef = ref<InstanceType<typeof GiForm>>()

 const options: Options = {
@@ -44,14 +46,6 @@ const reset = () => {
  resetForm()
 }

-const visible = ref(false)
-// 重置
-const onReset = (id: string) => {
-  reset()
-  dataId.value = id
-  visible.value = true
-}
-
 // 保存
 const save = async () => {
  try {
@@ -66,5 +60,14 @@ const save = async () => {
  }
 }

-defineExpose({ onReset })
+// 打开
+const onOpen = (id: string) => {
+  reset()
+  dataId.value = id
+  visible.value = true
+}
+
+defineExpose({ onOpen })
 </script>
+
+<style lang="scss" scoped></style>
--- a/src/views/system/user/UserUpdateRoleModal.vue
+++ b/src/views/system/user/UserUpdateRoleModal.vue
@@ -81,10 +81,12 @@ const onOpen = async (id: string) => {
  if (!roleList.value.length) {
    await getRoleList()
  }
-  const res = await getUser(id)
-  Object.assign(form, res.data)
+  const { data } = await getUser(id)
+  Object.assign(form, data)
  visible.value = true
 }

 defineExpose({ onOpen })
 </script>
+
+<style lang="scss" scoped></style>
--- a/src/views/system/user/dept/index.vue
+++ b/src/views/system/user/dept/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="left-tree">
-    <div class="left-tree__search">
-      <a-input v-model="searchKey" :placeholder="props.placeholder" allow-clear>
+  <div class="container">
+    <div class="search">
+      <a-input v-model="searchKey" placeholder="请输入部门名称" allow-clear>
        <template #prefix><icon-search /></template>
      </a-input>
    </div>
-    <div class="left-tree__container">
-      <div class="left-tree__tree">
+    <div class="tree-wrapper">
+      <div class="tree">
        <a-tree
          ref="treeRef"
          :data="treeData"
@@ -28,12 +28,7 @@
                css: true,
              }"
            >
-              <!-- eslint-disable-next-line vue/no-parsing-error -->
-              <template v-if="index = getMatchIndex(node?.title), index < 0">{{ node?.title }}</template>
-              <span v-else>{{ node?.title?.substr(0, index) }}
-                <span style="color: rgb(var(--arcoblue-6));">{{ node?.title?.substr(index, searchKey.length) }}</span>
-                {{ node?.title?.substr(index + searchKey.length) }}
-              </span>
+              {{ node?.title }}
            </a-typography-paragraph>
          </template>
        </a-tree>
@@ -47,15 +42,10 @@ import type { TreeInstance, TreeNodeData } from '@arco-design/web-vue'
 import { ref } from 'vue'
 import { useDept } from '@/hooks/app'

-interface Props {
-  placeholder?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: '请输入关键词',
-})
 const emit = defineEmits<{
  (e: 'node-click', keys: Array<any>): void
 }>()
+
 // 选中节点
 const selectedKeys = ref()
 const select = (keys: Array<any>) => {
@@ -83,7 +73,7 @@ const search = (keyword: string) => {
  const loop = (data: TreeNodeData[]) => {
    const result = [] as TreeNodeData[]
    data.forEach((item: TreeNodeData) => {
-      if (item.title?.toLowerCase().includes(keyword.toLowerCase())) {
+      if (item.title?.toLowerCase().includes(keyword)) {
        result.push({ ...item })
      } else if (item.children) {
        const filterData = loop(item.children)
@@ -102,20 +92,9 @@ const search = (keyword: string) => {

 const treeData = computed(() => {
  if (!searchKey.value) return deptList.value
-  return search(searchKey.value)
+  return search(searchKey.value.toLowerCase())
 })

-/**
- * 获取匹配索引
- *
- * @param name 名称
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-const getMatchIndex = (name: string) => {
-  if (!searchKey.value) return -1
-  return name.toLowerCase().indexOf(searchKey.value.toLowerCase())
-}
-
 onMounted(() => {
  getDeptList()
 })
@@ -152,7 +131,7 @@ onMounted(() => {
  }
 }

-.left-tree {
+.container {
  flex: 1;
  overflow: hidden;
  position: relative;
@@ -161,26 +140,25 @@ onMounted(() => {
  box-sizing: border-box;
  height: 100%;

-  &__search {
+  .search {
    margin-bottom: 16px;
  }

-  &__container {
+  .tree-wrapper {
    flex: 1;
    overflow: hidden;
    background-color: var(--color-bg-1);
    position: relative;
    height: 100%;
    margin-bottom:10px;
-  }
-
-  &__tree {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto
+    .tree {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      overflow: auto
+    }
  }
 }
 </style>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -7,7 +7,7 @@
    </a-row>
    <a-row align="stretch" :gutter="14" class="h-full page_content">
      <a-col :xs="0" :sm="0" :md="6" :lg="5" :xl="5" :xxl="4" class="h-full ov-hidden">
-        <DeptTree placeholder="请输入名称" @node-click="handleSelectDept" />
+        <DeptTree @node-click="handleSelectDept" />
      </a-col>
      <a-col :xs="24" :sm="24" :md="18" :lg="19" :xl="19" :xxl="20" class="h-full ov-hidden">
        <GiTable
@@ -64,7 +64,7 @@
                v-permission="['system:user:delete']"
                status="danger"
                :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                :disabled="record.disabled"
+                :disabled="record.isSystem"
                @click="onDelete(record)"
              >
                删除
@@ -111,23 +111,11 @@ import { DisEnableStatusList } from '@/constant/common'

 defineOptions({ name: 'SystemUser' })

-const queryForm = reactive<UserQuery>({
-  sort: ['t1.createTime,desc', 't1.id,desc'],
-})
-const {
-  tableData: dataList,
-  loading,
-  pagination,
-  search,
-  handleDelete,
-} = useTable((page) => listUser({ ...queryForm, ...page }), { immediate: false })
-
 const options: Options = reactive({
  form: { layout: 'inline' },
  grid: { cols: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 3 } },
  fold: { enable: true, index: 1, defaultCollapsed: true },
 })
-
 const queryFormColumns: Columns = reactive([
  {
    type: 'input',
@@ -159,7 +147,17 @@ const queryFormColumns: Columns = reactive([
    },
  },
 ])
+const queryForm = reactive<UserQuery>({
+  sort: ['t1.createTime,desc', 't1.id,desc'],
+})

+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete,
+} = useTable((page) => listUser({ ...queryForm, ...page }), { immediate: false })
 const columns: TableInstanceColumns[] = [
  {
    title: '序号',
@@ -178,13 +176,13 @@ const columns: TableInstanceColumns[] = [
    fixed: !isMobile() ? 'left' : undefined,
  },
  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 140, ellipsis: true, tooltip: true },
-  { title: '状态', slotName: 'status', align: 'center' },
-  { title: '性别', slotName: 'gender', align: 'center' },
-  { title: '所属部门', dataIndex: 'deptName', ellipsis: true, tooltip: true, minWidth: 180 },
-  { title: '角色', dataIndex: 'roleNames', minWidth: 160, slotName: 'roleNames' },
+  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
+  { title: '性别', dataIndex: 'gender', slotName: 'gender', align: 'center' },
+  { title: '所属部门', dataIndex: 'deptName', minWidth: 180, ellipsis: true, tooltip: true },
+  { title: '角色', dataIndex: 'roleNames', slotName: 'roleNames', minWidth: 165 },
  { title: '手机号', dataIndex: 'phone', minWidth: 170, ellipsis: true, tooltip: true },
  { title: '邮箱', dataIndex: 'email', minWidth: 170, ellipsis: true, tooltip: true },
-  { title: '系统内置', slotName: 'isSystem', width: 100, align: 'center', show: false },
+  { title: '系统内置', dataIndex: 'isSystem', slotName: 'isSystem', width: 100, align: 'center', show: false },
  { title: '描述', dataIndex: 'description', minWidth: 130, ellipsis: true, tooltip: true },
  { title: '创建人', dataIndex: 'createUserString', width: 140, ellipsis: true, tooltip: true, show: false },
  { title: '创建时间', dataIndex: 'createTime', width: 180 },
@@ -211,7 +209,7 @@ const reset = () => {
 // 删除
 const onDelete = (record: UserResp) => {
  return handleDelete(() => deleteUser(record.id), {
-    content: `是否确定删除 [${record.nickname}(${record.username})]？`,
+    content: `是否确定删除用户「${record.nickname}(${record.username})」？`,
    showModal: true,
  })
 }
@@ -227,18 +225,18 @@ const handleSelectDept = (keys: Array<any>) => {
  search()
 }

+const UserImportDrawerRef = ref<InstanceType<typeof UserImportDrawer>>()
+// 导入
+const onImport = () => {
+  UserImportDrawerRef.value?.onOpen()
+}
+
 const UserAddDrawerRef = ref<InstanceType<typeof UserAddDrawer>>()
 // 新增
 const onAdd = () => {
  UserAddDrawerRef.value?.onAdd()
 }

-const UserImportDrawerRef = ref<InstanceType<typeof UserImportDrawer>>()
-// 导入
-const onImport = () => {
-  UserImportDrawerRef.value?.onImport()
-}
-
 // 修改
 const onUpdate = (record: UserResp) => {
  UserAddDrawerRef.value?.onUpdate(record.id)
@@ -247,13 +245,13 @@ const onUpdate = (record: UserResp) => {
 const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
 // 详情
 const onDetail = (record: UserResp) => {
-  UserDetailDrawerRef.value?.onDetail(record.id)
+  UserDetailDrawerRef.value?.onOpen(record.id)
 }

 const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
 // 重置密码
 const onResetPwd = (record: UserResp) => {
-  UserResetPwdModalRef.value?.onReset(record.id)
+  UserResetPwdModalRef.value?.onOpen(record.id)
 }

 const UserUpdateRoleModalRef = ref<InstanceType<typeof UserUpdateRoleModal>>()