From be2b8a7e175033dace7a521ab26cd319c5cfdea6 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Wed, 18 Nov 2020 23:10:29 +0800
Subject: [PATCH] feat: integrate upload components into form by default

---
 CHANGELOG.zh_CN.md                      |  1 +
 src/components/Form/src/FormItem.tsx    |  2 +-
 src/components/Form/src/componentMap.ts |  3 +++
 src/components/Upload/src/data.tsx      |  7 +++++--
 src/views/demo/comp/upload/index.vue    | 17 +++++------------
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 09f3acb634b..71ece68fb7d 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -8,6 +8,7 @@
 - 新增个人页
 - 新增表单页
 - 新增详情页
+- 将上传组件默认集成到 form
 
 ### 🎫 Chores
 
diff --git a/src/components/Form/src/FormItem.tsx b/src/components/Form/src/FormItem.tsx
index e6ecdfc02bc..fa0160e04d1 100644
--- a/src/components/Form/src/FormItem.tsx
+++ b/src/components/Form/src/FormItem.tsx
@@ -158,7 +158,7 @@ export default defineComponent({
           ) {
             rule.type = 'object';
           }
-          if (component.includes('RangePicker')) {
+          if (component.includes('RangePicker') || component.includes('Upload')) {
             rule.type = 'array';
           }
           if (component.includes('InputNumber')) {
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 6972134c507..be2cee17215 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -18,6 +18,7 @@ import {
   TreeSelect,
 } from 'ant-design-vue';
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
+import { BasicUpload } from '/@/components/Upload';
 
 const componentMap = new Map<ComponentType, any>();
 
@@ -48,6 +49,8 @@ componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
 
+componentMap.set('Upload', BasicUpload);
+
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
 }
diff --git a/src/components/Upload/src/data.tsx b/src/components/Upload/src/data.tsx
index 32abe9b43ca..4b0bd8b6dd9 100644
--- a/src/components/Upload/src/data.tsx
+++ b/src/components/Upload/src/data.tsx
@@ -1,7 +1,10 @@
+import type { BasicColumn, ActionItem } from '/@/components/Table';
+
+import { FileItem, PreviewFileItem, UploadResultStatus } from './types';
 import { checkImgType, isImgTypeByName } from './utils';
 import { Progress, Tag } from 'ant-design-vue';
-import { FileItem, PreviewFileItem, UploadResultStatus } from './types';
-import { BasicColumn, ActionItem, TableAction } from '/@/components/Table/index';
+
+import TableAction from '/@/components/Table/src/components/TableAction';
 
 // 文件上传列表
 export function createTableColumns(): BasicColumn[] {
diff --git a/src/views/demo/comp/upload/index.vue b/src/views/demo/comp/upload/index.vue
index 8298867891f..361c90019e0 100644
--- a/src/views/demo/comp/upload/index.vue
+++ b/src/views/demo/comp/upload/index.vue
@@ -9,31 +9,24 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, h } from 'vue';
+  import { defineComponent } from 'vue';
   import { BasicUpload } from '/@/components/Upload';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
 
   import { uploadApi } from '/@/api/sys/upload';
-  //   import { Alert } from 'ant-design-vue';
 
   const schemas: FormSchema[] = [
     {
       field: 'field1',
-      component: 'Input',
+      component: 'Upload',
       label: '字段1',
       colProps: {
         span: 8,
       },
-      rules: [{ required: true, type: 'array', message: '请选择上传文件' }],
-      render: ({ model, field }) => {
-        return h(BasicUpload, {
-          value: model[field],
-          api: uploadApi,
-          onChange: (val: string[]) => {
-            model[field] = val;
-          },
-        });
+      rules: [{ required: true, message: '请选择上传文件' }],
+      componentProps: {
+        api: uploadApi,
       },
     },
   ];