feat: create export pdf, xlsx in monalisa rekapitulasi gangguan
This commit is contained in:
kur0nek-o
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -285,18 +286,13 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -319,6 +315,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -351,6 +361,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -362,30 +387,10 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -203,7 +204,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -500,6 +501,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -523,12 +525,6 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
@ -537,6 +533,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -555,6 +558,15 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
@ -589,6 +601,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -600,33 +622,21 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -152,17 +153,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -181,6 +181,15 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -207,6 +216,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -218,30 +237,10 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -7,6 +8,7 @@
|
||||
>
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div>
|
||||
<DxDataGrid
|
||||
ref="dataGridRef"
|
||||
@ -379,18 +381,16 @@ import {
|
||||
DxSelection,
|
||||
DxSummary
|
||||
} 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 { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -408,6 +408,17 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -433,6 +444,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: bulan.id,
|
||||
currentYear: tahun.id
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -447,30 +470,10 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -287,18 +288,13 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -321,6 +317,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -353,6 +363,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -363,30 +388,10 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -270,6 +271,7 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -292,18 +294,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -326,6 +326,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -358,6 +372,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -369,30 +398,10 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -270,6 +271,7 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -292,18 +294,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -326,6 +326,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -358,6 +372,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -369,30 +398,10 @@ const filterData = async (params: 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`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
Reference in New Issue
Block a user