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
| <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: {
| 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: '',
| defaultContextMenuList: {
| //文档
| document: [
| { label: '编辑文档信息', code: 'document_edit', subMenu: [], icon: 'edit', isCommonMethod: false },
| { label: '指派到设备', code: 'document_assign', subMenu: [], icon: 'cluster', isCommonMethod: false },
| { label: '导出NC程序', code: 'document_export', subMenu: [], icon: 'export', isCommonMethod: true },
| { label: '导入NC程序', code: 'document_import', subMenu: [], icon: 'import', isCommonMethod: true },
| { label: '下载', code: 'document_download', subMenu: [], icon: 'download', isCommonMethod: true },
| { label: '删除', code: 'document_delete', subMenu: [], icon: 'delete', isCommonMethod: true },
| { label: '批量删除', code: 'document_batch_remove', subMenu: [], icon: 'delete', isCommonMethod: false },
| {
| label: '生命周期',
| subMenu: [
| { label: '出库', code: 'document_pull', icon: 'export', isCommonMethod: false },
| { label: '取消出库', code: 'document_cancel_pull', icon: 'stop', isCommonMethod: false },
| { label: '入库', code: 'document_push', icon: 'import', isCommonMethod: true },
| { label: '发布', code: 'document_publish', icon: 'flag', isCommonMethod: false },
| { label: '重新发布', code: 'document_republish', icon: 'reload', isCommonMethod: false },
| { label: '归档', code: 'document_pigeonhole', icon: 'database', isCommonMethod: false }
| ],
| icon: 'hourglass'
| }
| ],
| //文件
| file: [
| { label: '指定当前版本', code: 'file_assign', isCommonMethod: false },//文件-指定当前版本
| { label: '比对', code: 'file_add_relative', isCommonMethod: false }//比对
| ]
| }
| }
| },
| computed: {
| getCurrentDocumentType() {
| if (this.tableRowInfo.attributionType === 5 || this.tableRowInfo.attributionType === 6) return 'NC'
| else return 'OTHER'
| }
| },
| methods: {
| menuItemClick({ item, key }) {
| const menuKeyArray = key.split('_')
| const isCommonMethod = this.defaultContextMenuList[this.currentMenuLevel].find(item => item.code === key).isCommonMethod
| let methodName
| // 判断是否为公共方法，如果为公共方法则截取专有属性product/component/part/process等字段
| if (isCommonMethod) {
| // product_add => handleAdd 触发公共父级组件事件
| methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).slice(1).join('')
| } else {
| // product_add => handleProcessAdd 触发对应组件事件
| methodName = 'handle' + menuKeyArray.map(item => item[0].toUpperCase() + item.slice(1)).join('')
| }
| const modalTitle = this.defaultContextMenuList[this.currentMenuLevel].find(item => item.code === key).label
| console.log('methodName---------------------------------------', methodName)
| console.log('tableRowInfo---------------------------------------', this.tableRowInfo)
| this.$bus.$emit('tableMenuItemMethodTrigger', {
| methodName,
| modalTitle,
| tableRowInfo: this.tableRowInfo
| })
| }
| }
| }
| </script>
|
| <style scoped>
| /deep/ .ant-menu-item {
| height: 32px;
| line-height: 32px;
| }
| </style>
|
|
