|
|
|
|
@ -5,16 +5,16 @@ import {
|
|
|
|
|
ElDropdown,
|
|
|
|
|
ElDropdownMenu,
|
|
|
|
|
ElDropdownItem,
|
|
|
|
|
ComponentSize,
|
|
|
|
|
ElPopover,
|
|
|
|
|
ElTree
|
|
|
|
|
ComponentSize
|
|
|
|
|
// 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'
|
|
|
|
|
import { eachTree } from '@/utils/tree'
|
|
|
|
|
// import { eachTree } from '@/utils/tree'
|
|
|
|
|
|
|
|
|
|
const appStore = useAppStore()
|
|
|
|
|
const sizeMap = computed(() => appStore.sizeMap)
|
|
|
|
|
@ -39,16 +39,6 @@ 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的列
|
|
|
|
|
@ -68,81 +58,6 @@ export default defineComponent({
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
// 在原始树形数据中更新节点位置
|
|
|
|
|
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">
|
|
|
|
|
@ -189,7 +104,7 @@ export default defineComponent({
|
|
|
|
|
</ElTooltip>
|
|
|
|
|
|
|
|
|
|
{/* <ElTooltip content={t('common.columnSetting')} placement="top"> */}
|
|
|
|
|
<ElPopover trigger="click" placement="left">
|
|
|
|
|
{/* <ElPopover trigger="click" placement="left">
|
|
|
|
|
{{
|
|
|
|
|
default: () => {
|
|
|
|
|
return (
|
|
|
|
|
@ -223,7 +138,7 @@ export default defineComponent({
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
</ElPopover>
|
|
|
|
|
</ElPopover> */}
|
|
|
|
|
{/* </ElTooltip> */}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
|
kailong321200875
2 years ago