Bom 组件库

安装

1. 依赖安装

yarn add @handaotech-design/bom @handaotech-design/vue

2. 样式引入

import '@handaotech-design/bom/dist/style.css';

3. 组件注册

插件批量注册

// HdBom 组件库统一注册（也可按需注册）
import HdBom from '@handaotech-design/bom';
app.use(HdBom)

单个组件注册

// 根据需要注册使用到的组件
import { HdBomWorkbench } from '@handaotech-design/bom';
app.use(HdBomWorkbench);

组件列表

HdBomTree

注意！：

• 需“确保”HdBomTree、HdBomWorkbench 组件的容器元素自身有一定高度，树组件需根据容器高度自适应虚拟滚动的高度

API

HdBomTree Props

| 参数 | 说明 | 类型 | 默认值 | |-------------------|----------|------------------------------------------------|-------| | treeData | BOM数据 | TreeDataType[] | - | | config | BOM树显示配置 | Object | - | | maintainable | 是否开启维护模式 | boolean | false | | treeShouldSelect | 是否应该被选中 | (node: DataNode) => Promise | false | | node-menu(v-slot) | 树节点菜单内容 | slot(tree-node: TreeDataType) | _ |

事件

| 事件名称 | 说明 | 回调参数 | |--------|---------|-----------------------------------------------| | select | 树节点选中事件 | function(node: TreeDataType) |

expose

| 参数 | 说明 | 类型 | |------------------------------|---------------|---------------------------------------------| | updateTreeWithPreservedState | 更新树数据，并保持树状态 | (updateDataFn: () => Promise) => void | | getParentKeys | 获取节点所有父节点的key | (key: string): string[] | undefined | | getDepth | 获取节点在树中的深度 | getDepth(key: string) | number |

具体交互参考 HdBomTree 组件

HdBomWorkbench

左右布局的BOM操作台，左侧为BOM，右侧为各个节点对应内容

HdBomTree Props

| 参数 | 说明 | 类型 | 默认值 | |------------------------|------------|------------------------------------------|---------------------| | moduleKey | 唯一标识布局拖拽距离 | string | - | | bomData | BOM树数据 | TreeDataType[] | - | | treeConfig | BOM树显示配置 | Object | - | | layoutConfig | 布局配置 | Object{maxLeftWidth: number // 布局左侧默认宽度} | {maxLeftWidth: 500} | | maintainable | 是否开启维护模式 | boolean | false | | shouldSelect | 是否应该被选中 | (node: DataNode) => Promise | false | | tree-node-menu(v-slot) | 树节点菜单内容 | slot | |

expose

| 参数 | 说明 | 类型 | |------------|--------------|--------------| | getTreeApi | 获取树组件暴露的所有方法 | () => Object |

TreeDataType

树节点数据格式

{
  "id": "7342824949947564032",
  "key": "节点路径",
  "name": "节点名称",
  "code": "节点编码",
  "version": "节点版本",
  "businessType": "节点业务类型(PROCESS_PLAN: 工艺； OPERATION：工序, 其他类型具体适配)",
  "raw": {},
  "children": [
    {
      "type": "标注工艺",
      "id": "7342824949972729856",
      "key": "[[\"M20-111\",\"V1\"],[\"M10.100-100\",\"V2\"]]",
      "name": "多轴精密铣削",
      "code": "M10.100-100",
      "version": "V2",
      "businessType": "PROCESS_PLAN",
      "raw": {
        "id": "7342824949993701376"
      },
      "children": [
        {
          "id": "7342825604321906688",
          "code": "05",
          "name": "标印",
          "businessType": "OPERATION",
          "key": "[[\"M20-111\",\"V1\"],[\"M10.100-100\",\"V2\"]]-05",
          "version": "V0",
          "qty": 1,
          "raw": {
            "id": "7342825604321906688"
          },
          "title": "05 【标印】",
          "selectable": true,
          "icon": "operation"
        }
      ],
      "qty": 1,
      "title": "M10.100-100 【V2-多轴精密铣削】",
      "selectable": true,
      "icon": "process-plan"
    }
  ],
  "qty": 1,
  "title": "M20-111 【V1】【燃烧室缸盖（CBH-360型）-S20.42.2212】",
  "selectable": true,
  "icon": "process-path",
  "parentKeys": []
}