From 527ce9a9a9dcba48dc56ce5327d5e922c44a6fe4 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sat, 30 Mar 2024 15:09:05 +0700 Subject: [PATCH] feat: create export pdf and xlsx in detail rekapitulasi gangguan koreksi transaksi individual --- .../Pages/Gangguan/Rekap/RGangguan_KTI.vue | 36 +-- src/report/Gangguan/Rekap/RGangguan_KTI.ts | 292 +++++++++++++++++- 2 files changed, 307 insertions(+), 21 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue index f44c636..ca39708 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue @@ -330,7 +330,7 @@ :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100" - @exporting="onExporting" + @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget" > @@ -1119,10 +1119,6 @@ import { DxSelection, DxSummary } from 'devextreme-vue/data-grid' -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 { formatWaktu } from '@/components/Form/FiltersType/reference' @@ -1130,7 +1126,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' -import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_KTI' +import { + exportToPDF, + exportToXLSX, + exportDetailToPDF, + exportDetailToXLSX +} from '@/report/Gangguan/Rekap/RGangguan_KTI' const client = apolloClient() provideApolloClient(client) @@ -1207,21 +1208,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_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts index 815d720..9755f51 100644 --- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts +++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts @@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx' import { formatNumber } from '@/utils/numbers' const reportName = 'Rekapitulasi Koreksi Transaksi Individual' +const fontSize = 5 +const detailFontSize = 3 const formatData = (rawData: any) => { const formattedData: any = [] @@ -125,7 +127,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => const doc = new jsPDF({ orientation: 'landscape' }) - const fontSize = 5 autoTable(doc, { head: [ @@ -278,4 +279,291 @@ 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 Lapor Sebelum', + 'Tgl Lapor Koreksi', + 'Tgl Penugasan Sebelum', + 'Tgl Penugasan Koreksi', + 'Tgl Perjalanan Sebelum', + 'Tgl Perjalanan Koreksi', + 'Tgl Pengerjaan Sebelum', + 'Tgl Pengerjaan Koreksi', + 'Tgl Nyala Sebelum', + 'Tgl Nyala Koreksi', + 'Tgl Selesai Sebelum', + 'Tgl Selesai Koreksi', + 'Durasi Response Time Sebelum', + 'Durasi Response Time Koreksi', + 'Durasi Recovery Time Koreksi', + 'Kelompok ID Sebelum', + 'Kelompok ID Koreksi', + 'Sub Kelompok ID Sebelum', + 'Sub Kelompok ID Koreksi', + 'Fasilitas ID Sebelum', + 'Fasilitas ID Koreksi', + 'Sub Fasilitas ID Sebelum', + 'Sub Fasilitas ID Koreksi', + 'Equipment ID Sebelum', + 'Equipment ID Koreksi', + 'Event Damage ID Sebelum', + 'Event Damage ID Koreksi', + 'Cause ID Sebelum', + 'Cause ID Koreksi', + 'Cause Group ID Sebelum', + 'Cause Group ID Koreksi', + 'Weather ID Sebelum', + 'Weather ID Koreksi', + 'Group Koreksi', + 'ALASAN', + 'IDPEL/NO METER', + 'Keterangan Pelapor', + 'Posko', + 'Tindakan', + 'Penyebab' + ] + ], + body: rawData.map((item: any, i: any) => [ + { content: i + 1, styles: { halign: 'right' } }, + item.no_laporan, + item.tgl_lapor, + item.tgl_lapor_sblm, + item.tgl_lapor_sdh, + item.tgl_penugasan_sblm, + item.tgl_penugasan_sdh, + item.tgl_perjalanan_sblm, + item.tgl_perjalanan_sdh, + item.tgl_pengerjaan_sblm, + item.tgl_pengerjaan_sdh, + item.tgl_nyala_sementara_sblm, + item.tgl_nyala_sementara_sdh, + item.tgl_nyala_sblm, + item.tgl_nyala_sdh, + item.tgl_selesai_sblm, + item.tgl_selesai_sdh, + item.durasi_response_time_sblm, + item.durasi_response_time_sdh, + item.durasi_recovery_time_sdh, + item.kelompok_sblm, + item.kelompok_sdh, + item.sub_kelompok_sblm, + item.sub_kelompok_sdh, + item.fasilitas_id_sblm, + item.fasilitas_id_sdh, + item.sub_fasilitas_id_sblm, + item.sub_fasilitas_id_sdh, + item.equipment_id_sblm, + item.equipment_id_sdh, + item.event_damage_sblm, + item.event_damage_sdh, + item.cause_id_sblm, + item.cause_id_sdh, + item.cause_group_id_sblm, + item.cause_group_id_sdh, + item.weather_id_sblm, + item.weather_id_sdh, + item.group_koreksi, + item.alasan, + item.idpel_no_meter, + 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', + 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, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 8, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:M1') + worksheet.mergeCells('A2:M2') + worksheet.mergeCells('A3:M3') + worksheet.mergeCells('A4:M4') + worksheet.mergeCells('A7:M7') + worksheet.mergeCells('A8:M8') + + 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(`Detail ${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 }