refactor(系统设置): 用户组管理搜索&表格total重置

frontend/src/components/pure/ms-table/useTable.ts

@@ -8,8 +8,6 @@ import { useAppStore } from '@/store';
 
 import type { TableData } from '@arco-design/web-vue';
 import { type MsTableProps, type MsTableData, type MsTableColumn, SpecialColumnEnum, MsTableErrorStatus } from './type';
-import { set } from 'nprogress';
-import debug from '@/utils/env';
 
 export interface Pagination {
   current: number;
@@ -130,7 +128,9 @@ export default function useTableProps(
   const setPagination = ({ current, total }: SetPaginationPrams) => {
     if (propsRes.value.msPagination && typeof propsRes.value.msPagination === 'object') {
       propsRes.value.msPagination.current = current;
-      propsRes.value.msPagination.total = total || 0;
+      if (total !== undefined) {
+        propsRes.value.msPagination.total = total;
+      }
     }
   };
 
@@ -190,6 +190,7 @@ export default function useTableProps(
       setTableErrorStatus('error');
     } finally {
       setLoading(false);
+      // eslint-disable-next-line no-console
       if (propsRes.value.debug) console.info(propsRes.value);
     }
   };

frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue

@@ -29,7 +29,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { useTableStore } from '@/store';
-  import { ref, reactive, watchEffect, watch } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import { postOrgTable } from '@/api/modules/setting/system/organizationAndProject';
   import { TableKeyEnum } from '@/enums/tableEnum';
@@ -174,6 +174,7 @@
     noDisable: false,
     debug: true,
     size: 'default',
+    showSetting: true,
   });
 
   const fetchData = async () => {

frontend/src/views/setting/system/organizationAndProject/index.vue

@@ -11,9 +11,9 @@
       <div class="flex items-center">
         <a-input-search
           :placeholder="t('system.user.searchUser')"
-          class="w-[230px]"
+          class="w-[240px]"
-          @change="handleKeywordChange"
+          @press-enter="handleEnter"
-          @search="handleKeywordChange"
+          @search="handleSearch"
         ></a-input-search>
         <a-radio-group v-model="currentTable" class="ml-[14px]" type="button">
           <a-radio value="organization">{{
@@ -46,9 +46,12 @@
   const projectCount = ref(0);
   const currentKeyword = ref('');
 
-  const handleKeywordChange = (value: string) => {
+  const handleSearch = (value: string) => {
     currentKeyword.value = value;
   };
+  const handleEnter = (eve: Event) => {
+    currentKeyword.value = (eve.target as HTMLInputElement).value;
+  };
 
   const handleAddOrganization = () => {
     organizationVisible.value = true;

frontend/src/views/setting/system/usergroup/components/authTable.vue

@@ -93,7 +93,7 @@
     if ((column as TableColumnData).dataIndex === 'ability') {
       if (record.isSystem) {
         return {
-          rowspan: 2,
+          rowspan: systemSpan.value,
         };
       }
       if (record.isOrganization) {

frontend/src/views/setting/system/usergroup/components/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="user-group-left">
     <a-input-search
-      v-model="searchKey"
       class="w-[252px]"
       :placeholder="t('system.userGroup.searchHolder')"
       @press-enter="enterData"
@@ -75,7 +74,6 @@
 
   const { t } = useI18n();
 
-  const searchKey = ref('');
   const store = useUserGroupStore();
   const { openModal } = useModal();
   // 请求loading

frontend/src/views/setting/system/usergroup/components/userTable.vue

@@ -13,7 +13,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { useUserGroupStore, useTableStore } from '@/store';
-  import { watchEffect, ref } from 'vue';
+  import { watchEffect, ref, watch } from 'vue';
   import { postUserByUserGroup, deleteUserFromUserGroup } from '@/api/modules/setting/usergroup';
   import { UserTableItem } from '@/models/setting/usergroup';
   import { TableKeyEnum } from '@/enums/tableEnum';
@@ -25,6 +25,9 @@
   const store = useUserGroupStore();
   const tableStore = useTableStore();
   const userVisible = ref(false);
+  const props = defineProps<{
+    keyword: string;
+  }>();
 
   const userGroupUsercolumns: MsTableColumn = [
     {
@@ -57,7 +60,7 @@
 
   tableStore.initColumn(TableKeyEnum.USERGROUPUSER, userGroupUsercolumns, 'drawer');
 
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(postUserByUserGroup, {
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postUserByUserGroup, {
     tableKey: TableKeyEnum.USERGROUPUSER,
     scroll: { x: '600px' },
     selectable: true,
@@ -65,6 +68,7 @@
   });
 
   const fetchData = async () => {
+    setKeyword(props.keyword);
     await loadList();
   };
   const handleRemove = async (record: UserTableItem) => {
@@ -88,4 +92,10 @@
       fetchData();
     }
   });
+  watch(
+    () => props.keyword,
+    () => {
+      fetchData();
+    }
+  );
 </script>

frontend/src/views/setting/system/usergroup/index.vue

@@ -12,11 +12,13 @@
         <div class="flex flex-row items-center justify-between">
           <div class="title">{{ store.userGroupInfo.currentName }}</div>
           <div class="flex items-center">
-            <a-input class="w-[240px]" :placeholder="t('system.userGroup.searchPlaceholder')">
+            <a-input-search
-              <template #prefix>
+              v-if="currentTable === 'user'"
-                <icon-search />
+              :placeholder="t('system.user.searchUser')"
-              </template>
+              class="w-[240px]"
-            </a-input>
+              @press-enter="handleEnter"
+              @search="handleSearch"
+            ></a-input-search>
             <a-radio-group v-if="couldShowUser" v-model="currentTable" class="ml-[14px]" type="button">
               <a-radio value="auth">{{ t('system.userGroup.auth') }}</a-radio>
               <a-radio value="user">{{ t('system.userGroup.user') }}</a-radio>
@@ -24,7 +26,7 @@
           </div>
         </div>
         <div class="mt-[16px]">
-          <user-table v-if="currentTable === 'user'" />
+          <user-table v-if="currentTable === 'user'" :keyword="currentKeyword" />
           <auth-table v-if="currentTable === 'auth'" />
         </div>
       </div>
@@ -45,11 +47,19 @@
   const collapse = ref(true);
 
   const { t } = useI18n();
+  const currentKeyword = ref('');
+
+  const handleSearch = (value: string) => {
+    currentKeyword.value = value;
+  };
+  const handleEnter = (eve: Event) => {
+    currentKeyword.value = (eve.target as HTMLInputElement).value;
+  };
 
   const store = useUserGroupStore();
   const couldShowUser = computed(() => store.userGroupInfo.currentType === 'SYSTEM');
   watch(
-    () => couldShowUser,
+    () => couldShowUser.value,
     (val) => {
       if (!val) {
         currentTable.value = 'auth';