qjkankan_shibadongcun/packages/code/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>
      <template v-if="!isRenaming">
        <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-tooltip="'新增二级分组'"
          @click="onRequestForAddGroup"
        >
        </i>
        <i
          class="iconfont icon-editor_list_image icon-image"
          v-tooltip="'新增全景图或三维场景'"
        >
        </i>
        <i
          class="iconfont icon-editor_list_edit icon-edit"
          v-tooltip="'重命名'"
          @click="onClickForRename"
        >
        </i>
        <i
          class="iconfont icon-editor_list_delete icon-delete"
          v-tooltip="'删除'"
          @click.stop="onRequestForDelete"
        >
        </i>
        <div class="deletion-confirm-wrap">
          <div class="deletion-confirm" :class="isConfirmingDeletion ? 'show' : 'hide'"
            v-clickoutside="onRequestForCancelDelete"
            @click.stop="onConfirmDelete"
          >
            删除
          </div>
        </div>
      </template>
      <input v-if="isRenaming" class="group-title-input" v-model="newName"
        ref="input-for-rename"
        maxlength="50"
        placeholder="输入名字"
        @blur="onInputNewNameComplete"
        @keydown.enter="onInputEnter"
      />
    </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"
            @renameGroup="onInnerGroupRename"
            @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 SceneInGroupInEditor from "@/components/sceneInGroupInEditor.vue";

export default {
  name: 'SceneGroup',
  components: {
    SceneInGroupInEditor,
  },
  props: {
    groupNode: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      isExpanded: false,
      isRenaming: false,
      newName: '',
      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)
    },

    onRequestForAddGroup() {
      this.$emit('addGroup', this.groupNode.id)
    },

    onClickForRename() {
      this.isRenaming = true
      this.newName = this.groupNode.name
      this.$nextTick(() => {
        this.$refs['input-for-rename'].focus()
      })
    },
    onInputNewNameComplete() {
      this.isRenaming = false
      this.$emit('renameGroup', this.groupNode.id, this.level, this.newName)
      this.newName = ''
    },
    onInputEnter() {
      this.isRenaming = false // 会导致input blur，进而触发onInputNewNameComplete
    },
    onInnerGroupRename(...params) {
      this.$emit('renameGroup', ...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) {
      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;
        }
      }
    }
    > .group-title-input {
      margin-left: 6px;
      flex: 1 1 auto;
      width: 1px;
      height: 30px;
      background: #1A1B1D;
      border-radius: 2px;
      border: 1px solid #404040;
      color: #fff;
      font-size: 14px;
      padding: 0 10px 0 16px;
      &:focus {
        border-color: #0076F6;
      }
    }
  }
}
</style>