@handaotech-design/bom 0.0.49 → 0.0.50

package/dist/lib/components/bom-tree-view/index.vue

@@ -1,420 +0,0 @@
-<script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
-import type { TreeProps } from 'ant-design-vue'
-import { Dropdown, Tree } from 'ant-design-vue'
-import { watchDebounced } from '@vueuse/shared'
-import * as _ from 'lodash-es'
-import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
-import type { EventDataNode } from 'ant-design-vue/es/tree'
-import { MoreOutlined } from '@ant-design/icons-vue'
-import HdGrayInput from '../gray-input'
-import type { BomNode, BomTreeConfig } from '../../models'
-
-const props = withDefaults(defineProps<Props>(), {
-  maintainable: false,
-})
-const emit = defineEmits(['select'])
-const COMPONENT_NAME = 'HdBomTreeView'
-defineOptions({
-  name: COMPONENT_NAME,
-  components: { ATree: Tree, ADropdown: Dropdown },
-})
-
-type TreeNodeWithMeta = DataNode & {
-  parentKeys: string[]
-}
-
-interface Props {
-  treeData: TreeProps['treeData']
-  config: BomTreeConfig
-  maintainable?: boolean
-  shouldSelect?: (node: DataNode) => Promise<boolean>
-  keyNodeMap: Map<string, BomNode>
-  firstSelectableKey?: string
-}
-
-const expandedKeys = ref<(string | number)[]>([])
-const searchValue = ref<string>('')
-const autoExpandParent = ref<boolean>(true)
-const { treeData: _treeData } = toRefs(props)
-const filteredTreeData = ref<TreeProps['treeData']>([])
-const treeContainerHeight = ref<number>(0)
-const treeContainerId = 'treeContainer'
-let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
-const selectedKeys = ref<string[]>([])
-const isPreservingTreeState = ref<boolean>(false)
-const initTreeState = () => {
-  searchValue.value = ''
-  selectedKeys.value = []
-  expandedKeys.value = []
-}
-
-const onExpand = (keys: Key[]) => {
-  expandedKeys.value = keys
-  autoExpandParent.value = false
-}
-
-const updateTreeContainerHeight = () => {
-  const treeContainer = document.getElementById(treeContainerId)
-  if (treeContainer) {
-    treeContainerHeight.value = treeContainer.clientHeight
-  }
-}
-
-const buildKeyToNodeMap = (treeData: TreeProps['treeData']) => {
-  const keyMap = new Map<string, TreeNodeWithMeta>()
-  const traverse = (nodes: TreeProps['treeData'] = [], parentKeys: string[] = []) => {
-    for (const node of nodes) {
-      if (parentKeys) {
-        keyMap.set(node.key as string, {
-          ...node,
-          parentKeys: parentKeys || [],
-        } as any)
-      }
-      if (!_.isEmpty(node.children)) {
-        traverse(node.children, [...parentKeys, node.key as string])
-      }
-    }
-  }
-  traverse(treeData)
-  return keyMap
-}
-
-const filterTreeData = (data: TreeProps['treeData'], filteredKeys: string[]) => {
-  const getNodes = (result: any, node: any) => {
-    if (_.includes(filteredKeys, node.key)) {
-      result.push({ ...node })
-      return result
-    }
-    if (Array.isArray(node.children)) {
-      const children = node.children.reduce(getNodes, [])
-      if (!_.isEmpty(children)) {
-        result.push({ ...node, children })
-      }
-    }
-    return result
-  }
-  return (data || []).reduce(getNodes, [])
-}
-
-// 获取直接父节点的 key
-const getParentKeys = (key: string): string[] | undefined => {
-  const treeNode = keyToNodeMap.get(key)
-  return treeNode?.parentKeys || []
-}
-
-const selectFirstSelectableNode = (preserveExpanded = false) => {
-  const firstNode: any = _.find(Array.from(keyToNodeMap.values()), node => (node as any)?.selectable)
-  if (!firstNode) {
-    return
-  }
-
-  nextTick(() => {
-    const parentKeys = getParentKeys(firstNode.key as string) as string[]
-    expandedKeys.value = preserveExpanded
-      ? Array.from(new Set([...expandedKeys.value, ...parentKeys])) // 取并集
-      : parentKeys
-    selectedKeys.value = [firstNode.key]
-  })
-}
-
-type Key = string | number
-const onSelected = async (keys: Key[], { node }: { node: EventDataNode }) => {
-  if (_.isFunction(props.shouldSelect) && node?.dataRef && !(await props.shouldSelect(node.dataRef))) {
-    return
-  }
-  const key = node?.dataRef?.key
-  if (key) {
-    selectedKeys.value = [key as string]
-  }
-  else {
-    selectedKeys.value = []
-  }
-}
-
-onMounted(async () => {
-  window.addEventListener('resize', updateTreeContainerHeight)
-  await nextTick(() => {
-    updateTreeContainerHeight()
-  })
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateTreeContainerHeight)
-})
-
-watch(
-  () => _treeData.value,
-  async () => {
-    filteredTreeData.value = _treeData.value
-    keyToNodeMap = buildKeyToNodeMap(_treeData.value ?? [])
-    initTreeState()
-    // if (!isPreservingTreeState.value) {
-    //   selectFirstSelectableNode(true)
-    // }
-  },
-  {
-    immediate: true,
-  },
-)
-
-watchDebounced(
-  searchValue, (value: string) => {
-    let expanded: any[]
-    if (_.isEmpty(value)) {
-      expanded = getParentKeys(selectedKeys.value[0]) || []
-      filteredTreeData.value = _treeData.value
-    }
-    else {
-      const filteredNodes: TreeProps['treeData'] = []
-      expanded = (Array.from(keyToNodeMap.values()))
-        .map((item: any) => {
-          if (hasSearchMatch(item.title)) {
-            filteredNodes.push(item)
-            return getParentKeys(item.key)
-          }
-          return null
-        })
-        .filter((item, i, self) => item && self.indexOf(item) === i)
-      const filteredKeys = filteredNodes.map(item => item.key)
-      filteredTreeData.value = _.isEmpty(filteredKeys) ? [] : filterTreeData(_treeData.value, filteredKeys as unknown as string[])
-    }
-    expandedKeys.value = expanded
-    nextTick(() => {
-      expandedKeys.value = _.uniq(expanded.flat(1)) as any as string[]
-    })
-  }, { debounce: 500 })
-
-watch(
-  () => selectedKeys.value,
-  () => {
-    if (selectedKeys.value && selectedKeys.value.length) {
-      return emit('select', keyToNodeMap.get(selectedKeys.value[0]))
-    }
-  },
-)
-
-function getIconClass(icon: string, isSelected: boolean) {
-  return isSelected ? `i-icon-${icon}-selected` : `i-icon-${icon}`
-}
-
-function getTitlePart(title: string, partType: 'before' | 'after') {
-  const _searchValue = searchValue.value || ''
-  const index = title.indexOf(_searchValue)
-
-  return {
-    before: title.substring(0, index),
-    after: title.substring(index + _searchValue.length),
-  }[partType]
-}
-
-function hasSearchMatch(title: string) {
-  return searchValue.value && title.includes(searchValue.value)
-}
-
-async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
-  const prevSelected = selectedKeys.value?.[0]
-  const prevExpanded = [...expandedKeys.value]
-  isPreservingTreeState.value = true
-  await updateDataFn()
-  await nextTick(() => {
-    expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
-
-    if (prevSelected && keyToNodeMap.has(prevSelected)) {
-      selectedKeys.value = [prevSelected]
-    }
-    else {
-      selectFirstSelectableNode(true)
-    }
-    isPreservingTreeState.value = false
-  })
-}
-
-function getDepth(key: string): number {
-  const parentKeys = getParentKeys(key)
-  if (_.isEmpty(parentKeys)) {
-    return -1
-  }
-  return parentKeys!.length + 1
-}
-
-defineExpose({
-  updateTreeWithPreservedState,
-  getParentKeys,
-  getDepth,
-})
-</script>
-
-<template>
-  <div class="flex flex-col h-100%">
-    <div class="search-box">
-      <HdGrayInput
-        v-model:value="searchValue"
-        :placeholder="props.config?.filter?.placeholder || '输入关键词进行筛选（如名称/编号）'"
-        class="search-input"
-      >
-        <template #prefix>
-          <div class="i-icon-search w-16px h-16px" />
-        </template>
-      </HdGrayInput>
-    </div>
-    <div :id="treeContainerId" class="flex-grow tree-wrapper mt-12px overflow-y-hidden">
-      <div v-if="!_.isEmpty(filteredTreeData)">
-        <a-tree
-          :height="treeContainerHeight"
-          :expanded-keys="expandedKeys"
-          :auto-expand-parent="autoExpandParent"
-          :tree-data="filteredTreeData"
-          :block-node="true"
-          :default-selected-keys="[props.firstSelectableKey]"
-          @expand="onExpand"
-          @select="onSelected"
-        >
-          <template #title="{ title, dataRef }">
-            <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
-              <div
-                v-if="!!dataRef.icon"
-                class="icon w-20px h-20px mr-4px min-w-20px"
-                :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
-              />
-              <div v-if="hasSearchMatch(title)" class="tree-node-text">
-                <span>{{ getTitlePart(title, 'before') }}</span>
-                <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
-                <span>{{ getTitlePart(title, 'after') }}</span>
-              </div>
-              <div v-else class="tree-node-text">
-                {{ title }}
-              </div>
-              <div v-if="props.maintainable" class="click-menu-wrapper">
-                <a-dropdown
-                  :trigger="['hover', 'click']"
-                  :destroy-popup-on-hide="true"
-                >
-                  <MoreOutlined class="menu-trigger" @click.stop />
-                  <template #overlay>
-                    <slot name="node-menu" :tree-node="dataRef" />
-                  </template>
-                </a-dropdown>
-              </div>
-            </div>
-          </template>
-          <template #switcherIcon="{ dataRef }">
-            <div
-              v-if="expandedKeys.includes(dataRef.key)" class="i-icon-remove-minus icon w-16px h-16px"
-              style="font-size: 20px;"
-            />
-            <div v-else class="i-icon-remove-plus icon w-16px h-16px" />
-          </template>
-        </a-tree>
-      </div>
-      <div v-show="_.isEmpty(filteredTreeData)" class="w-100% h-100% flex justify-center items-center">
-        <span>暂无数据</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.tree-wrapper {
-  background-color: #fff;
-  min-height: 0;
-}
-
-.search-box {
-  padding: 0 16px;
-}
-
-:deep(.ant-tree-list) .ant-tree-treenode-motion {
-  width: 100%;
-}
-:deep(.ant-tree-list) .ant-tree-treenode {
-  width: 100%;
-  align-items: center;
-  color: #2C2C2C;
-  font-size: 16px;
-  display: flex;
-  justify-content: center;
-  padding: 4px 0 4px 12px;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-indent-unit {
-  width: 10px;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-switcher {
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  margin: 0 10px 0 0;
-  align-self: center;
-  line-height: 16px;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper {
-  transition: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-bottom: 0;
-  display: inline-flex;
-  overflow: visible !important;
-  flex: 1;
-  min-width: 0;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper:hover {
-  background-color: #E9EBED;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-  position: relative;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.selectable {
-  cursor: pointer;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.not-selectable {
-  cursor: auto;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .click-menu-wrapper {
-  display: none;
-  margin-left: auto;
-  margin-right: 4px;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle:hover .click-menu-wrapper {
-  display: block;
-}
-:deep(.ant-tree-list) .ant-tree-treenode:hover {
-  background-color: #E9EBED;
-}
-:deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper {
-  user-select: auto;
-}
-:deep(.ant-tree-list) .ant-tree-treenode.ant-tree-treenode-selected {
-  background-color: #EDF4FF;
-  border-radius: 4px;
-  color: #1E3B9D;
-  font-weight: 700;
-}
-:deep(.ant-tree-list) .ant-tree-treenode.ant-tree-treenode-selected .ant-tree-switcher, :deep(.ant-tree-list) .ant-tree-treenode.ant-tree-treenode-selected .ant-tree-node-content-wrapper {
-  background-color: #EDF4FF;
-}
-:deep(.ant-tree-list) .ant-tree-node-content-wrapper {
-  align-items: center;
-  padding: 0;
-}
-:deep(.ant-tree-list) .ant-tree-node-content-wrapper {
-  display: flex;
-  margin-bottom: -4px;
-}
-:deep(.ant-tree-list) .ant-tree-node-content-wrapper .ant-tree-title {
-  flex-grow: 1;
-  display: block;
-}
-
-.tree-node-text {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-</style>