作者:李明骏  历史版本:1  最后编辑:李明骏  更新时间:2024-09-11 09:48

编写版本: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

属性

属性名 类型 默认值 描述
catalogueKey String - 目录的唯一标识
title String - 树组件的标题
parentId String 0 父节点ID
nodeClass String - 节点的类名
beforeDelete Function - 删除节点前的回调函数
showMenu Boolean true 是否显示节点菜单

事件

事件名 说明 返回值
search 搜索事件 搜索关键词
node-click 节点点击事件 节点数据
node-click-menu 节点右键菜单点击事件 事件key, 节点数据