Files
ipms-sjy-ui/src/views/mp/menu/components/MenuPreviewer.vue

219 lines
5.5 KiB
Vue
Raw Normal View History

2023-04-17 23:58:58 +08:00
<template>
<draggable
v-model="menuList"
item-key="id"
ghost-class="draggable-ghost"
:animation="400"
@end="onDragEnd"
>
<template #item="{ element: parent, index: x }">
<div class="menu_bottom">
<!-- 一级菜单 -->
2023-04-17 23:58:58 +08:00
<div
@click="menuClicked(parent, x)"
class="menu_item"
:class="{ active: props.activeIndex === `${x}` }"
2023-04-17 23:58:58 +08:00
>
<Icon 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"
>
<template #item="{ element: child, index: y }">
<div class="subtitle menu_bottom">
<div
class="menu_subItem"
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)"
>
<Icon icon="ep:plus" class="plus" />
</div>
2023-04-17 23:58:58 +08:00
</div>
</div>
</template>
</draggable>
2023-04-17 23:58:58 +08:00
<!-- 一级菜单加号 -->
<div class="menu_bottom menu_addicon" v-if="menuList.length < 3" @click="addMenu">
<Icon icon="ep:plus" class="plus" />
</div>
</template>
<script setup lang="ts">
import { Menu } from './types'
import draggable from 'vuedraggable'
2023-04-17 23:58:58 +08:00
const props = defineProps<{
modelValue: Menu[]
activeIndex: string
parentIndex: number
2023-04-21 23:35:31 +08:00
accountId: number
2023-04-17 23:58:58 +08:00
}>()
const emit = defineEmits<{
(e: 'update:modelValue', v: Menu[])
(e: 'menu-clicked', parent: Menu, x: number)
(e: 'submenu-clicked', child: Menu, x: number, y: number)
}>()
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('menu-clicked', parent, x)
}
2023-04-17 23:58:58 +08:00
const subMenuClicked = (child: Menu, x: number, y: number) => {
emit('submenu-clicked', child, x, y)
}
2023-04-21 23:35:31 +08:00
/**
* 处理一级菜单展开后被拖动
2023-04-21 23:35:31 +08:00
*
* @param oldIndex: 一级菜单拖动前的位置
* @param newIndex: 一级菜单拖动后的位置
2023-04-21 23:35:31 +08:00
*/
const onDragEnd = ({ oldIndex, newIndex }) => {
// 二级菜单没有展开,直接返回
if (props.activeIndex === '__MENU_NOT_SELECTED__') {
return
}
2023-04-21 23:35:31 +08:00
let newParent = props.parentIndex
if (props.parentIndex === oldIndex) {
newParent = newIndex
} else if (props.parentIndex === newIndex) {
newParent = oldIndex
} else {
// 如果展开的二级菜单下标`props.parentIndex`不是被移动的菜单的前后下标。
// 那么使用一个辅助素组来模拟菜单移动,然后找到展开的二级菜单的新下标`newParent`
let positions = new Array<boolean>(menuList.value.length).fill(false)
positions[props.parentIndex] = true
positions.splice(oldIndex, 1)
positions.splice(newIndex, 0, true)
newParent = positions.indexOf(true)
2023-04-21 23:35:31 +08:00
}
// 找到菜单元素,触发一级菜单点击
const parent = menuList.value[newParent]
emit('menu-clicked', parent, newParent)
2023-04-21 23:35:31 +08:00
}
2023-04-17 23:58:58 +08:00
</script>
<style lang="scss" scoped>
.menu_bottom {
position: relative;
display: inline-block;
float: left;
width: 85.5px;
text-align: center;
cursor: pointer;
background-color: #fff;
border: 1px solid #ebedee;
box-sizing: border-box;
&.menu_addicon {
height: 46px;
line-height: 46px;
.plus {
color: #2bb673;
}
}
.menu_item {
display: flex;
width: 100%;
height: 44px;
line-height: 44px;
// text-align: center;
box-sizing: border-box;
align-items: center;
justify-content: center;
&.active {
border: 1px solid #2bb673;
}
}
.menu_subItem {
height: 44px;
line-height: 44px;
text-align: center;
box-sizing: border-box;
&.active {
border: 1px solid #2bb673;
}
}
}
/* 第二级菜单 */
.submenu {
position: absolute;
bottom: 45px;
width: 85.5px;
.subtitle {
background-color: #fff;
box-sizing: border-box;
}
}
.draggable-ghost {
opacity: 0.5;
background: #f7fafc;
border: 1px solid #4299e1;
}
2023-04-17 23:58:58 +08:00
</style>