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

Update code: fixed bugs and added new features

Browse Source
This commit is contained in:
probdg
2024-02-03 16:32:05 +07:00
parent ecc64c7b61
commit 2b40b2016b
14 changed files with 275 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/Form/FiltersType/Type18.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
fetchData();
const departments = [
{ id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
{ id: 2, name: 'HR', contact: 'Kenton Towne' },
{ id: 3, name: 'Sales', contact: 'Therese Wunsch' },
{ id: 4, name: 'Finance', contact: 'Benedict Kessler' },
{ id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
]
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUppp($event)" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
<SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker />
</div>
</template>

12
src/components/Form/FiltersType/Type6.vue
View File

@ -1,8 +1,16 @@
<script setup lang="ts">
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
const changeMinReport = (value: any) => {
useTotalReport().setDataMin(value)
}
const changeMaxReport = (value: any) => {
useTotalReport().setDataMax(value)
}
</script>
<template>
@ -36,9 +44,9 @@
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select placeholder="1" />
<InputNumber :value="1" @change="changeMinReport($event.target.value)" />
<small class="flex items-center">s/d</small>
<Select placeholder="2" />
<InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
</div>
</div>
</template>

39
src/components/Form/FiltersType/Type7.vue
View File

@ -2,6 +2,39 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue';
import { useTotalDuration } from '@/stores/totalDuration';
import { ref } from 'vue';
const data = [
{
id : 1,
name : 'Dibawah / Sesuai SLA (<= 45 menit)'
},
{
id : 2,
name : 'Melebihi SLA (> 45 menit)'
}
]
const triggerInput = ref(false)
const changeDuration = (value: any) => {
if(value.id === 0 ){
console.log('Durasi Menit')
useTotalDuration().setDataMin(0)
useTotalDuration().setDataMax(5)
triggerInput.value = false
}else if(value.id === 1){
useTotalDuration().setDataMin(0)
useTotalDuration().setDataMax(45)
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
}else{
useTotalDuration().setDataMin(46)
useTotalDuration().setDataMax(7*60*24)
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
}
</script>
<template>
@ -35,12 +68,12 @@
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
<div class="flex flex-col gap-y-1">
<Select placeholder="Durasi Menit" />
<Select @update:selected="changeDuration($event)" :data="data" placeholder="Durasi Menit" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputWithSuffix />
<InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
<small class="flex items-center">s/d</small>
<InputWithSuffix />
<InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
</div>
</div>
</div>

1
src/components/Form/FiltersType/index.ts
View File

@ -15,3 +15,4 @@ export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'
export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'

39
src/components/Form/InputNumber.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup lang="ts">
const props = defineProps({
placeholder: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
value: {
type: Number,
default: "",
},
})
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
autocomplete="off"
type="number"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
</div>
</template>

7
src/components/Form/InputWithSuffix.vue
View File

@ -11,7 +11,11 @@
readonly: {
type: Boolean,
default: false,
}
},
value: {
type: Number,
default: "",
},
})
</script>
@ -20,6 +24,7 @@
<input
autocomplete="off"
type="text"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"