Platform/src/views/project/summary/components/project-explorer/ProjectExplorer.vue

<script setup lang="ts">
import {onMounted, reactive, ref, PropType} from "vue";

const props = defineProps({
  data: {
    type: Array as PropType<SubjectTreeNode[]>,
    required: true,
  },
})
// 上下文菜单设置
const menuGroup: Comp.ContextMenu.MenuGroup[] = [
  [
    {
      text: '新建单项工程',
      icon: 'dsk-home-two-add',
      disable() {
        return false;
      },
      callback() {
        console.log('新建单项工程')
      },
    },
    {
      text: '新建单位工程',
      icon: 'dsk-file-addition-one',
      disable() {
        return false;
      },
      callback() {
        console.log('新建单位工程')
      },
    },
    {
      text: '重命名',
      icon: 'dsk-edit',
      disable() {
        return false;
      },
      callback() {
        console.log('重命名')
      },
    },
    {
      text: '删除',
      icon: 'dsk-delete-one',
      disable() {
        return false;
      },
      callback() {
        console.log('删除')
      },
    },
    {
      text: '分享协作',
      icon: 'dsk-peoples',
      disable() {
        return false;
      },
      callback() {
        console.log('分享协作')
      },
    },
  ],
];

const readOnly = ref(false)
const loading = ref(false)

const data = [
  {
    label: '市妇幼保健院新址配套市政道路',
    icon: 'dsk-city-one',
    children: [
      {
        label: '单项工程1',
        icon: 'dsk-home-two',
        children: [
          {
            label: '单位工程1.1',
          },
          {
            label: '单位工程1.2',
          },
        ],
      },
      {
        label: '单项工程2',
        icon: 'dsk-home-two',
        children: [
          {
            label: '单位工程2.1',
          },
          {
            label: '单位工程2.2',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <section class="project-explorer">
    <ul class="tabs">
      <li class="tab active">原始结构</li>
      <li class="tab">整理结构</li>
    </ul>
    <div class="tree-wrap">
      <context-menu :item-groups="menuGroup" ref="contextMenuRef" :readOnly="readOnly" auto-size>
        <el-tree
            class="subject-tree"
            v-loading="loading"
            icon-class="el-icon-arrow-right"
            :data="data"
            default-expand-all
            :expand-on-click-node="false"
            node-key="id"
            highlight-current
            :current-node-key="currentNodeKey"
            @node-click="handleNodeClick"
            @node-contextmenu="handleNodeContextmenu"
            ref="treeRef"
        >
          <template #default="{ data }">
            <span class="custom-tree-node">
              <iconfont class="subject-icon" :class="data.icon"/>
              <span class="text-wrap">
                <i class="text" :title="data.label">{{ data.label }}</i>
              </span>
            </span>
          </template>
        </el-tree>
      </context-menu>
    </div>
  </section>
</template>

<style lang="scss" src="./style.scss" scoped></style>