admin-vue3/src/views/mp/autoReply/index.vue

<template>
  <doc-alert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />

  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form class="-mb-15px" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="公众号" prop="accountId">
        <WxAccountSelect @change="onAccountChanged" />
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- tab 切换 -->
  <ContentWrap>
    <el-tabs v-model="msgType" @tab-change="onTabChange">
      <!-- 操作工具栏 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            @click="onCreate"
            v-hasPermi="['mp:auto-reply:create']"
            v-if="msgType !== MsgType.Follow || list.length <= 0"
          >
            <Icon icon="ep:plus" />新增
          </el-button>
        </el-col>
      </el-row>
      <!-- tab 项 -->
      <el-tab-pane :name="MsgType.Follow">
        <template #label>
          <el-row align="middle"><Icon icon="ep:star" class="mr-2px" /> 关注时回复</el-row>
        </template>
      </el-tab-pane>
      <el-tab-pane :name="MsgType.Message">
        <template #label>
          <el-row align="middle"><Icon icon="ep:chat-line-round" class="mr-2px" /> 消息回复</el-row>
        </template>
      </el-tab-pane>
      <el-tab-pane :name="MsgType.Keyword">
        <template #label>
          <el-row align="middle"><Icon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复</el-row>
        </template>
      </el-tab-pane>
    </el-tabs>
    <!-- 列表 -->
    <ReplyTable
      :loading="loading"
      :list="list"
      :msg-type="msgType"
      @on-update="onUpdate"
      @on-delete="onDelete"
    />

    <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>
      </template>
    </el-dialog>
  </ContentWrap>
</template>
<script lang="ts" setup>
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 { ContentWrap } from '@/components/ContentWrap'
import type { TabPaneName } from 'element-plus'
import ReplyTable from './components/ReplyTable.vue'
import { MsgType } from './components/types'

defineOptions({ name: 'MpAutoReply' })

const message = useMessage() // 消息

const accountId = ref(-1) // 公众号ID
const msgType = ref<MsgType>(MsgType.Keyword) // 消息类型
const loading = ref(true) // 遮罩层
const total = ref(0) // 总条数
const list = ref<any[]>([]) // 自动回复列表
const formRef = ref<InstanceType<typeof ReplyForm> | null>(null) // 表单 ref
// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  accountId: accountId
})

const isCreating = ref(false) // 是否新建（否则编辑）
const showDialog = ref(false) // 是否显示弹出层
const replyForm = ref<any>({}) // 表单参数
// 回复消息
const reply = ref<Reply>({
  type: ReplyType.Text,
  accountId: -1
})

/** 侦听账号变化 */
const onAccountChanged = (id: number) => {
  accountId.value = id
  reply.value.accountId = id
  queryParams.pageNo = 1
  getList()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await MpAutoReplyApi.getAutoReplyPage({
      ...queryParams,
      type: msgType.value
    })
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const onTabChange = (tabName: TabPaneName) => {
  msgType.value = tabName as MsgType
  handleQuery()
}

/** 新增按钮操作 */
const onCreate = () => {
  reset()
  // 打开表单，并设置初始化
  reply.value = {
    type: ReplyType.Text,
    accountId: queryParams.accountId
  }

  isCreating.value = true
  showDialog.value = true
}

/** 修改按钮操作 */
const onUpdate = async (id: number) => {
  reset()

  const data = await MpAutoReplyApi.getAutoReply(id)
  // 设置属性
  replyForm.value = { ...data }
  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: data.responseMessageType,
    accountId: queryParams.accountId,
    content: data.responseContent,
    mediaId: data.responseMediaId,
    url: data.responseMediaUrl,
    title: data.responseTitle,
    description: data.responseDescription,
    thumbMediaId: data.responseThumbMediaId,
    thumbMediaUrl: data.responseThumbMediaUrl,
    articles: data.responseArticles,
    musicUrl: data.responseMusicUrl,
    hqMusicUrl: data.responseHqMusicUrl
  }

  // 打开表单
  isCreating.value = false
  showDialog.value = true
}

/** 删除按钮操作 */
const onDelete = async (id: number) => {
  await message.confirm('是否确认删除此数据?')
  await MpAutoReplyApi.deleteAutoReply(id)
  await getList()
  message.success('删除成功')
}

const onSubmit = async () => {
  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

  if (replyForm.value.id !== undefined) {
    await MpAutoReplyApi.updateAutoReply(submitForm)
    message.success('修改成功')
  } else {
    await MpAutoReplyApi.createAutoReply(submitForm)
    message.success('新增成功')
  }

  showDialog.value = false
  await getList()
}

// 表单重置
const reset = () => {
  replyForm.value = {
    id: undefined,
    accountId: queryParams.accountId,
    type: msgType.value,
    requestKeyword: undefined,
    requestMatch: msgType.value === MsgType.Keyword ? 1 : undefined,
    requestMessageType: undefined
  }
  formRef.value?.resetFields()
}

// 取消按钮
const cancel = () => {
  showDialog.value = false
  reset()
}
</script>