Refactor CSS styles and input components
This commit is contained in:
@@ -18,41 +18,48 @@
|
||||
<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"
|
||||
<DxColumn css-class="custom-table-column !align-top" :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="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP" css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
|
||||
css-class="custom-table-column" />
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@@ -60,7 +67,7 @@
|
||||
<script setup lang="ts">
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||
import { ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@@ -79,6 +86,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { dummyData } from '@/utils/dummy'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@@ -157,4 +165,8 @@ const filterData = (params: any) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
|
||||
})
|
||||
</script>
|
Reference in New Issue
Block a user