Merge branch 'fix/add-upload-component-delete' into 'main_dev'

fix:上传组件增加删除功能

See merge request yunteng/thingskit-front!822

@@ -24,8 +24,9 @@
                   :customRequest="customUploadIconPic"
                   :before-upload="beforeUploadIconPic"
                 >
-                  <div v-if="iconPic">
+                  <div v-if="iconPic" class="relative">
                     <img :src="iconPic" class="m-auto fill-img" />
+                    <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
                     <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
                   </div>
                   <div v-else>
@@ -81,7 +82,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
   import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache/index';
   import { Authority } from '/@/components/Authority';
@@ -100,6 +101,7 @@
       ContentUploadText,
       Spin,
       CustomUploadComp,
+      CloseCircleOutlined,
     },
     setup() {
       const loading = ref(false);
@@ -188,6 +190,11 @@
         storage.set('platformInfo', newFieldValue);
       }
 
+      // 删除浏览器ico图标
+      const handleDelete = () => {
+        iconPic.value = '';
+      };
+
       onMounted(async () => {
         const res = await getPlatForm();
         setFieldsValue(res);
@@ -227,6 +234,7 @@
         handleResetInfo,
         handleSetBgImgUrl,
         handleSetLogoImgUrl,
+        handleDelete,
       };
     },
   });
@@ -251,4 +259,12 @@
     width: 100%;
     height: 100%;
   }
+
+  .icon-delete {
+    top: -13px;
+    right: -13px;
+    color: rgb(146, 145, 145);
+    font-size: 1rem;
+    z-index: 9999;
+  }
 </style>

 <script setup name="CustomUploadComp" lang="ts">
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
   import { Upload, Spin } from 'ant-design-vue';
   import { ref, watchEffect } from 'vue';
   import { useUpload } from './hooks/useUploadFile.hook';
@@ -40,6 +40,12 @@
     }
   };
 
+  // 删除图片
+  const handleDelete = () => {
+    uploadImgUrl.value = '';
+    emit('setImg', uploadImgUrl.value);
+  };
+
   watchEffect(() => {
     init();
   });
@@ -59,7 +65,10 @@
       :customRequest="customUpload"
       :before-upload="beforeUploadVerify"
     >
-      <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" />
+      <div v-if="uploadImgUrl" class="w-full h-full modal-div relative">
+        <img class="fill-img" :src="uploadImgUrl" alt="avatar" />
+        <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
+      </div>
       <div v-else>
         <Spin v-if="uploadLoading" tip="正在上传中..." />
         <PlusOutlined v-else />
@@ -74,4 +83,12 @@
     width: 100%;
     height: 100%;
   }
+
+  .icon-delete {
+    top: -13px;
+    right: -13px;
+    color: rgb(146, 145, 145);
+    font-size: 1rem;
+    z-index: 9999;
+  }
 </style>