Pre Merge pull request !24 from 玲娜贝er/dev

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 },
   );
 

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 }}

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>