REVIEW 公众号的自动回复

src/views/mp/autoReply/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="app-container">
   <doc-alert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
 
   <!-- 搜索工作栏 -->
@@ -40,10 +39,10 @@
             @click="handleAdd"
             v-hasPermi="['mp:auto-reply:create']"
             v-if="type !== '1' || list.length <= 0"
-              ><Icon icon="ep:plus" />新增
+          >
+            <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">
@@ -62,10 +61,7 @@
         </template>
       </el-tab-pane>
     </el-tabs>
-    </ContentWrap>
-
     <!-- 列表 -->
-    <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column
         label="请求消息类型"
@@ -76,39 +72,37 @@
       <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
+          <dict-tag :type="DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH" :value="scope.row.requestMatch" />
-              :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" />
+          <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.responsType === 'text'">{{ scope.row.responseContent }}</div>
+          <div v-if="scope.row.responseMessageType === 'text'">{{ scope.row.responseContent }}</div>
-            <div v-else-if="scope.row.responsType === 'voice'">
+          <div v-else-if="scope.row.responseMessageType === 'voice'">
             <WxVoicePlayer :url="scope.row.responseMediaUrl" />
           </div>
-            <div v-else-if="scope.row.responsType === 'image'">
+          <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.responsType === 'video' || scope.row.responsType === 'shortvideo'
+              scope.row.responseMessageType === 'video' ||
+              scope.row.responseMessageType === 'shortvideo'
             "
           >
             <WxVideoPlayer :url="scope.row.responseMediaUrl" style="margin-top: 10px" />
           </div>
-            <div v-else-if="scope.row.responsType === 'news'">
+          <div v-else-if="scope.row.responseMessageType === 'news'">
             <WxNews :articles="scope.row.responseArticles" />
           </div>
-            <div v-else-if="scope.row.responsType === 'music'">
+          <div v-else-if="scope.row.responseMessageType === 'music'">
             <WxMusic
               :title="scope.row.responseTitle"
               :description="scope.row.responseDescription"
@@ -125,28 +119,24 @@
         prop="createTime"
         :formatter="dateFormatter"
         width="180"
-        >
+      />
-          <template #default="scope">
+      <el-table-column label="操作" align="center">
-            <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="danger"
-              type="primary"
             link
             @click="handleDelete(scope.row)"
             v-hasPermi="['mp:auto-reply:delete']"
-              ><Icon icon="ep:delete" />删除
+          >
+            删除
           </el-button>
         </template>
       </el-table-column>
@@ -167,17 +157,12 @@
           </el-select>
         </el-form-item>
         <el-form-item label="匹配类型" prop="requestMatch" v-if="type === '3'">
-            <el-select
+          <el-select v-model="form.requestMatch" placeholder="请选择匹配类型" clearable>
-              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)"
+              :value="dict.value"
             />
           </el-select>
         </el-form-item>
@@ -196,9 +181,7 @@
       </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'
@@ -341,14 +324,14 @@ const handleUpdate = (row) => {
   getAutoReply(row.id).then((data) => {
     // 设置属性
     form.value = { ...data }
-    delete form.value['responsType']
+    delete form.value['responseMessageType']
     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,
+      type: data.responseMessageType,
       accountId: queryParams.accountId,
       content: data.responseContent,
       mediaId: data.responseMediaId,
@@ -376,7 +359,7 @@ const handleSubmit = () => {
 
     // 处理回复消息
     const form = { ...form.value }
-    form.responsType = objData.value.type
+    form.responseMessageType = objData.value.type
     form.responseContent = objData.value.content
     form.responseMediaId = objData.value.mediaId
     form.responseMediaUrl = objData.value.url