smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mp

Browse Source
This commit is contained in:
xingyu4j
2025-11-13 16:12:44 +08:00
parent 62f630fd19
commit 100f0a41b6
14 changed files with 150 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
apps/web-antd/src/views/mp/autoReply/index.vue
View File

@@ -3,19 +3,17 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { computed, nextTick, onMounted, ref } from 'vue'; import { computed, nextTick, onMounted, ref } from 'vue';
import { import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
confirm,
ContentWrap,
DocAlert,
Page,
useVbenModal,
} from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons'; import { IconifyIcon } from '@vben/icons';
import { message, Row, Tabs } from 'ant-design-vue'; import { message, Row, Tabs } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import * as MpAutoReplyApi from '#/api/mp/autoReply'; import {
deleteAutoReply,
getAutoReply,
getAutoReplyPage,
} from '#/api/mp/autoReply';
import { $t } from '#/locales'; import { $t } from '#/locales';
import ReplyContentCell from './components/ReplyTable.vue'; import ReplyContentCell from './components/ReplyTable.vue';
@@ -25,10 +23,17 @@ import Form from './modules/form.vue';
defineOptions({ name: 'MpAutoReply' }); defineOptions({ name: 'MpAutoReply' });
/** 刷新表格 */
function handleRefresh() {
gridApi.query().then(() => {
updateTableDataLength();
});
}
const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
/** 切换回复类型 */ /** 切换回复类型 */
async function onTabChange(tabName: string) { async function onTabChange(tabName: any) {
msgType.value = tabName; msgType.value = tabName;
await nextTick(); await nextTick();
// 更新 columns // 更新 columns
@@ -58,7 +63,7 @@ async function handleCreate() {
/** 修改按钮操作 */ /** 修改按钮操作 */
async function handleEdit(row: any) { async function handleEdit(row: any) {
const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any; const data = (await getAutoReply(row.id)) as any;
formModalApi formModalApi
.setData({ .setData({
isCreating: false, isCreating: false,
@@ -76,7 +81,7 @@ async function handleDelete(row: any) {
duration: 0, duration: 0,
}); });
try { try {
await MpAutoReplyApi.deleteAutoReply(row.id); await deleteAutoReply(row.id);
message.success('删除成功'); message.success('删除成功');
await gridApi.query(); await gridApi.query();
// 查询完成后更新数据长度 // 查询完成后更新数据长度
@@ -103,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: { proxyConfig: {
ajax: { ajax: {
query: async ({ page }, formValues) => { query: async ({ page }, formValues) => {
return await MpAutoReplyApi.getAutoReplyPage({ return await getAutoReplyPage({
pageNo: page.currentPage, pageNo: page.currentPage,
pageSize: page.pageSize, pageSize: page.pageSize,
type: Number(msgType.value) as MsgType, type: Number(msgType.value) as MsgType,
@@ -173,89 +178,79 @@ onMounted(async () => {
<Page auto-content-height> <Page auto-content-height>
<DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" /> <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
<!-- tab 切换 --> <FormModal @success="handleRefresh" />
<!-- TODO @hw：貌似 tabs 里面套 table 的样式在 vben 里有点丑，要不我们按照 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/trade/afterSale/index.vue：1）第一层是公众号的选择；2）第二层是 tab；3）第三层是 table -->
<ContentWrap> <Grid>
<Tabs <template #toolbar-actions>
v-model:active-key="msgType" <!-- tab 切换 -->
@change="(activeKey) => onTabChange(activeKey as string)" <Tabs v-model:active-key="msgType" class="w-full" @change="onTabChange">
> <!-- tab 项 -->
<!-- tab 项 --> <Tabs.TabPane :key="String(MsgType.Follow)">
<Tabs.TabPane :key="String(MsgType.Follow)"> <template #tab>
<template #tab> <Row align="middle">
<Row align="middle"> <IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
<IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复 </Row>
</Row> </template>
</template> </Tabs.TabPane>
</Tabs.TabPane> <Tabs.TabPane :key="String(MsgType.Message)">
<Tabs.TabPane :key="String(MsgType.Message)"> <template #tab>
<template #tab> <Row align="middle">
<Row align="middle"> <IconifyIcon icon="lucide:message-circle" class="mr-2px" />
<IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复 消息回复
</Row> </Row>
</template> </template>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane :key="String(MsgType.Keyword)"> <Tabs.TabPane :key="String(MsgType.Keyword)">
<template #tab> <template #tab>
<Row align="middle"> <Row align="middle">
<IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复 <IconifyIcon icon="lucide:newspaper" class="mr-2px" />
</Row> 关键词回复
</template> </Row>
</Tabs.TabPane> </template>
</Tabs> </Tabs.TabPane>
<!-- 列表 --> </Tabs>
<FormModal </template>
@success=" <template #toolbar-tools>
() => { <TableAction
gridApi.query().then(() => { v-if="showCreateButton"
updateTableDataLength(); :actions="[
}); {
} label: $t('ui.actionTitle.create', ['自动回复']),
" type: 'primary',
/> icon: ACTION_ICON.ADD,
<Grid table-title="自动回复列表"> auth: ['mp:auto-reply:create'],
<template #toolbar-tools> onClick: handleCreate,
<TableAction },
v-if="showCreateButton" ]"
:actions="[ />
{ </template>
label: $t('ui.actionTitle.create', ['自动回复']), <template #replyContent="{ row }">
type: 'primary', <ReplyContentCell :row="row" />
icon: ACTION_ICON.ADD, </template>
auth: ['mp:auto-reply:create'], <template #actions="{ row }">
onClick: handleCreate, <TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['mp:auto-reply:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['mp:auto-reply:delete'],
popConfirm: {
title: '是否确认删除此数据?',
confirm: handleDelete.bind(null, row),
}, },
]" },
/> ]"
</template> />
<template #replyContent="{ row }"> </template>
<ReplyContentCell :row="row" /> </Grid>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['mp:auto-reply:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['mp:auto-reply:delete'],
popConfirm: {
title: '是否确认删除此数据?',
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</ContentWrap>
</Page> </Page>
</template> </template>

14
apps/web-antd/src/views/mp/components/wx-account-select/account-select.vue
View File

@@ -3,7 +3,7 @@ import type { SelectValue } from 'ant-design-vue/es/select';
import type { MpAccountApi } from '#/api/mp/account'; import type { MpAccountApi } from '#/api/mp/account';
import { onMounted, reactive, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { message, Select } from 'ant-design-vue'; import { message, Select } from 'ant-design-vue';
@@ -18,7 +18,7 @@ const emit = defineEmits<{
const { push } = useRouter(); const { push } = useRouter();
const account: MpAccountApi.Account = reactive({ const account = ref<MpAccountApi.Account>({
id: -1, id: -1,
name: '', name: '',
}); // 当前选中的公众号 }); // 当前选中的公众号
@@ -36,9 +36,9 @@ async function handleQuery() {
// 默认选中第一个，如无数据则不执行 // 默认选中第一个，如无数据则不执行
const first = accountList.value[0]; const first = accountList.value[0];
if (first) { if (first) {
account.id = first.id; account.value.id = first.id;
account.name = first.name; account.value.name = first.name;
emit('change', account.id, account.name); emit('change', account.value.id, account.value.name);
} }
} }
@@ -46,8 +46,8 @@ async function handleQuery() {
function onChanged(id: SelectValue) { function onChanged(id: SelectValue) {
const found = accountList.value.find((v) => v.id === id); const found = accountList.value.find((v) => v.id === id);
if (found) { if (found) {
account.name = found.name; account.value.name = found.name;
emit('change', account.id, account.name); emit('change', account.value.id, account.value.name);
} }
} }

8
apps/web-antd/src/views/mp/components/wx-msg/card.scss
View File

@@ -1,4 +1,4 @@
.avue-card { .mp-card {
&__item { &__item {
box-sizing: border-box; box-sizing: border-box;
height: 200px; height: 200px;
@@ -99,18 +99,18 @@
} }
/** joolun 额外加的 */ /** joolun 额外加的 */
.avue-comment__main { .mp-comment__main {
flex: unset !important; flex: unset !important;
margin: 0 8px !important; margin: 0 8px !important;
border-radius: 5px !important; border-radius: 5px !important;
} }
.avue-comment__header { .mp-comment__header {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.avue-comment__body { .mp-comment__body {
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }

4
apps/web-antd/src/views/mp/components/wx-msg/comment.scss
View File

@@ -1,5 +1,5 @@
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */ /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.avue-comment { .mp-comment {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: 30px; margin-bottom: 30px;
@@ -7,7 +7,7 @@
&--reverse { &--reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
.avue-comment__main { .mp-comment__main {
&::before, &::before,
&::after { &::after {
right: -8px; right: -8px;

20
apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
View File

@@ -32,23 +32,23 @@ function getNickname(sendFrom: number) {
<template> <template>
<div class="execution" v-for="item in props.list" :key="item.id"> <div class="execution" v-for="item in props.list" :key="item.id">
<div <div
class="avue-comment" class="mp-comment"
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }" :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
> >
<div class="avatar-div"> <div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" /> <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
<div class="avue-comment__author"> <div class="mp-comment__author">
{{ getNickname(item.sendFrom) }} {{ getNickname(item.sendFrom) }}
</div> </div>
</div> </div>
<div class="avue-comment__main"> <div class="mp-comment__main">
<div class="avue-comment__header"> <div class="mp-comment__header">
<div class="avue-comment__create_time"> <div class="mp-comment__create_time">
{{ formatDateTime(item.createTime) }} {{ formatDateTime(item.createTime) }}
</div> </div>
</div> </div>
<div <div
class="avue-comment__body" class="mp-comment__body"
:style=" :style="
item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : '' item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
" "
@@ -65,8 +65,8 @@ function getNickname(sendFrom: number) {
/** TODO @dylan：看看有没适合 tindwind 的哈。 */ /** TODO @dylan：看看有没适合 tindwind 的哈。 */
@import url('../comment.scss'); @import url('./comment.scss');
@import url('../card.scss'); @import url('./card.scss');
.avatar-div { .avatar-div {
width: 80px; width: 80px;

28
apps/web-antd/src/views/mp/draft/index.vue
View File

@@ -11,8 +11,8 @@ import { $t } from '@vben/locales';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import * as MpDraftApi from '#/api/mp/draft'; import { deleteDraft, getDraftPage } from '#/api/mp/draft';
import * as MpFreePublishApi from '#/api/mp/freePublish'; import { submitFreePublish } from '#/api/mp/freePublish';
import { createEmptyNewsItem } from '#/views/mp/draft/components/types'; import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
import DraftTableCell from './components/draft-table.vue'; import DraftTableCell from './components/draft-table.vue';
@@ -21,6 +21,11 @@ import Form from './modules/form.vue';
defineOptions({ name: 'MpDraft' }); defineOptions({ name: 'MpDraft' });
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
const [FormModal, formModalApi] = useVbenModal({ const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form, connectedComponent: Form,
destroyOnClose: true, destroyOnClose: true,
@@ -43,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
if (formValues?.accountId) { if (formValues?.accountId) {
accountId.value = formValues.accountId; accountId.value = formValues.accountId;
} }
const drafts = await MpDraftApi.getDraftPage({ const drafts = await getDraftPage({
pageNo: page.currentPage, pageNo: page.currentPage,
pageSize: page.pageSize, pageSize: page.pageSize,
...formValues, ...formValues,
@@ -190,7 +195,7 @@ async function handlePublish(row: Article) {
}); });
// TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈； // TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
try { try {
await MpFreePublishApi.submitFreePublish(accountId, row.mediaId); await submitFreePublish(accountId, row.mediaId);
message.success('发布成功'); message.success('发布成功');
await gridApi.query(); await gridApi.query();
} finally { } finally {
@@ -212,7 +217,7 @@ async function handleDelete(row: Article) {
duration: 0, duration: 0,
}); });
try { try {
await MpDraftApi.deleteDraft(accountId, row.mediaId); await deleteDraft(accountId, row.mediaId);
message.success('删除成功'); message.success('删除成功');
await gridApi.query(); await gridApi.query();
} finally { } finally {
@@ -237,16 +242,11 @@ onMounted(async () => {
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" /> <template #doc>
<DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
</template>
<!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； --> <FormModal @success="handleRefresh" />
<FormModal
@success="
() => {
gridApi.query();
}
"
/>
<Grid table-title="草稿列表"> <Grid table-title="草稿列表">
<template #toolbar-tools> <template #toolbar-tools>

6
apps/web-antd/src/views/mp/material/index.vue
View File

@@ -98,11 +98,7 @@ async function handleDelete(id: number) {
</script> </script>
<template> <template>
<Page <Page auto-content-height>
description="公众号素材"
doc-link="https://doc.iocoder.cn/mp/material/"
title="公众号素材"
>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<Card class="mb-4" :bordered="false"> <Card class="mb-4" :bordered="false">
<Form :model="queryParams" layout="inline"> <Form :model="queryParams" layout="inline">

20
apps/web-antd/src/views/mp/menu/index.vue
View File

@@ -249,19 +249,15 @@ function menuToBackend(menu: any) {
<DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" /> <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
</template> </template>
<!-- 搜索工作栏 -->
<!-- TODO @hw：是不是少了一个框子哈？ -->
<!-- <ContentWrap> -->
<Form layout="inline" class="-mb-15px w-240px">
<Form.Item label="公众号" prop="accountId" class="w-240px">
<WxAccountSelect @change="onAccountChanged" />
</Form.Item>
</Form>
<!-- </ContentWrap> -->
<!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
<ContentWrap> <ContentWrap>
<div class="clearfix public-account-management" v-loading="loading"> <!-- 搜索工作栏 -->
<Form class="mb-10 w-full">
<Form.Item label="公众号" prop="accountId" class="w-60">
<WxAccountSelect @change="onAccountChanged" />
</Form.Item>
</Form>
<div class="clearfix public-account-management mt-10" v-loading="loading">
<!--左边配置菜单--> <!--左边配置菜单-->
<div class="left"> <div class="left">
<div class="weixin-hd"> <div class="weixin-hd">

3
apps/web-antd/src/views/mp/message/index.vue
View File

@@ -14,6 +14,7 @@ import {
FormItem, FormItem,
Input, Input,
Modal, Modal,
Pagination,
Select, Select,
} from 'ant-design-vue'; } from 'ant-design-vue';
@@ -166,7 +167,7 @@ function showTotal(total: number) {
<div class="flex-1 rounded-lg bg-white p-4"> <div class="flex-1 rounded-lg bg-white p-4">
<MessageTable :list="list" :loading="loading" @send="handleSend" /> <MessageTable :list="list" :loading="loading" @send="handleSend" />
<div v-show="total > 0" class="mt-4 flex justify-end"> <div v-show="total > 0" class="mt-4 flex justify-end">
<a-pagination <Pagination
v-model:current="queryParams.pageNo" v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize" v-model:page-size="queryParams.pageSize"
:total="total" :total="total"

1
apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
View File

@@ -2,7 +2,6 @@
- Copyright (C) 2018-2019 - Copyright (C) 2018-2019
- All rights reserved, Designed By www.joolun.com - All rights reserved, Designed By www.joolun.com
芋道源码： 芋道源码：
① 移除 avue 组件，使用 ElementUI 原生组件
--> -->
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';

8
apps/web-ele/src/views/mp/modules/wx-msg/card.scss
View File

@@ -1,4 +1,4 @@
.avue-card { .mp-card {
&__item { &__item {
box-sizing: border-box; box-sizing: border-box;
height: 200px; height: 200px;
@@ -99,18 +99,18 @@
} }
/** joolun 额外加的 */ /** joolun 额外加的 */
.avue-comment__main { .mp-comment__main {
flex: unset !important; flex: unset !important;
margin: 0 8px !important; margin: 0 8px !important;
border-radius: 5px !important; border-radius: 5px !important;
} }
.avue-comment__header { .mp-comment__header {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.avue-comment__body { .mp-comment__body {
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }

4
apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
View File

@@ -1,5 +1,5 @@
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */ /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.avue-comment { .mp-comment {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: 30px; margin-bottom: 30px;
@@ -7,7 +7,7 @@
&--reverse { &--reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
.avue-comment__main { .mp-comment__main {
&::before, &::before,
&::after { &::after {
right: -8px; right: -8px;

2
apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
View File

@@ -55,7 +55,7 @@ const getNickname = (sendFrom: SendFromType) =>
<div <div
class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]" class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
> >
<div class="avue-comment__create_time"> <div class="mp-comment__create_time">
{{ formatDateTime(item.createTime) }} {{ formatDateTime(item.createTime) }}
</div> </div>
</div> </div>

13
apps/web-ele/src/views/mp/modules/wx-music/main.vue
View File

@@ -44,18 +44,15 @@ defineExpose({
target="_blank" target="_blank"
:href="hqMusicUrl ? hqMusicUrl : musicUrl" :href="hqMusicUrl ? hqMusicUrl : musicUrl"
> >
<div <div class="mp-card__body bg-background rounded-sm p-2.5">
class="avue-card__body" <div class="mp-card__avatar">
style="padding: 10px; background-color: #fff; border-radius: 5px"
>
<div class="avue-card__avatar">
<img :src="thumbMediaUrl" alt="" /> <img :src="thumbMediaUrl" alt="" />
</div> </div>
<div class="avue-card__detail"> <div class="mp-card__detail">
<div class="avue-card__title" style="margin-bottom: unset"> <div class="mp-card__title" style="margin-bottom: unset">
{{ title }} {{ title }}
</div> </div>
<div class="avue-card__info" style="height: unset"> <div class="mp-card__info" style="height: unset">
{{ description }} {{ description }}
</div> </div>
</div> </div>