3
3
<doc-alert title =" 自动回复" url =" https://doc.iocoder.cn/mp/auto-reply/" />
4
4
5
5
<!-- 搜索工作栏 -->
6
- <el-form
7
- :model =" queryParams"
8
- ref =" queryFormRef"
9
- size =" small"
10
- :inline =" true"
11
- v-show =" showSearch"
12
- label-width =" 68px"
13
- >
14
- <el-form-item label =" 公众号" prop =" accountId" >
15
- <el-select v-model =" queryParams.accountId" placeholder =" 请选择公众号" >
16
- <el-option
17
- v-for =" item in accounts"
18
- :key =" parseInt(item.id)"
19
- :label =" item.name"
20
- :value =" parseInt(item.id)"
21
- />
22
- </el-select >
23
- </el-form-item >
24
- <el-form-item >
25
- <el-button type =" primary" @click =" handleQuery" ><Icon icon =" ep:search" />搜索</el-button >
26
- <el-button @click =" resetQuery" ><Icon icon =" ep:refresh" />重置</el-button >
27
- </el-form-item >
28
- </el-form >
6
+ <ContentWrap >
7
+ <el-form
8
+ class =" -mb-15px"
9
+ :model =" queryParams"
10
+ ref =" queryFormRef"
11
+ :inline =" true"
12
+ label-width =" 68px"
13
+ >
14
+ <el-form-item label =" 公众号" prop =" accountId" >
15
+ <el-select v-model =" queryParams.accountId" placeholder =" 请选择公众号" class =" !w-240px" >
16
+ <el-option
17
+ v-for =" item in accountList"
18
+ :key =" item.id"
19
+ :label =" item.name"
20
+ :value =" item.id"
21
+ />
22
+ </el-select >
23
+ </el-form-item >
24
+ <el-form-item >
25
+ <el-button @click =" handleQuery" ><Icon icon =" ep:search" />搜索</el-button >
26
+ <el-button @click =" resetQuery" ><Icon icon =" ep:refresh" />重置</el-button >
27
+ </el-form-item >
28
+ </el-form >
29
+ </ContentWrap >
29
30
31
+ <!-- tab 切换 -->
30
32
<ContentWrap >
31
- <!-- tab 切换 -->
32
33
<el-tabs v-model =" type" @tab-change =" handleTabChange" >
33
34
<!-- 操作工具栏 -->
34
35
<el-row :gutter =" 10" class =" mb8" >
35
36
<el-col :span =" 1.5" >
36
37
<el-button
37
38
type =" primary"
38
39
plain
39
- size =" small"
40
40
@click =" handleAdd"
41
41
v-hasPermi =" ['mp:auto-reply:create']"
42
42
v-if =" type !== '1' || list.length <= 0"
62
62
</template >
63
63
</el-tab-pane >
64
64
</el-tabs >
65
+ </ContentWrap >
65
66
66
- <!-- 列表 -->
67
+ <!-- 列表 -->
68
+ <ContentWrap >
67
69
<el-table v-loading =" loading" :data =" list" >
68
70
<el-table-column
69
71
label =" 请求消息类型"
82
84
</el-table-column >
83
85
<el-table-column label =" 回复消息类型" align =" center" >
84
86
<template #default =" scope " >
85
- <dict-tag :type =" DICT_TYPE.MP_MESSAGE_TYPE" :value =" scope.row.responseMessageType " />
87
+ <dict-tag :type =" DICT_TYPE.MP_MESSAGE_TYPE" :value =" scope.row.responsType " />
86
88
</template >
87
89
</el-table-column >
88
90
<el-table-column label =" 回复内容" align =" center" >
89
91
<template #default =" scope " >
90
- <div v-if =" scope.row.responseMessageType === 'text'" >{{
91
- scope.row.responseContent
92
- }}</div >
93
- <div v-else-if =" scope.row.responseMessageType === 'voice'" >
92
+ <div v-if =" scope.row.responsType === 'text'" >{{ scope.row.responseContent }}</div >
93
+ <div v-else-if =" scope.row.responsType === 'voice'" >
94
94
<WxVoicePlayer :url =" scope.row.responseMediaUrl" />
95
95
</div >
96
- <div v-else-if =" scope.row.responseMessageType === 'image'" >
96
+ <div v-else-if =" scope.row.responsType === 'image'" >
97
97
<a target =" _blank" :href =" scope.row.responseMediaUrl" >
98
98
<img :src =" scope.row.responseMediaUrl" style =" width : 100px " />
99
99
</a >
100
100
</div >
101
101
<div
102
102
v-else-if ="
103
- scope.row.responseMessageType === 'video' ||
104
- scope.row.responseMessageType === 'shortvideo'
103
+ scope.row.responsType === 'video' || scope.row.responsType === 'shortvideo'
105
104
"
106
105
>
107
106
<WxVideoPlayer :url =" scope.row.responseMediaUrl" style =" margin-top : 10px " />
108
107
</div >
109
- <div v-else-if =" scope.row.responseMessageType === 'news'" >
108
+ <div v-else-if =" scope.row.responsType === 'news'" >
110
109
<WxNews :articles =" scope.row.responseArticles" />
111
110
</div >
112
- <div v-else-if =" scope.row.responseMessageType === 'music'" >
111
+ <div v-else-if =" scope.row.responsType === 'music'" >
113
112
<WxMusic
114
113
:title =" scope.row.responseTitle"
115
114
:description =" scope.row.responseDescription"
120
119
</div >
121
120
</template >
122
121
</el-table-column >
123
- <el-table-column label =" 创建时间" align =" center" prop =" createTime" width =" 180" >
122
+ <el-table-column
123
+ label =" 创建时间"
124
+ align =" center"
125
+ prop =" createTime"
126
+ :formatter =" dateFormatter"
127
+ width =" 180"
128
+ >
124
129
<template #default =" scope " >
125
- <span >{{ formatDate( scope.row.createTime) }}</span >
130
+ <span >{{ scope.row.createTime }}</span >
126
131
</template >
127
132
</el-table-column >
128
133
<el-table-column label =" 操作" align =" center" class-name =" small-padding fixed-width" >
@@ -211,7 +216,7 @@ import {
211
216
} from ' @/api/mp/autoReply'
212
217
213
218
import { DICT_TYPE , getDictOptions } from ' @/utils/dict'
214
- import { formatDate } from ' @/utils/formatTime'
219
+ import { dateFormatter } from ' @/utils/formatTime'
215
220
import { ContentWrap } from ' @/components/ContentWrap'
216
221
217
222
const message = useMessage ()
@@ -226,7 +231,7 @@ const requestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'l
226
231
// 遮罩层
227
232
const loading = ref (true )
228
233
// 显示搜索条件
229
- const showSearch = ref (true )
234
+ // const showSearch = ref(true)
230
235
// 总条数
231
236
const total = ref (0 )
232
237
// 自动回复列表
@@ -257,14 +262,14 @@ const rules = {
257
262
const hackResetWxReplySelect = ref (false ) // 重置 WxReplySelect 组件,解决无法清除的问题
258
263
259
264
// 公众号账号列表
260
- const accounts = ref ([])
265
+ const accountList = ref ([])
261
266
262
267
onMounted (() => {
263
268
getSimpleAccountList ().then ((data ) => {
264
- accounts .value = data
269
+ accountList .value = data
265
270
// 默认选中第一个
266
- if (accounts .value .length > 0 ) {
267
- queryParams .accountId = accounts .value [0 ].id
271
+ if (accountList .value .length > 0 ) {
272
+ queryParams .accountId = accountList .value [0 ].id
268
273
}
269
274
// 加载数据
270
275
getList ()
@@ -303,8 +308,8 @@ const handleQuery = () => {
303
308
const resetQuery = () => {
304
309
queryFormRef .value ? .resetFields ()
305
310
// 默认选中第一个
306
- if (accounts .value .length > 0 ) {
307
- queryParams .accountId = accounts .value [0 ].id
311
+ if (accountList .value .length > 0 ) {
312
+ queryParams .accountId = accountList .value [0 ].id
308
313
}
309
314
handleQuery ()
310
315
}
@@ -336,14 +341,14 @@ const handleUpdate = (row) => {
336
341
getAutoReply (row .id ).then ((data ) => {
337
342
// 设置属性
338
343
form .value = { ... data }
339
- delete form .value [' responseMessageType ' ]
344
+ delete form .value [' responsType ' ]
340
345
delete form .value [' responseContent' ]
341
346
delete form .value [' responseMediaId' ]
342
347
delete form .value [' responseMediaUrl' ]
343
348
delete form .value [' responseDescription' ]
344
349
delete form .value [' responseArticles' ]
345
350
objData .value = {
346
- type: data .responseMessageType ,
351
+ type: data .responsType ,
347
352
accountId: queryParams .accountId ,
348
353
content: data .responseContent ,
349
354
mediaId: data .responseMediaId ,
@@ -371,7 +376,7 @@ const handleSubmit = () => {
371
376
372
377
// 处理回复消息
373
378
const form = { ... form .value }
374
- form .responseMessageType = objData .value .type
379
+ form .responsType = objData .value .type
375
380
form .responseContent = objData .value .content
376
381
form .responseMediaId = objData .value .mediaId
377
382
form .responseMediaUrl = objData .value .url
0 commit comments