refactor: mp/draft拆分组件

(cherry picked from commit b5fb700e4e)
This commit is contained in:
dhb52 2023-04-16 22:30:00 +08:00 committed by shizhong
parent cf01b62f10
commit 90990f48a9
6 changed files with 704 additions and 634 deletions

View File

@ -0,0 +1,183 @@
<template>
<div>
<p>封面:</p>
<div class="thumb-div">
<el-image
v-if="newsItem.thumbUrl"
style="width: 300px; max-height: 300px"
:src="newsItem.thumbUrl"
fit="contain"
/>
<Icon
v-else
icon="ep:plus"
class="avatar-uploader-icon"
:class="isFirst ? 'avatar' : 'avatar1'"
/>
<div class="thumb-but">
<el-upload
:action="UPLOAD_URL"
:headers="HEADERS"
multiple
:limit="1"
:file-list="fileList"
:data="uploadData"
:before-upload="onBeforeUpload"
:on-error="onUploadError"
:on-success="onUploadSuccess"
>
<template #trigger>
<el-button size="small" type="primary" :loading="isUploading" disabled="isUploading">
{{ isUploading ? '正在上传' : '本地上传' }}
</el-button>
</template>
<el-button
size="small"
type="primary"
@click="showImageDialog = true"
style="margin-left: 5px"
>
素材库选择
</el-button>
<template #tip>
<div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式大小不超过 2M</div>
</template>
</el-upload>
</div>
<el-dialog
title="选择图片"
v-model="showImageDialog"
width="80%"
append-to-body
destroy-on-close
>
<WxMaterialSelect
:objData="{ type: 'image', accountId: accountId }"
@select-material="onMaterialSelected"
/>
</el-dialog>
</div>
</div>
</template>
<script setup lang="ts">
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
import { getAccessToken } from '@/utils/auth'
import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
import { NewsItem } from './types'
const message = useMessage()
const UPLOAD_URL = 'http://localhost:8000/upload/' //import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' //
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } //
const props = defineProps<{
modelValue: NewsItem
isFirst: boolean
}>()
const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem)
}>()
const newsItem = computed<NewsItem>({
get() {
return props.modelValue
},
set(val) {
emit('update:modelValue', val)
}
})
const accountId = inject<number>('accountId')
const showImageDialog = ref(false)
const fileList = ref<UploadFiles>([])
interface UploadData {
type: 'image' | 'video' | 'audio'
accountId?: number
}
const uploadData: UploadData = reactive({
type: 'image',
accountId: accountId
})
const isUploading = ref(false)
/** 素材选择完成事件*/
const onMaterialSelected = (item: any) => {
showImageDialog.value = false
newsItem.value.thumbMediaId = item.mediaId
newsItem.value.thumbUrl = item.url
}
// ======================== ========================
const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
rawFile.type
)
if (!isType) {
message.error('上传图片格式不对!')
return false
}
if (rawFile.size / 1024 / 1024 > 2) {
message.error('上传图片大小不能超过 2M!')
return false
}
//
return true
}
const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
if (res.code !== 0) {
message.error('上传出错:' + res.msg)
return false
}
//
fileList.value = []
// 稿
newsItem.value.thumbMediaId = res.data.mediaId
newsItem.value.thumbUrl = res.data.url
}
const onUploadError = (err: Error) => {
message.error('上传失败: ' + err.message)
}
</script>
<style lang="scss" scoped>
.el-upload__tip {
margin-left: 5px;
}
.thumb-div {
display: inline-block;
width: 100%;
text-align: center;
.avatar-uploader-icon {
width: 120px;
height: 120px;
font-size: 28px;
line-height: 120px;
color: #8c939d;
text-align: center;
border: 1px solid #d9d9d9;
}
.avatar {
width: 230px;
height: 120px;
}
.avatar1 {
width: 120px;
height: 120px;
}
.thumb-but {
margin: 5px;
}
}
</style>

View File

@ -0,0 +1,87 @@
<template>
<div class="waterfall" v-loading="props.loading">
<template v-for="item in props.list" :key="item.articleId">
<div class="waterfall-item" v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<!-- 操作按钮 -->
<el-row>
<el-button
type="success"
circle
@click="emit('publish', item)"
v-hasPermi="['mp:free-publish:submit']"
>
<Icon icon="fa:upload" />
</el-button>
<el-button
type="primary"
circle
@click="emit('update', item)"
v-hasPermi="['mp:draft:update']"
>
<Icon icon="ep:edit" />
</el-button>
<el-button
type="danger"
circle
@click="emit('delete', item)"
v-hasPermi="['mp:draft:delete']"
>
<Icon icon="ep:delete" />
</el-button>
</el-row>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import WxNews from '@/views/mp/components/wx-news/main.vue'
import { Article } from './types'
const props = defineProps<{
list: Article[]
loading: boolean
}>()
const emit = defineEmits<{
(e: 'publish', v: Article)
(e: 'update', v: Article)
(e: 'delete', v: Article)
}>()
</script>
<style lang="scss" scoped>
.waterfall {
width: 100%;
column-gap: 10px;
column-count: 5;
margin: 0 auto;
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
}
@media (min-width: 992px) and (max-width: 1300px) {
.waterfall {
column-count: 3;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.waterfall {
column-count: 2;
}
}
@media (max-width: 767px) {
.waterfall {
column-count: 1;
}
}
</style>

View File

@ -0,0 +1,302 @@
<template>
<el-container>
<el-aside width="40%">
<div class="select-item">
<div v-for="(news, index) in newsList" :key="index">
<div
class="news-main father"
v-if="index === 0"
:class="{ activeAddNews: activeNewsIndex === index }"
@click="activeNewsIndex = index"
>
<div class="news-content">
<img class="material-img" :src="news.thumbUrl" />
<div class="news-content-title">{{ news.title }}</div>
</div>
<div class="child" v-if="newsList.length > 1">
<el-button type="info" circle size="small" @click="() => moveDownNews(index)">
<Icon icon="ep:arrow-down-bold" />
</el-button>
<el-button
v-if="isCreating"
type="danger"
circle
size="small"
@click="() => removeNews(index)"
>
<Icon icon="ep:delete" />
</el-button>
</div>
</div>
<div
class="news-main-item father"
v-if="index > 0"
:class="{ activeAddNews: activeNewsIndex === index }"
@click="activeNewsIndex = index"
>
<div class="news-content-item">
<div class="news-content-item-title">{{ news.title }}</div>
<div class="news-content-item-img">
<img class="material-img" :src="news.thumbUrl" width="100%" />
</div>
</div>
<div class="child">
<el-button
v-if="newsList.length > index + 1"
circle
type="info"
size="small"
@click="() => moveDownNews(index)"
>
<Icon icon="ep:arrow-down-bold" />
</el-button>
<el-button
v-if="index > 0"
type="info"
circle
size="small"
@click="() => moveUpNews(index)"
>
<Icon icon="ep:arrow-up-bold" />
</el-button>
<el-button
v-if="isCreating"
type="danger"
size="small"
circle
@click="() => removeNews(index)"
>
<Icon icon="ep:delete" />
</el-button>
</div>
</div>
</div>
<el-row justify="center" class="ope-row">
<el-button
type="primary"
circle
@click="plusNews"
v-if="newsList.length < 8 && isCreating"
>
<Icon icon="ep:plus" />
</el-button>
</el-row>
</div>
</el-aside>
<el-main>
<div v-if="newsList.length > 0">
<!-- 标题作者原文地址 -->
<el-row :gutter="20">
<el-input v-model="activeNewsItem.title" placeholder="请输入标题(必填)" />
<el-input
v-model="activeNewsItem.author"
placeholder="请输入作者"
style="margin-top: 5px"
/>
<el-input
v-model="activeNewsItem.contentSourceUrl"
placeholder="请输入原文地址"
style="margin-top: 5px"
/>
</el-row>
<!-- 封面和摘要 -->
<el-row :gutter="20">
<el-col :span="12">
<CoverSelect v-model="activeNewsItem" :is-first="activeNewsIndex === 0" />
</el-col>
<el-col :span="12">
<p>摘要:</p>
<el-input
:rows="8"
type="textarea"
v-model="activeNewsItem.digest"
placeholder="请输入摘要"
class="digest"
maxlength="120"
/>
</el-col>
</el-row>
<!--富文本编辑器组件-->
<el-row>
<Editor v-model="activeNewsItem.content" :editor-config="editorConfig" />
</el-row>
</div>
</el-main>
</el-container>
</template>
<script setup lang="ts">
import { Editor } from '@/components/Editor'
import { createEditorConfig } from '../editor-config'
import CoverSelect from './CoverSelect.vue'
import { type NewsItem, createEmptyNewsItem } from './types'
const message = useMessage()
const props = defineProps<{
isCreating: boolean
modelValue: NewsItem[] | null
}>()
const accountId = inject<number>('accountId')
// ========== ==========
const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' //
const editorConfig = createEditorConfig(UPLOAD_URL, accountId)
// v-model=newsList
const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem[])
}>()
const newsList = computed<NewsItem[]>({
get() {
return props.modelValue === null ? [createEmptyNewsItem()] : props.modelValue
},
set(val) {
emit('update:modelValue', val)
}
})
const activeNewsIndex = ref(0)
const activeNewsItem = computed<NewsItem>(() => newsList.value[activeNewsIndex.value])
//
const moveDownNews = (index: number) => {
const temp = newsList.value[index]
newsList.value[index] = newsList.value[index + 1]
newsList.value[index + 1] = temp
activeNewsIndex.value = index + 1
}
//
const moveUpNews = (index: number) => {
const temp = newsList.value[index]
newsList.value[index] = newsList.value[index - 1]
newsList.value[index - 1] = temp
activeNewsIndex.value = index - 1
}
// index
const removeNews = async (index: number) => {
try {
await message.confirm('确定删除该图文吗?')
newsList.value.splice(index, 1)
if (activeNewsIndex.value === index) {
activeNewsIndex.value = 0
}
} catch {}
}
//
const plusNews = () => {
newsList.value.push(createEmptyNewsItem())
activeNewsIndex.value = newsList.value.length - 1
}
</script>
<style lang="scss" scoped>
.ope-row {
padding-top: 5px;
margin-top: 5px;
text-align: center;
border-top: 1px solid #eaeaea;
}
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.digest {
display: inline-block;
width: 100%;
vertical-align: top;
}
/* 新增图文 */
.news-main {
width: 100%;
height: 120px;
margin: auto;
background-color: #fff;
}
.news-content {
position: relative;
width: 100%;
height: 120px;
background-color: #acadae;
}
.news-content-title {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 98%;
height: 25px;
padding: 1%;
overflow: hidden;
font-size: 15px;
color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
background-color: black;
opacity: 0.65;
}
.news-main-item {
width: 100%;
padding: 5px 0;
margin: auto;
background-color: #fff;
border-top: 1px solid #eaeaea;
}
.news-content-item {
position: relative;
margin-left: -3px;
}
.news-content-item-title {
display: inline-block;
width: 70%;
font-size: 12px;
}
.news-content-item-img {
display: inline-block;
width: 25%;
background-color: #acadae;
}
.select-item {
width: 60%;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #eaeaea;
.activeAddNews {
border: 5px solid #2bb673;
}
}
.father .child {
position: relative;
bottom: 25px;
display: none;
text-align: center;
}
.father:hover .child {
display: block;
}
.material-img {
width: 100%;
height: 100%;
}
</style>

View File

@ -0,0 +1,7 @@
import type { Article, NewsItem, NewsItemList } from './types'
import { createEmptyNewsItem } from './types'
import DraftTable from './DraftTable.vue'
import NewsForm from './NewsForm.vue'
export { DraftTable, NewsForm, createEmptyNewsItem }
export type { Article, NewsItem, NewsItemList }

View File

@ -0,0 +1,40 @@
interface NewsItem {
title: string
thumbMediaId: string
author: string
digest: string
showCoverPic: string
content: string
contentSourceUrl: string
needOpenComment: string
onlyFansCanComment: string
thumbUrl: string
}
interface NewsItemList {
newsItem: NewsItem[]
}
interface Article {
mediaId: string
content: NewsItemList
updateTime: number
}
const createEmptyNewsItem = (): NewsItem => {
return {
title: '',
thumbMediaId: '',
author: '',
digest: '',
showCoverPic: '',
content: '',
contentSourceUrl: '',
needOpenComment: '',
onlyFansCanComment: '',
thumbUrl: ''
}
}
export type { Article, NewsItem, NewsItemList }
export { createEmptyNewsItem }

View File

@ -14,7 +14,13 @@
<WxAccountSelect @change="onAccountChanged" />
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="handleAdd" v-hasPermi="['mp:draft:create']">
<el-button
type="primary"
plain
@click="handleAdd"
v-hasPermi="['mp:draft:create']"
:disabled="accountId === 0"
>
<Icon icon="ep:plus" />新增
</el-button>
</el-form-item>
@ -23,40 +29,13 @@
<!-- 列表 -->
<ContentWrap>
<div class="waterfall" v-loading="loading">
<template v-for="item in list" :key="item.articleId">
<div class="waterfall-item" v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<!-- 操作按钮 -->
<el-row class="ope-row">
<el-button
type="success"
circle
@click="handlePublish(item)"
v-hasPermi="['mp:free-publish:submit']"
>
<Icon icon="fa:upload" />
</el-button>
<el-button
type="primary"
circle
@click="handleUpdate(item)"
v-hasPermi="['mp:draft:update']"
>
<Icon icon="ep:edit" />
</el-button>
<el-button
type="danger"
circle
@click="handleDelete(item)"
v-hasPermi="['mp:draft:delete']"
>
<Icon icon="ep:delete" />
</el-button>
</el-row>
</div>
</template>
</div>
<DraftTable
:loading="loading"
:list="list"
@update="onUpdate"
@delete="onDelete"
@publish="onPublish"
/>
<!-- 分页记录 -->
<Pagination
:total="total"
@ -66,287 +45,101 @@
/>
</ContentWrap>
<div class="app-container">
<!-- 添加或修改草稿对话框 -->
<el-dialog
:title="operateMaterial === 'add' ? '新建图文' : '修改图文'"
:title="isCreating ? '新建图文' : '修改图文'"
width="80%"
v-model="dialogNewsVisible"
:before-close="dialogNewsClose"
v-model="showDialog"
:before-close="onBeforeDialogClose"
destroy-on-close
>
<el-container>
<el-aside width="40%">
<div class="select-item">
<div v-for="(news, index) in articlesAdd" :key="news.id">
<div
class="news-main father"
v-if="index === 0"
:class="{ activeAddNews: isActiveAddNews === index }"
@click="activeNews(index)"
>
<div class="news-content">
<img class="material-img" v-if="news.thumbUrl" :src="news.thumbUrl" />
<div class="news-content-title">{{ news.title }}</div>
</div>
<div class="child" v-if="articlesAdd.length > 1">
<el-button size="small" @click="downNews(index)"
><Icon icon="ep:sort-down" />下移</el-button
>
<el-button v-if="operateMaterial === 'add'" size="small" @click="minusNews(index)"
><Icon icon="ep:delete" />删除
</el-button>
</div>
</div>
<div
class="news-main-item father"
v-if="index > 0"
:class="{ activeAddNews: isActiveAddNews === index }"
@click="activeNews(index)"
>
<div class="news-content-item">
<div class="news-content-item-title">{{ news.title }}</div>
<div class="news-content-item-img">
<img
class="material-img"
v-if="news.thumbUrl"
:src="news.thumbUrl"
width="100%"
/>
</div>
</div>
<div class="child">
<el-button
v-if="articlesAdd.length > index + 1"
size="small"
@click="downNews(index)"
><Icon icon="ep:sort-down" />下移
</el-button>
<el-button size="small" @click="upNews(index)"
><Icon icon="ep:sort-up" />上移</el-button
>
<el-button
v-if="operateMaterial === 'add'"
type="danger"
size="small"
@click="minusNews(index)"
><Icon icon="ep:delete" />删除
</el-button>
</div>
</div>
</div>
<el-row justify="center" class="ope-row">
<el-button
type="primary"
circle
@click="plusNews"
v-if="articlesAdd.length < 8 && operateMaterial === 'add'"
>
<Icon icon="ep:plus" />
</el-button>
</el-row>
</div>
</el-aside>
<el-main>
<div class="" v-loading="addMaterialLoading" v-if="articlesAdd.length > 0">
<!-- 标题作者原文地址 -->
<el-row :gutter="20">
<el-input
v-model="articlesAdd[isActiveAddNews].title"
placeholder="请输入标题(必填)"
/>
<el-input
v-model="articlesAdd[isActiveAddNews].author"
placeholder="请输入作者"
style="margin-top: 5px"
/>
<el-input
v-model="articlesAdd[isActiveAddNews].contentSourceUrl"
placeholder="请输入原文地址"
style="margin-top: 5px"
/>
</el-row>
<!-- 封面和摘要 -->
<el-row :gutter="20">
<el-col :span="12">
<p>封面:</p>
<div class="thumb-div">
<el-image
v-if="articlesAdd[isActiveAddNews].thumbUrl"
style="width: 300px; max-height: 300px"
:src="articlesAdd[isActiveAddNews].thumbUrl"
fit="contain"
/>
<Icon
v-else
icon="ep:plus"
class="avatar-uploader-icon"
:class="isActiveAddNews === 0 ? 'avatar' : 'avatar1'"
/>
<div class="thumb-but">
<el-upload
:action="uploadUrl"
:headers="headers"
multiple
:limit="1"
:file-list="fileList"
:data="uploadData"
:before-upload="beforeThumbImageUpload"
:on-success="handleUploadSuccess"
>
<template #trigger>
<el-button size="small" type="primary">本地上传</el-button>
</template>
<el-button
size="small"
type="primary"
@click="openMaterial"
style="margin-left: 5px"
>素材库选择</el-button
>
<template #tip>
<div class="el-upload__tip"
>支持 bmp/png/jpeg/jpg/gif 格式大小不超过 2M</div
>
</template>
</el-upload>
</div>
<el-dialog
title="选择图片"
v-model="dialogImageVisible"
width="80%"
append-to-body
>
<WxMaterialSelect
ref="materialSelectRef"
:objData="{ type: 'image', accountId: queryParams.accountId }"
@select-material="selectMaterial"
/>
</el-dialog>
</div>
</el-col>
<el-col :span="12">
<p>摘要:</p>
<el-input
:rows="8"
type="textarea"
v-model="articlesAdd[isActiveAddNews].digest"
placeholder="请输入摘要"
class="digest"
maxlength="120"
/>
</el-col>
</el-row>
<!--富文本编辑器组件-->
<el-row>
<Editor
v-model="articlesAdd[isActiveAddNews].content"
:editor-config="editorConfig"
/>
</el-row>
</div>
</el-main>
</el-container>
<NewsForm v-model="newsList" v-loading="isSubmitting" :is-creating="isCreating" />
<template #footer>
<el-button @click="dialogNewsVisible = false"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="showDialog = false"> </el-button>
<el-button type="primary" @click="onSubmitNewsItem"> </el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="MpDraft">
import { Editor } from '@/components/Editor'
import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
import { getAccessToken } from '@/utils/auth'
import * as MpDraftApi from '@/api/mp/draft'
import * as MpFreePublishApi from '@/api/mp/freePublish'
import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
import { createEditorConfig } from './editor-config'
import {
type Article,
type NewsItem,
NewsForm,
DraftTable,
createEmptyNewsItem
} from './components/'
// import drafts from './mock' // API
import { IEditorConfig } from '@wangeditor/editor'
const message = useMessage() //
const accountId = ref(0)
provide('accountId', accountId)
const loading = ref(true) //
const list = ref<any[]>([]) //
const total = ref(0) //
interface QueryParams {
pageNo: number
pageSize: number
accountId?: number
accountId: number
}
const queryParams: QueryParams = reactive({
pageNo: 1,
pageSize: 10,
accountId: undefined
accountId: accountId.value
})
// ========== ==========
const BASE_URL = import.meta.env.VITE_BASE_URL
const uploadUrl = BASE_URL + '/admin-api/mp/material/upload-permanent' //
const headers = { Authorization: 'Bearer ' + getAccessToken() } //
const materialSelectRef = ref<InstanceType<typeof WxMaterialSelect> | null>(null)
const fileList = ref<UploadFiles>([])
interface UploadData {
type: 'image' | 'video' | 'audio'
accountId?: number
accountId: number
}
const uploadData: UploadData = reactive({
type: 'image',
accountId: 1
accountId: accountId.value
})
// ========== 稿 or ==========
interface Article {
title: string
thumbMediaId: string
author: string
digest: string
showCoverPic: string
content: string
contentSourceUrl: string
needOpenComment: string
onlyFansCanComment: string
thumbUrl: string
}
const dialogNewsVisible = ref(false)
const addMaterialLoading = ref(false) // 稿 loading
const articlesAdd = ref<Article[]>([])
const isActiveAddNews = ref(0)
const dialogImageVisible = ref(false)
const operateMaterial = ref<'add' | 'edit'>('add')
const articlesMediaId = ref('')
const showDialog = ref(false)
const newsList = ref<NewsItem[]>([])
const mediaId = ref('')
const isCreating = ref(true)
const isSubmitting = ref(false)
/** 侦听公众号变化 **/
const onAccountChanged = (id?: number) => {
const onAccountChanged = (id: number) => {
setAccountId(id)
getList()
}
// ======================== ========================
/** 设置账号编号 */
const setAccountId = (id?: number) => {
queryParams.accountId = id
uploadData.accountId = id
editorConfig.value = createEditorConfig(uploadUrl, queryParams.accountId)
//
const onBeforeDialogClose = async (onDone: () => {}) => {
try {
await message.confirm('修改内容可能还未保存,确定关闭吗?')
onDone()
} catch {}
}
const editorConfig = ref<Partial<IEditorConfig>>({})
// ======================== ========================
/** 设置账号编号 */
const setAccountId = (id: number) => {
queryParams.accountId = id
uploadData.accountId = id
}
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const drafts = await MpDraftApi.getDraftPage(queryParams)
drafts.list.forEach((item) => {
const newsItem = item.content.newsItem
drafts.list.forEach((draft) => {
const newsList = draft.content.newsItem
// thumbUrl picUrl wx-news
newsItem.forEach((article) => {
article.picUrl = article.thumbUrl
newsList.forEach((item) => {
item.picUrl = item.thumbUrl
})
})
list.value = drafts.list
@ -359,163 +152,45 @@ const getList = async () => {
// ======================== /稿 ========================
/** 新增按钮操作 */
const handleAdd = () => {
reset()
//
operateMaterial.value = 'add'
dialogNewsVisible.value = true
isCreating.value = true
newsList.value = [createEmptyNewsItem()]
showDialog.value = true
}
/** 更新按钮操作 */
const handleUpdate = (item: any) => {
reset()
articlesMediaId.value = item.mediaId
articlesAdd.value = JSON.parse(JSON.stringify(item.content.newsItem))
//
operateMaterial.value = 'edit'
dialogNewsVisible.value = true
const onUpdate = (item: Article) => {
mediaId.value = item.mediaId
newsList.value = JSON.parse(JSON.stringify(item.content.newsItem))
isCreating.value = false
showDialog.value = true
}
/** 提交按钮 */
const submitForm = async () => {
addMaterialLoading.value = true
const onSubmitNewsItem = async () => {
isSubmitting.value = true
try {
if (operateMaterial.value === 'add') {
await MpDraftApi.createDraft(queryParams.accountId, articlesAdd.value)
if (isCreating.value) {
await MpDraftApi.createDraft(queryParams.accountId, newsList.value)
message.notifySuccess('新增成功')
} else {
await MpDraftApi.updateDraft(queryParams.accountId, articlesMediaId.value, articlesAdd.value)
await MpDraftApi.updateDraft(queryParams.accountId, mediaId.value, newsList.value)
message.notifySuccess('更新成功')
}
} finally {
dialogNewsVisible.value = false
addMaterialLoading.value = false
showDialog.value = false
isSubmitting.value = false
await getList()
}
}
//
const dialogNewsClose = async (onDone: () => {}) => {
try {
await message.confirm('修改内容可能还未保存,确定关闭吗?')
reset()
onDone()
} catch {}
}
//
const reset = () => {
isActiveAddNews.value = 0
articlesAdd.value = [buildEmptyArticle()]
}
//
const downNews = (index: number) => {
let temp = articlesAdd.value[index]
articlesAdd.value[index] = articlesAdd.value[index + 1]
articlesAdd.value[index + 1] = temp
isActiveAddNews.value = index + 1
}
//
const upNews = (index: number) => {
const temp = articlesAdd.value[index]
articlesAdd.value[index] = articlesAdd.value[index - 1]
articlesAdd.value[index - 1] = temp
isActiveAddNews.value = index - 1
}
// index
const activeNews = (index: number) => {
isActiveAddNews.value = index
}
// index
const minusNews = async (index: number) => {
try {
await message.confirm('确定删除该图文吗?')
articlesAdd.value.splice(index, 1)
if (isActiveAddNews.value === index) {
isActiveAddNews.value = 0
}
} catch {}
}
//
const plusNews = () => {
articlesAdd.value.push(buildEmptyArticle())
isActiveAddNews.value = articlesAdd.value.length - 1
}
// article
const buildEmptyArticle = (): Article => {
return {
title: '',
thumbMediaId: '',
author: '',
digest: '',
showCoverPic: '',
content: '',
contentSourceUrl: '',
needOpenComment: '',
onlyFansCanComment: '',
thumbUrl: ''
}
}
// ======================== ========================
const beforeThumbImageUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
addMaterialLoading.value = true
const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
rawFile.type
)
if (!isType) {
message.error('上传图片格式不对!')
addMaterialLoading.value = false
return false
}
if (rawFile.size / 1024 / 1024 > 2) {
message.error('上传图片大小不能超过 2M!')
addMaterialLoading.value = false
return false
}
//
return true
}
const handleUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
addMaterialLoading.value = false
if (res.code !== 0) {
message.error('上传出错:' + res.msg)
return false
}
//
fileList.value = []
// 稿
articlesAdd.value[isActiveAddNews.value].thumbMediaId = res.data.mediaId
articlesAdd.value[isActiveAddNews.value].thumbUrl = res.data.url
}
// or 稿
const selectMaterial = (item: any) => {
dialogImageVisible.value = false
articlesAdd.value[isActiveAddNews.value].thumbMediaId = item.mediaId
articlesAdd.value[isActiveAddNews.value].thumbUrl = item.url
}
//
const openMaterial = () => {
dialogImageVisible.value = true
}
// ======================== 稿 ========================
const handlePublish = async (item: any) => {
const onPublish = async (item: Article) => {
const accountId = queryParams.accountId
const mediaId = item.mediaId
const content =
'你正在通过发布的方式发表内容。 发布不占用群发次数,一天可多次发布。已发布内容不会推送给用户,也不会展示在公众号主页中。 发布后,你可以前往发表记录获取链接,也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
'你正在通过发布的方式发表内容。 发布不占用群发次数,一天可多次发布。' +
'已发布内容不会推送给用户,也不会展示在公众号主页中。 ' +
'发布后,你可以前往发表记录获取链接,也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
try {
await message.confirm(content)
await MpFreePublishApi.submitFreePublish(accountId, mediaId)
@ -525,7 +200,7 @@ const handlePublish = async (item: any) => {
}
/** 删除按钮操作 */
const handleDelete = async (item: any) => {
const onDelete = async (item: Article) => {
const accountId = queryParams.accountId
const mediaId = item.mediaId
try {
@ -536,234 +211,10 @@ const handleDelete = async (item: any) => {
} catch {}
}
</script>
<style lang="scss" scoped>
.pagination {
float: right;
margin-right: 25px;
}
.add_but {
padding: 10px;
}
.ope-row {
margin-top: 5px;
text-align: center;
border-top: 1px solid #eaeaea;
padding-top: 5px;
}
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.item-name {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.el-upload__tip {
margin-left: 5px;
}
/*新增图文*/
// .left {
// display: inline-block;
// vertical-align: top;
// margin-top: 200px;
// }
// .right {
// display: inline-block;
// width: 100%;
// }
// .avatar-uploader {
// width: 20%;
// display: inline-block;
// }
// .avatar-uploader .el-upload {
// border-radius: 6px;
// cursor: pointer;
// position: relative;
// overflow: hidden;
// text-align: unset !important;
// }
// .avatar-uploader .el-upload:hover {
// border-color: #165dff;
// }
.avatar-uploader-icon {
border: 1px solid #d9d9d9;
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 230px;
height: 120px;
}
.avatar1 {
width: 120px;
height: 120px;
}
.digest {
width: 100%;
display: inline-block;
vertical-align: top;
}
/*新增图文*/
/*瀑布流样式*/
.waterfall {
width: 100%;
column-gap: 10px;
column-count: 5;
margin: 0 auto;
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
@media (min-width: 992px) and (max-width: 1300px) {
.waterfall {
column-count: 3;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.waterfall {
column-count: 2;
}
}
@media (max-width: 767px) {
.waterfall {
column-count: 1;
}
}
/*瀑布流样式*/
.news-main {
background-color: #ffffff;
width: 100%;
margin: auto;
height: 120px;
}
.news-content {
background-color: #acadae;
width: 100%;
height: 120px;
position: relative;
}
.news-content-title {
display: inline-block;
font-size: 15px;
color: #ffffff;
position: absolute;
left: 0px;
bottom: 0px;
background-color: black;
width: 98%;
padding: 1%;
opacity: 0.65;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 25px;
}
.news-main-item {
background-color: #ffffff;
padding: 5px 0px;
border-top: 1px solid #eaeaea;
width: 100%;
margin: auto;
}
.news-content-item {
position: relative;
margin-left: -3px;
}
.news-content-item-title {
display: inline-block;
font-size: 12px;
width: 70%;
}
.news-content-item-img {
display: inline-block;
width: 25%;
background-color: #acadae;
}
.activeAddNews {
border: 5px solid #2bb673;
}
.news-main-plus {
width: 280px;
text-align: center;
margin: auto;
height: 50px;
}
.icon-plus {
margin: 10px;
font-size: 25px;
}
.select-item {
width: 60%;
padding: 10px;
margin: 0 auto 10px auto;
border: 1px solid #eaeaea;
}
.father .child {
display: none;
text-align: center;
position: relative;
bottom: 25px;
}
.father:hover .child {
display: block;
}
.thumb-div {
display: inline-block;
width: 100%;
text-align: center;
}
.thumb-but {
margin: 5px;
}
.material-img {
width: 100%;
height: 100%;
}
</style>