!147 refactor: mp/autoReply 拆分ReplyForm组件

Merge pull request !147 from dhb52/dev

src/views/mp/autoReply/components/ReplyForm.vue

+<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>

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>