2
2
<doc-alert title =" 公众号素材" url =" https://doc.iocoder.cn/mp/material/" />
3
3
<!-- 搜索工作栏 -->
4
4
<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 >
6
13
</ContentWrap >
7
14
8
15
<ContentWrap >
14
21
</template >
15
22
<div class =" add_but" v-hasPermi =" ['mp:material:upload-permanent']" >
16
23
<el-upload
17
- :action =" actionUrl "
24
+ :action =" uploadUrl "
18
25
:headers =" headers"
19
26
multiple
20
27
:limit =" 1"
37
44
<img class =" material-img" :src =" item.url" />
38
45
<div class =" item-name" >{{ item.name }}</div >
39
46
</a >
40
- <el-row class = " ope-row " justify =" center" >
47
+ <el-row justify =" center" >
41
48
<el-button
42
49
type =" danger"
43
50
circle
65
72
</template >
66
73
<div class =" add_but" v-hasPermi =" ['mp:material:upload-permanent']" >
67
74
<el-upload
68
- :action =" actionUrl "
75
+ :action =" uploadUrl "
69
76
:headers =" headers"
70
77
multiple
71
78
:limit =" 1"
82
89
</template >
83
90
</el-upload >
84
91
</div >
92
+
93
+ <!-- 列表 -->
85
94
<el-table :data =" list" stripe border v-loading =" loading" style =" margin-top : 10px " >
86
95
<el-table-column label =" 编号" align =" center" prop =" mediaId" />
87
96
<el-table-column label =" 文件名" align =" center" prop =" name" />
143
152
v-loading =" addMaterialLoading"
144
153
>
145
154
<el-upload
146
- :action =" actionUrl "
155
+ :action =" uploadUrl "
147
156
:headers =" headers"
148
157
multiple
149
158
:limit =" 1"
182
191
</el-row >
183
192
</el-form >
184
193
<template #footer >
194
+ <!-- <span class="dialog-footer"> -->
185
195
<el-button @click =" cancelVideo" >取 消</el-button >
186
196
<el-button type =" primary" @click =" submitVideo" >提 交</el-button >
197
+ <!-- </span> -->
187
198
</template >
188
199
</el-dialog >
189
200
201
+ <!-- 列表 -->
190
202
<el-table :data =" list" stripe border v-loading =" loading" style =" margin-top : 10px " >
191
203
<el-table-column label =" 编号" align =" center" prop =" mediaId" />
192
204
<el-table-column label =" 文件名" align =" center" prop =" name" />
237
249
</el-tabs >
238
250
</ContentWrap >
239
251
</template >
240
- <script setup name="MpMaterial">
252
+
253
+ <script lang="ts" setup name="MpMaterial">
241
254
import WxVoicePlayer from ' @/views/mp/components/wx-voice-play/main.vue'
242
255
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'
244
257
import * as MpMaterialApi from ' @/api/mp/material'
245
258
import * as authUtil from ' @/utils/auth'
246
259
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'
249
269
250
270
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'
252
272
const headers = { Authorization: ' Bearer ' + authUtil .getAccessToken () }
253
273
254
- const uploadFormRef = ref ()
255
- const uploadVideoRef = ref ()
274
+ const message = useMessage ()
275
+
276
+ const uploadFormRef = ref <FormInstance >()
277
+ const uploadVideoRef = ref <UploadInstance >()
256
278
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' )
258
287
// 遮罩层
259
288
const loading = ref (false )
260
289
// 总条数
261
290
const total = ref (0 )
262
291
// 数据列表
263
292
const list = ref ([])
264
293
// 查询参数
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 ({
266
301
pageNo: 1 ,
267
302
pageSize: 10 ,
268
303
accountId: undefined ,
269
304
permanent: true
270
305
})
271
306
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 ({
274
315
type: ' image' ,
275
316
title: ' ' ,
276
317
introduction: ' '
@@ -279,33 +320,16 @@ const uploadData = reactive({
279
320
// === 视频上传,独有变量 ===
280
321
const dialogVideoVisible = ref (false )
281
322
const addMaterialLoading = ref (false )
282
- const uploadRules = reactive ({
283
- // 视频上传的校验规则
284
- title: [{ required: true , message: ' 请输入标题' , trigger: ' blur' }],
285
- introduction: [{ required: true , message: ' 请输入描述' , trigger: ' blur' }]
286
- })
287
323
288
324
/** 侦听公众号变化 **/
289
- const accountChange = (accountId ) => {
290
- setAccountId ( accountId)
325
+ const accountChange = (accountId : number | undefined ) => {
326
+ queryParams . accountId = accountId
291
327
getList ()
292
328
}
293
329
294
330
// ======================== 列表查询 ========================
295
- /** 设置账号编号 */
296
- const setAccountId = (accountId ) => {
297
- queryParams .accountId = accountId
298
- uploadData .accountId = accountId
299
- }
300
-
301
331
/** 查询列表 */
302
332
const getList = async () => {
303
- // 如果没有选中公众号账号,则进行提示。
304
- if (! queryParams .accountId ) {
305
- message .error (' 未选中公众号,无法查询草稿箱' )
306
- return false
307
- }
308
-
309
333
loading .value = true
310
334
try {
311
335
const data = await MpMaterialApi .getMaterialPage ({
@@ -322,16 +346,12 @@ const getList = async () => {
322
346
/** 搜索按钮操作 */
323
347
const handleQuery = () => {
324
348
queryParams .pageNo = 1
325
- // 默认选中第一个
326
- if (queryParams .accountId ) {
327
- setAccountId (queryParams .accountId )
328
- }
329
349
getList ()
330
350
}
331
351
332
- const handleTabChange = (tabName ) => {
352
+ const handleTabChange = (tabName : TabPaneName ) => {
333
353
// 设置 type
334
- uploadData .type = tabName
354
+ uploadData .type = tabName as MatertialType
335
355
336
356
// 提前情况数据,避免tab切换后显示垃圾数据
337
357
list .value = []
@@ -342,15 +362,15 @@ const handleTabChange = (tabName) => {
342
362
}
343
363
344
364
// ======================== 文件上传 ========================
345
- const beforeImageUpload = (file ) => {
365
+ const beforeImageUpload: UploadProps [ ' beforeUpload ' ] = (rawFile : UploadRawFile ) => {
346
366
const isType = [' image/jpeg' , ' image/png' , ' image/gif' , ' image/bmp' , ' image/jpg' ].includes (
347
- file .type
367
+ rawFile .type
348
368
)
349
369
if (! isType ) {
350
370
message .error (' 上传图片格式不对!' )
351
371
return false
352
372
}
353
- const isLt = file .size / 1024 / 1024 < 2
373
+ const isLt = rawFile .size / 1024 / 1024 < 2
354
374
if (! isLt ) {
355
375
message .error (' 上传图片大小不能超过 2M!' )
356
376
return false
@@ -359,9 +379,9 @@ const beforeImageUpload = (file) => {
359
379
return true
360
380
}
361
381
362
- const beforeVoiceUpload = (file ) => {
382
+ const beforeVoiceUpload: UploadProps [ ' beforeUpload ' ] = (rawFile : UploadRawFile ) => {
363
383
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
365
385
if (! isType ) {
366
386
message .error (' 上传语音格式不对!' )
367
387
return false
@@ -374,14 +394,14 @@ const beforeVoiceUpload = (file) => {
374
394
return true
375
395
}
376
396
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'
379
399
if (! isType ) {
380
400
message .error (' 上传视频格式不对!' )
381
401
return false
382
402
}
383
403
384
- const isLt = file .size / 1024 / 1024 < 10
404
+ const isLt = rawFile .size / 1024 / 1024 < 10
385
405
if (! isLt ) {
386
406
message .error (' 上传视频大小不能超过 10M!' )
387
407
return false
@@ -391,7 +411,7 @@ const beforeVideoUpload = (file) => {
391
411
return true
392
412
}
393
413
394
- const handleUploadSuccess = (response , file , fileList ) => {
414
+ const handleUploadSuccess: UploadProps [ ' onSuccess ' ] = (response : any ) => {
395
415
loading .value = false
396
416
addMaterialLoading .value = false
397
417
if (response .code !== 0 ) {
@@ -410,17 +430,17 @@ const handleUploadSuccess = (response, file, fileList) => {
410
430
}
411
431
412
432
// 下载文件
413
- const handleDownload = (row ) => {
433
+ const handleDownload = (row : any ) => {
414
434
window .open (row .url , ' _blank' )
415
435
}
416
436
417
437
// 提交 video 新建的表单
418
438
const submitVideo = () => {
419
- uploadFormRef .value .validate ((valid ) => {
439
+ uploadFormRef .value ? .validate ((valid ) => {
420
440
if (! valid ) {
421
441
return false
422
442
}
423
- uploadVideoRef .value .submit ()
443
+ uploadVideoRef .value ? .submit ()
424
444
})
425
445
}
426
446
@@ -444,7 +464,7 @@ const resetVideo = () => {
444
464
}
445
465
446
466
// ======================== 其它操作 ========================
447
- const handleDelete = async (item ) => {
467
+ const handleDelete = async (item : any ) => {
448
468
await message .confirm (' 此操作将永久删除该文件, 是否继续?' )
449
469
await MpMaterialApi .deletePermanentMaterial (item .id )
450
470
message .alertSuccess (' 删除成功' )
501
521
column-count : 1 ;
502
522
}
503
523
}
504
-
505
- /* 瀑布流样式*/
506
524
</style >
0 commit comments