ReportDetailView.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <script setup lang="ts">
  2. import { onMounted, onUnmounted, ref, type Ref } from "vue";
  3. import { useRoute } from "vue-router";
  4. import PageHeader from '@/components/PageHeader.vue';
  5. import * as reportService from "@/services/reports.service";
  6. import { CompLog } from "@/libs/log.lib";
  7. import { message } from "ant-design-vue";
  8. import { useAuthStore } from "@/stores/auth.store";
  9. const _componentName = 'ReportEditorView'
  10. const logError = CompLog.logErr(_componentName)
  11. // 当前路由
  12. const route = useRoute();
  13. // 权限store
  14. const authStore = useAuthStore()
  15. const logoUrl = ref<string | undefined>(undefined)
  16. const report: Ref<ReportSaveRequest | null> = ref(null);
  17. onMounted(() => {
  18. const id = parseInt(route.params.id as string);
  19. if (id && id > 0) {
  20. reportService.get(id).then((data) => {
  21. report.value = data;
  22. // 设置Logo信息
  23. if (report.value.id && authStore.token) {
  24. logoUrl.value = reportService.link(report.value.id, authStore.token)
  25. }
  26. }).catch(logError);
  27. }
  28. });
  29. onUnmounted(() => {
  30. })
  31. </script>
  32. <template>
  33. <PageHeader title="报告详情" />
  34. <a-row :gutter="24" v-if="report">
  35. <a-col :span="12">
  36. <div class="metadata-wrap">
  37. <p>
  38. <span>企业名称:</span><span>{{ report.companyName }}</span>
  39. </p>
  40. <p>
  41. <span>报告类型:</span><span>{{ report.name }}</span>
  42. </p>
  43. <p>
  44. <span>项目名称:</span><span>{{ report.reportName }}</span>
  45. </p>
  46. <p>
  47. <span>项目负责人:</span><span>{{ report.supervisor }}</span>
  48. </p>
  49. <p>
  50. <span>关键词:</span><span>{{ report.keywords }}</span>
  51. </p>
  52. <p v-for="(item, index) in report.metadata" :key="index">
  53. <span>{{ item.name }}:</span><span>{{ item.value }}</span>
  54. </p>
  55. </div>
  56. </a-col>
  57. <a-col :span="12">
  58. <a-image :width="200" :src="logoUrl" />
  59. <!-- <LogoComponent @change="onLogoChange" @delete="onLogoDelete" :url="logoUrl" /> -->
  60. </a-col>
  61. </a-row>
  62. <div class="chapter-wrap" v-if="report">
  63. <div v-for="(it, ix) in report.chapters" :key="ix">
  64. <h3>
  65. <span>{{ it.fullTitle }}</span
  66. >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  67. <span
  68. >章节关键词:{{
  69. !!it.keywords ? it.keywords.toString().replace(/,/g, ",") : ""
  70. }}</span
  71. >
  72. </h3>
  73. <p v-html="it.content"></p>
  74. </div>
  75. </div>
  76. </template>
  77. <style scoped lang="scss">
  78. .metadata-wrap {
  79. > * {
  80. margin-top: 0.5em;
  81. }
  82. }
  83. .chapter-wrap {
  84. margin-top: 3em;
  85. h3 {
  86. font-weight: bold;
  87. }
  88. p {
  89. margin-left: 2.5em;
  90. margin-bottom: 2em;
  91. }
  92. }
  93. .bottom-button-group {
  94. margin-top: 5em;
  95. }
  96. </style>