FE_CPONE/test/vuex/one-md-price-edit/components/oneMdPriceCopyList.vue

<template>
   
      
      
         <v-layout row>
                <v-flex xs3>
                    <h5>Target Agreement</h5>
                    <v-divider class="mt-1 mb-1"></v-divider>
                    <h4 class="title">{{target_company.M_CompanyName}} > {{target_mou.M_MouName}}</h4>
                </v-flex>

                <v-flex xs3>
                    <h5 class="caption">Sumber Agreement</h5>
                    <v-divider class="mt-1 mb-1"></v-divider>
                </v-flex>
               <v-flex xs3>
                  <v-autocomplete
                     label="Kelompok Pelanggan"
                     v-model="selected_company"
                     :items="companies"
                     :search-input.sync="query_company"
                     
                     auto-select-first
                     no-filter
                     return-object
                     clearable
                     item-text="M_CompanyName"
                     :loading="is_loading"
                     no-data-text="Pilih Kel. Pelanggan"
                     >
                     <template
                        slot="item"
                        slot-scope="{ item }"
                        >
                        <v-list-tile-content>
                           <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                           <!-- <v-list-tile-sub-title v-text="'aaa'"></v-list-tile-sub-title> -->
                        </v-list-tile-content>
                     </template>

                  </v-autocomplete>
               </v-flex>

               <v-flex xs3>
                    <v-select class="xs12" :items="mous" 
                        item-text="M_MouName"
                        item-value="M_MouID"
                        return-object
                        v-model="selected_mou"
                        label="Agreement"></v-select>
               </v-flex>
               <v-flex xs3>
                  <div>
                     <v-btn @click="changeBtnFlagCopyAll(copyall)" v-if="copyall === 'N'" small color="error">
                     <v-icon left>close</v-icon> Gandakan semua sekaligus </v-btn>
                     <v-btn @click="changeBtnFlagCopyAll(copyall)" v-if="copyall === 'Y'" small color="success">
                     <v-icon left>check</v-icon> Gandakan semua sekaligus</v-btn>
                  </div>
               </v-flex>
            <!-- <v-btn class="xs3 ma-1" color="info"  @click="set" >Baru</v-btn> -->
         </v-layout>
      
      <!--  -->
      
   
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot{
   min-height:60px;
}
.searchbox .v-btn {
   min-height:60px;
}
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}

.searchbox .one-btn-icon {
   font-size: 1.5em
}
</style>

<script>
module.exports = {
components : {
      
   },

   mounted() {
      this.$store.dispatch("price_copy/getjpagroups")
   },

   methods : {
      changeBtnFlagCopyAll(value) {
            var newval = (value === 'Y') ? 'N' : 'Y'
            this.copyall = newval
      },
      search_price() {
         return
      },

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

      one_money (x) {
         return window.one_money(x)
      },

      copy_me (p) {
         this.selectMe(p)
         this.$store.dispatch('price_copy/save_copy')
      }
   },

   computed: {
      copyall : {
         get () {
            return this.$store.state.price_copy.copyall
         },
         set (v) {
            this.$store.commit('price_copy/update_copyall', v)
         }
      },
      query_company : {
         get () {
            return this.$store.state.price_copy.query_company
         },
         set (v) {
            this.$store.commit('price_copy/update_query_company', v)
         }
      },

      search_mou : {
         get () {
            return this.$store.state.price_copy.search_mou
         },
         set (v) {
            this.$store.commit('price_copy/update_search_mou', v)
         }
      },

      companies : {
         get () {
            return this.$store.state.price_copy.companies
         },
         set (v) {
            this.$store.commit('price_copy/update_companies', v)
         }
      },

      mous : {
         get () {
            return this.$store.state.price_copy.mous
         },
         set (v) {
            this.$store.commit('price_copy/update_mous', v)
         }
      },
      jpagroups : {
         get () {
            return this.$store.state.price_copy.jpagroups
         },
         set (v) {
            this.$store.commit('price_copy/update_jpagroups', v)
         }
      },
      selected_jpagroup : {
         get () {
            return this.$store.state.price_copy.selected_jpagroup
         },
         set (v) {
            this.$store.commit('price_copy/update_selected_jpagroup', v)
         }
      },

      selected_company : {
         get () {
            return this.$store.state.price_copy.selected_company
         },
         set (v) {
            this.$store.commit('price_copy/update_selected_company', v)
         }
      },

      selected_mou : {
         get () {
            return this.$store.state.price_copy.selected_mou
         },
         set (v) {
            this.$store.commit('price_copy/update_selected_mou', v)
         }
      },

      query_mou : {
         get () {
            return this.$store.state.price_copy.query_mou
         },
         set (v) {
            this.$store.commit('price_copy/update_query_mou', v)
         }
      },

      isLoading () {
         return false
      },

      is_loading () {
         return false
      },

      dialog_confirm () {
         return this.$store.state.dialog_confirm
      },

        target_disc : {
            get () { return this.$store.state.price_copy.target_disc },
            set (v) { this.$store.commit('price_copy/update_target_disc', v)}
        },

        target_company () {
            return this.$store.state.price.selected_company
        },

        target_mou () {
            return this.$store.state.price.selected_mou
        }
   },
   data() {
      return {

        expand : false
      };
   },

   watch : {
      query_company(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.price.search_status == 1 ) return  
         // console.log("5-val:"+val)
         this.$store.commit("price_copy/update_query_company", val)
         this.thr_search()
      }
   
   }
}
</script>