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>