SHARE
TWEET

Untitled

maverix012 Jun 15th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <v-app>
  3.     <v-toolbar dark color="blue darken-3">
  4.       <v-toolbar-title class="white--text">SKIV</v-toolbar-title>
  5.     </v-toolbar>
  6.     <v-container grid-list-md text-xs-center>
  7.       <v-layout align-center justify-center row>
  8.         <v-dialog v-model="dialog" persistent max-width="290">
  9.           <v-card class="elevation-12">
  10.             <v-toolbar dark color="primary">
  11.               <v-toolbar-title>Masukkan Identitas Anda</v-toolbar-title>
  12.             </v-toolbar>
  13.             <v-card-text>
  14.               <v-text-field v-model="data.nama" prepend-icon="person" label="Nama" type="text"></v-text-field>
  15.               <v-text-field v-model="data.passport" prepend-icon="card_membership" label="Passport" type="text">
  16.               </v-text-field>
  17.               <v-menu ref="menu" v-model="menu" :close-on-content-click="false" :nudge-right="40" lazy
  18.                 transition="scale-transition" offset-y full-width min-width="290px">
  19.                 <template v-slot:activator="{ on }">
  20.                   <v-text-field v-model="data.tanggal_lahir" label="Tanggal Lahir" prepend-icon="event" readonly
  21.                     v-on="on">
  22.                   </v-text-field>
  23.                 </template>
  24.                 <v-date-picker ref="picker" v-model="data.tanggal_lahir" :max="new Date().toISOString().substr(0, 10)"
  25.                   min="1950-01-01" @change="saveDate"></v-date-picker>
  26.               </v-menu>
  27.               <v-text-field v-model="data.tempat_lahir" prepend-icon="place" label="Tempat Lahir" type="text">
  28.               </v-text-field>
  29.               <v-text-field v-model="data.pekerjaan" prepend-icon="work" label="Pekerjaan" type="text">
  30.               </v-text-field>
  31.               <v-select :items="jk" v-model="data.jenis_kelamin" prepend-icon="perm_identity" label="Jenis Kelamin">
  32.               </v-select>
  33.               <v-text-field v-model="data.nomor_telpon" prepend-icon="call" label="No Telpon" type="text">
  34.               </v-text-field>
  35.             </v-card-text>
  36.             <v-card-actions>
  37.               <v-spacer></v-spacer>
  38.               <v-btn color="primary" @click="dialog = false">Lanjut</v-btn>
  39.             </v-card-actions>
  40.           </v-card>
  41.         </v-dialog>
  42.         <v-card>
  43.           <v-form ref="form" @submit.prevent="save()">
  44.             <v-data-table :headers="headers" :items="questions" class="elevation-1" hide-actions>
  45.               <template v-slot:items="props">
  46.                 <td class="text-xs-center">{{ props.item.id }}</td>
  47.                 <td class="text-xs-left">{{ props.item.list_question }}</td>
  48.                 <td>
  49.                   <v-radio-group v-model="data.pemeriksaan[props.item.id-1]" column>
  50.                     <v-radio label="YA" color="blue" value=1></v-radio>
  51.                     <v-radio label="TIDAK" color="blue" value=0></v-radio>
  52.                   </v-radio-group>
  53.                 </td>
  54.               </template>
  55.             </v-data-table>
  56.             <v-card-actions>
  57.               <v-spacer></v-spacer>
  58.               <v-btn color="success" type="submit">save</v-btn>
  59.             </v-card-actions>
  60.           </v-form>
  61.         </v-card>
  62.       </v-layout>
  63.     </v-container>
  64.   </v-app>
  65. </template>
  66. <script>
  67.   export default {
  68.     data() {
  69.       return {
  70.         dialog: true,
  71.         menu: false,
  72.         headers: [
  73.           {
  74.             text: 'No.',
  75.             sortable: false,
  76.             align: 'center',
  77.             value: 'id'
  78.           },
  79.           {
  80.             text: 'Pertanyaan',
  81.             sortable: false,
  82.             align: 'center',
  83.             value: 'list_question'
  84.           },
  85.           {
  86.             text: 'Jawaban',
  87.             sortable: false,
  88.             align: 'center',
  89.             value: ''
  90.           },
  91.         ],
  92.         jk: ['Laki-laki', 'Perempuan'],
  93.         data: {
  94.           nama: '',
  95.           passport: '',
  96.           tanggal_lahir: null,
  97.           tempat_lahir: '',
  98.           pekerjaan: '',
  99.           jenis_kelamin: '',
  100.           nomor_telpon: '',
  101.           pemeriksaan: [],
  102.  
  103.         },
  104.         questions: [],
  105.       }
  106.     },
  107.     created() {
  108.       this.initialize()
  109.     },
  110.     watch: {
  111.       menu(val) {
  112.         val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
  113.       }
  114.     },
  115.     methods: {
  116.       initialize() {
  117.         axios.get('/question')
  118.           .then((res) => {
  119.             this.questions = res.data;
  120.             this.data.pemeriksaan = Array(res.data.length).fill(null)
  121.  
  122.           }).catch((err) => {
  123.             console.log(err.message);
  124.           })
  125.       },
  126.       save() {
  127.         if (this.data.nama != null && this.data.passport != null && this.data.tanggal_lahir != null && this.data
  128.           .tempat_lahir != null && this.data.pekerjaan != null && this.data.jenis_kelamin !== null && this.data.nomor_telpon !== null) {
  129.           if (this.data.pemeriksaan.includes(null) == false) {
  130.             axios.post('/pasien', this.data)
  131.               .then((res) => {
  132.                 console.log('pasien berhasil ditambahkan');
  133.               }).catch((err) => {
  134.                 console.log(err.message);
  135.               })
  136.             axios.post('/hasil', this.data)
  137.               .then((res) => {
  138.                 console.log('pemeriksaan berhasil ditambahkan');
  139.               }).catch((err) => {
  140.                 console.log(err.message);
  141.               })
  142.             this.$router.go('/')
  143.           } else {
  144.             alert('ada data yang belum terisi')
  145.           }
  146.         } else {
  147.           alert('data identitas tidak boleh kosong. Anda harus mengisi semua data')
  148.           this.$router.go('/')
  149.  
  150.         }
  151.       },
  152.       saveDate(tanggal_lahir) {
  153.         this.$refs.menu.save(tanggal_lahir)
  154.  
  155.       }
  156.     }
  157.   }
  158.  
  159. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top