Browse Source

feature

1. 模板编辑支持企业logo上传
2. 模板创建报告,拷贝Logo、关联企业、项目名称
Kevin Jiang 2 years ago
parent
commit
f20dbfebf6

+ 25 - 0
src/client/reportTemplateLogo.client.ts

@@ -0,0 +1,25 @@
+import httpClient from "@/services/httpClient"
+import type { Response } from "@/types/response.types"
+import * as urlHelper from "@/libs/url.lib"
+
+const _prefix = "/gw/user/reportTemplate/logo"
+const _url = urlHelper.withPrefix(_prefix);
+
+export async function upload(formData: FormData): Promise<string> {
+  const resp = await httpClient.post<Response<string>>(_url(), formData)
+  return resp.data.data;
+}
+
+export async function fetch(templateId: number, token: string): Promise<Blob> {
+  const resp = await httpClient.get<File>(_url(`${templateId}?token=${token}`));
+  return resp.data;
+}
+
+export async function remove(templateId: number) {
+  const resp = await httpClient.delete<Response<boolean>>(_url(`${templateId}`));
+  return resp.data.data
+}
+
+export function link(templateId: number, token: string): string {
+  return `${_prefix}/${templateId}?token=${token}&t=${Date.now()}`
+}

+ 17 - 0
src/services/reportTemplateLogo.service.ts

@@ -0,0 +1,17 @@
+import * as logoClient from "@/client/reportTemplateLogo.client"
+
+export async function upload(formData: FormData): Promise<string> {
+  return logoClient.upload(formData)
+}
+
+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)
+}

+ 2 - 2
src/types/report.types.ts

@@ -163,14 +163,14 @@ export interface ReportsResponse {
 }
 
 export interface ReportTemplateSave {
-  id?: number;
+  id: number;
   companyId: number;
   name: string;
   reportName: string;
   logoPath: string;
   metadata: ReportMetadataItem[];
   chapters: Chapter[];
-  tags?: string[];
+  tags: string[];
   createAt?: string;
   updateAt?: string;
 }

+ 2 - 2
src/views/report/ReportEditorView.vue

@@ -72,7 +72,6 @@ function onLogoChange(file: File) {
   const formData = new FormData();
   formData.append("file", file)
   formData.append("reportId", report.value.id.toString())
-  console.log('formData', formData)
 
   logoService.upload(formData).then((resp) => {
     if (resp && report.value && authStore.token) {
@@ -207,6 +206,7 @@ function onSaveTemplate(modalData: ReportTemplateModal) {
     } as Chapter
   })
   const reportTemplateSave: ReportTemplateSave = {
+    id: 0,
     companyId: report.value?.companyId || 0,
     name: modalData.templateName,
     reportName: report.value?.reportName || '',
@@ -245,7 +245,7 @@ onMounted(() => {
       const chapters = report.value.chapters;
       chapterManager.setChapters(chapters);
       // 设置Logo信息
-      if (report.value.logoPath && authStore.token) {
+      if (report.value.id && authStore.token) {
         logoUrl.value = logoService.link(report.value.id, authStore.token)
       }
       // 数据加载成功后,设置自动保存

+ 1 - 1
src/views/report/components/ContentEditor.vue

@@ -26,7 +26,7 @@ const editInit = {
   language: 'zh_CN',
   skin: 'small',
   icons: 'small',
-  plugins: 'lists link selectall image table code help wordcount fullscreen',
+  plugins: 'lists link image table code help wordcount fullscreen',
   contextmenu: false,
   toolbar: toolbar.join(' | '),
   menubar: false,

+ 2 - 0
src/views/report/components/report-list/ReportItem.vue

@@ -54,6 +54,8 @@ function onDelete(id: number) {
     </template>
     <div class="report-metadata-wrap">
       <p><span>企业名称:</span><span>{{ data.companyName }}</span></p>
+      <p><span>项目名称:</span><span>{{ data.reportName }}</span></p>
+      <p><span>项目负责人:</span><span>{{ data.supervisor }}</span></p>
       <p v-for="(item, index) in data.metadata" :key="index">
         <span>{{ item.name }}:</span>
         <span>{{ item.value }}</span>

+ 47 - 1
src/views/reportTemplate/ReportTemplateEditorView.vue

@@ -5,6 +5,7 @@ import { useRoute } from "vue-router";
 import { CompLog } from "@/libs/log.lib";
 import { ChapterManager } from "@/models/report.model";
 import * as reportTemplateService from "@/services/reportTemplate.service"
+import * as reportTemplateLogoService from "@/services/reportTemplateLogo.service"
 import ReportTemplateName from "./components/ReportTemplateName.vue"
 import ReportTemplateLabel from "./components/ReportTemplateTags.vue"
 import RelationCompanyInput from '../report/components/report-create/RelationCompanyInput.vue';
@@ -17,10 +18,14 @@ import ChapterTypeSelect from "../report/components/ChapterTypeSelect.vue";
 import LogoComponent from "../report/components/LogoComponent.vue";
 import ChapterEditor from "../report/components/ChapterEditor.vue";
 import { message } from "ant-design-vue";
+import { useAuthStore } from "@/stores/auth.store";
 
 const logError = CompLog.logErr("ReportTemplateEditorView")
 
+// 当前路由
 const route = useRoute()
+// 权限store
+const authStore = useAuthStore()
 
 const reportTemplate = ref<ReportTemplateSave | null>(null);
 
@@ -32,11 +37,17 @@ const chapterTypeSelectVisible = ref(false);
 const chapterManager = new ChapterManager();
 // 正在保存状态
 const saveLoading = ref(false);
+// logo url
+const logoUrl = ref<string | undefined>(undefined)
 
 function fetchReportTemplate(id: number) {
   reportTemplateService.get(id).then((data) => {
     reportTemplate.value = data;
     chapterManager.setChapters(reportTemplate.value.chapters)
+    // 设置Logo信息
+    if (reportTemplate.value.id && authStore.token) {
+      logoUrl.value = reportTemplateLogoService.link(reportTemplate.value.id, authStore.token)
+    }
   }).catch(logError)
 }
 
@@ -87,6 +98,41 @@ function onCompanyChange(companyId: number) {
   }
 }
 
+/**
+ * Logo组件上传处理函数
+ * @param file 图片文件
+ */
+function onLogoChange(file: File) {
+  if (!reportTemplate.value) {
+    return;
+  }
+  const formData = new FormData();
+  formData.append("file", file)
+  formData.append("templateId", reportTemplate.value.id.toString())
+
+  reportTemplateLogoService.upload(formData).then((resp) => {
+    if (resp && reportTemplate.value && authStore.token) {
+      reportTemplate.value.logoPath = resp;
+      logoUrl.value = reportTemplateLogoService.link(reportTemplate.value.id, authStore.token)
+      onSave()
+    }
+  }).catch(logError)
+}
+
+function onLogoDelete() {
+  if (!reportTemplate.value || !reportTemplate.value.logoPath) {
+    return;
+  }
+  reportTemplateLogoService.remove(reportTemplate.value.id).then((resp) => {
+    if (resp) {
+      if (reportTemplate.value) {
+        reportTemplate.value.logoPath = ''
+      }
+      logoUrl.value = undefined
+    }
+  })
+}
+
 onMounted(() => {
   const id = parseInt(route.params.id as string)
   if (id) {
@@ -108,7 +154,7 @@ onMounted(() => {
       </a-space>
     </a-col>
     <a-col :span="12">
-      <LogoComponent />
+      <LogoComponent @change="onLogoChange" @delete="onLogoDelete" :url="logoUrl" />
     </a-col>
   </a-row>
   <a-divider />