refactor: user manage add filter

ui/src/api/system/chat-user.ts

@@ -3,6 +3,7 @@ import { get, put, post, del } from '@/request/index'
 import type {pageRequest, PageList} from '@/api/type/common'
 import type {ChatUserItem} from '@/api/type/systemChatUser'
 import type {Ref} from 'vue'
+
 const prefix = '/system/chat_user'
 
 
@@ -20,12 +21,12 @@ const getChatUserList: (loading?: Ref<boolean>) => Promise<Result<ChatUserItem[]
  */
 const getUserManage: (
   page: pageRequest,
-  username_or_nickname: string,
+  params?: any,
   loading?: Ref<boolean>,
-) => Promise<Result<PageList<ChatUserItem[]>>> = (page, username_or_nickname, loading) => {
+) => Promise<Result<PageList<ChatUserItem[]>>> = (page, params, loading) => {
   return get(
     `${prefix}/user_manage/${page.current_page}/${page.page_size}`,
-    username_or_nickname ? { username_or_nickname } : undefined,
+    params ? params : undefined,
     loading,
   )
 }

ui/src/api/system/user-manage.ts

@@ -12,12 +12,12 @@ const prefix = '/user_manage'
  */
 const getUserManage: (
   page: pageRequest,
-  email_or_username: string,
+  params?: any,
   loading?: Ref<boolean>,
-) => Promise<Result<any>> = (page, email_or_username, loading) => {
+) => Promise<Result<any>> = (page, params, loading) => {
   return get(
     `${prefix}/${page.current_page}/${page.page_size}`,
-    email_or_username ? {email_or_username} : undefined,
+    params ? params : undefined,
     loading,
   )
 }

ui/src/views/system-chat-user/user-manage/index.vue

@@ -38,17 +38,25 @@
           <div class="flex-between complex-search">
             <el-select class="complex-search__left" v-model="search_type" style="width: 120px"
                        @change="search_type_change">
-              <el-option :label="$t('views.login.loginForm.username.label')" value="name" />
+              <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
+              <el-option :label="$t('views.userManage.userForm.nick_name.label')"
+                         value="nick_name"/>
             </el-select>
-            <el-input v-if="search_type === 'name'" v-model="search_form.name" @change="getList"
+            <el-input v-if="search_type === 'username'" v-model="search_form.username"
-              :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
+                      @change="getList"
+                      style="width: 220px"
+                      clearable/>
+            <el-input v-if="search_type === 'nick_name'" v-model="search_form.nick_name"
+                      @change="getList"
+                      style="width: 220px" clearable/>
           </div>
         </div>
         <app-table class="mt-16" :data="userTableData" :pagination-config="paginationConfig"
                    @sizeChange="handleSizeChange" @changePage="getList" v-loading="loading"
                    @selection-change="handleSelectionChange" @sort-change="handleSortChange">
           <el-table-column type="selection" width="55"/>
-          <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
+          <el-table-column prop="nick_name"
+                           :label="$t('views.userManage.userForm.nick_name.label')"/>
           <el-table-column prop="username" :label="$t('common.username')"/>
           <el-table-column prop="is_active" :label="$t('common.status.label')">
             <template #default="{ row }">
@@ -69,7 +77,8 @@
             </template>
           </el-table-column>
 
-          <el-table-column prop="email" :label="$t('views.login.loginForm.email.label')" show-overflow-tooltip>
+          <el-table-column prop="email" :label="$t('views.login.loginForm.email.label')"
+                           show-overflow-tooltip>
             <template #default="{ row }">
               {{ row.email || '-' }}
             </template>
@@ -79,7 +88,8 @@
               {{ row.phone || '-' }}
             </template>
           </el-table-column>
-          <el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')" min-width="100">
+          <el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')"
+                           min-width="100">
             <template #default="{ row }">
               <TagGroup :tags="row.user_group_names"/>
             </template>
@@ -111,11 +121,13 @@
           <el-table-column :label="$t('common.operation')" width="160" align="left" fixed="right">
             <template #default="{ row }">
               <span @click.stop>
-                <el-switch size="small" v-model="row.is_active" :before-change="() => changeState(row)" />
+                <el-switch size="small" v-model="row.is_active"
+                           :before-change="() => changeState(row)"/>
               </span>
               <el-divider direction="vertical"/>
               <span class="mr-8">
-                <el-button type="primary" text @click.stop="editUser(row)" :title="$t('common.edit')"
+                <el-button type="primary" text @click.stop="editUser(row)"
+                           :title="$t('common.edit')"
                            v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
                     [PermissionConst.WORKSPACE_CHAT_USER_EDIT.getWorkspacePermission],[],'OR')"
                 >
@@ -137,7 +149,8 @@
                 </el-button>
               </span>
               <span>
-                <el-button :disabled="row.role === 'ADMIN'" type="primary" text @click.stop="deleteUserManage(row)"
+                <el-button :disabled="row.role === 'ADMIN'" type="primary" text
+                           @click.stop="deleteUserManage(row)"
                            :title="$t('common.delete')"
                            v-hasPermission="new ComplexPermission([RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.USER.getWorkspaceRole,],
                 [PermissionConst.WORKSPACE_CHAT_USER_DELETE.getWorkspacePermission],[],'OR')"
@@ -153,10 +166,12 @@
       </el-card>
     </ContentContainer>
 
-    <UserDrawer :title="title" :optionLoading="optionLoading" :chatGroupList="chatGroupList" ref="UserDrawerRef"
+    <UserDrawer :title="title" :optionLoading="optionLoading" :chatGroupList="chatGroupList"
+                ref="UserDrawerRef"
                 @refresh="refresh"/>
     <UserPwdDialog ref="UserPwdDialogRef" @refresh="refresh"/>
-    <SetUserGroupsDialog :optionLoading="optionLoading" :chatGroupList="chatGroupList" ref="setUserGroupsRef"
+    <SetUserGroupsDialog :optionLoading="optionLoading" :chatGroupList="chatGroupList"
+                         ref="setUserGroupsRef"
                          @refresh="refresh"/>
     <SyncUsersDialog ref="syncUsersDialogRef" @refresh="refresh"/>
   </div>
@@ -183,17 +198,20 @@ const rightOutlined = iconMap['right-outlined'].iconReader()
 
 const search_type = ref('name')
 const search_form = ref<{
-  name: string
+  username: string,
+  nick_name?: string,
 }>({
-  name: '',
+  username: '',
+  nick_name: '',
 })
 const search_type_change = () => {
-  search_form.value = { name: '' }
+  search_form.value = {username: '', nick_name: ''}
 }
 
 const loading = ref(false)
 
 const multipleSelection = ref<any[]>([])
+
 function handleSelectionChange(val: any[]) {
   multipleSelection.value = val
 }
@@ -207,8 +225,11 @@ const paginationConfig = reactive({
 const userTableData = ref<ChatUserItem[]>([])
 
 function getList() {
+  const params = {
+    [search_type.value]: search_form.value[search_type.value as keyof typeof search_form.value],
+  }
   return userManageApi
-    .getUserManage(paginationConfig, search_form.value.name, loading)
+    .getUserManage(paginationConfig, params, loading)
     .then((res) => {
       userTableData.value = res.data.records
       paginationConfig.total = res.data.total
@@ -216,6 +237,7 @@ function getList() {
 }
 
 const orderBy = ref<string>('')
+
 function handleSortChange({prop, order}: { prop: string; order: string }) {
   orderBy.value = order === 'ascending' ? prop : `-${prop}`
   getList()
@@ -246,6 +268,7 @@ function changeState(row: ChatUserItem) {
 
 const title = ref('')
 const UserDrawerRef = ref()
+
 function editUser(row: ChatUserItem) {
   title.value = t('views.userManage.editUser')
   UserDrawerRef.value.open(row)
@@ -277,6 +300,7 @@ function deleteUserManage(row: ChatUserItem) {
 }
 
 const UserPwdDialogRef = ref()
+
 function editPwdUser(row: ChatUserItem) {
   UserPwdDialogRef.value.open(row)
 }
@@ -292,6 +316,7 @@ onMounted(() => {
 
 const optionLoading = ref(false)
 const chatGroupList = ref<ListItem[]>([])
+
 async function getChatGroupList() {
   try {
     const res = await SystemGroupApi.getUserGroup(optionLoading)
@@ -321,11 +346,13 @@ function handleBatchDelete() {
 }
 
 const setUserGroupsRef = ref<InstanceType<typeof SetUserGroupsDialog>>()
+
 function setUserGroups() {
   setUserGroupsRef.value?.open(multipleSelection.value.map(item => (item.id)))
 }
 
 const syncUsersDialogRef = ref<InstanceType<typeof SyncUsersDialog>>()
+
 function syncUsers() {
   syncUsersDialogRef.value?.open()
 }

ui/src/views/system/user-manage/index.vue

@@ -14,13 +14,28 @@
             style="width: 120px"
             @change="search_type_change"
           >
-            <el-option :label="$t('views.login.loginForm.username.label')" value="name"/>
+            <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
+            <el-option :label="$t('views.userManage.userForm.nick_name.label')" value="nick_name"/>
+            <el-option :label="$t('views.login.loginForm.email.label')" value="email"/>
           </el-select>
           <el-input
-            v-if="search_type === 'name'"
+            v-if="search_type === 'username'"
-            v-model="search_form.name"
+            v-model="search_form.username"
+            @change="getList"
+            style="width: 220px"
+            clearable
+          />
+          <el-input
+            v-else-if="search_type === 'nick_name'"
+            v-model="search_form.nick_name"
+            @change="getList"
+            style="width: 220px"
+            clearable
+          />
+          <el-input
+            v-else-if="search_type === 'email'"
+            v-model="search_form.email"
             @change="getList"
-            :placeholder="$t('common.searchBar.placeholder')"
             style="width: 220px"
             clearable
           />
@@ -71,7 +86,8 @@
             {{ row.phone || '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="role" :label="$t('views.role.member.role')" min-width="100" v-if="user.isEE()">
+        <el-table-column prop="role" :label="$t('views.role.member.role')" min-width="100"
+                         v-if="user.isEE()">
           <template #default="{ row }">
             <TagGroup :tags="row.role"/>
           </template>
@@ -157,12 +173,17 @@ import {MsgSuccess, MsgConfirm} from '@/utils/message'
 import {t} from '@/locales'
 import {ValidCount, ValidType} from "@/enums/common.ts";
 import useStore from "@/stores";
+
 const {user, common} = useStore()
-const search_type = ref('name')
+const search_type = ref('username')
 const search_form = ref<{
-  name: string
+  username: string,
+  nick_name?: string,
+  email?: string
 }>({
-  name: '',
+  username: '',
+  nick_name: '',
+  email: ''
 })
 
 const UserDrawerRef = ref()
@@ -178,7 +199,7 @@ const paginationConfig = reactive({
 const userTableData = ref<any[]>([])
 
 const search_type_change = () => {
-  search_form.value = {name: ''}
+  search_form.value = {username: '', nick_name: '', email: ''}
 }
 
 function handleSizeChange() {
@@ -187,8 +208,11 @@ function handleSizeChange() {
 }
 
 function getList() {
+  const params = {
+    [search_type.value]: search_form.value[search_type.value as keyof typeof search_form.value],
+  }
   return userManageApi
-    .getUserManage(paginationConfig, search_form.value.name, loading)
+    .getUserManage(paginationConfig, params, loading)
     .then((res) => {
       userTableData.value = res.data.records
       paginationConfig.total = res.data.total