fix: DEFECT-1644 所有可以上传图片的都需要预览个删除按钮

@@ -8,24 +8,6 @@
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm">
-      <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>
       <template #videoPlatformIdSlot="{ model, field }">
         <a-select
           placeholder="请选择流媒体配置"
@@ -52,23 +34,20 @@
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
-  import { message, Upload } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { upload } from '/@/api/oss/ossFileUploader';
-  import { FileItem } from '/@/components/Upload/src/typing';
+  import { PlusOutlined } from '@ant-design/icons-vue';
   import { getStreamingMediaList } from '/@/api/camera/cameraManager';
   import SteramingDrawer from '../streaming/SteramingDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
   export default defineComponent({
     name: 'ContactDrawer',
     components: {
       BasicDrawer,
       BasicForm,
-      Upload,
       PlusOutlined,
-      LoadingOutlined,
       SteramingDrawer,
       VNodes: (_, { attrs }) => {
         return attrs.vnodes;
@@ -118,42 +97,19 @@
         if (unref(isUpdate)) {
           await nextTick();
           editId.value = data.record.id;
-          tenantLogo.value = data.record?.avatar;
-          await setFieldsValue(data.record);
+          if (data.record.avatar) {
+            setFieldsValue({
+              avatar: [{ uid: buildUUID(), name: 'name', url: data.record.avatar } as FileItem],
+            });
+          }
+          const { avatar, ...params } = data.record;
+          console.log(avatar);
+          await setFieldsValue({ ...params });
         } else {
-          tenantLogo.value = '';
           editId.value = '';
         }
       });
 
-      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 getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置'));
 
       async function handleSubmit() {
@@ -162,8 +118,9 @@
           const { createMessage } = useMessage();
           const values = await validate();
           if (!values) return;
-          if (tenantLogo.value !== '') {
-            values.avatar = tenantLogo.value;
+          if (Reflect.has(values, 'avatar')) {
+            const file = (values.avatar || []).at(0) || {};
+            values.avatar = file.url || null;
           }
           if (editId.value !== '') {
             values.id = editId.value;
@@ -188,9 +145,6 @@
         registerDrawer,
         registerForm,
         handleSubmit,
-        customUpload,
-        beforeUpload,
-        tenantLogo,
         loading,
         streamConfigOptions,
         registerSteramingDrawer,

@@ -5,6 +5,9 @@ import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -102,8 +105,33 @@ export const formSchema: QFormSchema[] = [
   {
     field: 'avatar',
     label: '视频封面',
-    slot: 'iconSelect',
-    component: 'Input',
+    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!] });
+        },
+      };
+    },
   },
   {
     field: 'name',