FD_Pano/src/components/sceneGroupInEditor.vue

<template>
  <div class="scene-group">
    <div
      class="top-bar"
      :class="isConfirmingDeletion ? '' : 'show-icons-on-hover'"
      @click="onClickTopBar"
      :style="{
        paddingLeft: topBarPaddingLeft,
      }"
    >
      <i class="iconfont icon-edit_input_arrow icon-expand" :class="isExpanded ? '' : 'collapsed'"></i>
      <i v-show="isExpanded" class="iconfont icon-editor_folder_on folder_expalded"></i>
      <i v-show="!isExpanded" class="iconfont icon-editor_folder_off folder_collapsed"></i>
      <span class="group-name" v-title="groupNode.name">{{groupNode.name}}</span>
      <i v-show="level === 1"
        class="iconfont icon-editor_list_add icon-add"
        v-tool-tip-wrapper
      >
        <TooltipInEditor
          :text="'新增二级分组'"
        ></TooltipInEditor>
      </i>
      <i
        class="iconfont icon-editor_list_image icon-image"
        v-tool-tip-wrapper
      >
        <TooltipInEditor
          :text="'新增全景图或三维场景'"
        ></TooltipInEditor>
      </i>
      <i
        class="iconfont icon-editor_list_edit icon-edit"
        v-tool-tip-wrapper
      >
        <TooltipInEditor
          :text="'重命名'"
        ></TooltipInEditor>
      </i>
      <i
        class="iconfont icon-editor_list_delete icon-delete"
        v-tool-tip-wrapper
        @click.stop="onRequestForDelete"
      >
        <TooltipInEditor
          :text="'删除'"
        ></TooltipInEditor>
      </i>
      <div class="deletion-confirm-wrap">
        <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
          v-clickoutside="onRequestForCancelDelete"
          @click.stop="onConfirmDelete"
        >
          删除
        </div>
      </div>
    </div>

    <div class="group-content" v-if="isExpanded">
      <template v-if="!(groupNode.children.length === 1 && groupNode.children[0].name === '默认二级分组')">
        <div
          v-for="(item) of groupNode.children"
          :key=item.id
        >
          <component
            :is="'SceneGroup'"
            v-if="!item.type"
            :groupNode="item"
            :level="level + 1"
            @renameScene="onRenameScene"
            @deleteScene="onDeleteScene"
            @deleteGroup="onInnerGroupConfirmDelete"
          />
          <SceneInGroupInEditor
            v-else
            :style="{
              paddingLeft: sceneItemPaddingLeft,
            }"
            :sceneInfo="item"
            @rename="onRenameScene"
            @delete="onDeleteScene"
          />
        </div>
      </template>
      <template v-else>
        <!-- 自动生成的默认二级分组不显示，里边的内容显示成直属于一级分组的效果。 -->
        <SceneInGroupInEditor
          v-for="(item) of groupNode.children[0].children"
          :key=item.id
          :style="{
            paddingLeft: sceneItemPaddingLeft,
          }"
          :sceneInfo="item"
          @rename="onRenameScene"
          @delete="onDeleteScene"
        />
      </template>
    </div>
  </div>
</template>

<script>
import TooltipInEditor from '@/components/TooltipInEditor.vue'
import SceneInGroupInEditor from "@/components/sceneInGroupInEditor.vue";

export default {
  name: 'SceneGroup',
  components: {
    TooltipInEditor,
    SceneInGroupInEditor,
  },
  props: {
    groupNode: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      isExpanded: false,
      isConfirmingDeletion: false,
    }
  },
  computed: {
    topBarPaddingLeft() {
      return 12 + (this.level - 1) * 12 + 'px' 
    },
    sceneItemPaddingLeft() {
      return 18 + this.level * 12 + 'px' 
    },
  },
  methods: {
    onClickTopBar() {
      if (this.isConfirmingDeletion) {
        return
      }
      this.isExpanded = !this.isExpanded
      if (this.isExpanded) {
        this.$bus.emit('scene-group-expanded', this.groupNode.id, this.level)
      }
    },
    onOtherSceneGroupExpanded(id, level) {
      if (id !== this.groupNode.id && level === this.level) {
        this.isExpanded = false
      }
    },
    onRenameScene(...params) {
      this.$emit('renameScene', ...params)
    },
    onDeleteScene(...params) {
      this.$emit('deleteScene', ...params)
    },
    onRequestForDelete() {
      this.isConfirmingDeletion = true
    },
    onRequestForCancelDelete() {
      if (!this.isConfirmingDeletion) {
        return
      }
      // 先保持isConfirmingDeletion不变，因为onClickTopBar可能要用到
      setTimeout(() => {
        this.isConfirmingDeletion = false
      }, 0);
    },
    onConfirmDelete() {
      this.$emit('deleteGroup', this.groupNode.id, this.level)
      this.isConfirmingDeletion = false
    },
    onInnerGroupConfirmDelete(...params) {
      console.log('jlkjljlkj');
      this.$emit('deleteGroup', ...params)
    }
  },
  mounted() {
    this.$bus.on('scene-group-expanded', this.onOtherSceneGroupExpanded)
  },
  destroyed() {
    this.$bus.removeListener('scene-group-expanded', this.onOtherSceneGroupExpanded)
  }
}
</script>

<style lang="less" scoped>
.scene-group {
  margin-top: 6px;
  .top-bar {
    position: relative;
    color: rgba(255, 255, 255, 0.6);
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-left: -12px;
    margin-right: -10px;
    padding-right: 10px;
    &:hover {
      background: #313131;
      > .group-name {
        width: 120px;
      }
    }
    &.show-icons-on-hover:hover {
      > .icon-add, .icon-image, .icon-edit, .icon-delete {
        display: block;
      }
    }
    > .icon-expand {
      display: inline-block;
      font-size: 12px;
      transform: scale(0.7);
      &.collapsed {
        display: inline-block;
        transform: scale(0.7) rotate(-90deg);
      }
    }
    > .folder_expalded {
      font-size: 16px;
      margin-left: 7px;
    }
    > .folder_collapsed {
      font-size: 16px;
      margin-left: 7px;
    }
    > .group-name {
      margin-left: 6px;
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      flex: 1 1 auto;
    }
    > .icon-add {
      margin-left: 12px;
      display: none;
      cursor: pointer;
      &:hover {
        color: #0076f6;
      }
    }
    > .icon-image {
      margin-left: 12px;
      display: none;
      cursor: pointer;
      &:hover {
        color: #0076f6;
      }
    }
    > .icon-edit {
      margin-left: 12px;
      display: none;
      cursor: pointer;
      &:hover {
        color: #0076f6;
      }
    }
    > .icon-delete {
      margin-left: 12px;
      display: none;
      cursor: pointer;
      &:hover {
        color: #fa5555;
      }
    }
    .deletion-confirm-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 44px;
      overflow: hidden;
      pointer-events: none;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      > .deletion-confirm {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #FA5555;
        transition: right 0.3s;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: #fff;
        pointer-events: auto;
        &::after {
          content: '';
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
        &.show {
          right: 0;
        }
        &.hide {
          right: -44px;
        }
      }
    }
  }
}
</style>