feat(upload->previewColumns): Adapt functions && chore upload demo (#…

…3799)

* feat(upload->previewColumns): add function capability with delete fileList

* chore(upload->demo): split file && add previewColumns fn demo

* type(upload): optional  handleRemove

* type(upload): remove  optional  handleRemove

* feat(upload->previewCol): add enhanceing  handleAdd && handleDownload

* chore(upload->preview): remove  previewColumns

src/components/Upload/src/BasicUpload.vue

@@ -36,6 +36,7 @@
 
     <UploadPreviewModal
       :value="fileList"
+      :max-number="bindValue.maxNumber"
       @register="registerPreviewModal"
       @list-change="handlePreviewChange"
       @delete="handlePreviewDelete"

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

@@ -21,6 +21,9 @@
   import { useI18n } from '@/hooks/web/useI18n';
   import { isArray } from '@/utils/is';
   import { BasicColumn } from '@/components/Table';
+  import { isFunction } from '@/utils/is';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
 
   const props = defineProps(previewProps);
 
@@ -36,9 +39,11 @@
   watch(
     () => props.previewColumns,
     () => {
-      if (props.previewColumns.length) {
+      if (Array.isArray(props.previewColumns) && props.previewColumns.length) {
         columns = props.previewColumns;
         actionColumn = null;
+      } else if (isFunction(props.previewColumns)) {
+        columns = props.previewColumns({ handleRemove, handleAdd });
       } else {
         columns = createPreviewColumns();
         actionColumn = createPreviewActionColumn({ handleRemove, handleDownload });
@@ -74,18 +79,29 @@
   );
 
   // 删除
-  function handleRemove(record: PreviewFileItem) {
-    const index = fileListRef.value.findIndex((item) => item.url === record.url);
+  function handleRemove(record: PreviewFileItem | Record<string, any>, urlKey = 'url') {
+    const index = fileListRef.value.findIndex((item) => item[urlKey] === record[urlKey]);
     if (index !== -1) {
       const removed = fileListRef.value.splice(index, 1);
-      emit('delete', removed[0].url);
+      emit('delete', removed[0][urlKey]);
       emit(
         'list-change',
-        fileListRef.value.map((item) => item.url),
+        fileListRef.value.map((item) => item[urlKey]),
       );
     }
   }
-
+  // 添加
+  function handleAdd(record: PreviewFileItem | Record<string, any>, urlKey = 'url') {
+    const { maxNumber } = props;
+    if (fileListRef.value.length + fileListRef.value.length > maxNumber) {
+      return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
+    }
+    fileListRef.value = [...fileListRef.value, record];
+    emit(
+      'list-change',
+      fileListRef.value.map((item) => item[urlKey]),
+    );
+  }
   // 下载
   function handleDownload(record: PreviewFileItem) {
     const { url = '' } = record;

src/components/Upload/src/props.ts

@@ -14,11 +14,13 @@ type SortableOptions = Merge<
     // ...可扩展
   }
 >;
-
+type previewColumnsFnType = {
+  handleRemove:(record:Record<string,any>,key:string)=>any,
+  handleAdd:(record:Record<string,any>,key:string)=>any,
+}
 export const previewType = {
   previewColumns: {
-    type: Array as PropType<BasicColumn[] | FileBasicColumn[]>,
-    default: [],
+    type: [Array,Function] as PropType<BasicColumn[] | ((arg:previewColumnsFnType) => BasicColumn[])>,
     required: false,
   },
   beforePreviewData: {
@@ -111,6 +113,10 @@ export const previewProps = {
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  maxNumber: {
+    type: Number as PropType<number>,
+    default: 1,
+  },
   ...previewType,
 };
 

src/views/demo/comp/upload/Upload1.vue

@@ -0,0 +1,28 @@
+<template>
+
+    <Alert message="基础示例" />
+    <BasicUpload
+      :maxSize="20"
+      :maxNumber="10"
+      @change="handleChange"
+      :api="uploadApi"
+      class="my-5"
+      :accept="['image/*']"
+    />
+
+</template>
+
+<script setup lang="ts">
+  import { BasicUpload } from '@/components/Upload';
+  import { uploadApi } from '@/api/sys/upload';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  import { Alert } from 'ant-design-vue';
+  function handleChange(list: string[]) {
+    createMessage.success(`已上传文件${JSON.stringify(list)}`);
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/demo/comp/upload/Upload2.vue

@@ -0,0 +1,56 @@
+<template>
+  <Alert message="嵌入表单,加入表单校验" />
+  <BasicForm @register="registerValiate" class="my-5" />
+</template>
+
+<script setup lang="ts">
+  import { uploadApi } from '@/api/sys/upload';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { Alert } from 'ant-design-vue';
+  const schemasValiate: FormSchema[] = [
+    {
+      field: 'field1',
+      component: 'Upload',
+      label: '字段1',
+      rules: [{ required: true, message: '请选择上传文件' }],
+      componentProps: {
+        api: uploadApi,
+      },
+    },
+    {
+      field: 'field2',
+      component: 'ImageUpload',
+      label: '字段2(ImageUpload)',
+      colProps: {
+        span: 8,
+      },
+      componentProps: {
+        api: uploadApi,
+      },
+    },
+  ];
+  const [registerValiate, { getFieldsValue: getFieldsValueValiate, validate }] = useForm({
+    labelWidth: 160,
+    schemas: schemasValiate,
+    actionColOptions: {
+      span: 18,
+    },
+    submitFunc: () => {
+      return new Promise((resolve) => {
+        validate()
+          .then(() => {
+            resolve();
+            console.log(getFieldsValueValiate());
+            createMessage.success(`请到控制台查看结果`);
+          })
+          .catch(() => {
+            createMessage.error(`请输入必填项`);
+          });
+      });
+    },
+  });
+</script>
+
+<style scoped></style>

src/views/demo/comp/upload/Upload3.vue

@@ -0,0 +1,73 @@
+<template>
+  <Alert message="嵌入表单,加入resultFiled自定义返回值" />
+    <BasicForm @register="registerCustom" class="my-5" />
+</template>
+
+<script setup lang="ts">
+  import { uploadApi } from '@/api/sys/upload';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import { Alert } from 'ant-design-vue';
+  const schemasCustom: FormSchema[] = [
+    {
+      field: 'field3',
+      component: 'Upload',
+      label: '字段3',
+      componentProps: {
+        resultField: 'data3.url',
+        api: (file, progress) => {
+          return new Promise((resolve) => {
+            uploadApi(file, progress).then((uploadApiResponse) => {
+              resolve({
+                code: 200,
+                data3: {
+                  url: uploadApiResponse.data.url,
+                },
+              });
+            });
+          });
+        },
+      },
+    },
+    {
+      field: 'field4',
+      component: 'ImageUpload',
+      label: '字段4(ImageUpload)',
+      colProps: {
+        span: 8,
+      },
+      componentProps: {
+        resultField: 'data4.url',
+        api: (file, progress) => {
+          return new Promise((resolve) => {
+            uploadApi(file, progress).then((uploadApiResponse) => {
+              resolve({
+                code: 200,
+                data4: {
+                  url: uploadApiResponse.data.url,
+                },
+              });
+            });
+          });
+        },
+      },
+    },
+  ];
+  const [registerCustom, { getFieldsValue: getFieldsValueCustom }] = useForm({
+    labelWidth: 160,
+    schemas: schemasCustom,
+    actionColOptions: {
+      span: 18,
+    },
+    submitFunc: () => {
+      return new Promise((resolve) => {
+        console.log(getFieldsValueCustom());
+        resolve();
+        createMessage.success(`请到控制台查看结果`);
+      });
+    },
+  });
+</script>
+
+<style scoped></style>