iot-device-management-frontend/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue

<script lang="ts" setup>
import type { Menu } from '../components/types';

import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

import draggable from 'vuedraggable';

const props = defineProps<{
  accountId: number;
  activeIndex: string;
  modelValue: Menu[];
  parentIndex: number;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', v: Menu[]): void;
  (e: 'menuClicked', parent: Menu, x: number): void;
  (e: 'submenuClicked', child: Menu, x: number, y: number): void;
}>();

const menuList = computed<Menu[]>({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});

// 添加横向一级菜单
const addMenu = () => {
  const index = menuList.value.length;
  const menu = {
    name: '菜单名称',
    children: [],
    reply: {
      // 用于存储回复内容
      type: 'text',
      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
    },
  };
  menuList.value[index] = menu;
  menuClicked(menu, index - 1);
};

// 添加横向二级菜单；parent 表示要操作的父菜单
const addSubMenu = (i: number, parent: any) => {
  const subMenuKeyLength = parent.children.length; // 获取二级菜单key长度
  const addButton = {
    name: '子菜单名称',
    reply: {
      // 用于存储回复内容
      type: 'text',
      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
    },
  };
  parent.children[subMenuKeyLength] = addButton;
  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
};

const menuClicked = (parent: Menu, x: number) => {
  emit('menuClicked', parent, x);
};

const subMenuClicked = (child: Menu, x: number, y: number) => {
  emit('submenuClicked', child, x, y);
};

/**
 * 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
 *
 * @param options - 拖动参数对象
 * @param options.oldIndex - 一级菜单拖动前的位置
 * @param options.newIndex - 一级菜单拖动后的位置
 */
const onParentDragEnd = ({
  oldIndex,
  newIndex,
}: {
  newIndex: number;
  oldIndex: number;
}) => {
  // 二级菜单没有展开，直接返回
  if (props.activeIndex === '__MENU_NOT_SELECTED__') {
    return;
  }

  // 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
  const positions = Array.from({ length: menuList.value.length }).fill(false);
  positions[props.parentIndex] = true;
  const [out] = positions.splice(oldIndex, 1); // 移出菜单，保存到变量out
  positions.splice(newIndex, 0, out ?? false); // 把out变量插入被移出的菜单
  const newParentIndex = positions.indexOf(true);

  // 找到菜单元素，触发一级菜单点击
  const parent = menuList.value[newParentIndex];
  if (parent && newParentIndex !== -1) {
    emit('menuClicked', parent, newParentIndex);
  }
};

/**
 * 处理二级菜单展开后被拖动，激活被拖动的菜单
 *
 * @param options - 拖动参数对象
 * @param options.newIndex - 二级菜单拖动后的位置
 */
const onChildDragEnd = ({ newIndex }: { newIndex: number }) => {
  const x = props.parentIndex;
  const y = newIndex;
  const children = menuList.value[x]?.children;
  if (children && children?.length > 0) {
    const child = children[y];
    if (child) {
      emit('submenuClicked', child, x, y);
    }
  }
};
</script>

<template>
  <draggable
    v-model="menuList"
    item-key="id"
    ghost-class="draggable-ghost"
    :animation="400"
    @end="onParentDragEnd"
  >
    <template #item="{ element: parent, index: x }">
      <div class="menu-bottom">
        <!-- 一级菜单 -->
        <div
          @click="menuClicked(parent, x)"
          class="menu-item"
          :class="{ active: props.activeIndex === `${x}` }"
        >
          <IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
        </div>
        <!-- 以下为二级菜单-->
        <div class="submenu" v-if="props.parentIndex === x && parent.children">
          <draggable
            v-model="parent.children"
            item-key="id"
            ghost-class="draggable-ghost"
            :animation="400"
            @end="onChildDragEnd"
          >
            <template #item="{ element: child, index: y }">
              <div class="menu-bottom subtitle">
                <div
                  class="menu-sub-item"
                  v-if="parent.children"
                  :class="{ active: props.activeIndex === `${x}-${y}` }"
                  @click="subMenuClicked(child, x, y)"
                >
                  {{ child.name }}
                </div>
              </div>
            </template>
          </draggable>
          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
          <div
            class="menu-bottom menu-addicon"
            v-if="!parent.children || parent.children.length < 5"
            @click="addSubMenu(x, parent)"
          >
            <IconifyIcon icon="ep:plus" class="plus" />
          </div>
        </div>
      </div>
    </template>
  </draggable>

  <!-- 一级菜单加号 -->
  <div
    class="menu-bottom menu-addicon"
    v-if="menuList.length < 3"
    @click="addMenu"
  >
    <IconifyIcon icon="ep:plus" class="plus" />
  </div>
</template>

<style lang="scss" scoped>
.menu-bottom {
  position: relative;
  float: left;
  box-sizing: border-box;
  display: block;
  width: 85.5px;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ebedee;

  &.menu-addicon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    line-height: 46px;

    .plus {
      color: #2bb673;
    }
  }

  .menu-item {
    // text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    line-height: 44px;

    &.active {
      border: 1px solid #2bb673;
    }
  }

  .menu-sub-item {
    box-sizing: border-box;
    height: 44px;
    line-height: 44px;
    text-align: center;

    &.active {
      border: 1px solid #2bb673;
    }
  }
}

/* 第二级菜单 */
.submenu {
  position: absolute;
  bottom: 45px;
  width: 85.5px;

  .subtitle {
    box-sizing: border-box;
    background-color: #fff;
  }
}

.draggable-ghost {
  background: #f7fafc;
  border: 1px solid #4299e1;
  opacity: 0.5;
}
</style>