qjkankan_v1.1.1/packages/qjkankan-editor/src/components/insertPositionTipInEditor.vue

<template>
  <div
    class="insert-position-tip"
    @dragenter="onDragEnter"
    @dragover="onDragOver"
    @dragleave="onDragLeave"
    @drop="onDrop"
    :style="{
      marginLeft: marginLeft,
    }"
  >
    {{ positionDebug }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { deepClone } from "@/utils/other.js";

export default {
  props: {
    index: {
      type: Number,
      required: true,
    },
    positionDebug: {
      type: String,
      default: "",
    },
    indentLevel: {
      type: Number,
      default: 1,
    },
    topologyLevel: {
      type: Number,
      default: 1,
    },
    parentNode: {
      type: Object,
      default: null,
    },
  },
  computed: {
    ...mapGetters({
      // info: 'info',
      info: "base/baseInfo",
      sceneList: "base/sceneList",
      dragInfo: "editorNavDragInfo",
    }),
    marginLeft() {
      return (this.indentLevel - 1) * 12 + "px";
    },
  },
  methods: {
    canDrop() {
      console.error(this.dragInfo.type, this.topologyLevel, this.parentNode);
      switch (this.dragInfo.type) {
        case "scene": // 被拖拽的是场景
          if (this.topologyLevel === 1) {
            // console.log('情况1：被拖拽的是场景，拖拽到一级分组列表');
            return false;
          } else if (this.topologyLevel === 2) {
            // console.log('情况2：被拖拽的是场景，拖拽到一级分组中');
            if (this.parentNode.children.length === 0) {
              // 如果目标一级分组内容显示是空的，即其下只有一个（内容肯定是空的）默认二级分组
              return true;
            } else {
              // 如果目标一级分组之下显示了内容，则肯定是显示了二级分组。
              // return false
              return true;
            }
          } else if (this.topologyLevel === 3) {
            // console.log('情况3：被拖拽的是场景，拖拽到二级分组中');
            return true;
          } else {
            console.error("情况4：不该出现");
            return false;
          }
        case "topologyGroupLevel2": // 被拖拽的是拓扑结构中二级分组
          if (this.topologyLevel === 1) {
            // console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
            return true;
          } else if (this.topologyLevel === 2) {
            // console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到一级分组中');
            return true;
          } else if (this.topologyLevel === 3) {
            if (this.indentLevel === 2) {
              // console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中');
              return true;
            } else {
              // console.log('情况8：被拖拽的是拓扑结构中二级分组，拖拽到普通的二级分组中');
              return false;
            }
          } else {
            console.error("情况9：不该出现");
            return false;
          }
        case "topologyGroupLevel1": // 被拖拽的是拓扑结构中一级分组
          if (this.topologyLevel === 1) {
            // console.log('情况10：被拖拽的是拓扑结构中一级分组，拖拽到一级分组列表');
            return true;
          } else if (this.topologyLevel === 2) {
            // 拖拽到一级分组中
            if (this.dragInfo.node.children.length === 1 && this.dragInfo.node.children[0].name === "默认二级分组") {
              // console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到一级分组中');
              return true;
            } else {
              // console.log('情况12：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到一级分组中');
              return false;
            }
          } else if (this.topologyLevel === 3) {
            // 拖拽到二级分组中
            if (this.indentLevel === 2) {
              // 拖拽到隐藏的默认二级分组中
              if (this.dragInfo.node.children.length === 1 && this.dragInfo.node.children[0].name === "默认二级分组") {
                if (this.dragInfo.node.children[0].id === this.parentNode.id) {
                  // console.log('情况13：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到自身的默认二级分组中');
                  return false;
                } else {
                  // console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中');
                  return true;
                }
              } else {
                // console.log('情况15：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到隐藏的默认二级分组中');
                return false;
              }
            } else {
              // console.log('情况16：被拖拽的是拓扑结构中一级分组，拖拽到普通二级分组中')
              return false;
            }
          } else {
            console.error("情况17：不该出现");
            return false;
          }
        default:
          console.error("情况18：不该出现");
          return false;
      }
    },
    onDragEnter(e) {
      if (!this.canDrop()) {
        return;
      } else {
        e.preventDefault();
        e.target.style.backgroundColor = "#0076f6";
        e.dataTransfer.dropEffect = "move";
      }
    },
    onDragOver(e) {
      if (!this.canDrop()) {
        return;
      } else {
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
      }
    },
    onDragLeave(e) {
      // e.preventDefault()
      e.target.style.backgroundColor = "";
    },
    onDrop(e) {
      // e.preventDefault()
      e.target.style.backgroundColor = "";

      switch (this.dragInfo.type) {
        case "scene": // 被拖拽的是场景
          {
            if (this.topologyLevel === 2) {
              // console.log('情况2：被拖拽的是场景，拖拽到一级分组中。只有一种可能：目标一级分组内容显示是空的，即其下只有一个（内容肯定是空的）默认二级分组。')

              /**
               * 找到被拖拽的场景
               */
              // const draggedNode = this.info.scenes.find((item) => {

              const draggedNode = this.sceneList.find((item) => {
                // return item.id === this.dragInfo.node.id
                return item.sceneCode === this.dragInfo.node.sceneCode;
              });

              console.log( this.parentNode);
              /**
               * 找到目标一级分组
               */
              const targetGroupLevel1 = this.info.catalogRoot.find((item) => {
                return item.id === this.parentNode.id;
              });
              console.log(targetGroupLevel1);

              /**
               * 找到目标一级分组下辖的默认二级分组
               */
              const targetGroupLevel2 = this.info.catalogs.find((item) => {
                console.log(item.id);
                return item.id === targetGroupLevel1.children[0];
              });

              /**
               * 被拖拽的场景的所属二级分组记录修改
               */
              draggedNode.category = targetGroupLevel2.id;
            } else if (this.topologyLevel === 3) {
              // console.log('情况3：被拖拽的是场景，插入到二级分组中')

              /**
               * 确定要插入的分组中各场景应有的weight（从1开始递增，小的先显示）
               */
              const belongGroupCopy = deepClone(this.parentNode.children);
              const draggedNodeCopy = deepClone(this.dragInfo.node);
              draggedNodeCopy.isCopy = true;
              belongGroupCopy.splice(this.index, 0, draggedNodeCopy);
              const toDeleteIndex = belongGroupCopy.findIndex((item) => {
                return item.id === this.dragInfo.node.id && !item.isCopy;
              });
              if (toDeleteIndex >= 0) {
                belongGroupCopy.splice(toDeleteIndex, 1);
              }
              for (let [index, elem] of belongGroupCopy.entries()) {
                elem.weight = index + 1;
              }

              /**
               * 真正修改场景原始数据的weight和所属分组
               */
              for (const eachSceneCopy of belongGroupCopy) {
                for (const eachScene of this.info.scenes) {
                  if (eachSceneCopy.id === eachScene.id) {
                    this.$set(eachScene, "weight", eachSceneCopy.weight);
                  }
                  if (this.dragInfo.node.id === eachScene.id) {
                    eachScene.category = this.parentNode.id; // 注意category拼写！
                  }
                }
              }
            }
          }
          break;
        case "topologyGroupLevel2": // 被拖拽的是拓扑结构中二级分组
          if (this.topologyLevel === 1) {
            // console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');

            /**
             * 在拖拽到的位置新增一个一级分组，name是原二级分组的name；唯一child的id赋值为被拖拽的二级分组的id
             */
            const newGroupLevel1 = {
              id: "r_" + this.$randomWord(true, 8, 8),
              name: this.dragInfo.node.name,
              children: [this.dragInfo.node.id],
            };
            this.info.catalogRoot.splice(this.index, 0, newGroupLevel1);

            // 被拖拽的二级分组名称改为“默认二级分组”；
            const draggedGroup = this.info.catalogs.find((item) => {
              return item.id === this.dragInfo.node.id;
            });

            draggedGroup.name = "默认二级分组";

            /**
             * 被拖拽的二级分组原属的一级分组的children中，删除【被拖拽的二级分组对应的元素】
             */
            const parentGroup = this.info.catalogRoot.find((item) => {
              return item.id === this.dragInfo.node.parentId;
            });
            const idxToDelete = parentGroup.children.findIndex((id) => {
              return id === this.dragInfo.node.id;
            });
            parentGroup.children.splice(idxToDelete, 1);

            // 如果被拖拽的二级分组原属的一级分组中没有任何二级分组了，则新增一个默认二级分组
            if (parentGroup.children.length === 0) {
              let newGroupLevel2Id = "c_" + this.$randomWord(true, 8, 8);
              parentGroup.children.push(newGroupLevel2Id);
              this.info.catalogs.push({
                id: newGroupLevel2Id,
                name: "默认二级分组",
              });
            }
            break;
          } else if (this.topologyLevel === 2) {
            // console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到一级分组中');

            // 找到原属一级分组
            const originalParentGroup = this.info.catalogRoot.find((item) => {
              return item.id === this.dragInfo.node.parentId;
            });

            // 找到原属一级分组children中那个二级分组条目，并做上待删除记号
            const originalGroupIndex = originalParentGroup.children.findIndex((eachLevel2Id) => {
              return eachLevel2Id === this.dragInfo.node.id;
            });
            originalParentGroup.children[originalGroupIndex] += "__need__delete__";

            // 找到要插入的一级分组
            const targetGroup = this.info.catalogRoot.find((item) => {
              return item.id === this.parentNode.id;
            });

            // 把被拖拽的二级分组的id插进去
            targetGroup.children.splice(this.index, 0, this.dragInfo.node.id);

            // 把原来那个二级分组条目删除
            this.$nextTick(() => {
              const toDeleteIndex = originalParentGroup.children.findIndex((eachLevel2Id) => {
                return eachLevel2Id.toString().endsWith("__need__delete__");
              });
              originalParentGroup.children.splice(toDeleteIndex, 1);
            });

            // 如果被拖拽的二级分组原属的一级分组中没有任何二级分组了，则新增一个默认二级分组
            if (originalParentGroup.children.length === 0) {
              let newGroupLevel2Id = "c_" + this.$randomWord(true, 8, 8);
              originalParentGroup.children.push(newGroupLevel2Id);
              this.info.catalogs.push({
                id: newGroupLevel2Id,
                name: "默认二级分组",
              });
            }
          } else if (this.topologyLevel === 3) {
            // console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中');

            // 找到拖拽到的二级分组所属的一级分组
            const targetGroupLevel1 = this.info.catalogRoot.find((item) => {
              return item.id === this.parentNode.parentId;
            });

            // 新增一个child条目，对应被拖拽的二级分组
            targetGroupLevel1.children.push(this.dragInfo.node.id);

            // 找到被拖拽的二级分组原属的一级分组
            const originalGroupLevel1 = this.info.catalogRoot.find((item) => {
              return item.id === this.dragInfo.node.parentId;
            });

            // 删除这个二级分组条目
            const idxToDelete = originalGroupLevel1.children.findIndex((id) => {
              return id === this.dragInfo.node.id;
            });
            originalGroupLevel1.children.splice(idxToDelete, 1);

            // 如果被拖拽的二级分组原属的一级分组中没有任何二级分组了，则新增一个默认二级分组
            if (originalGroupLevel1.children.length === 0) {
              let newGroupLevel2Id = "c_" + this.$randomWord(true, 8, 8);
              originalGroupLevel1.children.push(newGroupLevel2Id);
              this.info.catalogs.push({
                id: newGroupLevel2Id,
                name: "默认二级分组",
              });
            }
          }
          break;
        case "topologyGroupLevel1": // 被拖拽的是拓扑结构中一级分组
          if (this.topologyLevel === 1) {
            // console.log('情况10：被拖拽的是拓扑结构中一级分组，拖拽到一级分组列表');

            // 在一级分组列表中找到这个一级分组条目
            let originalGroupIndex = this.info.catalogRoot.findIndex((item) => {
              return item.id === this.dragInfo.node.id;
            });

            // 复制这个一级分组条目
            const groupCopy = deepClone(this.info.catalogRoot[originalGroupIndex]);

            // 旧的一级分组条目加上待删除标记
            this.info.catalogRoot[originalGroupIndex].__need__delete__ = true;

            // 插入新的一级分组条目
            this.info.catalogRoot.splice(this.index, 0, groupCopy);

            // 在一级分组列表中再次找到要删除的一级分组条目
            originalGroupIndex = this.info.catalogRoot.findIndex((item) => {
              return item.__need__delete__;
            });

            // 删除旧的一级分组条目
            this.info.catalogRoot.splice(originalGroupIndex, 1);
          } else if (this.topologyLevel === 2) {
            // console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到一级分组中');

            // 默认二级分组改名成原一级分组的名字
            const groupLevel2 = this.info.catalogs.find((item) => {
              return item.id === this.dragInfo.node.children[0].id;
            });
            groupLevel2.name = this.dragInfo.node.name;

            // 拖拽到的一级分组中新增一个child，对应那个二级分组
            const targetGroupLevel1 = this.info.catalogRoot.find((item) => {
              return item.id === this.parentNode.id;
            });
            targetGroupLevel1.children.splice(this.index, 0, this.dragInfo.node.children[0].id);

            // 删除原一级分组
            const originalGroupLevel1Idx = this.info.catalogRoot.findIndex((item) => {
              return item.id === this.dragInfo.node.id;
            });
            this.info.catalogRoot.splice(originalGroupLevel1Idx, 1);
          } else if (this.topologyLevel === 3) {
            // console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中');

            // 找到被拖拽的一级分组索引
            const originalGroupLevel1Idx = this.info.catalogRoot.findIndex((item) => {
              return item.id === this.dragInfo.node.id;
            });

            // 找到被拖拽的一级分组下辖的默认二级分组的完整数据条目
            const groupLevel2 = this.info.catalogs.find((item) => {
              return item.id === this.info.catalogRoot[originalGroupLevel1Idx].children[0];
            });

            // 被拖拽的一级分组下辖默认二级分组的名称改为与父亲同名
            groupLevel2.name = this.info.catalogRoot[originalGroupLevel1Idx].name;

            // 找到拖拽到的二级分组所属的一级分组
            const targetGroupLevel1 = this.info.catalogRoot.find((item) => {
              return item.id === this.parentNode.parentId;
            });

            // 新增一个child条目，对应被拖拽的一级分组下辖的默认二级分组
            targetGroupLevel1.children.push(groupLevel2.id);

            // 删除被拖拽的一级分组
            this.info.catalogRoot.splice(originalGroupLevel1Idx, 1);
          }
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.insert-position-tip {
  height: 1px;
  box-sizing: content-box;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: -5px;
  margin-bottom: -5px;
  position: relative;
  z-index: 1;
  background-clip: content-box;
  color: transparent;
  // background-color: red;
}
</style>