fix: 修复WxReply、WxMaterialSelect组件bug

This commit is contained in:
dhb52 2023-04-08 10:13:22 +08:00
parent cf68b1e91d
commit 42a9715ff2
2 changed files with 139 additions and 134 deletions

View File

@ -5,127 +5,130 @@
移除 avue 组件使用 ElementUI 原生组件
-->
<template>
<!-- 类型图片 -->
<div v-if="objData.type === 'image'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<img class="material-img" :src="item.url" />
<p class="item-name">{{ item.name }}</p>
<el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)"
>选择
<i class="el-icon-circle-check el-icon--right"></i>
</el-button>
</el-row>
</div>
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 类型语音 -->
<div v-else-if="objData.type === 'voice'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="语音" align="center">
<template #default="scope">
<wx-voice-player :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
>选择
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getPage"
/>
</div>
<div v-else-if="objData.type === 'video'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="视频" align="center">
<template #default="scope">
<wx-video-player :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
>选择
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<div v-else-if="objData.type === 'news'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<div v-if="item.content && item.content.newsItem">
<wx-news :articles="item.content.newsItem" />
<div class="pb-30px">
<!-- 类型image -->
<div v-if="objData.type === 'image'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<img class="material-img" :src="item.url" />
<p class="item-name">{{ item.name }}</p>
<el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)">
选择<i class="el-icon-circle-check el-icon--right"></i>
<el-button type="success" @click="selectMaterialFun(item)"
>选择 <Icon icon="ep:circle-check" />
</el-button>
</el-row>
</div>
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 类型voice -->
<div v-else-if="objData.type === 'voice'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="语音" align="center">
<template #default="scope">
<WxVoicePlayer :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" @click="selectMaterialFun(scope.row)"
>选择<Icon icon="ep:plus" />
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getPage"
/>
</div>
<!-- 类型video -->
<div v-else-if="objData.type === 'video'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="视频" align="center">
<template #default="scope">
<WxVideoPlayer :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" @click="selectMaterialFun(scope.row)"
>选择<Icon icon="akar-icons:circle-plus" />
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 类型news -->
<div v-else-if="objData.type === 'news'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<div v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)">
选择<Icon icon="ep:circle-check" />
</el-button>
</el-row>
</div>
</div>
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
</template>
@ -173,7 +176,7 @@ export default defineComponent({
const newsTypeRef = ref(props.newsType)
const selectMaterialFun = (item) => {
ctx.emit('selectMaterial', item)
ctx.emit('select-material', item)
}
/** 搜索按钮操作 */
const handleQuery = () => {
@ -203,9 +206,10 @@ export default defineComponent({
total.value = data.total
loading.value = false
}
const getFreePublishPageFun = async () => {
let data = await getFreePublishPage(queryParams)
data.list.foreach((item) => {
data.list.forEach((item) => {
const newsItem = item.content.newsItem
newsItem.forEach((article) => {
article.picUrl = article.thumbUrl
@ -232,6 +236,7 @@ export default defineComponent({
onMounted(async () => {
getPage()
})
return {
handleQuery,
dateFormatter,

View File

@ -37,7 +37,7 @@
<div class="select-item" v-if="objDataRef.url">
<img class="material-img" :src="objDataRef.url" />
<p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
<el-row class="ope-row">
<el-row class="ope-row" justify="center">
<el-button type="danger" circle @click="deleteObj">
<icon icon="ep:delete" />
</el-button>
@ -52,7 +52,7 @@
<icon icon="ep:circle-check" />
</el-button>
<el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
<wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" />
<WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
</el-dialog>
</el-col>
<!-- 文件上传 -->
@ -91,20 +91,20 @@
<div class="select-item2" v-if="objDataRef.url">
<p class="item-name">{{ objDataRef.name }}</p>
<div class="item-infos">
<wx-voice-player :url="objDataRef.url" />
<WxVoicePlayer :url="objDataRef.url" />
</div>
<el-row class="ope-row">
<el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
<el-row class="ope-row" justify="center">
<el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
</el-row>
</div>
<el-row v-else style="text-align: center">
<!-- 选择素材 -->
<el-col :span="12" class="col-select">
<el-button type="success" @click="openMaterial">
素材库选择<i class="el-icon-circle-check el-icon--right"></i>
素材库选择<Icon icon="ep:circle-check" />
</el-button>
<el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
<WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
</el-dialog>
</el-col>
<!-- 文件上传 -->
@ -151,7 +151,7 @@
@input="inputContent"
/>
<div style="text-align: center">
<wx-video-player v-if="objDataRef.url" :url="objDataRef.url" />
<WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
</div>
<el-col>
<el-row style="text-align: center" align="middle">
@ -162,7 +162,7 @@
<icon icon="ep:circle-check" />
</el-button>
<el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
<wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" />
<WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
</el-dialog>
</el-col>
<!-- 文件上传 -->
@ -196,8 +196,8 @@
</el-row>
</template>
<el-row>
<div class="select-item" v-if="objDataRef.articles.size > 0">
<wx-news :articles="objDataRef.articles" />
<div class="select-item" v-if="objDataRef.articles?.length > 0">
<WxNews :articles="objDataRef.articles" />
<el-col class="ope-row">
<el-button type="danger" circle @click="deleteObj">
<icon icon="ep:delete" />
@ -216,9 +216,9 @@
</el-row>
</el-col>
<el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
<wx-material-select
<WxMaterialSelect
:objData="objDataRef"
@selectMaterial="selectMaterial"
@select-material="selectMaterial"
:newsType="newsType"
/>
</el-dialog>
@ -268,9 +268,9 @@
</el-col>
</el-row>
<el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
<wx-material-select
<WxMaterialSelect
:objData="{ type: 'image', accountId: objDataRef.accountId }"
@selectMaterial="selectMaterial"
@select-material="selectMaterial"
/>
</el-dialog>
</el-col>
@ -482,7 +482,7 @@ export default defineComponent({
// tempObjItem
let tempObjItem = {
type: '',
articles: '',
articles: [],
thumbMediaId: '',
thumbMediaUrl: '',
introduction: '',
@ -560,7 +560,7 @@ export default defineComponent({
}
const deleteObj = () => {
if (objDataRef.type === 'news') {
objDataRef.articles = ''
objDataRef.articles = []
} else if (objDataRef.type === 'image') {
objDataRef.mediaId = null
objDataRef.url = null