数据报表页面数据列设置固定宽度

zhaowei

9 天以前 86f0166e2a759e6ec2c34b0dd0b388bafa80cedd

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

@@ -1,162 +1,242 @@
<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">
      <ProductInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
    </a-tab-pane>

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

    <a-tab-pane :key="1" tab="零件属性" v-if="currentLevelInfo.type===3">
      <PartInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
    </a-tab-pane>

    <a-tab-pane :key="1" tab="工序属性" v-if="currentLevelInfo.type===5">
      <ProcessInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
    </a-tab-pane>

    <a-tab-pane :key="1" tab="工步属性" v-if="currentLevelInfo.type===6">
      <ProcessStepInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
    </a-tab-pane>

    <template v-if="currentLevelInfo.hasOwnProperty('attributionType')">
      <a-tab-pane :key="1" tab="文档属性">
        <DocumentInfo :currentLevelDetails="currentLevelInfo" :size="containerSize"/>
  <div style="height: 100%">
    <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">
        <ProductInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="2" tab="预览">
        <FilePreview ref="filePreviewRef" :currentDocumentInfo="currentLevelInfo"/>
      <a-tab-pane :key="1" tab="属性信息" v-if="+currentLevelInfo.type===2">
        <ComponentInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="3" tab="文档版本">
        <DocumentVersionTableList ref="documentVersionTableRef" :currentDocumentInfo="currentLevelInfo"
                                  @handleTableContextMenuOpen="handleTableContextMenuOpen"
                                  @releaseFilePreviewApi="releaseFilePreviewApi"
                                  :size="containerSize"/>
      <a-tab-pane :key="1" tab="零件属性" v-if="+currentLevelInfo.type===3">
        <PartInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="4" tab="使用设备" v-if="currentLevelInfo.attributionType===5">
        <UseDocumentEquipmentTableList ref="useDocumentEquipmentTableRef" :currentDocumentInfo="currentLevelInfo"
                                       :size="containerSize"/>
      <a-tab-pane :key="1" tab="属性信息" v-if="+currentLevelInfo.type===4">
        <ProcessSpecVersionInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>
    </template>

      <a-tab-pane :key="1" tab="工序属性" v-if="+currentLevelInfo.type===5">
        <ProcessInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="1" tab="工步属性" v-if="+currentLevelInfo.type===6">
        <ProcessStepInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="1" tab="设备列表" v-if="currentLevelInfo.hasOwnProperty('deviceManagementId')">
        <UseDeviceCustomTypeEquipmentTableList ref="useTypeEquipmentTableListRef"
                                               :currentLevelDetails="currentLevelInfo" :size="containerSize"/>
      </a-tab-pane>

      <template v-if="currentLevelInfo.hasOwnProperty('docId')">
        <a-tab-pane :key="1" tab="文档属性">
          <DocumentInfo :currentLevelDetails="currentLevelInfo" :size="containerSize"/>
        </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.classificationId_dictText==='nc'">
          <UseDocumentEquipmentTableList ref="useDocumentEquipmentTableRef" :currentDocumentInfo="currentLevelInfo"
                                         :size="containerSize"/>
        </a-tab-pane>

        <a-tab-pane :key="5" tab="刀具列表" v-if="currentLevelInfo.classificationId_dictText==='nc'">
          <CutterTableList ref="cutterTableListRef" :currentLevelInfo="currentLevelInfo" :size="containerSize"/>
        </a-tab-pane>

        <a-tab-pane :key="6" tab="审签详情">
          <DocumentInfoFlow ref="flowTableListRef" :currentLevelDetails="currentLevelInfo" :size="containerSize"/>
        </a-tab-pane>

        <a-tab-pane :key="7" tab="批次列表" v-if="currentLevelInfo.classificationId_dictText==='nc'">
          <GuideCardBatchList ref="guideCardBatchInfoRef" :guideCardBatchInfo="currentLevelInfo" :size="containerSize"/>
        </a-tab-pane>


      </template>
    </a-tabs>

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

<script>
  import ProductInfo from './Product/ProductInfo'
  import ComponentInfo from './Component/ComponentInfo'
  import PartInfo from './Part/PartInfo'
  import ProcessInfo from './Process/ProcessInfo'
  import DocumentInfo from './Document/DocumentInfo'
  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'
import ProductInfo from './Product/ProductInfo'
import ComponentInfo from './Component/ComponentInfo'
import PartInfo from './Part/PartInfo'
import ProcessInfo from './Process/ProcessInfo'
import ProcessStepInfo from './ProcessStep/ProcessStepInfo'
import CutterTableList from './Cutter/CutterTableList'
import DocumentInfo from '../../../common/DocumentInfo'
import DocumentInfoFlow from '../../../common/DocumentInfoFlow.vue'
import DocumentVersionTableList from '../../../common/DocumentVersionTableList'
import UseDocumentEquipmentTableList from './Document/UseNcDocumentEquipmentTableList'
import FilePreview from '../../../common/FilePreview'
import TableContextMenu from '../../../common/TableContextMenu'
import UseDeviceCustomTypeEquipmentTableList
  from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/UseDeviceCustomTypeEquipmentTableList.vue'
import ProcessSpecVersionInfo
  from '@views/dnc/base/modules/ProductStructure/ProcessSpecVersion/ProcessSpecVersionInfo.vue'
import { getAction } from '@/api/manage'
import GuideCardBatchList from '@views/dnc/base/modules/ProductStructure/GuideCardBatch/GuideCardBatchList.vue'

  export default {
    name: 'ProductStructureMainBottom',
    components: {
      TableContextMenu,
      FilePreview,
      ProcessStepInfo,
      UseDocumentEquipmentTableList,
      DocumentVersionTableList,
      DocumentInfo,
      ProcessInfo,
      PartInfo,
      ProductInfo,
      ComponentInfo
    },
    data() {
      return {
        activeTabKey: 1,
        containerSize: 'small',
        currentLevelInfo: {},
        currentRightClickedTableRowInfo: {},
        hasLoadedDataTabKeyArray: []
      }
    },
    created() {
      this.$bus.$on('sendCurrentClickedDocumentInfo', this.receiveCurrentLevelInfo)
      this.$bus.$on('sendCurrentTreeNodeInfo', this.receiveCurrentLevelInfo)
      this.$bus.$on('reloadMainBottomTableData', this.reloadMainBottomTableData)
    },
    methods: {
      /**
       * 接收树组件以及表格传来的当前选中或点击的项信息
       * @param levelInfo 当前层级信息
       */
      receiveCurrentLevelInfo(levelInfo) {
        this.currentLevelInfo = levelInfo
        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)
export default {
  name: 'ProductStructureMainBottom',
  components: {
    GuideCardBatchList,
    ProcessSpecVersionInfo,
    UseDeviceCustomTypeEquipmentTableList,
    CutterTableList,
    TableContextMenu,
    FilePreview,
    ProcessStepInfo,
    UseDocumentEquipmentTableList,
    DocumentVersionTableList,
    DocumentInfo,
    DocumentInfoFlow,
    ProcessInfo,
    PartInfo,
    ProductInfo,
    ComponentInfo
  },
  data() {
    return {
      activeTabKey: 1,
      containerSize: 'small',
      isProcessHasCutterList: false,
      isProcessStepHasCutterList: false,
      currentLevelInfo: {},
      currentRightClickedTableRowInfo: {},
      hasLoadedDataTabKeyArray: []
    }
  },
  created() {
    this.$bus.$on('sendCurrentClickedDocumentInfo', this.receiveCurrentLevelInfo)
    this.$bus.$on('sendCurrentClickedTypeInfo', this.receiveCurrentLevelInfo)
    this.$bus.$on('sendCurrentTreeNodeInfo', this.receiveCurrentLevelInfo)
    this.$bus.$on('reloadMainBottomTableData', this.reloadMainBottomTableData)
    this.getCutterListDisplayPermission('dnc_cutter_process', 'isProcessHasCutterList')
    this.getCutterListDisplayPermission('dnc_cutter_step', 'isProcessStepHasCutterList')
  },
  methods: {
    /**
     * 获取刀具列表在工序和工步层级的展示权限
     * @param settingKey 各层级展示权限key
     * @param dataProperty 组件data中的属性值用来控制是否展示
     */
    getCutterListDisplayPermission(settingKey, dataProperty) {
      getAction(`/system/sysParams/query/by/settingKey?settingKey=${settingKey}`).then(res => {
        if (res.success) {
          this[dataProperty] = res.result.settingValue === '1'
        }
      },
      })
    },

      // 释放文件预览接口
      releaseFilePreviewApi() {
        // 如果已经预览过此文档，可在此文档当前版本发生改变后再次预览新版本内容
        if (this.hasLoadedDataTabKeyArray.includes(2)) this.hasLoadedDataTabKeyArray = this.hasLoadedDataTabKeyArray.filter(item => item !== 2)
      },
    /**
     * 接收树组件以及表格传来的当前选中或点击的项信息
     * @param levelInfo 当前层级信息
     */
    receiveCurrentLevelInfo(levelInfo) {
      this.currentLevelInfo = levelInfo
      this.activeTabKey = 1
      this.$nextTick(() => {
        if (this.$refs.useTypeEquipmentTableListRef) {
          this.$refs.useTypeEquipmentTableListRef.setQueryParamAndLoadData()
          this.hasLoadedDataTabKeyArray.push(this.activeTabKey)
          return
        }
      })
      this.hasLoadedDataTabKeyArray = []
    },

      /**
       * 控制右键菜单开启
       * @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()
    /**
     * tab栏切换时触发
     * @param activeTabKey 当前激活的tabKey
     */
    handleTabChange(activeTabKey) {
      if (!this.hasLoadedDataTabKeyArray.includes(activeTabKey)) {
        switch (activeTabKey) {
          case 2:
            if (this.currentLevelInfo.hasOwnProperty('attributionType')) {
              console.log('ref', this.$refs.filePreviewRef)
              this.$nextTick(() => this.$refs.filePreviewRef.getFilePreviewByApi())
            } else {
              this.$nextTick(() => this.$refs.cutterTableListRef.setQueryParamAndLoadData(1))
            }
            break
          case 3:
            this.$nextTick(() => this.$refs.documentVersionTableRef.loadData())
            break
          case 4:
            this.$nextTick(() => this.$refs.useDocumentEquipmentTableRef.loadData())
            break
          case 5:
            this.$nextTick(() => this.$refs.cutterTableListRef.setQueryParamAndLoadData(1))
            break
          case 6:
            this.$nextTick(() => this.$refs.flowTableListRef.getAllApproveData())
            break
          case 7:
            this.$nextTick(() => this.$refs.guideCardBatchInfoRef.getGuideCardBatchList())
          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-content {
  height: calc(100% - 65px);
}

  /deep/ .ant-tabs-tabpane {
    overflow: auto;
  }
/deep/ .ant-tabs-tabpane {
  overflow: hidden auto;
}
</style>