defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add lifecycle hook and fetch data on mounted

Browse Source 
Add two-way binding for menitValue in InputWithSuffix
Add two-way binding for timeValue in InputNumber
Refactor filterData function in Table_5.vue
This commit is contained in:
probdg
2024-02-10 05:56:05 +07:00
parent 2e4eb3b6b2
commit 83a25527bb
14 changed files with 741 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Pages/Gangguan/Table_2.vue
View File

@@ -1,8 +1,8 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type6 @update:filters="(value) => {
filters = value
}
filters = value
}
" />
</Filters>
<div id="data">
@@ -166,9 +166,8 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type6 from '@/components/Form/FiltersType/Type6.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
import InputText from '@/components/InputText.vue';
@@ -195,7 +194,7 @@ const showData = () => {
const closeDetail = () => {
showDetail.value = false
}
const loadingVisible = ref(true)
const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
daftarGangguanMelaporLebihDariSatuKali(
@@ -234,26 +233,21 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
})
const filterData = (data: any) => {
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ');
const posko = data.posko ? data.posko.id : ""
const up3 = data.up3 ? data.up3.id : 0
const uid = data.uid ? data.uid.id : 0
const minJmlLapor = data.minReport
const maxJmlLapor = data.maxReport
console.log(data)
refetch({
minJmlLapor,
maxJmlLapor,
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
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),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)