feat: create export xlsx in rekapitulasi keluhan all

This commit is contained in:
kur0nek-o 2024-04-02 10:55:40 +07:00
parent 6337cd10cc
commit 57beb6eb2d
3 changed files with 37 additions and 23 deletions

View File

@ -5545,10 +5545,6 @@ body {
grid-column-start: 2; grid-column-start: 2;
} }
.sm\:m-8 {
margin: 2rem;
}
.sm\:mx-0 { .sm\:mx-0 {
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;

View File

@ -8,6 +8,7 @@
> >
<Type3 @update:filters="(value) => (filters = value)" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid <DxDataGrid
@cell-click="onCellClicked" @cell-click="onCellClicked"
@ -723,6 +724,7 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" /> <BufferDialog v-if="loadingData || loadingSubData" />
</template> </template>
@ -731,7 +733,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { ref, onMounted, watch } from 'vue' import { ref, onMounted } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -752,7 +754,12 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL' import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
} from '@/report/Keluhan/Rekap/RKeluhan_ALL'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue' import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const client = apolloClient() const client = apolloClient()
@ -986,6 +993,7 @@ const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value) exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') { } else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else { } else {
} }
} }
@ -994,6 +1002,7 @@ const onExportingDetail = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value) exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') { } else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else { } else {
} }
} }

View File

@ -567,32 +567,37 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet, worksheet,
4, 4,
1, 1,
`POSKO : ${ `UNIT LAYANAN PELANGGAN : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() reportMeta.ulp
? reportMeta.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}` }`
) )
setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true) setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
setHeaderStyle( setHeaderStyle(
worksheet, worksheet,
8, 7,
8, 1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true true
) )
worksheet.mergeCells('A1:F1') worksheet.mergeCells('A1:Q1')
worksheet.mergeCells('A2:F2') worksheet.mergeCells('A2:Q2')
worksheet.mergeCells('A3:F3') worksheet.mergeCells('A3:Q3')
worksheet.mergeCells('A4:F4') worksheet.mergeCells('A4:Q4')
worksheet.mergeCells('H7:J7') worksheet.mergeCells('A6:Q6')
worksheet.mergeCells('H8:J8') worksheet.mergeCells('A7:Q7')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 } topLeftCell: { row: 9, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -608,23 +613,27 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
const worksheet = workbook.addWorksheet(`Detail ${reportName}`) const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true) setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
setHeaderStyle( setHeaderStyle(
worksheet, worksheet,
4, 4,
8, 1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true true
) )
worksheet.mergeCells('H3:J3') worksheet.mergeCells('A1:P1')
worksheet.mergeCells('H4:J4') worksheet.mergeCells('A3:P3')
worksheet.mergeCells('A4:P4')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 } topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs( saveAs(