EMS_front/src/views/MonthlyReport.vue

<template>
  <el-row :gutter="20">
    <el-col :span="24" style="padding-right: 30px">
      <div style="display: flex; justify-content: flex-end">
        <el-button
          plain
          type="primary"
          :icon="Setting"
          @click="dialogVisible = true"
        >
          設定報表
        </el-button>
        <el-button plain type="success" :icon="Printer" @click="generatePDF"
          >列印報表</el-button
        >
      </div>
    </el-col>
  </el-row>
  <!-- 設定 Modal -->
  <EnergyModal
    v-model="dialogVisible"
    title="設定報表"
    :confirm="handleConfirm"
    :close="handleClose"
  >
    <template #default>
      <!-- Modal 的內容 -->
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="報表名稱">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="報表期間">
          <el-date-picker
            v-model="form.date"
            type="month"
            placeholder="請選擇報表時間"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="編製人員">
          <el-input v-model="form.staff" />
        </el-form-item>
      </el-form>
    </template>
  </EnergyModal>
  <!-- 顯示在畫面上的內容 -->
  <PdfContent :form="originalForm" />
  <!-- 給 vue3-html2pdf 用的內容 -->
  <vue3-html2pdf
    ref="html2Pdf"
    :show-layout="false"
    :float-layout="true"
    :enable-download="true"
    :preview-modal="true"
    :filename="pdfFileName"
    :pdf-quality="2"
    :manual-pagination="false"
    :paginate-elements-by-height="1000"
    pdf-format="a4"
    pdf-orientation="landscape"
    pdf-content-width="1120px"
  >
    <template #pdf-content>
      <PdfContent :form="originalForm"  />
    </template>
  </vue3-html2pdf>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, onUnmounted } from "vue";
import PdfContent from "../components/PdfContent.vue";
import EnergyModal from "../components/EnergyModal.vue";
import { Setting, Printer } from "@element-plus/icons-vue";
import Vue3Html2pdf from "vue3-html2pdf";
import useElecReportStore from "../stores/useElecReportStore";
import dayjs from "dayjs";

const storeElecReport = useElecReportStore();

// 設定
const dialogVisible = ref(false);
const form = reactive({
  name: "智慧大樓電表月報表",
  date: dayjs()
    .startOf("month")
    .startOf("day")
    .format("YYYY-MM-DDTHH:mm:ss.000+08:00"),
  staff: "能源管理部",
});
const originalForm = reactive({ ...form });

// PDF 文件名稱
const pdfFileName = ref("智慧大樓電表月報表");
// 引用 vue-html2pdf 實例
const html2Pdf = ref<InstanceType<typeof Vue3Html2pdf> | null>(null);

// 處理確認邏輯
const handleConfirm = () => {
  console.log("確認", form);
  localStorage.setItem("elecReportForm", JSON.stringify(form));
  storeElecReport.startTime = dayjs(form.date)
    .startOf("month")
    .startOf("day")
    .format("YYYY-MM-DDTHH:mm:ss.000+08:00");
  storeElecReport.endTime = dayjs(form.date)
    .endOf("month")
    .endOf("day")
    .format("YYYY-MM-DDTHH:mm:ss.000+08:00");
  storeElecReport.updateHistoryData();
  Object.assign(originalForm, form);
  dialogVisible.value = false;
};

// 處理關閉邏輯
const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(form, originalForm);
  console.log("關閉");
};

// 觸發 PDF 生成和下載
const generatePDF = async () => {
  if (html2Pdf.value) {
    await html2Pdf.value.generatePdf();
  }
};

watch(
  () => storeElecReport.elecCostSummary,
  (newElecData) => {
    if(newElecData){
      console.log("elecCostSummary",newElecData)
    }
  },
  { deep: true }
);

onMounted(async () => {
  const storedForm = localStorage.getItem("elecReportForm");
  if (storedForm) {
    Object.assign(form, JSON.parse(storedForm));
  } else {
    localStorage.setItem("elecReportForm", JSON.stringify(form));
  }
  Object.assign(originalForm, form);
  storeElecReport.startTime = dayjs(form.date)
    .startOf("month")
    .startOf("day")
    .format("YYYY-MM-DDTHH:mm:ss.000+08:00");
  storeElecReport.endTime = dayjs(form.date)
    .endOf("month")
    .endOf("day")
    .format("YYYY-MM-DDTHH:mm:ss.000+08:00");

  await storeElecReport.getElecDataFromBaja();
});

onUnmounted(() => {});
</script>

<style scoped></style>