feat: create pdf, xlsx report in anomali

This commit is contained in:
kur0nek-o
2024-04-04 14:09:47 +07:00
parent f2259e7f2c
commit c104c1183b
15 changed files with 2517 additions and 174 deletions

View File

@ -17,7 +17,7 @@
@update:data-sub="dataSub = $event"
@update:loading-sub-data="loadingSubData = $event"
/>
<Anomali_LAPPGP_LPP :data="dataSub" />
<Anomali_LAPPGP_LPP :data="dataSub" :filters="filters" />
</template>
<script setup lang="ts">

View File

@ -216,16 +216,14 @@ 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'
import { computed, ref } from 'vue'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
const props = defineProps({
data: Array as () => any[]
data: Array as () => any[],
filters: Object as () => any
})
const data = computed(() => props.data)
const dataSub = ref([])
@ -233,6 +231,7 @@ const dataSelected = ref({})
const dataSubSelected = ref({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const reportMeta = ref<any>(computed(() => props.filters))
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
@ -247,30 +246,10 @@ const closeDialog = () => {
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
}
}

View File

@ -435,6 +435,8 @@
/>
</DxSummary>
</DxDataGrid>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -453,14 +455,11 @@ 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPT'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
@ -485,6 +484,7 @@ const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const mediaSelected = ref<any>(null)
const markingSelected = ref<any>(null)
const reportMeta = ref<any>(computed(() => props.filters))
const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
@ -580,30 +580,10 @@ const showDetail = () => {
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
}
}

View File

@ -11,7 +11,7 @@
</Filters>
<Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
<Anomali_LAPPGU_LPP :data="dataSecond" />
<Anomali_LAPPGU_LPP :data="dataSecond" :filters="filters" />
</template>
<script setup lang="ts">

View File

@ -123,17 +123,16 @@ 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'
import { computed, ref } from 'vue'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPP'
const props = defineProps({
data: Array as () => any[]
data: Array as () => any[],
filters: Object as () => any
})
const reportMeta = ref<any>(computed(() => props.filters))
const data = computed(() => props.data)
const dataSub = ref<any[]>([])
const dataSelected = ref<any>({})
@ -154,30 +153,10 @@ const closeDialog = () => {
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
}
}

View File

@ -2,6 +2,7 @@
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
@ -1021,6 +1022,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading || loadingSubData" />
</template>
<script setup lang="ts">
@ -1040,16 +1043,14 @@ 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import InputText from '@/components/InputText.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPT'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const loading = ref(computed(() => props.loading))
@ -1075,6 +1076,7 @@ const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const mediaSelected = ref<any>(null)
const markingSelected = ref<any>(null)
const reportMeta = ref<any>(computed(() => props.filters))
const setParameterRequest = (media: any, marking: any) => {
mediaSelected.value = media
@ -1168,30 +1170,10 @@ const showDetail = () => {
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
}
}

View File

@ -11,7 +11,7 @@
</Filters>
<Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :filters="filters" />
<Anomali_LAPPKU_LPP :data="dataSecond" />
<Anomali_LAPPKU_LPP :data="dataSecond" :filters="filters" />
</template>
<script setup lang="ts">

View File

@ -124,20 +124,18 @@ 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'
import { computed, ref } from 'vue'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPP'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const props = defineProps({
data: Array as () => any[],
filters: Object as () => any,
loading: {
type: Boolean,
default: false
@ -145,36 +143,16 @@ const props = defineProps({
})
const data = computed(() => props.data)
const loading = ref(false)
const reportMeta = ref<any>(computed(() => props.filters))
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, true)
} 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 dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!

View File

@ -728,6 +728,8 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -747,16 +749,14 @@ 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPT'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -780,6 +780,7 @@ const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const mediaSelected = ref<any>(null)
const reportMeta = ref<any>(computed(() => props.filters))
const setParameterRequest = (media: any) => {
mediaSelected.value = media
@ -855,30 +856,10 @@ const getDetail = async () => {
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
}
}