feat: 自动回复迁移
This commit is contained in:
hw
139
apps/web-antd/src/views/mp/autoReply/modules/ReplyForm.vue
Normal file
139
apps/web-antd/src/views/mp/autoReply/modules/ReplyForm.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
|
||||
import type { Reply } from '#/views/mp/modules/wx-reply';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
|
||||
import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
|
||||
|
||||
import WxReplySelect from '#/views/mp/modules/wx-reply';
|
||||
|
||||
import { MsgType } from './types';
|
||||
|
||||
defineOptions({ name: 'ReplyForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any;
|
||||
msgType: MsgType;
|
||||
reply: Reply;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:reply', v: Reply): void;
|
||||
(e: 'update:modelValue', v: any): void;
|
||||
}>();
|
||||
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.reply,
|
||||
set: (val) => emit('update:reply', val),
|
||||
});
|
||||
|
||||
const replyForm = computed<any>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const formRef = ref(); // 表单 ref
|
||||
|
||||
const RequestMessageTypes = [
|
||||
'text',
|
||||
'image',
|
||||
'voice',
|
||||
'video',
|
||||
'shortvideo',
|
||||
'location',
|
||||
'link',
|
||||
]; // 允许选择的请求消息类型
|
||||
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
requestKeyword: [
|
||||
{ required: true, message: '请求的关键字不能为空', trigger: 'blur' },
|
||||
] as Rule[],
|
||||
requestMatch: [
|
||||
{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
|
||||
] as Rule[],
|
||||
} as Record<string, Rule[]>;
|
||||
|
||||
defineExpose({
|
||||
resetFields: () => formRef.value?.resetFields(),
|
||||
validate: async () => {
|
||||
await formRef.value?.validate();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Form
|
||||
ref="formRef"
|
||||
:model="replyForm"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
>
|
||||
<FormItem
|
||||
label="消息类型"
|
||||
name="requestMessageType"
|
||||
v-if="msgType === MsgType.Message"
|
||||
>
|
||||
<Select
|
||||
v-model:value="replyForm.requestMessageType"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<SelectOption
|
||||
v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter(
|
||||
(d) => RequestMessageTypes.includes(d.value as string),
|
||||
)"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="匹配类型"
|
||||
name="requestMatch"
|
||||
v-if="msgType === MsgType.Keyword"
|
||||
>
|
||||
<Select
|
||||
v-model:value="replyForm.requestMatch"
|
||||
placeholder="请选择匹配类型"
|
||||
allow-clear
|
||||
>
|
||||
<SelectOption
|
||||
v-for="dict in getDictOptions(
|
||||
DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
|
||||
'number',
|
||||
)"
|
||||
:key="String(dict.value)"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</SelectOption>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="关键词"
|
||||
name="requestKeyword"
|
||||
v-if="msgType === MsgType.Keyword"
|
||||
>
|
||||
<Input
|
||||
v-model:value="replyForm.requestKeyword"
|
||||
placeholder="请输入内容"
|
||||
allow-clear
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="回复消息">
|
||||
<WxReplySelect v-model="reply" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
55
apps/web-antd/src/views/mp/autoReply/modules/ReplyTable.vue
Normal file
55
apps/web-antd/src/views/mp/autoReply/modules/ReplyTable.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script lang="ts" setup>
|
||||
import WxMusic from '#/views/mp/modules/wx-music';
|
||||
import WxNews from '#/views/mp/modules/wx-news';
|
||||
import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
|
||||
import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
|
||||
|
||||
defineOptions({ name: 'ReplyContentCell' });
|
||||
|
||||
const props = defineProps<{
|
||||
row: any;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="props.row.responseMessageType === 'text'">
|
||||
{{ props.row.responseContent }}
|
||||
</div>
|
||||
<div v-else-if="props.row.responseMessageType === 'voice'">
|
||||
<WxVoicePlayer
|
||||
v-if="props.row.responseMediaUrl"
|
||||
:url="props.row.responseMediaUrl"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="props.row.responseMessageType === 'image'">
|
||||
<a target="_blank" :href="props.row.responseMediaUrl">
|
||||
<img :src="props.row.responseMediaUrl" style="width: 100px" />
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
props.row.responseMessageType === 'video' ||
|
||||
props.row.responseMessageType === 'shortvideo'
|
||||
"
|
||||
>
|
||||
<WxVideoPlayer
|
||||
v-if="props.row.responseMediaUrl"
|
||||
:url="props.row.responseMediaUrl"
|
||||
style="margin-top: 10px"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="props.row.responseMessageType === 'news'">
|
||||
<WxNews :articles="props.row.responseArticles" />
|
||||
</div>
|
||||
<div v-else-if="props.row.responseMessageType === 'music'">
|
||||
<WxMusic
|
||||
:title="props.row.responseTitle"
|
||||
:description="props.row.responseDescription"
|
||||
:thumb-media-url="props.row.responseThumbMediaUrl"
|
||||
:music-url="props.row.responseMusicUrl"
|
||||
:hq-music-url="props.row.responseHqMusicUrl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
142
apps/web-antd/src/views/mp/autoReply/modules/form.vue
Normal file
142
apps/web-antd/src/views/mp/autoReply/modules/form.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Reply } from '#/views/mp/modules/wx-reply';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import * as MpAutoReplyApi from '#/api/mp/autoReply';
|
||||
import { $t } from '#/locales';
|
||||
import { ReplyType } from '#/views/mp/modules/wx-reply/components/types';
|
||||
|
||||
import ReplyForm from './ReplyForm.vue';
|
||||
import { MsgType } from './types';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
|
||||
|
||||
const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
|
||||
const replyForm = ref<any>({});
|
||||
const reply = ref<Reply>({
|
||||
type: ReplyType.Text,
|
||||
accountId: -1,
|
||||
});
|
||||
|
||||
const getTitle = computed(() => {
|
||||
return formData.value?.isCreating
|
||||
? $t('ui.actionTitle.create', ['自动回复'])
|
||||
: $t('ui.actionTitle.edit', ['自动回复']);
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
await formRef.value?.validate();
|
||||
|
||||
// 处理回复消息
|
||||
const submitForm: any = { ...replyForm.value };
|
||||
submitForm.responseMessageType = reply.value.type;
|
||||
submitForm.responseContent = reply.value.content;
|
||||
submitForm.responseMediaId = reply.value.mediaId;
|
||||
submitForm.responseMediaUrl = reply.value.url;
|
||||
submitForm.responseTitle = reply.value.title;
|
||||
submitForm.responseDescription = reply.value.description;
|
||||
submitForm.responseThumbMediaId = reply.value.thumbMediaId;
|
||||
submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
|
||||
submitForm.responseArticles = reply.value.articles;
|
||||
submitForm.responseMusicUrl = reply.value.musicUrl;
|
||||
submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
|
||||
|
||||
modalApi.lock();
|
||||
try {
|
||||
if (replyForm.value.id === undefined) {
|
||||
await MpAutoReplyApi.createAutoReply(submitForm);
|
||||
message.success('新增成功');
|
||||
} else {
|
||||
await MpAutoReplyApi.updateAutoReply(submitForm);
|
||||
message.success('修改成功');
|
||||
}
|
||||
await modalApi.close();
|
||||
emit('success');
|
||||
} finally {
|
||||
modalApi.unlock();
|
||||
}
|
||||
},
|
||||
async onOpenChange(isOpen: boolean) {
|
||||
if (!isOpen) {
|
||||
formData.value = undefined;
|
||||
replyForm.value = {};
|
||||
reply.value = {
|
||||
type: ReplyType.Text,
|
||||
accountId: -1,
|
||||
};
|
||||
return;
|
||||
}
|
||||
// 加载数据
|
||||
const data = modalApi.getData<{
|
||||
accountId?: number;
|
||||
isCreating: boolean;
|
||||
msgType: MsgType;
|
||||
row?: any;
|
||||
}>();
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
formData.value = data;
|
||||
|
||||
if (data.isCreating) {
|
||||
// 新建：初始化表单
|
||||
replyForm.value = {
|
||||
id: undefined,
|
||||
accountId: data.accountId || -1,
|
||||
type: data.msgType,
|
||||
requestKeyword: undefined,
|
||||
requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
|
||||
requestMessageType: undefined,
|
||||
};
|
||||
reply.value = {
|
||||
type: ReplyType.Text,
|
||||
accountId: data.accountId || -1,
|
||||
};
|
||||
} else if (data.row) {
|
||||
// 编辑：加载数据
|
||||
const rowData = data.row;
|
||||
replyForm.value = { ...rowData };
|
||||
delete replyForm.value.responseMessageType;
|
||||
delete replyForm.value.responseContent;
|
||||
delete replyForm.value.responseMediaId;
|
||||
delete replyForm.value.responseMediaUrl;
|
||||
delete replyForm.value.responseDescription;
|
||||
delete replyForm.value.responseArticles;
|
||||
reply.value = {
|
||||
type: rowData.responseMessageType,
|
||||
accountId: data.accountId || -1,
|
||||
content: rowData.responseContent,
|
||||
mediaId: rowData.responseMediaId,
|
||||
url: rowData.responseMediaUrl,
|
||||
title: rowData.responseTitle,
|
||||
description: rowData.responseDescription,
|
||||
thumbMediaId: rowData.responseThumbMediaId,
|
||||
thumbMediaUrl: rowData.responseThumbMediaUrl,
|
||||
articles: rowData.responseArticles,
|
||||
musicUrl: rowData.responseMusicUrl,
|
||||
hqMusicUrl: rowData.responseHqMusicUrl,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="getTitle" class="w-4/5">
|
||||
<ReplyForm
|
||||
v-if="formData"
|
||||
v-model="replyForm"
|
||||
v-model:reply="reply"
|
||||
:msg-type="formData.msgType"
|
||||
ref="formRef"
|
||||
/>
|
||||
</Modal>
|
||||
</template>
|
||||
7
apps/web-antd/src/views/mp/autoReply/modules/types.ts
Normal file
7
apps/web-antd/src/views/mp/autoReply/modules/types.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
|
||||
// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
|
||||
export enum MsgType {
|
||||
Follow = 1,
|
||||
Keyword = 3,
|
||||
Message = 2,
|
||||
}
|
||||
Reference in New Issue
Block a user