From be49c381f6ffebe618c782be9b66931f7e85690a Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Fri, 5 May 2023 23:04:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20mp/autoReply=20=E6=8B=86=E5=88=86Re?=
=?UTF-8?q?plyForm=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mp/autoReply/components/ReplyForm.vue | 78 +++++++++++++++++++
src/views/mp/autoReply/index.vue | 72 +++++------------
2 files changed, 98 insertions(+), 52 deletions(-)
create mode 100644 src/views/mp/autoReply/components/ReplyForm.vue
diff --git a/src/views/mp/autoReply/components/ReplyForm.vue b/src/views/mp/autoReply/components/ReplyForm.vue
new file mode 100644
index 00000000..edcbc696
--- /dev/null
+++ b/src/views/mp/autoReply/components/ReplyForm.vue
@@ -0,0 +1,78 @@
+<template>
+ <div>
+ <el-form ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
+ <el-form-item label="消息类型" prop="requestMessageType" v-if="msgType === MsgType.Message">
+ <el-select v-model="replyForm.requestMessageType" placeholder="请选择">
+ <template v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)" :key="dict.value">
+ <el-option
+ v-if="RequestMessageTypes.includes(dict.value)"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </template>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="匹配类型" prop="requestMatch" v-if="msgType === MsgType.Keyword">
+ <el-select v-model="replyForm.requestMatch" placeholder="请选择匹配类型" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="关键词" prop="requestKeyword" v-if="msgType === MsgType.Keyword">
+ <el-input v-model="replyForm.requestKeyword" placeholder="请输入内容" clearable />
+ </el-form-item>
+ <el-form-item label="回复消息">
+ <WxReplySelect v-model="reply" />
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script setup lang="ts" name="ReplyForm">
+import WxReplySelect, { type Reply } from '@/views/mp/components/wx-reply'
+import type { FormInstance } from 'element-plus'
+import { MsgType } from './types'
+import { DICT_TYPE, getDictOptions, getIntDictOptions } from '@/utils/dict'
+
+const props = defineProps<{
+ modelValue: any
+ reply: Reply
+ msgType: MsgType
+}>()
+
+const emit = defineEmits<{
+ (e: 'update:reply', v: Reply)
+ (e: 'update:modelValue', v: any)
+}>()
+
+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<FormInstance | null>(null) // 表单 ref
+
+const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] // 允许选择的请求消息类型
+
+// 表单校验
+const rules = {
+ requestKeyword: [{ required: true, message: '请求的关键字不能为空', trigger: 'blur' }],
+ requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
+}
+
+defineExpose({
+ resetFields: () => formRef.value?.resetFields(),
+ validate: async () => formRef.value?.validate()
+})
+</script>
+
+<style scoped></style>
diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index e2fcd7a0..b3826de5 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -53,38 +53,13 @@
@on-delete="onDelete"
/>
- <!-- 添加或修改自动回复的对话框 -->
- <!-- TODO @Dhb52 -->
- <el-dialog :title="dialogTitle" v-model="showFormDialog" width="800px" destroy-on-close>
- <el-form ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
- <el-form-item label="消息类型" prop="requestMessageType" v-if="msgType === MsgType.Message">
- <el-select v-model="replyForm.requestMessageType" placeholder="请选择">
- <template v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)" :key="dict.value">
- <el-option
- v-if="RequestMessageTypes.includes(dict.value)"
- :label="dict.label"
- :value="dict.value"
- />
- </template>
- </el-select>
- </el-form-item>
- <el-form-item label="匹配类型" prop="requestMatch" v-if="msgType === MsgType.Keyword">
- <el-select v-model="replyForm.requestMatch" placeholder="请选择匹配类型" clearable>
- <el-option
- v-for="dict in getIntDictOptions(DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH)"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="关键词" prop="requestKeyword" v-if="msgType === MsgType.Keyword">
- <el-input v-model="replyForm.requestKeyword" placeholder="请输入内容" clearable />
- </el-form-item>
- <el-form-item label="回复消息">
- <WxReplySelect v-model="reply" />
- </el-form-item>
- </el-form>
+ <el-dialog
+ :title="isCreating ? '新增自动回复' : '修改自动回复'"
+ v-model="showDialog"
+ width="800px"
+ destroy-on-close
+ >
+ <ReplyForm v-model="replyForm" v-model:reply="reply" :msg-type="msgType" ref="formRef" />
<template #footer>
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
@@ -93,23 +68,22 @@
</ContentWrap>
</template>
<script setup lang="ts" name="MpAutoReply">
-import WxReplySelect, { type Reply, ReplyType } from '@/views/mp/components/wx-reply'
+import ReplyForm from '@/views/mp/autoReply/components/ReplyForm.vue'
+import { type Reply, ReplyType } from '@/views/mp/components/wx-reply'
import WxAccountSelect from '@/views/mp/components/wx-account-select'
import * as MpAutoReplyApi from '@/api/mp/autoReply'
-import { DICT_TYPE, getDictOptions, getIntDictOptions } from '@/utils/dict'
import { ContentWrap } from '@/components/ContentWrap'
-import type { FormInstance, TabPaneName } from 'element-plus'
+import type { TabPaneName } from 'element-plus'
import ReplyTable from './components/ReplyTable.vue'
import { MsgType } from './components/types'
const message = useMessage() // 消息
const accountId = ref(-1) // 公众号ID
const msgType = ref<MsgType>(MsgType.Keyword) // 消息类型
-const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] // 允许选择的请求消息类型
const loading = ref(true) // 遮罩层
const total = ref(0) // 总条数
const list = ref<any[]>([]) // 自动回复列表
-const formRef = ref<FormInstance | null>(null) // 表单 ref
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null) // 表单 ref
// 查询参数
const queryParams = reactive({
pageNo: 1,
@@ -117,19 +91,14 @@ const queryParams = reactive({
accountId: accountId
})
-const dialogTitle = ref('') // 弹出层标题
-const showFormDialog = ref(false) // 是否显示弹出层
+const isCreating = ref(false) // 是否新建（否则编辑）
+const showDialog = ref(false) // 是否显示弹出层
const replyForm = ref<any>({}) // 表单参数
// 回复消息
const reply = ref<Reply>({
type: ReplyType.Text,
accountId: -1
})
-// 表单校验
-const rules = {
- requestKeyword: [{ required: true, message: '请求的关键字不能为空', trigger: 'blur' }],
- requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
-}
/** 侦听账号变化 */
const onAccountChanged = (id: number) => {
@@ -174,8 +143,8 @@ const onCreate = () => {
accountId: queryParams.accountId
}
- dialogTitle.value = '新增自动回复'
- showFormDialog.value = true
+ isCreating.value = true
+ showDialog.value = true
}
/** 修改按钮操作 */
@@ -207,8 +176,8 @@ const onUpdate = async (id: number) => {
}
// 打开表单
- dialogTitle.value = '修改自动回复'
- showFormDialog.value = true
+ isCreating.value = false
+ showDialog.value = true
}
/** 删除按钮操作 */
@@ -220,8 +189,7 @@ const onDelete = async (id: number) => {
}
const onSubmit = async () => {
- const valid = await formRef.value?.validate()
- if (!valid) return
+ await formRef.value?.validate()
// 处理回复消息
const submitForm: any = { ...replyForm.value }
@@ -245,7 +213,7 @@ const onSubmit = async () => {
message.success('新增成功')
}
- showFormDialog.value = false
+ showDialog.value = false
await getList()
}
@@ -264,7 +232,7 @@ const reset = () => {
// 取消按钮
const cancel = () => {
- showFormDialog.value = false
+ showDialog.value = false
reset()
}
</script>