FE_CPONE/test/vuex/one-mcu-report-template/components/oneMcuReportTemplateDetailDialogNew.vue

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="400px">
      
      <v-card>
        <v-card-title>
          <span class="headline">Tambah Data Template</span>
        </v-card-title>
        <v-card-text class="pt-0">
          <v-container grid-list-md pa-0>
            <v-layout row wrap>
                
              <v-flex xs12 sm12 md12>
                <v-text-field v-model="template_new.desc" label="Deskripsi" hide-details required v-on:keyup="update_desc($event)"></v-text-field>
              </v-flex>

              <v-flex xs4 sm4 md4 v-if="!is_edit">
                <v-checkbox
                v-model="template_new.is_test"
                :label="`Is Test`"
                hide-details
                @change="update_is_test"
                value="Y"
                false-value="N"
                ></v-checkbox>
              </v-flex>

              <v-flex xs8 sm8 md8 v-if="!is_edit">
                <v-autocomplete
                  label="Pemeriksaan"
                  v-model="selected_px"
                  :items="pxs"
                  :search-input.sync="search_px"
                  auto-select-first
                  no-filter
                  return-object
                  clearable
                  item-text="T_TestName"
                  no-data-text="Pilih Pemeriksaan"
                  >
                  <template
                     slot="item"
                     slot-scope="{ item }"
                     >
                     <v-list-tile-content>
                        <v-list-tile-title v-text="item.T_TestName"></v-list-tile-title>
                     <!-- <v-list-tile-sub-title v-text="getMou(item)"></v-list-tile-sub-title> -->
                     </v-list-tile-content>
                  </template>

               </v-autocomplete>
                <!-- <v-text-field v-model="template_new.test" label="Pemeriksaan" required></v-text-field> -->
              </v-flex>

              <v-flex xs12 sm12 md12>
                <v-select
                    :items="pos"
                    v-model="selected_pos"
                    label="Posisi"
                    return-object
                    item-text="label"
                    item-value="code"
                    hide-details
                    clearable
                ></v-select>
              </v-flex>

              <v-flex xs12 sm12 md12>
                <v-select
                    :items="av_descs"
                    v-model="selected_av_desc"
                    label=""
                    return-object
                    item-text="Mcu_ReportTemplateDetailDesc"
                    item-value="Mcu_ReportTemplateDetailID"
                    solo
                    clearable
                    :disabled="!selected_pos || !selected_pos.code || selected_pos.code == 'XX'"
                ></v-select>
              </v-flex>
              
            </v-layout>
          </v-container>
          
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Tutup</v-btn>
          <v-btn color="blue darken-1" @click="save">Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<style scoped>

</style>
<style>

</style>

<script>
module.exports = {
    data () {
        return {
            
            
            
        }
      
    },

    computed : {
        template_new : {
          get () {
            return this.$store.state.template_detail.template_new
          },
          set (v) {
            this.$store.commit('template_detail/update_new_template_new', v)
          }
        },

        dialog : {
            get () {
                return this.$store.state.template_detail.dialog_new
            },
            set (v) {
                this.$store.commit('template_detail/update_dialog_new', v)
            }
        },

        av_descs () {
            return this.$store.state.template_detail.templates
        },

        pxs () {
          return this.$store.state.template_detail.pxs
        },

        selected_px : {
          get() {
            return this.$store.state.template_detail.selected_px
          },
          set (v) {
            this.$store.commit('template_detail/update_selected_px', v)
          }
        },

        search_px : {
          get () {
            return this.$store.state.template_detail.search_px
          },
          set (v) {
            this.$store.commit('template_detail/update_search_px', v)
          }
        },

        pos () {
          let x = this.$store.state.template_detail.pos
          let is_edit = false
          for (let i in x) {
            if (x[i].code == "XX")
              is_edit = true
          }

          if (this.is_edit && !is_edit) 
            x.splice(0, 0, {code:"XX", label:"TETAP"})

          if (!this.is_edit && is_edit)
            x.splice(0, 1)

          return this.$store.state.template_detail.pos
        },

        selected_pos : {
          get() {
            return this.$store.state.template_detail.selected_pos
          },
          set (v) {
            this.$store.commit('template_detail/update_selected_pos', v)
          }
        },

        selected_av_desc : {
          get() {
            return this.$store.state.template_detail.selected_av_desc
          },
          set (v) {
            this.$store.commit('template_detail/update_selected_av_desc', v)
          }
        },

        is_edit () {
          return this.$store.state.template_detail.is_edit
        }
    },

    methods : {
      save () {
        this.$store.dispatch('template_detail/save')
      },

      thr_search: _.debounce( function () {
         this.$store.dispatch("template_detail/search_px")
      }, 700),

      update_desc(x) {
        let y = this.$store.state.template_detail.template_new
        y.desc = x.target.value
        this.$store.commit('template_detail/update_template_new', y)
      },

      update_is_test(x) {
        if (x == null)
          x = "N"

        let y = this.$store.state.template_detail.template_new
        y.is_test = x
        this.$store.commit('template_detail/update_template_new', y)
      }
    },

    watch : {
      search_px(val, old) {
            
         if (val == null || typeof val == 'undefined') val = ""
         console.log("1-val:"+val)
         if (val == old ) return
         console.log("2-val:"+val)
         // if (! val) return
         console.log("3-val:"+val)
         // if (val.length < 1 ) return
         console.log("4-val:"+val)
         if (this.$store.state.template_detail.search_status == 1 ) return  
         console.log("5-val:"+val)
         this.$store.commit("template_detail/update_search_px", val)
         this.thr_search()

         // if (this.$store.state.doctor.search_status == 1 ) return  
         // this.$store.commit("doctor/update_search",val)
         // this.thr_search()
      }
    },

    mounted () {
      
    }
  }
</script>