feat(feature):upload->preview & upload->resultfield (#3707)

* feat(components->upload->resultField): upload和imageupload组件中添加resultField与demo

* feat(components->upload->preview): upload组件中添加自定义预览组件的方法与demo

src/components/Upload/src/BasicUpload.vue

@@ -34,6 +34,8 @@
       @register="registerPreviewModal"
       @list-change="handlePreviewChange"
       @delete="handlePreviewDelete"
+      v-bind:preview-columns="props.previewColumns"
+      v-bind:before-preview-data="props.beforePreviewData"
     />
   </div>
 </template>

src/components/Upload/src/components/FileList.vue

@@ -4,6 +4,7 @@
   import { useSortable } from '@/hooks/web/useSortable';
   import { useModalContext } from '@/components/Modal/src/hooks/useModalContext';
   import { defineComponent, CSSProperties, watch, nextTick, ref, onMounted } from 'vue';
+  import { FileBasicColumn } from '../types/typing';
 
   export default defineComponent({
     name: 'FileList',
@@ -51,7 +52,9 @@
 
       return () => {
         const { columns, actionColumn, dataSource } = props;
-        const columnList = [...columns, actionColumn];
+        let columnList: FileBasicColumn[];
+        columnList = (actionColumn ? [...columns, actionColumn] : [...columns]) as FileBasicColumn[];
+        
         return (
           // x scrollbar
           <div class="overflow-x-auto">

src/components/Upload/src/components/ImageUpload.vue

@@ -37,12 +37,12 @@
   import { uploadContainerProps } from '../props';
   import { isImgTypeByName } from '../helper';
   import { UploadResultStatus } from '@/components/Upload/src/types/typing';
-
+  import { get,omit } from 'lodash-es';
   defineOptions({ name: 'ImageUpload' });
 
   const emit = defineEmits(['change', 'update:value', 'delete']);
   const props = defineProps({
-    ...uploadContainerProps,
+    ...omit(uploadContainerProps,["previewColumns","beforePreviewData"]),
   });
   const { t } = useI18n();
   const { createMessage } = useMessage();
@@ -170,7 +170,12 @@
         name: props.name,
         filename: props.filename,
       });
-      info.onSuccess!(res.data);
+      if(props.resultField){
+        info.onSuccess!(res);
+      }else{
+        // 不传入 resultField 的情况
+        info.onSuccess!(res.data);
+      }
       const value = getValue();
       isInnerOperate.value = true;
       emit('update:value', value);
@@ -185,6 +190,9 @@
     const list = (fileList.value || [])
       .filter((item) => item?.status === UploadResultStatus.DONE)
       .map((item: any) => {
+        if(props.resultField){
+          return get(item?.response, props.resultField)
+        }
         return item?.url || item?.response?.url;
       });
     return props.multiple ? list : list.length > 0 ? list[0] : '';

src/components/Upload/src/components/UploadModal.vue

@@ -66,6 +66,7 @@
   import { warn } from '@/utils/log';
   import FileList from './FileList.vue';
   import { useI18n } from '@/hooks/web/useI18n';
+  import { get } from 'lodash-es';
 
   const props = defineProps({
     ...basicProps,
@@ -190,6 +191,14 @@
       const { data } = ret;
       item.status = UploadResultStatus.SUCCESS;
       item.response = data;
+      if(props.resultField){
+        // 适配预览组件而进行封装
+        item.response = {
+          code:0,
+          message:"upload Success!",
+          url:get(ret, props.resultField)
+        }
+      }
       return {
         success: true,
         error: null,
@@ -241,7 +250,7 @@
       return createMessage.warning(t('component.upload.saveWarn'));
     }
     const fileList: string[] = [];
-
+    
     for (const item of fileListRef.value) {
       const { status, response } = item;
       if (status === UploadResultStatus.SUCCESS && response) {

src/components/Upload/src/components/UploadPreviewModal.vue

@@ -15,30 +15,55 @@
   import FileList from './FileList.vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { previewProps } from '../props';
-  import { PreviewFileItem } from '../types/typing';
+  import { FileBasicColumn, PreviewFileItem } from '../types/typing';
   import { downloadByUrl } from '@/utils/file/download';
   import { createPreviewColumns, createPreviewActionColumn } from './data';
   import { useI18n } from '@/hooks/web/useI18n';
   import { isArray } from '@/utils/is';
+  import { BasicColumn } from '@/components/Table';
 
   const props = defineProps(previewProps);
 
   const emit = defineEmits(['list-change', 'register', 'delete']);
 
-  const columns = createPreviewColumns() as any[];
-  const actionColumn = createPreviewActionColumn({ handleRemove, handleDownload }) as any;
+  let columns : BasicColumn[] | FileBasicColumn[] = createPreviewColumns();
+  let actionColumn :any;
 
   const [register] = useModalInner();
   const { t } = useI18n();
 
-  const fileListRef = ref<PreviewFileItem[]>([]);
+  const fileListRef = ref<PreviewFileItem[] | Array<any>>([]);
+    watch(
+    () => props.previewColumns,
+    () => {
+      if (props.previewColumns.length) {
+        columns = props.previewColumns;
+        actionColumn = null
+      }else{
+        columns=createPreviewColumns();
+        actionColumn = createPreviewActionColumn({ handleRemove, handleDownload })
+      };
+      
+    },
+    { immediate: true },
+  );
+
   watch(
     () => props.value,
     (value) => {
       if (!isArray(value)) value = [];
+      if(props.beforePreviewData){
+        value = props.beforePreviewData(value)  as any
+        fileListRef.value = value
+        return 
+      }
       fileListRef.value = value
         .filter((item) => !!item)
         .map((item) => {
+          if(typeof item!="string"){
+            console.error("return value should be string")
+            return
+          }
           return {
             url: item,
             type: item.split('.').pop() || '',

src/components/Upload/src/props.ts

@@ -4,6 +4,8 @@ import { FileBasicColumn } from './types/typing';
 import type { Options } from 'sortablejs';
 
 import { Merge } from '@/utils/types';
+import { propTypes } from '@/utils/propTypes';
+import { BasicColumn } from '@/components/Table';
 
 type SortableOptions = Merge<
   Omit<Options, 'onEnd'>,
@@ -13,6 +15,19 @@ type SortableOptions = Merge<
   }
 >;
 
+export const previewType = {
+  previewColumns:{
+    type: Array as (PropType<BasicColumn[] | FileBasicColumn[]>),
+    default: [],
+    required: false,
+  },
+  beforePreviewData:{
+    type: Function as PropType<(arg:string[])=>Recordable<any>>,
+    default: null,
+    required: false,
+  },
+}
+
 type ListType = 'text' | 'picture' | 'picture-card';
 
 export const basicProps = {
@@ -69,11 +84,13 @@ export const basicProps = {
     type: Object as PropType<SortableOptions>,
     default: () => ({}),
   },
+  // support xxx.xxx.xx
+  resultField: propTypes.string.def(''),
 };
 
 export const uploadContainerProps = {
   value: {
-    type: Array as PropType<string[]>,
+    type: Array as (PropType<string[]>),
     default: () => [],
   },
   ...basicProps,
@@ -85,18 +102,20 @@ export const uploadContainerProps = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  ...previewType
 };
 
 export const previewProps = {
   value: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  ...previewType
 };
 
 export const fileListProps = {
   columns: {
-    type: Array as PropType<FileBasicColumn[]>,
+    type: Array as (PropType<BasicColumn[] | FileBasicColumn[]> ),
     default: null,
   },
   actionColumn: {

src/components/Upload/src/types/typing.ts

@@ -16,7 +16,7 @@ export interface FileItem {
   percent: number;
   file: File;
   status?: UploadResultStatus;
-  response?: UploadApiResult;
+  response?: UploadApiResult | Recordable<any>;
   uuid: string;
 }