Skip to content

Commit c4746fc

Browse files
dhb52dhb52
committed
refactor: 尝试拆分【消息管理】页面
1 parent 0b055b5 commit c4746fc

File tree

2 files changed

+178
-150
lines changed

2 files changed

+178
-150
lines changed

‎src/views/mp/message/DataGrid.vue

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<div>
3+
<el-table v-loading="props.loading" :data="props.list">
4+
<el-table-column
5+
label="发送时间"
6+
align="center"
7+
prop="createTime"
8+
width="180"
9+
:formatter="dateFormatter"
10+
/>
11+
<el-table-column label="消息类型" align="center" prop="type" width="80" />
12+
<el-table-column label="发送方" align="center" prop="sendFrom" width="80">
13+
<template #default="scope">
14+
<el-tag v-if="scope.row.sendFrom === 1" type="success">粉丝</el-tag>
15+
<el-tag v-else type="info">公众号</el-tag>
16+
</template>
17+
</el-table-column>
18+
<el-table-column label="用户标识" align="center" prop="openid" width="300" />
19+
<el-table-column label="内容" prop="content">
20+
<template #default="scope">
21+
<!-- 【事件】区域 -->
22+
<div v-if="scope.row.type === MsgType.Event && scope.row.event === 'subscribe'">
23+
<el-tag type="success">关注</el-tag>
24+
</div>
25+
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'unsubscribe'">
26+
<el-tag type="danger">取消关注</el-tag>
27+
</div>
28+
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'CLICK'">
29+
<el-tag>点击菜单</el-tag>
30+
【{{ scope.row.eventKey }}】
31+
</div>
32+
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'VIEW'">
33+
<el-tag>点击菜单链接</el-tag>
34+
【{{ scope.row.eventKey }}】
35+
</div>
36+
<div
37+
v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'scancode_waitmsg'"
38+
>
39+
<el-tag>扫码结果</el-tag>
40+
【{{ scope.row.eventKey }}】
41+
</div>
42+
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'scancode_push'">
43+
<el-tag>扫码结果</el-tag>
44+
【{{ scope.row.eventKey }}】
45+
</div>
46+
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'pic_sysphoto'">
47+
<el-tag>系统拍照发图</el-tag>
48+
</div>
49+
<div
50+
v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'pic_photo_or_album'"
51+
>
52+
<el-tag>拍照或者相册</el-tag>
53+
</div>
54+
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'pic_weixin'">
55+
<el-tag>微信相册</el-tag>
56+
</div>
57+
<div
58+
v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'location_select'"
59+
>
60+
<el-tag>选择地理位置</el-tag>
61+
</div>
62+
<div v-else-if="scope.row.type === MsgType.Event">
63+
<el-tag type="danger">未知事件类型</el-tag>
64+
</div>
65+
<!-- 【消息】区域 -->
66+
<div v-else-if="scope.row.type === MsgType.Text">{{ scope.row.content }}</div>
67+
<div v-else-if="scope.row.type === MsgType.Voice">
68+
<wx-voice-player :url="scope.row.mediaUrl" :content="scope.row.recognition" />
69+
</div>
70+
<div v-else-if="scope.row.type === MsgType.Image">
71+
<a target="_blank" :href="scope.row.mediaUrl">
72+
<img :src="scope.row.mediaUrl" style="width: 100px" />
73+
</a>
74+
</div>
75+
<div v-else-if="scope.row.type === MsgType.Video || scope.row.type === 'shortvideo'">
76+
<wx-video-player :url="scope.row.mediaUrl" style="margin-top: 10px" />
77+
</div>
78+
<div v-else-if="scope.row.type === MsgType.Link">
79+
<el-tag>链接</el-tag>
80+
：
81+
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
82+
</div>
83+
<div v-else-if="scope.row.type === MsgType.Location">
84+
<WxLocation
85+
:label="scope.row.label"
86+
:location-y="scope.row.locationY"
87+
:location-x="scope.row.locationX"
88+
/>
89+
</div>
90+
<div v-else-if="scope.row.type === MsgType.Music">
91+
<WxMusic
92+
:title="scope.row.title"
93+
:description="scope.row.description"
94+
:thumb-media-url="scope.row.thumbMediaUrl"
95+
:music-url="scope.row.musicUrl"
96+
:hq-music-url="scope.row.hqMusicUrl"
97+
/>
98+
</div>
99+
<div v-else-if="scope.row.type === MsgType.News">
100+
<WxNews :articles="scope.row.articles" />
101+
</div>
102+
<div v-else>
103+
<el-tag type="danger">未知消息类型</el-tag>
104+
</div>
105+
</template>
106+
</el-table-column>
107+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
108+
<template #default="scope">
109+
<el-button
110+
link
111+
type="primary"
112+
@click="emit('send', scope.row.userId)"
113+
v-hasPermi="['mp:message:send']"
114+
>
115+
消息
116+
</el-button>
117+
</template>
118+
</el-table-column>
119+
</el-table>
120+
<!-- 分页组件 -->
121+
</div>
122+
</template>
123+
124+
<script setup lang="ts">
125+
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
126+
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
127+
import WxLocation from '@/views/mp/components/wx-location/main.vue'
128+
import WxMusic from '@/views/mp/components/wx-music/main.vue'
129+
import WxNews from '@/views/mp/components/wx-news/main.vue'
130+
import { dateFormatter } from '@/utils/formatTime'
131+
import { MsgType } from '@/views/mp/components/wx-msg/types'
132+
133+
const props = defineProps({
134+
list: {
135+
type: Array,
136+
required: true
137+
},
138+
loading: {
139+
type: Boolean,
140+
required: true
141+
}
142+
})
143+
144+
const emit = defineEmits<{ (e: 'send', v: number) }>()
145+
</script>
146+
147+
<style scoped></style>

‎src/views/mp/message/index.vue

Lines changed: 31 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -58,161 +58,39 @@
5858

5959
<!-- 列表 -->
6060
<ContentWrap>
61-
<el-table v-loading="loading" :data="list">
62-
<el-table-column
63-
label="发送时间"
64-
align="center"
65-
prop="createTime"
66-
width="180"
67-
:formatter="dateFormatter"
68-
/>
69-
<el-table-column label="消息类型" align="center" prop="type" width="80" />
70-
<el-table-column label="发送方" align="center" prop="sendFrom" width="80">
71-
<template #default="scope">
72-
<el-tag v-if="scope.row.sendFrom === 1" type="success">粉丝</el-tag>
73-
<el-tag v-else type="info">公众号</el-tag>
74-
</template>
75-
</el-table-column>
76-
<el-table-column label="用户标识" align="center" prop="openid" width="300" />
77-
<el-table-column label="内容" prop="content">
78-
<template #default="scope">
79-
<!-- 【事件】区域 -->
80-
<div v-if="scope.row.type === MsgType.Event && scope.row.event === 'subscribe'">
81-
<el-tag type="success">关注</el-tag>
82-
</div>
83-
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'unsubscribe'">
84-
<el-tag type="danger">取消关注</el-tag>
85-
</div>
86-
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'CLICK'">
87-
<el-tag>点击菜单</el-tag>
88-
【{{ scope.row.eventKey }}】
89-
</div>
90-
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'VIEW'">
91-
<el-tag>点击菜单链接</el-tag>
92-
【{{ scope.row.eventKey }}】
93-
</div>
94-
<div
95-
v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'scancode_waitmsg'"
96-
>
97-
<el-tag>扫码结果</el-tag>
98-
【{{ scope.row.eventKey }}】
99-
</div>
100-
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'scancode_push'">
101-
<el-tag>扫码结果</el-tag>
102-
【{{ scope.row.eventKey }}】
103-
</div>
104-
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'pic_sysphoto'">
105-
<el-tag>系统拍照发图</el-tag>
106-
</div>
107-
<div
108-
v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'pic_photo_or_album'"
109-
>
110-
<el-tag>拍照或者相册</el-tag>
111-
</div>
112-
<div v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'pic_weixin'">
113-
<el-tag>微信相册</el-tag>
114-
</div>
115-
<div
116-
v-else-if="scope.row.type === MsgType.Event && scope.row.event === 'location_select'"
117-
>
118-
<el-tag>选择地理位置</el-tag>
119-
</div>
120-
<div v-else-if="scope.row.type === MsgType.Event">
121-
<el-tag type="danger">未知事件类型</el-tag>
122-
</div>
123-
<!-- 【消息】区域 -->
124-
<div v-else-if="scope.row.type === MsgType.Text">{{ scope.row.content }}</div>
125-
<div v-else-if="scope.row.type === MsgType.Voice">
126-
<wx-voice-player :url="scope.row.mediaUrl" :content="scope.row.recognition" />
127-
</div>
128-
<div v-else-if="scope.row.type === MsgType.Image">
129-
<a target="_blank" :href="scope.row.mediaUrl">
130-
<img :src="scope.row.mediaUrl" style="width: 100px" />
131-
</a>
132-
</div>
133-
<div v-else-if="scope.row.type === MsgType.Video || scope.row.type === 'shortvideo'">
134-
<wx-video-player :url="scope.row.mediaUrl" style="margin-top: 10px" />
135-
</div>
136-
<div v-else-if="scope.row.type === MsgType.Link">
137-
<el-tag>链接</el-tag>
138-
：
139-
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
140-
</div>
141-
<div v-else-if="scope.row.type === MsgType.Location">
142-
<WxLocation
143-
:label="scope.row.label"
144-
:location-y="scope.row.locationY"
145-
:location-x="scope.row.locationX"
146-
/>
147-
</div>
148-
<div v-else-if="scope.row.type === MsgType.Music">
149-
<WxMusic
150-
:title="scope.row.title"
151-
:description="scope.row.description"
152-
:thumb-media-url="scope.row.thumbMediaUrl"
153-
:music-url="scope.row.musicUrl"
154-
:hq-music-url="scope.row.hqMusicUrl"
155-
/>
156-
</div>
157-
<div v-else-if="scope.row.type === MsgType.News">
158-
<WxNews :articles="scope.row.articles" />
159-
</div>
160-
<div v-else>
161-
<el-tag type="danger">未知消息类型</el-tag>
162-
</div>
163-
</template>
164-
</el-table-column>
165-
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
166-
<template #default="scope">
167-
<el-button
168-
link
169-
type="primary"
170-
@click="handleSend(scope.row)"
171-
v-hasPermi="['mp:message:send']"
172-
>
173-
消息
174-
</el-button>
175-
</template>
176-
</el-table-column>
177-
</el-table>
178-
<!-- 分页组件 -->
61+
<DataGrid :list="list" :loading="loading" @send="handleSend" />
17962
<Pagination
18063
v-show="total > 0"
18164
:total="total"
18265
v-model:page="queryParams.pageNo"
18366
v-model:limit="queryParams.pageSize"
18467
@pagination="getList"
18568
/>
186-
187-
<!-- 发送消息的弹窗 -->
188-
<el-dialog
189-
title="粉丝消息列表"
190-
v-model="showMessageBox"
191-
@click="showMessageBox = true"
192-
width="50%"
193-
destroy-on-close
194-
>
195-
<WxMsg :user-id="userId" />
196-
</el-dialog>
19769
</ContentWrap>
70+
71+
<!-- 发送消息的弹窗 -->
72+
<el-dialog
73+
title="粉丝消息列表"
74+
v-model="messageBox.show"
75+
@click="messageBox.show = true"
76+
width="50%"
77+
destroy-on-close
78+
>
79+
<WxMsg :user-id="messageBox.userId" />
80+
</el-dialog>
19881
</template>
19982
<script setup lang="ts" name="MpMessage">
200-
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
201-
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
83+
import * as MpMessageApi from '@/api/mp/message'
20284
import WxMsg from '@/views/mp/components/wx-msg/main.vue'
203-
import WxLocation from '@/views/mp/components/wx-location/main.vue'
204-
import WxMusic from '@/views/mp/components/wx-music/main.vue'
205-
import WxNews from '@/views/mp/components/wx-news/main.vue'
20685
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
207-
import * as MpMessageApi from '@/api/mp/message'
86+
import DataGrid from './DataGrid.vue'
20887
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
209-
import { dateFormatter } from '@/utils/formatTime'
21088
import { MsgType } from '@/views/mp/components/wx-msg/types'
21189
import type { FormInstance } from 'element-plus'
21290
213-
const loading = ref(true) // 列表的加载中
214-
const total = ref(0) // 列表的总页数
215-
const list = ref<any[]>([]) // 列表的数据
91+
const loading = ref(false)
92+
const total = ref(0) // 数据的总页数
93+
const list = ref<any[]>([]) // 当前页的列表数据
21694
21795
// 搜索参数
21896
interface QueryParams {
@@ -232,8 +110,12 @@ const queryParams: QueryParams = reactive({
232110
createTime: []
233111
})
234112
const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
235-
const showMessageBox = ref(false) // 是否显示弹出层
236-
const userId = ref(0) // 操作的用户编号
113+
114+
// 消息对话框
115+
const messageBox = reactive({
116+
show: false,
117+
userId: 0
118+
})
237119
238120
/** 侦听accountId */
239121
const onAccountChanged = (id?: number) => {
@@ -242,6 +124,11 @@ const onAccountChanged = (id?: number) => {
242124
}
243125
244126
/** 查询列表 */
127+
const handleQuery = () => {
128+
queryParams.pageNo = 1
129+
getList()
130+
}
131+
245132
const getList = async () => {
246133
try {
247134
loading.value = true
@@ -253,12 +140,6 @@ const getList = async () => {
253140
}
254141
}
255142
256-
/** 搜索按钮操作 */
257-
const handleQuery = () => {
258-
queryParams.pageNo = 1
259-
getList()
260-
}
261-
262143
/** 重置按钮操作 */
263144
const resetQuery = async () => {
264145
// 暂存accountId，并在reset后恢复
@@ -269,8 +150,8 @@ const resetQuery = async () => {
269150
}
270151
271152
/** 打开消息发送窗口 */
272-
const handleSend = async (row: any) => {
273-
userId.value = row.userId
274-
showMessageBox.value = true
153+
const handleSend = async (userId: number) => {
154+
messageBox.userId = userId
155+
messageBox.show = true
275156
}
276157
</script>

0 commit comments

Comments
 (0)