From 70f99426e8b64cfaf6561347b4ee0fbdf1648f22 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Sat, 16 Mar 2024 14:17:26 +0700 Subject: [PATCH] fix: pdf style in daftar gangguan dialihkan ke posko lain --- .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue | 203 ++++++++++++------ 1 file changed, 137 insertions(+), 66 deletions(-) diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue index 44c40ed..801a3f1 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue +++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue @@ -375,6 +375,27 @@ const showDetail = ref(false) const closeDetail = () => (showDetail.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' @@ -382,7 +403,59 @@ const onExporting = (e: any) => { 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() + ], + [ + 'POSKO', + ':', + reportMeta.value.posko + ? reportMeta.value.posko.name.toUpperCase() + : 'Semua Posko'.toUpperCase() + ] + ], + styles: { + fontSize: 3, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + ['DAFTAR GANGGUAN DIALIHKAN KE POSKO LAIN'], + [`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', @@ -403,7 +476,8 @@ const onExporting = (e: any) => { 'Posko' ] ], - body: data.value.map((item) => [ + body: data.value.map((item, i) => [ + { content: ++i, styles: { halign: 'right' } }, item.no_laporan, item.pembuat_laporan, item.waktu_lapor, @@ -424,74 +498,60 @@ const onExporting = (e: any) => { item.posko ]), styles: { - fontSize: 3 - } + 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 }) - doc.save('Daftar Gangguan Dialihkan Ke Posko Lain.pdf') + 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 } + }) - // const doc = new jsPDF({ - // orientation: 'landscape', - // unit: 'mm', - // format: 'F4' - // }) - // // Initialize page number - // const pageNumber = ref(1) - // autoTable(doc, { - // head: [ - // [ - // 'No Laporan', - // 'Pembuat Laporan', - // 'Tgl Lapor', - // 'Tgl Dialihkan', - // 'Tgl Response', - // 'Tgl Recovery', - // 'Durasi Response Time', - // 'Durasi Recovery Time', - // 'Posko Awal', - // 'Posko Tujuan', - // 'Status', - // 'IDPEL/NO METER', - // 'Nama Pelapor', - // 'Alamat Pelapor', - // 'No Telp Pelapor', - // 'Keterangan Pelapor', - // 'Sumber Lapor', - // 'Posko' - // ] - // ], - // startY: 10, - // body: data.value.map((item) => [ - // item.no_laporan, - // item.pembuat_laporan, - // item.waktu_lapor, - // item.waktu_dialihkan, - // item.waktu_response, - // item.waktu_recovery, - // item.durasi_response_time, - // item.durasi_recovery_time, - // item.nama_posko_lama, - // item.nama_posko_baru, - // item.status_akhir, - // item.idpel_nometer, - // item.nama_pelapor, - // item.alamat_pelapor, - // item.no_telp_pelapor, - // item.keterangan_pelapor, - // item.media, - // item.posko - // ]), - // styles: { - // fontSize: 6, - // cellWidth: 'wrap' - // } - // }) - // doc.setProperties({ - // title: 'Daftar Gangguan Dialihkan Ke Posko Lain', - // subject: 'Daftar Gangguan Dialihkan Ke Posko Lain' - // }) - // pageNumber.value++ // Increment the pageNumber - // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`) + doc + .save('Laporan Daftar Gangguan Dialihkan Ke Posko Lain.pdf', { returnPromise: true }) + .then(() => { + console.log('pdf berhasil disimpan') + }) } else { const workbook = new Workbook() const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain') @@ -516,6 +576,7 @@ const onExporting = (e: any) => { const filterData = (params: any) => { const { posko, uid, up3 } = params const dateValue = params.periode.split(' s/d ') + refetch({ dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') @@ -531,6 +592,8 @@ const filterData = (params: any) => { if (queryResult.data != undefined) { data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain } + + reportMeta.value = filters.value console.log(queryResult.data) console.log(queryResult.loading) console.log(queryResult.networkStatus) @@ -554,7 +617,15 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { dataDetail.value = data } const showData = () => (showDetail.value = true) + const filters = ref() +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + posko: { id: 0, name: 'Semua Posko' }, + periode: '' +}) + onMounted(() => { if (import.meta.env.DEV) { data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain