fix: todo 处理

2025-12-05 11:00:48 +08:00
parent 5a6122ab75
commit 5bae28516c
16 changed files with 792 additions and 908 deletions
--- a/apps/web-ele/src/views/mp/material/index.vue
+++ b/apps/web-ele/src/views/mp/material/index.vue
@@ -142,7 +142,13 @@ function handleSizeChange(pageSize: 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'])"
@@ -174,7 +180,13 @@ function handleSizeChange(pageSize: 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'])"
@@ -206,7 +218,13 @@ function handleSizeChange(pageSize: 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>
                <ElButton
                  v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
@@ -218,7 +236,7 @@ function handleSizeChange(pageSize: number) {
              </template>
            </VideoTable>
            <!-- 新建视频的弹窗 -->
-            <UploadVideo v-model="showCreateVideo" @uploaded="getList" />
+            <UploadVideo v-model:open="showCreateVideo" @uploaded="getList" />
            <!-- 分页组件 -->
            <div class="mt-4 flex justify-end">
              <ElPagination
--- a/apps/web-ele/src/views/mp/material/modules/UploadFile.vue
+++ b/apps/web-ele/src/views/mp/material/modules/UploadFile.vue
@@ -19,7 +19,6 @@ import {

 const props = defineProps<{ type: UploadType }>();

-// TODO @dylan：是不是要和 antd 的 props 定义相同哈？这样后续两侧维护方便点
 const emit = defineEmits<{
  uploaded: [v: void];
 }>();
@@ -60,8 +59,11 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {

    if (res.code !== 0) {
      ElMessage.error(`上传出错：${res.msg}`);
-      // TODO @dylan：这里有个 linter 错误。
-      onError?.(new Error(res.msg));
+      const error = new Error(res.msg) as any;
+      error.status = 200;
+      error.method = 'POST';
+      error.url = UPLOAD_URL;
+      onError?.(error);
      return;
    }

--- a/apps/web-ele/src/views/mp/material/modules/UploadVideo.vue
+++ b/apps/web-ele/src/views/mp/material/modules/UploadVideo.vue
@@ -20,18 +20,17 @@ import {

 import { beforeVideoUpload, HEADERS, UPLOAD_URL, UploadType } from './upload';

-// TODO @dylan：是不是要和 antd 的 props 定义相同哈？这样后续两侧维护方便点
 withDefaults(
  defineProps<{
-    modelValue?: boolean;
+    open?: boolean;
  }>(),
  {
-    modelValue: false,
+    open: false,
  },
 );

 const emit = defineEmits<{
-  'update:modelValue': [v: boolean];
+  'update:open': [v: boolean];
  uploaded: [v: void];
 }>();

@@ -45,7 +44,7 @@ const uploadRules = {
 };

 function handleCancel() {
-  emit('update:modelValue', false);
+  emit('update:open', false);
 }

 const fileList = ref<any[]>([]);
@@ -87,7 +86,11 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {

    if (res.code !== 0) {
      ElMessage.error(`上传出错：${res.msg}`);
-      onError?.(new Error(res.msg));
+      const error = new Error(res.msg) as any;
+      error.status = 200;
+      error.method = 'POST';
+      error.url = UPLOAD_URL;
+      onError?.(error);
      return;
    }

@@ -96,7 +99,7 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {
    uploadData.title = '';
    uploadData.introduction = '';

-    emit('update:modelValue', false);
+    emit('update:open', false);
    ElMessage.success('上传成功');
    onSuccess?.(res);
    emit('uploaded');
@@ -109,7 +112,7 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {

 <template>
  <ElDialog
-    :model-value="modelValue"
+    :model-value="open"
    title="新建视频"
    width="600px"
    @close="handleCancel"
--- a/apps/web-ele/src/views/mp/material/modules/image-table.vue
+++ b/apps/web-ele/src/views/mp/material/modules/image-table.vue
@@ -16,6 +16,7 @@ const props = defineProps<{

 const emit = defineEmits<{
  delete: [v: number];
+  refresh: [];
 }>();

 const columns = useImageGridColumns();
@@ -37,6 +38,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,
+    },
  },
 });

@@ -55,7 +71,7 @@ watch(
    await nextTick();
    updateGridData(data);
  },
-  { flush: 'post' },
+  { immediate: true, flush: 'post' },
 );

 watch(
--- a/apps/web-ele/src/views/mp/material/modules/video-table.vue
+++ b/apps/web-ele/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(
--- a/apps/web-ele/src/views/mp/material/modules/voice-table.vue
+++ b/apps/web-ele/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(