From ecd38282a3a02c4bb19ddfb9590990cd1799ec30 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Thu, 20 Jul 2023 18:00:32 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20Table=E5=88=97=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Setting/src/Setting.vue        |  4 --
 src/components/Table/src/Table.vue            |  6 ++-
 .../Table/src/components/TableActions.vue     | 44 ++++++++++++++++---
 src/hooks/web/useTable.ts                     |  1 +
 src/styles/theme.less                         |  6 ---
 5 files changed, 45 insertions(+), 16 deletions(-)
 delete mode 100644 src/styles/theme.less

diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index 20f0eb9..142e0b0 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -91,10 +91,6 @@ const setMenuTheme = (color: string) => {
   appStore.setTheme(theme)
   appStore.setCssVarTheme()
 }
-if (layout.value === 'top' && !appStore.getIsDark) {
-  headerTheme.value = '#fff'
-  setHeaderTheme('#fff')
-}
 
 // 监听layout变化，重置一些主题色
 watch(
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index 8af37b5..f7f153b 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -512,7 +512,11 @@ export default defineComponent({
       return (
         <div v-loading={unref(getProps).loading}>
           {unref(getProps).showAction ? (
-            <TableActions onChangSize={changSize} onRefresh={refresh} />
+            <TableActions
+              columns={unref(getProps).columns}
+              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
index 54a6fa5..227a90a 100644
--- a/src/components/Table/src/components/TableActions.vue
+++ b/src/components/Table/src/components/TableActions.vue
@@ -1,16 +1,19 @@
 <script lang="tsx">
-import { defineComponent, unref, computed } from 'vue'
+import { defineComponent, unref, computed, PropType } from 'vue'
 import {
   ElTooltip,
   ElDropdown,
   ElDropdownMenu,
   ElDropdownItem,
   ComponentSize,
-  ElPopover
+  ElPopover,
+  ElTree
 } from 'element-plus'
 import { Icon } from '@/components/Icon'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
+import { TableColumn } from '../types'
+import { cloneDeep } from 'lodash-es'
 
 const appStore = useAppStore()
 const sizeMap = computed(() => appStore.sizeMap)
@@ -19,8 +22,14 @@ const { t } = useI18n()
 
 export default defineComponent({
   name: 'TableActions',
+  props: {
+    columns: {
+      type: Array as PropType<TableColumn[]>,
+      default: () => []
+    }
+  },
   emits: ['refresh', 'changSize'],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const refresh = () => {
       emit('refresh')
     }
@@ -29,6 +38,15 @@ export default defineComponent({
       emit('changSize', size)
     }
 
+    const columns = computed(() => {
+      return cloneDeep(props.columns).filter((v) => {
+        // 去掉type为selection的列和expand的列
+        if (v.type !== 'selection' && v.type !== 'expand') {
+          return v
+        }
+      })
+    })
+
     return () => (
       <>
         <div class="text-right h-28px flex items-center justify-end">
@@ -75,10 +93,26 @@ export default defineComponent({
           </ElTooltip>
 
           {/* <ElTooltip content={t('common.columnSetting')} placement="top"> */}
-          <ElPopover trigger="click" placement="bottom-end">
+          <ElPopover trigger="click" placement="left">
             {{
               default: () => {
-                return <div>假假按揭</div>
+                return (
+                  <div>
+                    <ElTree
+                      data={unref(columns)}
+                      show-checkbox
+                      draggable
+                      node-key="field"
+                      allow-drop={(_draggingNode: any, _dropNode: any, type: string) => {
+                        if (type === 'inner') {
+                          return false
+                        } else {
+                          return true
+                        }
+                      }}
+                    />
+                  </div>
+                )
               },
               reference: () => {
                 return (
diff --git a/src/hooks/web/useTable.ts b/src/hooks/web/useTable.ts
index 8f3f636..6402412 100644
--- a/src/hooks/web/useTable.ts
+++ b/src/hooks/web/useTable.ts
@@ -159,6 +159,7 @@ export const useTable = (config: UseTableConfig) => {
     sortableChange: (e: any) => {
       const { oldIndex, newIndex } = e
       dataList.value.splice(newIndex, 0, dataList.value.splice(oldIndex, 1)[0])
+      // to do something
     }
     // // 删除数据
     // delList: async (ids: string[] | number[], multiple: boolean, message = true) => {
diff --git a/src/styles/theme.less b/src/styles/theme.less
deleted file mode 100644
index 39b03b3..0000000
--- a/src/styles/theme.less
+++ /dev/null
@@ -1,6 +0,0 @@
-// .text-color {
-//   color: var(--el-text-color-regular);
-// }
-// .dark .dark\:text-color {
-//   color: rgba(255, 255, 255, var(--dark-text-color));
-// }