Files
FE_CPONE/test/vuex/hs-registrasi-v6/components/oneFoRegistrationTab03.vue
2026-04-27 10:13:31 +07:00

156 lines
5.8 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">
<v-layout align-center row>
<v-flex xs9>
<h5 class="subtitle-1 font-weight-bold" style="color:#fff">DETAIL ORDER</h5>
</v-flex>
<v-flex xs3>
<h5 class="subtitle-1 text-xs-right font-weight-bold" style="color:#fff">{{selected_test.length}} PX</h5>
</v-flex>
</v-layout>
</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: {
selected_test() {
return this.$store.state.px.selected_test
},
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>