From 0eefce32a53bf5d494d6c080e015893cd27cd6f3 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Tue, 11 Jul 2023 16:46:43 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20Table=E6=96=B0=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/src/Table.vue            |  29 ++---
 .../Table/src/components/TableActions.vue     | 110 ++++++++++++++++++
 src/locales/en.ts                             |   4 +-
 src/locales/zh-CN.ts                          |   4 +-
 vite.config.ts                                |   3 +
 5 files changed, 126 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Table/src/components/TableActions.vue

diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index 35fa259..30ecf9e 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -1,12 +1,5 @@
 <script lang="tsx">
-import {
-  ElTable,
-  ElTableColumn,
-  ElPagination,
-  ComponentSize,
-  ElTooltipProps,
-  ElTooltip
-} from 'element-plus'
+import { ElTable, ElTableColumn, ElPagination, ComponentSize, ElTooltipProps } from 'element-plus'
 import { defineComponent, PropType, ref, computed, unref, watch, onMounted } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { setIndex } from './helper'
@@ -14,10 +7,7 @@ import type { TableProps, TableColumn, Pagination, TableSetProps } from './types
 import { set } from 'lodash-es'
 import { CSSProperties } from 'vue'
 import { getSlot } from '@/utils/tsxHelper'
-import { Icon } from '@/components/Icon'
-import { useI18n } from '@/hooks/web/useI18n'
-
-const { t } = useI18n()
+import TableActions from './components/TableActions.vue'
 
 export default defineComponent({
   name: 'Table',
@@ -247,6 +237,10 @@ export default defineComponent({
       emit('refresh')
     }
 
+    const changSize = (size: ComponentSize) => {
+      setProps({ size })
+    }
+
     expose({
       setProps,
       setColumn,
@@ -428,16 +422,7 @@ export default defineComponent({
       return (
         <div v-loading={unref(getProps).loading}>
           {unref(getProps).showAction ? (
-            <div class="text-right">
-              <ElTooltip content={t('common.refresh')} placement="top">
-                <Icon
-                  icon="ant-design:sync-outlined"
-                  class="cursor-pointer mr-8px"
-                  hover-color="var(--el-color-primary)"
-                  onClick={refresh}
-                />
-              </ElTooltip>
-            </div>
+            <TableActions onChangSize={changSize} onRefresh={refresh} />
           ) : null}
           <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
             {{
diff --git a/src/components/Table/src/components/TableActions.vue b/src/components/Table/src/components/TableActions.vue
new file mode 100644
index 0000000..4ae23ad
--- /dev/null
+++ b/src/components/Table/src/components/TableActions.vue
@@ -0,0 +1,110 @@
+<script lang="tsx">
+import { defineComponent, unref, computed, ref } from 'vue'
+import {
+  ElTooltip,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  ComponentSize,
+  ElPopover,
+  ClickOutside as vClickOutside
+} from 'element-plus'
+import { Icon } from '@/components/Icon'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+const sizeMap = computed(() => appStore.sizeMap)
+
+const { t } = useI18n()
+
+export default defineComponent({
+  name: 'TableActions',
+  directives: {
+    ClickOutside: vClickOutside
+  },
+  emits: ['refresh', 'changSize'],
+  setup(_, { emit }) {
+    const refresh = () => {
+      emit('refresh')
+    }
+
+    const changSize = (size: ComponentSize) => {
+      emit('changSize', size)
+    }
+
+    const popoverRef = ref()
+    const iconRef = ref()
+
+    const onClickOutside = () => {
+      unref(popoverRef)?.popperRef?.delayHide?.()
+    }
+
+    return () => (
+      <>
+        <ElPopover
+          ref={popoverRef.value}
+          virtualRef={iconRef.value}
+          trigger="click"
+          virtualTriggering
+        >
+          <span> Some content </span>
+        </ElPopover>
+        <div class="text-right h-28px flex items-center justify-end">
+          <ElTooltip content={t('common.refresh')} placement="top">
+            <Icon
+              icon="ant-design:sync-outlined"
+              class="cursor-pointer"
+              hover-color="var(--el-color-primary)"
+              onClick={refresh}
+            />
+          </ElTooltip>
+
+          <ElTooltip content={t('common.size')} placement="top">
+            <ElDropdown trigger="click" onCommand={changSize}>
+              {{
+                default: () => {
+                  return (
+                    <Icon
+                      icon="ant-design:column-height-outlined"
+                      class="cursor-pointer mr-8px ml-8px"
+                      hover-color="var(--el-color-primary)"
+                    />
+                  )
+                },
+                dropdown: () => {
+                  return (
+                    <ElDropdownMenu>
+                      {{
+                        default: () => {
+                          return unref(sizeMap).map((v) => {
+                            return (
+                              <ElDropdownItem key={v} command={v}>
+                                {t(`size.${v}`)}
+                              </ElDropdownItem>
+                            )
+                          })
+                        }
+                      }}
+                    </ElDropdownMenu>
+                  )
+                }
+              }}
+            </ElDropdown>
+          </ElTooltip>
+
+          <ElTooltip content={t('common.columnSetting')} placement="top">
+            <Icon
+              ref={iconRef.value}
+              icon="ant-design:setting-outlined"
+              class="cursor-pointer"
+              hoverColor="var(--el-color-primary)"
+              vClickOutside={onClickOutside}
+            />
+          </ElTooltip>
+        </div>
+      </>
+    )
+  }
+})
+</script>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 04db405..8d0875f 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -42,7 +42,9 @@ export default {
     delNoData: 'Please select the data to delete',
     delSuccess: 'Deleted successfully',
     refresh: 'Refresh',
-    fullscreen: 'Fullscreen'
+    fullscreen: 'Fullscreen',
+    size: 'Size',
+    columnSetting: 'Column setting'
   },
   lock: {
     lockScreen: 'Lock screen',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 9d644e6..e2209fa 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -42,7 +42,9 @@ export default {
     delNoData: '请选择需要删除的数据',
     delSuccess: '删除成功',
     refresh: '刷新',
-    fullscreen: '全屏'
+    fullscreen: '全屏',
+    size: '尺寸',
+    columnSetting: '列设置'
   },
   lock: {
     lockScreen: '锁定屏幕',
diff --git a/vite.config.ts b/vite.config.ts
index 7df5525..f4668dd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -43,6 +43,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           libraryName: 'element-plus',
           esModule: true,
           resolveStyle: (name) => {
+            if (name === 'click-outside') {
+              return ''
+            }
             return `element-plus/es/components/${name.substring(3)}/style/css`
           }
         }]