实现产品结构树页面检索NC文件窗口中点击NC文件后界面跳转至树节点层级下NC文件界面功能

zhaowei

2025-06-13 2a7f7124c307216faaef321dff84aa5c67c7058c

实现产品结构树页面检索NC文件窗口中点击NC文件后界面跳转至树节点层级下NC文件界面功能

 src/views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModalForm.vue

@@ -49,7 +49,7 @@
      deviceCustomTypeList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },

 src/views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeTableList.vue

@@ -9,8 +9,9 @@

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import DeviceCustomTypeModal from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue'
import { deleteAction } from '@api/manage'
  import DeviceCustomTypeModal
    from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue'
  import { getAction, deleteAction } from '@api/manage'

export default {
  name: 'DeviceCustomTypeTableList',
@@ -67,13 +68,36 @@
  },
  methods: {
    setQueryParamAndLoadData() {
      console.log('currentLevelInfo', this.currentTreeNodeInfo)
      const { id, type } = this.currentTreeNodeInfo
      this.queryParam = Object.assign({}, { attributionId: id, attributionType: type })
      this.dataSource = []
      this.loadData()
    },

      loadData() {
        const params = this.getQueryParams()//查询条件
        this.loading = true
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              this.dataSource = res.result.records || res.result
              const { autoClickedLevelInfo } = this.currentTreeNodeInfo
              if (autoClickedLevelInfo) {
                const tableRowRecord = this.dataSource.find(item => item.id === autoClickedLevelInfo.attributionId)
                this.handleTableRowClick(tableRowRecord)
              }
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
          this.loading = false
        })
      },

      /**
       * 自定义表格行功能
       * @param record 表格行记录
       */
    customRow(record) {
      return {
        style: {
@@ -86,12 +110,20 @@
            this.$emit('handleTableContextMenuOpen', this.currentRightClickedTypeInfo)
          },
          click: () => {
              this.handleTableRowClick(record)
            }
          }
        }
      },

      /**
       * 表格行点击事件
       * @param record 表格行记录
       */
      handleTableRowClick(record) {
            if (this.currentClickedTypeInfo.id === record.id) return
            this.currentClickedTypeInfo = Object.assign({}, record)
            this.$bus.$emit('sendCurrentClickedTypeInfo', record)
          }
        }
      }
    },

    /**

 src/views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchNcModal.vue

@@ -49,7 +49,7 @@
                    </a-form-item>
                  </a-col>

                  <a-col :md="11" :sm="11">
                  <a-col :md="7" :sm="7">
                    <a-form-item label="上传时间">
                      <a-range-picker v-model="date" value-format="YYYY-MM-DD"
                                      @change="handleDateChange" allow-clear></a-range-picker>
@@ -66,7 +66,7 @@

            <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :loading="loading"
                     :rowSelection="{selectedRowKeys: selectedRowKeys,selectedRows:selectionRows, onChange: onSelectChange}"
                     @change="handleTableChange"
                     @change="handleTableChange" :customRow="customRow"
                     :scroll="{y:456}" :size="size" rowKey="docId">

              <!-- 字符串超长截取省略号显示-->
@@ -120,6 +120,8 @@
        </a-tabs>
      </div>
    </div>


  </a-modal>
</template>

@@ -229,6 +231,7 @@
      searchValue: '',
      searchInput: '',
      spinning: false,
        fullScreenSpinning: false,
      treeDataSource: [],
      allTreeKeys: [],
      checkedKeys: [],
@@ -265,6 +268,7 @@
    handleSearchNc() {
      this.visible = true
    },

    // 获取当前对应文档列表
    loadData() {
      this.dataSource = []
@@ -283,6 +287,36 @@
      }).finally(() => {
        this.loading = false
      })
      },

      /**
       * 列表自定义行
       * @param record 列表行记录
       */
      customRow(record) {
        return {
          style: {
            cursor: 'pointer'
          },
          on: {
            click: () => {
              let selectedRowKeys = [...this.selectedRowKeys]
              let selectionRows = [...this.selectionRows]
              if (selectedRowKeys.includes(record.docId)) {
                selectedRowKeys = selectedRowKeys.filter(item => item !== record.docId)
                selectionRows = selectionRows.filter(item => item.docId !== record.docId)
              } else {
                selectedRowKeys.push(record.docId)
                selectionRows.push(record)
              }
              this.onSelectChange(selectedRowKeys, selectionRows)
            },
            dblclick: () => {
              this.$emit('searchTreeNode', record)
              this.visible = false
            }
          }
        }
    },

    // 获取DNC设备树
@@ -508,7 +542,7 @@
      this.searchInput = ''
      this.expandedKeys = []
      this.selectedRowKeys = []
      this.selectionRows = {}
        this.selectionRows = []
      this.checkedKeys = []
      this.filters = {}
      this.isorter = Object.assign({}, this.defaultSorter)
@@ -540,7 +574,6 @@
      background-color: rgb(204, 204, 204);
    }
  }

}

::-webkit-scrollbar {

 src/views/dnc/base/modules/ProductStructure/Document/NcDocumentTableList.vue

@@ -117,8 +117,7 @@
        this.$message.error('请设置url.list属性!')
        return
      }
      console.log('currentNCDocumentAttributionInfo', this.currentNCDocumentAttributionInfo)
      const { attributionId, attributionType, docClassCode } = this.currentNCDocumentAttributionInfo
        const { attributionId, attributionType, docClassCode, autoClickedLevelInfo } = this.currentNCDocumentAttributionInfo
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) this.ipagination.current = 1
      var params = this.getQueryParams()//查询条件
@@ -131,6 +130,11 @@
      getAction(this.url.list + `/${this.ipagination.current}/${this.ipagination.pageSize}`, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
            if (autoClickedLevelInfo) {
              const tableRowRecord = this.dataSource.find(item => item.docId === autoClickedLevelInfo.docId)
              this.handleTableRowClick(tableRowRecord)
              this.$bus.$emit('searchNcFinished')
            }
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
@@ -144,6 +148,10 @@
      })
    },

      /**
       * 自定义表格行功能
       * @param record 表格行记录
       */
    customRow(record) {
      return {
        style: {
@@ -156,12 +164,20 @@
            this.$emit('handleTableContextMenuOpen', this.currentRightClickedDocumentInfo)
          },
          click: () => {
              this.handleTableRowClick(record)
            }
          }
        }
      },

      /**
       * 表格行点击事件
       * @param record 表格行记录
       */
      handleTableRowClick(record) {
            if (this.currentClickedDocumentInfo.docId === record.docId) return
            this.currentClickedDocumentInfo = Object.assign({}, record)
            this.$bus.$emit('sendCurrentClickedDocumentInfo', record)
          }
        }
      }
    },

    /**

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

@@ -94,15 +94,15 @@
     * @param treeNodeInfo 树节点信息
     */
    receiveCurrentTreeNodeInfo(treeNodeInfo) {
      console.log('treeNodeInfo', treeNodeInfo)
      const { id, type } = treeNodeInfo
        const { id, type, autoClickedLevelInfo } = treeNodeInfo
      // 从树组件接受树节点信息后从父组件流入子组件并重置数据
      this.currentClickedTypeInfo = this.currentRightClickedTableRowInfo = {}
      this.currentTreeNodeInfo = treeNodeInfo
      this.currentNCDocumentAttributionInfo = Object.assign({}, {
        attributionId: id,
        attributionType: type,
        docClassCode: 'NC'
          docClassCode: 'NC',
          autoClickedLevelInfo
      })
      this.hasLoadedDataTabKeyArray = []

@@ -113,7 +113,8 @@
            this.$refs.deviceCustomTypeTableList.setQueryParamAndLoadData()
            // 切换树之后清空NC程序列表
            if (this.$refs.ncDocumentTableListRef && this.$refs.ncDocumentTableListRef.dataSource.length > 0) this.$refs.ncDocumentTableListRef.dataSource = []
          } else if (this.$refs.ncDocumentTableListRef) this.$refs.ncDocumentTableListRef.loadData(1)
            }
            else if (this.$refs.ncDocumentTableListRef) this.$refs.ncDocumentTableListRef.loadData(1)
        })
      } else {
        this.activeTabKey = 2
@@ -130,11 +131,13 @@
     */
    receiveCurrentClickedTypeInfo(record) {
      const { id, attributionType } = record
        const { autoClickedLevelInfo } = this.currentTreeNodeInfo
      this.currentClickedTypeInfo = Object.assign({}, record)
      this.currentNCDocumentAttributionInfo = Object.assign({}, {
        attributionId: id,
        attributionType,
        docClassCode: 'NC'
          docClassCode: 'NC',
          autoClickedLevelInfo
      })
      this.$nextTick(() => {
        if (this.$refs.ncDocumentTableListRef) this.$refs.ncDocumentTableListRef.loadData(1)

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

@@ -64,11 +64,16 @@
    <!--检索电子模板弹窗-->
    <NcDocumentSearchModal :currentDocumentInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" />
    <!--检索NC文件弹窗-->
    <NcDocumentSearchNcModal :currentDocumentInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" />
    <NcDocumentSearchNcModal :currentDocumentInfo="rightClickSelected" @searchTreeNode="searchTreeNode"
                             @submitSuccess="modalFormSubmitSuccess"/>
    <!--引用部件-->
    <NcComponentBorrowModal :currentBorrowInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess" />
    <!--产品结构树基本右键菜单(空白处触发)-->
    <ProductStructureBaseContextMenu ref="baseContextmenuRef" />

    <div class="full-screen-container" v-if="fullScreenSpinning">
      <a-spin :spinning="fullScreenSpinning" size="large" tip="NC文件检索中..."/>
    </div>
  </a-card>
</template>

@@ -83,7 +88,8 @@
import ProcessModal from './Process/ProcessModal'
import ProcessStepModal from './ProcessStep/ProcessStepModal'
import AssignPermissionModal from './Permission/AssignPermissionModal'
import DeviceCustomTypeModal from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue'
  import DeviceCustomTypeModal
    from '@views/dnc/base/modules/ProductStructure/DeviceCustomType/DeviceCustomTypeModal.vue'
import ProductStructureBaseContextMenu
  from '@views/dnc/base/modules/ProductStructure/ProductStructureBaseContextMenu.vue'
import NcDocumentSearchModal from '@views/dnc/base/modules/ProductStructure/Document/NcDocumentSearchModal.vue'
@@ -122,6 +128,7 @@
      checkStrictly: true,
      allTreeKeys: [],
      rightClickSelected: {},
        fullScreenSpinning: false,
      url: {
        delete: '/nc/product/delete'
      }
@@ -130,6 +137,7 @@
  created() {
    this.getTreeDataByApi()
    this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
      this.$bus.$on('searchNcFinished', () => this.fullScreenSpinning = false)
  },
  beforeDestroy() {
    this.$bus.$off('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
@@ -161,11 +169,11 @@
    /**
     * 树节点选中时触发
     * @param selectedKeys 选中节点key
     * @param {node} node 节点对象
       * @param eventOrRecord  节点对象或者手动传入record
     */
    handleTreeSelect(selectedKeys, { node }) {
      handleTreeSelect(selectedKeys, eventOrRecord) {
      const that = this
      let record = node.dataRef
        let record = eventOrRecord.node ? eventOrRecord.node.dataRef : eventOrRecord
      const { id, type } = record
      dncApi.getProductStructureTreeNodeEntityApi({ id, type })
        .then(res => {
@@ -282,6 +290,24 @@
      this.autoExpandParent = false
    },

      /**
       * 检索NC文件弹窗中双击行记录后触发搜索NC文件对应树节点并模拟选中树节点查询对应设备类或NC文件
       * @param searchNcRecord 检索NC文件弹窗中双击获得的NC文件列表行记录
       */
      searchTreeNode(searchNcRecord) {
        this.fullScreenSpinning = true
        const { attributionId, nodeCode, nodeName, nodeId, docId } = searchNcRecord
        this.searchInput = `[${nodeCode}]${nodeName}`
        this.searchAndExpandTreeNode()
        const treeNodeRecord = Object.assign({
          autoClickedLevelInfo: {
            attributionId,
            docId
          }
        }, this.getTreeNodeRecord(nodeId, this.treeDataSource))
        this.handleTreeSelect([treeNodeRecord.id], treeNodeRecord)
      },

    // 输入查询内容变化时触发（增加防抖机制）
    handleSearchInputChange() {
      const that = this
@@ -339,6 +365,26 @@
        }
      }
      return parentKey
      },

      /**
       * 递归获得输入项的record对象
       * @param key record对象key值
       * @param tree 树节点
       */
      getTreeNodeRecord(key, tree) {
        let treeNodeRecord
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            if (node.children.findIndex(item => item.key === key) > -1) {
              treeNodeRecord = node.children.find(item => item.key === key)
            } else if (this.getTreeNodeRecord(key, node.children)) {
              treeNodeRecord = this.getTreeNodeRecord(key, node.children)
            }
          }
        }
        return treeNodeRecord
    },

    /**
@@ -436,6 +482,20 @@
  width: 8px;
}

  .full-screen-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

@media screen and (min-width: 1920px) {
  .tree_con {
    height: 748px !important;