feat: create pdf, xlsx report in anomali
This commit is contained in:
@ -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">
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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!
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user