From 611908c58ea3f68b510e5e1db257aef575112912 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Fri, 29 Mar 2024 13:42:54 +0700 Subject: [PATCH] feat: create export pdf and xlsx in detail rekapitulasi gangguan jenis gangguan SE004 --- .../Rekap/RGangguan_JenisGangguanSE.vue | 38 ++- .../Rekap/RGangguan_JenisGangguanSE.ts | 241 +++++++++++++++++- 2 files changed, 255 insertions(+), 24 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue index 4b6eaf0..d238afb 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue @@ -445,7 +445,7 @@ :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100" - @exporting="onExporting" + @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget" > @@ -783,19 +783,18 @@ import { DxPager, DxGrouping } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' -import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' -import { saveAs } from 'file-saver' -import { Workbook } from 'exceljs' -import { useQuery } from '@vue/apollo-composable' import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import InputText from '@/components/InputText.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' -import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE' +import { + exportToPDF, + exportToXLSX, + exportDetailToPDF, + exportDetailToXLSX +} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE' const client = apolloClient() provideApolloClient(client) @@ -824,21 +823,18 @@ const closeDialog = () => { const onExporting = (e: any) => { if (e.format === 'pdf') { exportToPDF(reportMeta.value, data.value) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta.value, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + } +} - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') - }) - }) - - e.cancel = true +const onExportingDetail = (e: any) => { + if (e.format === 'pdf') { + exportDetailToPDF(reportMeta.value, dataSub.value) + } else if (e.format === 'xlsx') { + exportDetailToXLSX(reportMeta.value, e) + } else { } } diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts index 3fc8529..2c7234f 100644 --- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts +++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts @@ -20,7 +20,9 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference' import { setHeaderStyle } from '@/report/utils/xlsx' import { formatNumber, formatPercentage } from '@/utils/numbers' -const reportName = 'Rekapitulasi Gangguan/Jenis Gangguan SE 004' +const reportName = 'Rekapitulasi Gangguan Jenis Gangguan SE 004' +const fontSize = 5 +const detailFontSize = 3 const groupingData = (data: any) => { const groupedData: any = {} @@ -238,7 +240,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => const doc = new jsPDF({ orientation: 'landscape' }) - const fontSize = 5 autoTable(doc, { head: [ @@ -442,4 +443,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => } } -export { exportToPDF } +const exportDetailToPDF = (reportMeta: any, rawData: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [['PT. PLN(Persero)']], + styles: { + fontSize: detailFontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10, + margin: 5 + }) + + autoTable(doc, { + head: [ + [`Daftar Detail ${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize: detailFontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 18, + margin: 5 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Tgl Lapor', + 'Tgl Datang', + 'Tgl Nyala', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'Referensi Marking', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Posko', + 'Tindakan', + 'Penyebab' + ] + ], + body: rawData.map((item: any, i: any) => [ + { content: i + 1, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.durasi_response_time, + item.durasi_recovery_time, + item.status_akhir, + item.referensi_marking, + item.id_pelnomormeter, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_posko, + item.tindakan, + item.penyebab + ]), + styles: { + fontSize: detailFontSize, + cellPadding: 1, + lineColor: [0, 0, 0], + lineWidth: 0.1, + cellWidth: 'auto' + }, + rowPageBreak: 'auto', + headStyles: { + fillColor: [192, 192, 192], + textColor: [0, 0, 0], + fontStyle: 'bold', + cellWidth: 'wrap', + halign: 'center', + valign: 'middle' + }, + bodyStyles: { + textColor: [0, 0, 0] + }, + didParseCell: function (data) { + if (data.row.section === 'head') { + data.cell.text = data.cell.text.map(function (word: any) { + return word.toUpperCase() + }) + } + }, + startY: 24, + margin: 5 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize: detailFontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => { + console.log('pdf berhasil disimpan') + }) +} + +const exportToXLSX = (reportMeta: any, e: any) => { + const meta = formatMetaData(reportMeta) + const workbook = new Workbook() + const worksheet = workbook.addWorksheet(`${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle( + worksheet, + 2, + 1, + `UNIT INDUK : ${ + reportMeta.uid + ? reportMeta.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.up3 + ? reportMeta.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `POSKO : ${ + reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 8, + 8, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:F1') + worksheet.mergeCells('A2:F2') + worksheet.mergeCells('A3:F3') + worksheet.mergeCells('A4:F4') + worksheet.mergeCells('H7:J7') + worksheet.mergeCells('H8:J8') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 10, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +const exportDetailToXLSX = (reportMeta: any, e: any) => { + const meta = formatMetaData(reportMeta) + const workbook = new Workbook() + const worksheet = workbook.addWorksheet(`${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 4, + 8, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('H3:J3') + worksheet.mergeCells('H4:J4') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 6, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + `Laporan Detail ${reportName}.xlsx` + ) + }) + }) + + e.cancel = true +} + +export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }