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>
<!-- 搜索工作栏 -->
<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>
@ -13,7 +20,7 @@
</template>
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
<el-upload
:action="actionUrl"
:action="uploadUrl"
:headers="headers"
multiple
:limit="1"
@ -36,7 +43,7 @@
<img class="material-img" :src="item.url" />
<div class="item-name">{{ item.name }}</div>
</a>
<el-row class="ope-row" justify="center">
<el-row justify="center">
<el-button
type="danger"
circle
@ -64,7 +71,7 @@
</template>
<div class="add_but" v-hasPermi="['mp:material:upload-permanent']">
<el-upload
:action="actionUrl"
:action="uploadUrl"
:headers="headers"
multiple
:limit="1"
@ -81,6 +88,8 @@
</template>
</el-upload>
</div>
<!-- 列表 -->
<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="name" />
@ -142,7 +151,7 @@
v-loading="addMaterialLoading"
>
<el-upload
:action="actionUrl"
:action="uploadUrl"
:headers="headers"
multiple
:limit="1"
@ -181,11 +190,14 @@
</el-row>
</el-form>
<template #footer>
<!-- <span class="dialog-footer"> -->
<el-button @click="cancelVideo"> </el-button>
<el-button type="primary" @click="submitVideo"> </el-button>
<!-- </span> -->
</template>
</el-dialog>
<!-- 列表 -->
<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="name" />
@ -236,24 +248,41 @@
</el-tabs>
</ContentWrap>
</template>
<script setup name="MpMaterial">
<script lang="ts" setup name="MpMaterial">
import WxVoicePlayer from '@/views/mp/components/wx-voice-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 authUtil from '@/utils/auth'
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 BASE_URL = import.meta.env.VITE_BASE_URL
const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
const uploadFormRef = ref<FormInstance>()
const uploadVideoRef = ref<UploadInstance>()
const uploadFormRef = ref()
const uploadVideoRef = ref()
const uploadRules: FormRules = {
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)
//
@ -261,15 +290,27 @@ const total = ref(0)
//
const list = ref([])
//
const queryParams = reactive({
interface QueryParams {
pageNo: number
pageSize: number
accountId?: number
permanent: boolean
}
const queryParams: QueryParams = reactive({
pageNo: 1,
pageSize: 10,
accountId: undefined,
permanent: true
})
const fileList = ref([])
const uploadData = reactive({
const fileList = ref<UploadUserFile[]>([])
interface UploadData {
type: MatertialType
title: string
introduction: string
}
const uploadData: UploadData = reactive({
type: 'image',
title: '',
introduction: ''
@ -278,33 +319,16 @@ const uploadData = reactive({
// === ===
const dialogVideoVisible = ref(false)
const addMaterialLoading = ref(false)
const uploadRules = reactive({
//
title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})
/** 侦听公众号变化 **/
const accountChange = (accountId) => {
setAccountId(accountId)
const accountChange = (accountId: number | undefined) => {
queryParams.accountId = accountId
getList()
}
// ======================== ========================
/** 设置账号编号 */
const setAccountId = (accountId) => {
queryParams.accountId = accountId
uploadData.accountId = accountId
}
/** 查询列表 */
const getList = async () => {
//
if (!queryParams.accountId) {
message.error('未选中公众号,无法查询草稿箱')
return false
}
loading.value = true
try {
const data = await MpMaterialApi.getMaterialPage({
@ -321,16 +345,12 @@ const getList = async () => {
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
//
if (queryParams.accountId) {
setAccountId(queryParams.accountId)
}
getList()
}
const handleTabChange = (tabName) => {
const handleTabChange = (tabName: TabPaneName) => {
// type
uploadData.type = tabName
uploadData.type = tabName as MatertialType
// tab
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(
file.type
rawFile.type
)
if (!isType) {
message.error('上传图片格式不对!')
return false
}
const isLt = file.size / 1024 / 1024 < 2
const isLt = rawFile.size / 1024 / 1024 < 2
if (!isLt) {
message.error('上传图片大小不能超过 2M!')
return false
@ -358,9 +378,9 @@ const beforeImageUpload = (file) => {
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 isLt = file.size / 1024 / 1024 < 2
const isLt = rawFile.size / 1024 / 1024 < 2
if (!isType) {
message.error('上传语音格式不对!')
return false
@ -373,14 +393,14 @@ const beforeVoiceUpload = (file) => {
return true
}
const beforeVideoUpload = (file) => {
const isType = file.type === 'video/mp4'
const beforeVideoUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
const isType = rawFile.type === 'video/mp4'
if (!isType) {
message.error('上传视频格式不对!')
return false
}
const isLt = file.size / 1024 / 1024 < 10
const isLt = rawFile.size / 1024 / 1024 < 10
if (!isLt) {
message.error('上传视频大小不能超过 10M!')
return false
@ -390,7 +410,7 @@ const beforeVideoUpload = (file) => {
return true
}
const handleUploadSuccess = (response, file, fileList) => {
const handleUploadSuccess: UploadProps['onSuccess'] = (response: any) => {
loading.value = false
addMaterialLoading.value = false
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')
}
// video
const submitVideo = () => {
uploadFormRef.value.validate((valid) => {
uploadFormRef.value?.validate((valid) => {
if (!valid) {
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 MpMaterialApi.deletePermanentMaterial(item.id)
message.alertSuccess('删除成功')
@ -500,6 +520,4 @@ p {
column-count: 1;
}
}
/*瀑布流样式*/
</style>