Commit feb36803380bd20a8e248bf9262f27e87b1e57b0

Authored by loveumiko
1 parent 381ac034

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

@@ -24,8 +24,9 @@ @@ -24,8 +24,9 @@
24 :customRequest="customUploadIconPic" 24 :customRequest="customUploadIconPic"
25 :before-upload="beforeUploadIconPic" 25 :before-upload="beforeUploadIconPic"
26 > 26 >
27 - <div v-if="iconPic"> 27 + <div v-if="iconPic" class="relative">
28 <img :src="iconPic" class="m-auto fill-img" /> 28 <img :src="iconPic" class="m-auto fill-img" />
  29 + <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
29 <div style="background-color: #ccc; margin-top: 20px">重新上传</div> 30 <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
30 </div> 31 </div>
31 <div v-else> 32 <div v-else>
@@ -81,7 +82,7 @@ @@ -81,7 +82,7 @@
81 import { useMessage } from '/@/hooks/web/useMessage'; 82 import { useMessage } from '/@/hooks/web/useMessage';
82 import type { FileItem } from '/@/components/Upload/src/typing'; 83 import type { FileItem } from '/@/components/Upload/src/typing';
83 import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index'; 84 import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
84 - import { PlusOutlined } from '@ant-design/icons-vue'; 85 + import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
85 import { useUserStore } from '/@/store/modules/user'; 86 import { useUserStore } from '/@/store/modules/user';
86 import { createLocalStorage } from '/@/utils/cache/index'; 87 import { createLocalStorage } from '/@/utils/cache/index';
87 import { Authority } from '/@/components/Authority'; 88 import { Authority } from '/@/components/Authority';
@@ -100,6 +101,7 @@ @@ -100,6 +101,7 @@
100 ContentUploadText, 101 ContentUploadText,
101 Spin, 102 Spin,
102 CustomUploadComp, 103 CustomUploadComp,
  104 + CloseCircleOutlined,
103 }, 105 },
104 setup() { 106 setup() {
105 const loading = ref(false); 107 const loading = ref(false);
@@ -188,6 +190,11 @@ @@ -188,6 +190,11 @@
188 storage.set('platformInfo', newFieldValue); 190 storage.set('platformInfo', newFieldValue);
189 } 191 }
190 192
  193 + // 删除浏览器ico图标
  194 + const handleDelete = () => {
  195 + iconPic.value = '';
  196 + };
  197 +
191 onMounted(async () => { 198 onMounted(async () => {
192 const res = await getPlatForm(); 199 const res = await getPlatForm();
193 setFieldsValue(res); 200 setFieldsValue(res);
@@ -227,6 +234,7 @@ @@ -227,6 +234,7 @@
227 handleResetInfo, 234 handleResetInfo,
228 handleSetBgImgUrl, 235 handleSetBgImgUrl,
229 handleSetLogoImgUrl, 236 handleSetLogoImgUrl,
  237 + handleDelete,
230 }; 238 };
231 }, 239 },
232 }); 240 });
@@ -251,4 +259,12 @@ @@ -251,4 +259,12 @@
251 width: 100%; 259 width: 100%;
252 height: 100%; 260 height: 100%;
253 } 261 }
  262 +
  263 + .icon-delete {
  264 + top: -13px;
  265 + right: -13px;
  266 + color: rgb(146, 145, 145);
  267 + font-size: 1rem;
  268 + z-index: 9999;
  269 + }
254 </style> 270 </style>
1 <script setup name="CustomUploadComp" lang="ts"> 1 <script setup name="CustomUploadComp" lang="ts">
2 - import { PlusOutlined } from '@ant-design/icons-vue'; 2 + import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
3 import { Upload, Spin } from 'ant-design-vue'; 3 import { Upload, Spin } from 'ant-design-vue';
4 import { ref, watchEffect } from 'vue'; 4 import { ref, watchEffect } from 'vue';
5 import { useUpload } from './hooks/useUploadFile.hook'; 5 import { useUpload } from './hooks/useUploadFile.hook';
@@ -40,6 +40,12 @@ @@ -40,6 +40,12 @@
40 } 40 }
41 }; 41 };
42 42
  43 + // 删除图片
  44 + const handleDelete = () => {
  45 + uploadImgUrl.value = '';
  46 + emit('setImg', uploadImgUrl.value);
  47 + };
  48 +
43 watchEffect(() => { 49 watchEffect(() => {
44 init(); 50 init();
45 }); 51 });
@@ -59,7 +65,10 @@ @@ -59,7 +65,10 @@
59 :customRequest="customUpload" 65 :customRequest="customUpload"
60 :before-upload="beforeUploadVerify" 66 :before-upload="beforeUploadVerify"
61 > 67 >
62 - <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" /> 68 + <div v-if="uploadImgUrl" class="w-full h-full modal-div relative">
  69 + <img class="fill-img" :src="uploadImgUrl" alt="avatar" />
  70 + <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
  71 + </div>
63 <div v-else> 72 <div v-else>
64 <Spin v-if="uploadLoading" tip="正在上传中..." /> 73 <Spin v-if="uploadLoading" tip="正在上传中..." />
65 <PlusOutlined v-else /> 74 <PlusOutlined v-else />
@@ -74,4 +83,12 @@ @@ -74,4 +83,12 @@
74 width: 100%; 83 width: 100%;
75 height: 100%; 84 height: 100%;
76 } 85 }
  86 +
  87 + .icon-delete {
  88 + top: -13px;
  89 + right: -13px;
  90 + color: rgb(146, 145, 145);
  91 + font-size: 1rem;
  92 + z-index: 9999;
  93 + }
77 </style> 94 </style>