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
| <template>
| <a-menu :style="menuStyle" @click="menuItemClick" v-if="menuVisible" mode="vertical">
| <template v-for="menuItem in defaultContextMenuList[currentMenuLevel]">
| <a-menu-item :key="menuItem.code" v-if="menuItem.show&&menuItem.subMenu.length===0">
| <a-icon :type="menuItem.icon"/>
| {{menuItem.label}}
| </a-menu-item>
|
| <a-sub-menu v-if="menuItem.subMenu.length>0">
| <span slot="title"><a-icon :type="menuItem.icon"/><span>{{menuItem.label}}</span></span>
|
| <a-menu-item v-for="subMenuItem in menuItem.subMenu" :key="subMenuItem.code" v-if="subMenuItem.show"
| style="height: 32px;line-height: 32px">
| <a-icon :type="subMenuItem.icon"/>
| {{subMenuItem.label}}
| </a-menu-item>
| </a-sub-menu>
| </template>
| </a-menu>
| </template>
|
| <script>
| export default {
| name: 'TableContextMenu',
| components: {},
| props: {
| currentTableRowInfo: {
| 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: '',
| defaultContextMenuList: {
| //文档
| document: [
| { show: true, label: '编辑文档信息', code: 'document_edit', subMenu: [], icon: 'edit' },
| { show: true, label: '指派到设备', code: 'document_assign', subMenu: [], icon: 'cluster' },
| { show: false, label: '导出NC程序', code: 'document_export', subMenu: [], icon: 'export' },
| { show: true, label: '导入NC程序', code: 'document_import', subMenu: [], icon: 'import' },
| { show: true, label: '下载', code: 'document_download', subMenu: [], icon: 'download' },
| { show: true, label: '删除', code: 'document_delete', subMenu: [], icon: 'delete' },
| { show: true, label: '批量删除', code: 'document_batch_remove', subMenu: [], icon: 'delete' },
| {
| show: true,
| label: '生命周期',
| subMenu: [
| { show: true, label: '出库', code: 'document_pull', icon: 'export' },
| { show: true, label: '取消出库', code: 'document_cancel_pull', icon: 'stop' },
| { show: true, label: '入库', code: 'document_push', icon: 'import' },
| { show: true, label: '发布', code: 'document_publish', icon: 'flag' },
| { show: true, label: '重新发布', code: 'document_republish', icon: 'reload' },
| { show: true, label: '归档', code: 'document_pigeonhole', icon: 'database' }
| ],
| icon: 'delete'
| }
| ]
| }
| }
| },
| methods: {
| menuItemClick({ item, key }) {
| // process_add => handleProcessAdd 触发对应组件事件
| const methodName = 'handle' + key.split('_').map(item => item[0].toUpperCase() + item.slice(1)).join('')
| const modalTitle = this.defaultContextMenuList[this.currentMenuLevel].find(item => item.code === key).label
| console.log('key', key)
| this.$bus.$emit('menuItemMethodTrigger', { level: this.currentMenuLevel, methodName, modalTitle })
| }
| }
| }
| </script>
|
| <style scoped>
| /deep/ .ant-menu-item {
| height: 32px;
| line-height: 32px;
| }
| </style>
|
|
