@handaotech-design/bom 0.0.30 → 0.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +103 -8
  2. package/dist/es/components/bom-tree/index.vue +37 -15
  3. package/dist/es/components/bom-workbench/index.vue +5 -3
  4. package/dist/es/models/bom.d.ts +4 -0
  5. package/dist/es/models/bom.js +5 -0
  6. package/dist/lib/components/bom-tree/index.vue +37 -15
  7. package/dist/lib/components/bom-workbench/index.vue +5 -3
  8. package/dist/lib/models/bom.d.ts +4 -0
  9. package/dist/lib/models/bom.js +7 -2
  10. package/dist/style.css +2 -1
  11. package/package.json +2 -1
package/README.md CHANGED
@@ -1,23 +1,118 @@
1
1
  # Bom 组件库
2
2
 
3
3
  ## 安装
4
- ### 依赖安装
4
+ ### 1. 依赖安装
5
5
  ```shell
6
6
  yarn add @handaotech-design/bom @handaotech-design/vue
7
7
  ```
8
- ### 样式引入
8
+ ### 2. 样式引入
9
9
  ```typescript
10
10
  import '@handaotech-design/bom/dist/style.css';
11
11
  ```
12
+
13
+ ### 3. 组件注册
14
+ ```javascript
15
+ // HdBom 组件库统一注册（也可按需注册）
16
+ import HdBom from '@handaotech-design/bom';
17
+ app.use(HdBom)
18
+
19
+ // 相关 antd 组件注册
20
+ import { Input, Tree, Dropdown } from 'ant-design-vue';
21
+ app.use(Input)
22
+ app.use(Tree)
23
+ app.use(Dropdown)
24
+ ```
25
+
12
26
  ## 组件列表
13
- ### HdBomTree
14
- bom树组件
15
- 注意：
16
- * 需“确保”树组件容器有一定高度。树组件会根据容器高度自适应虚拟滚动的高度
27
+ ## HdBomTree
28
+ **注意！**：
29
+ * 需“确保”HdBomTree、HdBomWorkbench 组件的容器元素自身有**一定高度**，树组件需根据容器高度自适应虚拟滚动的高度
30
+
31
+ ### API
32
+
33
+ #### HdBomTree Props
34
+
35
+ | 参数 | 说明 | 类型 | 默认值 |
36
+ |-------------------|-----------|------------------------------------------------|----------------|
37
+ | treeData | BOM数据 | [TreeDataType](#TreeDataType)[] | - |
38
+ | config | BOM树显示配置 | Object | - |
39
+ | menuTriggerMode | 树节点菜单触发方式 | 'context-menu'(右键点击) \| 'click'（左键菜单按钮） | 'context-menu' |
40
+ | node-menu(v-slot) | 树节点菜单内容 | slot(tree-node: [TreeDataType](#TreeDataType)) | _ |
41
+
42
+ #### 事件
43
+ | 事件名称 | 说明 | 回调参数 |
44
+ |--------|---------|-----------------------------------------------|
45
+ | select | 树节点选中事件 | function(node: [TreeDataType](#TreeDataType)) |
17
46
 
18
47
  具体交互参考 HdBomTree 组件
19
48
 
20
- ### HdBomWorkbench
21
- bom带拖拽的左右布局
49
+ ## HdBomWorkbench
50
+ 左右布局的BOM操作台，左侧为BOM，右侧为各个节点对应内容
51
+
52
+ #### HdBomTree Props
53
+
54
+ | 参数 | 说明 | 类型 | 默认值 |
55
+ |------------------------|------------|------------------------------------------|---------------------|
56
+ | moduleKey | 唯一标识布局拖拽距离 | string | - |
57
+ | bomData | BOM树数据 | [TreeDataType](#TreeDataType)[] | - |
58
+ | treeConfig | BOM树显示配置 | Object | - |
59
+ | layoutConfig | 布局配置 | Object{maxLeftWidth: number // 布局左侧默认宽度} | {maxLeftWidth: 500} |
60
+ | treeMenuTriggerMode | 树节点菜单触发方式 | 'context-menu'(右键点击) \| 'click'（左键菜单按钮） | 'context-menu' |
61
+ | tree-node-menu(v-slot) | 树节点菜单内容 | slot | |
22
62
 
23
63
  具体交互参考 HdBomWorkbench 组件
64
+
65
+
66
+ ### TreeDataType
67
+ 树节点数据格式
68
+ ```json
69
+ {
70
+ "id": "7342824949947564032",
71
+ "key": "节点路径",
72
+ "name": "节点名称",
73
+ "code": "节点编码",
74
+ "version": "节点版本",
75
+ "businessType": "节点业务类型(PROCESS_PLAN: 工艺； OPERATION：工序, 其他类型具体适配)",
76
+ "raw": {},
77
+ "children": [
78
+ {
79
+ "type": "标注工艺",
80
+ "id": "7342824949972729856",
81
+ "key": "[[\"M20-111\",\"V1\"],[\"M10.100-100\",\"V2\"]]",
82
+ "name": "多轴精密铣削",
83
+ "code": "M10.100-100",
84
+ "version": "V2",
85
+ "businessType": "PROCESS_PLAN",
86
+ "raw": {
87
+ "id": "7342824949993701376"
88
+ },
89
+ "children": [
90
+ {
91
+ "id": "7342825604321906688",
92
+ "code": "05",
93
+ "name": "标印",
94
+ "businessType": "OPERATION",
95
+ "key": "[[\"M20-111\",\"V1\"],[\"M10.100-100\",\"V2\"]]-05",
96
+ "version": "V0",
97
+ "qty": 1,
98
+ "raw": {
99
+ "id": "7342825604321906688"
100
+ },
101
+ "title": "05 【标印】",
102
+ "selectable": true,
103
+ "icon": "operation"
104
+ }
105
+ ],
106
+ "qty": 1,
107
+ "title": "M10.100-100 【V2-多轴精密铣削】",
108
+ "selectable": true,
109
+ "icon": "process-plan"
110
+ }
111
+ ],
112
+ "qty": 1,
113
+ "title": "M20-111 【V1】【燃烧室缸盖（CBH-360型）-S20.42.2212】",
114
+ "selectable": true,
115
+ "icon": "process-path",
116
+ "parentKeys": []
117
+ }
118
+ ```
package/dist/es/components/bom-tree/index.vue CHANGED
@@ -8,9 +8,12 @@ import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
8
8
  import type { EventDataNode } from 'ant-design-vue/es/tree'
9
9
  import HdGrayInput from '../gray-input'
10
10
  import type { BomTreeConfig } from '../../models'
11
+ import { TreeMenuTriggerMode } from '../../models'
11
12
 
12
- const props = defineProps<Props>()
13
- const emits = defineEmits(['select'])
13
+ const props = withDefaults(defineProps<Props>(), {
14
+ menuTriggerMode: TreeMenuTriggerMode.contextMenu,
15
+ })
16
+ const emit = defineEmits(['select'])
14
17
  const COMPONENT_NAME = 'HdBomTree'
15
18
  defineOptions({
16
19
  name: COMPONENT_NAME,
@@ -24,6 +27,7 @@ type TreeNodeWithMeta = DataNode & {
24
27
  interface Props {
25
28
  treeData: TreeProps['treeData']
26
29
  config: BomTreeConfig
30
+ menuTriggerMode?: TreeMenuTriggerMode
27
31
  }
28
32
 
29
33
  const expandedKeys = ref<(string | number)[]>([])
@@ -179,7 +183,7 @@ watch(
179
183
  () => selectedKeys.value,
180
184
  () => {
181
185
  if (selectedKeys.value && selectedKeys.value.length) {
182
- return emits('select', keyToNodeMap.get(selectedKeys.value[0]))
186
+ return emit('select', keyToNodeMap.get(selectedKeys.value[0]))
183
187
  }
184
188
  },
185
189
  )
@@ -258,13 +262,13 @@ defineExpose({
258
262
  @select="onSelected"
259
263
  >
260
264
  <template #title="{ title, dataRef }">
261
- <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
262
- <div
263
- v-if="!!dataRef.icon"
264
- class="icon w-20px h-20px mr-4px min-w-20px"
265
- :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
266
- />
267
- <a-dropdown :trigger="['contextmenu']">
265
+ <a-dropdown :trigger="['contextmenu']">
266
+ <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
267
+ <div
268
+ v-if="!!dataRef.icon"
269
+ class="icon w-20px h-20px mr-4px min-w-20px"
270
+ :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
271
+ />
268
272
  <div v-if="hasSearchMatch(title)" class="tree-node-text">
269
273
  <span>{{ getTitlePart(title, 'before') }}</span>
270
274
  <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
@@ -273,11 +277,19 @@ defineExpose({
273
277
  <div v-else class="tree-node-text">
274
278
  {{ title }}
275
279
  </div>
276
- <template #overlay>
277
- <slot name="right-click" :tree-node="dataRef" />
278
- </template>
279
- </a-dropdown>
280
- </div>
280
+ <div class="click-menu-wrapper">
281
+ <a-dropdown v-if="props.menuTriggerMode === TreeMenuTriggerMode.click" :trigger="['click']">
282
+ <MoreOutlined class="menu-trigger" @click.stop />
283
+ <template #overlay>
284
+ <slot name="node-menu" :tree-node="dataRef" />
285
+ </template>
286
+ </a-dropdown>
287
+ </div>
288
+ </div>
289
+ <template v-if="props.menuTriggerMode === TreeMenuTriggerMode.contextMenu" #overlay>
290
+ <slot name="node-menu" :tree-node="dataRef" />
291
+ </template>
292
+ </a-dropdown>
281
293
  </template>
282
294
  <template #switcherIcon="{ dataRef }">
283
295
  <div
@@ -346,12 +358,22 @@ defineExpose({
346
358
  flex: 1;
347
359
  min-width: 0;
348
360
  }
361
+ :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle {
362
+ position: relative;
363
+ }
349
364
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.selectable {
350
365
  cursor: pointer;
351
366
  }
352
367
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.not-selectable {
353
368
  cursor: auto;
354
369
  }
370
+ :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .menu-trigger {
371
+ position: absolute;
372
+ right: 0;
373
+ }
374
+ :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .click-menu-wrapper {
375
+ display: contents;
376
+ }
355
377
  :deep(.ant-tree-list) .ant-tree-treenode:hover {
356
378
  background-color: #E9EBED;
357
379
  }
package/dist/es/components/bom-workbench/index.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" setup>
2
2
  import { ref, watch } from 'vue'
3
3
  import * as _ from 'lodash-es'
4
- import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
4
+ import type { BomNode, BomTreeConfig, Optional, TreeMenuTriggerMode, WorkBenchLayoutConfig } from '../../models'
5
5
  import { convertBomDataToTree } from '../../utils'
6
6
  import HdLeftRight from '../left-right/index'
7
7
  import HdBomTree from '../bom-tree/index'
@@ -18,6 +18,7 @@ interface Props {
18
18
  bomData: Optional<BomNode[]>
19
19
  treeConfig: BomTreeConfig
20
20
  layoutConfig?: WorkBenchLayoutConfig
21
+ treeMenuTriggerMode?: TreeMenuTriggerMode
21
22
  }
22
23
  const bomDataForTree = ref<BomNode[]>()
23
24
  const selectedNode = ref<BomNode>()
@@ -73,10 +74,11 @@ defineExpose({
73
74
  ref="treeRef"
74
75
  :tree-data="bomDataForTree"
75
76
  :config="props.treeConfig"
77
+ :menu-trigger-mode="props.treeMenuTriggerMode"
76
78
  @select="(data: BomNode) => onSelected(data)"
77
79
  >
78
- <template #right-click="{ treeNode }">
79
- <slot name="tree-right-click" :bom-node="treeNode" />
80
+ <template #node-menu="{ treeNode }">
81
+ <slot name="tree-node-menu" :bom-node="treeNode" />
80
82
  </template>
81
83
  </HdBomTree>
82
84
  </div>
package/dist/es/models/bom.d.ts CHANGED
@@ -33,3 +33,7 @@ export interface BomNode {
33
33
  raw: Record<string, any>;
34
34
  [key: string]: any;
35
35
  }
36
+ export declare enum TreeMenuTriggerMode {
37
+ contextMenu = "context-menu",
38
+ click = "click"
39
+ }
package/dist/es/models/bom.js CHANGED
@@ -1 +1,6 @@
1
1
  export const defaultTitleTemplate = "${code}";
2
+ export var TreeMenuTriggerMode = /* @__PURE__ */ ((TreeMenuTriggerMode2) => {
3
+ TreeMenuTriggerMode2["contextMenu"] = "context-menu";
4
+ TreeMenuTriggerMode2["click"] = "click";
5
+ return TreeMenuTriggerMode2;
6
+ })(TreeMenuTriggerMode || {});
package/dist/lib/components/bom-tree/index.vue CHANGED
@@ -8,9 +8,12 @@ import type { DataNode } from 'ant-design-vue/es/vc-tree-select/interface'
8
8
  import type { EventDataNode } from 'ant-design-vue/es/tree'
9
9
  import HdGrayInput from '../gray-input'
10
10
  import type { BomTreeConfig } from '../../models'
11
+ import { TreeMenuTriggerMode } from '../../models'
11
12
 
12
- const props = defineProps<Props>()
13
- const emits = defineEmits(['select'])
13
+ const props = withDefaults(defineProps<Props>(), {
14
+ menuTriggerMode: TreeMenuTriggerMode.contextMenu,
15
+ })
16
+ const emit = defineEmits(['select'])
14
17
  const COMPONENT_NAME = 'HdBomTree'
15
18
  defineOptions({
16
19
  name: COMPONENT_NAME,
@@ -24,6 +27,7 @@ type TreeNodeWithMeta = DataNode & {
24
27
  interface Props {
25
28
  treeData: TreeProps['treeData']
26
29
  config: BomTreeConfig
30
+ menuTriggerMode?: TreeMenuTriggerMode
27
31
  }
28
32
 
29
33
  const expandedKeys = ref<(string | number)[]>([])
@@ -179,7 +183,7 @@ watch(
179
183
  () => selectedKeys.value,
180
184
  () => {
181
185
  if (selectedKeys.value && selectedKeys.value.length) {
182
- return emits('select', keyToNodeMap.get(selectedKeys.value[0]))
186
+ return emit('select', keyToNodeMap.get(selectedKeys.value[0]))
183
187
  }
184
188
  },
185
189
  )
@@ -258,13 +262,13 @@ defineExpose({
258
262
  @select="onSelected"
259
263
  >
260
264
  <template #title="{ title, dataRef }">
261
- <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
262
- <div
263
- v-if="!!dataRef.icon"
264
- class="icon w-20px h-20px mr-4px min-w-20px"
265
- :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
266
- />
267
- <a-dropdown :trigger="['contextmenu']">
265
+ <a-dropdown :trigger="['contextmenu']">
266
+ <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
267
+ <div
268
+ v-if="!!dataRef.icon"
269
+ class="icon w-20px h-20px mr-4px min-w-20px"
270
+ :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
271
+ />
268
272
  <div v-if="hasSearchMatch(title)" class="tree-node-text">
269
273
  <span>{{ getTitlePart(title, 'before') }}</span>
270
274
  <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
@@ -273,11 +277,19 @@ defineExpose({
273
277
  <div v-else class="tree-node-text">
274
278
  {{ title }}
275
279
  </div>
276
- <template #overlay>
277
- <slot name="right-click" :tree-node="dataRef" />
278
- </template>
279
- </a-dropdown>
280
- </div>
280
+ <div class="click-menu-wrapper">
281
+ <a-dropdown v-if="props.menuTriggerMode === TreeMenuTriggerMode.click" :trigger="['click']">
282
+ <MoreOutlined class="menu-trigger" @click.stop />
283
+ <template #overlay>
284
+ <slot name="node-menu" :tree-node="dataRef" />
285
+ </template>
286
+ </a-dropdown>
287
+ </div>
288
+ </div>
289
+ <template v-if="props.menuTriggerMode === TreeMenuTriggerMode.contextMenu" #overlay>
290
+ <slot name="node-menu" :tree-node="dataRef" />
291
+ </template>
292
+ </a-dropdown>
281
293
  </template>
282
294
  <template #switcherIcon="{ dataRef }">
283
295
  <div
@@ -346,12 +358,22 @@ defineExpose({
346
358
  flex: 1;
347
359
  min-width: 0;
348
360
  }
361
+ :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle {
362
+ position: relative;
363
+ }
349
364
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.selectable {
350
365
  cursor: pointer;
351
366
  }
352
367
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.not-selectable {
353
368
  cursor: auto;
354
369
  }
370
+ :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .menu-trigger {
371
+ position: absolute;
372
+ right: 0;
373
+ }
374
+ :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .click-menu-wrapper {
375
+ display: contents;
376
+ }
355
377
  :deep(.ant-tree-list) .ant-tree-treenode:hover {
356
378
  background-color: #E9EBED;
357
379
  }
package/dist/lib/components/bom-workbench/index.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" setup>
2
2
  import { ref, watch } from 'vue'
3
3
  import * as _ from 'lodash-es'
4
- import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
4
+ import type { BomNode, BomTreeConfig, Optional, TreeMenuTriggerMode, WorkBenchLayoutConfig } from '../../models'
5
5
  import { convertBomDataToTree } from '../../utils'
6
6
  import HdLeftRight from '../left-right/index'
7
7
  import HdBomTree from '../bom-tree/index'
@@ -18,6 +18,7 @@ interface Props {
18
18
  bomData: Optional<BomNode[]>
19
19
  treeConfig: BomTreeConfig
20
20
  layoutConfig?: WorkBenchLayoutConfig
21
+ treeMenuTriggerMode?: TreeMenuTriggerMode
21
22
  }
22
23
  const bomDataForTree = ref<BomNode[]>()
23
24
  const selectedNode = ref<BomNode>()
@@ -73,10 +74,11 @@ defineExpose({
73
74
  ref="treeRef"
74
75
  :tree-data="bomDataForTree"
75
76
  :config="props.treeConfig"
77
+ :menu-trigger-mode="props.treeMenuTriggerMode"
76
78
  @select="(data: BomNode) => onSelected(data)"
77
79
  >
78
- <template #right-click="{ treeNode }">
79
- <slot name="tree-right-click" :bom-node="treeNode" />
80
+ <template #node-menu="{ treeNode }">
81
+ <slot name="tree-node-menu" :bom-node="treeNode" />
80
82
  </template>
81
83
  </HdBomTree>
82
84
  </div>
package/dist/lib/models/bom.d.ts CHANGED
@@ -33,3 +33,7 @@ export interface BomNode {
33
33
  raw: Record<string, any>;
34
34
  [key: string]: any;
35
35
  }
36
+ export declare enum TreeMenuTriggerMode {
37
+ contextMenu = "context-menu",
38
+ click = "click"
39
+ }
package/dist/lib/models/bom.js CHANGED
@@ -3,5 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.defaultTitleTemplate = void 0;
7
- const defaultTitleTemplate = exports.defaultTitleTemplate = "${code}";
6
+ exports.defaultTitleTemplate = exports.TreeMenuTriggerMode = void 0;
7
+ const defaultTitleTemplate = exports.defaultTitleTemplate = "${code}";
8
+ var TreeMenuTriggerMode = exports.TreeMenuTriggerMode = /* @__PURE__ */(TreeMenuTriggerMode2 => {
9
+ TreeMenuTriggerMode2["contextMenu"] = "context-menu";
10
+ TreeMenuTriggerMode2["click"] = "click";
11
+ return TreeMenuTriggerMode2;
12
+ })(TreeMenuTriggerMode || {});
package/dist/style.css CHANGED
@@ -49,7 +49,8 @@
49
49
  [block=""]{display:block;}
50
50
  .inline-block,
51
51
  [inline-block=""]{display:inline-block;}
52
- .contents{display:contents;}
52
+ .contents,
53
+ [contents=""]{display:contents;}
53
54
  .hidden,
54
55
  [hidden=""]{display:none;}
55
56
  .h-100\%{height:100%;}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handaotech-design/bom",
3
- "version": "0.0.30",
3
+ "version": "0.0.31",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "exports": {
@@ -21,6 +21,7 @@
21
21
  "module": "./dist/es/index.js",
22
22
  "types": "./dist/es/index.d.ts",
23
23
  "scripts": {
24
+ "dev": "unbuild",
24
25
  "build": "unbuild && pnpm run build:unocss",
25
26
  "build:unocss": "unocss '**/*.{vue,ts}' -o dist/style.css",
26
27
  "stub": "pnpm run build:unocss && unbuild --stub"