refactor: comps
This commit is contained in:
xingyu4j
@@ -1,286 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Select,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import WxMaterialSelect from '#/views/mp/modules/wx-material-select/main.vue';
|
||||
import WxNews from '#/views/mp/modules/wx-news/main.vue';
|
||||
import WxReplySelect from '#/views/mp/modules/wx-reply/main.vue';
|
||||
|
||||
import menuOptions from './menuOptions';
|
||||
|
||||
const props = defineProps<{
|
||||
accountId: number;
|
||||
isParent: boolean;
|
||||
modelValue: any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'delete', v: void): void;
|
||||
(e: 'update:modelValue', v: any): void;
|
||||
}>();
|
||||
|
||||
const menu = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:modelValue', val);
|
||||
},
|
||||
});
|
||||
const showNewsDialog = ref(false);
|
||||
const hackResetWxReplySelect = ref(false);
|
||||
const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
|
||||
|
||||
watch(menu, () => {
|
||||
hackResetWxReplySelect.value = false; // 销毁组件
|
||||
nextTick(() => {
|
||||
hackResetWxReplySelect.value = true; // 重建组件
|
||||
});
|
||||
});
|
||||
|
||||
// ======================== 菜单编辑（素材选择） ========================
|
||||
/** 选择素材 */
|
||||
function selectMaterial(item: any) {
|
||||
const articleId = item.articleId;
|
||||
const articles = item.content.newsItem;
|
||||
// 提示，针对多图文
|
||||
if (articles.length > 1) {
|
||||
message.warning('您选择的是多图文，将默认跳转第一篇');
|
||||
}
|
||||
showNewsDialog.value = false;
|
||||
|
||||
// 设置菜单的回复
|
||||
menu.value.articleId = articleId;
|
||||
menu.value.replyArticles = [];
|
||||
articles.forEach((article: any) => {
|
||||
menu.value.replyArticles.push({
|
||||
title: article.title,
|
||||
description: article.digest,
|
||||
picUrl: article.picUrl,
|
||||
url: article.url,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除素材 */
|
||||
function deleteMaterial() {
|
||||
delete menu.value.articleId;
|
||||
delete menu.value.replyArticles;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="configure-page">
|
||||
<div class="delete-btn">
|
||||
<Button type="primary" danger @click="emit('delete')">
|
||||
<IconifyIcon icon="ep:delete" />
|
||||
删除当前菜单
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<span>菜单名称：</span>
|
||||
<Input
|
||||
class="input-width"
|
||||
v-model:value="menu.name"
|
||||
placeholder="请输入菜单名称"
|
||||
:maxlength="isParent ? 4 : 7"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isLeave">
|
||||
<div class="menu-content">
|
||||
<span>菜单标识：</span>
|
||||
<Input
|
||||
class="input-width"
|
||||
v-model:value="menu.menuKey"
|
||||
placeholder="请输入菜单 KEY"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="menu-content">
|
||||
<span>菜单内容：</span>
|
||||
<Select
|
||||
v-model:value="menu.type"
|
||||
placeholder="请选择"
|
||||
class="input-width"
|
||||
allow-clear
|
||||
>
|
||||
<Select.Option
|
||||
v-for="item in menuOptions"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="configur-content" v-if="menu.type === 'view'">
|
||||
<span>跳转链接：</span>
|
||||
<Input
|
||||
class="input-width"
|
||||
v-model:value="menu.url"
|
||||
placeholder="请输入链接"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="configur-content" v-if="menu.type === 'miniprogram'">
|
||||
<div class="applet">
|
||||
<span>小程序的 appid ：</span>
|
||||
<Input
|
||||
class="input-width"
|
||||
v-model:value="menu.miniProgramAppId"
|
||||
placeholder="请输入小程序的appid"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="applet">
|
||||
<span>小程序的页面路径：</span>
|
||||
<Input
|
||||
class="input-width"
|
||||
v-model:value="menu.miniProgramPagePath"
|
||||
placeholder="请输入小程序的页面路径，如：pages/index"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<div class="applet">
|
||||
<span>小程序的备用网页：</span>
|
||||
<Input
|
||||
class="input-width"
|
||||
v-model:value="menu.url"
|
||||
placeholder="不支持小程序的老版本客户端将打开本网页"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<p class="blue">
|
||||
tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="configur-content"
|
||||
v-if="menu.type === 'article_view_limited'"
|
||||
>
|
||||
<Row>
|
||||
<div class="select-item" v-if="menu && menu.replyArticles">
|
||||
<WxNews :articles="menu.replyArticles" />
|
||||
<Row class="ope-row" justify="center" align="middle">
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
shape="circle"
|
||||
@click="deleteMaterial"
|
||||
>
|
||||
<IconifyIcon icon="ep:delete" />
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Row justify="center">
|
||||
<Col :span="24" style="text-align: center">
|
||||
<Button type="primary" @click="showNewsDialog = true">
|
||||
素材库选择
|
||||
<IconifyIcon icon="ep:circle-check" />
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<Modal
|
||||
title="选择图文"
|
||||
v-model:open="showNewsDialog"
|
||||
width="80%"
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
type="news"
|
||||
:account-id="props.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</Modal>
|
||||
</Row>
|
||||
</div>
|
||||
<div
|
||||
class="configur-content"
|
||||
v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
|
||||
>
|
||||
<WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-input) {
|
||||
// width: 70%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.configure-page {
|
||||
.delete-btn {
|
||||
margin-bottom: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.configur-content {
|
||||
padding: 20px 10px;
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
|
||||
.select-item {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
|
||||
.ope-row {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
margin-top: 10px;
|
||||
color: #29b6f6;
|
||||
}
|
||||
|
||||
.applet {
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.input-width {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.material {
|
||||
.input-width {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,252 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Menu } from './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),
|
||||
});
|
||||
|
||||
/** 添加横向一级菜单 */
|
||||
function 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 表示要操作的父菜单 */
|
||||
function 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);
|
||||
}
|
||||
|
||||
/** 一级菜单点击 */
|
||||
function menuClicked(parent: Menu, x: number) {
|
||||
emit('menuClicked', parent, x);
|
||||
}
|
||||
|
||||
/** 二级菜单点击 */
|
||||
function subMenuClicked(child: Menu, x: number, y: number) {
|
||||
emit('submenuClicked', child, x, y);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
|
||||
*
|
||||
* @param options - 拖动参数对象
|
||||
* @param options.oldIndex - 一级菜单拖动前的位置
|
||||
* @param options.newIndex - 一级菜单拖动后的位置
|
||||
*/
|
||||
function 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 - 二级菜单拖动后的位置
|
||||
*/
|
||||
function 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>
|
||||
@@ -1,42 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
value: 'view',
|
||||
label: '跳转网页',
|
||||
},
|
||||
{
|
||||
value: 'miniprogram',
|
||||
label: '跳转小程序',
|
||||
},
|
||||
{
|
||||
value: 'click',
|
||||
label: '点击回复',
|
||||
},
|
||||
{
|
||||
value: 'article_view_limited',
|
||||
label: '跳转图文消息',
|
||||
},
|
||||
{
|
||||
value: 'scancode_push',
|
||||
label: '扫码直接返回结果',
|
||||
},
|
||||
{
|
||||
value: 'scancode_waitmsg',
|
||||
label: '扫码回复',
|
||||
},
|
||||
{
|
||||
value: 'pic_sysphoto',
|
||||
label: '系统拍照发图',
|
||||
},
|
||||
{
|
||||
value: 'pic_photo_or_album',
|
||||
label: '拍照或者相册',
|
||||
},
|
||||
{
|
||||
value: 'pic_weixin',
|
||||
label: '微信相册',
|
||||
},
|
||||
{
|
||||
value: 'location_select',
|
||||
label: '选择地理位置',
|
||||
},
|
||||
];
|
||||
@@ -1,73 +0,0 @@
|
||||
export interface Replay {
|
||||
title: string;
|
||||
description: string;
|
||||
picUrl: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export type MenuType =
|
||||
| ''
|
||||
| 'article_view_limited'
|
||||
| 'click'
|
||||
| 'location_select'
|
||||
| 'pic_photo_or_album'
|
||||
| 'pic_sysphoto'
|
||||
| 'pic_weixin'
|
||||
| 'scancode_push'
|
||||
| 'scancode_waitmsg'
|
||||
| 'view';
|
||||
|
||||
interface _RawMenu {
|
||||
// db
|
||||
id: number;
|
||||
parentId: number;
|
||||
accountId: number;
|
||||
appId: string;
|
||||
createTime: number;
|
||||
|
||||
// mp-native
|
||||
name: string;
|
||||
menuKey: string;
|
||||
type: MenuType;
|
||||
url: string;
|
||||
miniProgramAppId: string;
|
||||
miniProgramPagePath: string;
|
||||
articleId: string;
|
||||
replyMessageType: string;
|
||||
replyContent: string;
|
||||
replyMediaId: string;
|
||||
replyMediaUrl: string;
|
||||
replyThumbMediaId: string;
|
||||
replyThumbMediaUrl: string;
|
||||
replyTitle: string;
|
||||
replyDescription: string;
|
||||
replyArticles: Replay;
|
||||
replyMusicUrl: string;
|
||||
replyHqMusicUrl: string;
|
||||
}
|
||||
|
||||
export type RawMenu = Partial<_RawMenu>;
|
||||
|
||||
interface _Reply {
|
||||
type: string;
|
||||
accountId: number;
|
||||
content: string;
|
||||
mediaId: string;
|
||||
url: string;
|
||||
thumbMediaId: string;
|
||||
thumbMediaUrl: string;
|
||||
title: string;
|
||||
description: string;
|
||||
articles: null | Replay[];
|
||||
musicUrl: string;
|
||||
hqMusicUrl: string;
|
||||
}
|
||||
|
||||
export type Reply = Partial<_Reply>;
|
||||
|
||||
interface _Menu extends RawMenu {
|
||||
children: _Menu[];
|
||||
reply: Reply;
|
||||
}
|
||||
|
||||
export type Menu = Partial<_Menu>;
|
||||
Reference in New Issue
Block a user