FE_CPONE/test/vuex/one-fo-clinic-poly/components/oneFoClinicPolyReceipt.vue

<template>
  
    <v-dialog
      v-model="dialog_med"
      max-width="900"
      full-width
    >
      <!-- <v-btn
        color="orange"
        slot="activator"
        :dark="processed"
        block
        
        :disabled="!processed"
      >
        RESEP
      </v-btn> -->

      <v-card>
        <v-card-title
          class="headline grey lighten-2 pt-2 pb-2"
          primary-title
        >
          Resep Obat
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
            
          <v-data-table :headers="headers" :items="receipts" 
            :loading="isLoading"
            hide-actions class="elevation-1">

            <template slot="no-data">
                <v-alert :value="isError" color="error" icon="warning">
                Data Pasien tidak di temukan
                {{errorMessage}}
                </v-alert>
            </template>

            <template slot="items" slot-scope="props">
                <td class="text-xs-left pa-2 text-md-center" >
                    {{ props.index + 1 }}
                </td>
                <td class="text-xs-left pa-2" >
                    <v-text-field outline 
                    hide-details
                    v-model="props.item.med_name"
                    class="no-label"
                    
                    @input="(val) => updateReceipt(props.index, 'med_name', val)"
                    ></v-text-field>
                    
                </td>
                <td class="text-xs-left pa-2" >
                    <v-layout>
                        <v-flex xs5>
                            <v-text-field outline 
                                hide-details
                                v-model="props.item.med_signa1"
                                class="no-label"
                                reverse
                                
                                @input="(val) => updateReceipt(props.index, 'med_signa1', val)"></v-text-field>
                        </v-flex>
                        <v-flex xs2 
                        class="font-weight-black">
                        <p class="text-md-center mb-0 mt-2">X</p>
                        </v-flex>
                        <v-flex xs5>
                            <v-text-field outline 
                                hide-details
                                v-model="props.item.med_signa2"
                                class="no-label"
                                reverse
                                
                                @input="(val) => updateReceipt(props.index, 'med_signa2', val)"></v-text-field>
                        </v-flex>
                    </v-layout>
                </td>
                <td class="text-xs-left pa-2" >
                    <v-text-field outline 
                        hide-details
                        v-model="props.item.med_days"
                        class="no-label"
                        reverse
                        
                        @input="(val) => updateReceipt(props.index, 'med_days', val)"></v-text-field>
                </td>
                <!-- <td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.status }}</td> -->
                
            </template>
            
            </v-data-table>
        </v-card-text>
        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog_med = false"
          >
            Tutup
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  
</template>

<style>
/* input { display:none } */
.no-label.v-text-field--outline>.v-input__control>.v-input__slot {
    min-height: auto;
}

.no-label input {
    margin-top: 0px !important;
}

</style>

<script>
module.exports = {
    data () {
        return {
            headers : [
                {
                    text: "NO",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "10%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "NAMA OBAT",
                    align: "left",
                    sortable: false,
                    value: "mr",
                    width: "45%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "SIGNA",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "30%",
                    class: "pa-2 blue lighten-3 white--text"
                },
                {
                    text: "HARI",
                    align: "left",
                    sortable: false,
                    value: "name",
                    width: "15%",
                    class: "pa-2 blue lighten-3 white--text"
                }
            ],
        }
    },

    components : {
        'patient-search-result': httpVueLoader('./patientSearchResult.vue')
    },
    methods : {
       search: function() {
          this.$store.dispatch('patient/search')
       },

       updateReceipt(idx, type, val) {
         
         let receipts = this.$store.state.receipt.receipts
         receipts[idx][type] = val
         this.$store.commit("receipt/update_receipts", receipts)
      }
    },
    computed : {
       dialog_med : {
          get() {
             return this.$store.state.order.med_dialog_is_active;
          },
          set(val) {
             this.$store.commit('order/update_med_dialog_is_active', val);
          }
       },

       isLoading () {
            return false
        },

        receipts : {
            get () {
                return this.$store.state.receipt.receipts
            },
            set (v) {
                this.$store.commit('receipt/update_receipts', v)
                return
            }
            
        },

        isError () {
            return false;
        },

        errorMessage () {
            return ""
        },

        // test () {
        //     return this.$store.state.receipt.test
        // }
        test : {
            get () {
                return this.$store.state.receipt.test
            },
            set (v) {
                this.$store.commit('receipt/update_test', v)
                return
            }
            
        },

        processed () {
            return this.$store.state.order.processed;
        }
    },

    watch : {
        receipts (n, o) {
            console.log(n)
            console.log(o)
            if (n != o)
                this.$store.commit('receipt/update_receipts', n)
        },

        test (n, o) {
            console.log("n-test:"+n+"o-test"+o)
        }
    }
}
</script>