smart-flow/yudao-ui-admin-vben
2
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 {
confirm,
ContentWrap,
DocAlert,
Page,
useVbenModal,
} from '@vben/common-ui';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { message, Row, Tabs } from 'ant-design-vue';
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 ReplyContentCell from './components/ReplyTable.vue';
@@ -25,10 +23,17 @@ import Form from './modules/form.vue';
defineOptions({ name: 'MpAutoReply' });
/** 刷新表格 */
function handleRefresh() {
gridApi.query().then(() => {
updateTableDataLength();
});
}
const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
/** 切换回复类型 */
async function onTabChange(tabName: string) {
async function onTabChange(tabName: any) {
msgType.value = tabName;
await nextTick();
// 更新 columns
@@ -58,7 +63,7 @@ async function handleCreate() {
/** 修改按钮操作 */
async function handleEdit(row: any) {
const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
const data = (await getAutoReply(row.id)) as any;
formModalApi
.setData({
isCreating: false,
@@ -76,7 +81,7 @@ async function handleDelete(row: any) {
duration: 0,
});
try {
await MpAutoReplyApi.deleteAutoReply(row.id);
await deleteAutoReply(row.id);
message.success('删除成功');
await gridApi.query();
// 查询完成后更新数据长度
@@ -103,7 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await MpAutoReplyApi.getAutoReplyPage({
return await getAutoReplyPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
type: Number(msgType.value) as MsgType,
@@ -173,89 +178,79 @@ onMounted(async () => {
<Page auto-content-height>
<DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
<!-- tab 切换 -->
<!-- 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>
<Tabs
v-model:active-key="msgType"
@change="(activeKey) => onTabChange(activeKey as string)"
>
<!-- tab 项 -->
<Tabs.TabPane :key="String(MsgType.Follow)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
</Row>
</template>
</Tabs.TabPane>
<Tabs.TabPane :key="String(MsgType.Message)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
</Row>
</template>
</Tabs.TabPane>
<Tabs.TabPane :key="String(MsgType.Keyword)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
</Row>
</template>
</Tabs.TabPane>
</Tabs>
<!-- 列表 -->
<FormModal
@success="
() => {
gridApi.query().then(() => {
updateTableDataLength();
});
}
"
/>
<Grid table-title="自动回复列表">
<template #toolbar-tools>
<TableAction
v-if="showCreateButton"
:actions="[
{
label: $t('ui.actionTitle.create', ['自动回复']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['mp:auto-reply:create'],
onClick: handleCreate,
<FormModal @success="handleRefresh" />
<Grid>
<template #toolbar-actions>
<!-- tab 切换 -->
<Tabs v-model:active-key="msgType" class="w-full" @change="onTabChange">
<!-- tab 项 -->
<Tabs.TabPane :key="String(MsgType.Follow)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
</Row>
</template>
</Tabs.TabPane>
<Tabs.TabPane :key="String(MsgType.Message)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="lucide:message-circle" class="mr-2px" />
消息回复
</Row>
</template>
</Tabs.TabPane>
<Tabs.TabPane :key="String(MsgType.Keyword)">
<template #tab>
<Row align="middle">
<IconifyIcon icon="lucide:newspaper" class="mr-2px" />
关键词回复
</Row>
</template>
</Tabs.TabPane>
</Tabs>
</template>
<template #toolbar-tools>
<TableAction
v-if="showCreateButton"
:actions="[
{
label: $t('ui.actionTitle.create', ['自动回复']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['mp:auto-reply:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #replyContent="{ row }">
<ReplyContentCell :row="row" />
</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>
<template #replyContent="{ row }">
<ReplyContentCell :row="row" />
</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>
},
]"
/>
</template>
</Grid>
</Page>
</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 { onMounted, reactive, ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { message, Select } from 'ant-design-vue';
@@ -18,7 +18,7 @@ const emit = defineEmits<{
const { push } = useRouter();
const account: MpAccountApi.Account = reactive({
const account = ref<MpAccountApi.Account>({
id: -1,
name: '',
}); // 当前选中的公众号
@@ -36,9 +36,9 @@ async function handleQuery() {
// 默认选中第一个，如无数据则不执行
const first = accountList.value[0];
if (first) {
account.id = first.id;
account.name = first.name;
emit('change', account.id, account.name);
account.value.id = first.id;
account.value.name = first.name;
emit('change', account.value.id, account.value.name);
}
}
@@ -46,8 +46,8 @@ async function handleQuery() {
function onChanged(id: SelectValue) {
const found = accountList.value.find((v) => v.id === id);
if (found) {
account.name = found.name;
emit('change', account.id, account.name);
account.value.name = found.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 {
box-sizing: border-box;
height: 200px;
@@ -99,18 +99,18 @@
}
/** joolun 额外加的 */
.avue-comment__main {
.mp-comment__main {
flex: unset !important;
margin: 0 8px !important;
border-radius: 5px !important;
}
.avue-comment__header {
.mp-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
.mp-comment__body {
border-bottom-right-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 */
.avue-comment {
.mp-comment {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
@@ -7,7 +7,7 @@
&--reverse {
flex-direction: row-reverse;
.avue-comment__main {
.mp-comment__main {
&::before,
&::after {
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>
<div class="execution" v-for="item in props.list" :key="item.id">
<div
class="avue-comment"
:class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
class="mp-comment"
:class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
>
<div class="avatar-div">
<img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
<div class="avue-comment__author">
<img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
<div class="mp-comment__author">
{{ getNickname(item.sendFrom) }}
</div>
</div>
<div class="avue-comment__main">
<div class="avue-comment__header">
<div class="avue-comment__create_time">
<div class="mp-comment__main">
<div class="mp-comment__header">
<div class="mp-comment__create_time">
{{ formatDateTime(item.createTime) }}
</div>
</div>
<div
class="avue-comment__body"
class="mp-comment__body"
:style="
item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
"
@@ -65,8 +65,8 @@ function getNickname(sendFrom: number) {
/** TODO @dylan：看看有没适合 tindwind 的哈。 */
@import url('../comment.scss');
@import url('../card.scss');
@import url('./comment.scss');
@import url('./card.scss');
.avatar-div {
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 { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import * as MpDraftApi from '#/api/mp/draft';
import * as MpFreePublishApi from '#/api/mp/freePublish';
import { deleteDraft, getDraftPage } from '#/api/mp/draft';
import { submitFreePublish } from '#/api/mp/freePublish';
import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
import DraftTableCell from './components/draft-table.vue';
@@ -21,6 +21,11 @@ import Form from './modules/form.vue';
defineOptions({ name: 'MpDraft' });
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
@@ -43,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
if (formValues?.accountId) {
accountId.value = formValues.accountId;
}
const drafts = await MpDraftApi.getDraftPage({
const drafts = await getDraftPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
@@ -190,7 +195,7 @@ async function handlePublish(row: Article) {
});
// TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
try {
await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
await submitFreePublish(accountId, row.mediaId);
message.success('发布成功');
await gridApi.query();
} finally {
@@ -212,7 +217,7 @@ async function handleDelete(row: Article) {
duration: 0,
});
try {
await MpDraftApi.deleteDraft(accountId, row.mediaId);
await deleteDraft(accountId, row.mediaId);
message.success('删除成功');
await gridApi.query();
} finally {
@@ -237,16 +242,11 @@ onMounted(async () => {
<template>
<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="
() => {
gridApi.query();
}
"
/>
<FormModal @success="handleRefresh" />
<Grid table-title="草稿列表">
<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>
<template>
<Page
description="公众号素材"
doc-link="https://doc.iocoder.cn/mp/material/"
title="公众号素材"
>
<Page auto-content-height>
<!-- 搜索工作栏 -->
<Card class="mb-4" :bordered="false">
<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/" />
</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>
<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="weixin-hd">

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

@@ -14,6 +14,7 @@ import {
FormItem,
Input,
Modal,
Pagination,
Select,
} from 'ant-design-vue';
@@ -166,7 +167,7 @@ function showTotal(total: number) {
<div class="flex-1 rounded-lg bg-white p-4">
<MessageTable :list="list" :loading="loading" @send="handleSend" />
<div v-show="total > 0" class="mt-4 flex justify-end">
<a-pagination
<Pagination
v-model:current="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
: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
- All rights reserved, Designed By www.joolun.com
芋道源码：
① 移除 avue 组件，使用 ElementUI 原生组件
-->
<script lang="ts" setup>
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 {
box-sizing: border-box;
height: 200px;
@@ -99,18 +99,18 @@
}
/** joolun 额外加的 */
.avue-comment__main {
.mp-comment__main {
flex: unset !important;
margin: 0 8px !important;
border-radius: 5px !important;
}
.avue-comment__header {
.mp-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
.mp-comment__body {
border-bottom-right-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 */
.avue-comment {
.mp-comment {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
@@ -7,7 +7,7 @@
&--reverse {
flex-direction: row-reverse;
.avue-comment__main {
.mp-comment__main {
&::before,
&::after {
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
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) }}
</div>
</div>

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

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