From b97fe47afd9af3197158e9891fc3e05cc550ba2f Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 7 Apr 2025 12:53:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=9B=B4=E6=8E=A5=E4=BD=BF=E7=94=A8.val?=
 =?UTF-8?q?ue=E6=97=A0=E6=B3=95=E8=A7=A6=E5=8F=91useForm=E7=9A=84=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0(=E5=8E=9F=E7=94=9F=E6=98=AF=E6=AD=A3=E5=B8=B8?=
 =?UTF-8?q?=E7=9A=84)=20=E9=9C=80=E8=A6=81=E4=BF=AE=E6=94=B9=E5=9C=B0?=
 =?UTF-8?q?=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/upload/src/hook.ts         | 14 +++-
 .../views/演示使用自行删除/upload/index.vue   | 11 ++-
 .../演示使用自行删除/upload/upload-modal.vue  | 70 +++++++++++++++++++
 3 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue

diff --git a/apps/web-antd/src/components/upload/src/hook.ts b/apps/web-antd/src/components/upload/src/hook.ts
index 1b5785a9..313ceae4 100644
--- a/apps/web-antd/src/components/upload/src/hook.ts
+++ b/apps/web-antd/src/components/upload/src/hook.ts
@@ -204,7 +204,12 @@ export function useUpload(
         if (props.maxCount === 1) {
           bindValue.value = ossId;
         } else {
-          (bindValue.value as string[]).push(ossId);
+          // 给默认值
+          if (!Array.isArray(bindValue.value)) {
+            bindValue.value = [];
+          }
+          // 直接使用.value无法触发useForm的更新(原生是正常的) 需要修改地址
+          bindValue.value = [...bindValue.value, ossId];
         }
         break;
       }
@@ -344,11 +349,16 @@ export function useUpload(
         !props.keepMissingId &&
         props.maxCount !== 1
       ) {
-        bindValue.value = (bindValue.value as string[]).filter((ossId) =>
+        // 给默认值
+        if (!Array.isArray(bindValue.value)) {
+          bindValue.value = [];
+        }
+        bindValue.value = bindValue.value.filter((ossId) =>
           resp.map((res) => res.ossId).includes(ossId),
         );
       }
     },
+    // TODO: deepWatch参数需要删除
     { immediate: true, deep: props.deepWatch },
   );
 
diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
index 29860163..5bf30a01 100644
--- a/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/upload/index.vue
@@ -5,7 +5,7 @@ import type { CustomGetter } from '#/components/upload/src/props';
 
 import { h, ref } from 'vue';
 
-import { CodeMirror, Page } from '@vben/common-ui';
+import { CodeMirror, Page, useVbenModal } from '@vben/common-ui';
 
 import { useClipboard } from '@vueuse/core';
 import { Alert, Card, Modal, RadioGroup, Switch } from 'ant-design-vue';
@@ -14,6 +14,7 @@ import { FileUpload, ImageUpload } from '#/components/upload';
 
 import { useFileType, useImageType } from './hook';
 import sql from './insert.sql?raw';
+import uploadModal from './upload-modal.vue';
 
 const singleImageId = ref('1905537674682916865');
 const singleFileId = ref('1905191167882518529');
@@ -53,6 +54,10 @@ const customThumbnailUrl: CustomGetter<undefined> = () => {
 const { copy } = useClipboard({ legacy: true });
 
 const animationEnable = ref(false);
+
+const [UploadModal, uploadModalApi] = useVbenModal({
+  connectedComponent: uploadModal,
+});
 </script>
 
 <template>
@@ -63,6 +68,10 @@ const animationEnable = ref(false);
       <CodeMirror class="mt-2" v-model="sql" language="sql" readonly />
     </Card>
     <div class="grid grid-cols-2 gap-4">
+      <Card title="表单上传">
+        <a-button @click="uploadModalApi.open()">打开</a-button>
+        <UploadModal />
+      </Card>
       <Card title="单上传, 会绑定为string" size="small">
         <ImageUpload v-model:value="singleImageId" />
         当前绑定值: {{ singleImageId }}
diff --git a/apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue b/apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue
new file mode 100644
index 00000000..d9d08bd3
--- /dev/null
+++ b/apps/web-antd/src/views/演示使用自行删除/upload/upload-modal.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import { JsonPreview, useVbenModal } from '@vben/common-ui';
+
+import { Modal, Space } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: [
+    {
+      label: '图片上传多图',
+      component: 'ImageUpload',
+      fieldName: 'ossIds',
+      componentProps: {
+        maxCount: 3,
+      },
+    },
+    {
+      label: '图片上传单图',
+      component: 'ImageUpload',
+      fieldName: 'ossId',
+      componentProps: {
+        maxCount: 1,
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+async function getValues() {
+  try {
+    const v = await formApi.getValues();
+    console.log(v);
+
+    Modal.info({
+      content: () => h(JsonPreview, { data: v }),
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleAssign() {
+  const ids = ['1908761290673315841', '1907738568539332610'];
+  await formApi.setValues({
+    ossIds: ids,
+    ossId: ids[0],
+  });
+}
+
+const [BasicModal] = useVbenModal({
+  title: '上传',
+  footer: false,
+});
+</script>
+
+<template>
+  <BasicModal>
+    <div class="flex flex-col">
+      <Space>
+        <a-button @click="handleAssign">赋值</a-button>
+        <a-button @click="getValues">获取值</a-button>
+      </Space>
+      <BasicForm />
+    </div>
+  </BasicModal>
+</template>