Update table column captions and cell templates

This commit is contained in:
Dede Fuji Abdul 2023-11-09 10:58:58 +07:00
parent 8aec877d2b
commit 3898e9f80d

View File

@ -16,43 +16,44 @@
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" data-type="number" <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="no-laporan" /> caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
caption="Pembuat Laporan" /> caption="Pembuat Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
caption="Tgl Lapor" /> caption="Tgl Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
caption="Tgl Dialihkan" /> caption="Tgl Dialihkan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
caption="Tgl Response" /> caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
caption="Tgl Recovery" /> caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
caption="Durasi Response Time" /> caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
caption="Durasi Recovery Time" /> caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
caption="Posko Awal" /> caption="Posko Awal" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
caption="Posko Tujuan" /> caption="Posko Tujuan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
caption="Status" /> cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
caption="IDPEL/NO METER" /> caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" /> caption="Nama Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" /> caption="Alamat Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" /> caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" /> caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan"
caption="Sumber Lapor" /> caption="Sumber Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" /> <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
<template #no-laporan="{ data }"> cell-template="data" />
<span class="cursor-pointer" @click="showData(data.text)"> <template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
</span> </span>
</template> </template>
@ -275,16 +276,11 @@ const createDummy = () => {
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
dataDetail.value = data dataDetail.value = data
showDetail.value = true
console.log(data) console.log(data)
} }
const showData = (data: string) => { const showData = () => {
dialog.type = 'success' showDetail.value = true
dialog.title = 'Detail Data'
dialog.content = data
dialog.confirmText = 'Tutup'
dialog.open = true
} }
onMounted(() => { onMounted(() => {