瀏覽代碼

feature 1001585

创建报告模板选择实现
Kevin Jiang 2 年之前
父節點
當前提交
e8783463f9

+ 3 - 3
src/client/report.client.ts

@@ -1,5 +1,5 @@
 import httpClient from "@/services/httpClient";
-import type { ReportSaveRequest } from "@/types/report.types";
+import type { ReportCreateRequest, ReportSaveRequest } from "@/types/report.types";
 import type { Response } from "@/types/response.types";
 import * as urlHelper from "@/helpers/url.helper"
 
@@ -18,8 +18,8 @@ export async function get(id: number): Promise<ReportSaveRequest> {
 /**
  * 请求后端服务创建一个新报告
  */
-export async function create(): Promise<number> {
-  const resp = await httpClient.put<Response<number>>(_url());
+export async function create(request: ReportCreateRequest): Promise<number> {
+  const resp = await httpClient.put<Response<number>>(_url(), request);
   return resp.data.data;
 }
 

+ 13 - 1
src/components/PageHeader.vue

@@ -8,11 +8,23 @@ defineProps({
 </script>
 
 <template>
-  <h1 class="title">{{ title }}</h1>
+  <a-row type="flex" justify="space-between" :align="'middle'">
+    <a-col>
+      <h1 class="title">{{ title }}</h1>
+    </a-col>
+    <a-col>
+      <slot></slot>
+    </a-col>
+  </a-row>
+  <a-divider class="divider" />
 </template>
 
 <style scoped lang="scss">
 h1.title {
   font-size: 1.75em;
 }
+
+.divider {
+  margin-top: 1em;
+}
 </style>

+ 3 - 3
src/services/report.service.ts

@@ -1,5 +1,5 @@
 import * as reportClient from "@/client/report.client";
-import type { ReportSaveRequest } from "@/types/report.types";
+import type { ReportCreateRequest, ReportSaveRequest } from "@/types/report.types";
 
 export async function get(id: number): Promise<ReportSaveRequest> {
   const resp = await reportClient.get(id);
@@ -9,8 +9,8 @@ export async function get(id: number): Promise<ReportSaveRequest> {
   return resp;
 }
 
-export async function create(): Promise<number> {
-  const id = await reportClient.create();
+export async function create(request: ReportCreateRequest): Promise<number> {
+  const id = await reportClient.create(request);
   return id;
 }
 

+ 4 - 0
src/types/report.types.ts

@@ -70,6 +70,10 @@ export interface SelectedChapterType {
   keywords: string[];
 }
 
+export interface ReportCreateRequest {
+  templateId: number | null;
+}
+
 export interface ReportMetadataItem {
   name: string;
   value: string;

+ 16 - 5
src/views/report/ReportListView.vue

@@ -12,6 +12,7 @@ import { CompLog } from "@/helpers/log.helper";
 import type { ReportBasic } from "@/types/report.types"
 import { routeToReportEditor } from "@/router";
 import SpinComponent from "@/components/SpinComponent.vue";
+import TemplateSelect from "./components/TemplateSelect.vue";
 
 const _componentName = 'ReportListView'
 const logError = CompLog.logErr(_componentName)
@@ -38,6 +39,8 @@ const field = ref<FieldType>('title')
 const keyword = ref('')
 // 过滤栏选择的企业id
 const companyIdSelected = ref<number | undefined>(undefined)
+// 模板选择器ref
+const templateSelect = ref<InstanceType<typeof TemplateSelect> | null>(null)
 
 function fetchReports(companyId?: number, page?: number, field?: string, keyword?: string) {
   spinning.value = true;
@@ -70,13 +73,17 @@ function onQuery(queryData: { field: string, keyword: string }) {
 }
 
 function onPaginationChange(page: number) {
-  fetchReports(companyIdSelected.value, page)
+  fetchReports(companyIdSelected.value, page, field.value, keyword.value)
 }
 
 function onCreateReport() {
-  reportService.create().then((id) => {
+  templateSelect.value?.show()
+}
+
+function onTemplateSelected(templateId: number | null) {
+  reportService.create({templateId}).then((id) => {
     routeToReportEditor(id);
-  }).catch((err) => console.log(err));
+  }).catch(logError);
 }
 
 onMounted(() => {
@@ -97,14 +104,17 @@ onMounted(() => {
 
 <template>
   <div class="reports-wrap">
-    <a-row type="flex" justify="space-between">
+    <PageHeader title="我的报告">
+      <a-button type="primary" @click="onCreateReport"><plus-outlined />新建报告</a-button>
+    </PageHeader>
+    <!-- <a-row type="flex" justify="space-between">
       <a-col>
         <PageHeader title="我的报告" />
       </a-col>
       <a-col>
         <a-button type="primary" @click="onCreateReport"><plus-outlined />新建报告</a-button>
       </a-col>
-    </a-row>
+    </a-row> -->
 
     <div class="query-box-wrap">
       <QueryBox v-model:field="field" v-model:keyword="keyword" @search="onQuery" />
@@ -124,6 +134,7 @@ onMounted(() => {
       <a-pagination v-model:current="currentPage" :total="total" @change="onPaginationChange" />
     </div>
   </div>
+  <TemplateSelect ref="templateSelect" @ok="onTemplateSelected" />
 </template>
 
 <style scoped lang="scss">

+ 54 - 1
src/views/report/components/TemplateSelect.vue

@@ -1 +1,54 @@
-<!-- 报告模板选择  -->
+<!-- 报告模板选择  -->
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+import * as reportTemplateService from "@/services/reportTemplate.service"
+import type { ReportTemplatesResponse } from "@/types/report.types";
+
+const visible = ref(false)
+
+const selectedTemplate = ref<number | null>(null)
+
+const templates = ref<ReportTemplatesResponse>({total: 0, items: []})
+
+const emits = defineEmits<{
+  (e: "ok", id: number | null): void;
+}>();
+
+function fetchTemplates() {
+  reportTemplateService.list().then((resp) => {
+    templates.value = resp
+  })
+}
+
+function onOk() {
+  emits("ok", selectedTemplate.value)
+}
+
+onMounted(() => {
+  fetchTemplates()
+})
+
+defineExpose({
+  show: () => visible.value = true,
+  hide: () => visible.value = false,
+})
+</script>
+
+<template>
+  <a-modal v-model:visible="visible" title="报告模板选择" @ok="onOk">
+    <a-radio-group v-model:value="selectedTemplate">
+      <a-radio class="radio" :value="item.id" v-for="(item, index) in templates.items" :key="index">
+        {{ item.name }}
+      </a-radio>
+      <a-radio class="radio" :value="null">空白报告</a-radio>
+    </a-radio-group>
+  </a-modal>
+</template>
+
+<style scoped lang="scss">
+.radio {
+  display: flex;
+  height: 2em;
+  line-height: 2em;
+}
+</style>