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
| <template>
| <a-menu :style="menuStyle" @click="menuItemClick" v-if="menuVisible" mode="vertical">
| <template v-for="menuItem in baseContextMenuList">
| <a-menu-item :key="menuItem.code" v-has="menuItem.code" v-if="menuItem.isHasPermission">
| <a-icon :type="menuItem.icon"/>
| {{ menuItem.label }}
| </a-menu-item>
|
| <a-menu-item :key="menuItem.code" v-else>
| <a-icon :type="menuItem.icon"/>
| {{ menuItem.label }}
| </a-menu-item>
| </template>
| </a-menu>
| </template>
|
| <script>
| export default {
| name: 'ProductStructureBaseContextMenu',
| components: {},
| props: {
| tableRowInfo: {
| type: Object
| }
| },
| data() {
| return {
| menuVisible: false,
| menuStyle: {
| position: 'fixed',
| top: 0,
| left: 0,
| border: '1px solid #eee',
| boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
| zIndex: 999
| },
| currentMenuLevel: '',
| baseContextMenuList: [
| { label: '刷新', code: 'tree_reload', icon: 'reload', isHasPermission: false, isCommonMethod: false },
| { label: '添加产品', code: 'product_add', icon: 'plus', isHasPermission: true, isCommonMethod: false }
| ]
| }
| },
| methods: {
| menuItemClick({ key }) {
| console.log('menuKey', key)
| const isCommonMethod = this.baseContextMenuList.find(item => item.code === key).isCommonMethod
| const modalTitle = this.baseContextMenuList.find(item => item.code === key).label
| const menuKeyArray = key.split('_')
| // 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('')
| }
| this.$bus.$emit('treeMenuItemMethodTrigger', { methodName, modalTitle })
| }
| }
| }
| </script>
|
| <style scoped>
| /deep/ .ant-menu-item {
| height: 32px;
| line-height: 32px;
| }
| </style>
|
|
