wip: table列设置开发

src/components/Table/src/components/TableActions.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { defineComponent, unref, computed, PropType } from 'vue'
+import { defineComponent, unref, computed, PropType, watch } from 'vue'
 import {
   ElTooltip,
   ElDropdown,
@@ -14,6 +14,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useAppStore } from '@/store/modules/app'
 import { TableColumn } from '../types'
 import { cloneDeep } from 'lodash-es'
+import { eachTree } from '@/utils/tree'
 
 const appStore = useAppStore()
 const sizeMap = computed(() => appStore.sizeMap)
@@ -38,6 +39,16 @@ export default defineComponent({
       emit('changSize', size)
     }
 
+    const defaultCheckeds = computed(() => {
+      const checkeds: string[] = []
+      eachTree(unref(columns), (item: TableColumn) => {
+        if (!item.hidden) {
+          checkeds.push(item.field)
+        }
+      })
+      return checkeds
+    })
+
     const columns = computed(() => {
       return cloneDeep(props.columns).filter((v) => {
         // 去掉type为selection的列和expand的列
@@ -47,6 +58,91 @@ export default defineComponent({
       })
     })
 
+    watch(
+      () => columns.value,
+      (newColumns) => {
+        console.log('columns change：', newColumns)
+      },
+      {
+        deep: true
+      }
+    )
+
+    // 在原始树形数据中更新节点位置
+    function updateTreeData(treeData, draggedNode, targetNode, placement) {
+      let updatedTreeData = cloneDeep(treeData) // 克隆一份原始数据以免修改原数据
+
+      // 找到被拖拽节点和目标节点
+      function findNodes(nodeId, nodes) {
+        for (const node of nodes) {
+          if (node?.field === nodeId) {
+            return node
+          }
+          if (node.children && node.children.length) {
+            const foundNode = findNodes(nodeId, node.children)
+            if (foundNode) {
+              return foundNode
+            }
+          }
+        }
+        return null
+      }
+
+      const draggedNodeToUpdate = findNodes(draggedNode?.data?.field, updatedTreeData)
+      const targetNodeToUpdate = targetNode
+        ? findNodes(targetNode?.data?.field, updatedTreeData)
+        : null
+
+      if (!draggedNodeToUpdate || (targetNode && !targetNodeToUpdate)) {
+        // 未找到节点，可能是数据错误
+        console.error('无法找到要更新的节点或目标节点')
+        return treeData // 返回原数据，不做任何修改
+      }
+
+      // 在原来的位置移除被拖拽节点
+      function removeNode(node) {
+        const parent = updatedTreeData.find((n) => n.children.includes(node))
+        if (parent) {
+          parent.children = parent.children.filter((n) => n?.field !== node?.field)
+        } else {
+          updatedTreeData = updatedTreeData.filter((n) => n?.field !== node?.field)
+        }
+      }
+      removeNode(draggedNodeToUpdate)
+
+      // 将被拖拽节点插入目标节点的位置
+      function insertNode(placement) {
+        if (placement === 'before' || placement === 'after') {
+          const parent = updatedTreeData.find((n) => n.children.includes(targetNodeToUpdate))
+          const index = parent.children.findIndex((n) => n?.field === targetNodeToUpdate?.data?.id)
+          const insertionIndex = placement === 'before' ? index : index + 1
+          parent.children.splice(insertionIndex, 0, draggedNodeToUpdate)
+        } else if (placement === 'inner') {
+          targetNodeToUpdate.children.push(draggedNodeToUpdate)
+        }
+      }
+      if (targetNode) {
+        insertNode(placement)
+      } else {
+        // 如果 targetNode 为空，将被拖拽节点放置为根节点
+        updatedTreeData.push(draggedNodeToUpdate)
+      }
+
+      return updatedTreeData
+    }
+
+    const onNodeDragEnd = (before: any, after: any, inner: string) => {
+      if (inner === 'none') return
+      console.log(before, after, inner)
+      const cloneDeepColumns = cloneDeep(unref(props.columns))
+      const newColumns = updateTreeData(cloneDeepColumns, after, before, inner)
+      console.log(newColumns)
+    }
+
+    const onCheckChange = (data: TableColumn, isChecked: boolean, childrenHasChecked) => {
+      console.log(data, isChecked, childrenHasChecked)
+    }
+
     return () => (
       <>
         <div class="text-right h-28px flex items-center justify-end">
@@ -101,6 +197,7 @@ export default defineComponent({
                     <ElTree
                       data={unref(columns)}
                       show-checkbox
+                      default-checked-keys={unref(defaultCheckeds)}
                       draggable
                       node-key="field"
                       allow-drop={(_draggingNode: any, _dropNode: any, type: string) => {
@@ -110,6 +207,8 @@ export default defineComponent({
                           return true
                         }
                       }}
+                      onNode-drag-end={onNodeDragEnd}
+                      onCheck-change={onCheckChange}
                     />
                   </div>
                 )

src/hooks/web/useTable.ts

@@ -157,6 +157,7 @@ export const useTable = (config: UseTableConfig) => {
     },
 
     sortableChange: (e: any) => {
+      console.log('sortableChange', e)
       const { oldIndex, newIndex } = e
       dataList.value.splice(newIndex, 0, dataList.value.splice(oldIndex, 1)[0])
       // to do something

src/views/Components/Table/TreeTable.vue

@@ -7,7 +7,7 @@ import { reactive, unref } from 'vue'
 import { ElTag, ElButton } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
 
-const { tableRegister, tableState } = useTable({
+const { tableRegister, tableState, tableMethods } = useTable({
   fetchDataApi: async () => {
     const { currentPage, pageSize } = tableState
     const res = await getTreeTableListApi({
@@ -21,6 +21,7 @@ const { tableRegister, tableState } = useTable({
   }
 })
 const { loading, dataList, total, currentPage, pageSize } = tableState
+const { sortableChange } = tableMethods
 
 const { t } = useI18n()
 
@@ -100,10 +101,12 @@ const actionFn = (data: TableSlotDefault) => {
       :data="dataList"
       row-key="id"
       :loading="loading"
+      sortable
       :pagination="{
         total: total
       }"
       @register="tableRegister"
+      @sortable-change="sortableChange"
     />
   </ContentWrap>
 </template>