apkt-eis/src/components/Pages/Gangguan/Table_14.vue

<template>
    <div id="data">
        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
            <DxSelection mode="single" />
            <DxPaging :enabled="false" />
            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
            <DxLoadPanel :enabled="true" />
            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
            <DxColumnFixing :enabled="true" />

             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
             data-type="number"
                caption="No" />
            <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
                css-class="custom-table-column" />
            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
                    :caption="i" css-class="custom-table-column" />
            </DxColumn>

        </DxDataGrid>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, 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 { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag';
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`)
        })
    } 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 onSelectionChanged = ({ selectedRowsData }: any) => {
    const data = selectedRowsData[0]
    console.log(data)
}


const data = ref<any[]>([])
const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
query rekapitulasiGangguanBerdasarkanMedia(
    $dateFrom: Date!
    $dateTo: Date!
    $posko: String!
    $idUid: Int!
    $idUp3: Int!
) {
    rekapitulasiGangguanBerdasarkanMedia(
        dateFrom: $dateFrom
        dateTo: $dateTo
        posko: $posko
        idUid: $idUid
        idUp3: $idUp3
    ) {
                media
            tgl1
            tgl10
            tgl11
            tgl12
            tgl13
            tgl14
            tgl15
            tgl16
            tgl17
            tgl18
            tgl19
            tgl2
            tgl20
            tgl21
            tgl22
            tgl23
            tgl24
            tgl25
            tgl26
            tgl27
            tgl28
            tgl29
            tgl3
            tgl30
            tgl31
            tgl4
            tgl5
            tgl6
            tgl7
            tgl8
            tgl9
        }
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
    const filters = useFiltersStore()
    const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
        posko: "",
        idUid: 0,
        idUp3: 0,
    })

    onResult(queryResult => {
        if (queryResult.data != undefined) {
            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
            loadingVisible.value = false
        }
        console.log(queryResult.data)
        console.log(queryResult.loading)
        console.log(queryResult.networkStatus)
    })
    onError((error) => {
        console.log(error)
    })
    filters.setConfig({
        type: 'type-1',
        reportButton: true
    })
})
</script>