refactor: 优化通知公告用户选择部分代码

Charles7c · Charles7c · commit 5ade6bcecf8c · 2024-11-07T22:22:41.000+08:00
diff --git a/src/apis/common/common.ts b/src/apis/common/common.ts
@@ -18,6 +18,11 @@ export function listMenuTree(query: { description: string }) {
   return http.get<TreeNodeData[]>(`${BASE_URL}/tree/menu`, query)
 }
 
+/** @desc 查询用户列表 */
+export function listUserDict(query?: { status: number }) {
+  return http.get<LabelValueState[]>(`${BASE_URL}/dict/user`, query)
+}
+
 /** @desc 查询角色列表 */
 export function listRoleDict(query?: { name: string, status: number }) {
   return http.get<LabelValueState[]>(`${BASE_URL}/dict/role`, query)
diff --git a/src/apis/system/user.ts b/src/apis/system/user.ts
@@ -9,6 +9,8 @@ const BASE_URL = '/system/user'
 export function listUser(query: T.UserPageQuery) {
   return http.get<PageRes<T.UserResp[]>>(`${BASE_URL}`, query)
 }
+
+/** @desc 查询所有用户列表 */
 export function listAllUser(query: Partial<T.UserPageQuery>) {
   return http.get<T.UserResp[]>(`${BASE_URL}/list`, query)
 }
diff --git a/src/components/UserSelect/component/UserSelectContent.vue b/src/components/UserSelect/component/UserSelectContent.vue
@@ -1,29 +1,14 @@
 <template>
   <div class="container">
     <a-row :gutter="16">
-      <a-col :span="24" :md="5" class="section">
-        <a-input v-model="searchKey" placeholder="请输入部门名称" allow-clear>
-          <template #prefix>
-            <icon-search />
-          </template>
-        </a-input>
-        <a-tree
-          ref="treeRef"
-          :data="treeData"
-          block-node
-          @select="handleDeptSelect"
-        />
-      </a-col>
-
-      <a-col :span="24" :md="14" class="section">
+      <a-col :span="24" :md="18" class="section">
         <GiTable
           v-model:selectedKeys="selectedKeys"
-          style="min-height: 600px;"
           row-key="id"
           :data="dataList"
           :columns="tableColumns"
           :loading="loading"
-          :scroll="{ x: '100%', y: '100%' }"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
           :pagination="pagination"
           :disabled-tools="['size', 'fullscreen', 'setting', 'refresh']"
           :row-selection="{ type: props.multiple ? 'checkbox' : 'radio', showCheckedAll: true }"
@@ -34,16 +19,19 @@
           <template #top>
             <div>
               <a-space class="mt-5">
-                <a-input v-model="queryForm.description" placeholder="用户名/昵称/描述" />
-                <a-button @click="search">
-                  <template #icon>
-                    <icon-search />
-                  </template>
-                </a-button>
-                <a-button @click="onRefresh">
-                  <template #icon>
-                    <icon-refresh />
-                  </template>
+                <a-input v-model="queryForm.description" placeholder="用户名/昵称/描述" allow-clear @change="search" />
+                <a-tree-select
+                  v-model="queryForm.deptId"
+                  :data="deptList"
+                  placeholder="请选择所属部门"
+                  allow-clear
+                  allow-search
+                  :filter-tree-node="filterDeptOptions"
+                  @change="search"
+                />
+                <a-button @click="reset">
+                  <template #icon><icon-refresh /></template>
+                  <template #default>重置</template>
                 </a-button>
               </a-space>
             </div>
@@ -52,7 +40,7 @@
                 已选中{{ selectedKeys.length }}条记录(可跨页)
               </template>
               <template v-else>
-                未选中任何项目
+                未选中任何用户
               </template>
               <template v-if="selectedKeys.length > 0" #action>
                 <a-link @click="onClearSelected">清空</a-link>
@@ -63,12 +51,18 @@
           <template #status="{ record }">
             <GiCellStatus :status="record.status" />
           </template>
+          <template #gender="{ record }">
+            <GiCellGender :gender="record.gender" />
+          </template>
         </GiTable>
       </a-col>
 
-      <a-col :span="24" :md="5" class="section">
+      <a-col :span="24" :md="6" class="section">
         <a-card title="已选用户">
           <a-table :columns="rightColumn" :data="selectedData">
+            <template #nickname="{ record }">
+              {{ record.nickname }}({{ record.username }})
+            </template>
             <template #action="{ record }">
               <a-button @click="handleDeleteSelectUser(record)">
                 <icon-delete />
@@ -85,8 +79,10 @@
 import type { TreeNodeData } from '@arco-design/web-vue'
 import { useDept } from '@/hooks/app'
 import { useTable } from '@/hooks'
-import { listAllUser, listUser } from '@/apis'
+import { type UserQuery, listAllUser, listUser } from '@/apis'
 import type { UserItem, UserSelectPropType } from '@/components/UserSelect/type'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { isMobile } from '@/utils'
 
 const props = withDefaults(defineProps<UserSelectPropType & { selectedUsers: string | string[] }>(), {
   multiple: false,
@@ -95,95 +91,88 @@ const props = withDefaults(defineProps<UserSelectPropType & { selectedUsers: str
 
 const emit = defineEmits(['update:selectedUsers'])
 
-// 查询表单引用
-const queryForm = ref({ description: '' })
+// 表格列定义
+const tableColumns: TableInstanceColumns[] = [
+  {
+    title: '昵称',
+    dataIndex: 'nickname',
+    slotName: 'nickname',
+    minWidth: 140,
+    ellipsis: true,
+    tooltip: true,
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 140, ellipsis: true, tooltip: true },
+  { title: '状态', slotName: 'status', align: 'center' },
+  { title: '性别', dataIndex: 'gender', slotName: 'gender', align: 'center' },
+  { title: '所属部门', dataIndex: 'deptName', ellipsis: true, tooltip: true, minWidth: 180 },
+  { title: '角色', dataIndex: 'roleNames', minWidth: 160, slotName: 'roleNames' },
+  { 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: 'description', minWidth: 130, ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', width: 140, ellipsis: true, tooltip: true, show: false },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', width: 140, ellipsis: true, tooltip: true, show: false },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
+]
 
-// 部门树引用
-const treeRef = ref()
-const selectedKeys = ref<string[]>([])
-const selectedDeptId = ref<string>('')
-const selectedData = ref<any[]>([])
+// 右侧已选用户列定义
+const rightColumn = [
+  { title: '用户', dataIndex: 'nickname', slotName: 'nickname', minWidth: 140, ellipsis: true, tooltip: true },
+  { title: '操作', dataIndex: 'action', slotName: 'action' },
+]
 
+// 查询表单
+const queryForm = reactive<UserQuery>({
+  sort: ['t1.createTime,desc'],
+})
+
+// 用户列表
 const { tableData: dataList, loading, pagination, search } = useTable(
-  (page) => listUser({ ...queryForm.value, deptId: selectedDeptId.value, sort: [], ...page }),
+  (page) => listUser({ ...queryForm, ...page }),
   { immediate: false, formatResult: (data) => data.map((i) => ({ ...i, disabled: false })) },
 )
 
-// 刷新表单
-const onRefresh = () => {
-  queryForm.value.description = ''
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.deptId = undefined
   search()
 }
 
-// 使用 useDept 钩子获取部门列表数据
+const treeRef = ref()
+// 部门列表
 const { deptList, getDeptList } = useDept({
   onSuccess: () => {
     nextTick(() => treeRef.value?.expandAll(true))
   },
 })
 
-// 部门树过滤函数
-const deptTreeSearch = (keyword: string, data: TreeNodeData[]): TreeNodeData[] => {
-  return data
-    .map((item) => ({
-      ...item,
-      children: item.children ? deptTreeSearch(keyword, item.children) : [],
-    }))
-    .filter(
-      (item) =>
-        item.title?.toLowerCase().includes(keyword.toLowerCase()) || item.children?.length,
-    )
-}
-
-// 过滤树数据
-const searchKey = ref('')
-const treeData = computed(() => {
-  return searchKey.value ? deptTreeSearch(searchKey.value, deptList.value) : deptList.value
-})
-
-// 表格列定义
-const tableColumns = [
-  { title: '昵称', dataIndex: 'nickname' },
-  { title: '部门', dataIndex: 'deptName' },
-  { title: '角色', dataIndex: 'roleNames' },
-  { title: '手机号', dataIndex: 'phone' },
-  { title: '邮箱', dataIndex: 'email' },
-  { title: '状态', dataIndex: 'status', slotName: 'status' },
-]
-
-// 右侧已选用户列定义
-const rightColumn = [
-  { title: '昵称', dataIndex: 'nickname' },
-  { title: '操作', dataIndex: 'action', slotName: 'action' },
-]
-
-// 处理部门选择
-const handleDeptSelect = (keys: Array<any>) => {
-  selectedDeptId.value = keys[0] || ''
-  search()
+// 过滤部门
+const filterDeptOptions = (searchKey: string, nodeData: TreeNodeData) => {
+  if (nodeData.title) {
+    return nodeData.title.toLowerCase().includes(searchKey.toLowerCase())
+  }
+  return false
 }
 
+const selectedKeys = ref<string[]>([])
+const selectedData = ref<any[]>([])
 const emitSelectedUsers = () => {
   emit('update:selectedUsers', selectedKeys.value)
 }
-// 从选中列表中移除用户
-const handleDeleteSelectUser = (user: UserItem) => {
-  selectedData.value = selectedData.value.filter((item) => item.id !== user.id)
-  selectedKeys.value = selectedData.value.map((item) => item.id)
-  emitSelectedUsers()
-}
-
 // 行选择事件
 const onRowSelect = (rowKeys: string[], rowKey: string, record: UserItem) => {
   selectedData.value = props.multiple
     ? rowKeys.includes(rowKey)
       ? [...selectedData.value, record]
       : selectedData.value.filter((item) => item.id !== rowKey)
     : [record]
-
   selectedKeys.value = selectedData.value.map((item) => item.id)
   emitSelectedUsers()
 }
+
 // 全选事件
 const onTableSelectAll = (checked: boolean) => {
   selectedData.value = checked
@@ -193,6 +182,13 @@ const onTableSelectAll = (checked: boolean) => {
   emitSelectedUsers()
 }
 
+// 从选中列表中移除用户
+const handleDeleteSelectUser = (user: UserItem) => {
+  selectedData.value = selectedData.value.filter((item) => item.id !== user.id)
+  selectedKeys.value = selectedData.value.map((item) => item.id)
+  emitSelectedUsers()
+}
+
 // 清空所有选中数据
 const onClearSelected = () => {
   selectedData.value = []
@@ -208,7 +204,7 @@ const init = (selectUsers: string[]) => {
     // admin的id是number 不是string 类型 所以处理一下
     listAllUser({ userIds: selectUsers }).then((dataList) => {
       selectedData.value = dataList.data.map((data) => {
-        return { ...data, id: `${data.id}` }
+        return { ...data, id: data.id }
       })
     })
   }
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
@@ -3,11 +3,10 @@
     <div style="display: flex;">
       <a-select
         v-model="selectedUsers"
-        :allow-clear="true"
-        :multiple="props.multiple"
+        :options="userList"
         :max-tag-count="4"
-        :field-names="{ value: 'id', label: 'nickname' }"
-        :options="options"
+        :multiple="props.multiple"
+        :allow-clear="true"
         @change="handleSelectChange"
       />
       <a-tooltip content="选择用户">
@@ -39,7 +38,7 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
 import UserSelectContent from './component/UserSelectContent.vue'
-import { type UserResp, listAllUser } from '@/apis'
+import { listUserDict } from '@/apis'
 import type { UserSelectPropType } from '@/components/UserSelect/type'
 
 const props = withDefaults(defineProps<UserSelectPropType>(), {
@@ -49,11 +48,11 @@ const props = withDefaults(defineProps<UserSelectPropType>(), {
 
 const emit = defineEmits(['update:value'])
 
-const visible = ref<boolean>(false) // 控制弹窗显示的状态
 const { width } = useWindowSize() // 获取窗口的宽度，用于设置弹窗宽度
-const options = ref<UserResp[]>([]) // 保存用户选项列表
+const visible = ref<boolean>(false) // 控制弹窗显示的状态
+const userList = ref([]) // 保存用户选项列表
 const userSelectContentRef = ref() // 引用 UserSelectContent 组件实例
-const selectedUsers = ref<string[]>([]) // 保存已选择的用户
+const selectedUsers = ref([]) // 保存已选择的用户
 // 打开用户选择弹窗
 const onOpen = () => {
   visible.value = true
@@ -85,15 +84,10 @@ const handleModalOk = () => {
 
 // 组件挂载后初始化用户列表
 onMounted(async () => {
-  const { data } = await listAllUser({}) // 获取所有用户
-  options.value = data.map((user) => {
-    user.id = String(user.id)
-    user.disabled = false // 初始化时设置用户未被禁用
-    return user
-  })
-
+  const { data } = await listUserDict() // 获取所有用户
+  userList.value = data
   // 初始化选择的用户
-  selectedUsers.value = Array.isArray(props.value) ? props.value : props.value.split(',')
+  selectedUsers.value = Array.isArray(props.value) ? props.value : props.value?.split(',')
 })
 </script>
 
diff --git a/src/components/UserSelect/type.ts b/src/components/UserSelect/type.ts
@@ -1,7 +1,8 @@
 export interface UserSelectPropType {
   multiple: boolean
-  value: string | string[]
+  value?: string[]
 }
+
 export interface UserItem {
   id: string
   nickname: string

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ const BASE_URL = '/system/user'`
`9`	`9`	`export function listUser(query: T.UserPageQuery) {`
`10`	`10`	return http.get<PageRes<T.UserResp[]>>(`${BASE_URL}`, query)
`11`	`11`	`}`
	`12`	`+`
	`13`	`+/** @desc 查询所有用户列表 */`
`12`	`14`	`export function listAllUser(query: Partial<T.UserPageQuery>) {`
`13`	`15`	return http.get<T.UserResp[]>(`${BASE_URL}/list`, query)
`14`	`16`	`}`