From fd3cda634cfdbd58c2075529f894718a936a7a80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Sun, 15 Aug 2021 08:54:42 +0800
Subject: [PATCH] perf(table): fixed code style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复一些代码检查警告，并且为table的canResize属性添加不兼容场景警告

close: #1070
---
 src/components/Page/index.ts                   |  2 ++
 src/components/Page/src/PageWrapper.vue        |  8 +++++++-
 src/components/Table/src/BasicTable.vue        | 17 +++++++++++++----
 src/components/Table/src/hooks/useTableForm.ts |  6 ++++--
 src/views/demo/table/FetchTable.vue            |  7 ++++---
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts
index d09626405a8..2d3f6dd7c24 100644
--- a/src/components/Page/index.ts
+++ b/src/components/Page/index.ts
@@ -5,3 +5,5 @@ import pageWrapper from './src/PageWrapper.vue';
 
 export const PageFooter = withInstall(pageFooter);
 export const PageWrapper = withInstall(pageWrapper);
+
+export const PageWrapperFixedHeightKey = 'PageWrapperFixedHeight';
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 8f5ab8c8063..4a3cda868de 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -33,7 +33,7 @@
   </div>
 </template>
 <script lang="ts">
-  import type { CSSProperties, PropType } from 'vue';
+  import { CSSProperties, PropType, provide } from 'vue';
 
   import { defineComponent, computed, watch, ref, unref } from 'vue';
   import PageFooter from './PageFooter.vue';
@@ -43,6 +43,7 @@
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
   import { useContentHeight } from '/@/hooks/web/useContentHeight';
+  import { PageWrapperFixedHeightKey } from '..';
 
   export default defineComponent({
     name: 'PageWrapper',
@@ -68,6 +69,11 @@
       const footerRef = ref(null);
       const { prefixCls } = useDesign('page-wrapper');
 
+      provide(
+        PageWrapperFixedHeightKey,
+        computed(() => props.fixedHeight)
+      );
+
       const getIsContentFullHeight = computed(() => {
         return props.contentFullHeight;
       });
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 386e932dc16..2a97b131372 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -39,9 +39,10 @@
     ColumnChangeParam,
   } from './types/table';
 
-  import { defineComponent, ref, computed, unref, toRaw } from 'vue';
+  import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
   import { Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
+  import { PageWrapperFixedHeightKey } from '/@/components/Page';
   import expandIcon from './components/ExpandIcon';
   import HeaderCell from './components/HeaderCell.vue';
   import { InnerHandlers } from './types/table';
@@ -64,6 +65,7 @@
   import { omit } from 'lodash-es';
   import { basicProps } from './props';
   import { isFunction } from '/@/utils/is';
+  import { warn } from '/@/utils/log';
 
   export default defineComponent({
     components: {
@@ -104,6 +106,13 @@
         return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
       });
 
+      const isFixedHeightPage = inject(PageWrapperFixedHeightKey);
+      watchEffect(() => {
+        unref(isFixedHeightPage) &&
+          props.canResize &&
+          warn("[BasicTable] 'canRize' not worked with PageWrapper while 'fixedHeight' is true");
+      });
+
       const { getLoading, setLoading } = useLoading(getProps);
       const {
         getPaginationInfo,
@@ -380,9 +389,9 @@
         align-items: center;
       }
 
-      .ant-table-tbody > tr.ant-table-row-selected td {
-        //background-color: fade(@primary-color, 8%) !important;
-      }
+      //.ant-table-tbody > tr.ant-table-row-selected td {
+      //background-color: fade(@primary-color, 8%) !important;
+      //}
     }
 
     .ant-pagination {
diff --git a/src/components/Table/src/hooks/useTableForm.ts b/src/components/Table/src/hooks/useTableForm.ts
index 87c2ccedc90..42b716921b2 100644
--- a/src/components/Table/src/hooks/useTableForm.ts
+++ b/src/components/Table/src/hooks/useTableForm.ts
@@ -21,9 +21,11 @@ export function useTableForm(
     };
   });
 
-  const getFormSlotKeys = computed(() => {
+  const getFormSlotKeys: ComputedRef<string[]> = computed(() => {
     const keys = Object.keys(slots);
-    return keys.map((item) => (item.startsWith('form-') ? item : null)).filter(Boolean);
+    return keys
+      .map((item) => (item.startsWith('form-') ? item : null))
+      .filter((item) => !!item) as string[];
   });
 
   function replaceFormSlotKey(key: string) {
diff --git a/src/views/demo/table/FetchTable.vue b/src/views/demo/table/FetchTable.vue
index 2fcc43d9f9c..21c4dffec77 100644
--- a/src/views/demo/table/FetchTable.vue
+++ b/src/views/demo/table/FetchTable.vue
@@ -1,21 +1,22 @@
 <template>
-  <div class="p-4">
+  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
     <BasicTable @register="registerTable">
       <template #toolbar>
         <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button>
         <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button>
       </template>
     </BasicTable>
-  </div>
+  </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns } from './tableData';
+  import { PageWrapper } from '/@/components/Page';
 
   import { demoListApi } from '/@/api/demo/table';
   export default defineComponent({
-    components: { BasicTable },
+    components: { BasicTable, PageWrapper },
     setup() {
       const [registerTable, { reload }] = useTable({
         title: '远程加载示例',