@handaotech-design/bom 0.0.40 → 0.0.42

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

@@ -0,0 +1,420 @@
+<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>

package/dist/lib/components/bom-workbench/index.vue

@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue'
 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 type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
 import { convertBomDataToTree } from '../../utils'
 import HdLeftRight from '../left-right/index'
@@ -21,8 +22,11 @@ interface Props {
   maintainable?: boolean
   treeConfig: BomTreeConfig
   treeShouldSelect?: (node: DataNode) => Promise<boolean>
+  loadData?: (node: BomNode, eventNode?: EventDataNode) => Promise<BomNode[]>
 }
 const bomDataForTree = ref<BomNode[]>()
+const firstSelectableKey = ref<string | undefined>()
+const keyNodeMap = ref<Map<string, BomNode>>(new Map())
 const selectedNode = ref<BomNode>()
 
 async function onSelected(data: BomNode) {
@@ -37,7 +41,10 @@ watch(
       bomDataForTree.value = undefined
     }
     else {
-      bomDataForTree.value = convertBomDataToTree(props.bomData!, props.treeConfig.nodeConfig.rule)
+      const { treeData, nodeMap, firstSelectableNodeKey } = convertBomDataToTree(props.bomData!, props.treeConfig.nodeConfig.rule)
+      bomDataForTree.value = treeData
+      keyNodeMap.value = nodeMap
+      firstSelectableKey.value = firstSelectableNodeKey
     }
   },
   { immediate: true },
@@ -64,6 +71,9 @@ defineExpose({
             :config="props.treeConfig"
             :maintainable="props.maintainable"
             :should-select="props.treeShouldSelect"
+            :first-selectable-key="firstSelectableKey"
+            :key-node-map="keyNodeMap"
+            :load-data="props.loadData"
             @select="(data: BomNode) => onSelected(data)"
           >
             <template #node-menu="{ treeNode }">

package/dist/lib/utils/bom.d.ts

@@ -1,3 +1,7 @@
 import type { BomNode, BomTreeNodeConfig } from '../models';
 import type { BaseRule } from './rule-engine';
-export declare const convertBomDataToTree: (treeData: BomNode[], nodeConfigRule: BaseRule<BomTreeNodeConfig>) => BomNode[];
+export declare function convertBomDataToTree(treeData: BomNode[], nodeConfigRule: BaseRule<BomTreeNodeConfig>): {
+    treeData: any[];
+    nodeMap: Map<string, any>;
+    firstSelectableNodeKey: string | undefined;
+};

package/dist/lib/utils/bom.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertBomDataToTree = void 0;
+exports.convertBomDataToTree = convertBomDataToTree;
 var _ = _interopRequireWildcard(require("lodash-es"));
 var _models = require("../models");
 var _ruleEngine = require("./rule-engine");
-var _template = require("./template");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const defaultTreeNodeConfig = {
@@ -15,33 +14,75 @@ const defaultTreeNodeConfig = {
     template: _models.defaultTitleTemplate
   }
 };
-const convertBomDataToTree = (treeData, nodeConfigRule) => {
+function convertBomDataToTree(treeData, nodeConfigRule) {
   const ruleEngine = new _ruleEngine.RuleEngine(nodeConfigRule);
-  const traverse = (nodes = []) => {
-    for (const node of nodes) {
-      const nodeConfig = ruleEngine.matchOne({
+  const nodeMap = /* @__PURE__ */new Map();
+  const compileCache = /* @__PURE__ */new Map();
+  let firstSelectableNodeKey;
+  const getCompiledTemplate = tpl => {
+    if (!compileCache.has(tpl)) {
+      compileCache.set(tpl, _.template(tpl));
+    }
+    return compileCache.get(tpl);
+  };
+  const configCache = /* @__PURE__ */new Map();
+  const getConfig = node => {
+    const key = node.businessType || "default";
+    if (!configCache.has(key)) {
+      configCache.set(key, ruleEngine.matchOne({
         bomNode: node
-      }, defaultTreeNodeConfig);
+      }, defaultTreeNodeConfig));
+    }
+    return configCache.get(key);
+  };
+  const traverse = (nodes = [], parentKeys = []) => {
+    for (const node of nodes) {
+      const nodeConfig = getConfig(node);
       const {
         title,
         selectable,
         icon,
         ...rest
-      } = nodeConfig || {};
+      } = nodeConfig;
       const titleTemplate = title?.template ?? _models.defaultTitleTemplate;
+      let finalTitle = "--";
+      try {
+        const compiled = getCompiledTemplate(titleTemplate);
+        finalTitle = compiled(node);
+      } catch {}
+      const boolSelectable = selectable === _models.YesNo.YES;
+      if (boolSelectable && !firstSelectableNodeKey) {
+        firstSelectableNodeKey = node.key;
+      }
+      const isLeafObj = {
+        PROCESS_PLAN: false,
+        OPERATION: true
+      };
       Object.assign(node, {
         key: node.key,
-        title: (0, _template.genText)(node, titleTemplate),
-        selectable: selectable === _models.YesNo.YES,
+        title: finalTitle,
+        selectable: boolSelectable,
         icon,
+        isLeaf: !node?.children?.length || isLeafObj[node.businessType],
         ...rest
       });
+      const {
+        children,
+        ...restProps
+      } = node;
+      nodeMap.set(node.key, {
+        ...restProps,
+        parentKeys
+      });
       if (!_.isEmpty(node.children)) {
-        traverse(node.children);
+        traverse(node.children, [...parentKeys, node.key]);
       }
     }
   };
   traverse(treeData);
-  return treeData;
-};
-exports.convertBomDataToTree = convertBomDataToTree;
+  return {
+    treeData,
+    nodeMap,
+    firstSelectableNodeKey
+  };
+}

package/dist/style.css

@@ -42,6 +42,7 @@
 [grid=""]{display:grid;}
 .m-20px{margin:20px;}
 .mr-4px{margin-right:4px;}
+.mr-8px{margin-right:8px;}
 .ms{margin-inline-start:1rem;}
 .mt-12px{margin-top:12px;}
 .inline{display:inline;}
@@ -84,4 +85,6 @@
 .filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .ease,
-[ease=""]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+[ease=""]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+.ease-out,
+[ease-out=""]{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handaotech-design/bom",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "license": "MIT",
   "sideEffects": false,
   "exports": {