@handaotech-design/bom 0.0.37 → 0.0.39

package/README.md

@@ -38,6 +38,7 @@ app.use(HdBomWorkbench);
 | treeData          | BOM数据    | [TreeDataType](#TreeDataType)[]                | -     |
 | config            | BOM树显示配置 | Object                                         | -     |
 | maintainable      | 是否开启维护模式 | boolean                                        | false |
+| treeShouldSelect  | 是否应该被选中  | (node: DataNode) => Promise<boolean>           | false |
 | node-menu(v-slot) | 树节点菜单内容  | slot(tree-node: [TreeDataType](#TreeDataType)) | _     |
 
 #### 事件
@@ -45,6 +46,13 @@ app.use(HdBomWorkbench);
 |--------|---------|-----------------------------------------------|
 | select | 树节点选中事件 | function(node: [TreeDataType](#TreeDataType)) |
 
+#### expose
+| 参数                           | 说明            | 类型                                          |
+|------------------------------|---------------|---------------------------------------------|
+| updateTreeWithPreservedState | 更新树数据，并保持树状态  | (updateDataFn: () => Promise<void>) => void |
+| getParentKeys                | 获取节点所有父节点的key | (key: string): string[]                     | undefined |
+| getDepth                     | 获取节点在树中的深度    | getDepth(key: string)                       | number                      |
+
 具体交互参考 HdBomTree 组件
 
 ## HdBomWorkbench
@@ -59,9 +67,13 @@ app.use(HdBomWorkbench);
 | treeConfig             | BOM树显示配置   | Object                                   | -                   |
 | layoutConfig           | 布局配置       | Object{maxLeftWidth: number // 布局左侧默认宽度} | {maxLeftWidth: 500} |
 | maintainable           | 是否开启维护模式   | boolean                                  | false               |
+| shouldSelect           | 是否应该被选中    | (node: DataNode) => Promise<boolean>     | false               |
 | tree-node-menu(v-slot) | 树节点菜单内容    | slot                                     |                     |
 
-具体交互参考 HdBomWorkbench 组件
+### expose
+| 参数         | 说明           | 类型           |
+|------------|--------------|--------------|
+| getTreeApi | 获取树组件暴露的所有方法 | () => Object |
 
 
 ### TreeDataType

package/dist/es/components/bom-tree/index.vue

@@ -28,6 +28,7 @@ interface Props {
   treeData: TreeProps['treeData']
   config: BomTreeConfig
   maintainable?: boolean
+  shouldSelect?: (node: DataNode) => Promise<boolean>
 }
 
 const expandedKeys = ref<(string | number)[]>([])
@@ -116,7 +117,10 @@ const selectFirstSelectableNode = (preserveExpanded = false) => {
 }
 
 type Key = string | number
-const onSelected = (keys: Key[], { node }: { node: EventDataNode }) => {
+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]
@@ -146,6 +150,9 @@ watch(
     if (!isPreservingTreeState.value) {
       selectFirstSelectableNode(true)
     }
+    await nextTick(() => {
+      updateTreeContainerHeight()
+    })
   },
   {
     immediate: true,
@@ -224,8 +231,11 @@ async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
   })
 }
 
-async function getDepth(key: string) {
+function getDepth(key: string): number {
   const parentKeys = getParentKeys(key)
+  if (_.isEmpty(parentKeys)) {
+    return -1
+  }
   return parentKeys!.length + 1
 }
 

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import * as _ from 'lodash-es'
+import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
 import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
 import { convertBomDataToTree } from '../../utils'
 import HdLeftRight from '../left-right/index'
@@ -16,9 +17,10 @@ defineOptions({
 interface Props {
   moduleKey: string
   bomData: Optional<BomNode[]>
-  treeConfig: BomTreeConfig
   layoutConfig?: WorkBenchLayoutConfig
   maintainable?: boolean
+  treeConfig: BomTreeConfig
+  treeShouldSelect?: (node: DataNode) => Promise<boolean>
 }
 const bomDataForTree = ref<BomNode[]>()
 const selectedNode = ref<BomNode>()
@@ -41,22 +43,8 @@ watch(
   { immediate: true },
 )
 
-async function updateTreeWithPreservedState(fn: any) {
-  treeRef.value.updateTreeWithPreservedState(fn)
-}
-
-function getParentKeys(key: string) {
-  return treeRef.value.getParentKeys(key)
-}
-
-function getDepth(key: string) {
-  return treeRef.value.getDepth(key)
-}
-
 defineExpose({
-  updateTreeWithPreservedState,
-  getParentKeys,
-  getDepth,
+  getTreeApi: () => treeRef.value,
 })
 </script>
 
@@ -75,6 +63,7 @@ defineExpose({
             :tree-data="bomDataForTree"
             :config="props.treeConfig"
             :maintainable="props.maintainable"
+            :should-select="props.treeShouldSelect"
             @select="(data: BomNode) => onSelected(data)"
           >
             <template #node-menu="{ treeNode }">

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

@@ -28,6 +28,7 @@ interface Props {
   treeData: TreeProps['treeData']
   config: BomTreeConfig
   maintainable?: boolean
+  shouldSelect?: (node: DataNode) => Promise<boolean>
 }
 
 const expandedKeys = ref<(string | number)[]>([])
@@ -116,7 +117,10 @@ const selectFirstSelectableNode = (preserveExpanded = false) => {
 }
 
 type Key = string | number
-const onSelected = (keys: Key[], { node }: { node: EventDataNode }) => {
+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]
@@ -146,6 +150,9 @@ watch(
     if (!isPreservingTreeState.value) {
       selectFirstSelectableNode(true)
     }
+    await nextTick(() => {
+      updateTreeContainerHeight()
+    })
   },
   {
     immediate: true,
@@ -224,8 +231,11 @@ async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
   })
 }
 
-async function getDepth(key: string) {
+function getDepth(key: string): number {
   const parentKeys = getParentKeys(key)
+  if (_.isEmpty(parentKeys)) {
+    return -1
+  }
   return parentKeys!.length + 1
 }
 

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import * as _ from 'lodash-es'
+import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
 import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
 import { convertBomDataToTree } from '../../utils'
 import HdLeftRight from '../left-right/index'
@@ -16,9 +17,10 @@ defineOptions({
 interface Props {
   moduleKey: string
   bomData: Optional<BomNode[]>
-  treeConfig: BomTreeConfig
   layoutConfig?: WorkBenchLayoutConfig
   maintainable?: boolean
+  treeConfig: BomTreeConfig
+  treeShouldSelect?: (node: DataNode) => Promise<boolean>
 }
 const bomDataForTree = ref<BomNode[]>()
 const selectedNode = ref<BomNode>()
@@ -41,22 +43,8 @@ watch(
   { immediate: true },
 )
 
-async function updateTreeWithPreservedState(fn: any) {
-  treeRef.value.updateTreeWithPreservedState(fn)
-}
-
-function getParentKeys(key: string) {
-  return treeRef.value.getParentKeys(key)
-}
-
-function getDepth(key: string) {
-  return treeRef.value.getDepth(key)
-}
-
 defineExpose({
-  updateTreeWithPreservedState,
-  getParentKeys,
-  getDepth,
+  getTreeApi: () => treeRef.value,
 })
 </script>
 
@@ -75,6 +63,7 @@ defineExpose({
             :tree-data="bomDataForTree"
             :config="props.treeConfig"
             :maintainable="props.maintainable"
+            :should-select="props.treeShouldSelect"
             @select="(data: BomNode) => onSelected(data)"
           >
             <template #node-menu="{ treeNode }">

package/package.json

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