hsq-pro/src/views/vent/reportManager/comment/common/treeList.vue

<template>
  <div class="vtl-node" :id="model.id" :class="{ 'vtl-leaf-node': !isFolder, 'vtl-tree-node': isFolder }">
    <div :class="treeNodeClass" @mouseover="mouseOver" @mouseout="mouseOut" @click.stop="toggle">
      <div class="vtl-border-text">
        <template v-if="isFolder">
          <slot v-if="isexpanded" :item="{ title: model.title, isFolder: true, isexpanded: true }" name="icon"> </slot>
          <slot v-else :item="{ title: model.title, isFolder: true, isexpanded: false }" name="icon"></slot>
        </template>
        <slot v-else :item="{ title: model.title, isFolder: false }" name="icon"></slot>
        <span class="vtl-node-content ellipsis">
          {{ model.title }}
        </span>
      </div>
      <div class="vtl-operation" v-show="isHover && !isFolder">
        <span @click.stop.prevent="delNode">
          <slot name="operation" type="detailNode"></slot>
        </span>
      </div>
    </div>
  </div>
  <div class="vtl-tree-margin" v-show="isexpanded">
    <!-- 这里无法使用$attr来透传属性官方还未解决此bug -->
    <treeList
      @on-click="(depth) => $emit('onClick', depth)"
      @detail-node="(depth) => $emit('detailNode', depth)"
      v-for="newmodel in model.children"
      :selected="selected"
      :model="newmodel"
      :key="newmodel.id"
    >
      <template #icon="slotProps">
        <slot name="icon" v-bind="slotProps"></slot>
      </template>
      <template #operation="slotProps">
        <slot name="operation" v-bind="slotProps"></slot>
      </template>
    </treeList>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue';
  interface IFileSystem {
    id: string;
    title: string;
    pid: string;
    ppid: string;
    isFolder: boolean;
    isexpanded: boolean;
    isAdd: boolean;
    children?: IFileSystem[];
  }
  // 吐出去的事件
  const emit = defineEmits(['onClick', 'detailNode']);
  // 拿到传入的值
  const props = withDefaults(
    defineProps<{
      model: IFileSystem;
      selected: IFileSystem;
    }>(),
    {
      // draggable: false,
    }
  );
  //是否移入
  const isHover = ref(false);
  // 是否是文件夹
  const isFolder = computed(() => {
    return props.model.isFolder;
  });
  //是否展开
  const isexpanded = computed(() => {
    return props.model.isexpanded;
  });
  const isSelected = computed(() => {
    if (props.model.pid == '0' || props.model.pid == '1' || props.model.pid == '2') {
      return props.selected.id === props.model.id && props.selected.pid === props.model.pid;
    } else if (props.model.ppid == '0' || props.model.ppid == '1' || props.model.ppid == '2') {
      return props.selected.id === props.model.id && props.selected.ppid === props.model.ppid;
    } else {
      return props.selected.id === props.model.id;
    }
  });

  // 拖拽样式
  const treeNodeClass = computed(() => {
    return {
      'vtl-node-main': true,
      selected: isSelected.value,
    };
  });

  // 删除目录
  const delNode = () => {
    emit('detailNode', {
      ...props.model,
      eventType: 'detail',
    });
  };

  // 展开收起
  const toggle = () => {
    if (isFolder.value) {
      console.log(props.model, 'props.model---------');
      props.model.isexpanded = !props.model.isexpanded;
      emit('onClick', {
        ...props.model,
      }); //lxh
    } else {
      console.log(props.model, 'props.model---------');
      emit('onClick', {
        ...props.model,
      });
    }
  };
  // 拖拽结束
  const mouseOver = () => {
    isHover.value = true;
  };
  // 移出
  const mouseOut = () => {
    isHover.value = false;
  };
</script>
<style lang="less">
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .vtl-node {
      --node-select-bg: #3f506a;
    }
  }

  .vtl-node {
    --node-select-bg: #1c4869;
    .vtl-node-main {
      display: flex;
      align-items: center;
      padding: 2px 0 2px 2px;
      cursor: pointer;

      &:hover {
        .vtl-border-text {
          width: 80%;
        }
      }

      .vtl-border-text {
        display: flex; //lxh
        flex: 1;
        align-items: center; //lxh
        width: 100%;
        padding-left: 5px;

        .iconfont {
          width: 16px;
          height: 16px;
          vertical-align: text-bottom;
        }
      }

      &.selected {
        // background-color: rgba(45, 113, 134, 0.2);
        background-color: var(--node-select-bg);
      }

      .vtl-node-content {
        color: #fff;
        padding-left: 5px;
        font-size: 14px;
        width: 80%;
        display: inline-block;
        vertical-align: bottom;
      }

      &:hover {
        .vtl-node-content {
          color: #fff;
          overflow: hidden;
        }
      }

      .vtl-operation {
        padding-right: 10px;
      }
    }
  }

  .vtl-tree-margin {
    padding-left: 1em;
  }
</style>