编写版本：v1.2.1
适用版本：v1.2.0+
前置条件：使用的工程需在 Webpack5 版本以上，并使用模块联邦（ModuleFederationPlugin）接入 ui-base-core 项目提供的共享组件

共享组件-系统分类树

一、 效果图

用于显示系统中的分类树结构，只需传入对应的分类key即可显示

二、 组件路径

baseCore/core-catalogue-tree.vue

源码：ui-base-core/src/components/core-tree/catalogue/tree.vue

三、 使用举例

template

<template>
    <CoreCatalogueTree
        title="数据服务目录"
        catalogueKey="SERVICE_TYPE"
        :beforeDelete="handleCheckDirData"
        @node-click="treeNodeClick"
    />
</template>

script

<script setup>

import CoreCatalogueTree from 'baseCore/core-catalogue-tree.vue'
...
// 删除前检查事件
handleCheckDirData(data) {
  return new Promise((resolve, reject) => {
    if (data && data.id) {
      // 检测目录下是否有数据
      this.loading = true
      queryDmpServiceFolderPage({
        pageNum: 1,
        pageSize: 1,
        mainBody: { parentId: data.id }
      })
        .then((res) => {
          this.loading = false
          if (res.records?.length) {
            this.$message({
              message: '当前目录下存在数据服务, 无法删除!',
              type: 'warning'
            })
          } else {
            resolve()
          }
        })
        .catch(() => {
          this.loading = false
        })
    } else {
      resolve()
    }
  })
},
// 节点点击事件
treeNodeClick(data) {
}
...
</script>

四、 组件API

属性

事件