qjkankan_v1.1.1/packages/qjkankan-editor/src/components/NestedFolder.vue

<template>
  <div class="scene-group">
    <div
      class="top-bar"
      :class="{
        highlight: targetId === folderInfo.id,
        disabled: isDisabled,
      }"
      @click="onClickTopBar"
      :style="{
        paddingLeft: topBarPaddingLeft,
      }"
    >
      <i
        class="iconfont icon-edit_input_arrow icon-expand"
        :class="isExpanded ? '' : 'collapsed'"
      ></i>
      <img
        v-show="!isExpanded"
        class="folder collapsed"
        src="@/assets/images/icons/folder-blue-small-close.png"
        alt=""
        draggable="false"
      />
      <img
        v-show="isExpanded"
        class="folder opened"
        src="@/assets/images/icons/folder-blue-small-open.png"
        alt=""
        draggable="false"
      />
      <span class="group-name">{{
        folderInfo.id === 1
          ? $i18n.t("gather.root_dir")
          : folderInfo.name
      }}</span>
    </div>

    <div class="group-content" v-if="isExpanded">
      <div v-for="(item, index) of folderInfo.children" :key="item.id">
        <component
          :is="'NestedFolder'"
          :folderInfo="item"
          :level="level + 1"
          :targetId="targetId"
          :disabledFolderList="disabledFolderList"
          @targeted="onSonTargeted"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "NestedFolder",
  components: {},
  props: {
    folderInfo: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      default: 1,
    },
    disabledFolderList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    targetId: {
      required: true,
    },
  },
  data() {
    return {
      isExpanded: this.level === 1 ? true : false,
    };
  },
  computed: {
    topBarPaddingLeft() {
      return 12 + (this.level - 1) * 12 + "px";
    },
    sceneItemPaddingLeft() {
      return 18 + this.level * 12 + "px";
    },
    isDisabled() {
      return this.disabledFolderList.some((item) => {
        return item.id === this.folderInfo.id;
      });
    },
  },
  methods: {
    onClickTopBar() {
      if (!this.isDisabled) {
        this.isExpanded = !this.isExpanded;
        this.$emit("targeted", this.folderInfo.id);
      }
    },
    onSonTargeted(id) {
      this.$emit("targeted", id);
    },
  },
  mounted() {},
  destroyed() {},
};
</script>

<style lang="less" scoped>
.scene-group {
  user-select: none;
  .top-bar {
    position: relative;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    &:hover {
    }
    &.highlight {
      background: #ebedf0;
    }
    &.disabled {
      opacity: 0.5;
    }
    > .icon-expand {
      display: inline-block;
      font-size: 12px;
      transform: scale(0.7);
      color: rgba(130, 134, 142, 1);
      flex: 0 0 auto;
      &.collapsed {
        display: inline-block;
        transform: scale(0.7) rotate(-90deg);
      }
    }
    > img.folder {
      margin-left: 7px;
      flex: 0 0 auto;
      width: 16px;
      &.collapsed {
        height: 16px;
      }
      &.opened {
        height: 14px;
      }
    }
    > .group-name {
      margin-left: 6px;
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      flex: 1 1 auto;
      font-size: 14px;
      color: #323233;
      cursor: default;
    }
  }
}
</style>