|
|
@@ -0,0 +1,155 @@
|
|
|
+<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>
|
gemercheung