产品结构树： 1、新增指定文档为当前版本功能与文档版本内容差异比对功能（新增插件vue-code-diff） 2、调整产品及部件属性tab栏标题为属性...

zhaowei

2025-01-21 ba9490368b8bf27e0d4a6471420044dadf5b720e

 src/views/dnc/base/modules/ProductStructure/ProductStructureMainBottom.vue

@@ -1,11 +1,11 @@
<template>
  <a-tabs style="height: 100%" v-model="activeTabKey" v-if="Object.keys(currentLevelInfo).length>0"
          @change="handleTabChange">
    <a-tab-pane :key="1" tab="产品属性" v-if="currentLevelInfo.type===1">
    <a-tab-pane :key="1" tab="属性信息" v-if="currentLevelInfo.type===1">
      <ProductInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
    </a-tab-pane>

    <a-tab-pane :key="1" tab="部件属性" v-if="currentLevelInfo.type===2">
    <a-tab-pane :key="1" tab="属性信息" v-if="currentLevelInfo.type===2">
      <ComponentInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
    </a-tab-pane>

@@ -27,18 +27,23 @@
      </a-tab-pane>

      <a-tab-pane :key="2" tab="预览">

        <FilePreview ref="filePreviewRef" :currentDocumentInfo="currentLevelInfo"/>
      </a-tab-pane>

      <a-tab-pane :key="3" tab="文档版本">
        <DocumentVersionTableList ref="documentVersionTableRef" :currentDocumentInfo="currentLevelInfo"
                                  @handleTableContextMenuOpen="handleTableContextMenuOpen"
                                  @releaseFilePreviewApi="releaseFilePreviewApi"
                                  :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="4" tab="使用设备" v-if="currentLevelInfo.attributionType===5">
        <UseDocumentEquipmentTableList ref="useDocumentEquipmentTableRef"/>
        <UseDocumentEquipmentTableList ref="useDocumentEquipmentTableRef" :currentDocumentInfo="currentLevelInfo"
                                       :size="containerSize"/>
      </a-tab-pane>
    </template>

    <TableContextMenu :tableRowInfo="currentRightClickedTableRowInfo" ref="tableContextMenuRef"/>
  </a-tabs>
</template>

@@ -51,10 +56,14 @@
  import DocumentVersionTableList from './Document/DocumentVersionTableList'
  import UseDocumentEquipmentTableList from './Document/UseNcDocumentEquipmentTableList'
  import ProcessStepInfo from './ProcessStep/ProcessStepInfo'
  import FilePreview from './Document/FilePreview'
  import TableContextMenu from '../../../common/TableContextMenu'

  export default {
    name: 'ProductStructureMainBottom',
    components: {
      TableContextMenu,
      FilePreview,
      ProcessStepInfo,
      UseDocumentEquipmentTableList,
      DocumentVersionTableList,
@@ -69,6 +78,7 @@
        activeTabKey: 1,
        containerSize: 'small',
        currentLevelInfo: {},
        currentRightClickedTableRowInfo: {},
        hasLoadedDataTabKeyArray: []
      }
    },
@@ -80,7 +90,7 @@
    methods: {
      /**
       * 接收树组件以及表格传来的当前选中或点击的项信息
       * @param levelInfo
       * @param levelInfo 当前层级信息
       */
      receiveCurrentLevelInfo(levelInfo) {
        this.currentLevelInfo = levelInfo
@@ -90,15 +100,50 @@

      handleTabChange(activeTabKey) {
        if (!this.hasLoadedDataTabKeyArray.includes(activeTabKey)) {
          if (activeTabKey === 3) {
            this.$nextTick(() => this.$refs.documentVersionTableRef.loadData())
          } else if (activeTabKey === 4) {
            this.$nextTick(() => this.$refs.useDocumentEquipmentTableRef.loadData())
          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()
      }