feat: integrate upload components into form by default

vben
1 parent 99303a99
Showing 5 changed files with 15 additions and 15 deletions
CHANGELOG.zh_CN.md
src/components/Form/src/FormItem.tsx
src/components/Form/src/componentMap.ts
src/components/Upload/src/data.tsx
src/views/demo/comp/upload/index.vue
@@ -8,6 +8,7 @@
 - 新增个人页
 - 新增表单页
 - 新增详情页
+- 将上传组件默认集成到 form
  
 ### 🎫 Chores
  
@@ -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')) {
@@ -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(&#39;RangePicker&#39;, 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);
 }
+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[] {
@@ -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,
       },
     },
   ];