|
|
@@ -1,44 +1,95 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from "vue";
|
|
|
+import { onMounted, h, ref } from "vue";
|
|
|
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
|
|
import PageHeader from '@/components/PageHeader.vue';
|
|
|
import QueryBox from './components/report-list/QueryBox.vue';
|
|
|
import CompanySelect from "./components/report-list/CompanySelect.vue";
|
|
|
import ReportItem from './components/report-list/ReportItem.vue';
|
|
|
+import * as reportService from "@/services/report.service"
|
|
|
+import * as reportsService from "@/services/reports.service"
|
|
|
+import { CompLog } from "@/helpers/log.helper";
|
|
|
+import type { ReportBasic } from "@/types/report.types"
|
|
|
+import { routeToReportEditor } from "@/router";
|
|
|
|
|
|
const currentPage = ref(1);
|
|
|
|
|
|
-const companies = ref([
|
|
|
- {
|
|
|
- label: "企业名称1",
|
|
|
- tail: 3,
|
|
|
- checked: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "企业名称2",
|
|
|
- tail: 7,
|
|
|
- checked: true,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "企业名称3",
|
|
|
- tail: 12,
|
|
|
- checked: false,
|
|
|
- }
|
|
|
-]);
|
|
|
+interface CompanyAggProp {
|
|
|
+ id?: number;
|
|
|
+ label: string;
|
|
|
+ tail: number;
|
|
|
+ checked: boolean;
|
|
|
+}
|
|
|
+
|
|
|
+const companies = ref<CompanyAggProp[]>([]);
|
|
|
+
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+const reports = ref<ReportBasic[]>([]);
|
|
|
+
|
|
|
+// 加载状态
|
|
|
+const spinning = ref(true);
|
|
|
+
|
|
|
+function fetchReports(companyId?: number) {
|
|
|
+ spinning.value = true;
|
|
|
+ reportsService.query(1, companyId).then((resp) => {
|
|
|
+ total.value = resp.total;
|
|
|
+ reports.value = resp.reports;
|
|
|
+ spinning.value = false;
|
|
|
+ }).catch((err) => {
|
|
|
+ CompLog.logErr(err);
|
|
|
+ spinning.value = false;
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
function onCompanySelectChange(event: {index: number, checked: boolean}) {
|
|
|
console.log('company select change', event);
|
|
|
const company = companies.value[event.index];
|
|
|
company.checked = event.checked;
|
|
|
+
|
|
|
+ if (event.checked) {
|
|
|
+ fetchReports(company.id)
|
|
|
+ } else {
|
|
|
+ fetchReports()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function onPaginationChange(page: number, pageSize: number) {
|
|
|
console.log('page', page, 'pageSize', pageSize);
|
|
|
}
|
|
|
+
|
|
|
+function onCreateReport() {
|
|
|
+ reportService.create().then((id) => {
|
|
|
+ routeToReportEditor(id);
|
|
|
+ }).catch((err) => console.log(err));
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ fetchReports()
|
|
|
+ // 左侧企业名录统计
|
|
|
+ reportsService.agg().then((aggs) => {
|
|
|
+ companies.value = aggs.map((agg) => {
|
|
|
+ return {
|
|
|
+ id: agg.companyId,
|
|
|
+ label: agg.name,
|
|
|
+ tail: agg.count,
|
|
|
+ checked: false,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }).catch(CompLog.logErr)
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="reports-wrap">
|
|
|
- <PageHeader title="我的报告" />
|
|
|
+ <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>
|
|
|
+
|
|
|
<div class="query-box-wrap">
|
|
|
<QueryBox />
|
|
|
</div>
|
|
|
@@ -48,11 +99,17 @@ function onPaginationChange(page: number, pageSize: number) {
|
|
|
<CompanySelect :data="companies" @change="onCompanySelectChange" />
|
|
|
</a-col>
|
|
|
<a-col :xxl="19" :xl="18" :lg="17" :span="16">
|
|
|
- <ReportItem v-for="(i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" class="report-item" />
|
|
|
+ <a-spin
|
|
|
+ :spinning="spinning"
|
|
|
+ :indicator="h(LoadingOutlined, { style: { fontSize: '24px', }, spin: true, })"
|
|
|
+ class="spinning"
|
|
|
+ >
|
|
|
+ <ReportItem v-for="(report, index) in reports" :data="report" :key="index" class="report-item" />
|
|
|
+ </a-spin>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<div class="pagination-wrap">
|
|
|
- <a-pagination v-model:current="currentPage" :total="500" @change="onPaginationChange" />
|
|
|
+ <a-pagination v-model:current="currentPage" :total="total" @change="onPaginationChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -81,6 +138,10 @@ function onPaginationChange(page: number, pageSize: number) {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .spinning {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.pagination-wrap {
|