feat: 表格空数据展示

frontend/src/components/pure/ms-table/base-table.vue

@@ -79,6 +79,11 @@
           </template>
         </a-table-column>
       </template>
+      <template #empty>
+        <div class="flex h-[20px] flex-col items-center justify-center">
+          <span class="text-[14px] text-[var(--color-text-4)]">{{ t('msTable.empty') }}</span>
+        </div>
+      </template>
     </a-table>
     <div
       class="flex h-[64px] w-[100%] flex-row flex-nowrap items-center justify-end px-0 py-4"

frontend/src/components/pure/ms-table/locale/zh-CN.ts

@@ -31,5 +31,9 @@ export default {
     modify: '修改{name}',
     nameIsNotNull: 'Name cannot be empty',
     nameIsExist: '已有 {name}, 请更改',
+    empty: '无内容',
+    loading: '加载中, 请稍后',
+    errorStatus: '载入数据失败，请',
+    retry: '重试',
   },
 };

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

@@ -19,6 +19,8 @@ export interface MsTableColumnData extends TableColumnData {
   // 是否可编辑
   editable?: boolean;
 }
+
+export type MsTableErrorStatus = boolean | 'error' | 'empty';
 // 表格属性
 export interface MsTableProps {
   // 表格key, 用于存储表格列配置
@@ -67,6 +69,10 @@ export interface MsTableProps {
   editKey?: string;
   // 是否展示禁用的行
   noDisable?: boolean;
+  // 表格的错误状态，默认为false
+  tableErrorStatus?: MsTableErrorStatus;
+  // debug模式，开启后会打印表格所有state
+  debug?: boolean;
   [key: string]: any;
 }
 

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

@@ -7,7 +7,9 @@ import { TableQueryParams } from '@/models/common';
 import { useAppStore } from '@/store';
 
 import type { TableData } from '@arco-design/web-vue';
-import { type MsTableProps, type MsTableData, type MsTableColumn, SpecialColumnEnum } from './type';
+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;
@@ -37,7 +39,7 @@ export default function useTableProps(
     size: 'small',
     scroll: { maxHeight: '600px', x: '1400px' },
     checkable: true,
-    loading: true,
+    loading: false,
     data: [] as MsTableData,
     columns: [] as MsTableColumn,
     rowKey: 'id',
@@ -52,6 +54,9 @@ export default function useTableProps(
     pageSimple: false,
     // 编辑的key
     editKey: SpecialColumnEnum.NAME,
+    // 表格的错误状态
+    tableErrorStatus: false,
+    debug: false,
     ...props,
   };
 
@@ -106,6 +111,11 @@ export default function useTableProps(
     propsRes.value.loading = status;
   };
 
+  // 设置表格错误状态
+  const setTableErrorStatus = (status: MsTableErrorStatus) => {
+    propsRes.value.tableErrorStatus = status;
+  };
+
   /**
    * 分页设置
    * @param current //当前页数
@@ -120,9 +130,7 @@ export default function useTableProps(
   const setPagination = ({ current, total }: SetPaginationPrams) => {
     if (propsRes.value.msPagination && typeof propsRes.value.msPagination === 'object') {
       propsRes.value.msPagination.current = current;
-      if (total) {
+      propsRes.value.msPagination.total = total || 0;
-        propsRes.value.msPagination.total = total;
-      }
     }
   };
 
@@ -171,14 +179,18 @@ export default function useTableProps(
         }
         return item;
       });
+      if (data.total === 0) {
+        setTableErrorStatus('empty');
+      } else {
+        setTableErrorStatus(false);
+      }
       setPagination({ current: data.current, total: data.total });
       return data;
     } catch (err) {
-      // eslint-disable-next-line no-console
+      setTableErrorStatus('error');
-      // TODO 表格异常放到solt的empty
-      console.log(err);
     } finally {
       setLoading(false);
+      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 } from 'vue';
+  import { ref, reactive, watchEffect, 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';
@@ -172,20 +172,24 @@
     scroll: { y: 'auto', x: '1300px' },
     selectable: false,
     noDisable: false,
+    debug: true,
     size: 'default',
   });
 
   const fetchData = async () => {
+    setKeyword(props.keyword);
     await loadList();
   };
 
   const handleAddUserModalCancel = () => {
     userVisible.value = false;
   };
-  watchEffect(() => {
+  watch(
-    setKeyword(props.keyword);
+    () => props.keyword,
+    () => {
       fetchData();
-  });
+    }
+  );
 </script>
 
 <style lang="scss" scoped>