362 lines
14 KiB
Vue
362 lines
14 KiB
Vue
<template>
|
|
<v-dialog
|
|
v-model="dialog"
|
|
persistent
|
|
width="800px"
|
|
>
|
|
<v-card>
|
|
<v-card-text>
|
|
<v-layout row wrap>
|
|
<v-flex xs6 pr-2>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 pl-1 pr-1>
|
|
<v-text-field
|
|
label="NAMA LENGKAP"
|
|
v-model="name"
|
|
:error="!rules.required"
|
|
:rules="[rules.required]"
|
|
@update:error="error_trigger('name', $event)"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pl-1 pr-1>
|
|
<v-text-field
|
|
label="Prefix 1"
|
|
v-model="prefix1"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pl-1 pr-1>
|
|
<v-text-field
|
|
label="Prefix 2"
|
|
v-model="prefix2"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row wrap>
|
|
<v-flex xs4 pl-1 pr-1>
|
|
<v-text-field
|
|
label="Sufix 1"
|
|
v-model="sufix1"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs4 pl-1 pr-1>
|
|
<v-text-field
|
|
label="Sufix 2"
|
|
v-model="sufix2"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs4 pl-1 pr-1>
|
|
<v-text-field
|
|
label="Sufix 3"
|
|
v-model="sufix3"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row wrap>
|
|
<v-flex xs6 pl-1 pr-1>
|
|
<v-select
|
|
:items="sexs"
|
|
item-text="M_SexName"
|
|
item-value="M_SexID"
|
|
return-object
|
|
v-model="selected_sex"
|
|
label="Jenis Kelamin"
|
|
:error="!rules.required"
|
|
:rules="[rules.required]"
|
|
@update:error="error_trigger('selected_sex', $event)"
|
|
></v-select>
|
|
</v-flex>
|
|
<v-flex xs6>
|
|
|
|
</v-flex>
|
|
|
|
<v-flex xs12 pl-1 pr-1>
|
|
<v-text-field
|
|
label="No HP"
|
|
v-model="hp"
|
|
:error="!rules.required"
|
|
:rules="[rules.required]"
|
|
@update:error="error_trigger('hp', $event)"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 pl-1 pr-1>
|
|
<v-text-field
|
|
label="Catatan"
|
|
v-model="note"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pl-2>
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-textarea label="Alamat lengkap" v-model="address"
|
|
:error="!rules.required"
|
|
:rules="[rules.required]"
|
|
@update:error="error_trigger('address', $event)"></v-textarea>
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
|
|
<v-autocomplete
|
|
:items="provinces"
|
|
item-text="M_ProvinceName"
|
|
item-value="M_ProvinceID"
|
|
return-object
|
|
v-model="selected_province"
|
|
label="Propinsi"
|
|
autocomplete
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="cities"
|
|
item-text="M_CityName"
|
|
item-value="M_CityID"
|
|
return-object
|
|
v-model="selected_city"
|
|
label="Kota"
|
|
autocomplete
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="districts"
|
|
item-text="M_DistrictName"
|
|
item-value="M_DictrictID"
|
|
return-object
|
|
v-model="selected_district"
|
|
label="Kecamatan"
|
|
autocomplete
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="villages"
|
|
item-text="M_KelurahanName"
|
|
item-value="M_KelurahanID"
|
|
return-object
|
|
v-model="selected_village"
|
|
label="Kelurahan"
|
|
autocomplete
|
|
:error="!rules.required"
|
|
:rules="[rules.required]"
|
|
@update:error="error_trigger('selected_village', $event)"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn color="primary" flat @click="dialog=!dialog">Tutup</v-btn>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" @click="save" :disabled="!btn_save_enabled" >Simpan</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data () {
|
|
return {
|
|
errors : {
|
|
name : true,
|
|
hp : true,
|
|
sufix1 : false,
|
|
sufix2 : false,
|
|
sufix3 : false,
|
|
prefix1 : false,
|
|
prefix2 : false,
|
|
selected_sex : true,
|
|
address : false,
|
|
selected_village : false
|
|
},
|
|
rules : {
|
|
required : value => { return !!value || "Harus diisi !" },
|
|
// hp : value => { this.errors.name = !value; return !!value || "Harus diisi !" },
|
|
// selected_sex : value => { this.errors.name = !value; return !!value || "Harus diisi !" },
|
|
// address : value => { this.errors.name = !value; return !!value || "Harus diisi !" },
|
|
// selected_village : value => { this.errors.name = !value; return !!value || "Harus diisi !" }
|
|
}
|
|
}
|
|
},
|
|
|
|
computed : {
|
|
dialog : {
|
|
get () { return this.$store.state.doctor_new.dialog_new },
|
|
set (v) { this.$store.commit('doctor_new/update_dialog_new') }
|
|
},
|
|
|
|
sexs () {
|
|
return this.$store.state.doctor_new.sexs
|
|
},
|
|
|
|
selected_sex : {
|
|
get () { return this.$store.state.doctor_new.selected_sex },
|
|
set (v) { this.$store.commit('doctor_new/update_selected_sex', v) }
|
|
},
|
|
|
|
provinces () {
|
|
return this.$store.state.doctor_new.provinces
|
|
},
|
|
|
|
selected_province : {
|
|
get () { return this.$store.state.doctor_new.selected_province },
|
|
set (v) {
|
|
this.$store.commit('doctor_new/update_selected_province', v)
|
|
// this.$store.dispatch('doctor_new/search_city')
|
|
}
|
|
},
|
|
|
|
cities () {
|
|
return this.$store.state.doctor_new.cities
|
|
},
|
|
|
|
selected_city : {
|
|
get () { return this.$store.state.doctor_new.selected_city },
|
|
set (v) {
|
|
this.$store.commit('doctor_new/update_selected_city', v)
|
|
// this.$store.dispatch('doctor_new/search_district')
|
|
}
|
|
},
|
|
|
|
districts () {
|
|
return this.$store.state.doctor_new.districts
|
|
},
|
|
|
|
selected_district : {
|
|
get () { return this.$store.state.doctor_new.selected_district },
|
|
set (v) {
|
|
this.$store.commit('doctor_new/update_selected_district', v)
|
|
// this.$store.dispatch('doctor_new/search_village')
|
|
}
|
|
},
|
|
|
|
villages () {
|
|
return this.$store.state.doctor_new.villages
|
|
},
|
|
|
|
selected_village : {
|
|
get () { return this.$store.state.doctor_new.selected_village },
|
|
set (v) { this.$store.commit('doctor_new/update_selected_village', v) }
|
|
},
|
|
|
|
name : {
|
|
get () { return this.$store.state.doctor_new.param_name },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'name',val:v}) }
|
|
},
|
|
|
|
prefix1 : {
|
|
get () { return this.$store.state.doctor_new.param_prefix1 },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'prefix1',val:v}) }
|
|
},
|
|
|
|
prefix2 : {
|
|
get () { return this.$store.state.doctor_new.param_prefix2 },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'prefix2',val:v}) }
|
|
},
|
|
|
|
sufix1 : {
|
|
get () { return this.$store.state.doctor_new.param_sufix1 },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'sufix1',val:v}) }
|
|
},
|
|
|
|
sufix2 : {
|
|
get () { return this.$store.state.doctor_new.param_sufix2 },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'sufix2',val:v}) }
|
|
},
|
|
|
|
sufix3 : {
|
|
get () { return this.$store.state.doctor_new.param_sufix3 },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'sufix3',val:v}) }
|
|
},
|
|
|
|
hp : {
|
|
get () { return this.$store.state.doctor_new.param_hp },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'hp',val:v}) }
|
|
},
|
|
|
|
note : {
|
|
get () { return this.$store.state.doctor_new.param_note },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'note',val:v}) }
|
|
},
|
|
|
|
address : {
|
|
get () { return this.$store.state.doctor_new.param_address },
|
|
set (v) { this.$store.commit('doctor_new/update_param', {param:'address',val:v}) }
|
|
},
|
|
|
|
btn_save_enabled () {
|
|
if (this.errors.name || this.errors.hp || this.errors.selected_sex || this.errors.address ||
|
|
this.errors.selected_village)
|
|
return false
|
|
|
|
return true
|
|
}
|
|
},
|
|
|
|
methods : {
|
|
save () {
|
|
this.$store.commit('update_dialog_loading', true)
|
|
this.$store.dispatch('doctor_new/save')
|
|
},
|
|
|
|
error_trigger(x, e) {
|
|
this.errors[x] = e
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$store.dispatch('doctor_new/search_sex')
|
|
},
|
|
|
|
watch : {
|
|
dialog(val, old) {
|
|
if (val && !old) {
|
|
this.$store.dispatch('doctor_new/search_province')
|
|
|
|
this.name = ""
|
|
this.hp = ""
|
|
this.sufix1 = ""
|
|
this.sufix2 = ""
|
|
this.sufix3 = ""
|
|
this.prefix1 = ""
|
|
this.prefix2 = ""
|
|
this.selected_sex = null
|
|
this.address = ""
|
|
}
|
|
|
|
},
|
|
|
|
selected_province(val, old) {
|
|
if (val != old)
|
|
this.$store.dispatch('doctor_new/search_city')
|
|
},
|
|
|
|
selected_city(val, old) {
|
|
if (val != old)
|
|
this.$store.dispatch('doctor_new/search_district')
|
|
},
|
|
|
|
selected_district(val, old) {
|
|
if (val != old)
|
|
this.$store.dispatch('doctor_new/search_village')
|
|
}
|
|
}
|
|
}
|
|
</script>
|