<template>
|
<a-tabs style="height: 100%" v-model="activeTabKey" @change="handleTabChange">
|
<a-tab-pane :key="1" tab="设备属性" v-if="currentTreeNodeInfo.equipmentId">
|
<DeviceInfo :currentLevelDetails="currentTreeNodeInfo.entity" :size="containerSize"/>
|
</a-tab-pane>
|
|
<template v-else>
|
<a-tab-pane :key="1" tab="文档属性">
|
<DocumentInfo :currentLevelDetails="currentDocumentInfo" :size="containerSize"/>
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="预览">
|
<FilePreview ref="filePreviewRef" :currentDocumentInfo="currentDocumentInfo"/>
|
</a-tab-pane>
|
|
<a-tab-pane :key="3" tab="文档版本">
|
<DocumentVersionTableList ref="documentVersionTableRef" :currentDocumentInfo="currentDocumentInfo"
|
@handleTableContextMenuOpen="handleTableContextMenuOpen"
|
@releaseFilePreviewApi="releaseFilePreviewApi"
|
:size="containerSize"/>
|
</a-tab-pane>
|
</template>
|
|
<TableContextMenu :tableRowInfo="currentRightClickedTableRowInfo" ref="tableContextMenuRef"/>
|
</a-tabs>
|
</template>
|
|
<script>
|
import DeviceInfo from './Device/DeviceInfo'
|
import DocumentInfo from '../../../common/DocumentInfo'
|
import FilePreview from '../../../common/FilePreview'
|
import TableContextMenu from '../../../common/TableContextMenu'
|
import DocumentVersionTableList from '../../../common/DocumentVersionTableList'
|
|
export default {
|
name: 'DeviceStructureMainBottom',
|
components: {
|
TableContextMenu,
|
DeviceInfo,
|
DocumentInfo,
|
FilePreview,
|
DocumentVersionTableList
|
},
|
props: {
|
currentTreeNodeInfo: {
|
type: Object
|
}
|
},
|
data() {
|
return {
|
activeTabKey: 1,
|
containerSize: 'small',
|
currentDocumentInfo: {},
|
currentRightClickedTableRowInfo: {},
|
hasLoadedDataTabKeyArray: []
|
}
|
},
|
created() {
|
this.$bus.$on('sendCurrentClickedDocumentInfo', this.receiveCurrentDocumentInfo)
|
this.$bus.$on('reloadMainBottomTableData', this.reloadMainBottomTableData)
|
},
|
methods: {
|
/**
|
* 接收表格传来的当前选中或点击的项信息
|
* @param documentInfo 当前层级信息
|
*/
|
receiveCurrentDocumentInfo(documentInfo) {
|
this.currentDocumentInfo = documentInfo
|
this.activeTabKey = 1
|
this.hasLoadedDataTabKeyArray = []
|
},
|
|
handleTabChange(activeTabKey) {
|
if (!this.hasLoadedDataTabKeyArray.includes(activeTabKey)) {
|
switch (activeTabKey) {
|
case 2:
|
this.$nextTick(() => this.$refs.filePreviewRef.getFilePreviewByApi())
|
break
|
case 3:
|
this.$nextTick(() => this.$refs.documentVersionTableRef.loadData())
|
break
|
case 4:
|
this.$nextTick(() => this.$refs.useDocumentEquipmentTableRef.loadData())
|
break
|
default:
|
}
|
// 阻止接口在同一文档一次点击内多次触发
|
this.hasLoadedDataTabKeyArray.push(activeTabKey)
|
}
|
},
|
|
// 释放文件预览接口
|
releaseFilePreviewApi() {
|
// 如果已经预览过此文档，可在此文档当前版本发生改变后再次预览新版本内容
|
if (this.hasLoadedDataTabKeyArray.includes(2)) this.hasLoadedDataTabKeyArray = this.hasLoadedDataTabKeyArray.filter(item => item !== 2)
|
},
|
|
/**
|
* 控制右键菜单开启
|
* @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)
|
},
|
|
/**
|
* 控制右键菜单点击关闭
|
*/
|
handleMenuClose() {
|
this.$refs.tableContextMenuRef.menuVisible = false
|
document.body.removeEventListener('click', this.handleMenuClose)
|
},
|
|
reloadMainBottomTableData(tableName) {
|
if (this.$refs[tableName + 'TableRef']) this.$refs[tableName + 'TableRef'].loadData()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/deep/ .ant-tabs-content {
|
height: calc(100% - 65px);
|
}
|
|
/deep/ .ant-tabs-tabpane {
|
overflow: auto;
|
}
|
</style>
|
