diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue index beaf141..72702ae 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue +++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue @@ -14,7 +14,7 @@ :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" - @exporting="" + @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" > @@ -323,6 +323,11 @@ import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' import { formatNumber, isNumber } from '@/utils/numbers' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { saveAs } from 'file-saver' +import { Workbook } from 'exceljs' const position = { of: '#data' } const showIndicator = ref(true) @@ -384,6 +389,76 @@ const filterData = (params: any) => { }) } +const onExporting = (e: any) => { + if (e.format === 'pdf') { + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + [ + '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', + 'Posko' + ] + ], + body: data.value.map((item) => [ + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.jumlah_lapor, + item.durasi_response_time, + 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_posko + ]), + styles: { + fontSize: 4 + } + }) + + doc.save('Daftar Gangguan Melapor Lebih Dari 1 Kali.pdf') + } else { + const workbook = new Workbook() + const worksheet = workbook.addWorksheet('Daftar Gangguan Melapor 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 Gangguan Melapor Lebih Dari 1 Kali.xlsx' + ) + }) + }) + + e.cancel = true + } +} + onMounted(() => { if (import.meta.env.DEV) { data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue index b740d43..128af10 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue +++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue @@ -29,7 +29,7 @@ :row-alternation-enabled="true" :hover-state-enabled="true" :column-width="100" - @exporting="" + @exporting="onExporting" :allow-column-resizing="true" @selection-changed="onSelectionChanged" column-resizing-mode="widget" @@ -345,6 +345,11 @@ import { import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { saveAs } from 'file-saver' +import { Workbook } from 'exceljs' const position = { of: '#data' } const showIndicator = ref(true) @@ -393,6 +398,74 @@ const filterData = (params: any) => { }) } +const onExporting = (e: any) => { + if (e.format === 'pdf') { + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + [ + 'No Laporan', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'Referensi Marking', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Posko' + ] + ], + body: data.value.map((item) => [ + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.durasi_response_time, + item.durasi_recovery_time, + item.status_akhir, + item.referensi_marking, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_posko + ]), + styles: { + fontSize: 4 + } + }) + + doc.save('Daftar Gangguan Recovery Time.pdf') + } else { + const workbook = new Workbook() + const worksheet = workbook.addWorksheet('Daftar Gangguan 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 Gangguan Recovery Time.xlsx' + ) + }) + }) + + e.cancel = true + } +} + const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, { dateFrom: new Date().toISOString().slice(0, 10), dateTo: new Date().toISOString().slice(0, 10), diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue index bbe19ec..f7d57c4 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue +++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue @@ -14,7 +14,7 @@ :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" - @exporting="" + @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" > @@ -322,6 +322,11 @@ import InputText from '@/components/InputText.vue' import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { saveAs } from 'file-saver' +import { Workbook } from 'exceljs' const position = { of: '#data' } const showIndicator = ref(true) @@ -378,6 +383,74 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar idUp3: 0 }) +const onExporting = (e: any) => { + if (e.format === 'pdf') { + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + [ + 'No Laporan', + 'Tgl Lapor', + 'Tgl Response', + 'Tgl Recovery', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'Referensi Marking', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Posko' + ] + ], + body: data.value.map((item) => [ + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.durasi_response_time, + item.durasi_recovery_time, + item.status_akhir, + item.referensi_marking, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_posko + ]), + styles: { + fontSize: 4 + } + }) + + doc.save('Daftar Gangguan Response Time.pdf') + } else { + const workbook = new Workbook() + const worksheet = workbook.addWorksheet('Daftar Gangguan 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 Gangguan Response Time.xlsx' + ) + }) + }) + + e.cancel = true + } +} + const filters = ref() onMounted(() => { if (import.meta.env.DEV) { diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue index 975c5d4..abe8386 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue +++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue @@ -14,7 +14,7 @@ :hover-state-enabled="true" @selection-changed="" :column-width="100" - @exporting="" + @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" > @@ -204,6 +204,11 @@ import { import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { saveAs } from 'file-saver' +import { Workbook } from 'exceljs' const position = { of: '#data' } const showIndicator = ref(true) @@ -249,6 +254,74 @@ const filterData = (params: any) => { }) } +const onExporting = (e: any) => { + if (e.format === 'pdf') { + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + [ + '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', + 'Posko' + ] + ], + body: data.value.map((item) => [ + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.durasi_response_time, + 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_posko + ]), + styles: { + fontSize: 4 + } + }) + + doc.save('Daftar Gangguan Selesai Tanpa ID Pelanggan.pdf') + } else { + const workbook = new Workbook() + const worksheet = workbook.addWorksheet('Daftar Gangguan 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 Gangguan Selesai Tanpa ID Pelanggan.xlsx' + ) + }) + }) + + e.cancel = true + } +} + const filters = ref() onMounted(() => { if (import.meta.env.DEV) { diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue index 49f9343..9dabd0d 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue @@ -308,13 +308,13 @@ import { DxSelection } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) @@ -338,18 +338,54 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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) => [ + 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: 4 + } + }) + + doc.save('Daftar Keluhan Berdasarkan Media.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Berdasarkan Media') exportToExcel({ component: e.component, @@ -357,7 +393,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Berdasarkan Media.xlsx' + ) }) }) diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue index 311d8b2..31d384f 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue @@ -220,8 +220,6 @@ import { DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' @@ -229,6 +227,8 @@ import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) @@ -237,18 +237,56 @@ const showPane = ref(true) const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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) => [ + 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_unit_lama, + item.status_akhir, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor + ]), + styles: { + fontSize: 4 + } + }) + + doc.save('Daftar Keluhan Dialihkan Ke Unit Lain.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Dialihkan Ke Unit Lain') exportToExcel({ component: e.component, @@ -256,7 +294,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Dialihkan Ke Unit Lain.xlsx' + ) }) }) diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue index 4cdf965..55b8487 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue @@ -332,7 +332,6 @@ import { DxSelection } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' @@ -340,6 +339,7 @@ import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) @@ -363,18 +363,56 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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) => [ + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.jumlah_lapor, + item.durasi_response_time, + 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: 4 + } + }) + + doc.save('Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Pelanggan Lebih Dari 1 Kali') exportToExcel({ component: e.component, @@ -382,7 +420,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali.xlsx' + ) }) }) diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue index 7165959..5a66908 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue @@ -294,13 +294,13 @@ import { DxSelection } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) @@ -324,18 +324,52 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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((i) => [ + i.no_laporan, + i.waktu_lapor, + i.waktu_response, + i.waktu_recovery, + parseInt(i.durasi_response_time) ? formatWaktu(i.durasi_response_time) : '-', + parseInt(i.durasi_recovery_time) ? formatWaktu(i.durasi_recovery_time) : '-', + i.status_akhir, + i.idpel_nometer, + i.nama_pelapor, + i.alamat_pelapor, + i.no_telp_pelapor, + i.keterangan_pelapor, + i.nama_ulp + ]), + styles: { + fontSize: 4 + } + }) + + doc.save('Daftar Keluhan Recovery Time.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Recovery Time') exportToExcel({ component: e.component, @@ -343,7 +377,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Recovery Time.xlsx' + ) }) }) diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue index ace3988..e1ae2f1 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue @@ -312,7 +312,6 @@ import { DxSelection } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' @@ -320,6 +319,7 @@ import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) @@ -343,18 +343,52 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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) => [ + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.durasi_response_time, + 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: 4 + } + }) + + doc.save('Daftar Keluhan Response Time.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Response Time') exportToExcel({ component: e.component, @@ -362,7 +396,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Response Time.xlsx' + ) }) }) diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue index 39c37a3..020cf91 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue @@ -301,13 +301,13 @@ import { DxSelection } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) @@ -331,18 +331,54 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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) => [ + 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: 4 + } + }) + + doc.save('Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai Tanpa ID Pelanggan') exportToExcel({ component: e.component, @@ -350,7 +386,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Selesai Tanpa ID Pelanggan.xlsx' + ) }) }) diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue index 14b234d..1c66c79 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue @@ -209,32 +209,73 @@ import { DxSelection } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { saveAs } from 'file-saver' import { Workbook } from 'exceljs' import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' +import autoTable from 'jspdf-autotable' const position = { of: '#data' } const showIndicator = ref(true) const shading = ref(true) const showPane = ref(true) + const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) + const doc = new jsPDF({ + orientation: 'landscape' }) + + autoTable(doc, { + head: [ + [ + '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) => [ + 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: 4 + } + }) + + doc.save('Daftar Keluhan Selesai di Contact Center.pdf') } else { const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai di Contact Center') exportToExcel({ component: e.component, @@ -242,7 +283,10 @@ const onExporting = (e: any) => { autoFilterEnabled: true }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + 'Daftar Keluhan Selesai di Contact Center.xlsx' + ) }) })