<template>
|
<a-tabs v-model="activeTabKey" @change="handleTabChange" @contextmenu.native="e=>e.preventDefault()"
|
v-if="Object.keys(currentTreeNodeInfo).length!==0">
|
<a-tab-pane :key="1" tab="NC文档" v-if="currentTreeNodeInfo.type!==1">
|
<NcDocumentTableList ref="ncDocumentTableListRef" :currentTreeNodeInfo="currentTreeNodeInfo"
|
@handleTableContextMenuOpen="handleTableContextMenuOpen" :size="tableContainerSize"/>
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="其他文档">
|
<OtherDocumentTableList ref="otherDocumentTableListRef" :currentTreeNodeInfo="currentTreeNodeInfo"
|
@handleTableContextMenuOpen="handleTableContextMenuOpen" :size="tableContainerSize"/>
|
</a-tab-pane>
|
|
<TableContextMenu :tableRowInfo="currentRightClickedTableRowInfo" ref="tableContextMenuRef"/>
|
</a-tabs>
|
</template>
|
|
<script>
|
import NcDocumentTableList from './Document/NcDocumentTableList'
|
import OtherDocumentTableList from './Document/OtherDocumentTableList'
|
import TableContextMenu from '../../../common/TableContextMenu'
|
|
export default {
|
name: 'ProductStructureMainTop',
|
components: { TableContextMenu, OtherDocumentTableList, NcDocumentTableList },
|
data() {
|
return {
|
activeTabKey: null,
|
hasLoadingDataTabKey: [],
|
tableContainerSize: 'small',
|
currentRightClickedTableRowInfo: {},
|
currentTreeNodeInfo: {}
|
}
|
},
|
created() {
|
this.$bus.$on('sendCurrentTreeNodeInfo', this.receiveCurrentTreeNodeInfo)
|
},
|
watch: {
|
activeTabKey: {
|
handler(value) {
|
// tab切换时加载对应文档列表，当前树节点下已经加载过的文档列表不再重复加载
|
if (!this.hasLoadingDataTabKey.includes(value)) {
|
if (value === 1) this.$nextTick(() => this.$refs.ncDocumentTableListRef.loadData(1))
|
else this.$nextTick(() => this.$refs.otherDocumentTableListRef.loadData(1))
|
this.hasLoadingDataTabKey.push(value)
|
}
|
},
|
deep: true
|
}
|
},
|
methods: {
|
/**
|
* 控制右键菜单开启
|
* @param record 当前表格行信息
|
*/
|
handleTableContextMenuOpen(record) {
|
this.currentRightClickedTableRowInfo = Object.assign({}, record)
|
this.$refs.tableContextMenuRef.currentMenuLevel = record.param
|
this.$refs.tableContextMenuRef.menuStyle.top = event.clientY + 'px'
|
this.$refs.tableContextMenuRef.menuStyle.left = event.clientX + 'px'
|
this.$refs.tableContextMenuRef.menuVisible = true
|
document.body.addEventListener('click', this.handleMenuClose)
|
},
|
|
/**
|
* 接收树组件传来的当前选中的树节点信息
|
* @param treeNodeInfo 树节点信息
|
*/
|
receiveCurrentTreeNodeInfo(treeNodeInfo) {
|
// 从树组件接受树节点信息后从父组件流入子组件
|
this.currentTreeNodeInfo = treeNodeInfo
|
// 清空上一节点已经加载过得文档列表tabKey
|
this.hasLoadingDataTabKey = []
|
if (treeNodeInfo.type !== 1) {
|
this.activeTabKey = 1
|
this.$nextTick(() => this.$refs.ncDocumentTableListRef.loadData(1))
|
} else {
|
this.activeTabKey = 2
|
this.$nextTick(() => this.$refs.otherDocumentTableListRef.loadData(1))
|
}
|
this.hasLoadingDataTabKey.push(this.activeTabKey)
|
},
|
|
handleTabChange(activeTabKey) {
|
// tab切换时加载对应文档列表，当前树节点下已经加载过的文档列表不再重复加载
|
if (!this.hasLoadingDataTabKey.includes(activeTabKey)) {
|
if (activeTabKey === 1) this.$nextTick(() => this.$refs.ncDocumentTableListRef.loadData(1))
|
else this.$nextTick(() => this.$refs.otherDocumentTableListRef.loadData(1))
|
this.hasLoadingDataTabKey.push(activeTabKey)
|
}
|
},
|
|
/**
|
* 控制右键菜单点击关闭
|
*/
|
handleMenuClose() {
|
this.$refs.tableContextMenuRef.menuVisible = false
|
document.body.removeEventListener('click', this.handleMenuClose)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .ant-table-tbody .ant-table-row {
|
cursor: pointer;
|
}
|
</style>
|
