BE_CPONE/application/controllers/mockup/process/cpone-process-resultentry-v21/components/oneResultFNA.vue

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog_fna" persistent max-width="40%">
      <v-card>
        <v-card-title>
          <span class="headline">FNA</span>
        </v-card-title>
        <v-card-text>
            <v-layout mb-2 row>
              <v-flex xs12>
                  <v-select
                      class="mini-select"
                      item-text="name"
                      return-object
                      outline
                      :items="doctors"
                      v-model="selected_doctor"
                      hide-details
                      label="Dokter"
                  ></v-select>
                  <p v-if="error_doctor" class="error pl-2 pr-2" style="color:#fff">Dokternya siapa ? jangan lupa ya ...</p>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs12>
                <v-layout v-for="result in results"  mb-2 row>
                    <v-flex xs12>
                        <v-textarea
                            auto-grow
                            :label="result.label"
                            outline
                            rows="2"
                            v-model="result.result"
                            hide-details
                        ></v-textarea>
                    </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
            <v-layout mt-1 style="border:1px solid black" align-center row pa-2>
              <v-flex xs9>
                <input type="file" id="files" ref="files" multiple v-on:change="handleFileUploads()"/>
              </v-flex>
              <v-flex xs3 class="text-xs-right">
                 <v-btn :disabled="show_progrees_upload" small dark color="blue lighten-1" @click="submitFiles()">Upload</v-btn>
              </v-flex>
            </v-layout>
            <p v-if="error_image" class="mt-1 error pl-2 pr-2" style="color:#fff">Pilih 2 foto ya</p>
            <v-layout v-if="show_progrees_upload" row align-center>
              <v-flex xs12>
              
              <v-progress-linear :indeterminate="true"></v-progress-linear>

              </v-flex>
            </v-layout>
            <v-card class="mt-1">
            <v-layout  v-if="images.length > 0 && !show_progrees_upload" align-center row>
              
              <v-flex v-for="image in images" xs6 pa-2>
                <v-img :src="image.image_url">
                  <div class="fill-height bottom-gradient"></div>
                </v-img>
              </v-flex>
              
            </v-layout>
            </v-card>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog_fna = false">Tutup</v-btn>
          <v-btn v-if="!onprocess" color="blue darken-1" @click="saveResult_Fna" flat >Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

 <script>
 module.exports = {
   mounted() {
      //this.$store.dispatch("re_fna/get_doctors",{token:''})
   },
   data() {
      return {
        error_doctor:false,
        error_image:false
      };
   },
    computed: {
      show_progrees_upload: {
            get() {
                return this.$store.state.re_fna.show_progrees_upload
            },
            set(val) {
                this.$store.commit("re_fna/update_show_progrees_upload", val)
            }
        },
        images(){
          return this.$store.state.re_fna.images
        },
        onprocess(){
          return this.$store.state.re_fna.onprocess
        },
        dialog_fna: {
            get() {
                return this.$store.state.re_fna.dialog_fna
            },
            set(val) {
                this.$store.commit("re_fna/update_dialog_fna", val)
            }
        },
        results: {
            get() {
                return this.$store.state.re_fna.results
            },
            set(val) {
                this.$store.commit("re_fna/update_results", val)
            }
        },
        doctors(){
          return this.$store.state.re_fna.doctors
        },
        selected_doctor: {
            get() {
                return this.$store.state.re_fna.selected_doctor
            },
            set(val) {
                this.$store.commit("re_fna/update_selected_doctor", val)
            }
        }
    },
    methods: {
        handleFileUploads(){
          this.files = this.$refs.files.files;
        },
         removeFile( key ){
          this.files.splice( key, 1 );
        },
        submitFiles(){
          this.error_image = false
          let formData = new FormData()
          for( var i = 0; i < this.files.length; i++ ){
            let file = this.files[i];
            formData.append('files[' + i + ']', file)
          }
          if(this.files.length > 1){
            this.files = []
            this.show_progrees_upload = true
            formData.append('orderid', this.$store.state.re_patient.selected_patient.T_OrderHeaderID)
            formData.append('labnumber', this.$store.state.re_patient.selected_patient.T_OrderHeaderLabNumber)
            formData.append('token',  one_token())
            this.$store.dispatch("re_fna/uploadimage",formData)
          }
          else{
            this.error_image = true
          }
          
        },
        saveResult_Fna(){
            if(_.isEmpty(this.selected_doctor) || this.selected_doctor == '0'){
              this.error_doctor = true

            }else
              this.$store.commit("re_fna/update_onprocess", true)
              this.$store.dispatch("re_fna/saveresult_fna",{doctor:this.selected_doctor.id,results:this.results})
            }
        }
    
 }
</script>