refactor: 重构MP/autoReply, 拆分组件

Author: dhb52

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

@@ -0,0 +1,118 @@
+<template>
+  <el-table v-loading="props.loading" :data="props.list">
+    <el-table-column
+      label="请求消息类型"
+      align="center"
+      prop="requestMessageType"
+      v-if="msgType === MsgType.Message"
+    />
+    <el-table-column
+      label="关键词"
+      align="center"
+      prop="requestKeyword"
+      v-if="msgType === MsgType.Keyword"
+    />
+    <el-table-column
+      label="匹配类型"
+      align="center"
+      prop="requestMatch"
+      v-if="msgType === MsgType.Keyword"
+    >
+      <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.responseMessageType" />
+      </template>
+    </el-table-column>
+    <el-table-column label="回复内容" align="center">
+      <template #default="scope">
+        <div v-if="scope.row.responseMessageType === 'text'">{{ scope.row.responseContent }}</div>
+        <div v-else-if="scope.row.responseMessageType === 'voice'">
+          <WxVoicePlayer v-if="scope.row.responseMediaUrl" :url="scope.row.responseMediaUrl" />
+        </div>
+        <div v-else-if="scope.row.responseMessageType === 'image'">
+          <a target="_blank" :href="scope.row.responseMediaUrl">
+            <img :src="scope.row.responseMediaUrl" style="width: 100px" />
+          </a>
+        </div>
+        <div
+          v-else-if="
+            scope.row.responseMessageType === 'video' ||
+            scope.row.responseMessageType === 'shortvideo'
+          "
+        >
+          <WxVideoPlayer
+            v-if="scope.row.responseMediaUrl"
+            :url="scope.row.responseMediaUrl"
+            style="margin-top: 10px"
+          />
+        </div>
+        <div v-else-if="scope.row.responseMessageType === 'news'">
+          <WxNews :articles="scope.row.responseArticles" />
+        </div>
+        <div v-else-if="scope.row.responseMessageType === '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"
+    />
+    <el-table-column label="操作" align="center">
+      <template #default="scope">
+        <el-button
+          type="primary"
+          link
+          @click="emit('on-update', scope.row.id)"
+          v-hasPermi="['mp:auto-reply:update']"
+        >
+          修改
+        </el-button>
+        <el-button
+          type="danger"
+          link
+          @click="emit('on-delete', scope.row.id)"
+          v-hasPermi="['mp:auto-reply:delete']"
+        >
+          删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+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 { dateFormatter } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { MsgType } from './types'
+
+const props = defineProps<{
+  loading: boolean
+  list: any[]
+  msgType: MsgType
+}>()
+
+const emit = defineEmits<{
+  (e: 'on-update', v: number)
+  (e: 'on-delete', v: number)
+}>()
+</script>
+
+<style scoped></style>

src/views/mp/autoReply/components/types.ts

@@ -0,0 +1,47 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为tab.name，enum的数字不能随意修改，与api参数相关
+export enum MsgType {
+  Follow = 1,
+  Message = 2,
+  Keyword = 3
+}
+
+type ReplyType = 'text' | 'image' | 'voice' | 'video' | 'shortvideo' | 'location' | 'link'
+
+export interface ReplyForm {
+  // relation:
+  id?: number
+  accountId?: number
+  type?: MsgType
+  // request:
+  requestMessageType?: ReplyType
+  requestMatch?: number
+  requestKeyword?: string
+  // response:
+  responseMessageType?: ReplyType
+  responseContent?: string
+  responseMediaId?: number
+  responseMediaUrl?: string
+  responseTitle?: string
+  responseDescription?: number
+  responseThumbMediaId?: string
+  responseThumbMediaUrl?: string
+  responseArticles?: any[]
+  responseMusicUrl?: string
+  responseHqMusicUrl?: string
+}
+
+export interface ObjData {
+  type: ReplyType
+  accountId?: number
+  content?: string
+  mediaId?: number
+  url?: string
+  title?: string
+  description?: string
+  thumbMediaId?: number
+  thumbMediaUrl?: string
+  articles?: any[]
+  musicUrl?: string
+  hqMusicUrl?: string
+}