1、产品和设备结构树选择节点时可以连续点击相同节点且不会取消选中当前节点 2、产品结构树接口调整，产品结构树节点实体信息通过点击后调取接口获取（仍有b...

zhaowei

2025-03-10 e9353e9639ac50735713eb85a8fe0ef7e06afa4f

1、产品和设备结构树选择节点时可以连续点击相同节点且不会取消选中当前节点
2、产品结构树接口调整，产品结构树节点实体信息通过点击后调取接口获取（仍有bug，点击一次会出现多次重复请求）

 src/api/dnc.js

@@ -13,7 +13,9 @@
export default {
  //-------------------------产品结构树------------------------------------------------
  // 获取产品结构树
  getProductStructureTreeApi: () => getAction('/nc/product/load/tree'),
  getProductStructureTreeApi: () => getAction('/nc/product/getTree'),
  // 获取产品结构树节点实体信息
  getProductStructureTreeNodeEntityApi:params=> getAction('/nc/product/getTreeById',params),
  // 获取所有设备的列表
  getAllDeviceListApi: (type) => getAction('/nc/device/list/all'),
  // 导入NC程序/文档

 src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue

@@ -114,9 +114,11 @@
      handleTreeSelect(selectedKeys, { node }) {
        let record = node.dataRef
        this.currentSelected = Object.assign({}, record)
        this.selectedKeys = selectedKeys
        // 向右侧父级组件发送当前选中树节点信息
        this.$bus.$emit('sendDeviceTreeNodeInfo', this.currentSelected)
        if (selectedKeys.length === 0) return
        this.selectedKeys = selectedKeys

      },

      /**

 src/views/dnc/base/modules/ProductStructure/Process/ProcessModal.vue

@@ -8,12 +8,11 @@
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <ProcessModalForm ref="realForm" @ok="submitCallback" :allDeviceList="allDeviceList"/>
    <ProcessModalForm ref="realForm" @ok="submitCallback"/>
  </j-modal>
</template>

<script>
  import dncApi from '@/api/dnc'
  import ProcessModalForm from './ProcessModalForm.vue'

  export default {
@@ -31,28 +30,13 @@
        title: '',
        width: 700,
        visible: false,
        allDeviceList: [],
        isAddNextLevel: false // 是否为添加下级，作为树节点是否展开的判断
      }
    },
    watch: {
      visible: {
        handler(value) {
          if (value) this.getAllDeviceListByApi()
        }
      }
    },
    created() {
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      getAllDeviceListByApi() {
        dncApi.getAllDeviceListApi()
          .then(res => {
            if (res.success) this.allDeviceList = res.list
          })
      },

      /**
       * 点击部件创建部件下级工序
       */

 src/views/dnc/base/modules/ProductStructure/Process/ProcessModalForm.vue

@@ -83,11 +83,6 @@
  export default {
    name: 'ProcessModalForm',
    components: {},
    props: {
      allDeviceList: {
        type: Array
      }
    },
    data() {
      return {
        model: {

 src/views/dnc/base/modules/ProductStructure/ProcessSpecVersion/ProcessSpecVersionModal.vue

@@ -8,12 +8,11 @@
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <ProcessSpecVersionModalForm ref="realForm" @ok="submitCallback" :allDeviceList="allDeviceList"/>
    <ProcessSpecVersionModalForm ref="realForm" @ok="submitCallback"/>
  </j-modal>
</template>

<script>
  import dncApi from '@/api/dnc'
  import ProcessSpecVersionModalForm from './ProcessSpecVersionModalForm.vue'

  export default {
@@ -31,7 +30,6 @@
        title: '',
        width: 500,
        visible: false,
        allDeviceList: [],
        isAddNextLevel: false // 是否为添加下级，作为树节点是否展开的判断
      }
    },
@@ -42,7 +40,6 @@
      handleOk() {
        this.$refs.realForm.submitForm()
      },


      // 创建零件下级工艺规程版本
      handlePartsAddRelative() {

 src/views/dnc/base/modules/ProductStructure/ProcessStep/ProcessStepInfo.vue

@@ -5,7 +5,7 @@
    <a-descriptions-item label="工步类型">{{currentLevelDetails.stepType}}</a-descriptions-item>
    <a-descriptions-item label="加工设备型号">{{currentLevelDetails.processingEquipmentModel}}</a-descriptions-item>
    <a-descriptions-item label="加工设备类型">{{currentLevelDetails.processingEquipmentOs}}</a-descriptions-item>
    <a-descriptions-item label="加工设备编号">{{currentLevelDetails.deviceNo_dictText}}</a-descriptions-item>
    <a-descriptions-item label="加工设备编号">{{currentLevelDetails.deviceNo}}</a-descriptions-item>
    <a-descriptions-item label="工装编号">{{currentLevelDetails.assembleStep}}</a-descriptions-item>
    <a-descriptions-item label="工装名称    " :span="2">{{currentLevelDetails.assembleName}}</a-descriptions-item>
    <a-descriptions-item label="创建人">{{currentLevelDetails.createName}}</a-descriptions-item>

 src/views/dnc/base/modules/ProductStructure/ProcessStep/ProcessStepModal.vue

@@ -8,12 +8,11 @@
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <ProcessStepModalForm ref="realForm" @ok="submitCallback" :allDeviceList="allDeviceList"/>
    <ProcessStepModalForm ref="realForm" @ok="submitCallback"/>
  </j-modal>
</template>

<script>
  import dncApi from '@/api/dnc'
  import ProcessStepModalForm from './ProcessStepModalForm.vue'

  export default {
@@ -26,19 +25,11 @@
        type: Object
      }
    },
    watch: {
      visible: {
        handler(value) {
          if (value) this.getAllDeviceListByApi()
        }
      }
    },
    data() {
      return {
        title: '',
        width: 700,
        visible: false,
        allDeviceList: [],
        isAddNextLevel: false // 是否为添加下级，作为树节点是否展开的判断
      }
    },
@@ -46,13 +37,6 @@
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      getAllDeviceListByApi() {
        dncApi.getAllDeviceListApi()
          .then(res => {
            if (res.success) this.allDeviceList = res.list
          })
      },

      /**
       * 点击工序创建工序下级工步
       */

 src/views/dnc/base/modules/ProductStructure/ProcessStep/ProcessStepModalForm.vue

@@ -35,7 +35,6 @@
        </a-col>
      </a-row>


      <a-row>
        <a-col :span="12">
          <a-form-model-item label="工步类型">
@@ -71,11 +70,6 @@
  export default {
    name: 'ProcessStepModalForm',
    components: {},
    props: {
      allDeviceList: {
        type: Array
      }
    },
    data() {
      return {
        model: {

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

@@ -1,27 +1,27 @@
<template>
  <div v-if="currentLevelInfo.type!==4">
    <a-tabs 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>

      <a-tab-pane :key="1" tab="零件属性" v-if="currentLevelInfo.type===3">
      <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">
      <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">
      <a-tab-pane :key="1" tab="工步属性" v-if="+currentLevelInfo.type===6">
        <ProcessStepInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

      <a-tab-pane :key="2" tab="刀具信息" v-if="currentLevelInfo.type===5||currentLevelInfo.type===6">
      <a-tab-pane :key="2" tab="刀具信息" v-if="+currentLevelInfo.type===5||+currentLevelInfo.type===6">
        <CutterInfo :currentLevelDetails="currentLevelInfo.entity" :size="containerSize"/>
      </a-tab-pane>

@@ -41,7 +41,7 @@
                                    :size="containerSize"/>
        </a-tab-pane>

        <a-tab-pane :key="4" tab="使用设备" v-if="currentLevelInfo.attributionType===5">
        <a-tab-pane :key="4" tab="使用设备" v-if="+currentLevelInfo.attributionType===5">
          <UseDocumentEquipmentTableList ref="useDocumentEquipmentTableRef" :currentDocumentInfo="currentLevelInfo"
                                         :size="containerSize"/>
        </a-tab-pane>
@@ -53,117 +53,125 @@
</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 '../../../common/DocumentInfo'
  import DocumentVersionTableList from '../../../common/DocumentVersionTableList'
  import UseDocumentEquipmentTableList from './Document/UseNcDocumentEquipmentTableList'
  import ProcessStepInfo from './ProcessStep/ProcessStepInfo'
  import FilePreview from '../../../common/FilePreview'
  import TableContextMenu from '../../../common/TableContextMenu'
  import CutterInfo from '@views/dnc/base/modules/ProductStructure/Cutter/CutterInfo.vue'
import ProductInfo from './Product/ProductInfo'
import ComponentInfo from './Component/ComponentInfo'
import PartInfo from './Part/PartInfo'
import ProcessInfo from './Process/ProcessInfo'
import DocumentInfo from '../../../common/DocumentInfo'
import DocumentVersionTableList from '../../../common/DocumentVersionTableList'
import UseDocumentEquipmentTableList from './Document/UseNcDocumentEquipmentTableList'
import ProcessStepInfo from './ProcessStep/ProcessStepInfo'
import FilePreview from '../../../common/FilePreview'
import TableContextMenu from '../../../common/TableContextMenu'
import CutterInfo from '@views/dnc/base/modules/ProductStructure/Cutter/CutterInfo.vue'
import dncApi from '@/api/dnc'

  export default {
    name: 'ProductStructureMainBottom',
    components: {
      CutterInfo,
      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:
export default {
  name: 'ProductStructureMainBottom',
  components: {
    CutterInfo,
    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) {
      const { id, type } = levelInfo
      dncApi.getProductStructureTreeNodeEntityApi({ id, type })
        .then(res => {
          if (res.success) {
            console.log('res-------------', res)
            this.currentLevelInfo = Object.assign(levelInfo, { entity: res.result[0] })
          }
          // 阻止接口在同一文档一次点击内多次触发
          this.hasLoadedDataTabKeyArray.push(activeTabKey)
        })
      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:
        }
      },

      // 释放文件预览接口
      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()
        // 阻止接口在同一文档一次点击内多次触发
        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: auto;
}
</style>

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

@@ -63,63 +63,65 @@
</template>

<script>
  import dncApi from '@/api/dnc'
  import { deleteAction } from '@/api/manage'
  import ProductStructureTreeContextMenu from './ProductStructureTreeContextMenu'
  import ProductModal from './Product/ProductModal'
  import ComponentModal from './Component/ComponentModal'
  import PartModal from './Part/PartModal'
  import ProcessSpecVersionModal from './ProcessSpecVersion/ProcessSpecVersionModal'
  import ProcessModal from './Process/ProcessModal'
  import ProcessStepModal from './ProcessStep/ProcessStepModal'
  import AssignPermissionModal from './Permission/AssignPermissionModal'
import dncApi from '@/api/dnc'
import { deleteAction } from '@/api/manage'
import ProductStructureTreeContextMenu from './ProductStructureTreeContextMenu'
import ProductModal from './Product/ProductModal'
import ComponentModal from './Component/ComponentModal'
import PartModal from './Part/PartModal'
import ProcessSpecVersionModal from './ProcessSpecVersion/ProcessSpecVersionModal'
import ProcessModal from './Process/ProcessModal'
import ProcessStepModal from './ProcessStep/ProcessStepModal'
import AssignPermissionModal from './Permission/AssignPermissionModal'

  export default {
    name: 'ProductStructureTree',
    components: {
      AssignPermissionModal,
      ProcessStepModal,
      ProcessModal,
      ProcessSpecVersionModal,
      PartModal,
      ComponentModal,
      ProductModal,
      ProductStructureTreeContextMenu
    },
    data() {
      return {
        searchInput: '',
        cardLoading: false,
        loading: false,
        treeDataSource: [],
        selectedKeys: [],
        expandedKeys: [],
        beforeSearchExpandedKeys: [],
        searchValue: '',
        dataList: [],
        autoExpandParent: true,
        checkStrictly: true,
        allTreeKeys: [],
        currentSelected: {},
        rightClickSelected: {},
        url: {
          delete: '/nc/product/delete'
        }
export default {
  name: 'ProductStructureTree',
  components: {
    AssignPermissionModal,
    ProcessStepModal,
    ProcessModal,
    ProcessSpecVersionModal,
    PartModal,
    ComponentModal,
    ProductModal,
    ProductStructureTreeContextMenu
  },
  data() {
    return {
      searchInput: '',
      cardLoading: false,
      loading: false,
      treeDataSource: [],
      selectedKeys: [],
      expandedKeys: [],
      beforeSearchExpandedKeys: [],
      searchValue: '',
      dataList: [],
      autoExpandParent: true,
      checkStrictly: true,
      allTreeKeys: [],
      currentSelected: {},
      rightClickSelected: {},
      url: {
        delete: '/nc/product/delete'
      }
    },
    created() {
      this.getTreeDataByApi()
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      getTreeDataByApi() {
        this.loading = true
        this.cardLoading = true
        dncApi.getProductStructureTreeApi().then(res => {
    }
  },
  created() {
    this.getTreeDataByApi()
    this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
  },
  methods: {
    getTreeDataByApi() {
      this.loading = true
      this.cardLoading = true
      dncApi.getProductStructureTreeApi()
        .then(res => {
          if (res.success) {
            console.log('res=================', res)
            this.dataList = []
            this.allTreeKeys = []
            this.treeDataSource = res.list
            this.treeDataSource = res.result
            this.generateList(this.treeDataSource)
            // this.expandedKeys = this.allTreeKeys
            if (this.expandedKeys.length === 0) this.expandedKeys = this.beforeSearchExpandedKeys = [this.treeDataSource[0].id]
@@ -127,239 +129,240 @@
            this.$message.warn(res.message)
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },
        this.loading = false
        this.cardLoading = false
      })
    },

      /**
       * 树节点选中时触发
       * @param selectedKeys 选中节点key
       * @param {node} node 节点对象
       */
      handleTreeSelect(selectedKeys, { node }) {
        let record = node.dataRef
        this.currentSelected = Object.assign({}, record)
        this.selectedKeys = selectedKeys
        // 向右侧父级组件发送当前选中树节点信息
        this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected)
      },
    /**
     * 树节点选中时触发
     * @param selectedKeys 选中节点key
     * @param {node} node 节点对象
     */
    handleTreeSelect(selectedKeys, { node }) {
      let record = node.dataRef
      this.currentSelected = Object.assign({}, record)
      // 向右侧父级组件发送当前选中树节点信息
      this.$bus.$emit('sendCurrentTreeNodeInfo', this.currentSelected)
      if (selectedKeys.length === 0) return
      this.selectedKeys = selectedKeys
    },

      /**
       * 树节点右键单击节点时触发
       * @param event 事件对象
       * @param node 节点对象
       */
      handleTreeRightClick({ event, node }) {
        const record = node.dataRef
        this.rightClickSelected = Object.assign({}, record)
      },
    /**
     * 树节点右键单击节点时触发
     * @param event 事件对象
     * @param node 节点对象
     */
    handleTreeRightClick({ event, node }) {
      const record = node.dataRef
      this.rightClickSelected = Object.assign({}, record)
    },

      // 树节点右键单击菜单中删除按钮时触发
      handleDelete() {
        const that = this
        const { rightClickSelected: { id, type }, $confirm, url, $notification } = that
        $confirm({
          title: '提示',
          content: '确认删除此条记录吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            if (!url.delete) {
              this.$message.error('请设置url.delete属性!')
              return
            }
            deleteAction(url.delete + `/${id}/${type}`)
              .then((res) => {
                if (res.success) {
                  that.getTreeDataByApi()
                  $notification.success({
                    message: '消息',
                    description: res.message
                  })
                } else {
                  $notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.$destroyAll()
              })
          },
          onCancel: () => {
            that.$destroyAll()
    // 树节点右键单击菜单中删除按钮时触发
    handleDelete() {
      const that = this
      const { rightClickSelected: { id, type }, $confirm, url, $notification } = that
      $confirm({
        title: '提示',
        content: '确认删除此条记录吗？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          if (!url.delete) {
            this.$message.error('请设置url.delete属性!')
            return
          }
        })
      },

      /**
       * 自动展开添加下级节点的父节点
       */
      modalFormSubmitSuccess(isAddNextLevel) {
        // 判断是否为添加下级并且判断父节点是否展开
        if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
        this.getTreeDataByApi()
      },

      /**
       * 树节点展开合并时触发
       * @param expandedKeys 展开项key
       */
      handleTreeExpand(expandedKeys) {
        this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },

      /* 输入查询内容变化时触发 */
      handleSearchInputChange() {
        let search = this.searchInput
        let expandedKeys
        let autoExpandParent
        if (search !== '') {
          expandedKeys = this.dataList
            .map(item => {
              if (item.title != null) {
                if (item.title.indexOf(search) > -1) {
                  return this.getParentKey(item.key, this.treeDataSource)
                }
                return null
          deleteAction(url.delete + `/${id}/${type}`)
            .then((res) => {
              if (res.success) {
                that.getTreeDataByApi()
                $notification.success({
                  message: '消息',
                  description: res.message
                })
              } else {
                $notification.warning({
                  message: '消息',
                  description: res.message
                })
              }
            })
            .filter((item, i, self) => item && self.indexOf(item) === i)
          autoExpandParent = true
        } else {
          expandedKeys = this.beforeSearchExpandedKeys
          autoExpandParent = false
            .finally(() => {
              that.$destroyAll()
            })
        },
        onCancel: () => {
          that.$destroyAll()
        }
      })
    },

        Object.assign(this, {
          expandedKeys,
          searchValue: search,
          autoExpandParent
        })
      },
    /**
     * 自动展开添加下级节点的父节点
     */
    modalFormSubmitSuccess(isAddNextLevel) {
      // 判断是否为添加下级并且判断父节点是否展开
      if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
      this.getTreeDataByApi()
    },

      /**
       * 递归获得输入项的父级key
       * @param key 子项key
       * @param tree 子项
       */
      getParentKey(key, tree) {
        let parentKey
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i]
          if (node.children) {
            if (node.children.some(item => item.key === key)) {
              parentKey = node.key
            } else if (
              this.getParentKey(key, node.children)) {
              parentKey = this.getParentKey(key, node.children)
    /**
     * 树节点展开合并时触发
     * @param expandedKeys 展开项key
     */
    handleTreeExpand(expandedKeys) {
      this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    /* 输入查询内容变化时触发 */
    handleSearchInputChange() {
      let search = this.searchInput
      let expandedKeys
      let autoExpandParent
      if (search !== '') {
        expandedKeys = this.dataList
          .map(item => {
            if (item.title != null) {
              if (item.title.indexOf(search) > -1) {
                return this.getParentKey(item.key, this.treeDataSource)
              }
              return null
            }
          })
          .filter((item, i, self) => item && self.indexOf(item) === i)
        autoExpandParent = true
      } else {
        expandedKeys = this.beforeSearchExpandedKeys
        autoExpandParent = false
      }

      Object.assign(this, {
        expandedKeys,
        searchValue: search,
        autoExpandParent
      })
    },

    /**
     * 递归获得输入项的父级key
     * @param key 子项key
     * @param tree 子项
     */
    getParentKey(key, tree) {
      let parentKey
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.children) {
          if (node.children.some(item => item.key === key)) {
            parentKey = node.key
          } else if (
            this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children)
          }
        }
        return parentKey
      },
      }
      return parentKey
    },

      /**
       * 递归获得所有树节点key
       * @param data
       */
      generateList(data) {
        for (let i = 0; i < data.length; i++) {
          data[i].key = data[i].id
          const node = data[i]
          const key = node.id
          const title = node.label
          this.dataList.push({ key, title })
          this.allTreeKeys.push(key)
          this.setTreeNodeIcon(node)
          if (node.children) this.generateList(node.children)
        }
      },
    /**
     * 递归获得所有树节点key
     * @param data
     */
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].key = data[i].id
        const node = data[i]
        const key = node.id
        const title = node.label
        this.dataList.push({ key, title })
        this.allTreeKeys.push(key)
        this.setTreeNodeIcon(node)
        if (node.children) this.generateList(node.children)
      }
    },

      triggerCorrespondingMethod({ methodName }) {
        if (this[methodName]) this[methodName]()
      },
    triggerCorrespondingMethod({ methodName }) {
      if (this[methodName]) this[methodName]()
    },

      /**
       * 设置树节点图标
       * @param treeNode
       */
      setTreeNodeIcon(treeNode) {
        switch (treeNode.type) {
          case 1:
            treeNode.slots = { icon: 'product' }
            break
          case 2:
            treeNode.slots = { icon: 'component' }
            break
          case 3:
            treeNode.slots = { icon: 'part' }
            break
          case 4:
            treeNode.slots = { icon: 'processSpecVersion' }
            break
          case 5:
            treeNode.slots = { icon: 'process' }
            break
          case 6:
            treeNode.slots = { icon: 'processStep' }
            break
          default:
        }
    /**
     * 设置树节点图标
     * @param treeNode
     */
    setTreeNodeIcon(treeNode) {
      switch (treeNode.type) {
        case 1:
          treeNode.slots = { icon: 'product' }
          break
        case 2:
          treeNode.slots = { icon: 'component' }
          break
        case 3:
          treeNode.slots = { icon: 'part' }
          break
        case 4:
          treeNode.slots = { icon: 'processSpecVersion' }
          break
        case 5:
          treeNode.slots = { icon: 'process' }
          break
        case 6:
          treeNode.slots = { icon: 'processStep' }
          break
        default:
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .ant-card-body {
    padding: 0 12px 0 0;
  }
/deep/ .ant-card-body {
  padding: 0 12px 0 0;
}

  /deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
    height: 100%;
  }
/deep/ .ant-card-body, /deep/ .ant-spin-nested-loading, /deep/ .ant-spin-container {
  height: 100%;
}

  /deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger {
    display: inline-block;
    width: calc(100% - 24px) !important;
  }
/deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger {
  display: inline-block;
  width: calc(100% - 24px) !important;
}

  ::-webkit-scrollbar {
    width: 8px;
  }
::-webkit-scrollbar {
  width: 8px;
}

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

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

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .tree_con {
      height: 600px !important;
    }
@media screen and (min-width: 1400px) and (max-width: 1680px) {
  .tree_con {
    height: 600px !important;
  }
}

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .tree_con {
      height: 501px !important;
    }
@media screen and (min-width: 1280px) and (max-width: 1400px) {
  .tree_con {
    height: 501px !important;
  }
}

  @media screen and (max-width: 1280px) {
    .tree_con {
      height: 501px !important;
    }
@media screen and (max-width: 1280px) {
  .tree_con {
    height: 501px !important;
  }
}
</style>