feat：【mp】完善“模版消息”的功能

src/views/mp/messageTemplate/MessageTemplateSendForm.vue

@@ -0,0 +1,163 @@
+<template>
+  <Dialog title="发送消息模板" v-model="dialogVisible" width="600px">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+      <el-form-item label="模板编号">
+        <el-input v-model="formData.id" disabled />
+      </el-form-item>
+      <el-form-item label="模板标题">
+        <el-input v-model="templateTitle" disabled />
+      </el-form-item>
+      <el-form-item label="用户" prop="userId">
+        <el-select
+          v-model="formData.userId"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入用户昵称搜索"
+          :remote-method="searchUser"
+          :loading="userLoading"
+          class="!w-full"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname || user.openid"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板数据" prop="data">
+        <el-input
+          v-model="formData.data"
+          type="textarea"
+          :rows="4"
+          placeholder='请输入模板数据（JSON 格式），例如：{"keyword1": {"value": "测试内容"}}'
+        />
+      </el-form-item>
+      <el-form-item label="跳转链接" prop="url">
+        <el-input v-model="formData.url" placeholder="请输入跳转链接" />
+      </el-form-item>
+      <el-form-item label="小程序 appId" prop="miniProgramAppId">
+        <el-input v-model="formData.miniProgramAppId" placeholder="请输入小程序 appId" />
+      </el-form-item>
+      <el-form-item label="小程序页面路径" prop="miniProgramPagePath">
+        <el-input v-model="formData.miniProgramPagePath" placeholder="请输入小程序页面路径" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="submitForm" :loading="loading">发 送</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { MessageTemplateApi, MsgTemplateVO, MsgTemplateSendVO } from '@/api/mp/messageTemplate'
+import * as MpUserApi from '@/api/mp/user'
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗是否展示
+const loading = ref(false) // 提交加载中
+const templateTitle = ref('') // 模板标题
+const accountId = ref<number>() // 公众号账号编号
+
+const formRef = ref() // 表单 Ref
+const formData = ref<MsgTemplateSendVO>({
+  id: undefined!,
+  userId: undefined!,
+  data: '',
+  url: '',
+  miniProgramAppId: '',
+  miniProgramPagePath: ''
+})
+const formRules = reactive({
+  userId: [{ required: true, message: '请选择用户', trigger: 'change' }]
+})
+
+// 用户搜索相关
+const userLoading = ref(false)
+const userList = ref<any[]>([])
+
+/** 搜索用户 */
+const searchUser = async (query: string) => {
+  if (!accountId.value) {
+    return
+  }
+  userLoading.value = true
+  try {
+    const data = await MpUserApi.getUserPage({
+      pageNo: 1,
+      pageSize: 20,
+      accountId: accountId.value,
+      nickname: query || undefined
+    })
+    userList.value = data.list || []
+  } finally {
+    userLoading.value = false
+  }
+}
+
+/** 打开弹窗 */
+const open = async (row: MsgTemplateVO) => {
+  resetForm()
+  dialogVisible.value = true
+  // 设置表单数据
+  formData.value.id = row.id
+  accountId.value = row.accountId
+  templateTitle.value = row.title
+  // 加载用户列表
+  await searchUser('')
+}
+defineExpose({ open }) // 暴露 open 方法
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  loading.value = true
+  try {
+    const sendData: MsgTemplateSendVO = {
+      ...formData.value
+    }
+    // 如果填写了小程序信息，需要拼接成 miniprogram 字段
+    if (sendData.miniProgramAppId && sendData.miniProgramPagePath) {
+      sendData.miniprogram = JSON.stringify({
+        appid: sendData.miniProgramAppId,
+        pagepath: sendData.miniProgramPagePath
+      })
+    }
+    // 如果填写了 data 字段
+    if (sendData.data) {
+      try {
+        sendData.data = JSON.parse(sendData.data)
+      } catch (e) {
+        message.error('模板数据格式不正确，请输入有效的 JSON 格式')
+        return
+      }
+    }
+    await MessageTemplateApi.sendMessageTemplate(sendData)
+    message.success('发送成功')
+    dialogVisible.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined!,
+    userId: undefined!,
+    data: '',
+    url: '',
+    miniProgramAppId: '',
+    miniProgramPagePath: ''
+  }
+  userList.value = []
+  formRef.value?.resetFields()
+}
+</script>