fix: DEFECT-1636 上传的图片没有删除功能

@@ -7,50 +7,25 @@
     width="500px"
     @ok="handleSubmit"
   >
-    <BasicForm @register="tenantForm">
-      <template #iconSelect>
-        <Upload
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUpload"
-          :before-upload="beforeUpload"
-        >
-          <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <plus-outlined v-else />
-            <div class="ant-upload-text">上传</div>
-          </div>
-        </Upload>
-      </template>
-    </BasicForm>
+    <BasicForm @register="tenantForm" />
   </BasicDrawer>
 </template>
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { message, Upload } from 'ant-design-vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { tenantFormSchema } from '/@/views/tenant/list/tenantBaseColumns';
-  import { FileItem } from '/@/components/Upload/src/typing';
-  import { upload } from '/@/api/oss/ossFileUploader';
   import { getTenantRoles, updateOrCreateTenant } from '/@/api/tenant/tenantApi';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
   export default defineComponent({
     name: 'TenantDrawer',
     components: {
       BasicDrawer,
       BasicForm,
-      Upload,
-      PlusOutlined,
-      LoadingOutlined,
     },
     emits: ['success', 'register'],
     setup(_, { emit }) {
@@ -58,33 +33,7 @@
       const { createMessage } = useMessage();
 
       const isUpdate = ref(true);
-      const tenantLogo = ref('');
-
-      async function customUpload({ file }) {
-        if (beforeUpload(file)) {
-          tenantLogo.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await upload(formData);
-          if (response.fileStaticUri) {
-            tenantLogo.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
 
-      const beforeUpload = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          message.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          message.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
       const [tenantForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
         labelWidth: 100,
         schemas: tenantFormSchema,
@@ -96,7 +45,6 @@
       //默认传递页面数据
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         await resetFields();
-        tenantLogo.value = '';
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
 
@@ -104,11 +52,19 @@
         await updateSchema({ field: 'title', componentProps: { disabled: false } });
         //如果是编辑操作，设置页面数据
         if (unref(isUpdate)) {
+          if (data.record.icon) {
+            setFieldsValue({
+              icon: [{ uid: buildUUID(), name: 'name', url: data.record.icon } as FileItem],
+            });
+          }
           getTenantRoles(data.record.tenantId).then((result) => {
-            Reflect.set(data.record, 'roleIds', result);
+            const { icon, ...params } = data.record;
+            console.log(icon);
             //为表单赋值
-            setFieldsValue(data.record);
-            tenantLogo.value = data.record.icon;
+            setFieldsValue({
+              ...params,
+              roleIds: result,
+            });
             //编辑模式，菜单名称为不可用
             updateSchema({ field: 'title', componentProps: { disabled: true } });
           });
@@ -126,9 +82,13 @@
         setDrawerProps({ confirmLoading: true });
         try {
           const values = await validate();
+          if (Reflect.has(values, 'icon')) {
+            const file = (values.icon || []).at(0) || {};
+            values.icon = file.url || null;
+          }
           const req = {
             id: values.id,
-            icon: tenantLogo.value,
+            icon: values.icon,
             name: values.name,
             enabled: values.enabled,
             description: values.description,
@@ -161,9 +121,6 @@
         tenantForm,
         getTitle,
         handleSubmit,
-        tenantLogo,
-        beforeUpload,
-        customUpload,
         loading,
       };
     },

@@ -3,6 +3,9 @@ import { FormSchema } from '/@/components/Form';
 import { getAllRoleList } from '/@/api/system/system';
 import { getTableTenantProfileApi, QueryTenantProfilesParam } from '/@/api/tenant/tenantApi';
 import { RoleEnum } from '/@/enums/roleEnum';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 export function getBasicColumns(): BasicColumn[] {
   return [
@@ -77,23 +80,32 @@ export const tenantFormSchema: FormSchema[] = [
   {
     field: 'icon',
     label: '租户图标',
-    slot: 'iconSelect',
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-    },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 255) {
-              return Promise.reject('字数不超过255个字');
-            }
-            return Promise.resolve();
-          },
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
         },
-      ];
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
     },
   },
   {