From c6e9129a31cdc510c7747840656a2731d16fad0d Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 11:28:41 +0700 Subject: [PATCH 1/8] feat: create export pdf, xlsx and docx in daftar keluhan dialihkan ke unit lain --- .../Pages/Keluhan/Daftar/DKeluhan_DKUL.vue | 213 +------ src/report/Keluhan/Daftar/DKeluhan_DKUL.ts | 528 ++++++++++++++++++ 2 files changed, 540 insertions(+), 201 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_DKUL.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue index 80281c2..4ae263a 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue @@ -345,14 +345,9 @@ import { DxSearchPanel, DxSelection } 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 { jsPDF } from 'jspdf' -import autoTable from 'jspdf-autotable' +import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL' const position = { of: '#data' } const showIndicator = ref(true) @@ -362,201 +357,25 @@ const data = ref([]) const dataSelected = ref({}) const dialogDetail = ref(false) const loading = ref(false) +const filters = ref() +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' }, + periode: '' +}) const showDetail = () => (dialogDetail.value = true) const closeDialog = () => (dialogDetail.value = false) const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Pembuat Laporan', - 'Tgl Lapor', - 'Tgl Dialihkan', - 'Tgl Response', - 'Tgl Recovery', - 'Durasi Response Time', - 'Durasi Recovery Time', - 'Unit Asal', - 'Status', - 'IDPEL/NO METER', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Telp Pelapor', - 'Keterangan Pelapor' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.pembuat_laporan, - item.waktu_lapor, - item.waktu_dialihkan, - item.waktu_response, - item.waktu_recovery, - parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', - parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', - item.nama_unit_lama, - item.status_akhir, - item.idpel_nometer, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc - .save('Laporan Daftar Keluhan Dialihkan Ke Unit Lain.pdf', { returnPromise: true }) - .then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Dialihkan Ke Unit Lain') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Dialihkan Ke Unit Lain.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } const dataGridRef = ref(null) @@ -612,14 +431,6 @@ const filterData = async (params: any) => { }) } -const filters = ref() -const reportMeta = ref({ - uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, - up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, - ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' }, - periode: '' -}) - onMounted(() => { if (import.meta.env.DEV) { data.value = [ diff --git a/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts new file mode 100644 index 0000000..57591b5 --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts @@ -0,0 +1,528 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Dialihkan Ke Unit Lain' +const fontSize = 4 +const docxFontSize = 8 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + ['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Pembuat Laporan', + 'Tgl Lapor', + 'Tgl Dialihkan', + 'Tgl Response', + 'Tgl Recovery', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Unit Asal', + 'Unit Tujuan', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Sumber Lapor', + 'Nama ULP' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.pembuat_laporan, + item.waktu_lapor, + item.waktu_dialihkan, + item.waktu_response, + item.waktu_recovery, + parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', + parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', + item.nama_unit_lama, + item.nama_unit_baru, + item.status_akhir, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.media, + item.nama_ulp + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:S1') + worksheet.mergeCells('A2:S2') + worksheet.mergeCells('A3:S3') + worksheet.mergeCells('A4:S4') + worksheet.mergeCells('A6:S6') + worksheet.mergeCells('A7:S7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 9, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +const exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.pembuat_laporan, field: 'pembuat_laporan' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_dialihkan, field: 'waktu_dialihkan' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_recovery, field: 'waktu_recovery' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + text: parseInt(item.durasi_recovery_time) + ? formatWaktu(item.durasi_recovery_time) + : '-', + field: 'durasi_recovery_time' + }, + { text: item.nama_unit_lama, field: 'nama_unit_lama' }, + { text: item.nama_unit_baru, field: 'nama_unit_baru' }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.idpel_nometer, field: 'idpel_nometer' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.media, field: 'media' }, + { text: item.nama_ulp, field: 'nama_ulp' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Pembuat Laporan', field: 'pembuat_laporan' }, + { text: 'Tgl Lapor', field: 'waktu_lapor' }, + { text: 'Tgl Dialihkan', field: 'waktu_dialihkan' }, + { text: 'Tgl Response', field: 'waktu_response' }, + { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Durasi Response Time', field: 'durasi_response_time' }, + { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' }, + { text: 'Unit Asal', field: 'nama_unit_lama' }, + { text: 'Unit Tujuan', field: 'nama_unit_baru' }, + { text: 'Status', field: 'status_akhir' }, + { text: 'IDPEL/NO METER', field: 'idpel_nometer' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Telp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'Sumber Lapor', field: 'media' }, + { text: 'Nama ULP', field: 'nama_ulp' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From ad2e19eaa0c722835ea677c4154e17a2bc2aea07 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 12:11:05 +0700 Subject: [PATCH 2/8] feat: create export pdf, xlsx and docx in daftar keluhan pelanggan lebih dari 1 kali --- .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue | 202 +------ src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts | 533 ++++++++++++++++++ 2 files changed, 539 insertions(+), 196 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue index 0f14413..3ca4a46 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue @@ -450,14 +450,9 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -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 autoTable from 'jspdf-autotable' +import { formatNumber, isNumber } from '@/utils/numbers' +import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K' const position = { of: '#data' } const showIndicator = ref(true) @@ -472,7 +467,6 @@ const closedialogDetail = () => (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) const detailType = ref('form') // form, table - const filters = ref() const reportMeta = ref({ uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, @@ -546,196 +540,12 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const closeDialog = () => (dialogDetail.value = false) const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ], - ['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Pelanggan Lebih Dari 1 Kali'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Tgl Lapor', - 'Tgl Response', - 'Tgl Recovery', - 'Jml Lapor', - 'Durasi Response Time', - 'Durasi Recovery Time', - 'Status', - 'IDPEL/NO METER', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Telp Pelapor', - 'Keterangan Pelapor', - 'Sumber Lapor', - 'Nama ULP' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.waktu_lapor, - item.waktu_response, - item.waktu_selesai, - item.jumlah_lapor, - parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', - parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', - item.status_akhir, - item.idpel_nometer, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor, - item.media, - item.nama_ulp - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc - .save('Laporan Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf', { returnPromise: true }) - .then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Pelanggan Lebih Dari 1 Kali') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } diff --git a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts new file mode 100644 index 0000000..19f333a --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts @@ -0,0 +1,533 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali' +const fontSize = 4 +const docxFontSize = 8 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ], + ['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Jml Lapor', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Sumber Lapor', + 'Nama ULP' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_selesai, + item.jumlah_lapor, + parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', + parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', + item.status_akhir, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.media, + item.nama_ulp + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 5, + 1, + `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}` + ) + + setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 8, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:P1') + worksheet.mergeCells('A2:P2') + worksheet.mergeCells('A3:P3') + worksheet.mergeCells('A4:P4') + worksheet.mergeCells('A5:P5') + worksheet.mergeCells('A7:P7') + worksheet.mergeCells('A8:P8') + + 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 exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_selesai, field: 'waktu_selesai' }, + { text: item.jumlah_lapor, field: 'jumlah_lapor' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + text: parseInt(item.durasi_recovery_time) + ? formatWaktu(item.durasi_recovery_time) + : '-', + field: 'durasi_recovery_time' + }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.idpel_nometer, field: 'idpel_nometer' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.media, field: 'media' }, + { text: item.nama_ulp, field: 'nama_ulp' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Tgl Lapor', field: 'waktu_lapor' }, + { text: 'Tgl Response', field: 'waktu_response' }, + { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Jml Lapor', field: 'jumlah_lapor' }, + { text: 'Durasi Response Time', field: 'durasi_response_time' }, + { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' }, + { text: 'Status', field: 'status_akhir' }, + { text: 'IDPEL/NO METER', field: 'idpel_nometer' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Telp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'Sumber Lapor', field: 'media' }, + { text: 'Nama ULP', field: 'nama_ulp' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From 690e8e9619a906f1252ad1508edd8043d7848ffe Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 12:49:20 +0700 Subject: [PATCH 3/8] feat: create export pdf, xlsx and docx in daftar keluhan response time --- .../Keluhan/Daftar/DKeluhan_ResponseTime.vue | 208 +------ src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts | 2 +- .../Keluhan/Daftar/DKeluhan_ResponseTime.ts | 540 ++++++++++++++++++ 3 files changed, 550 insertions(+), 200 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue index caf4905..225a84c 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue @@ -330,14 +330,13 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -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 autoTable from 'jspdf-autotable' +import { + exportToPDF, + exportToXLSX, + exportToDOCX +} from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime' const position = { of: '#data' } const showIndicator = ref(true) @@ -368,201 +367,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : '' - const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - let durasi = '' - - if (minTime == '1502' && maxTime != '143998560') { - durasi = 'Melebihi SLA (>1 hari)' - } else if (minTime == '1' && maxTime == '1501') { - durasi = 'Dibawah / Sesuai SLA (<=1 hari)' - } else { - durasi = 'Durasi Menit' - } - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ], - ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Response Time'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Tgl Lapor', - 'Tgl Response', - 'Tgl Recovery', - 'Durasi Response Time', - 'Durasi Recovery Time', - 'Status', - 'IDPEL/NO METER', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Telp Pelapor', - 'Keterangan Pelapor', - 'Nama ULP' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.waktu_lapor, - item.waktu_response, - item.waktu_recovery, - parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', - parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', - item.status_akhir, - item.idpel_nometer, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor, - item.nama_ulp - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc.save('Laporan Daftar Keluhan Response Time.pdf', { returnPromise: true }).then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Response Time') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Response Time.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } diff --git a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts index 19f333a..4b135c1 100644 --- a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts +++ b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts @@ -446,7 +446,7 @@ const exportToDOCX = (reportMeta: any, data: any) => { { text: 'No Laporan', field: 'no_laporan' }, { text: 'Tgl Lapor', field: 'waktu_lapor' }, { text: 'Tgl Response', field: 'waktu_response' }, - { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Tgl Recovery', field: 'waktu_selesai' }, { text: 'Jml Lapor', field: 'jumlah_lapor' }, { text: 'Durasi Response Time', field: 'durasi_response_time' }, { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' }, diff --git a/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts new file mode 100644 index 0000000..5fecc58 --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts @@ -0,0 +1,540 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Response Time' +const fontSize = 4 +const docxFontSize = 8 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : '' + const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + let durasi = '' + + if (minTime == '1502' && maxTime != '143998560') { + durasi = 'Melebihi SLA (>1 hari)' + } else if (minTime == '1' && maxTime == '1501') { + durasi = 'Dibawah / Sesuai SLA (<=1 hari)' + } else { + durasi = 'Durasi Menit' + } + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ], + [ + 'Durasi', + ':', + `${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}` + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Nama ULP' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', + parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', + item.status_akhir, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_ulp + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 5, + 1, + `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}` + ) + + setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 8, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:N1') + worksheet.mergeCells('A2:N2') + worksheet.mergeCells('A3:N3') + worksheet.mergeCells('A4:N4') + worksheet.mergeCells('A5:N5') + worksheet.mergeCells('A7:N7') + worksheet.mergeCells('A8:N8') + + 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 exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_recovery, field: 'waktu_recovery' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + text: parseInt(item.durasi_recovery_time) + ? formatWaktu(item.durasi_recovery_time) + : '-', + field: 'durasi_recovery_time' + }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.idpel_nometer, field: 'idpel_nometer' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.nama_ulp, field: 'nama_ulp' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Tgl Lapor', field: 'waktu_lapor' }, + { text: 'Tgl Response', field: 'waktu_response' }, + { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Durasi Response Time', field: 'durasi_response_time' }, + { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' }, + { text: 'Status', field: 'status_akhir' }, + { text: 'IDPEL/NO METER', field: 'idpel_nometer' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Telp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'Nama ULP', field: 'nama_ulp' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From 4cb672c48dd3f70679e10a7b9d7d2c3857fc285d Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 12:56:06 +0700 Subject: [PATCH 4/8] feat: create export pdf, xlsx and docx in daftar keluhan recovery time --- .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue | 208 +------ .../Keluhan/Daftar/DKeluhan_RecoveryTime.ts | 540 ++++++++++++++++++ 2 files changed, 549 insertions(+), 199 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue index d199665..adeea77 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue @@ -312,13 +312,12 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -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 autoTable from 'jspdf-autotable' +import { + exportToPDF, + exportToDOCX, + exportToXLSX +} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime' const position = { of: '#data' } const showIndicator = ref(true) @@ -349,201 +348,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : '' - const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - let durasi = '' - - if (minTime == '4382' && maxTime != '143998560') { - durasi = 'Melebihi SLA (>3 hari)' - } else if (minTime == '1' && maxTime == '4381') { - durasi = 'Dibawah / Sesuai SLA (<=3 hari)' - } else { - durasi = 'Durasi Menit' - } - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ], - ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Recovery Time'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Tgl Lapor', - 'Tgl Response', - 'Tgl Recovery', - 'Durasi Response Time', - 'Durasi Recovery Time', - 'Status', - 'IDPEL/NO METER', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Telp Pelapor', - 'Keterangan Pelapor', - 'Nama ULP' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.waktu_lapor, - item.waktu_response, - item.waktu_recovery, - parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', - parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', - item.status_akhir, - item.idpel_nometer, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor, - item.nama_ulp - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc.save('Laporan Daftar Keluhan Recovery Time.pdf', { returnPromise: true }).then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Recovery Time') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Recovery Time.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } diff --git a/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts new file mode 100644 index 0000000..dc20fe4 --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts @@ -0,0 +1,540 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Recovery Time' +const fontSize = 4 +const docxFontSize = 8 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : '' + const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + let durasi = '' + + if (minTime == '1502' && maxTime != '143998560') { + durasi = 'Melebihi SLA (>1 hari)' + } else if (minTime == '1' && maxTime == '1501') { + durasi = 'Dibawah / Sesuai SLA (<=1 hari)' + } else { + durasi = 'Durasi Menit' + } + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ], + [ + 'Durasi', + ':', + `${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}` + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Nama ULP' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', + parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', + item.status_akhir, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_ulp + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 5, + 1, + `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}` + ) + + setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 8, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:N1') + worksheet.mergeCells('A2:N2') + worksheet.mergeCells('A3:N3') + worksheet.mergeCells('A4:N4') + worksheet.mergeCells('A5:N5') + worksheet.mergeCells('A7:N7') + worksheet.mergeCells('A8:N8') + + 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 exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_recovery, field: 'waktu_recovery' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + text: parseInt(item.durasi_recovery_time) + ? formatWaktu(item.durasi_recovery_time) + : '-', + field: 'durasi_recovery_time' + }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.idpel_nometer, field: 'idpel_nometer' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.nama_ulp, field: 'nama_ulp' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Tgl Lapor', field: 'waktu_lapor' }, + { text: 'Tgl Response', field: 'waktu_response' }, + { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Durasi Response Time', field: 'durasi_response_time' }, + { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' }, + { text: 'Status', field: 'status_akhir' }, + { text: 'IDPEL/NO METER', field: 'idpel_nometer' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Telp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'Nama ULP', field: 'nama_ulp' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From ea70a81c3c9be09ba5f95dff1f21dc7b6fa296fa Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 13:25:29 +0700 Subject: [PATCH 5/8] feat: create export pdf, xlsx and docx in daftar keluhan selesai tanpa ID pelanggan --- .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue | 196 +------ src/report/Keluhan/Daftar/DKeluhan_STIDP.ts | 512 ++++++++++++++++++ 2 files changed, 517 insertions(+), 191 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_STIDP.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue index 75af7d1..db4d80f 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue @@ -303,13 +303,8 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -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 autoTable from 'jspdf-autotable' +import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP' const position = { of: '#data' } const showIndicator = ref(true) @@ -340,193 +335,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Selesai Tanpa ID Pelanggan'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Tgl Lapor', - 'Tgl Response', - 'Tgl Recovery', - 'Durasi Response Time', - 'Durasi Recovery Time', - 'Status', - 'IDPEL/NO METER', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Telp Pelapor', - 'Keterangan Pelapor', - 'Sumber Lapor', - 'Nama ULP' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.waktu_lapor, - item.waktu_response, - item.waktu_recovery, - parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', - parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', - item.status_akhir, - item.idpel_nometer, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor, - item.media, - item.nama_ulp - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc - .save('Laporan Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf', { returnPromise: true }) - .then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai Tanpa ID Pelanggan') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Selesai Tanpa ID Pelanggan.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } diff --git a/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts new file mode 100644 index 0000000..d0e8777 --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts @@ -0,0 +1,512 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Selesai Tanpa ID Pelanggan' +const fontSize = 4 +const docxFontSize = 6 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Sumber Lapor', + 'Nama ULP' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', + parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', + item.status_akhir, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.media, + item.nama_ulp + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:O1') + worksheet.mergeCells('A2:O2') + worksheet.mergeCells('A3:O3') + worksheet.mergeCells('A4:O4') + worksheet.mergeCells('A6:O6') + worksheet.mergeCells('A7:O7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 9, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +const exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_recovery, field: 'waktu_recovery' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + text: parseInt(item.durasi_recovery_time) + ? formatWaktu(item.durasi_recovery_time) + : '-', + field: 'durasi_recovery_time' + }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.idpel_nometer, field: 'idpel_nometer' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.media, field: 'media' }, + { text: item.nama_ulp, field: 'nama_ulp' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Tgl Lapor', field: 'waktu_lapor' }, + { text: 'Tgl Response', field: 'waktu_response' }, + { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Durasi Response Time', field: 'durasi_response_time' }, + { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' }, + { text: 'Status', field: 'status_akhir' }, + { text: 'IDPEL/NO METER', field: 'idpel_nometer' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Telp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'Sumber Lapor', field: 'media' }, + { text: 'Nama ULP', field: 'nama_ulp' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From 7b0afb49822f5dae56cd649c795be38dfb72e158 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 13:40:58 +0700 Subject: [PATCH 6/8] feat: create export pdf, xlsx and docx in daftar keluhan berdasarkan media --- .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue | 198 +------ .../Keluhan/Daftar/DKeluhan_BerdasarMedia.ts | 512 ++++++++++++++++++ 2 files changed, 521 insertions(+), 189 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue index c078475..661755a 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue @@ -310,13 +310,12 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -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 autoTable from 'jspdf-autotable' +import { + exportToPDF, + exportToXLSX, + exportToDOCX +} from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia' const position = { of: '#data' } const showIndicator = ref(true) @@ -347,191 +346,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Berdasarkan Media'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Telp Pelapor', - 'Keterangan Pelapor', - 'Status', - 'Tgl Lapor', - 'Tgl Response', - 'Tgl Recovery', - 'Response Time', - 'Recovery Time', - 'Sumber Lapor', - 'Tgl Media', - 'Keterangan Media' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor, - item.status_akhir, - item.waktu_lapor, - item.waktu_response, - item.waktu_recovery, - parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', - parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', - item.media, - item.waktu_media, - item.keterangan_media - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc.save('Laporan Daftar Keluhan Berdasarkan Media.pdf', { returnPromise: true }).then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Berdasarkan Media') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Berdasarkan Media.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } diff --git a/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts new file mode 100644 index 0000000..c7756f4 --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts @@ -0,0 +1,512 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Berdasarkan Media' +const fontSize = 4 +const docxFontSize = 6 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Status', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Response Time', + 'Recovery Time', + 'Sumber Lapor', + 'Tgl Media', + 'Keterangan Media' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.status_akhir, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-', + parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-', + item.media, + item.waktu_media, + item.keterangan_media + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:O1') + worksheet.mergeCells('A2:O2') + worksheet.mergeCells('A3:O3') + worksheet.mergeCells('A4:O4') + worksheet.mergeCells('A6:O6') + worksheet.mergeCells('A7:O7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 9, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +const exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_recovery, field: 'waktu_recovery' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + text: parseInt(item.durasi_recovery_time) + ? formatWaktu(item.durasi_recovery_time) + : '-', + field: 'durasi_recovery_time' + }, + { text: item.media, field: 'media' }, + { text: item.waktu_media, field: 'waktu_media' }, + { text: item.keterangan_media, field: 'keterangan_media' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Telp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'Status', field: 'status_akhir' }, + { text: 'Tgl Lapor', field: 'waktu_lapor' }, + { text: 'Tgl Response', field: 'waktu_response' }, + { text: 'Tgl Recovery', field: 'waktu_recovery' }, + { text: 'Response Time', field: 'durasi_response_time' }, + { text: 'Recovery Time', field: 'durasi_recovery_time' }, + { text: 'Sumber Lapor', field: 'media' }, + { text: 'Tgl Media', field: 'waktu_media' }, + { text: 'Keterangan Media', field: 'keterangan_media' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From d4dd36bd00c77c9c9614e798b40c5fb117829ffe Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 13:59:02 +0700 Subject: [PATCH 7/8] feat: create export pdf, xlsx and docx in daftar keluhan selesai di cc --- .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue | 201 +------ .../Keluhan/Daftar/DKeluhan_SelesaiCC.ts | 510 ++++++++++++++++++ 2 files changed, 515 insertions(+), 196 deletions(-) create mode 100644 src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue index 1c27f5f..9cd6af8 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue @@ -322,15 +322,9 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -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' -import autoTable from 'jspdf-autotable' +import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC' const position = { of: '#data' } const showIndicator = ref(true) @@ -361,197 +355,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { } const onExporting = (e: any) => { - const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' - - let dateFromFormat = '' - let dateToFormat = '' - let dayTo = '' - - if (periode != '') { - const dateFrom = new Date(periode[0].split('-').reverse().join('-')) - const dateTo = new Date(periode[1].split('-').reverse().join('-')) - - dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { - month: 'long' - })}-${dateFrom.getFullYear()}` - - dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { - month: 'long' - })}-${dateTo.getFullYear()}` - - dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) - } - if (e.format === 'pdf') { - const doc = new jsPDF({ - orientation: 'landscape' - }) - - autoTable(doc, { - head: [ - ['PT. PLN(Persero)', '', ''], - [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, - { content: ':', styles: { cellWidth: 1 } }, - reportMeta.value.uid - ? reportMeta.value.uid.name.toUpperCase() - : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() - ], - [ - 'UNIT PELAKSANA PELAYANAN PELANGGAN', - ':', - reportMeta.value.up3 - ? reportMeta.value.up3.name.toUpperCase() - : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() - ], - [ - 'UNIT LAYANAN PELANGGAN', - ':', - reportMeta.value.ulp - ? reportMeta.value.ulp.name.toUpperCase() - : 'Semua Unit Layanan Pelanggan'.toUpperCase() - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold' - }, - theme: 'plain', - startY: 10 - }) - - autoTable(doc, { - head: [ - ['Daftar Keluhan Selesai di Contact Center'.toUpperCase()], - [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - startY: 18 - }) - - autoTable(doc, { - head: [ - [ - 'No', - 'No Laporan', - 'Contact Center', - 'UI Dist.', - 'ULP', - 'IDPEL/NO METER', - 'Nama Pelapor', - 'Alamat Pelapor', - 'No Tlp Pelapor', - 'Keterangan Pelapor', - 'APKT Status', - 'Created By', - 'Tgl Penyelesaian', - 'Lapor Ulang', - 'Sumber Lapor', - 'Issue Type', - 'Sub Issue Type' - ] - ], - body: data.value.map((item: any, i: any) => [ - { content: ++i, styles: { halign: 'right' } }, - item.no_laporan, - item.nama_ulp, - item.nama_uid, - item.nama_ulp, - item.idpel_nometer, - item.nama_pelapor, - item.alamat_pelapor, - item.no_telp_pelapor, - item.keterangan_pelapor, - item.status_akhir, - item.nama_pelapor, - item.waktu_recovery, - item.jumlah_lapor, - item.media, - item.nama_issuetype, - item.nama_subissuetype - ]), - styles: { - fontSize: 3, - 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' - }, - 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: 23 - }) - - autoTable(doc, { - head: [ - [`${dayTo}, ${dateToFormat}`], - [ - { - content: '(.........................................)', - styles: { minCellHeight: 8, valign: 'bottom' } - } - ] - ], - styles: { - fontSize: 3, - cellPadding: 0.1, - textColor: [0, 0, 0], - fontStyle: 'bold', - halign: 'center' - }, - theme: 'plain', - tableWidth: 50, - margin: { left: 230 } - }) - - doc - .save('Laporan Daftar Keluhan Selesai di Contact Center.pdf', { returnPromise: true }) - .then(() => { - console.log('pdf berhasil disimpan') - }) + exportToPDF(reportMeta, data) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai di Contact Center') - - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs( - new Blob([buffer], { type: 'application/octet-stream' }), - 'Daftar Keluhan Selesai di Contact Center.xlsx' - ) - }) - }) - - e.cancel = true + exportToDOCX(reportMeta, data) } } diff --git a/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts new file mode 100644 index 0000000..b03bc42 --- /dev/null +++ b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts @@ -0,0 +1,510 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' + +const reportName = 'Daftar Keluhan Selesai di Contact Center' +const fontSize = 4 +const docxFontSize = 6 + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 35 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 25 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Contact Center', + 'UI Dist.', + 'ULP', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Tlp Pelapor', + 'Keterangan Pelapor', + 'APKT Status', + 'Created By', + 'Tgl Penyelesaian', + 'Lapor Ulang', + 'Sumber Lapor', + 'Issue Type', + 'Sub Issue Type' + ] + ], + body: data.value.map((item: any, i: any) => [ + { content: ++i, styles: { halign: 'right' } }, + item.no_laporan, + item.nama_ulp, + item.nama_uid, + item.nama_ulp, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.status_akhir, + item.nama_pelapor, + item.waktu_recovery, + item.jumlah_lapor, + item.media, + item.nama_issuetype, + item.nama_subissuetype + ]), + styles: { + fontSize, + 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' + }, + 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: 35 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan ${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.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:Q1') + worksheet.mergeCells('A2:Q2') + worksheet.mergeCells('A3:Q3') + worksheet.mergeCells('A4:Q4') + worksheet.mergeCells('A6:Q6') + worksheet.mergeCells('A7:Q7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 9, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +const exportToDOCX = (reportMeta: any, data: any) => { + const meta = formatMetaData(reportMeta) + + const generateRows = () => { + return data.value.map((item: any, i: any) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.nama_ulp, field: 'nama_ulp' }, + { text: item.nama_uid, field: 'nama_uid' }, + { text: item.nama_ulp, field: 'nama_ulp' }, + { text: item.idpel_nometer, field: 'idpel_nometer' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: item.alamat_pelapor, field: 'alamat_pelapor' }, + { text: item.no_telp_pelapor, field: 'no_telp_pelapor' }, + { text: item.keterangan_pelapor, field: 'keterangan_pelapor' }, + { text: item.status_akhir, field: 'status_akhir' }, + { text: item.nama_pelapor, field: 'nama_pelapor' }, + { text: formatWaktu(item.waktu_recovery), field: 'waktu_recovery' }, + { text: item.jumlah_lapor, field: 'jumlah_lapor' }, + { text: item.media, field: 'media' }, + { text: item.nama_issuetype, field: 'nama_issuetype' }, + { text: item.nama_subissuetype, field: 'nama_subissuetype' } + ].map( + (cell) => + new TableCell({ + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: cell.text, + size: docxFontSize + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER, + margins: { top: 0, bottom: 0, right: 0, left: 30 } + }) + ) + }) + }) + } + + const doc = new Document({ + sections: [ + { + properties: { + page: { + size: { + orientation: PageOrientation.LANDSCAPE + } + } + }, + children: [ + new Paragraph({ + children: [ + new TextRun({ + text: 'PT. PLN(Persero)', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT INDUK : ${ + reportMeta.value.uid + ? reportMeta.value.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.value.up3 + ? reportMeta.value.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: `UNIT LAYANAN PELANGGAN : ${ + reportMeta.value.ulp + ? reportMeta.value.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `${reportName}`.toUpperCase(), + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Table({ + width: { + size: 13950, + type: WidthType.DXA + }, + rows: [ + new TableRow({ + children: [ + { text: 'No', field: 'no' }, + { text: 'No Laporan', field: 'no_laporan' }, + { text: 'Contact Center', field: 'nama_ulp' }, + { text: 'UI Dist.', field: 'nama_uid' }, + { text: 'ULP', field: 'nama_ulp' }, + { text: 'IDPEL/NO METER', field: 'idpel_nometer' }, + { text: 'Nama Pelapor', field: 'nama_pelapor' }, + { text: 'Alamat Pelapor', field: 'alamat_pelapor' }, + { text: 'No Tlp Pelapor', field: 'no_telp_pelapor' }, + { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' }, + { text: 'APKT Status', field: 'status_akhir' }, + { text: 'Created By', field: 'nama_pelapor' }, + { text: 'Tgl Penyelesaian', field: 'waktu_recovery' }, + { text: 'Lapor Ulang', field: 'jumlah_lapor' }, + { text: 'Sumber Lapor', field: 'media' }, + { text: 'Issue Type', field: 'nama_issuetype' }, + { text: 'Sub Issue Type', field: 'nama_subissuetype' } + ].map( + (header) => + new TableCell({ + children: [ + new Paragraph({ + alignment: AlignmentType.CENTER, + children: [ + new TextRun({ + text: header.text, + bold: true, + size: docxFontSize, + allCaps: true + }) + ] + }) + ], + verticalAlign: VerticalAlign.CENTER + }) + ) + }), + ...generateRows() + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: `${meta.dayTo}, ${meta.dateToFormat}`, + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + children: [ + new TextRun({ + text: '', + bold: true, + size: docxFontSize + }) + ] + }), + new Paragraph({ + alignment: AlignmentType.RIGHT, + children: [ + new TextRun({ + text: '(.........................................)', + bold: true, + size: docxFontSize + }) + ] + }) + ] + } + ] + }) + + Packer.toBlob(doc).then((blob) => { + saveAs(blob, `Laporan ${reportName}.docx`) + console.log('Document created successfully') + }) +} + +export { exportToPDF, exportToXLSX, exportToDOCX } From 0b1df3f0e6d0668141ba0dc3366c1a6463866e19 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sun, 31 Mar 2024 16:25:48 +0700 Subject: [PATCH 8/8] feat: create export pdf in rekapitulasi keluhan all --- .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue | 49 +- src/report/Keluhan/Rekap/RKeluhan_ALL.ts | 640 ++++++++++++++++++ 2 files changed, 660 insertions(+), 29 deletions(-) create mode 100644 src/report/Keluhan/Rekap/RKeluhan_ALL.ts diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue index 8526206..6f8f97a 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue @@ -1,5 +1,6 @@