yudao-ui-admin-vue3/src/views/mp/messageTemplate/MessageTemplateSendForm.vue

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