fix: 冲突解决

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

@@ -29,6 +29,7 @@ const total = ref(0); // 总条数
 const accountId = ref(-1);
 provide('accountId', accountId);
 
+// TODO @dlyan @AI：这里是不是应该都用 grid；类似 yudao-ui-admin-vben-v5/apps/web-ele/src/views/mp/autoReply/index.vue
 const queryParams = reactive({
   accountId,
   pageNo: 1,
@@ -118,7 +119,13 @@ async function handleDelete(id: number) {
               </span>
             </template>
             <!-- 列表 -->
-            <ImageTable :list="list" :loading="loading" @delete="handleDelete">
+            <ImageTable
+              :key="`image-${type}`"
+              :list="list"
+              :loading="loading"
+              @delete="handleDelete"
+              @refresh="getList"
+            >
               <template #toolbar-tools>
                 <UploadFile
                   v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
@@ -149,7 +156,13 @@ async function handleDelete(id: number) {
               </span>
             </template>
             <!-- 列表 -->
-            <VoiceTable :list="list" :loading="loading" @delete="handleDelete">
+            <VoiceTable
+              :key="`voice-${type}`"
+              :list="list"
+              :loading="loading"
+              @delete="handleDelete"
+              @refresh="getList"
+            >
               <template #toolbar-tools>
                 <UploadFile
                   v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
@@ -180,7 +193,13 @@ async function handleDelete(id: number) {
               </span>
             </template>
             <!-- 列表 -->
-            <VideoTable :list="list" :loading="loading" @delete="handleDelete">
+            <VideoTable
+              :key="`video-${type}`"
+              :list="list"
+              :loading="loading"
+              @delete="handleDelete"
+              @refresh="getList"
+            >
               <template #toolbar-tools>
                 <Button
                   v-if="hasAccessByCodes(['mp:material:upload-permanent'])"

apps/web-antd/src/views/mp/material/modules/image-table.vue

@@ -6,6 +6,7 @@ import { nextTick, onMounted, watch } from 'vue';
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { useImageGridColumns } from './data';
+import { $t } from '@vben/locales';
 
 const props = defineProps<{
   list: MpMaterialApi.Material[];
@@ -14,6 +15,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   delete: [v: number];
+  refresh: [];
 }>();
 
 const columns = useImageGridColumns();
@@ -35,6 +37,21 @@ const [Grid, gridApi] = useVbenVxeGrid<MpMaterialApi.Material>({
       refresh: true,
     },
     showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          // 数据由父组件管理，触发刷新事件后返回当前数据
+          emit('refresh');
+          // 返回当前数据，避免覆盖
+          return {
+            list: Array.isArray(props.list) ? props.list : [],
+            total: props.list?.length || 0,
+          };
+        },
+      },
+      enabled: true,
+      autoLoad: false,
+    },
   },
 });
 
@@ -53,7 +70,7 @@ watch(
     await nextTick();
     updateGridData(data);
   },
-  { flush: 'post' },
+  { immediate: true, flush: 'post' },
 );
 
 watch(
@@ -89,7 +106,7 @@ onMounted(async () => {
       <TableAction
         :actions="[
           {
-            label: '删除',
+            label: $t('common.delete'),
             type: 'link',
             danger: true,
             icon: ACTION_ICON.DELETE,

apps/web-antd/src/views/mp/material/modules/video-table.vue

@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpMaterialApi } from '#/api/mp/material';
 
-import { watch } from 'vue';
+import { nextTick, watch } from 'vue';
 
 import { $t } from '@vben/locales';
 import { openWindow } from '@vben/utils';
@@ -19,6 +19,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   delete: [v: number];
+  refresh: [];
 }>();
 
 const columns = useVideoGridColumns();
@@ -39,20 +40,40 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
     },
     showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          // 数据由父组件管理，触发刷新事件后返回当前数据
+          emit('refresh');
+          // 返回当前数据，避免覆盖
+          return {
+            list: Array.isArray(props.list) ? props.list : [],
+            total: props.list?.length || 0,
+          };
+        },
+      },
+      enabled: true,
+      autoLoad: false,
+    },
   } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
+function updateGridData(data: MpMaterialApi.Material[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
 watch(
   () => props.list,
-  (list: MpMaterialApi.Material[]) => {
+  async (list: MpMaterialApi.Material[]) => {
     const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
+    await nextTick();
+    updateGridData(data);
   },
-  { immediate: true },
+  { immediate: true, flush: 'post' },
 );
 
 watch(

apps/web-antd/src/views/mp/material/modules/voice-table.vue

@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpMaterialApi } from '#/api/mp/material';
 
-import { watch } from 'vue';
+import { nextTick, watch } from 'vue';
 
 import { $t } from '@vben/locales';
 import { openWindow } from '@vben/utils';
@@ -19,6 +19,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   delete: [v: number];
+  refresh: [];
 }>();
 
 const columns = useVoiceGridColumns();
@@ -39,20 +40,40 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
     },
     showOverflow: 'tooltip',
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          // 数据由父组件管理，触发刷新事件后返回当前数据
+          emit('refresh');
+          // 返回当前数据，避免覆盖
+          return {
+            list: Array.isArray(props.list) ? props.list : [],
+            total: props.list?.length || 0,
+          };
+        },
+      },
+      enabled: true,
+      autoLoad: false,
+    },
   } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
+function updateGridData(data: MpMaterialApi.Material[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
 watch(
   () => props.list,
-  (list: MpMaterialApi.Material[]) => {
+  async (list: MpMaterialApi.Material[]) => {
     const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
+    await nextTick();
+    updateGridData(data);
   },
-  { immediate: true },
+  { immediate: true, flush: 'post' },
 );
 
 watch(