fix: ele改回使用账号选择组件

apps/web-ele/src/views/mp/autoReply/data.ts

@@ -8,7 +8,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictObj, getDictOptions } from '@vben/hooks';
 
 import { getSimpleAccountList } from '#/api/mp/account';
-import { ReplySelect } from '#/views/mp/components';
+import { WxReplySelect } from '#/views/mp/components';
 
 import { MsgType } from './modules/types';
 
@@ -143,7 +143,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   schema.push({
     fieldName: 'reply',
     label: '回复消息',
-    component: markRaw(ReplySelect),
+    component: markRaw(WxReplySelect),
   });
   return schema;
 }

apps/web-ele/src/views/mp/autoReply/index.vue

@@ -18,6 +18,7 @@ import {
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as MpAutoReplyApi from '#/api/mp/autoReply';
 import { $t } from '#/locales';
+import { WxAccountSelect } from '#/views/mp/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Content from './modules/content.vue';
@@ -27,6 +28,12 @@ import { MsgType } from './modules/types';
 defineOptions({ name: 'MpAutoReply' });
 
 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
 /** 切换回复类型 */
 async function onTabChange(tabName: string) {
   msgType.value = tabName;
@@ -91,8 +98,6 @@ const [FormModal, formModalApi] = useVbenModal({
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
-    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
-    submitOnChange: true,
   },
   gridOptions: {
     columns: useGridColumns(Number(msgType.value) as MsgType),
@@ -109,6 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           });
         },
       },
+      autoLoad: false,
     },
     rowConfig: {
       keyField: 'id',
@@ -148,6 +154,9 @@ const showCreateButton = computed(() => {
 
     <FormModal @success="handleRefresh" />
     <Grid table-title="自动回复列表">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
       <!-- 在工具栏上方放置 Tab 切换 -->
       <template #toolbar-actions>
         <ElTabs

apps/web-ele/src/views/mp/autoReply/modules/content.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
+import {
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 
 defineOptions({ name: 'ReplyContentCell' });
 
@@ -14,7 +19,7 @@ const props = defineProps<{
       {{ props.row.responseContent }}
     </div>
     <div v-else-if="props.row.responseMessageType === 'voice'">
-      <VoicePlayer
+      <WxVoicePlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
       />
@@ -30,17 +35,17 @@ const props = defineProps<{
         props.row.responseMessageType === 'shortvideo'
       "
     >
-      <VideoPlayer
+      <WxVideoPlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
         class="mt-[10px]"
       />
     </div>
     <div v-else-if="props.row.responseMessageType === 'news'">
-      <News :articles="props.row.responseArticles" />
+      <WxNews :articles="props.row.responseArticles" />
     </div>
     <div v-else-if="props.row.responseMessageType === 'music'">
-      <Music
+      <WxMusic
         :title="props.row.responseTitle"
         :description="props.row.responseDescription"
         :thumb-media-url="props.row.responseThumbMediaUrl"

apps/web-ele/src/views/mp/components/index.ts

@@ -1,24 +1,22 @@
 // 统一导出所有模块组件
 
-export { default as AccountSelect } from './wx-account-select/wx-account-select.vue';
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 
-// TODO @hw：还是带着 wx 前缀。。。貌似好点，我的锅！！！
+export { default as WxLocation } from './wx-location/wx-location.vue';
-export { default as Location } from './wx-location/wx-location.vue';
 export * from './wx-material-select/types';
 
-export { default as MaterialSelect } from './wx-material-select/wx-material-select.vue';
+export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
 
 export * from './wx-msg/types';
 
-export { default as Music } from './wx-music/wx-music.vue';
+export { default as WxMusic } from './wx-music/wx-music.vue';
 
-export { default as News } from './wx-news/wx-news.vue';
+export { default as WxNews } from './wx-news/wx-news.vue';
 
 export * from './wx-reply/types';
 
-export { default as ReplySelect } from './wx-reply/wx-reply.vue';
+export { default as WxReplySelect } from './wx-reply/wx-reply.vue';
 
-export { default as VideoPlayer } from './wx-video-play/wx-video-play.vue';
+export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';
 
-export { default as VoicePlayer } from './wx-voice-play/wx-voice-play.vue';
+export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';

apps/web-ele/src/views/mp/components/wx-material-select/index.ts

@@ -1,3 +1,3 @@
-export { default } from './wx-material-select.vue';
-
 export { MaterialType, NewsType } from './types';
+
+export { default } from './wx-material-select.vue';

apps/web-ele/src/views/mp/components/wx-msg/index.ts

@@ -1,3 +1,3 @@
-export { default } from './wx-msg.vue';
-
 export { MsgType } from './types';
+
+export { default } from './wx-msg.vue';

apps/web-ele/src/views/mp/components/wx-news/wx-news.vue

@@ -119,9 +119,9 @@ defineExpose({
 }
 
 .material-img {
-  width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: 100%;
 }
 </style>

apps/web-ele/src/views/mp/draft/data.ts

@@ -1,12 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MpAccountApi } from '#/api/mp/account';
-
-import { getSimpleAccountList } from '#/api/mp/account';
-
-/** 关联数据 */
-let accountList: MpAccountApi.AccountSimple[] = [];
-getSimpleAccountList().then((data) => (accountList = data));
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
@@ -31,15 +24,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: 'ApiSelect',
+      component: 'Input',
-      componentProps: {
-        options: accountList.map((item) => ({
-          label: item.name,
-          value: item.id,
-        })),
-        placeholder: '请选择公众号',
-      },
-      defaultValue: accountList[0]?.id,
     },
   ];
 }

apps/web-ele/src/views/mp/draft/index.vue

@@ -10,6 +10,7 @@ import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDraft, getDraftPage } from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { WxAccountSelect } from '#/views/mp/components';
 import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -28,10 +29,15 @@ function handleRefresh() {
   gridApi.query();
 }
 
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
-    submitOnChange: true,
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -60,6 +66,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           };
         },
       },
+      autoLoad: false,
     },
     rowConfig: {
       keyField: 'mediaId',
@@ -175,6 +182,9 @@ async function handleDelete(row: Article) {
     <FormModal @success="handleRefresh" />
 
     <Grid table-title="草稿列表">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
       <template #toolbar-tools>
         <TableAction
           :actions="[