DNC模块： 1、解决点击tabs栏空白处出现空内容组件问题 2、新增树内容搜索时若清空内容后还原为搜索前展开的树节点的功能 产品结构树： 1、工艺和...

zhaowei

2025-02-28 b96d0e41cb4d68074fef53ae0ef10ee0c6be1b07

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

@@ -9,7 +9,7 @@
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="expandedKeys = allTreeKeys">展开所有</a-menu-item>
              <a-menu-item key="2" @click="expandedKeys = ['-1']">合并所有</a-menu-item>
              <a-menu-item key="3" @click="queryTreeData">刷新</a-menu-item>
              <a-menu-item key="3" @click="getTreeDataByApi">刷新</a-menu-item>
            </a-menu>
            <a-button>
              <a-icon type="bars"/>
@@ -24,7 +24,7 @@

        <!--产品结构树-->
        <div style="flex: 1;overflow:auto;margin-top: 10px">
          <a-tree ref="tree" show-icon :expandedKeys.sync="expandedKeys"
          <a-tree blockNode show-icon :expandedKeys.sync="expandedKeys"
                  :selectedKeys="selectedKeys" :treeData="treeDataSource" :autoExpandParent="autoExpandParent"
                  @select="handleTreeSelect" @expand="handleTreeExpand" @rightClick="handleTreeRightClick">
            <template slot="title" slot-scope="{ label, parentId, entity, key:treeKey,type}">
@@ -36,6 +36,7 @@
            <a-icon slot="product" type="shopping"/>
            <a-icon slot="component" type="camera"/>
            <a-icon slot="part" type="hdd"/>
            <a-icon slot="processSpecVersion" type="tag"/>
            <a-icon slot="process" type="apartment"/>
            <a-icon slot="processStep" type="tool"/>
          </a-tree>
@@ -45,15 +46,19 @@

    <!--产品弹窗-->
    <ProductModal ref="productModalFormRef" :currentTreeNodeInfo="rightClickSelected"
                  @submitSuccess="queryTreeData"/>
                  @submitSuccess="getTreeDataByApi"/>
    <!--部件弹窗-->
    <ComponentModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--零件弹窗-->
    <PartModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--工艺规程版本弹窗-->
    <ProcessSpecVersionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--工序弹窗-->
    <ProcessModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--工步弹窗-->
    <ProcessStepModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
    <!--权限配置弹窗-->
    <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="modalFormSubmitSuccess"/>
  </a-card>
</template>

@@ -64,14 +69,18 @@
  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,
@@ -85,6 +94,7 @@
        treeDataSource: [],
        selectedKeys: [],
        expandedKeys: [],
        beforeSearchExpandedKeys: [],
        searchValue: '',
        dataList: [],
        autoExpandParent: true,
@@ -98,11 +108,11 @@
      }
    },
    created() {
      this.queryTreeData()
      this.getTreeDataByApi()
      this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
    },
    methods: {
      queryTreeData() {
      getTreeDataByApi() {
        this.loading = true
        this.cardLoading = true
        dncApi.getProductStructureTreeApi().then(res => {
@@ -112,7 +122,7 @@
            this.treeDataSource = res.list
            this.generateList(this.treeDataSource)
            // this.expandedKeys = this.allTreeKeys
            if (this.expandedKeys.length === 0) this.expandedKeys = [this.treeDataSource[0].id]
            if (this.expandedKeys.length === 0) this.expandedKeys = this.beforeSearchExpandedKeys = [this.treeDataSource[0].id]
          } else {
            this.$message.warn(res.message)
          }
@@ -145,38 +155,42 @@
        this.rightClickSelected = Object.assign({}, record)
      },

      /**
       * 树节点右键单击菜单中删除按钮时触发
       */
      // 树节点右键单击菜单中删除按钮时触发
      handleDelete() {
        this.$confirm({
        const that = this
        const { rightClickSelected: { id, type }, $confirm, url, $notification } = that
        $confirm({
          title: '提示',
          content: '确认删除此条记录吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk: () => {
            console.log('this.rightClickSelected.id', this.rightClickSelected.id)
            if (!this.url.delete) {
            if (!url.delete) {
              this.$message.error('请设置url.delete属性!')
              return
            }
            const that = this
            deleteAction(that.url.delete, { id: this.rightClickSelected.id })
            deleteAction(url.delete + `/${id}/${type}`)
              .then((res) => {
                if (res.success) {
                  that.queryTreeData()
                  that.$notification.success({
                  that.getTreeDataByApi()
                  $notification.success({
                    message: '消息',
                    description: res.message
                  })
                } else {
                  that.$notification.warning({
                  $notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.$destroyAll()
              })
          },
          onCancel: () => {
            that.$destroyAll()
          }
        })
      },
@@ -187,7 +201,7 @@
      modalFormSubmitSuccess(isAddNextLevel) {
        // 判断是否为添加下级并且判断父节点是否展开
        if (isAddNextLevel && !this.expandedKeys.includes(this.rightClickSelected.id)) this.expandedKeys.push(this.rightClickSelected.id)
        this.queryTreeData()
        this.getTreeDataByApi()
      },

      /**
@@ -195,27 +209,36 @@
       * @param expandedKeys 展开项key
       */
      handleTreeExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys
        this.autoExpandParent = false
      },

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

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

@@ -257,8 +280,8 @@
        }
      },

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

      /**
@@ -275,6 +298,9 @@
            break
          case 3:
            treeNode.slots = { icon: 'part' }
            break
          case 4:
            treeNode.slots = { icon: 'processSpecVersion' }
            break
          case 5:
            treeNode.slots = { icon: 'process' }
@@ -296,10 +322,6 @@

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

  /deep/ .ant-tree-node-content-wrapper {
    width: calc(100% - 24px);
  }

  /deep/ .ant-tree-title, .ant-tree-title .ant-dropdown-trigger {