|
|
@@ -1,5 +1,5 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref, type Ref } from "vue";
|
|
|
+import { onMounted, onUnmounted, ref, type Ref } from "vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
import { PlusOutlined } from "@ant-design/icons-vue";
|
|
|
import PageHeader from '@/components/PageHeader.vue';
|
|
|
@@ -13,11 +13,14 @@ import { ChapterManager } from "@/models/report.model";
|
|
|
import ChapterEditor from "./components/ChapterEditor.vue";
|
|
|
import * as reportService from "@/services/report.service";
|
|
|
import * as reportTemplateService from "@/services/reportTemplate.service"
|
|
|
+import * as logoService from "@/services/logo.service"
|
|
|
import { CompLog } from "@/libs/log.lib";
|
|
|
import { message } from "ant-design-vue";
|
|
|
import TemplateSaveModal from "./components/TemplateSaveModal.vue";
|
|
|
import type { ReportTemplateModal } from "./reportComponent.types";
|
|
|
import { useReportExport } from "@/libs/reportExport.lib";
|
|
|
+import { routeToReportPreview } from "@/router";
|
|
|
+import { useAuthStore } from "@/stores/auth.store";
|
|
|
|
|
|
const _componentName = 'ReportEditorView'
|
|
|
const logError = CompLog.logErr(_componentName)
|
|
|
@@ -26,6 +29,8 @@ const logError = CompLog.logErr(_componentName)
|
|
|
const route = useRoute();
|
|
|
// 报告下载函数库
|
|
|
const reportExport = useReportExport()
|
|
|
+// 权限store
|
|
|
+const authStore = useAuthStore()
|
|
|
|
|
|
const report: Ref<ReportSaveRequest | null> = ref(null);
|
|
|
const reportCategoryEl = ref<HTMLInputElement | null>(null);
|
|
|
@@ -36,6 +41,12 @@ const metadata: Ref<ReportMetadataItem[]> = ref([]);
|
|
|
const chapterTypeSelectVisible = ref(false);
|
|
|
// 章节管理对象
|
|
|
const chapterManager = new ChapterManager();
|
|
|
+// logo url
|
|
|
+const logoUrl = ref<string | undefined>(undefined)
|
|
|
+// 报告导出按钮是否在加载的状态
|
|
|
+const exporting = ref(false)
|
|
|
+// 定时保存handler
|
|
|
+const timeIntervalHandler = ref<number | null>(null)
|
|
|
|
|
|
function onMetaChange(data: ReportMetadataItem[]) {
|
|
|
metadata.value = data;
|
|
|
@@ -44,6 +55,29 @@ function onMetaChange(data: ReportMetadataItem[]) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * Logo组件上传处理函数
|
|
|
+ * @param file 图片文件
|
|
|
+ */
|
|
|
+function onLogoChange(file: File) {
|
|
|
+ if (!report.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
+ report.value.logoPath = resp;
|
|
|
+ logoUrl.value = logoService.link(report.value.id, authStore.token)
|
|
|
+ onSave()
|
|
|
+ }
|
|
|
+ }).catch(logError)
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
function onChapterTypeSelected(type: ChapterType) {
|
|
|
chapterManager.addChapter(type);
|
|
|
}
|
|
|
@@ -91,14 +125,28 @@ function onSave() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 导出报告
|
|
|
+ */
|
|
|
function onExport() {
|
|
|
+ exporting.value = true
|
|
|
if (report.value) {
|
|
|
reportExport.download(report.value.name, report.value.id)
|
|
|
+ setTimeout(() => exporting.value = false, 5000)
|
|
|
} else {
|
|
|
message.warning("暂无数据可以导出")
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 报告预览
|
|
|
+ */
|
|
|
+function onPreview() {
|
|
|
+ if (report.value) {
|
|
|
+ routeToReportPreview(report.value.id)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const templateSaveModal = ref<InstanceType<typeof TemplateSaveModal> | null>(null);
|
|
|
|
|
|
function showTemplateSaveModal() {
|
|
|
@@ -134,9 +182,22 @@ onMounted(() => {
|
|
|
report.value = data;
|
|
|
const chapters = report.value.chapters;
|
|
|
chapterManager.setChapters(chapters);
|
|
|
+ if (report.value.logoPath && authStore.token) {
|
|
|
+ logoUrl.value = logoService.link(report.value.id, authStore.token)
|
|
|
+ }
|
|
|
+ // 数据加载成功后,设置自动保存
|
|
|
+ timeIntervalHandler.value = window.setInterval(() => {
|
|
|
+ onSave();
|
|
|
+ }, 60000);
|
|
|
}).catch(logError);
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timeIntervalHandler.value) {
|
|
|
+ window.clearInterval(timeIntervalHandler.value)
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -150,7 +211,7 @@ onMounted(() => {
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col :span="12">
|
|
|
- <LogoComponent />
|
|
|
+ <LogoComponent @change="onLogoChange" :url="logoUrl" />
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-divider />
|
|
|
@@ -174,9 +235,8 @@ onMounted(() => {
|
|
|
<div class="bottom-button-group">
|
|
|
<a-space>
|
|
|
<a-button type="primary" @click="onSave" :loading="saveLoading">保存</a-button>
|
|
|
- <a-button>预览</a-button>
|
|
|
- <a-button @click="onExport">导出</a-button>
|
|
|
- <!-- <a-button v-if="report" type="link" :href="reportExport.link(report.id, authStore.token)" target="_blank">导出</a-button> -->
|
|
|
+ <a-button @click="onPreview">预览</a-button>
|
|
|
+ <a-button @click="onExport" :loading="exporting">导出</a-button>
|
|
|
<a-button @click="showTemplateSaveModal">另保存为模板</a-button>
|
|
|
</a-space>
|
|
|
</div>
|