wip: Table列设置开发

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(

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)}>
             {{

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 (

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) => {

src/styles/theme.less

@@ -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));
-// }