apkt-eis/src/components/Pages/Material/Rekap/Material_RPM.vue

<template>
  <Filters @run-search="() => filterData(filters)" class="mb-4">
    <Type14 @update:filters="(value) => (filters = value)" />
  </Filters>
  <div id="data">
    <DxDataGrid
      ref="dataGridRef"
      :allow-column-reordering="true"
      class="max-h-[calc(100vh-140px)] mb-10"
      :show-column-lines="true"
      :show-row-lines="false"
      :show-borders="true"
      :row-alternation-enabled="true"
      :hover-state-enabled="true"
      @selection-changed=""
      :column-width="100"
      @exporting=""
      :allow-column-resizing="true"
      column-resizing-mode="widget"
    >
      <DxSelection mode="single" />
      <DxPaging :page-size="20" :enabled="true" />
      <DxPager
        :visible="true"
        :allowed-page-sizes="[20, 50, 100]"
        display-mode="full"
        :show-page-size-selector="true"
        :show-info="true"
        :show-navigation-buttons="true"
      />
      <DxLoadPanel
        shading-color="rgba(0,0,0,0.4)"
        :position="position"
        :show-indicator="showIndicator"
        :show-pane="showPane"
        :shading="shading"
        v-if="loading"
        v-model:visible="loading"
        :enabled="true"
      />
      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
      <DxExport
        :enabled="true"
        :formats="['pdf', 'xlsx', 'document']"
        :allow-export-selected-data="false"
      />
      <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
        css-class="custom-table-column"
        :width="170"
        alignment="center"
        data-field="kode_material"
        caption="Kode Material"
      />
      <DxColumn
        css-class="custom-table-column"
        :width="170"
        alignment="center"
        data-field="nama_material"
        caption="Nama Material"
      />
      <DxColumn
        css-class="custom-table-column"
        :width="120"
        alignment="center"
        data-field="satuan"
        caption="Satuan"
      />
      <DxColumn
        css-class="custom-table-column"
        :width="170"
        alignment="center"
        data-field="sumber_material"
        caption="Sumber Material"
      />
      <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
        <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 { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
  DxColumn,
  DxExport,
  DxLoadPanel,
  DxPager,
  DxPaging,
  DxSearchPanel,
  DxSelection
} from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
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 data = ref<any[]>([])

const rekapitulasiPemakaianMaterial = gql`
  query DaftarrekapitulasiPemakaianMaterial(
    $dateFrom: Date!
    $dateTo: Date!
    $posko: String
    $idUid: Int
    $idUp3: Int
  ) {
    rekapitulasiPemakaianMaterial(
      dateFrom: $dateFrom
      dateTo: $dateTo
      distribusi: $idUid
      area: $idUp3
      posko: $posko
    ) {
      kode_material
      nama_material
      satuan
      sumber_material
      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 { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
  idUid: 0,
  idUp3: 0,
  posko: 0
})
const filterData = (params: any) => {
  const dateValue = params.periode.split(' s/d ')

  const { posko, idUid, idUp3 } = params

  refetch({
    dateFrom: dateValue[0]
      ? dateValue[0].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
    dateTo: dateValue[1]
      ? dateValue[1].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
    idUid: idUid ? idUid.id : 0,
    idUp3: idUp3 ? idUp3.id : 0,
    posko: posko ? posko.id : 0
  })
  onResult((queryResult) => {
    if (queryResult.data != undefined) {
      queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
        data.value = [
          ...data.value,
          {
            ...item
          }
        ]
      })
    }
    console.log(queryResult.data)
  })
  onError((error) => {
    console.log(error)
  })
}
const filters = ref()
</script>