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