FE_CPONE/fo/one-fo-supervisor-v1/components/oneFoSupervisorDialogRead.vue

<template>
<div>
    <v-dialog
    v-model="readdialog"
    persistent 
    max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline darken-1 pt-2 pb-2"
                primary-title
                style="color:white"
                v-bind:class="{ 'red':savestatus !== 2, 'success':savestatus === 2}"
            >
            <h4 dark v-if="savestatus !== 2">Konfirmasi</h4>
            <h4 v-if="savestatus === 2">Berhasil !</h4>
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                                <v-layout row>
                                    <v-flex pt-2 pr-2 v-html="readdialogmessage" xs12>
                                    
                                    </v-flex>
                                </v-layout>
                                <v-layout v-if="savestatus !== 2" row>
                                    <v-flex pt-2 pr-2 xs12>
                                        <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan" v-model="readmessage" class="input-plain"/>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout> 
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="error"
                    flat
                    v-if="savestatus !== 2"
                    @click="doRead()"
                >
                Baca dong !
                </v-btn>
                <v-btn
                    color="black"
                    flat
                    @click="closeDialogRead()"
                >
                Tutup
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</div>
</template>

<style scoped>
.label-tagihan{
    text-align:left;
    font-size: 25px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.sub-header{
    text-align:left;
    font-size: 18px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.sub-title{
    text-align:left;
    font-size: 14px;
    font-family: open sans, tahoma, sans-serif;
    font-weight:700;
}

.text-tagihan{
    text-align:left;
    font-size: 42px;
    font-family: open sans, tahoma, sans-serif;
}

.disabled-background{
    background:#b7b7b7;
}

.input-cash{
    width: 100%;
    padding: 8px 14px;
    box-sizing: border-box;
    border: 2px solid grey;
    border-radius: 4px;
    font-size: 22px;
    font-weight:700;
    text-align:right;
}
.input-plain{
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    border: 2px solid grey;
    border-radius: 4px;
    font-size: 14px;
}
.v-input, .v-input__slot, .v-messages{
    margin:0px;
    padding:0px;
    min-height: 0px; 
}
.v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
    margin-bottom: 0px;
}
table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
   background:white;
   border: 0px;
}

th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding-top: 2px;
   padding-bottom: 2px;
}
table>tr>td {
   padding: 8px;
}
table>tr>td:first {
   padding-left:15px!important;
}
.mini-input .v-input{
    margin-top: 0px; 
}

.mini-input .v-input, .mini-input .v-input--selection-controls,.mini-input .v-input__slot{
    margin-top: 0px; 
    margin-bottom:0px;
    margin-left:3px;
}
.mini-input .v-messages{
    min-height:0px;
}

.border-bottom-dashed{
      border-bottom : 1px dashed rgba(0,0,0,.12);
}
</style>
<script>
module.exports = {
    data () {
      return {
        printwidth:600
      }
    },
    computed: {
        readdialog:{
            get() {
                return this.$store.state.supervisor.read_dialog
            },
            set(val) {
                this.$store.commit("supervisor/update_read_dialog",val)
            }
        },
        readdialogmessage:{
            get() {
                return this.$store.state.supervisor.read_dialog_message
            },
            set(val) {
                this.$store.commit("supervisor/update_read_dialog_message",val)
            }
        },
        readmessage: {
            get() {
                return this.$store.state.supervisor.read_message
            },
            set(val) {
                this.$store.commit("supervisor/update_read_message",val)
            }
        },
        savestatus(){
            return this.$store.state.supervisor.save_status
        }
      
    },
    methods : {
        doRead(){
            let prm = {
                'id':this.$store.state.patient.selected_patient.xid,
                'orderid':this.$store.state.patient.selected_patient.orderid,
                'msg':this.$store.state.supervisor.read_message,
                'type':this.$store.state.patient.selected_patient.message_type
                }
            this.$store.dispatch("supervisor/read",prm)
        },
        closeDialogRead(){
            if(this.savestatus !== 2){
                this.$store.commit("supervisor/update_read_dialog",false)
            }
            else{
                let arrpatient = this.$store.state.patient.patients
                var idx = _.findIndex(arrpatient, item => item.orderid === this.$store.state.patient.selected_patient.orderid)
                console.log(idx)
                this.$store.dispatch("patient/search",{
                    search: this.$store.state.patient.search,
                    status: this.$store.state.patient.selected_status.value,
                    lastidx:idx
                })
                this.$store.commit("supervisor/update_read_dialog",false)
            }
             
        }
   }
}
</script>