!137 MP模块重构,功能增强

Merge pull request !137 from dhb52/dev
This commit is contained in:
芋道源码 2023-04-25 13:38:22 +00:00 committed by Gitee
commit 0ceddc9c91
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
19 changed files with 286 additions and 306 deletions

View File

@ -1,7 +1,7 @@
import request from '@/config/axios' import request from '@/config/axios'
export interface AccountVO { export interface AccountVO {
id?: number id: number
name: string name: string
} }

View File

@ -103,6 +103,7 @@ import ReplyTable from './components/ReplyTable.vue'
import { MsgType } from './components/types' import { MsgType } from './components/types'
const message = useMessage() // const message = useMessage() //
const accountId = ref(-1) // ID
const msgType = ref<MsgType>(MsgType.Keyword) // const msgType = ref<MsgType>(MsgType.Keyword) //
const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] // const RequestMessageTypes = ['text', 'image', 'voice', 'video', 'shortvideo', 'location', 'link'] //
const loading = ref(true) // const loading = ref(true) //
@ -110,15 +111,10 @@ const total = ref(0) // 总条数
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
const formRef = ref<FormInstance | null>(null) // ref const formRef = ref<FormInstance | null>(null) // ref
// //
interface QueryParams { const queryParams = reactive({
pageNo: number
pageSize: number
accountId: number
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: 0 accountId: accountId
}) })
const dialogTitle = ref('') // const dialogTitle = ref('') //
@ -127,7 +123,7 @@ const replyForm = ref<any>({}) // 表单参数
// //
const reply = ref<Reply>({ const reply = ref<Reply>({
type: ReplyType.Text, type: ReplyType.Text,
accountId: 0 accountId: -1
}) })
// //
const rules = { const rules = {
@ -137,8 +133,9 @@ const rules = {
/** 侦听账号变化 */ /** 侦听账号变化 */
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
queryParams.accountId = id accountId.value = id
reply.value.accountId = id reply.value.accountId = id
queryParams.pageNo = 1
getList() getList()
} }

View File

@ -8,13 +8,14 @@
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
const account: MpAccountApi.AccountVO = reactive({ const account: MpAccountApi.AccountVO = reactive({
id: undefined, id: -1,
name: '' name: ''
}) })
const accountList: Ref<MpAccountApi.AccountVO[]> = ref([])
const accountList = ref<MpAccountApi.AccountVO[]>([])
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'change', id: number, name: string): void (e: 'change', id: number, name: string)
}>() }>()
const handleQuery = async () => { const handleQuery = async () => {

View File

@ -0,0 +1,51 @@
<template>
<div>
<div v-if="item.event === 'subscribe'">
<el-tag type="success">关注</el-tag>
</div>
<div v-else-if="item.event === 'unsubscribe'">
<el-tag type="danger">取消关注</el-tag>
</div>
<div v-else-if="item.event === 'CLICK'">
<el-tag>点击菜单</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.event === 'VIEW'">
<el-tag>点击菜单链接</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.event === 'scancode_waitmsg'">
<el-tag>扫码结果</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.event === 'scancode_push'">
<el-tag>扫码结果</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.event === 'pic_sysphoto'">
<el-tag>系统拍照发图</el-tag>
</div>
<div v-else-if="item.event === 'pic_photo_or_album'">
<el-tag>拍照或者相册</el-tag>
</div>
<div v-else-if="item.event === 'pic_weixin'">
<el-tag>微信相册</el-tag>
</div>
<div v-else-if="item.event === 'location_select'">
<el-tag>选择地理位置</el-tag>
</div>
<div v-else>
<el-tag type="danger">未知事件类型</el-tag>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
item: any
}>()
const item = ref(props.item)
</script>
<style scoped></style>

View File

@ -0,0 +1,110 @@
<template>
<div class="execution" v-for="item in props.list" :key="item.id">
<div
class="avue-comment"
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
>
<div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
<div class="avue-comment__author">
{{ getNickname(item.sendFrom) }}
</div>
</div>
<div class="avue-comment__main">
<div class="avue-comment__header">
<div class="avue-comment__create_time">{{ formatDate(item.createTime) }}</div>
</div>
<div
class="avue-comment__body"
:style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
>
<!-- 事件区域 -->
<MsgEvent v-if="item.type === MsgType.Event" :item="item" />
<!-- 消息区域 -->
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
<div v-else-if="item.type === MsgType.Voice">
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
</div>
<div v-else-if="item.type === MsgType.Image">
<a target="_blank" :href="item.mediaUrl">
<img :src="item.mediaUrl" style="width: 100px" />
</a>
</div>
<div
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
style="text-align: center"
>
<WxVideoPlayer :url="item.mediaUrl" />
</div>
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
<el-link type="success" :underline="false" target="_blank" :href="item.url">
<div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
</el-link>
<div class="avue-card__info" style="height: unset">{{ item.description }}</div>
</div>
<!-- TODO 芋艿待完善 -->
<div v-else-if="item.type === MsgType.Location">
<WxLocation
:label="item.label"
:location-y="item.locationY"
:location-x="item.locationX"
/>
</div>
<div v-else-if="item.type === MsgType.News" style="width: 300px">
<!-- TODO 芋艿待测试详情页也存在类似的情况 -->
<WxNews :articles="item.articles" />
</div>
<div v-else-if="item.type === MsgType.Music">
<WxMusic
:title="item.title"
:description="item.description"
:thumb-media-url="item.thumbMediaUrl"
:music-url="item.musicUrl"
:hq-music-url="item.hqMusicUrl"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="MsgList">
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
import WxNews from '@/views/mp/components/wx-news'
import WxLocation from '@/views/mp/components/wx-location'
import WxMusic from '@/views/mp/components/wx-music'
import MsgEvent from './MsgEvent.vue'
import { formatDate } from '@/utils/formatTime'
import { MsgType, User } from '../types'
import avatarWechat from '@/assets/imgs/wechat.png'
const props = defineProps<{
list: any[]
accountId: number
user: User
}>()
enum SendFrom {
User = 1,
MpBot = 2
}
const getAvatar = (sendFrom: SendFrom) =>
sendFrom === SendFrom.User ? props.user.avatar : avatarWechat
const getNickname = (sendFrom: SendFrom) =>
sendFrom === SendFrom.User ? props.user.nickname : '公众号'
</script>
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件,该页面使用了 comment.scss、card.scc */
@import '../comment.scss';
@import '../card.scss';
.avatar-div {
text-align: center;
width: 80px;
}
</style>

View File

@ -7,123 +7,22 @@
--> -->
<template> <template>
<ContentWrap> <ContentWrap>
<div class="msg-div" :id="'msg-div' + nowStr"> <div class="msg-div" ref="msgDivRef">
<!-- 加载更多 --> <!-- 加载更多 -->
<div v-loading="loading"></div> <div v-loading="loading"></div>
<div v-if="!loading"> <div v-if="!loading">
<div class="el-table__empty-block" v-if="loadMore" @click="loadingMore" <div class="el-table__empty-block" v-if="hasMore" @click="loadMore"
><span class="el-table__empty-text">点击加载更多</span></div ><span class="el-table__empty-text">点击加载更多</span></div
> >
<div class="el-table__empty-block" v-if="!loadMore" <div class="el-table__empty-block" v-if="!hasMore"
><span class="el-table__empty-text">没有更多了</span></div ><span class="el-table__empty-text">没有更多了</span></div
> >
</div> </div>
<!-- 消息列表 --> <!-- 消息列表 -->
<div class="execution" v-for="item in list" :key="item.id"> <MsgList :list="list" :account-id="accountId" :user="user" />
<div class="avue-comment" :class="item.sendFrom === 2 ? 'avue-comment--reverse' : ''">
<div class="avatar-div">
<img
:src="item.sendFrom === 1 ? user.avatar : mp.avatar"
class="avue-comment__avatar"
/>
<div class="avue-comment__author"
>{{ item.sendFrom === 1 ? user.nickname : mp.nickname }}
</div>
</div>
<div class="avue-comment__main">
<div class="avue-comment__header">
<div class="avue-comment__create_time">{{ formatDate(item.createTime) }}</div>
</div>
<div
class="avue-comment__body"
:style="item.sendFrom === 2 ? 'background: #6BED72;' : ''"
>
<!-- 事件区域 -->
<div v-if="item.type === MsgType.Event && item.event === 'subscribe'">
<el-tag type="success">关注</el-tag>
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'unsubscribe'">
<el-tag type="danger">取消关注</el-tag>
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'CLICK'">
<el-tag>点击菜单</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'VIEW'">
<el-tag>点击菜单链接</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'scancode_waitmsg'">
<el-tag>扫码结果</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'scancode_push'">
<el-tag>扫码结果</el-tag>
{{ item.eventKey }}
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'pic_sysphoto'">
<el-tag>系统拍照发图</el-tag>
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'pic_photo_or_album'">
<el-tag>拍照或者相册</el-tag>
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'pic_weixin'">
<el-tag>微信相册</el-tag>
</div>
<div v-else-if="item.type === MsgType.Event && item.event === 'location_select'">
<el-tag>选择地理位置</el-tag>
</div>
<div v-else-if="item.type === MsgType.Event">
<el-tag type="danger">未知事件类型</el-tag>
</div>
<!-- 消息区域 -->
<div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
<div v-else-if="item.type === MsgType.Voice">
<WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
</div>
<div v-else-if="item.type === MsgType.Image">
<a target="_blank" :href="item.mediaUrl">
<img :src="item.mediaUrl" style="width: 100px" />
</a>
</div>
<div
v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
style="text-align: center"
>
<WxVideoPlayer :url="item.mediaUrl" />
</div>
<div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
<el-link type="success" :underline="false" target="_blank" :href="item.url">
<div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
</el-link>
<div class="avue-card__info" style="height: unset">{{ item.description }}</div>
</div>
<!-- TODO 芋艿待完善 -->
<div v-else-if="item.type === MsgType.Location">
<WxLocation
:label="item.label"
:location-y="item.locationY"
:location-x="item.locationX"
/>
</div>
<div v-else-if="item.type === MsgType.News" style="width: 300px">
<!-- TODO 芋艿待测试详情页也存在类似的情况 -->
<WxNews :articles="item.articles" />
</div>
<div v-else-if="item.type === MsgType.Music">
<WxMusic
:title="item.title"
:description="item.description"
:thumb-media-url="item.thumbMediaUrl"
:music-url="item.musicUrl"
:hq-music-url="item.hqMusicUrl"
/>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="msg-send" v-loading="sendLoading"> <div class="msg-send" v-loading="sendLoading">
<WxReplySelect ref="replySelectRef" v-model="reply" /> <WxReplySelect ref="replySelectRef" v-model="reply" />
<el-button type="success" class="send-but" @click="sendMsg">发送(S)</el-button> <el-button type="success" class="send-but" @click="sendMsg">发送(S)</el-button>
@ -132,18 +31,12 @@
</template> </template>
<script setup lang="ts" name="WxMsg"> <script setup lang="ts" name="WxMsg">
import WxReplySelect from '@/views/mp/components/wx-reply' import WxReplySelect, { Reply, ReplyType } from '@/views/mp/components/wx-reply'
import WxVideoPlayer from '@/views/mp/components/wx-video-play' import MsgList from './components/MsgList.vue'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
import WxNews from '@/views/mp/components/wx-news'
import WxLocation from '@/views/mp/components/wx-location'
import WxMusic from '@/views/mp/components/wx-music'
import { getMessagePage, sendMessage } from '@/api/mp/message' import { getMessagePage, sendMessage } from '@/api/mp/message'
import { getUser } from '@/api/mp/user' import { getUser } from '@/api/mp/user'
import { formatDate } from '@/utils/formatTime'
import profile from '@/assets/imgs/profile.jpg' import profile from '@/assets/imgs/profile.jpg'
import wechat from '@/assets/imgs/wechat.png' import { User } from './types'
import { MsgType } from './types'
const message = useMessage() // const message = useMessage() //
@ -154,61 +47,41 @@ const props = defineProps({
} }
}) })
const nowStr = ref(new Date().getTime()) // :id="'msg-div' + nowStr" const accountId = ref(-1) // IDuserId
const loading = ref(false) // const loading = ref(false) //
const loadMore = ref(true) // const hasMore = ref(true) //
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, // pageNo: 1, //
pageSize: 14, // pageSize: 14, //
accountId: undefined accountId: accountId
}) })
interface User {
nickname: string
avatar: string
accountId: number
}
// 使 // 使
const user: User = reactive({ const user: User = reactive({
nickname: '用户', nickname: '用户',
avatar: profile, avatar: profile,
accountId: 0 // accountId: accountId //
})
interface Mp {
nickname: string
avatar: string
}
const mp: Mp = reactive({
nickname: '公众号',
avatar: wechat
}) })
// ========= ========= // ========= =========
const sendLoading = ref(false) // const sendLoading = ref(false) //
interface Reply {
type: MsgType
accountId: number | null
articles: any[]
}
// //
const reply = ref<Reply>({ const reply = ref<Reply>({
type: MsgType.Text, type: ReplyType.Text,
accountId: null, accountId: -1,
articles: [] articles: []
}) })
const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null) const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null) // WxReplySelectref
const msgDivRef = ref() // ref
/** 完成加载 */ /** 完成加载 */
onMounted(async () => { onMounted(async () => {
const data = await getUser(props.userId) const data = await getUser(props.userId)
user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname
user.avatar = user.avatar?.length > 0 ? data.avatar : user.avatar user.avatar = user.avatar?.length > 0 ? data.avatar : user.avatar
user.accountId = data.accountId accountId.value = data.accountId
queryParams.accountId = data.accountId
reply.value.accountId = data.accountId reply.value.accountId = data.accountId
refreshChange() refreshChange()
@ -216,11 +89,15 @@ onMounted(async () => {
// //
const sendMsg = async () => { const sendMsg = async () => {
if (!reply) { if (!unref(reply)) {
return return
} }
// //
if (reply.value.type === MsgType.News && reply.value.articles.length > 1) { if (
reply.value.type === ReplyType.News &&
reply.value.articles &&
reply.value.articles.length > 1
) {
reply.value.articles = [reply.value.articles[0]] reply.value.articles = [reply.value.articles[0]]
message.success('图文消息条数限制在 1 条以内,已默认发送第一条') message.success('图文消息条数限制在 1 条以内,已默认发送第一条')
} }
@ -229,18 +106,18 @@ const sendMsg = async () => {
sendLoading.value = false sendLoading.value = false
list.value = [...list.value, ...[data]] list.value = [...list.value, ...[data]]
scrollToBottom() await scrollToBottom()
// //
replySelectRef.value?.clear() replySelectRef.value?.clear()
} }
const loadingMore = () => { const loadMore = () => {
queryParams.pageNo++ queryParams.pageNo++
getPage(queryParams, null) getPage(queryParams, null)
} }
const getPage = async (page, params) => { const getPage = async (page: any, params: any = null) => {
loading.value = true loading.value = true
let dataTemp = await getMessagePage( let dataTemp = await getMessagePage(
Object.assign( Object.assign(
@ -254,62 +131,45 @@ const getPage = async (page, params) => {
) )
) )
const msgDiv = document.getElementById('msg-div' + nowStr.value) const scrollHeight = msgDivRef.value?.scrollHeight ?? 0
let scrollHeight = 0
if (msgDiv) {
scrollHeight = msgDiv.scrollHeight
}
// //
const data = dataTemp.list.reverse() const data = dataTemp.list.reverse()
list.value = [...data, ...list.value] list.value = [...data, ...list.value]
loading.value = false loading.value = false
if (data.length < queryParams.pageSize || data.length === 0) { if (data.length < queryParams.pageSize || data.length === 0) {
loadMore.value = false hasMore.value = false
} }
queryParams.pageNo = page.pageNo queryParams.pageNo = page.pageNo
queryParams.pageSize = page.pageSize queryParams.pageSize = page.pageSize
// //
if (queryParams.pageNo === 1) { if (queryParams.pageNo === 1) {
// //
scrollToBottom() await scrollToBottom()
} else if (data.length !== 0) { } else if (data.length !== 0) {
// //
await nextTick(() => { await nextTick()
if (scrollHeight !== 0) { if (scrollHeight !== 0) {
let div = document.getElementById('msg-div' + nowStr.value) if (msgDivRef.value) {
if (div && msgDiv) { msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight - scrollHeight - 100
msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
}
} }
}) }
} }
} }
const refreshChange = () => { const refreshChange = () => {
getPage(queryParams, null) getPage(queryParams)
} }
/** 定位到消息底部 */ /** 定位到消息底部 */
const scrollToBottom = () => { const scrollToBottom = async () => {
nextTick(() => { await nextTick()
let div = document.getElementById('msg-div' + nowStr.value) if (msgDivRef.value) {
if (div) { msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight
div.scrollTop = div.scrollHeight }
}
})
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件,该页面使用了 comment.scss、card.scc */
@import './comment.scss';
@import './card.scss';
.msg-main {
margin-top: -30px;
padding: 10px;
}
.msg-div { .msg-div {
height: 50vh; height: 50vh;
overflow: auto; overflow: auto;
@ -322,11 +182,6 @@ const scrollToBottom = () => {
padding: 10px; padding: 10px;
} }
.avatar-div {
text-align: center;
width: 80px;
}
.send-but { .send-but {
float: right; float: right;
margin-top: 8px; margin-top: 8px;

View File

@ -9,3 +9,9 @@ export enum MsgType {
Music = 'music', Music = 'music',
News = 'news' News = 'news'
} }
export interface User {
nickname: string
avatar: string
accountId: number
}

View File

@ -55,6 +55,6 @@ defineExpose({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件,该页面使用了 card.scc */ /* 因为 joolun 实现依赖 avue 组件,该页面使用了 card.scss */
@import url('../wx-msg/card.scss'); @import '../wx-msg/card.scss';
</style> </style>

View File

@ -51,7 +51,7 @@
> >
<WxMaterialSelect <WxMaterialSelect
type="image" type="image"
:account-id="accountId" :account-id="accountId!"
@select-material="onMaterialSelected" @select-material="onMaterialSelected"
/> />
</el-dialog> </el-dialog>
@ -93,11 +93,11 @@ const showImageDialog = ref(false)
const fileList = ref<UploadFiles>([]) const fileList = ref<UploadFiles>([])
interface UploadData { interface UploadData {
type: UploadType type: UploadType
accountId: number | undefined accountId: number
} }
const uploadData: UploadData = reactive({ const uploadData: UploadData = reactive({
type: UploadType.Image, type: UploadType.Image,
accountId: accountId accountId: accountId!
}) })
/** 素材选择完成事件*/ /** 素材选择完成事件*/

View File

@ -125,7 +125,7 @@
</el-container> </el-container>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="NewsForm">
import { Editor } from '@/components/Editor' import { Editor } from '@/components/Editor'
import { createEditorConfig } from '../editor-config' import { createEditorConfig } from '../editor-config'
import CoverSelect from './CoverSelect.vue' import CoverSelect from './CoverSelect.vue'

View File

@ -76,30 +76,17 @@ import {
const message = useMessage() // const message = useMessage() //
const accountId = ref<number>(0) const accountId = ref(-1)
provide('accountId', accountId) provide('accountId', accountId)
const loading = ref(true) // const loading = ref(true) //
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
const total = ref(0) // const total = ref(0) //
interface QueryParams {
pageNo: number const queryParams = reactive({
pageSize: number
accountId: number
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: 0 accountId: accountId
})
interface UploadData {
type: 'image' | 'video' | 'audio'
accountId: number
}
const uploadData: UploadData = reactive({
type: 'image',
accountId: 0
}) })
// ========== 稿 or ========== // ========== 稿 or ==========
@ -111,7 +98,8 @@ const isSubmitting = ref(false)
/** 侦听公众号变化 **/ /** 侦听公众号变化 **/
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
setAccountId(id) accountId.value = id
queryParams.pageNo = 1
getList() getList()
} }
@ -124,12 +112,6 @@ const onBeforeDialogClose = async (onDone: () => {}) => {
} }
// ======================== ======================== // ======================== ========================
/** 设置账号编号 */
const setAccountId = (id: number) => {
queryParams.accountId = id
uploadData.accountId = id
}
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
@ -170,10 +152,10 @@ const onSubmitNewsItem = async () => {
isSubmitting.value = true isSubmitting.value = true
try { try {
if (isCreating.value) { if (isCreating.value) {
await MpDraftApi.createDraft(queryParams.accountId, newsList.value) await MpDraftApi.createDraft(accountId.value, newsList.value)
message.notifySuccess('新增成功') message.notifySuccess('新增成功')
} else { } else {
await MpDraftApi.updateDraft(queryParams.accountId, mediaId.value, newsList.value) await MpDraftApi.updateDraft(accountId.value, mediaId.value, newsList.value)
message.notifySuccess('更新成功') message.notifySuccess('更新成功')
} }
} finally { } finally {
@ -185,7 +167,6 @@ const onSubmitNewsItem = async () => {
// ======================== 稿 ======================== // ======================== 稿 ========================
const onPublish = async (item: Article) => { const onPublish = async (item: Article) => {
const accountId = queryParams.accountId
const mediaId = item.mediaId const mediaId = item.mediaId
const content = const content =
'你正在通过发布的方式发表内容。 发布不占用群发次数,一天可多次发布。' + '你正在通过发布的方式发表内容。 发布不占用群发次数,一天可多次发布。' +
@ -193,7 +174,7 @@ const onPublish = async (item: Article) => {
'发布后,你可以前往发表记录获取链接,也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。' '发布后,你可以前往发表记录获取链接,也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。'
try { try {
await message.confirm(content) await message.confirm(content)
await MpFreePublishApi.submitFreePublish(accountId, mediaId) await MpFreePublishApi.submitFreePublish(accountId.value, mediaId)
message.notifySuccess('发布成功') message.notifySuccess('发布成功')
await getList() await getList()
} catch {} } catch {}
@ -201,11 +182,10 @@ const onPublish = async (item: Article) => {
/** 删除按钮操作 */ /** 删除按钮操作 */
const onDelete = async (item: Article) => { const onDelete = async (item: Article) => {
const accountId = queryParams.accountId
const mediaId = item.mediaId const mediaId = item.mediaId
try { try {
await message.confirm('此操作将永久删除该草稿, 是否继续?') await message.confirm('此操作将永久删除该草稿, 是否继续?')
await MpDraftApi.deleteDraft(accountId, mediaId) await MpDraftApi.deleteDraft(accountId.value, mediaId)
message.notifySuccess('删除成功') message.notifySuccess('删除成功')
await getList() await getList()
} catch {} } catch {}

View File

@ -59,20 +59,16 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // const total = ref(0) //
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
interface QueryParams { const queryParams = reactive({
pageNo: number
pageSize: number
accountId: number
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: 0 accountId: -1
}) })
/** 侦听公众号变化 **/ /** 侦听公众号变化 **/
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
queryParams.accountId = id queryParams.accountId = id
queryParams.pageNo = 1
getList() getList()
} }

View File

@ -100,16 +100,10 @@ const loading = ref(false) // 遮罩层
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
const total = ref(0) // const total = ref(0) //
// //
interface QueryParams { const queryParams = reactive({
pageNo: number
pageSize: number
accountId: number
permanent: boolean
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: 0, accountId: -1,
permanent: true permanent: true
}) })
const showCreateVideo = ref(false) // const showCreateVideo = ref(false) //
@ -117,6 +111,7 @@ const showCreateVideo = ref(false) // 是否新建视频的弹窗
/** 侦听公众号变化 **/ /** 侦听公众号变化 **/
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
queryParams.accountId = id queryParams.accountId = id
queryParams.pageNo = 1
getList() getList()
} }

View File

@ -4,7 +4,7 @@
item-key="id" item-key="id"
ghost-class="draggable-ghost" ghost-class="draggable-ghost"
:animation="400" :animation="400"
@end="onDragEnd" @end="onParentDragEnd"
> >
<template #item="{ element: parent, index: x }"> <template #item="{ element: parent, index: x }">
<div class="menu_bottom"> <div class="menu_bottom">
@ -23,6 +23,7 @@
item-key="id" item-key="id"
ghost-class="draggable-ghost" ghost-class="draggable-ghost"
:animation="400" :animation="400"
@end="onChildDragEnd"
> >
<template #item="{ element: child, index: y }"> <template #item="{ element: child, index: y }">
<div class="subtitle menu_bottom"> <div class="subtitle menu_bottom">
@ -118,42 +119,49 @@ const subMenuClicked = (child: Menu, x: number, y: number) => {
} }
/** /**
* 处理一级菜单展开后被拖动 * 处理一级菜单展开后被拖动激活(展开)原来活动的一级菜单
* *
* @param oldIndex: 一级菜单拖动前的位置 * @param oldIndex: 一级菜单拖动前的位置
* @param newIndex: 一级菜单拖动后的位置 * @param newIndex: 一级菜单拖动后的位置
*/ */
const onDragEnd = ({ oldIndex, newIndex }) => { const onParentDragEnd = ({ oldIndex, newIndex }) => {
// //
if (props.activeIndex === '__MENU_NOT_SELECTED__') { if (props.activeIndex === '__MENU_NOT_SELECTED__') {
return return
} }
let newParent = props.parentIndex // 使`newParent`
if (props.parentIndex === oldIndex) { let positions = new Array<boolean>(menuList.value.length).fill(false)
newParent = newIndex positions[props.parentIndex] = true
} else if (props.parentIndex === newIndex) { const [out] = positions.splice(oldIndex, 1) // out
newParent = oldIndex positions.splice(newIndex, 0, out) // out
} else { const newParentIndex = positions.indexOf(true)
// `props.parentIndex`
// 使`newParent`
let positions = new Array<boolean>(menuList.value.length).fill(false)
positions[props.parentIndex] = true
positions.splice(oldIndex, 1)
positions.splice(newIndex, 0, true)
newParent = positions.indexOf(true)
}
// //
const parent = menuList.value[newParent] const parent = menuList.value[newParentIndex]
emit('menu-clicked', parent, newParent) emit('menu-clicked', parent, newParentIndex)
}
/**
* 处理二级菜单展开后被拖动激活被拖动的菜单
*
* @param newIndex 二级菜单拖动后的位置
*/
const onChildDragEnd = ({ newIndex }) => {
const x = props.parentIndex
const y = newIndex
const children = menuList.value[x]?.children
if (children && children?.length > 0) {
const child = children[y]
emit('submenu-clicked', child, x, y)
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu_bottom { .menu_bottom {
position: relative; position: relative;
display: inline-block; display: block;
float: left; float: left;
width: 85.5px; width: 85.5px;
text-align: center; text-align: center;

View File

@ -65,7 +65,7 @@ const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__'
// ======================== ======================== // ======================== ========================
const loading = ref(false) // const loading = ref(false) //
const accountId = ref<number>(0) const accountId = ref(-1)
const accountName = ref<string>('') const accountName = ref<string>('')
const menuList = ref<Menu[]>([]) const menuList = ref<Menu[]>([])
@ -339,7 +339,7 @@ div {
.left { .left {
position: relative; position: relative;
display: inline-block; display: block;
float: left; float: left;
width: 350px; width: 350px;
height: 715px; height: 715px;

View File

@ -93,20 +93,12 @@ const total = ref(0) // 数据的总页数
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
// //
interface QueryParams { const queryParams = reactive({
pageNo: number
pageSize: number
openid: string | undefined
accountId: number
type: MsgType | undefined
createTime: string[] | []
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
openid: undefined, openid: '',
accountId: 0, accountId: -1,
type: undefined, type: MsgType.Text,
createTime: [] createTime: []
}) })
const queryFormRef = ref<FormInstance | null>(null) // const queryFormRef = ref<FormInstance | null>(null) //
@ -120,6 +112,7 @@ const messageBox = reactive({
/** 侦听accountId */ /** 侦听accountId */
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
queryParams.accountId = id queryParams.accountId = id
queryParams.pageNo = 1
handleQuery() handleQuery()
} }

View File

@ -84,7 +84,7 @@ const dateRange = ref([
beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)), beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24)) endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
]) ])
const accountId = ref() // const accountId = ref(-1) //
const accountList = ref<MpAccountApi.AccountVO[]>([]) // const accountList = ref<MpAccountApi.AccountVO[]>([]) //
const xAxisDate = ref([] as any[]) // X const xAxisDate = ref([] as any[]) // X
@ -232,7 +232,7 @@ const getAccountList = async () => {
accountList.value = await MpAccountApi.getSimpleAccountList() accountList.value = await MpAccountApi.getSimpleAccountList()
// //
if (accountList.value.length > 0) { if (accountList.value.length > 0) {
accountId.value = accountList.value[0].id accountId.value = accountList.value[0].id!
} }
} }

View File

@ -95,23 +95,18 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // const total = ref(0) //
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
interface QueryParams { const queryParams = reactive({
pageNo: number
pageSize: number
accountId: number
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: 0 accountId: -1
}) })
const formRef = ref<InstanceType<typeof TagForm> | null>(null) const formRef = ref<InstanceType<typeof TagForm> | null>(null)
/** 侦听公众号变化 **/ /** 侦听公众号变化 **/
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
queryParams.pageNo = 1
queryParams.accountId = id queryParams.accountId = id
queryParams.pageNo = 1
getList() getList()
} }

View File

@ -113,27 +113,20 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // const total = ref(0) //
const list = ref<any[]>([]) // const list = ref<any[]>([]) //
interface QueryParams { const queryParams = reactive({
pageNo: number
pageSize: number
accountId: number
openid: string | null
nickname: string | null
}
const queryParams: QueryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
accountId: 0, accountId: -1,
openid: null, openid: '',
nickname: null nickname: ''
}) })
const queryFormRef = ref<FormInstance | null>(null) // const queryFormRef = ref<FormInstance | null>(null) //
const tagList = ref<any[]>([]) // const tagList = ref<any[]>([]) //
/** 侦听公众号变化 **/ /** 侦听公众号变化 **/
const onAccountChanged = (id: number) => { const onAccountChanged = (id: number) => {
queryParams.pageNo = 1
queryParams.accountId = id queryParams.accountId = id
queryParams.pageNo = 1
getList() getList()
} }