SPDM/src/components/common/fileTreeTemp/index.vue

<template>
  <div class="comp-content">
    <div class="content">
      <div v-if="!hideTree" class="left-content">
        <div class="options">
          <slot name="options" />
        </div>
        <div class="tree-data">
          <el-tree
            v-if="visible"
            ref="treeRef"
            node-key="id"
            highlight-current
            :load="loadMoreFun"
            lazy
            :props="{
              label: 'nodeName',
              children: 'children',
              isLeaf: 'leaf',
            }"
            @node-click="nodeClickFun"
            @current-change="currentChangeFun"
          >
            <template #default="{ data, node }">
              <div class="tree-item">
                <div class="name">
                  <div class="icon">
                    <template v-if="data.dataType === 1">
                      <el-icon :size="18">
                        <Folder v-if="!node.expanded" />
                        <FolderOpened v-else />
                      </el-icon>
                    </template>
                    <template v-if="data.dataType === 2">
                      <el-icon :size="18">
                        <Document />
                      </el-icon>
                    </template>
                    <template v-else>
                      <el-icon :size="18">
                        <Folder v-if="!node.expanded" />
                        <FolderOpened v-else />
                      </el-icon>
                    </template>
                  </div>
                  <div class="label">{{ data.nodeName }}</div>
                </div>
                <div class="actions">
                  <slot name="treeAction" :data="data" :node="node" />
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="right-content">
        <div class="tree-menu">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="(item) in navList" :key="item.id" @click="openDirFun(item.id)">
              {{ item.nodeName }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="table">
          <slot name="table" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ArrowRight, Folder, FolderOpened, Document } from '@element-plus/icons-vue';

interface Props {
  api: any;
  params?:any;
  hideTree?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  api: null,
  hideTree: false,
  params: null,
});

watch(() => props.params?.dimensionTemplateId, (newVal, oldVal) => {
  console.log('1625', newVal, oldVal);
});
const emit = defineEmits(['choseNode', 'updateNav']);

const treeRef = ref<any>();
const navList = ref<any>([]);
const visible = ref(true);

// 加载节点
const loadMoreFun = async(node: any, resolve: any) => {
  const listData: any = await getDataFun(node.data.id || 0, node.data.nodeType || '');
  if (node.level >= 1) {
    node.data.children = listData;
    choseNodeFun(node.data);
  }
  return resolve(listData);
};

// 获取节点数据
const getDataFun = async(pId: string, nodeType:string) => {
  if (props.api) {
    const res: any = await props.api({ chooseNodeId: pId || '', chooseNodeType: nodeType, ...props.params });
    if (res.code === 200) {
      return res.data;
    } else {
      return [];
    }
  }
};

// 树形节点点击
const nodeClickFun = (data: any, node: any) => {
  updateNavFun([]);
  getTreeMenuFun(node);
  choseNodeFun(data);
};

// 循环获取父节点
const getTreeMenuFun = (node: any) => {
  if (node.label && node.parent) {
    const data = navList.value;
    data.unshift(node.data);
    updateNavFun(data);
    getTreeMenuFun(node.parent);
  }
};

// 打开目录
const openDirFun = (id: any) => {
  const node = treeRef.value.getNode(String(id));
  if (node) {
    node.loaded = false;
    node.expand();
    treeRef.value.setCurrentKey(id);
    choseNodeFun(node.data);
  }
};

// 返回上一级
const backFun = () => {
  const data = navList.value[navList.value.length - 2];
  openDirFun(data.id);
};

// 当前节点更改
const currentChangeFun = (data: any, node: any) => {
  updateNavFun([]);
  getTreeMenuFun(node);
};

// 选中节点
const choseNodeFun = (data: any) => {
  emit('choseNode', data);
};

// 导航变更
const updateNavFun = (data: any) => {
  navList.value = data;
  emit('updateNav', data);
};

const reloadFun = () => {
  visible.value = false;
  setTimeout(() => {
    visible.value = true;
  }, 0);
};

defineExpose({
  backFun,
  openDirFun,
  reloadFun,
});
</script>

<style lang="scss" scoped>
.comp-content {
  height: 100%;
  .content {
    height: 100%;
    display: flex;
    .left-content {
      width: 400px;
      overflow: auto;
      margin-right: var(--margin-normal);
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      padding: var(--padding-normal);
      .tree-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 20px;
        width: 0;
        .name {
          flex: 1;
          display: flex;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            margin-right: var(--margin-tiny);
          }
          .label {
            display: flex;
            align-items: center;
            min-height: 20px;
          }
        }
        .actions {
          padding-left: var(--padding-normal);
          display: flex;
          align-items: center;
          min-height: 20px;
        }
      }
    }
    .right-content {
      flex: 1;
      overflow: auto;
      background-color: var(--el-bg-color);
      border-radius: var(--border-radius-normal);
      padding: var(--padding-normal);
      .tree-menu {
        display: flex;
        align-items: center;
        height: 40px;
      }
    }
  }
}
</style>