fix: add margin bottom to all table

2024-02-29 10:43:15 +07:00
parent c842088e63
commit cd1ca307d0
73 changed files with 9991 additions and 4764 deletions
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@ -1,57 +1,154 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type14 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :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" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type14 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :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="nomo_gangguan"
-                caption="Nomor Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
-                caption="Nama Pelanggan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
-                caption="Isi Laporan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
-                caption="Penyebab Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
-                caption="Tgl Padam" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
-            <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
-                    caption="Sumber" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
-                    caption="Satuan" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
-                    caption="Vol" />
-            </DxColumn>
-
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nomo_gangguan"
+        caption="Nomor Gangguan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_pelanggan"
+        caption="Nama Pelanggan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="isi_laporan"
+        caption="Isi Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="penyebab_gangguan"
+        caption="Penyebab Gangguan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="waktu_padam"
+        caption="Tgl Padam"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Nyala"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="regu"
+        caption="Regu"
+      />
+      <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="sumber"
+          caption="Sumber"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field=""
+          caption="Nama"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="satuan"
+          caption="Satuan"
+        />
+        <DxColumn
+          css-class="custom-table-column"
+          :width="170"
+          alignment="center"
+          data-field="volume"
+          caption="Vol"
+        />
+      </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 Filters from '@/components/Form/Filters.vue';
-import { Type14 } from '@/components/Form/FiltersType';
-import { useQuery } from '@vue/apollo-composable';
-import gql from 'graphql-tag';
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import Filters from '@/components/Form/Filters.vue'
+import { Type14 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@ -60,65 +157,71 @@ const data = ref<any[]>([])

 const daftarGangguanDanMaterialDipakai = gql`
  query DaftardaftarGangguanDanMaterialDipakai(
-    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
  ) {
    daftarGangguanDanMaterialDipakai(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        distribusi: $idUid
-        area: $idUp3
-        posko: $posko
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      distribusi: $idUid
+      area: $idUp3
+      posko: $posko
    ) {
-        isi_laporan
-        nama_material
-        nama_pelanggan
-        nomor_gangguan
-        penyebab_gangguan
-        regu
-        satuan
-        sumber
-        volume
-        waktu_padam
-
+      isi_laporan
+      nama_material
+      nama_pelanggan
+      nomor_gangguan
+      penyebab_gangguan
+      regu
+      satuan
+      sumber
+      volume
+      waktu_padam
    }
  }
 `
 const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
-    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: ''
+  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: ''
 })
 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.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  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.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
+</script>
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@ -1,43 +1,110 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type14 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :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" />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type14 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      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="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :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>
+      <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 {
+  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'
@ -50,91 +117,98 @@ const data = ref<any[]>([])

 const rekapitulasiPemakaianMaterial = gql`
  query DaftarrekapitulasiPemakaianMaterial(
-    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
  ) {
    rekapitulasiPemakaianMaterial(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        distribusi: $idUid
-        area: $idUp3
-        posko: $posko
+      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
-
+      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
+  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 dateValue = params.periode.split(' s/d ')

-    const { posko, idUid, idUp3 } = params
+  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)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  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)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
+</script>