shangyun/Web/src/components/LayersTree.vue

<template>
  <div v-if="getTreeData.length === 0" style="height: 100px; color: white;">
    <a-empty :image="noData" :image-style="{ height: '60px' }" />
  </div>
  <div v-else>
    <a-tree class="device-map-layers" @drop="onDrop" v-bind="$attrs" v-if="getTreeData.length">
      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id" :disabled="true">
        <template #title>
          <div style="display: flex;align-items: center;">
            <FolderOutlined />
            <div style="margin-left: 10px;">
              {{ layer.name }}
            </div>
          </div>
        </template>
        <template v-if="layer.elements">
          <a-tree-node v-for="resource in layer.elements" :id="getLayerTreeKey('resource', resource.id)"
            :parent="{ id: layer.id, type: layer.type }" :key="getLayerTreeKey('resource', resource.id)">
            <template #title>
              <div style="display: flex;align-items: center;">
                <Icon v-if="resource.resource.type === 0">
                  <template #component>
                    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
                      <path
                        d="M512 1006.34L203.038 512 512 17.66 820.962 512 512 1006.34zM320.962 512L512 817.66 703.037 512 512 206.34 320.962 512z"
                        p-id="4348" />
                    </svg>
                  </template>
                </Icon>
                <LineOutlined :rotate="135" v-else-if="resource.resource.type === 1" />
                <GatewayOutlined v-else-if="resource.resource.type === 2" />
                <div style="margin-left: 10px;">
                  {{ resource.name }}
                </div>
              </div>
            </template>
          </a-tree-node>
        </template>
      </a-tree-node>
    </a-tree>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, PropType } from 'vue'
import Icon from '@ant-design/icons-vue';
import { FolderOutlined, LineOutlined, GatewayOutlined } from '@ant-design/icons-vue';
import noData from '/@/assets/icons/no-data.png'
import { useMyStore } from '/@/store'
import { DropEvent, mapLayer } from '/@/types/mapLayer'
import { getLayerTreeKey } from '/@/utils/layer-tree'

const store = useMyStore()

const props = defineProps({
  layerData: Array as PropType<mapLayer[]>
})

const getTreeData = computed(() => {
  return JSON.parse(JSON.stringify(props.layerData))
})

const shareId = computed(() => {
  return store.state.layerBaseInfo.share
})

const defaultId = computed(() => {
  return store.state.layerBaseInfo.default
})

async function onDrop({ node, dragNode, dropPosition, dropToGap }: DropEvent) {
  let _treeData = props.layerData || []
  let dragKey = dragNode.eventKey
  dragKey = dragKey.replaceAll('resource__', '')
  const dropPos = node.pos.split('-')
  let dropKey =
    node.eventKey.includes(shareId.value) ||
      node.eventKey.includes(defaultId.value)
      ? node.eventKey
      : node.$parent.eventKey
  if (!dragKey || !dropKey) return
  dropKey = dropKey.replaceAll('resource__', '')
  const loop = (data: mapLayer[], key: string, callback: Function) => {
    data.forEach((item, index, arr) => {
      if (item.id === key) {
        return callback(item, index, arr)
      }
      if (item.elements) {
        return loop(item.elements, key, callback)
      }
    })
  }
  const data = [..._treeData] as mapLayer[]
  let dragObj = {} as mapLayer
  loop(data, dragKey, (item: mapLayer, index: number, arr: mapLayer[]) => {
    arr.splice(index, 1)
    dragObj = item
  })
  if (!dropToGap) {
    // Drop on the content
    loop(data, dropKey, (item: mapLayer) => {
      item.elements = item.elements || []
      // where to insert 示例添加到尾部，可以是随意位置
      item.elements.push(dragObj)
    })
  }
  _treeData = data
}
</script>

<style lang="scss">
$antPrefix: 'ant';

.device-map-layers.#{$antPrefix}-tree {
  color: #fff;

  .#{$antPrefix}-tree-checkbox:not(.#{$antPrefix}-tree-checkbox-checked) .#{$antPrefix}-tree-checkbox-inner {
    background-color: unset;
  }

  .anticon {
    font-size: 16px;
  }

  // 第一个层级的 li，有左边距 16px
  >li {
    padding-left: 16px;
    padding-right: 16px;
  }

  li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;

    &:first-child {
      padding-top: 4px;
    }

    &.#{$antPrefix}-tree-treenode-disabled>.#{$antPrefix}-tree-node-content-wrapper {
      height: 20px;

      span {
        color: #fff;
      }
    }

    >ul {
      width: 100%;
    }

    .#{$antPrefix}-tree-switcher {
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .#{$antPrefix}-tree-checkbox {
      z-index: 1;
    }

    .#{$antPrefix}-tree-checkbox:hover::after,
    .#{$antPrefix}-tree-checkbox-wrapper:hover .#{$antPrefix}-tree-checkbox::after {
      visibility: collapse;
    }

    .#{$antPrefix}-tree-title {
      display: block;
    }

    .#{$antPrefix}-tree-node-content-wrapper {
      color: #fff;
      width: calc(100% - 46px);
      flex: 1;
      box-sizing: content-box;
      height: 20px;
      min-width: 0; // 解决文字溢出不会省略的问题
      padding-right: 0;

      &:not([draggable='true']) {
        border-top: 2px transparent solid;
        border-bottom: 2px transparent solid;
      }

      &:hover {
        background-color: transparent;
      }

      >span {
        &::before {
          // position: absolute;
          // right: 0;
          // left: 0;
          height: 28px;
          transition: all 0.3s;
          content: '';
        }

        // 进度条组件需要相对最外层定位，进度条组件的position不能设置为relative
        >*:not(.progress-wrapper) {
          position: relative;
          z-index: 1;
        }
      }

      &.#{$antPrefix}-tree-node-selected {
        background-color: transparent;
        color: #2d8cf0;

        >span {
          &::before {
            background-color: #4f4f4f;
          }
        }
      }
    }
  }

  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_open .#{$antPrefix}-tree-switcher-icon {
    transform: rotate(0deg) !important;
  }

  span.#{$antPrefix}-tree-switcher.#{$antPrefix}-tree-switcher_close .#{$antPrefix}-tree-switcher-icon {
    transform: rotate(0deg) !important;
  }
}
</style>