Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus
This commit is contained in:
kur0nek-o
commit
0e2e586cda
@ -1 +1 @@
|
|||||||
{"name":"eis","version":"0.0.138-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
|
{"name":"eis","version":"0.0.144-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
|
||||||
@ -1 +1 @@
|
|||||||
{"version":"0.0.138-vm"}
|
{"version":"0.0.144-vm"}
|
||||||
@ -38,40 +38,59 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const up3 = ref(props.up3)
|
const renderUp3 = ref(false)
|
||||||
const uid = ref(props.uid)
|
const renderPosko = ref(false)
|
||||||
const posko = ref(props.posko)
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: props.uid,
|
||||||
up3: up3.value,
|
up3: props.up3,
|
||||||
posko: posko.value,
|
posko: props.posko,
|
||||||
periode: props.periode
|
periode: props.periode
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3placeholder }
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
data.value.uid = value
|
data.value.uid = value
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
console.log(itemsPosko)
|
data.value = {
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
...data.value,
|
||||||
data.value.up3 = value
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -92,6 +111,15 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:selected="up3"
|
||||||
|
:placeholder="up3placeholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:selected="up3"
|
:selected="up3"
|
||||||
@ -103,6 +131,15 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:selected="posko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setPosko($event)"
|
@update:selected="setPosko($event)"
|
||||||
:data="itemsPosko"
|
:data="itemsPosko"
|
||||||
:selected="posko"
|
:selected="posko"
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import {
|
import {
|
||||||
selectedUid,
|
selectedUid,
|
||||||
selectedUp3Ulp,
|
selectedUp3Ulp,
|
||||||
@ -16,37 +16,59 @@ import InputNumber from '@/components/Form/InputNumber.vue'
|
|||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
minJmlLapor: 1,
|
minJmlLapor: 1,
|
||||||
maxJmlLapor: 1
|
maxJmlLapor: 1
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUlp(value)
|
selectedUlp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
@ -65,13 +87,37 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -84,11 +130,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Lapor Ulang:</label>
|
<label class="filter-input-label">Lapor Ulang:</label>
|
||||||
|
|
||||||
<div class="flex flex-1 justify-between gap-x-1.5">
|
<div class="flex flex-1 justify-between gap-x-1.5">
|
||||||
<InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" class="flex flex-1" />
|
<InputNumber
|
||||||
|
@update:time-value="(value) => (data.minJmlLapor = value)"
|
||||||
|
class="flex flex-1"
|
||||||
|
/>
|
||||||
<small class="flex items-center">s/d</small>
|
<small class="flex items-center">s/d</small>
|
||||||
<InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" class="flex flex-1" />
|
<InputNumber
|
||||||
|
@update:time-value="(value) => (data.maxJmlLapor = value)"
|
||||||
|
class="flex flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -6,7 +6,7 @@ interface SlaOption {
|
|||||||
max: string
|
max: string
|
||||||
}
|
}
|
||||||
|
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import {
|
import {
|
||||||
selectedUid,
|
selectedUid,
|
||||||
selectedUp3Ulp,
|
selectedUp3Ulp,
|
||||||
@ -52,9 +52,6 @@ const totalMax = ref('5 Menit')
|
|||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const isHidden = ref(false)
|
const isHidden = ref(false)
|
||||||
|
|
||||||
@ -64,32 +61,57 @@ const setDataMax = (value: any) => (totalMax.value = value)
|
|||||||
const getDataMax = () => totalMax.value
|
const getDataMax = () => totalMax.value
|
||||||
|
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
minTime: getDataMin().split(' ')[0],
|
minTime: getDataMin().split(' ')[0],
|
||||||
maxTime: getDataMax().split(' ')[0]
|
maxTime: getDataMax().split(' ')[0]
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUlp(value)
|
selectedUlp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setMin = (value: any) => {
|
const setMin = (value: any) => {
|
||||||
@ -143,9 +165,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:selected="up3"
|
|
||||||
:placeholder="up3Placeholder"
|
:placeholder="up3Placeholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -154,10 +183,17 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUlp($event)"
|
@update:selected="setUlp($event)"
|
||||||
:data="itemsUlp"
|
:data="itemsUlp"
|
||||||
:placeholder="ulpPlaceholder"
|
:placeholder="ulpPlaceholder"
|
||||||
:selected="ulp"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,43 +1,74 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue';
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue';
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
import InputWithSuffix from '../InputWithSuffix.vue'
|
||||||
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
import {
|
||||||
import { onMounted, ref } from 'vue';
|
selectedUid,
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
selectedUp3Ulp,
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
selectedUlp,
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
fetchUid,
|
||||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
itemsUid,
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
itemsUp3,
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
itemsUlp
|
||||||
|
} from './reference'
|
||||||
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: uppp.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
minDurasiResponseTime: 1,
|
minDurasiResponseTime: 1,
|
||||||
maxDurasiResponseTime: 1
|
maxDurasiResponseTime: 1
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value;
|
selectedUid(value)
|
||||||
selectedUid(value);
|
data.value = {
|
||||||
uppp.value = { id: 0, name: up3Placeholder };
|
...data.value,
|
||||||
data.value.uid = value;
|
uid: value,
|
||||||
};
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value;
|
selectedUp3Ulp(value)
|
||||||
selectedUp3Ulp(value);
|
data.value = {
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
...data.value,
|
||||||
data.value.up3 = value;
|
up3: value,
|
||||||
};
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value;
|
selectedUlp(value)
|
||||||
selectedUlp(value);
|
data.value = {
|
||||||
data.value.ulp = value;
|
...data.value,
|
||||||
};
|
ulp: value
|
||||||
|
}
|
||||||
|
}
|
||||||
const triggerInput = ref(false)
|
const triggerInput = ref(false)
|
||||||
const sla = [
|
const sla = [
|
||||||
{
|
{
|
||||||
@ -52,7 +83,7 @@ const sla = [
|
|||||||
id: 2,
|
id: 2,
|
||||||
name: 'Melebihi SLA (> 45 menit)'
|
name: 'Melebihi SLA (> 45 menit)'
|
||||||
}
|
}
|
||||||
];
|
]
|
||||||
const changeDuration = (value: any) => {
|
const changeDuration = (value: any) => {
|
||||||
if (value.id === 0) {
|
if (value.id === 0) {
|
||||||
console.log('Durasi Menit')
|
console.log('Durasi Menit')
|
||||||
@ -70,7 +101,6 @@ const changeDuration = (value: any) => {
|
|||||||
triggerInput.value = true
|
triggerInput.value = true
|
||||||
console.log('Melebihi SLA (> 45 menit)')
|
console.log('Melebihi SLA (> 45 menit)')
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
@ -89,19 +119,41 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Periode Tanggal:</label>
|
<label class="filter-input-label">Periode Tanggal:</label>
|
||||||
|
|
||||||
<DatePicker @update:date-value="(value) => data.periode = value" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -111,14 +163,21 @@ onMounted(() => {
|
|||||||
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
||||||
|
|
||||||
<div class="flex flex-1 justify-between gap-x-1.5">
|
<div class="flex flex-1 justify-between gap-x-1.5">
|
||||||
<InputWithSuffix @update:minute-value="(value: any) => data.minDurasiResponseTime = value" @value="data.minDurasiResponseTime" :disabled=triggerInput
|
<InputWithSuffix
|
||||||
class="flex flex-1" />
|
@update:minute-value="(value: any) => (data.minDurasiResponseTime = value)"
|
||||||
|
@value="data.minDurasiResponseTime"
|
||||||
|
:disabled="triggerInput"
|
||||||
|
class="flex flex-1"
|
||||||
|
/>
|
||||||
<small class="flex items-center">s/d</small>
|
<small class="flex items-center">s/d</small>
|
||||||
<InputWithSuffix @update:minute-value="(value: any) => data.maxDurasiResponseTime = value" @value="data.maxDurasiResponseTime"
|
<InputWithSuffix
|
||||||
:disabled="triggerInput" class="flex flex-1" />
|
@update:minute-value="(value: any) => (data.maxDurasiResponseTime = value)"
|
||||||
|
@value="data.maxDurasiResponseTime"
|
||||||
|
:disabled="triggerInput"
|
||||||
|
class="flex flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -11,41 +11,63 @@ import {
|
|||||||
itemsUp3,
|
itemsUp3,
|
||||||
itemsUlp
|
itemsUlp
|
||||||
} from './reference'
|
} from './reference'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
groupBy: false
|
groupBy: false
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUlp(value)
|
selectedUlp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
|
|
||||||
console.log('data.value', data.value)
|
console.log('data.value', data.value)
|
||||||
}
|
}
|
||||||
@ -68,9 +90,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:selected="up3"
|
|
||||||
:placeholder="up3Placeholder"
|
:placeholder="up3Placeholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -78,9 +107,16 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUlp($event)"
|
@update:selected="setUlp($event)"
|
||||||
:data="itemsUlp"
|
:data="itemsUlp"
|
||||||
:selected="ulp"
|
|
||||||
:placeholder="ulpPlaceholder"
|
:placeholder="ulpPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -90,12 +126,12 @@ onMounted(() => {
|
|||||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2" v-if="ulp.id == 0">
|
<div class="flex flex-col flex-1 space-y-2" v-if="data.ulp.id == 0">
|
||||||
<label class="filter-input-label"
|
<label class="filter-input-label"
|
||||||
>Group By
|
>Group By
|
||||||
{{
|
{{
|
||||||
uid.id != 0
|
data.uid.id != 0
|
||||||
? up3.id != 0
|
? data.up3.id != 0
|
||||||
? 'Unit Layanan Pelanggan/Posko'
|
? 'Unit Layanan Pelanggan/Posko'
|
||||||
: 'Unit Pelaksanaan Pelayanan Pelanggan'
|
: 'Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
: 'Kode Unit Distribusi'
|
: 'Kode Unit Distribusi'
|
||||||
|
|||||||
@ -1,72 +1,119 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue';
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue';
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
|
import {
|
||||||
import { onMounted, ref } from 'vue';
|
selectedUid,
|
||||||
const uidPlaceholder = 'Semua Distribusi/Wilayah';
|
selectedUp3Posko,
|
||||||
const up3Placeholder = 'Semua Area';
|
selectedPosko,
|
||||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
fetchUid,
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
itemsUid,
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
itemsUp3,
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder });
|
itemsPosko
|
||||||
|
} from './reference'
|
||||||
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
const uidPlaceholder = 'Semua Distribusi/Wilayah'
|
||||||
|
const up3Placeholder = 'Semua Area'
|
||||||
|
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: up3Placeholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: '',
|
periode: ''
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value;
|
selectedUid(value)
|
||||||
selectedUid(value);
|
data.value = {
|
||||||
up3.value = { id: 0, name: up3Placeholder };
|
...data.value,
|
||||||
data.value.uid = value;
|
uid: value,
|
||||||
};
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value;
|
selectedUp3Posko(value)
|
||||||
selectedUp3Posko(value);
|
data.value = {
|
||||||
posko.value = { id: 0, name: poskoPlaceholder };
|
...data.value,
|
||||||
data.value.up3 = value;
|
up3: value,
|
||||||
};
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value;
|
selectedPosko(value)
|
||||||
selectedPosko(value);
|
data.value = {
|
||||||
data.value.posko = value;
|
...data.value,
|
||||||
};
|
posko: value
|
||||||
|
}
|
||||||
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
fetchUid()
|
fetchUid()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Distribusi/Wilayah:</label>
|
<label class="filter-input-label">Distribusi/Wilayah:</label>
|
||||||
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Area:</label>
|
<label class="filter-input-label">Area:</label>
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
<Select
|
||||||
:placeholder="poskoPlaceholder" />
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Periode Tanggal:</label>
|
<label class="filter-input-label">Periode Tanggal:</label>
|
||||||
|
|
||||||
<DatePicker @update:date-value="(value) => data.periode = value" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue';
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue';
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import {
|
import {
|
||||||
selectedUid,
|
selectedUid,
|
||||||
selectedUp3Posko,
|
selectedUp3Posko,
|
||||||
@ -11,53 +11,75 @@ import {
|
|||||||
itemsUp3,
|
itemsUp3,
|
||||||
itemsPosko,
|
itemsPosko,
|
||||||
itemsMedia
|
itemsMedia
|
||||||
} from './reference';
|
} from './reference'
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const mediaPlaceholder = 'Semua Media'
|
const mediaPlaceholder = 'Semua Media'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const media = ref({ id: '', name: mediaPlaceholder })
|
const media = ref({ id: '', name: mediaPlaceholder })
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
media: media.value,
|
media: media.value,
|
||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setMedia = (value: any) => {
|
const setMedia = (value: any) => {
|
||||||
media.value = value
|
media.value = value
|
||||||
data.value.media = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
media: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -72,27 +94,54 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
||||||
|
|
||||||
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select :data="itemsUp3" @update:selected="setUp3($event)" :placeholder="up3Placeholder" :selected="up3" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
:data="itemsUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
:data="itemsUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select :data="itemsPosko" @update:selected="setPosko($event)" :placeholder="poskoPlaceholder"
|
<Select
|
||||||
:selected="posko" />
|
v-if="renderPosko"
|
||||||
|
:data="itemsPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
:data="itemsPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Media:</label>
|
<label class="filter-input-label">Media:</label>
|
||||||
|
|
||||||
<Select :selected="media" @update:selected="setMedia($event)" :placeholder="mediaPlaceholder"
|
<Select
|
||||||
:data="itemsMedia" />
|
:selected="media"
|
||||||
|
@update:selected="setMedia($event)"
|
||||||
|
:placeholder="mediaPlaceholder"
|
||||||
|
:data="itemsMedia"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -101,5 +150,4 @@ onMounted(() => {
|
|||||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
229
src/components/Form/FiltersType/Type17Gangguan.vue
Executable file
229
src/components/Form/FiltersType/Type17Gangguan.vue
Executable file
@ -0,0 +1,229 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Select from '@/components/Select.vue'
|
||||||
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
|
import InputWithFilter from '../InputWithFilter.vue'
|
||||||
|
import {
|
||||||
|
selectedUid,
|
||||||
|
fetchUid,
|
||||||
|
itemsUid,
|
||||||
|
itemsUp3,
|
||||||
|
itemsPosko,
|
||||||
|
selectedPosko,
|
||||||
|
selectedUp3Posko
|
||||||
|
} from './reference'
|
||||||
|
import { onMounted, ref, watch, type PropType } from 'vue'
|
||||||
|
const uidPlaceholder = 'Pilih Unit'
|
||||||
|
const up3Placeholder = 'Pilih Area'
|
||||||
|
const poskoPlaceholder = 'Pilih Posko'
|
||||||
|
const statusPlaceholder = 'Pilih Status'
|
||||||
|
const slaPlaceholder = 'Pilih Durasi SLA'
|
||||||
|
|
||||||
|
const keyword = ref('')
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:filters'])
|
||||||
|
const props = defineProps({
|
||||||
|
reportType: {
|
||||||
|
type: Array as PropType<any[]>,
|
||||||
|
default: [
|
||||||
|
{ id: 1, title: 'No Lapor' },
|
||||||
|
{ id: 2, title: 'Nama Pelapor' },
|
||||||
|
{ id: 3, title: 'Deskripsi' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
statusType: {
|
||||||
|
type: Array as PropType<any[]>,
|
||||||
|
default: [
|
||||||
|
{ id: 0, name: '' },
|
||||||
|
{ id: 1, name: 'Lapor' },
|
||||||
|
{ id: 2, name: 'Penugasan Regu' },
|
||||||
|
{ id: 3, name: 'Dalam Perjalanan' },
|
||||||
|
{ id: 4, name: 'Dalam Pengerjaan' },
|
||||||
|
{ id: 5, name: 'Konfirmasi' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
slaType: {
|
||||||
|
type: Array as PropType<any[]>,
|
||||||
|
default: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '45 Menit',
|
||||||
|
time: 45
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '3 Jam',
|
||||||
|
time: 180
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '1 Hari',
|
||||||
|
time: 1440
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
|
status: props.statusType[0],
|
||||||
|
keyword: keyword.value,
|
||||||
|
searchBy: props.reportType[0]?.title,
|
||||||
|
sla: props.slaType[0],
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const setUid = (value: any) => {
|
||||||
|
selectedUid(value)
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: {
|
||||||
|
id: 0,
|
||||||
|
name: up3Placeholder
|
||||||
|
},
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setUp3 = (value: any) => {
|
||||||
|
selectedUp3Posko(value)
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setPosko = (value: any) => {
|
||||||
|
selectedPosko(value)
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setStatus = (value: any) => {
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
status: value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeKeyword = (value: string) => {
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
keyword: value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeReportTypeSelected = (id: any) => {
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
searchBy: props.reportType.find((item) => item.id === id)?.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setSla = (value: any) => {
|
||||||
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
sla: value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchUid()
|
||||||
|
emit('update:filters', data.value)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
|
<label class="filter-input-label">Periode Tanggal:</label>
|
||||||
|
|
||||||
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
|
<label class="filter-input-label">Unit PLN:</label>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-y-1">
|
||||||
|
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||||
|
|
||||||
|
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||||
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
|
<label class="filter-input-label">Status:</label>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
@update:selected="setStatus($event)"
|
||||||
|
:data="statusType"
|
||||||
|
:placeholder="statusPlaceholder"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
|
<label class="filter-input-label">SLA:</label>
|
||||||
|
|
||||||
|
<Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
|
<label class="filter-input-label">Pencarian:</label>
|
||||||
|
|
||||||
|
<InputWithFilter
|
||||||
|
placeholder="Cari"
|
||||||
|
:filters="reportType"
|
||||||
|
@update:keyword="changeKeyword"
|
||||||
|
@update:filters="changeReportTypeSelected"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -11,113 +11,148 @@ import {
|
|||||||
itemsUp3,
|
itemsUp3,
|
||||||
itemsUlp
|
itemsUlp
|
||||||
} from './reference'
|
} from './reference'
|
||||||
import { onMounted, ref, watch } from 'vue'
|
import { onMounted, ref, watch, type PropType } from 'vue'
|
||||||
const uidPlaceholder = 'Pilih Unit'
|
const uidPlaceholder = 'Pilih Unit'
|
||||||
const up3Placeholder = 'Pilih Area'
|
const up3Placeholder = 'Pilih Area'
|
||||||
const ulpPlaceholder = 'Pilih Rayon'
|
const ulpPlaceholder = 'Pilih Rayon'
|
||||||
const statusPlaceholder = 'Pilih Status'
|
const statusPlaceholder = 'Pilih Status'
|
||||||
const slaPlaceholder = 'Pilih Durasi SLA'
|
const slaPlaceholder = 'Pilih Durasi SLA'
|
||||||
|
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
|
|
||||||
const keyword = ref('')
|
const keyword = ref('')
|
||||||
const reportType = [
|
|
||||||
{ id: 1, title: 'No Lapor' },
|
|
||||||
{ id: 2, title: 'Nama Pelapor' },
|
|
||||||
{ id: 3, title: 'Permasalahan' }
|
|
||||||
]
|
|
||||||
const searchBy = ref<any>(reportType[0].title)
|
|
||||||
|
|
||||||
const statusType = [
|
|
||||||
{ id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
|
|
||||||
{ id: 2, name: 'Dalam Proses Manager Unit' },
|
|
||||||
{ id: 3, name: 'Dalam Proses Bidang Unit' },
|
|
||||||
{ id: 4, name: 'Selesai Dijawab Bidang Unit' },
|
|
||||||
{ id: 5, name: 'Konfirmasi' }
|
|
||||||
]
|
|
||||||
const status = ref(statusType[0])
|
|
||||||
|
|
||||||
const slaType = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: '45 Menit',
|
|
||||||
time: 45
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: '3 Jam',
|
|
||||||
time: 180
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: '1 Hari',
|
|
||||||
time: 1440
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: '3 Hari',
|
|
||||||
time: 4320
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const sla = ref(slaType[0])
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
|
const props = defineProps({
|
||||||
const data = ref({
|
reportType: {
|
||||||
uid: uid.value,
|
type: Array as PropType<any[]>,
|
||||||
up3: up3.value,
|
default: [
|
||||||
ulp: ulp.value,
|
{ id: 1, title: 'No Lapor' },
|
||||||
status: status.value,
|
{ id: 2, title: 'Nama Pelapor' },
|
||||||
keyword: keyword.value,
|
{ id: 3, title: 'Permasalahan' }
|
||||||
searchBy: searchBy.value,
|
]
|
||||||
sla: sla.value,
|
},
|
||||||
periode: ''
|
statusType: {
|
||||||
|
type: Array as PropType<any[]>,
|
||||||
|
default: [
|
||||||
|
{ id: 0, name: '' },
|
||||||
|
{ id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
|
||||||
|
{ id: 2, name: 'Dalam Proses Manager Unit' },
|
||||||
|
{ id: 3, name: 'Dalam Proses Bidang Unit' },
|
||||||
|
{ id: 4, name: 'Selesai Dijawab Bidang Unit' },
|
||||||
|
{ id: 5, name: 'Konfirmasi' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
slaType: {
|
||||||
|
type: Array as PropType<any[]>,
|
||||||
|
default: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '45 Menit',
|
||||||
|
time: 45
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '3 Jam',
|
||||||
|
time: 180
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '1 Hari',
|
||||||
|
time: 1440
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '3 Hari',
|
||||||
|
time: 4320
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
const data = ref({
|
||||||
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
|
status: props.statusType[0],
|
||||||
|
keyword: keyword.value,
|
||||||
|
searchBy: props.reportType[0].title,
|
||||||
|
sla: props.slaType[0],
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: {
|
||||||
|
id: 0,
|
||||||
|
name: up3Placeholder
|
||||||
|
},
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
console.log(itemsUlp)
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUlp(value)
|
selectedUlp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setStatus = (value: any) => {
|
const setStatus = (value: any) => {
|
||||||
status.value = value
|
data.value = {
|
||||||
data.value.status = value
|
...data.value,
|
||||||
|
status: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeKeyword = (value: string) => {
|
const changeKeyword = (value: string) => {
|
||||||
keyword.value = value
|
data.value = {
|
||||||
data.value.keyword = value
|
...data.value,
|
||||||
|
keyword: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeReportTypeSelected = (id: any) => {
|
const changeReportTypeSelected = (id: any) => {
|
||||||
searchBy.value = reportType.find((item) => item.id == id)?.title
|
data.value = {
|
||||||
data.value.searchBy = searchBy.value
|
...data.value,
|
||||||
|
searchBy: props.reportType.find((item) => item.id == id)?.title
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setSla = (value: any) => {
|
const setSla = (value: any) => {
|
||||||
sla.value = value
|
data.value = {
|
||||||
data.value.sla = value
|
...data.value,
|
||||||
|
sla: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -142,15 +177,27 @@ onMounted(() => {
|
|||||||
|
|
||||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:selected="up3"
|
|
||||||
:placeholder="up3Placeholder"
|
:placeholder="up3Placeholder"
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUlp($event)"
|
@update:selected="setUlp($event)"
|
||||||
:data="itemsUlp"
|
:data="itemsUlp"
|
||||||
:selected="ulp"
|
|
||||||
:placeholder="ulpPlaceholder"
|
:placeholder="ulpPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -163,7 +210,6 @@ onMounted(() => {
|
|||||||
<Select
|
<Select
|
||||||
@update:selected="setStatus($event)"
|
@update:selected="setStatus($event)"
|
||||||
:data="statusType"
|
:data="statusType"
|
||||||
:selected="status"
|
|
||||||
:placeholder="statusPlaceholder"
|
:placeholder="statusPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -171,12 +217,7 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">SLA:</label>
|
<label class="filter-input-label">SLA:</label>
|
||||||
|
|
||||||
<Select
|
<Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
|
||||||
@update:selected="setSla($event)"
|
|
||||||
:data="slaType"
|
|
||||||
:selected="sla"
|
|
||||||
:placeholder="slaPlaceholder"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -17,9 +17,6 @@ import { onMounted, ref, watch } from 'vue'
|
|||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const jenisTransakasi = [
|
const jenisTransakasi = [
|
||||||
{ id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
|
{ id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
|
||||||
@ -28,40 +25,64 @@ const jenisTransakasi = [
|
|||||||
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
|
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
|
||||||
]
|
]
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
jenisTransaksi: [],
|
jenisTransaksi: [],
|
||||||
group: 1
|
group: 1
|
||||||
})
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setTags = (value: any) => {
|
const setTags = (value: any) => {
|
||||||
data.value.jenisTransaksi = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
jenisTransaksi: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -86,9 +107,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:selected="up3"
|
|
||||||
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
|
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -97,9 +125,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
placeholder="Semua Posko"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setPosko($event)"
|
@update:selected="setPosko($event)"
|
||||||
:data="itemsPosko"
|
:data="itemsPosko"
|
||||||
:selected="posko"
|
|
||||||
placeholder="Semua Posko"
|
placeholder="Semua Posko"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -12,9 +12,13 @@ import {
|
|||||||
months,
|
months,
|
||||||
years
|
years
|
||||||
} from './reference'
|
} from './reference'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import { getMonthName } from '@/utils/texts'
|
import { getMonthName } from '@/utils/texts'
|
||||||
|
|
||||||
|
const renderUid = ref(false)
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
@ -23,12 +27,8 @@ const bulanPlaceholder = getMonthName(new Date().getMonth() + 1)
|
|||||||
const tahunPlaceholder = new Date().getFullYear().toString()
|
const tahunPlaceholder = new Date().getFullYear().toString()
|
||||||
const bulanSelected = new Date().getMonth() + 1
|
const bulanSelected = new Date().getMonth() + 1
|
||||||
const tahunSelected = new Date().getFullYear()
|
const tahunSelected = new Date().getFullYear()
|
||||||
const uppp = ref({ id: 0, name: up3Placholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
|
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
|
||||||
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
|
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
|
||||||
const regional = ref({ id: 0, name: regionalPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
// Find index of January
|
// Find index of January
|
||||||
const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
|
const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
|
||||||
@ -43,42 +43,79 @@ if (tahunIndex !== -1) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const data = ref({
|
const data = ref({
|
||||||
regional: regional.value,
|
regional: { id: 0, name: regionalPlaceholder },
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: uppp.value,
|
up3: { id: 0, name: up3Placholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
bulan: bulan.value,
|
bulan: bulan.value,
|
||||||
tahun: tahun.value
|
tahun: tahun.value
|
||||||
})
|
})
|
||||||
|
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
const setRegional = (value: any) => {
|
const setRegional = (value: any) => {
|
||||||
regional.value = value
|
console.log(value)
|
||||||
|
|
||||||
fetchUid()
|
fetchUid()
|
||||||
// harusnya fetchUidWithRegional(value);
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
uid.value = { id: 0, name: uidPlaceholder }
|
data.value = {
|
||||||
data.value.regional = value
|
...data.value,
|
||||||
|
regional: value,
|
||||||
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
|
up3: { id: 0, name: up3Placholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUid.value = true
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUid.value = false
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
uppp.value = { id: 0, name: up3Placholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setMonth = (value: any) => {
|
const setMonth = (value: any) => {
|
||||||
@ -114,9 +151,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUid"
|
||||||
|
@update:selected="setUid($event)"
|
||||||
|
:data="itemsUid"
|
||||||
|
:placeholder="uidPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUid($event)"
|
@update:selected="setUid($event)"
|
||||||
:data="itemsUid"
|
:data="itemsUid"
|
||||||
:selected="uid"
|
|
||||||
:placeholder="uidPlaceholder"
|
:placeholder="uidPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -125,8 +169,15 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:selected="uppp"
|
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:placeholder="up3Placholder"
|
:placeholder="up3Placholder"
|
||||||
/>
|
/>
|
||||||
@ -136,9 +187,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUlp($event)"
|
@update:selected="setUlp($event)"
|
||||||
:data="itemsUlp"
|
:data="itemsUlp"
|
||||||
:selected="ulp"
|
|
||||||
:placeholder="ulpPlaceholder"
|
:placeholder="ulpPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue';
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue';
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import {
|
import {
|
||||||
selectedUid,
|
selectedUid,
|
||||||
selectedUp3Ulp,
|
selectedUp3Ulp,
|
||||||
@ -9,47 +9,65 @@ import {
|
|||||||
itemsUid,
|
itemsUid,
|
||||||
itemsUp3,
|
itemsUp3,
|
||||||
itemsUlp
|
itemsUlp
|
||||||
} from './reference';
|
} from './reference'
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
|
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
console.log(itemsUlp)
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUlp(value)
|
selectedUlp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -69,13 +87,35 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -84,5 +124,4 @@ onMounted(() => {
|
|||||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -10,13 +10,10 @@ import {
|
|||||||
itemsUlp,
|
itemsUlp,
|
||||||
fetchUid
|
fetchUid
|
||||||
} from './reference'
|
} from './reference'
|
||||||
import { computed, onMounted, ref } from 'vue'
|
import { computed, onMounted, ref, watch } from 'vue'
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||||
const uppp = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
jenisLaporan: {
|
jenisLaporan: {
|
||||||
@ -28,33 +25,59 @@ const props = defineProps({
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderUlp = ref(false)
|
||||||
|
|
||||||
const jenisLaporan = ref(computed(() => props.jenisLaporan))
|
const jenisLaporan = ref(computed(() => props.jenisLaporan))
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: uppp.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
ulp: ulp.value,
|
ulp: { id: 0, name: ulpPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
jenisLaporan: jenisLaporan.value[0]
|
jenisLaporan: jenisLaporan.value[0]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
uppp.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
|
||||||
selectedUp3Ulp(value)
|
selectedUp3Ulp(value)
|
||||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
ulp: { id: 0, name: ulpPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUlp.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUlp.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUlp = (value: any) => {
|
const setUlp = (value: any) => {
|
||||||
ulp.value = value
|
|
||||||
selectedUlp(value)
|
selectedUlp(value)
|
||||||
data.value.ulp = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
ulp: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -74,13 +97,35 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Layanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
|
<Select
|
||||||
|
v-if="renderUlp"
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUlp($event)"
|
||||||
|
:data="itemsUlp"
|
||||||
|
:placeholder="ulpPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import {
|
import {
|
||||||
selectedUid,
|
selectedUid,
|
||||||
selectedUp3Posko,
|
selectedUp3Posko,
|
||||||
@ -8,46 +8,63 @@ import {
|
|||||||
itemsUid,
|
itemsUid,
|
||||||
itemsUp3,
|
itemsUp3,
|
||||||
itemsPosko
|
itemsPosko
|
||||||
} from './reference';
|
} from './reference'
|
||||||
|
|
||||||
import Select from '@/components/Select.vue';
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue';
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: uppp.value,
|
up3: { id: 0, name: uppPlaceholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
watch(data.value, (value) => {
|
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
uppp.value = { id: 0, name: uppPlaceholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: uppPlaceholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -61,26 +78,46 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
<label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
|
||||||
|
|
||||||
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="uppPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="uppPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
<Select
|
||||||
:placeholder="poskoPlaceholder" />
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Periode Tanggal:</label>
|
<label class="filter-input-label">Periode Tanggal:</label>
|
||||||
<DatePicker @update:date-value="(value) => data.periode = value" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -11,42 +11,64 @@ import {
|
|||||||
itemsUp3,
|
itemsUp3,
|
||||||
itemsPosko
|
itemsPosko
|
||||||
} from './reference'
|
} from './reference'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
minJmlLapor: 1,
|
minJmlLapor: 1,
|
||||||
maxJmlLapor: 1
|
maxJmlLapor: 1
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -66,14 +88,36 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
<Select
|
||||||
:placeholder="poskoPlaceholder" />
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -86,13 +130,18 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Lapor Ulang:</label>
|
<label class="filter-input-label">Lapor Ulang:</label>
|
||||||
|
|
||||||
<div class="flex flex-1 justify-between gap-x-1.5">
|
<div class="flex flex-1 justify-between gap-x-1.5">
|
||||||
<InputNumber :value="data.minJmlLapor" @update:time-value="(value) => (data.minJmlLapor = value)"
|
<InputNumber
|
||||||
class="flex flex-1" />
|
:value="data.minJmlLapor"
|
||||||
|
@update:time-value="(value) => (data.minJmlLapor = value)"
|
||||||
|
class="flex flex-1"
|
||||||
|
/>
|
||||||
<small class="flex items-center">s/d</small>
|
<small class="flex items-center">s/d</small>
|
||||||
<InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => (data.maxJmlLapor = value)"
|
<InputNumber
|
||||||
class="flex flex-1" />
|
:value="data.maxJmlLapor"
|
||||||
|
@update:time-value="(value) => (data.maxJmlLapor = value)"
|
||||||
|
class="flex flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -50,9 +50,6 @@ const emit = defineEmits(['update:filters'])
|
|||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const isHidden = ref(false)
|
const isHidden = ref(false)
|
||||||
const totalMin = ref('1 Menit')
|
const totalMin = ref('1 Menit')
|
||||||
const totalMax = ref('5 Menit')
|
const totalMax = ref('5 Menit')
|
||||||
@ -61,34 +58,57 @@ const setDataMin = (value: any) => (totalMin.value = value)
|
|||||||
const getDataMin = () => totalMin.value
|
const getDataMin = () => totalMin.value
|
||||||
const setDataMax = (value: any) => (totalMax.value = value)
|
const setDataMax = (value: any) => (totalMax.value = value)
|
||||||
const getDataMax = () => totalMax.value
|
const getDataMax = () => totalMax.value
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: up3.value,
|
up3: { id: 0, name: up3Placeholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
minTime: getDataMin().split(' ')[0],
|
minTime: getDataMin().split(' ')[0],
|
||||||
maxTime: getDataMax().split(' ')[0]
|
maxTime: getDataMax().split(' ')[0]
|
||||||
})
|
})
|
||||||
|
watch(data, (value) => {
|
||||||
|
emit('update:filters', value)
|
||||||
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
up3.value = { id: 0, name: up3Placeholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: up3Placeholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
up3.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const setMin = (value: any) => {
|
const setMin = (value: any) => {
|
||||||
@ -122,9 +142,6 @@ const changeDuration = (value: any) => {
|
|||||||
isHidden.value = true
|
isHidden.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
watch(data, (newValue) => {
|
|
||||||
emit('update:filters', newValue)
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchUid()
|
fetchUid()
|
||||||
@ -144,9 +161,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="up3Placeholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:selected="up3"
|
|
||||||
:placeholder="up3Placeholder"
|
:placeholder="up3Placeholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -155,9 +179,16 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setPosko($event)"
|
@update:selected="setPosko($event)"
|
||||||
:data="itemsPosko"
|
:data="itemsPosko"
|
||||||
:selected="posko"
|
|
||||||
:placeholder="poskoPlaceholder"
|
:placeholder="poskoPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,38 +1,46 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue';
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue';
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
|
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference';
|
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
|
||||||
|
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: uppp.value,
|
up3: { id: 0, name: uppPlaceholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
uppp.value = { id: 0, name: uppPlaceholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: uppPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -52,7 +60,19 @@ onMounted(() => {
|
|||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="uppPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="uppPlaceholder"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2">
|
<div class="flex flex-col flex-1 space-y-2">
|
||||||
@ -61,5 +81,4 @@ onMounted(() => {
|
|||||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -17,40 +17,58 @@ import {
|
|||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
|
||||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: { id: 0, name: uidPlaceholder },
|
||||||
up3: uppp.value,
|
up3: { id: 0, name: uppPlaceholder },
|
||||||
posko: posko.value,
|
posko: { id: 0, name: poskoPlaceholder },
|
||||||
periode: '',
|
periode: '',
|
||||||
groupBy: false
|
groupBy: false
|
||||||
})
|
})
|
||||||
|
const renderUp3 = ref(false)
|
||||||
|
const renderPosko = ref(false)
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data, (value) => {
|
||||||
emit('update:filters', value)
|
emit('update:filters', value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const setUid = (value: any) => {
|
const setUid = (value: any) => {
|
||||||
uid.value = value
|
|
||||||
selectedUid(value)
|
selectedUid(value)
|
||||||
uppp.value = { id: 0, name: uppPlaceholder }
|
data.value = {
|
||||||
data.value.uid = value
|
...data.value,
|
||||||
|
uid: value,
|
||||||
|
up3: { id: 0, name: uppPlaceholder },
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUp3.value = true
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderUp3.value = false
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
|
||||||
selectedUp3Posko(value)
|
selectedUp3Posko(value)
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
data.value = {
|
||||||
data.value.up3 = value
|
...data.value,
|
||||||
|
up3: value,
|
||||||
|
posko: { id: 0, name: poskoPlaceholder }
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPosko.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
renderPosko.value = false
|
||||||
|
}, 200)
|
||||||
}
|
}
|
||||||
|
|
||||||
const setPosko = (value: any) => {
|
const setPosko = (value: any) => {
|
||||||
posko.value = value
|
|
||||||
selectedPosko(value)
|
selectedPosko(value)
|
||||||
data.value.posko = value
|
data.value = {
|
||||||
|
...data.value,
|
||||||
|
posko: value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@ -71,10 +89,17 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderUp3"
|
||||||
|
@update:selected="setUp3($event)"
|
||||||
|
:data="itemsUp3"
|
||||||
|
:placeholder="uppPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:placeholder="uppPlaceholder"
|
:placeholder="uppPlaceholder"
|
||||||
:selected="uppp"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -82,10 +107,17 @@ onMounted(() => {
|
|||||||
<label class="filter-input-label">Posko:</label>
|
<label class="filter-input-label">Posko:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
|
v-if="renderPosko"
|
||||||
|
@update:selected="setPosko($event)"
|
||||||
|
:data="itemsPosko"
|
||||||
|
:placeholder="poskoPlaceholder"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Select
|
||||||
|
v-else
|
||||||
@update:selected="setPosko($event)"
|
@update:selected="setPosko($event)"
|
||||||
:data="itemsPosko"
|
:data="itemsPosko"
|
||||||
:placeholder="poskoPlaceholder"
|
:placeholder="poskoPlaceholder"
|
||||||
:selected="posko"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -95,12 +127,12 @@ onMounted(() => {
|
|||||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col flex-1 space-y-2" v-if="posko.id == 0">
|
<div class="flex flex-col flex-1 space-y-2" v-if="data.posko.id == 0">
|
||||||
<label class="filter-input-label"
|
<label class="filter-input-label"
|
||||||
>Group By
|
>Group By
|
||||||
{{
|
{{
|
||||||
uid.id != 0
|
data.uid.id != 0
|
||||||
? uppp.id != 0
|
? data.up3.id != 0
|
||||||
? 'Unit Layanan Pelanggan/Posko'
|
? 'Unit Layanan Pelanggan/Posko'
|
||||||
: 'Unit Pelaksanaan Pelayanan Pelanggan'
|
: 'Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
: 'Kode Unit Distribusi'
|
: 'Kode Unit Distribusi'
|
||||||
|
|||||||
@ -1,18 +1,19 @@
|
|||||||
export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
|
export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
|
||||||
export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
|
export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
|
||||||
export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
|
export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
|
||||||
export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
|
export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
|
||||||
export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
|
export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
|
||||||
export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
|
export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
|
||||||
export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
|
export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
|
||||||
export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
|
export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
|
||||||
export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
|
export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
|
||||||
export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
|
export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
|
||||||
export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
|
export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
|
||||||
export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
|
export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
|
||||||
export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
|
export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
|
||||||
export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
|
export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
|
||||||
export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
|
export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
|
||||||
export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
|
export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
|
||||||
export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'
|
export { default as Type17Gangguan } from '@/components/Form/FiltersType/Type17Gangguan.vue'
|
||||||
export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'
|
export { default as Type17Keluhan } from '@/components/Form/FiltersType/Type17Keluhan.vue'
|
||||||
|
export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'
|
||||||
|
|||||||
@ -53,6 +53,9 @@ const fetchMedia = () => {
|
|||||||
const fetchUidByRegional = async (regional: number) => {
|
const fetchUidByRegional = async (regional: number) => {
|
||||||
if (regional == 0) {
|
if (regional == 0) {
|
||||||
itemsUid.value = []
|
itemsUid.value = []
|
||||||
|
itemsUp3.value = []
|
||||||
|
itemsPosko.value = []
|
||||||
|
itemsUlp.value = []
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
const res = await getUidRegional(regional)
|
const res = await getUidRegional(regional)
|
||||||
@ -154,15 +157,22 @@ const formatWaktu = (durasiDetik: any): string => {
|
|||||||
|
|
||||||
const selectedUid = (value: any) => {
|
const selectedUid = (value: any) => {
|
||||||
fetchDataUp3(value.id)
|
fetchDataUp3(value.id)
|
||||||
|
itemsUp3.value = []
|
||||||
|
itemsPosko.value = []
|
||||||
|
itemsUlp.value = []
|
||||||
}
|
}
|
||||||
const selectedUp3Posko = (value: any) => {
|
const selectedUp3Posko = (value: any) => {
|
||||||
if (value.id != 0) {
|
if (value.id != 0) {
|
||||||
fetchDataPosko(value.id)
|
fetchDataPosko(value.id)
|
||||||
|
} else {
|
||||||
|
itemsPosko.value = []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const selectedUp3Ulp = (value: any) => {
|
const selectedUp3Ulp = (value: any) => {
|
||||||
if (value.id != 0) {
|
if (value.id != 0) {
|
||||||
fetchDataUlp(value.id)
|
fetchDataUlp(value.id)
|
||||||
|
} else {
|
||||||
|
itemsUlp.value = []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const selectedPosko = (value: any) => {
|
const selectedPosko = (value: any) => {
|
||||||
|
|||||||
@ -1319,6 +1319,7 @@ const resetData = () => {
|
|||||||
const filterData = async (params: any) => {
|
const filterData = async (params: any) => {
|
||||||
resetData()
|
resetData()
|
||||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||||
|
console.log(params)
|
||||||
|
|
||||||
var groupList: any[] = [
|
var groupList: any[] = [
|
||||||
{
|
{
|
||||||
@ -1361,7 +1362,7 @@ const filterData = async (params: any) => {
|
|||||||
grouping.value = groupList
|
grouping.value = groupList
|
||||||
|
|
||||||
const query = {
|
const query = {
|
||||||
namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
|
namaRegional: regional.id == 0 ? '' : regional.name,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
idUlp: ulp ? ulp.id : 0,
|
idUlp: ulp ? ulp.id : 0,
|
||||||
|
|||||||
@ -27,7 +27,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type17 @update:filters="(value) => (filters = value)" />
|
<Type17Gangguan v-if="tab == 'gangguan'" @update:filters="(value) => (filters = value)" />
|
||||||
|
<Type17Keluhan v-else @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
@ -178,6 +179,7 @@
|
|||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
|
v-if="tab == 'keluhan'"
|
||||||
:width="170"
|
:width="170"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="status_akhir"
|
data-field="status_akhir"
|
||||||
@ -186,6 +188,7 @@
|
|||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
|
v-if="tab == 'keluhan'"
|
||||||
:width="170"
|
:width="170"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="durasi"
|
data-field="durasi"
|
||||||
@ -229,13 +232,12 @@ import {
|
|||||||
DxColumn,
|
DxColumn,
|
||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { Type17 } from '@/components/Form/FiltersType'
|
import { Type17Gangguan, Type17Keluhan } from '@/components/Form/FiltersType'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
@ -401,7 +403,7 @@ const resetData = () => {
|
|||||||
const filterData = async (params: any) => {
|
const filterData = async (params: any) => {
|
||||||
resetData()
|
resetData()
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { ulp, uid, up3, status, keyword, searchBy, sla } = params
|
const { posko, ulp, uid, up3, status, keyword, searchBy, sla } = params
|
||||||
const query = {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
@ -409,7 +411,7 @@ const filterData = async (params: any) => {
|
|||||||
dateTo: dateValue[1]
|
dateTo: dateValue[1]
|
||||||
? dateValue[1].split('-').reverse().join('-')
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
idPosko: 0,
|
idPosko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
idUlp: ulp ? ulp.id : 0,
|
idUlp: ulp ? ulp.id : 0,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, watch } from 'vue'
|
||||||
import { RichSelect } from '@flavorly/vanilla-components'
|
import { RichSelect } from '@flavorly/vanilla-components'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -23,16 +23,18 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['update:selected'])
|
const emit = defineEmits(['update:selected'])
|
||||||
const data = computed(() =>
|
const data = computed(() =>
|
||||||
props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
|
props.placeholder == '0'
|
||||||
|
? props.data
|
||||||
|
: props.data.length > 0
|
||||||
|
? [{ id: 0, name: props.placeholder }, ...props.data]
|
||||||
|
: [{ id: 0, name: props.placeholder }]
|
||||||
)
|
)
|
||||||
const selected = ref(data.value[props.indexSelected].id)
|
const selected = ref(data.value[props.indexSelected].id)
|
||||||
|
|
||||||
// watch(
|
watch(props.selected.id, (value: any) => {
|
||||||
// () => props.selected,
|
console.log('id has changed', value)
|
||||||
// (value: any) => {
|
selected.value = value
|
||||||
// selected.value = value.id
|
})
|
||||||
// }
|
|
||||||
// )
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -18,7 +18,7 @@ import {
|
|||||||
Type14,
|
Type14,
|
||||||
Type15,
|
Type15,
|
||||||
Type16,
|
Type16,
|
||||||
Type17,
|
Type17Gangguan,
|
||||||
Type18
|
Type18
|
||||||
} from '@/components/Form/FiltersType'
|
} from '@/components/Form/FiltersType'
|
||||||
|
|
||||||
@ -39,7 +39,7 @@ const test1: { [key: string]: any } = {
|
|||||||
'type-14': Type14,
|
'type-14': Type14,
|
||||||
'type-15': Type15,
|
'type-15': Type15,
|
||||||
'type-16': Type16,
|
'type-16': Type16,
|
||||||
'type-17': Type17,
|
'type-17': Type17Gangguan,
|
||||||
'type-18': Type18
|
'type-18': Type18
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,7 +54,7 @@ export const useFiltersStore = defineStore('filters', () => {
|
|||||||
component: getFilters('')
|
component: getFilters('')
|
||||||
})
|
})
|
||||||
|
|
||||||
const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
|
const setConfig = ({ reportButton = false, type }: { reportButton?: boolean; type: string }) => {
|
||||||
config.value = {
|
config.value = {
|
||||||
reportButton,
|
reportButton,
|
||||||
type,
|
type,
|
||||||
@ -66,4 +66,4 @@ export const useFiltersStore = defineStore('filters', () => {
|
|||||||
config,
|
config,
|
||||||
setConfig
|
setConfig
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user