Browse Source

feature 1001614

删除企业LOGO实现
Kevin Jiang 2 years ago
parent
commit
8d6a3de74a

+ 5 - 0
src/client/logo.client.ts

@@ -15,6 +15,11 @@ export async function fetch(reportId: number, token: string): Promise<Blob> {
   return resp.data;
 }
 
+export async function remove(reportId: number) {
+  const resp = await httpClient.delete<Response<boolean>>(_url(`${reportId}`));
+  return resp.data.data
+}
+
 export function link(reportId: number, token: string): string {
   return `${_prefix}/${reportId}?token=${token}&t=${Date.now()}`
 }

+ 4 - 0
src/services/logo.service.ts

@@ -8,6 +8,10 @@ export async function fetch(reportId: number, token: string): Promise<Blob> {
   return logoClient.fetch(reportId, token)
 }
 
+export async function remove(reportId: number) {
+  return logoClient.remove(reportId)
+}
+
 export function link(reportId: number, token: string): string {
   return logoClient.link(reportId, token)
 }

+ 6 - 1
src/types/report.types.ts

@@ -172,4 +172,9 @@ export interface ReportTemplateSave {
 export interface ReportTemplatesResponse {
   total: number;
   items: ReportTemplateSave[];
-}
+}
+
+export interface Logo {
+  name: string;
+  url: string;
+}

+ 12 - 1
src/views/report/ReportEditorView.vue

@@ -75,7 +75,17 @@ function onLogoChange(file: File) {
       onSave()
     }
   }).catch(logError)
+}
 
+function onLogoDelete() {
+  if (!report.value) {
+    return;
+  }
+  logoService.remove(report.value.id).then((resp) => {
+    if (resp) {
+      logoUrl.value = undefined
+    }
+  })
 }
 
 function onChapterTypeSelected(type: ChapterType) {
@@ -182,6 +192,7 @@ onMounted(() => {
       report.value = data;
       const chapters = report.value.chapters;
       chapterManager.setChapters(chapters);
+      // 设置Logo信息
       if (report.value.logoPath && authStore.token) {
         logoUrl.value = logoService.link(report.value.id, authStore.token)
       }
@@ -211,7 +222,7 @@ onUnmounted(() => {
       </div>
     </a-col>
     <a-col :span="12">
-      <LogoComponent @change="onLogoChange" :url="logoUrl" />
+      <LogoComponent @change="onLogoChange" @delete="onLogoDelete" :url="logoUrl" />
     </a-col>
   </a-row>
   <a-divider />

+ 24 - 4
src/views/report/components/LogoComponent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+import { PlusOutlined, LoadingOutlined, DeleteOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import type { UploadChangeParam } from 'ant-design-vue';
 
@@ -13,6 +13,7 @@ defineProps({
 
 const emits = defineEmits<{
   (e: "change", file: File): void;
+  (e: "delete"): void;
 }>();
 
 function getBase64(img: Blob, callback: (base64Url: string) => void) {
@@ -61,6 +62,10 @@ const beforeUpload = (file: File) => {
 
   return false;
 };
+
+function onDelete() {
+  emits("delete")
+}
 </script>
 
 <template>
@@ -84,8 +89,15 @@ const beforeUpload = (file: File) => {
         </div>
       </a-upload>
     </a-col>
-    <a-col class="description">
-      请按需上传企业logo<br />仅支持 jpg.  png.  格式图片
+    <a-col class="description-wrap">
+      <div class="description">
+        <div style="flex: 1;">
+          请按需上传企业logo<br />仅支持 jpg.  png.  格式图片
+        </div>
+        <div>
+          <a-button @click="onDelete"><delete-outlined /></a-button>
+        </div>
+      </div>
     </a-col>
   </a-row>
 </template>
@@ -97,8 +109,16 @@ const beforeUpload = (file: File) => {
   margin-left: 20px;
 }
 
-.description {
+.description-wrap {
   font-size: 0.85em;
   color: $desc-color;
+  padding-bottom: 8px;
+
+  .description {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-content: space-between;
+  }
 }
 </style>