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

@@ -12,6 +12,9 @@ import { EventType, EventTypeColor, EventTypeName } from '../list/cpns/tabs/Even
 
 
 import { useClipboard } from '@vueuse/core';
 import { useClipboard } from '@vueuse/core';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useMessage } from '/@/hooks/web/useMessage';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 
 export enum Mode {
 export enum Mode {
   CARD = 'card',
   CARD = 'card',
@@ -158,8 +161,33 @@ export const step1Schemas: FormSchema[] = [
   {
   {
     field: 'image',
     field: 'image',
     label: '上传图片',
     label: '上传图片',
-    component: 'Input',
-    slot: 'imageSelect',
+    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: 'deviceType',
     field: 'deviceType',

 <template>
 <template>
   <div class="step1">
   <div class="step1">
-    <BasicForm @register="register">
-      <template #imageSelect>
-        <Upload
-          style="width: 20vw"
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUploadqrcodePic"
-          :before-upload="beforeUploadqrcodePic"
-        >
-          <img
-            v-if="deviceConfigPic"
-            :src="deviceConfigPic"
-            alt=""
-            style="width: 6.25rem; height: 6.25rem"
-          />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <PlusOutlined v-else />
-            <div class="ant-upload-text">图片上传</div>
-          </div>
-        </Upload>
-      </template>
-    </BasicForm>
+    <BasicForm @register="register" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, nextTick } from 'vue';
+  import { nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../device.profile.data';
   import { step1Schemas } from '../device.profile.data';
-  import { uploadApi } from '/@/api/personal/index';
-  import { Upload } from 'ant-design-vue';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import type { FileItem } from '/@/components/Upload/src/typing';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
 
   const emits = defineEmits(['next', 'emitDeviceType']);
   const emits = defineEmits(['next', 'emitDeviceType']);
-  const loading = ref(false);
-  const { createMessage } = useMessage();
-  const deviceConfigPic = ref('');
   const props = defineProps({
   const props = defineProps({
     ifShowBtn: { type: Boolean, default: true },
     ifShowBtn: { type: Boolean, default: true },
   });
   });
@@ -66,32 +35,6 @@
         disabled: nameStatus,
         disabled: nameStatus,
       },
       },
     });
     });
-  const customUploadqrcodePic = async ({ file }) => {
-    if (beforeUploadqrcodePic(file)) {
-      deviceConfigPic.value = '';
-      loading.value = true;
-      const formData = new FormData();
-      formData.append('file', file);
-      const response = await uploadApi(formData);
-      if (response.fileStaticUri) {
-        deviceConfigPic.value = response.fileStaticUri;
-        loading.value = false;
-      }
-    }
-  };
-  const beforeUploadqrcodePic = (file: FileItem) => {
-    const isJpgOrPng =
-      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
-    if (!isJpgOrPng) {
-      createMessage.error('只能上传图片文件!');
-    }
-    const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-    if (!isLt2M) {
-      createMessage.error('图片大小不能超过5MB!');
-    }
-    return isJpgOrPng && isLt2M;
-  };
-
   const setFieldsdefaultRuleChainId = async (id) => {
   const setFieldsdefaultRuleChainId = async (id) => {
     await nextTick();
     await nextTick();
     setFieldsValue({ defaultRuleChainId: id });
     setFieldsValue({ defaultRuleChainId: id });
@@ -105,20 +48,28 @@
   }
   }
   //回显数据
   //回显数据
   const setFormData = (v) => {
   const setFormData = (v) => {
-    setFieldsValue(v);
-    deviceConfigPic.value = v.image;
+    if (v.image) {
+      setFieldsValue({
+        image: [{ uid: buildUUID(), name: 'name', url: v.image } as FileItem],
+      });
+    }
+    const { image, ...params } = v;
+    console.log(image);
+    setFieldsValue({ ...params });
   };
   };
   //获取数据
   //获取数据
   async function getFormData() {
   async function getFormData() {
     const values = await validate();
     const values = await validate();
     if (!values) return;
     if (!values) return;
-    Reflect.set(values, 'image', deviceConfigPic.value);
+    if (Reflect.has(values, 'image')) {
+      const file = (values.image || []).at(0) || {};
+      values.image = file.url || null;
+    }
     return values;
     return values;
   }
   }
   //清空数据
   //清空数据
   const resetFormData = () => {
   const resetFormData = () => {
     resetFields();
     resetFields();
-    deviceConfigPic.value = '';
   };
   };
 
 
   const editOrAddDeviceTypeStatus = (status: boolean) => {
   const editOrAddDeviceTypeStatus = (status: boolean) => {