From 5584c6a4c7f8b3ee730fc876bb57dd64a3a94870 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=AA=E5=BF=86=E5=A4=A9=E5=A0=82?= <1455668754@qq.com>
Date: Wed, 18 Oct 2023 10:59:45 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20Form=E5=A2=9E=E5=8A=A0=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/index.ts                  |   1 +
 src/components/Form/src/componentMap.ts       |  42 +--
 .../Form/src/components/ImageUpload.vue       | 254 ++++++++++++++++++
 src/components/Form/src/helper.ts             |   1 +
 src/components/Form/src/types/index.ts        |   1 +
 5 files changed, 279 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Form/src/components/ImageUpload.vue

diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index d85b3c517f3..d3be25e95f1 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -13,5 +13,6 @@ export { default as ApiTree } from './src/components/ApiTree.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as ApiCascader } from './src/components/ApiCascader.vue';
 export { default as ApiTransfer } from './src/components/ApiTransfer.vue';
+export { default as ImageUpload } from './src/components/ImageUpload.vue';
 
 export { BasicForm };
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index b448ace99b7..71d893c42ab 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -5,33 +5,35 @@ import type { ComponentType } from './types/index';
  * Component list, register here to setting it in the form
  */
 import {
-  Input,
-  Select,
-  Radio,
-  Checkbox,
   AutoComplete,
   Cascader,
+  Checkbox,
   DatePicker,
+  Divider,
+  Input,
   InputNumber,
+  Radio,
+  Rate,
+  Select,
+  Slider,
   Switch,
   TimePicker,
   TreeSelect,
-  Slider,
-  Rate,
-  Divider,
 } from 'ant-design-vue';
-
-import ApiRadioGroup from './components/ApiRadioGroup.vue';
-import RadioButtonGroup from './components/RadioButtonGroup.vue';
-import ApiSelect from './components/ApiSelect.vue';
-import ApiTree from './components/ApiTree.vue';
-import ApiTreeSelect from './components/ApiTreeSelect.vue';
-import ApiCascader from './components/ApiCascader.vue';
-import ApiTransfer from './components/ApiTransfer.vue';
-import { BasicUpload } from '/@/components/Upload';
-import { StrengthMeter } from '/@/components/StrengthMeter';
-import { IconPicker } from '/@/components/Icon';
-import { CountdownInput } from '/@/components/CountDown';
+import { BasicUpload } from '@/components/Upload';
+import { StrengthMeter } from '@/components/StrengthMeter';
+import { IconPicker } from '@/components/Icon';
+import { CountdownInput } from '@/components/CountDown';
+import {
+  ApiCascader,
+  ApiRadioGroup,
+  ApiSelect,
+  ApiTransfer,
+  ApiTree,
+  ApiTreeSelect,
+  ImageUpload,
+  RadioButtonGroup,
+} from '@/components/Form';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -42,7 +44,7 @@ componentMap.set('InputSearch', Input.Search);
 componentMap.set('InputTextArea', Input.TextArea);
 componentMap.set('InputNumber', InputNumber);
 componentMap.set('AutoComplete', AutoComplete);
-
+componentMap.set('ImageUpload', ImageUpload);
 componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
 componentMap.set('ApiTree', ApiTree);
diff --git a/src/components/Form/src/components/ImageUpload.vue b/src/components/Form/src/components/ImageUpload.vue
new file mode 100644
index 00000000000..362a0fdfb78
--- /dev/null
+++ b/src/components/Form/src/components/ImageUpload.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="clearfix">
+    <a-upload
+      v-model:file-list="fileList"
+      :list-type="listType"
+      :multiple="multiple"
+      :max-count="maxCount"
+      :customRequest="handleCustomRequest"
+      :before-upload="handleBeforeUpload"
+      v-bind="$attrs"
+      @preview="handlePreview"
+      v-model:value="state"
+    >
+      <div v-if="fileList.length < maxCount">
+        <plus-outlined />
+        <div style="margin-top: 8px">
+          {{ t('component.upload.upload') }}
+        </div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType, reactive, ref, watch } from 'vue';
+  import { message, Modal, Upload, UploadProps } from 'ant-design-vue';
+  import { UploadFile } from 'ant-design-vue/lib/upload/interface';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { join } from 'lodash-es';
+  import { buildShortUUID } from '@/utils/uuid';
+  import { isArray, isNotEmpty, isUrl } from '@/utils/is';
+  import { useRuleFormItem } from '@/hooks/component/useFormItem';
+  import { uploadApi } from '@/api/sys/upload';
+  import { useAttrs } from '@vben/hooks';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+
+  type ImageUploadType = 'text' | 'picture' | 'picture-card';
+
+  export default defineComponent({
+    name: 'ImageUpload',
+    components: {
+      PlusOutlined,
+      AUpload: Upload,
+      AModal: Modal,
+    },
+    inheritAttrs: false,
+    props: {
+      value: [Array, String],
+      api: {
+        type: Function as PropType<(file: UploadFile) => Promise<any>>,
+        default: uploadApi,
+      },
+      listType: {
+        type: String as PropType<ImageUploadType>,
+        default: () => 'picture-card',
+      },
+      // 文件类型
+      fileType: {
+        type: Array,
+        default: () => ['image/png', 'image/jpeg'],
+      },
+      multiple: {
+        type: Boolean,
+        default: () => false,
+      },
+      // 最大数量的文件
+      maxCount: {
+        type: Number,
+        default: () => 1,
+      },
+      // 最小数量的文件
+      minCount: {
+        type: Number,
+        default: () => 0,
+      },
+      // 文件最大多少MB
+      maxSize: {
+        type: Number,
+        default: () => 2,
+      },
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      const attrs = useAttrs();
+      const { t } = useI18n();
+      const previewVisible = ref(false);
+      const previewImage = ref('');
+      const emitData = ref<any[] | any | undefined>();
+      const fileList = ref<UploadFile[]>([]);
+
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+
+      const fileState = reactive<{
+        newList: any[];
+        newStr: string;
+        oldStr: string;
+      }>({
+        newList: [],
+        newStr: '',
+        oldStr: '',
+      });
+
+      watch(
+        () => fileList.value,
+        (v) => {
+          fileState.newList = v
+            .filter((item: any) => {
+              return item?.url && item.status === 'done' && isUrl(item?.url);
+            })
+            .map((item: any) => item?.url);
+          fileState.newStr = join(fileState.newList);
+          // 不相等代表数据变更
+          if (fileState.newStr !== fileState.oldStr) {
+            fileState.oldStr = fileState.newStr;
+            emitData.value = props.multiple ? fileState.newList : fileState.newStr;
+            state.value = props.multiple ? fileState.newList : fileState.newStr;
+          }
+        },
+        {
+          deep: true,
+        },
+      );
+
+      watch(
+        () => state.value,
+        (v) => {
+          changeFileValue(v);
+          emit('update:value', v);
+        },
+      );
+
+      function changeFileValue(value: any) {
+        const stateStr = props.multiple ? join((value as string[]) || []) : value || '';
+        if (stateStr !== fileState.oldStr) {
+          fileState.oldStr = stateStr;
+          let list: string[] = [];
+          if (props.multiple) {
+            if (isNotEmpty(value)) {
+              if (isArray(value)) {
+                list = value as string[];
+              } else {
+                list.push(value as string);
+              }
+            }
+          } else {
+            if (isNotEmpty(value)) {
+              list.push(value as string);
+            }
+          }
+          fileList.value = list.map((item) => {
+            const uuid = buildShortUUID();
+            return {
+              uid: uuid,
+              name: uuid,
+              status: 'done',
+              url: item,
+            };
+          });
+        }
+      }
+
+      /** 关闭查看 */
+      const handleCancel = () => {
+        previewVisible.value = false;
+      };
+
+      /** 查看图片 */
+      // @ts-ignore
+      const handlePreview = async (file: UploadProps['fileList'][number]) => {
+        if (!file.url && !file.preview) {
+          file.preview = (await getBase64(file.originFileObj)) as string;
+        }
+        previewImage.value = file.url || file.preview;
+        previewVisible.value = true;
+      };
+
+      /** 上传前校验 */
+      const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
+        if (fileList.value.length > props.maxCount) {
+          fileList.value.splice(props.maxCount, fileList.value.length - props.maxCount);
+          message.error(t('component.upload.maxNumber', [props.maxCount]));
+          return Upload.LIST_IGNORE;
+        }
+        const isPNG = props.fileType.includes(file.type);
+        if (!isPNG) {
+          message.error(t('component.upload.acceptUpload', [props.fileType.toString()]));
+        }
+        const isLt2M = file.size / 1024 / 1024 < props.maxSize;
+        if (!isLt2M) {
+          message.error(t('component.upload.maxSizeMultiple', [props.maxSize]));
+        }
+        if (!(isPNG && isLt2M)) {
+          fileList.value.pop();
+        }
+        return (isPNG && isLt2M) || Upload.LIST_IGNORE;
+      };
+
+      /** 自定义上传 */
+      const handleCustomRequest = async (option: any) => {
+        const { file } = option;
+        await props
+          .api(option)
+          .then((res) => {
+            file.url = res.data.url;
+            file.status = 'done';
+            fileList.value.pop();
+            fileList.value.push(file);
+          })
+          .catch(() => {
+            fileList.value.pop();
+          });
+      };
+
+      function getBase64(file: File) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = (error) => reject(error);
+        });
+      }
+
+      return {
+        previewVisible,
+        fileList,
+        state,
+        attrs,
+        t,
+        handlePreview,
+        handleBeforeUpload,
+        handleCustomRequest,
+        handleCancel,
+        previewImage,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  /* you can make up upload button and sample style by using stylesheets */
+  .ant-upload-select-picture-card i {
+    color: #999;
+    font-size: 32px;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
+</style>
diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts
index 9118f35575e..deee81a684d 100644
--- a/src/components/Form/src/helper.ts
+++ b/src/components/Form/src/helper.ts
@@ -86,4 +86,5 @@ export const NO_AUTO_LINK_COMPONENTS: ComponentType[] = [
   'ApiCascader',
   'AutoComplete',
   'RadioButtonGroup',
+  'ImageUpload',
 ];
diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts
index 55f10dec4fe..79e4aaabf6b 100644
--- a/src/components/Form/src/types/index.ts
+++ b/src/components/Form/src/types/index.ts
@@ -110,6 +110,7 @@ export type ComponentType =
   | 'Switch'
   | 'StrengthMeter'
   | 'Upload'
+  | 'ImageUpload'
   | 'IconPicker'
   | 'Render'
   | 'Slider'

From 510080e8e59f2f4fe673294e90836de781d6704a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=AA=E5=BF=86=E5=A4=A9=E5=A0=82?= <1455668754@qq.com>
Date: Thu, 19 Oct 2023 10:41:33 +0800
Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=E8=BF=98=E5=8E=9F=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/src/componentMap.ts | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 71d893c42ab..f33a5890c50 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -20,20 +20,18 @@ import {
   TimePicker,
   TreeSelect,
 } from 'ant-design-vue';
-import { BasicUpload } from '@/components/Upload';
-import { StrengthMeter } from '@/components/StrengthMeter';
-import { IconPicker } from '@/components/Icon';
-import { CountdownInput } from '@/components/CountDown';
-import {
-  ApiCascader,
-  ApiRadioGroup,
-  ApiSelect,
-  ApiTransfer,
-  ApiTree,
-  ApiTreeSelect,
-  ImageUpload,
-  RadioButtonGroup,
-} from '@/components/Form';
+import ApiRadioGroup from './components/ApiRadioGroup.vue';
+import RadioButtonGroup from './components/RadioButtonGroup.vue';
+import ApiSelect from './components/ApiSelect.vue';
+import ApiTree from './components/ApiTree.vue';
+import ApiTreeSelect from './components/ApiTreeSelect.vue';
+import ApiCascader from './components/ApiCascader.vue';
+import ApiTransfer from './components/ApiTransfer.vue';
+import ImageUpload from './components/ImageUpload.vue';
+import { BasicUpload } from '/@/components/Upload';
+import { StrengthMeter } from '/@/components/StrengthMeter';
+import { IconPicker } from '/@/components/Icon';
+import { CountdownInput } from '/@/components/CountDown';
 
 const componentMap = new Map<ComponentType, Component>();
 

From d02b3e229fb06a68d09e431157689a9754c06f5b Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Thu, 19 Oct 2023 20:34:30 +0800
Subject: [PATCH 3/6] chore: ImageUpload demo

---
 src/views/demo/form/index.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
index 89fd096bd3f..76cb3574a6d 100644
--- a/src/views/demo/form/index.vue
+++ b/src/views/demo/form/index.vue
@@ -697,6 +697,14 @@
         allowHalf: true,
       },
     },
+    {
+      field: 'field23',
+      component: 'ImageUpload',
+      label: '字段23',
+      colProps: {
+        span: 8,
+      },
+    },
   ];
 
   export default defineComponent({

From fd798db02adfd5cc9a4c78d4fe542b46bc68f55d Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Fri, 20 Oct 2023 09:45:58 +0800
Subject: [PATCH 4/6] chore: update ImageUpload demo

---
 src/views/demo/form/index.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
index 76cb3574a6d..db4abbc0f5b 100644
--- a/src/views/demo/form/index.vue
+++ b/src/views/demo/form/index.vue
@@ -704,6 +704,17 @@
       colProps: {
         span: 8,
       },
+      componentProps: {
+        api: () => {
+          return Promise.resolve({
+            message: 'ok',
+            code: 200,
+            data: {
+              url: 'https://via.placeholder.com/600/92c952',
+            },
+          });
+        },
+      },
     },
   ];
 

From 7f656b19ca8dfbc74b15915d5c5887129755f982 Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Fri, 20 Oct 2023 11:40:50 +0800
Subject: [PATCH 5/6] fix: 'visible' will be removed in next major version

---
 src/components/Form/src/components/ImageUpload.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Form/src/components/ImageUpload.vue b/src/components/Form/src/components/ImageUpload.vue
index 362a0fdfb78..c759d1f8a07 100644
--- a/src/components/Form/src/components/ImageUpload.vue
+++ b/src/components/Form/src/components/ImageUpload.vue
@@ -18,7 +18,7 @@
         </div>
       </div>
     </a-upload>
-    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+    <a-modal :open="previewOpen" :footer="null" @cancel="handleCancel">
       <img alt="example" style="width: 100%" :src="previewImage" />
     </a-modal>
   </div>
@@ -86,7 +86,7 @@
     setup(props, { emit }) {
       const attrs = useAttrs();
       const { t } = useI18n();
-      const previewVisible = ref(false);
+      const previewOpen = ref(false);
       const previewImage = ref('');
       const emitData = ref<any[] | any | undefined>();
       const fileList = ref<UploadFile[]>([]);
@@ -165,7 +165,7 @@
 
       /** 关闭查看 */
       const handleCancel = () => {
-        previewVisible.value = false;
+        previewOpen.value = false;
       };
 
       /** 查看图片 */
@@ -175,7 +175,7 @@
           file.preview = (await getBase64(file.originFileObj)) as string;
         }
         previewImage.value = file.url || file.preview;
-        previewVisible.value = true;
+        previewOpen.value = true;
       };
 
       /** 上传前校验 */
@@ -225,7 +225,7 @@
       }
 
       return {
-        previewVisible,
+        previewOpen,
         fileList,
         state,
         attrs,

From 5670a5304dae0ca671c4a2e4eed809534a4a2368 Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Sat, 21 Oct 2023 19:24:39 +0800
Subject: [PATCH 6/6] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9api=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=BF=94=E5=9B=9E=E5=80=BC=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/src/components/ImageUpload.vue |  9 ++++-----
 src/views/demo/form/index.vue                      | 10 +---------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/Form/src/components/ImageUpload.vue b/src/components/Form/src/components/ImageUpload.vue
index c759d1f8a07..22fec05e94a 100644
--- a/src/components/Form/src/components/ImageUpload.vue
+++ b/src/components/Form/src/components/ImageUpload.vue
@@ -33,7 +33,6 @@
   import { buildShortUUID } from '@/utils/uuid';
   import { isArray, isNotEmpty, isUrl } from '@/utils/is';
   import { useRuleFormItem } from '@/hooks/component/useFormItem';
-  import { uploadApi } from '@/api/sys/upload';
   import { useAttrs } from '@vben/hooks';
   import { PlusOutlined } from '@ant-design/icons-vue';
 
@@ -50,8 +49,8 @@
     props: {
       value: [Array, String],
       api: {
-        type: Function as PropType<(file: UploadFile) => Promise<any>>,
-        default: uploadApi,
+        type: Function as PropType<(file: UploadFile) => Promise<string>>,
+        default: null,
       },
       listType: {
         type: String as PropType<ImageUploadType>,
@@ -204,8 +203,8 @@
         const { file } = option;
         await props
           .api(option)
-          .then((res) => {
-            file.url = res.data.url;
+          .then((url) => {
+            file.url = url;
             file.status = 'done';
             fileList.value.pop();
             fileList.value.push(file);
diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue
index db4abbc0f5b..fc58cc2274b 100644
--- a/src/views/demo/form/index.vue
+++ b/src/views/demo/form/index.vue
@@ -705,15 +705,7 @@
         span: 8,
       },
       componentProps: {
-        api: () => {
-          return Promise.resolve({
-            message: 'ok',
-            code: 200,
-            data: {
-              url: 'https://via.placeholder.com/600/92c952',
-            },
-          });
-        },
+        api: () => Promise.resolve('https://via.placeholder.com/600/92c952'),
       },
     },
   ];