Skip to content

Commit 1397767

Browse files
committed
refactor: 【MP素材管理】使用【WxMpSelect】
1 parent c7b296a commit 1397767

File tree

1 file changed

+74
-56
lines changed

1 file changed

+74
-56
lines changed

src/views/mp/material/index.vue

Lines changed: 74 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
<doc-alert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
33
<!-- 搜索工作栏 -->
44
<ContentWrap>
5-
<WxAccountSelect @change="(accountId) => accountChange(accountId)" />
5+
<el-form class="-mb-15px" :inline="true" label-width="68px">
6+
<el-form-item label="公众号" prop="accountId">
7+
<WxMpSelect @change="(accountId) => accountChange(accountId)" />
8+
</el-form-item>
9+
<el-form-item>
10+
<slot name="actions"></slot>
11+
</el-form-item>
12+
</el-form>
613
</ContentWrap>
714

815
<ContentWrap>
@@ -14,7 +21,7 @@
1421
</template>
1522
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
1623
<el-upload
17-
:action="actionUrl"
24+
:action="uploadUrl"
1825
:headers="headers"
1926
multiple
2027
:limit="1"
@@ -37,7 +44,7 @@
3744
<img class="material-img" :src="item.url" />
3845
<div class="item-name">{{ item.name }}</div>
3946
</a>
40-
<el-row class="ope-row" justify="center">
47+
<el-row justify="center">
4148
<el-button
4249
type="danger"
4350
circle
@@ -65,7 +72,7 @@
6572
</template>
6673
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
6774
<el-upload
68-
:action="actionUrl"
75+
:action="uploadUrl"
6976
:headers="headers"
7077
multiple
7178
:limit="1"
@@ -82,6 +89,8 @@
8289
</template>
8390
</el-upload>
8491
</div>
92+
93+
<!-- 列表 -->
8594
<el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px">
8695
<el-table-column label="编号" align="center" prop="mediaId" />
8796
<el-table-column label="文件名" align="center" prop="name" />
@@ -143,7 +152,7 @@
143152
v-loading="addMaterialLoading"
144153
>
145154
<el-upload
146-
:action="actionUrl"
155+
:action="uploadUrl"
147156
:headers="headers"
148157
multiple
149158
:limit="1"
@@ -182,11 +191,14 @@
182191
</el-row>
183192
</el-form>
184193
<template #footer>
194+
<!-- <span class="dialog-footer"> -->
185195
<el-button @click="cancelVideo">取 消</el-button>
186196
<el-button type="primary" @click="submitVideo">提 交</el-button>
197+
<!-- </span> -->
187198
</template>
188199
</el-dialog>
189200

201+
<!-- 列表 -->
190202
<el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px">
191203
<el-table-column label="编号" align="center" prop="mediaId" />
192204
<el-table-column label="文件名" align="center" prop="name" />
@@ -237,40 +249,69 @@
237249
</el-tabs>
238250
</ContentWrap>
239251
</template>
240-
<script setup name="MpMaterial">
252+
253+
<script lang="ts" setup name="MpMaterial">
241254
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
242255
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
243-
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
256+
import WxMpSelect from '@/views/mp/components/WxMpSelect.vue'
244257
import * as MpMaterialApi from '@/api/mp/material'
245258
import * as authUtil from '@/utils/auth'
246259
import { dateFormatter } from '@/utils/formatTime'
247-
248-
const message = useMessage()
260+
import type {
261+
FormInstance,
262+
FormRules,
263+
TabPaneName,
264+
UploadInstance,
265+
UploadProps,
266+
UploadRawFile,
267+
UploadUserFile
268+
} from 'element-plus'
249269
250270
const BASE_URL = import.meta.env.VITE_BASE_URL
251-
const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
271+
const uploadUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
252272
const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
253273
254-
const uploadFormRef = ref()
255-
const uploadVideoRef = ref()
274+
const message = useMessage()
275+
276+
const uploadFormRef = ref<FormInstance>()
277+
const uploadVideoRef = ref<UploadInstance>()
256278
257-
const type = ref('image')
279+
const uploadRules: FormRules = {
280+
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
281+
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
282+
}
283+
284+
// 素材类型
285+
type MatertialType = 'image' | 'voice' | 'video'
286+
const type = ref<MatertialType>('image')
258287
// 遮罩层
259288
const loading = ref(false)
260289
// 总条数
261290
const total = ref(0)
262291
// 数据列表
263292
const list = ref([])
264293
// 查询参数
265-
const queryParams = reactive({
294+
interface QueryParams {
295+
pageNo: number
296+
pageSize: number
297+
accountId?: number
298+
permanent: boolean
299+
}
300+
const queryParams: QueryParams = reactive({
266301
pageNo: 1,
267302
pageSize: 10,
268303
accountId: undefined,
269304
permanent: true
270305
})
271306
272-
const fileList = ref([])
273-
const uploadData = reactive({
307+
const fileList = ref<UploadUserFile[]>([])
308+
309+
interface UploadData {
310+
type: MatertialType
311+
title: string
312+
introduction: string
313+
}
314+
const uploadData: UploadData = reactive({
274315
type: 'image',
275316
title: '',
276317
introduction: ''
@@ -279,33 +320,16 @@ const uploadData = reactive({
279320
// === 视频上传,独有变量 ===
280321
const dialogVideoVisible = ref(false)
281322
const addMaterialLoading = ref(false)
282-
const uploadRules = reactive({
283-
// 视频上传的校验规则
284-
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
285-
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
286-
})
287323
288324
/** 侦听公众号变化 **/
289-
const accountChange = (accountId) => {
290-
setAccountId(accountId)
325+
const accountChange = (accountId: number | undefined) => {
326+
queryParams.accountId = accountId
291327
getList()
292328
}
293329
294330
// ======================== 列表查询 ========================
295-
/** 设置账号编号 */
296-
const setAccountId = (accountId) => {
297-
queryParams.accountId = accountId
298-
uploadData.accountId = accountId
299-
}
300-
301331
/** 查询列表 */
302332
const getList = async () => {
303-
// 如果没有选中公众号账号,则进行提示。
304-
if (!queryParams.accountId) {
305-
message.error('未选中公众号,无法查询草稿箱')
306-
return false
307-
}
308-
309333
loading.value = true
310334
try {
311335
const data = await MpMaterialApi.getMaterialPage({
@@ -322,16 +346,12 @@ const getList = async () => {
322346
/** 搜索按钮操作 */
323347
const handleQuery = () => {
324348
queryParams.pageNo = 1
325-
// 默认选中第一个
326-
if (queryParams.accountId) {
327-
setAccountId(queryParams.accountId)
328-
}
329349
getList()
330350
}
331351
332-
const handleTabChange = (tabName) => {
352+
const handleTabChange = (tabName: TabPaneName) => {
333353
// 设置 type
334-
uploadData.type = tabName
354+
uploadData.type = tabName as MatertialType
335355
336356
// 提前情况数据,避免tab切换后显示垃圾数据
337357
list.value = []
@@ -342,15 +362,15 @@ const handleTabChange = (tabName) => {
342362
}
343363
344364
// ======================== 文件上传 ========================
345-
const beforeImageUpload = (file) => {
365+
const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
346366
const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
347-
file.type
367+
rawFile.type
348368
)
349369
if (!isType) {
350370
message.error('上传图片格式不对!')
351371
return false
352372
}
353-
const isLt = file.size / 1024 / 1024 < 2
373+
const isLt = rawFile.size / 1024 / 1024 < 2
354374
if (!isLt) {
355375
message.error('上传图片大小不能超过 2M!')
356376
return false
@@ -359,9 +379,9 @@ const beforeImageUpload = (file) => {
359379
return true
360380
}
361381
362-
const beforeVoiceUpload = (file) => {
382+
const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
363383
const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
364-
const isLt = file.size / 1024 / 1024 < 2
384+
const isLt = rawFile.size / 1024 / 1024 < 2
365385
if (!isType) {
366386
message.error('上传语音格式不对!')
367387
return false
@@ -374,14 +394,14 @@ const beforeVoiceUpload = (file) => {
374394
return true
375395
}
376396
377-
const beforeVideoUpload = (file) => {
378-
const isType = file.type === 'video/mp4'
397+
const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
398+
const isType = rawFile.type === 'video/mp4'
379399
if (!isType) {
380400
message.error('上传视频格式不对!')
381401
return false
382402
}
383403
384-
const isLt = file.size / 1024 / 1024 < 10
404+
const isLt = rawFile.size / 1024 / 1024 < 10
385405
if (!isLt) {
386406
message.error('上传视频大小不能超过 10M!')
387407
return false
@@ -391,7 +411,7 @@ const beforeVideoUpload = (file) => {
391411
return true
392412
}
393413
394-
const handleUploadSuccess = (response, file, fileList) => {
414+
const handleUploadSuccess: UploadProps['onSuccess'] = (response: any) => {
395415
loading.value = false
396416
addMaterialLoading.value = false
397417
if (response.code !== 0) {
@@ -410,17 +430,17 @@ const handleUploadSuccess = (response, file, fileList) => {
410430
}
411431
412432
// 下载文件
413-
const handleDownload = (row) => {
433+
const handleDownload = (row: any) => {
414434
window.open(row.url, '_blank')
415435
}
416436
417437
// 提交 video 新建的表单
418438
const submitVideo = () => {
419-
uploadFormRef.value.validate((valid) => {
439+
uploadFormRef.value?.validate((valid) => {
420440
if (!valid) {
421441
return false
422442
}
423-
uploadVideoRef.value.submit()
443+
uploadVideoRef.value?.submit()
424444
})
425445
}
426446
@@ -444,7 +464,7 @@ const resetVideo = () => {
444464
}
445465
446466
// ======================== 其它操作 ========================
447-
const handleDelete = async (item) => {
467+
const handleDelete = async (item: any) => {
448468
await message.confirm('此操作将永久删除该文件, 是否继续?')
449469
await MpMaterialApi.deletePermanentMaterial(item.id)
450470
message.alertSuccess('删除成功')
@@ -501,6 +521,4 @@ p {
501521
column-count: 1;
502522
}
503523
}
504-
505-
/*瀑布流样式*/
506524
</style>

0 commit comments

Comments
 (0)