1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| <template>
| <a-dropdown :trigger="['contextmenu']">
| <span v-if="treeParams.label.indexOf(treeParams.searchValue) > -1">{{ treeParams.label.substr(0, treeParams.label.indexOf(treeParams.searchValue)) }}<span
| class="replaceSearch">{{ treeParams.searchValue }}</span>{{ treeParams.label.substr(treeParams.label.indexOf(treeParams.searchValue) + treeParams.searchValue.length) }}</span>
| <span v-else>{{ treeParams.label }}</span>
| <template #overlay>
| <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeParams.treeKey, menuKey)"
| @contextmenu="event=>event.preventDefault()">
| <template v-for="item in defaultContextMenuList[getCurrentMenuLevel]">
| <a-menu-item :key="item.code" v-if="item.show">
| <a-icon :type="item.icon"/>
| {{item.label}}
| </a-menu-item>
| </template>
| </a-menu>
| </template>
| </a-dropdown>
| </template>
|
| <script>
| export default {
| name: 'ProductStructureTreeContextMenu',
| components: {},
| props: {
| treeParams: {
| type: Object
| }
| },
| data() {
| return {
| defaultContextMenuList: {
| //产品
| product: [
| { show: true, label: '添加产品', code: 'product_add', icon: 'plus', isCommonMethod: false },
| { show: true, label: '添加部件', code: 'product_add_child', icon: 'plus', isCommonMethod: false },
| { show: true, label: '编辑产品信息', code: 'product_edit', icon: 'edit', isCommonMethod: false },
| { show: false, label: '导出文档', code: 'product_export', icon: 'export', isCommonMethod: true },
| { show: true, label: '导入其他文档', code: 'product_import', icon: 'import', isCommonMethod: true },
| { show: true, label: '删除', code: 'product_delete', icon: 'delete', isCommonMethod: true },
| { show: true, label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
| ],
| //部件
| component: [
| { show: true, label: '添加子部件', code: 'component_add', icon: 'plus', isCommonMethod: false },
| { show: true, label: '添加零件', code: 'component_add_child', icon: 'plus', isCommonMethod: false },
| { show: true, label: '创建工序', code: 'component_add_relative', icon: 'plus', isCommonMethod: false },
| { show: true, label: '编辑部件信息', code: 'component_edit', icon: 'edit', isCommonMethod: false },
| { show: false, label: '导出文档', code: 'component_export', icon: 'export', isCommonMethod: true },
| { show: true, label: '导入其他文档', code: 'component_import', icon: 'import', isCommonMethod: true },
| { show: true, label: '删除', code: 'component_delete', icon: 'delete', isCommonMethod: true },
| { show: true, label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
| ],
| //零件
| part: [
| { show: true, label: '添加零件', code: 'parts_add', icon: 'plus', isCommonMethod: false },
| { show: true, label: '创建工序', code: 'parts_add_relative', icon: 'plus', isCommonMethod: false },
| { show: true, label: '编辑零件信息', code: 'parts_edit', icon: 'edit', isCommonMethod: false },
| { show: false, label: '导出文档', code: 'parts_export', icon: 'export', isCommonMethod: true },
| { show: true, label: '导入其他文档', code: 'parts_import', icon: 'import', isCommonMethod: true },
| { show: true, label: '删除', code: 'parts_delete', icon: 'delete', isCommonMethod: true },
| { show: true, label: '权限配置', code: 'public_assign_permission', icon: 'idcard', isCommonMethod: true }
| ],
| //工序
| process: [
| { show: true, label: '创建工序', code: 'process_add', icon: 'plus', isCommonMethod: false },
| { show: true, label: '编辑工序信息', code: 'process_edit', icon: 'edit', isCommonMethod: false },
| { show: true, label: '删除', code: 'process_delete', icon: 'delete', isCommonMethod: true },
| { show: false, label: '导出NC程序', code: 'process_export', icon: 'import', isCommonMethod: true },
| { show: true, label: '导入NC程序', code: 'process_import', icon: 'export', isCommonMethod: true }
| ]
| }
| }
| },
| computed: {
| getCurrentMenuLevel() {
| switch (this.treeParams.type) {
| case 1:
| return 'product'
| case 2:
| return 'component'
| case 3:
| return 'part'
| case 4:
| return 'process'
| case 5:
| return 'processStep'
| }
| }
| },
| methods: {
| onContextMenuClick(treeKey, menuKey) {
| const level = this.getCurrentMenuLevel
| const menuKeyArray = menuKey.split('_')
| const isCommonMethod = this.defaultContextMenuList[level].find(item => item.code === menuKey).isCommonMethod
| // product_add => handleAdd 触发对应组件事件
| let methodName
| // 判断是否为公共方法，如果为公共方法则截取专有属性product/component/part/process等字段
| if (isCommonMethod) {
| methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).slice(1).join('')
| } else {
| methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).join('')
| }
| console.log('methodName------------------------------------', methodName)
| const modalTitle = this.defaultContextMenuList[level].find(item => item.code === menuKey).label
| this.$bus.$emit('treeMenuItemMethodTrigger', { methodName, modalTitle })
| }
| }
| }
| </script>
|
| <style scoped>
| .replaceSearch {
| color: #40a9ff;
| font-weight: bold;
| background-color: rgb(204, 204, 204);
| }
|
| </style>
|
|
