From 39dc39f72b6fd21a08dd2959907b756063c296e5 Mon Sep 17 00:00:00 2001
From: rubyliu <liulubingjava@163.com>
Date: Sun, 13 Aug 2023 22:50:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E7=A9=BA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pure/ms-table/base-table.vue   |  5 ++++
 .../components/pure/ms-table/locale/zh-CN.ts  |  4 +++
 frontend/src/components/pure/ms-table/type.ts |  6 ++++
 .../src/components/pure/ms-table/useTable.ts  | 28 +++++++++++++------
 .../components/systemOrganization.vue         | 14 ++++++----
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index 638efa19a7..54bdd3b9cf 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/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"
diff --git a/frontend/src/components/pure/ms-table/locale/zh-CN.ts b/frontend/src/components/pure/ms-table/locale/zh-CN.ts
index 9ba59096aa..ce06f0c19a 100644
--- a/frontend/src/components/pure/ms-table/locale/zh-CN.ts
+++ b/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: '重试',
   },
 };
diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts
index 07683c30ec..f36e0d312e 100644
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/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;
 }
 
diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts
index 3dc04b450e..f9b87d551d 100644
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/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;
-      }
+      propsRes.value.msPagination.total = total || 0;
     }
   };
 
@@ -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
-      // TODO 表格异常放到solt的empty
-      console.log(err);
+      setTableErrorStatus('error');
     } finally {
       setLoading(false);
+      if (propsRes.value.debug) console.info(propsRes.value);
     }
   };
 
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
index 9c1e50e5b6..f8096a2862 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/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(() => {
-    setKeyword(props.keyword);
-    fetchData();
-  });
+  watch(
+    () => props.keyword,
+    () => {
+      fetchData();
+    }
+  );
 </script>
 
 <style lang="scss" scoped>