refactor: 【MP素材管理】使用【WxMpSelect】

(cherry picked from commit 1397767492)
This commit is contained in:
dhb52 2023-04-11 11:14:20 +08:00 committed by shizhong
parent 010fe5f43c
commit bfec37fdf1

View File

@ -1,7 +1,14 @@
<template> <template>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<ContentWrap> <ContentWrap>
<WxAccountSelect @change="(accountId) => accountChange(accountId)" /> <el-form class="-mb-15px" :inline="true" label-width="68px">
<el-form-item label="公众号" prop="accountId">
<WxMpSelect @change="(accountId) => accountChange(accountId)" />
</el-form-item>
<el-form-item>
<slot name="actions"></slot>
</el-form-item>
</el-form>
</ContentWrap> </ContentWrap>
<ContentWrap> <ContentWrap>
@ -13,7 +20,7 @@
</template> </template>
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']"> <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
<el-upload <el-upload
:action="actionUrl" :action="uploadUrl"
:headers="headers" :headers="headers"
multiple multiple
:limit="1" :limit="1"
@ -36,7 +43,7 @@
<img class="material-img" :src="item.url" /> <img class="material-img" :src="item.url" />
<div class="item-name">{{ item.name }}</div> <div class="item-name">{{ item.name }}</div>
</a> </a>
<el-row class="ope-row" justify="center"> <el-row justify="center">
<el-button <el-button
type="danger" type="danger"
circle circle
@ -64,7 +71,7 @@
</template> </template>
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']"> <div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
<el-upload <el-upload
:action="actionUrl" :action="uploadUrl"
:headers="headers" :headers="headers"
multiple multiple
:limit="1" :limit="1"
@ -81,6 +88,8 @@
</template> </template>
</el-upload> </el-upload>
</div> </div>
<!-- 列表 -->
<el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px"> <el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px">
<el-table-column label="编号" align="center" prop="mediaId" /> <el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" /> <el-table-column label="文件名" align="center" prop="name" />
@ -142,7 +151,7 @@
v-loading="addMaterialLoading" v-loading="addMaterialLoading"
> >
<el-upload <el-upload
:action="actionUrl" :action="uploadUrl"
:headers="headers" :headers="headers"
multiple multiple
:limit="1" :limit="1"
@ -181,11 +190,14 @@
</el-row> </el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<!-- <span class="dialog-footer"> -->
<el-button @click="cancelVideo"> </el-button> <el-button @click="cancelVideo"> </el-button>
<el-button type="primary" @click="submitVideo"> </el-button> <el-button type="primary" @click="submitVideo"> </el-button>
<!-- </span> -->
</template> </template>
</el-dialog> </el-dialog>
<!-- 列表 -->
<el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px"> <el-table :data="list" stripe border v-loading="loading" style="margin-top: 10px">
<el-table-column label="编号" align="center" prop="mediaId" /> <el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" /> <el-table-column label="文件名" align="center" prop="name" />
@ -236,24 +248,41 @@
</el-tabs> </el-tabs>
</ContentWrap> </ContentWrap>
</template> </template>
<script setup name="MpMaterial">
<script lang="ts" setup name="MpMaterial">
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue' import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue' import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue' import WxMpSelect from '@/views/mp/components/WxMpSelect.vue'
import * as MpMaterialApi from '@/api/mp/material' import * as MpMaterialApi from '@/api/mp/material'
import * as authUtil from '@/utils/auth' import * as authUtil from '@/utils/auth'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import type {
FormInstance,
FormRules,
TabPaneName,
UploadInstance,
UploadProps,
UploadRawFile,
UploadUserFile
} from 'element-plus'
const BASE_URL = import.meta.env.VITE_BASE_URL
const uploadUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
const message = useMessage() const message = useMessage()
const BASE_URL = import.meta.env.VITE_BASE_URL const uploadFormRef = ref<FormInstance>()
const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent' const uploadVideoRef = ref<UploadInstance>()
const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
const uploadFormRef = ref() const uploadRules: FormRules = {
const uploadVideoRef = ref() title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}
const type = ref('image') //
type MatertialType = 'image' | 'voice' | 'video'
const type = ref<MatertialType>('image')
// //
const loading = ref(false) const loading = ref(false)
// //
@ -261,15 +290,27 @@ const total = ref(0)
// //
const list = ref([]) const list = ref([])
// //
const queryParams = reactive({ interface QueryParams {
pageNo: number
pageSize: number
accountId?: number
permanent: boolean
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: undefined, accountId: undefined,
permanent: true permanent: true
}) })
const fileList = ref([]) const fileList = ref<UploadUserFile[]>([])
const uploadData = reactive({
interface UploadData {
type: MatertialType
title: string
introduction: string
}
const uploadData: UploadData = reactive({
type: 'image', type: 'image',
title: '', title: '',
introduction: '' introduction: ''
@ -278,33 +319,16 @@ const uploadData = reactive({
// === === // === ===
const dialogVideoVisible = ref(false) const dialogVideoVisible = ref(false)
const addMaterialLoading = ref(false) const addMaterialLoading = ref(false)
const uploadRules = reactive({
//
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})
/** 侦听公众号变化 **/ /** 侦听公众号变化 **/
const accountChange = (accountId) => { const accountChange = (accountId: number | undefined) => {
setAccountId(accountId) queryParams.accountId = accountId
getList() getList()
} }
// ======================== ======================== // ======================== ========================
/** 设置账号编号 */
const setAccountId = (accountId) => {
queryParams.accountId = accountId
uploadData.accountId = accountId
}
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
//
if (!queryParams.accountId) {
message.error('未选中公众号,无法查询草稿箱')
return false
}
loading.value = true loading.value = true
try { try {
const data = await MpMaterialApi.getMaterialPage({ const data = await MpMaterialApi.getMaterialPage({
@ -321,16 +345,12 @@ const getList = async () => {
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
queryParams.pageNo = 1 queryParams.pageNo = 1
//
if (queryParams.accountId) {
setAccountId(queryParams.accountId)
}
getList() getList()
} }
const handleTabChange = (tabName) => { const handleTabChange = (tabName: TabPaneName) => {
// type // type
uploadData.type = tabName uploadData.type = tabName as MatertialType
// tab // tab
list.value = [] list.value = []
@ -341,15 +361,15 @@ const handleTabChange = (tabName) => {
} }
// ======================== ======================== // ======================== ========================
const beforeImageUpload = (file) => { const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes( const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
file.type rawFile.type
) )
if (!isType) { if (!isType) {
message.error('上传图片格式不对!') message.error('上传图片格式不对!')
return false return false
} }
const isLt = file.size / 1024 / 1024 < 2 const isLt = rawFile.size / 1024 / 1024 < 2
if (!isLt) { if (!isLt) {
message.error('上传图片大小不能超过 2M!') message.error('上传图片大小不能超过 2M!')
return false return false
@ -358,9 +378,9 @@ const beforeImageUpload = (file) => {
return true return true
} }
const beforeVoiceUpload = (file) => { const beforeVoiceUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type) const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
const isLt = file.size / 1024 / 1024 < 2 const isLt = rawFile.size / 1024 / 1024 < 2
if (!isType) { if (!isType) {
message.error('上传语音格式不对!') message.error('上传语音格式不对!')
return false return false
@ -373,14 +393,14 @@ const beforeVoiceUpload = (file) => {
return true return true
} }
const beforeVideoUpload = (file) => { const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
const isType = file.type === 'video/mp4' const isType = rawFile.type === 'video/mp4'
if (!isType) { if (!isType) {
message.error('上传视频格式不对!') message.error('上传视频格式不对!')
return false return false
} }
const isLt = file.size / 1024 / 1024 < 10 const isLt = rawFile.size / 1024 / 1024 < 10
if (!isLt) { if (!isLt) {
message.error('上传视频大小不能超过 10M!') message.error('上传视频大小不能超过 10M!')
return false return false
@ -390,7 +410,7 @@ const beforeVideoUpload = (file) => {
return true return true
} }
const handleUploadSuccess = (response, file, fileList) => { const handleUploadSuccess: UploadProps['onSuccess'] = (response: any) => {
loading.value = false loading.value = false
addMaterialLoading.value = false addMaterialLoading.value = false
if (response.code !== 0) { if (response.code !== 0) {
@ -409,17 +429,17 @@ const handleUploadSuccess = (response, file, fileList) => {
} }
// //
const handleDownload = (row) => { const handleDownload = (row: any) => {
window.open(row.url, '_blank') window.open(row.url, '_blank')
} }
// video // video
const submitVideo = () => { const submitVideo = () => {
uploadFormRef.value.validate((valid) => { uploadFormRef.value?.validate((valid) => {
if (!valid) { if (!valid) {
return false return false
} }
uploadVideoRef.value.submit() uploadVideoRef.value?.submit()
}) })
} }
@ -443,7 +463,7 @@ const resetVideo = () => {
} }
// ======================== ======================== // ======================== ========================
const handleDelete = async (item) => { const handleDelete = async (item: any) => {
await message.confirm('此操作将永久删除该文件, 是否继续?') await message.confirm('此操作将永久删除该文件, 是否继续?')
await MpMaterialApi.deletePermanentMaterial(item.id) await MpMaterialApi.deletePermanentMaterial(item.id)
message.alertSuccess('删除成功') message.alertSuccess('删除成功')
@ -500,6 +520,4 @@ p {
column-count: 1; column-count: 1;
} }
} }
/*瀑布流样式*/
</style> </style>