web/src/views/mp/autoReply/index.vue

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

    <!-- 搜索工作栏 -->
    <ContentWrap>
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="公众号" prop="accountId">
          <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
            <el-option
              v-for="item in accountList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- tab 切换 -->
    <ContentWrap>
      <el-tabs v-model="type" @tab-change="handleTabChange">
        <!-- 操作工具栏 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              @click="handleAdd"
              v-hasPermi="['mp:auto-reply:create']"
              v-if="type !== '1' || list.length <= 0"
              ><Icon icon="ep:plus" />新增
            </el-button>
          </el-col>
          <!-- <right-toolbar v-model:showSearch="showSearch" @query-table="getList" /> -->
        </el-row>
        <!-- tab 项 -->
        <el-tab-pane name="1">
          <template #label>
            <span><Icon icon="ep:star-off" /> 关注时回复</span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="2">
          <template #label>
            <span><Icon icon="ep:chat-line-round" /> 消息回复</span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="3">
          <template #label>
            <span><Icon icon="ep:news" /> 关键词回复</span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list">
        <el-table-column
          label="请求消息类型"
          align="center"
          prop="requestMessageType"
          v-if="type === '2'"
        />
        <el-table-column label="关键词" align="center" prop="requestKeyword" v-if="type === '3'" />
        <el-table-column label="匹配类型" align="center" prop="requestMatch" v-if="type === '3'">
          <template #default="scope">
            <dict-tag
              :type="DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH"
              :value="scope.row.requestMatch"
            />
          </template>
        </el-table-column>
        <el-table-column label="回复消息类型" align="center">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.MP_MESSAGE_TYPE" :value="scope.row.responsType" />
          </template>
        </el-table-column>
        <el-table-column label="回复内容" align="center">
          <template #default="scope">
            <div v-if="scope.row.responsType === 'text'">{{ scope.row.responseContent }}</div>
            <div v-else-if="scope.row.responsType === 'voice'">
              <WxVoicePlayer :url="scope.row.responseMediaUrl" />
            </div>
            <div v-else-if="scope.row.responsType === 'image'">
              <a target="_blank" :href="scope.row.responseMediaUrl">
                <img :src="scope.row.responseMediaUrl" style="width: 100px" />
              </a>
            </div>
            <div
              v-else-if="
                scope.row.responsType === 'video' || scope.row.responsType === 'shortvideo'
              "
            >
              <WxVideoPlayer :url="scope.row.responseMediaUrl" style="margin-top: 10px" />
            </div>
            <div v-else-if="scope.row.responsType === 'news'">
              <WxNews :articles="scope.row.responseArticles" />
            </div>
            <div v-else-if="scope.row.responsType === 'music'">
              <WxMusic
                :title="scope.row.responseTitle"
                :description="scope.row.responseDescription"
                :thumb-media-url="scope.row.responseThumbMediaUrl"
                :music-url="scope.row.responseMusicUrl"
                :hq-music-url="scope.row.responseHqMusicUrl"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="180"
        >
          <template #default="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              link
              @click="handleUpdate(scope.row)"
              v-hasPermi="['mp:auto-reply:update']"
              ><Icon icon="ep:edit" />修改
            </el-button>
            <el-button
              size="small"
              type="primary"
              link
              @click="handleDelete(scope.row)"
              v-hasPermi="['mp:auto-reply:delete']"
              ><Icon icon="ep:delete" />删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加或修改自动回复的对话框 -->
      <el-dialog :title="title" v-model="open" width="800px" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="消息类型" prop="requestMessageType" v-if="type === '2'">
            <el-select v-model="form.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="type === '3'">
            <el-select
              v-model="form.requestMatch"
              placeholder="请选择匹配类型"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in getDictOptions(DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH)"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键词" prop="requestKeyword" v-if="type === '3'">
            <el-input v-model="form.requestKeyword" placeholder="请输入内容" clearable />
          </el-form-item>
          <el-form-item label="回复消息">
            <WxReplySelect :objData="objData" v-if="hackResetWxReplySelect" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </ContentWrap>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
import WxMusic from '@/views/mp/components/wx-music/main.vue'
import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
import { getSimpleAccountList } from '@/api/mp/account'
import {
  createAutoReply,
  deleteAutoReply,
  getAutoReply,
  getAutoReplyPage,
  updateAutoReply
} from '@/api/mp/autoReply'

import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { ContentWrap } from '@/components/ContentWrap'

const message = useMessage()

const queryFormRef = ref()
const formRef = ref()

// tab 类型（1、关注时回复；2、消息回复；3、关键词回复）
const type = ref('3')
// 允许选择的请求消息类型
const requestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link']
// 遮罩层
const loading = ref(true)
// 显示搜索条件
// const showSearch = ref(true)
// 总条数
const total = ref(0)
// 自动回复列表
const list = ref([])
// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  accountId: undefined
})

// 弹出层标题
const title = ref('')
// 是否显示弹出层
const open = ref(false)
// 表单参数
const form = ref({})
// 回复消息
const objData = ref({
  type: 'text'
})
// 表单校验
const rules = {
  requestKeyword: [{ required: true, message: '请求的关键字不能为空', trigger: 'blur' }],
  requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
}

const hackResetWxReplySelect = ref(false) // 重置 WxReplySelect 组件，解决无法清除的问题

// 公众号账号列表
const accountList = ref([])

onMounted(() => {
  getSimpleAccountList().then((data) => {
    accountList.value = data
    // 默认选中第一个
    if (accountList.value.length > 0) {
      queryParams.accountId = accountList.value[0].id
    }
    // 加载数据
    getList()
  })
})

/** 查询列表 */
const getList = async () => {
  // 如果没有选中公众号账号，则进行提示。
  if (!queryParams.accountId) {
    message.error('未选中公众号，无法查询自动回复')
    return false
  }

  loading.value = false
  // 处理查询参数
  let params = {
    ...queryParams,
    type: type.value
  }
  // 执行查询
  getAutoReplyPage(params).then((data) => {
    list.value = data.list
    total.value = data.total
    loading.value = false
  })
}

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

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  // 默认选中第一个
  if (accountList.value.length > 0) {
    queryParams.accountId = accountList.value[0].id
  }
  handleQuery()
}

const handleTabChange = (tabName) => {
  type.value = tabName
  handleQuery()
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset()
  resetEditor()
  // 打开表单，并设置初始化
  open.value = true
  title.value = '新增自动回复'
  objData.value = {
    type: 'text',
    accountId: queryParams.accountId
  }
}

/** 修改按钮操作 */
const handleUpdate = (row) => {
  reset()
  resetEditor()
  console.log(row)

  getAutoReply(row.id).then((data) => {
    // 设置属性
    form.value = { ...data }
    delete form.value['responsType']
    delete form.value['responseContent']
    delete form.value['responseMediaId']
    delete form.value['responseMediaUrl']
    delete form.value['responseDescription']
    delete form.value['responseArticles']
    objData.value = {
      type: data.responsType,
      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
    }

    // 打开表单
    open.value = true
    title.value = '修改自动回复'
  })
}

const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (!valid) {
      return
    }

    // 处理回复消息
    const form = { ...form.value }
    form.responsType = objData.value.type
    form.responseContent = objData.value.content
    form.responseMediaId = objData.value.mediaId
    form.responseMediaUrl = objData.value.url
    form.responseTitle = objData.value.title
    form.responseDescription = objData.value.description
    form.responseThumbMediaId = objData.value.thumbMediaId
    form.responseThumbMediaUrl = objData.value.thumbMediaUrl
    form.responseArticles = objData.value.articles
    form.responseMusicUrl = objData.value.musicUrl
    form.responseHqMusicUrl = objData.value.hqMusicUrl

    if (form.value.id !== undefined) {
      updateAutoReply(form).then(() => {
        message.success('修改成功')
        open.value = false
        getList()
      })
    } else {
      createAutoReply(form).then(() => {
        message.success('新增成功')
        open.value = false
        getList()
      })
    }
  })
}

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

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

// 表单 Editor 重置
const resetEditor = () => {
  hackResetWxReplySelect.value = false // 销毁组件
  nextTick(() => {
    hackResetWxReplySelect.value = true // 重建组件
  })
}

const handleDelete = async (row) => {
  await message.confirm('是否确认删除此数据?')
  await deleteAutoReply(row.id)
  await getList()
  message.success('删除成功')
}
</script>