commit
0ceddc9c91
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 () => {
|
||||||
|
51
src/views/mp/components/wx-msg/components/MsgEvent.vue
Normal file
51
src/views/mp/components/wx-msg/components/MsgEvent.vue
Normal 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>
|
110
src/views/mp/components/wx-msg/components/MsgList.vue
Normal file
110
src/views/mp/components/wx-msg/components/MsgList.vue
Normal 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>
|
@ -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) // 公众号ID,需要通过userId初始化
|
||||||
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) // WxReplySelect组件ref,用于消息发送成功后清除内容
|
||||||
|
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;
|
||||||
|
@ -9,3 +9,9 @@ export enum MsgType {
|
|||||||
Music = 'music',
|
Music = 'music',
|
||||||
News = 'news'
|
News = 'news'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
nickname: string
|
||||||
|
avatar: string
|
||||||
|
accountId: number
|
||||||
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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!
|
||||||
})
|
})
|
||||||
|
|
||||||
/** 素材选择完成事件*/
|
/** 素材选择完成事件*/
|
||||||
|
@ -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'
|
||||||
|
@ -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 {}
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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!
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user