505 lines
21 KiB
Vue
505 lines
21 KiB
Vue
<template>
|
|
|
|
<v-dialog
|
|
v-model="dialog"
|
|
width="1000"
|
|
>
|
|
<v-btn
|
|
slot="activator"
|
|
color="primary"
|
|
class="ma-1 one-btn-icon"
|
|
>
|
|
<span class="icon-add"></span>
|
|
</v-btn>
|
|
|
|
<v-card>
|
|
<v-card-title
|
|
class="headline grey lighten-2 pt-2 pb-2"
|
|
primary-title
|
|
>
|
|
Data Pasien Baru
|
|
</v-card-title>
|
|
<v-card-text class="pt-2 pb-2">
|
|
|
|
<v-layout row>
|
|
<v-flex xs6 pr-3>
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-text-field
|
|
v-model="patient_new.M_PatientName"
|
|
label="Nama Pasien"
|
|
:error="errors.name"
|
|
:rules="[rules.name]"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pr-2>
|
|
<v-select
|
|
v-model="selected_sex"
|
|
:items="sex"
|
|
item-value="M_SexID"
|
|
item-text="M_SexName"
|
|
label="Jenis Kelamin"
|
|
return-object
|
|
:error="errors.sex"
|
|
:rules="[rules.sex]"
|
|
>
|
|
|
|
</v-select>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pl-2>
|
|
<v-select
|
|
v-model="selected_title"
|
|
:items="title"
|
|
item-value="M_TitleID"
|
|
item-text="M_TitleName"
|
|
label="Titel"
|
|
return-object
|
|
:error="errors.title"
|
|
:rules="[rules.title]"
|
|
>
|
|
|
|
</v-select>
|
|
</v-flex>
|
|
|
|
<v-flex xs8 pr-3>
|
|
<v-text-field
|
|
v-model="patient_new.M_PatientPOB"
|
|
label="Tempat Lahir"
|
|
:error="errors.pob"
|
|
:rules="[rules.pob]"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs4>
|
|
<v-text-field
|
|
v-model="patient_new.M_PatientDOB"
|
|
label="Tanggal Lahir"
|
|
return-masked-value
|
|
mask="##-##-####"
|
|
:rules="[rules.dob]"
|
|
:error="errors.dob"
|
|
></v-text-field>
|
|
<!-- <one-date-picker
|
|
label="Tanggal Lahir"
|
|
@change="set_date($event)"
|
|
></one-date-picker> -->
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-text-field
|
|
v-model="patient_new.M_PatientHP"
|
|
label="No HP"
|
|
:error="errors.hp"
|
|
:rules="[rules.hp]"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-text-field
|
|
v-model="my_email"
|
|
label="Alamat EMAIL"
|
|
:rules="[email]"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs4 pr-2>
|
|
<v-select
|
|
v-model="selected_idtype"
|
|
:items="idtypes"
|
|
item-value="M_IdTypeID"
|
|
item-text="M_IdTypeName"
|
|
label="Tipe ID"
|
|
return-object
|
|
>
|
|
</v-select>
|
|
</v-flex>
|
|
|
|
<v-flex xs8>
|
|
<v-text-field
|
|
v-model="patient_new.M_PatientIDNumber"
|
|
label="Nomor ID"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-textarea
|
|
v-model="patient_new.M_PatientNote"
|
|
label="Catatan Pasien"
|
|
rows="2">
|
|
</v-textarea>
|
|
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pl-3>
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-textarea
|
|
v-model="patient_new.M_PatientAddressDescription"
|
|
label="Alamat"
|
|
:error="errors.address"
|
|
:rules="[rules.address]">
|
|
</v-textarea>
|
|
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="provinces"
|
|
item-text="M_ProvinceName"
|
|
item-value="M_ProvinceID"
|
|
label="Propinsi"
|
|
v-model="selected_province"
|
|
clearable
|
|
return-object
|
|
></v-autocomplete>
|
|
<!-- <v-select
|
|
v-model="selected_province"
|
|
:items="provinces"
|
|
item-text="M_ProvinceName"
|
|
item-value="M_ProvinceID"
|
|
return-object
|
|
label="Propinsi"
|
|
@change="get_city()"></v-select> -->
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="cities"
|
|
item-text="M_CityName"
|
|
item-value="M_CityID"
|
|
label="Kota"
|
|
v-model="selected_city"
|
|
clearable
|
|
return-object
|
|
></v-autocomplete>
|
|
<!-- <v-select
|
|
v-model="selected_city"
|
|
:items="cities"
|
|
item-text="M_CityName"
|
|
item-value="M_CityID"
|
|
return-object
|
|
label="Kota"></v-select> -->
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="districts"
|
|
item-text="M_DistrictName"
|
|
item-value="M_DistrictID"
|
|
label="Kecamatan"
|
|
v-model="selected_district"
|
|
clearable
|
|
return-object
|
|
></v-autocomplete>
|
|
<!-- <v-select
|
|
v-model="selected_district"
|
|
:items="districts"
|
|
item-text="M_DistrictName"
|
|
item-value="M_DistrictID"
|
|
return-object
|
|
label="Kecamatan"></v-select> -->
|
|
</v-flex>
|
|
|
|
<v-flex xs12>
|
|
<v-autocomplete
|
|
:items="villages"
|
|
item-text="M_KelurahanName"
|
|
item-value="M_KelurahanID"
|
|
label="Kelurahan"
|
|
v-model="selected_village"
|
|
clearable
|
|
:error="errors.kelurahan"
|
|
:rules="[rules.kelurahan]"
|
|
return-object
|
|
></v-autocomplete>
|
|
<!-- <v-select
|
|
v-model="selected_village"
|
|
:items="villages"
|
|
item-text="M_KelurahanName"
|
|
item-value="M_KelurahanID"
|
|
return-object
|
|
label="Kelurahan"
|
|
:error="errors.kelurahan"
|
|
:rules="[rules.kelurahan]"></v-select> -->
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
color="primary"
|
|
flat
|
|
@click="dialog = false"
|
|
>
|
|
Tutup
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
color="primary"
|
|
@click="add_new()"
|
|
:disabled="!btn_save_enabled"
|
|
>
|
|
Simpan
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
color="primary"
|
|
@click="add_use()"
|
|
:disabled="!btn_save_enabled"
|
|
>
|
|
Simpan dan Gunakan
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-dialog__container {
|
|
display: block !important;
|
|
}
|
|
|
|
.one-btn-icon { font-size: 1.5em; height: 42px; float: right }
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
components : {
|
|
'one-date-picker' : httpVueLoader('../../common/oneDatePicker.vue')
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
emailRules:[],
|
|
email: value => {
|
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
return pattern.test(value) || 'Invalid e-mail.'
|
|
},
|
|
id_number: '',
|
|
my_email: '',
|
|
rules: {
|
|
dob: value => {
|
|
// const pattern = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/
|
|
const pattern = /^(((0[1-9]|[12]\d|3[01])-(0[13578]|1[02])-((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)-(0[13456789]|1[012])-((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])-02-((19|[2-9]\d)\d{2}))|(29-02-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/
|
|
let x = pattern.test(value)
|
|
this.errors.dob = !x
|
|
return pattern.test(value) || 'Format : dd-mm-yyyy !'
|
|
},
|
|
name: value => { this.errors.name = !value; return !!value || "Harus diisi !" },
|
|
sex: value => { this.errors.sex = !value.M_SexID; return !!value.M_SexID || "Harus diisi !" },
|
|
title: value => { this.errors.title = !value.M_TitleID; return !!value.M_TitleID || "Harus diisi !" },
|
|
pob: value => { this.errors.pob = !value; return !!value || "Harus diisi !" },
|
|
hp: value => { this.errors.hp = !value; return !!value || "Harus diisi !" },
|
|
address: value => { this.errors.address = !value; return !!value || "Harus diisi !" },
|
|
kelurahan: value => { this.errors.kelurahan = !value; return !!value || "Harus diisi !" }
|
|
},
|
|
|
|
errors: { dob: false, name: false, sex: false, title: false, hp: false,
|
|
address: false, province: false, city: false, district: false, kelurahan: false
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
patient_new : {
|
|
get () {
|
|
return this.$store.state.patient.patient_new
|
|
},
|
|
set (v) {
|
|
this.$store.commit('patient/update_patient_new', v)
|
|
}
|
|
},
|
|
|
|
dialog: {
|
|
get() {
|
|
return this.$store.state.patient.patient_new_dialog_is_active
|
|
},
|
|
set(val) {
|
|
this.$store.commit('patient/update_patient_new_dialog_is_active', val)
|
|
}
|
|
},
|
|
|
|
sex () {
|
|
return this.$store.state.other.sex
|
|
},
|
|
|
|
selected_sex : {
|
|
get () {
|
|
return this.$store.state.other.selected_sex
|
|
},
|
|
set (val) {
|
|
this.$store.commit('other/update_selected_sex', val)
|
|
}
|
|
},
|
|
|
|
title () {
|
|
return this.$store.state.other.title
|
|
},
|
|
|
|
selected_title : {
|
|
get () {
|
|
return this.$store.state.other.selected_title
|
|
},
|
|
set (val) {
|
|
this.$store.commit('other/update_selected_title', val)
|
|
}
|
|
},
|
|
|
|
provinces () { return this.$store.state.area.provinces },
|
|
selected_province : {
|
|
get () { return this.$store.state.area.selected_province },
|
|
set (v) {
|
|
this.$store.commit('area/update_selected_area', {type:'province',val:v})
|
|
this.$store.dispatch('area/search_city') }
|
|
},
|
|
|
|
cities () { return this.$store.state.area.cities },
|
|
selected_city : {
|
|
get () { return this.$store.state.area.selected_city },
|
|
set (v) { this.$store.commit('area/update_selected_area', {type:'city',val:v})
|
|
this.$store.dispatch('area/search_district') }
|
|
},
|
|
|
|
districts () { return this.$store.state.area.districts },
|
|
selected_district : {
|
|
get () { return this.$store.state.area.selected_district },
|
|
set (v) { this.$store.commit('area/update_selected_area', {type:'district',val:v})
|
|
this.$store.dispatch('area/search_kelurahan') }
|
|
},
|
|
|
|
villages () { return this.$store.state.area.villages },
|
|
selected_village : {
|
|
get () { return this.$store.state.area.selected_village },
|
|
set (v) { this.$store.commit('area/update_selected_area', {type:'village',val:v}) }
|
|
},
|
|
|
|
idtypes () {
|
|
return this.$store.state.patient.idtypes
|
|
},
|
|
|
|
selected_idtype : {
|
|
get () { return this.$store.state.patient.selected_idtype },
|
|
set (v) { this.$store.commit('patient/update_selected_idtype', v) }
|
|
},
|
|
|
|
btn_save_enabled () {
|
|
if (this.errors.dob || this.errors.name || this.errors.sex ||
|
|
this.errors.title || this.errors.pob || this.errors.hp ||
|
|
this.errors.address || this.errors.kelurahan) return false
|
|
|
|
|
|
|
|
return true
|
|
}
|
|
},
|
|
|
|
methods : {
|
|
get_city() {
|
|
return
|
|
},
|
|
|
|
add_new (use) {
|
|
let prm = {
|
|
M_PatientName : this.patient_new.M_PatientName,
|
|
M_PatientM_TitleID : this.selected_title.M_TitleID,
|
|
M_PatientSuffix : '',
|
|
M_PatientM_SexID : this.selected_sex.M_SexID,
|
|
M_PatientM_ReligionID : 1,
|
|
M_PatientDOB : this.patient_new.M_PatientDOB,
|
|
M_PatientHP : this.patient_new.M_PatientHP,
|
|
M_PatientPhone : this.patient_new.M_PatientPhone,
|
|
M_PatientEmail : this.my_email,
|
|
|
|
M_PatientM_IdTypeID : (this.selected_idtype.M_IdTypeID ? this.selected_idtype.M_IdTypeID : 0),
|
|
M_PatientIDNumber : this.patient_new.M_PatientIDNumber,
|
|
M_PatientNote : this.patient_new.M_PatientNote,
|
|
|
|
M_PatientAddressDescription : this.patient_new.M_PatientAddressDescription,
|
|
M_PatientAddressM_KelurahanID : this.selected_village.M_KelurahanID
|
|
}
|
|
if (use) { prm.use = true }
|
|
|
|
this.$store.dispatch('patient/add_new', prm)
|
|
this.dialog = false
|
|
},
|
|
|
|
add_use () {
|
|
this.add_new(true)
|
|
},
|
|
|
|
set_date (x) {
|
|
this.patient_new.M_PatientDOB = x.new_date
|
|
}
|
|
},
|
|
|
|
watch : {
|
|
my_email (v, o) {
|
|
if (v == "") {
|
|
this.email = value => {
|
|
return /\s/ || 'Hahaha'
|
|
}
|
|
} else {
|
|
this.email = value => {
|
|
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
|
return pattern.test(value) || 'Invalid e-mail.'
|
|
}
|
|
}
|
|
},
|
|
|
|
dialog (val, old) {
|
|
if (val && !old) {
|
|
// M_PatientName : this.patient_new.M_PatientName,
|
|
// M_PatientM_TitleID : this.selected_title.M_TitleID,
|
|
// M_PatientSuffix : '',
|
|
// M_PatientM_SexID : this.selected_sex.M_SexID,
|
|
// M_PatientM_ReligionID : 1,
|
|
// M_PatientDOB : this.patient_new.M_PatientDOB,
|
|
// M_PatientHP : this.patient_new.M_PatientHP,
|
|
// M_PatientPhone : this.patient_new.M_PatientPhone,
|
|
// M_PatientEmail : this.my_email,
|
|
|
|
// M_PatientM_IdTypeID : (this.selected_idtype.M_IdTypeID ? this.selected_idtype.M_IdTypeID : 0),
|
|
// M_PatientIDNumber : this.patient_new.M_PatientIDNumber,
|
|
// M_PatientNote : '',
|
|
|
|
// M_PatientAddressDescription : this.patient_new.M_PatientAddressDescription,
|
|
// M_PatientAddressM_KelurahanID : this.selected_village.M_KelurahanID
|
|
|
|
let x = this.patient_new
|
|
x.M_PatientName = ""
|
|
x.M_PatientDOB = ""
|
|
x.M_PatientPOB = ""
|
|
x.M_PatientHP = ""
|
|
x.M_PatientEmail = ""
|
|
x.M_PatientAddressDescription = ""
|
|
x.M_PatientIDNumber = ""
|
|
this.patient_new = x
|
|
this.selected_sex = {}
|
|
this.selected_title = {}
|
|
this.selected_idtype = {}
|
|
|
|
this.$store.dispatch('area/search_province')
|
|
}
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
// this.$store.dispatch('area/search_province')
|
|
this.$store.dispatch('other/search_sex')
|
|
|
|
this.$store.dispatch('patient/search_idtype')
|
|
// this.$store.dispatch('area/search_city')
|
|
}
|
|
}
|
|
</script>
|