feat: mp tag

apps/web-antd/src/views/mp/tag/data.ts

@@ -1,5 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } 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 useFormSchema(): VbenFormSchema[] {
@@ -33,6 +39,26 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Select',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+        allowClear: true,
+      },
+      defaultValue: accountList[0]?.id,
+    },
+  ];
+}
+
 /** 表格列配置 */
 export function useGridColumns(): VxeGridPropTypes.Columns {
   return [

apps/web-antd/src/views/mp/tag/index.vue

@@ -2,72 +2,39 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpTagApi } from '#/api/mp/tag';
 
-import { onMounted, ref } from 'vue';
-
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getSimpleAccountList } from '#/api/mp/account';
 import { deleteTag, getTagPage, syncTag } from '#/api/mp/tag';
 import { $t } from '#/locales';
 
-import { useGridColumns } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-const accountId = ref(-1);
-const accountOptions = ref<{ label: string; value: number }[]>([]);
-
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
-async function getAccountList() {
-  const res = await getSimpleAccountList();
-  if (res.length > 0) {
-    accountId.value = res[0]?.id as number;
-    accountOptions.value = res.map((item) => ({
-      label: item.name,
-      value: item.id,
-    }));
-    gridApi.formApi.setValues({
-      accountId: accountId.value,
-    });
-  } else {
-    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    // await push({ name: 'MpAccount' });
-    // tabs.closeCurrentTab();
-  }
-  gridApi.setState({
-    formOptions: {
-      schema: [
-        {
-          fieldName: 'accountId',
-          label: '公众号',
-          component: 'Select',
-          componentProps: {
-            options: accountOptions.value || [],
-          },
-        },
-      ],
-    },
-  });
-}
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
 /** 创建标签 */
-function handleCreate() {
-  formModalApi.setData({ accountId: accountId.value }).open();
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  formModalApi.setData({ accountId }).open();
 }
 
 /** 编辑标签 */
-function handleEdit(row: MpTagApi.Tag) {
-  formModalApi.setData({ row, accountId: accountId.value }).open();
+async function handleEdit(row: MpTagApi.Tag) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  formModalApi.setData({ row, accountId }).open();
 }
 
 /** 删除标签 */
@@ -88,12 +55,20 @@ async function handleDelete(row: MpTagApi.Tag) {
 }
 /** 同步标签 */
 async function handleSync() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  await confirm('是否确认同步标签？');
   const hideLoading = message.loading({
-    content: '是否确认同步标签？',
+    content: '正在同步标签...',
     duration: 0,
   });
   try {
-    await syncTag(accountId.value);
+    await syncTag(accountId);
     message.success({
       content: '同步标签成功',
     });
@@ -105,7 +80,7 @@ async function handleSync() {
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
-    schema: [],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -114,7 +89,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          accountId.value = formValues.accountId;
           return await getTagPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -132,10 +106,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<MpTagApi.Tag>,
 });
-
-onMounted(async () => {
-  await getAccountList();
-});
 </script>
 
 <template>