Files
FE_CPONE/test/vuex/cpone-card-reader/components/oneFoRegistrationTab02.vue
2026-04-27 10:13:31 +07:00

168 lines
5.5 KiB
Vue

<template>
<v-layout row wrap>
<v-dialog
v-model="dialog_cito"
width="500"
>
<v-card >
<v-card-title
class="subtitle-1"
color="#64b2cd"
>
PILIH CITO
</v-card-title>
<v-card-text>
<v-select
:items="citos"
item-text="Nat_CitoName"
item-value="Nat_CitoID"
return-object
hide-details
dense
v-model="selected_cito"
height="30"
v-show="cito_show && is_cito == 'Y'"
class="mt-0 pt-0"
append-icon="clear"
@click:append="selected_cito = null"
></v-select>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="black"
flat
@click="dialog_cito = false"
>
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-flex xs12 sm6 class="left" fill-height pa-1>
<!-- komponen kiri -->
<one-mou-px-left></one-mou-px-left>
</v-flex>
<v-flex xs12 sm6 class="right" fill-height pa-1>
<!-- komponen kanan -->
<v-card class="pa-1">
<v-layout column>
<v-layout align-center row>
<v-flex xs12>
<v-card tile class="pa-2" flat color="#64b2cd">
<h5 class="subtitle-1 font-weight-bold" style="color:#fff">DETAIL ORDER</h5>
</v-card>
</v-flex>
</v-layout>
<v-layout column>
<v-layout style="background:#89CFF0" mb-0 mt-1 align-center row>
<v-flex v-if="!cito_show || is_cito !== 'Y'" xs2>
<h5 class="mono subtitle-1 pl-2 font-weight-bold">
JANJI HASIL
</h5>
</v-flex>
<v-flex v-if="!cito_show || is_cito !== 'Y'" xs10 class="text-xs-right">
<p class="mb-0 pb-1 pt-1 pr-1">
<kbd class="mr-1" v-for="schedule in schedules">{{getTimeX(schedule)}}</kbd>
</p>
</v-flex>
<v-flex v-if="cito_show && is_cito == 'Y'" xs2>
<v-btn dark @click="dialog_cito = true" small color="#ee7777">{{selected_cito.Nat_CitoName}}</v-btn>
<!--<span class="font-weight-black caption" style="color:#6a6a6a">JANJI HASIL</span>-->
</v-flex>
<v-flex v-if="cito_show && is_cito == 'Y'" xs10 class="text-xs-right">
<p class="mb-0 pb-1 pt-1 pr-1">
<kbd class="mr-1" v-for="schedule in schedules">{{getTimeX(schedule)}}</kbd>
</p>
</v-flex>
</v-layout>
</v-layout>
<one-fo-registration-price-list></one-fo-registration-price-list>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</template>
<style scoped>
.mini-select .v-select__selections {
align-items: center;
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
line-height: 10px;
}
</style>
<script>
module.exports = {
components : {
'one-mou-px-left' : httpVueLoader('./oneMouPxLeft.vue'),
'one-fo-registration-price-list' : httpVueLoader('./oneFoRegistrationPriceList.vue?ts='
+ new Date().toISOString())
},
computed: {
schedules() {
var xvar = this.$store.state.px.appx_schedule
if(xvar)
xvar = xvar.split(",")
else
xvar = []
return xvar
},
citos () {
return this.$store.state.px.citos
},
selected_cito : {
get () { return this.$store.state.px.selected_cito },
set (v) { this.$store.commit('px/update_selected_cito', v) }
},
is_cito () {
return this.$store.state.px.is_cito
}
},
methods: {
getTimeX(xtime) {
if(xtime)
return moment(xtime).format('DD-MM-YYYY HH:mm')
else
return
}
},
data () {
return {
cito_show : true,
dialog_cito:false
}
},
mounted () {
this.$store.dispatch('px/search_cito')
},
watch : {
is_cito(val, old) {
// if (val == "Y" && old == "N")
// this.cito_show = false
}
}
}
</script>