FE_CPONE/test/vuex/one-md-kapus/components/oneMdSysKaPus.vue

<template>
  <v-layout row>
    <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
      {{msgsnackbar}}
      <v-btn flat @click="updateAlert_success(false)">
        Tutup
      </v-btn>
    </v-snackbar>
    <v-flex xs6 mr-1>
      <v-card>
        <v-card-title class="headline grey darken-1 pt-2 pb-2" primary-title style="color:white">
          <h4>KaPus</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 pa-2 d-flex>
              <v-autocomplete label="Kelompok Pelanggan" v-model="xcompany" :items="xcompanies" :search-input.sync="search_company" auto-select-first
                no-filter item-text="M_CompanyName" return-object :loading="isLoading" 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-content>
                </template>
              </v-autocomplete>
            </v-flex>
            <v-flex xs12 pa-2 d-flex>
              <v-select item-text="M_PaymentTypeName" return-object :items="xpaymenttypes" v-model="xpaymenttype" label="Tipe Pembayaran"></v-select>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 pa-2 d-flex>
              <v-text-field v-model="xkapuspct" label="Kapus (%)"></v-text-field>
            </v-flex>
            <v-flex xs12 pa-2 d-flex>
              <v-checkbox v-model="iscontrol" label="Kontrol?"></v-checkbox>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="doSave()" color="primary">SIMPAN</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
  .scroll-container {
    scroll-padding: 50px 0 0 50px;
  }

  ::-webkit-scrollbar {
    width: 7px;
  }

  /* this targets the default scrollbar (compulsory) */

  ::-webkit-scrollbar-track {
    background-color: #73baf3;
  }

  /* the new scrollbar will have a flat appearance with the set background color */

  ::-webkit-scrollbar-thumb {
    background-color: #2196f3;
  }

  /* this will style the thumb, ignoring the track */

  ::-webkit-scrollbar-button {
    background-color: #0079da;
  }

  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

  ::-webkit-scrollbar-corner {
    background-color: black;
  }

  /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      search_company: ''
    }),
    mounted() {
      this.$store.dispatch("form/getdata")
      this.$store.dispatch("form/getpaymenttype")
    },
    computed: {
      isLoading() {
        return this.$store.state.form.search_status == 1
      },
      xcompanies() {
        return this.$store.state.form.companies
      },
      xkapuspct: {
        get() {
          return this.$store.state.form.kapuspct
        },
        set(val) {
          this.$store.commit("form/update_kapuspct", val)
        }
      },
      iscontrol: {
        get() {
          return this.$store.state.form.iscontrol
        },
        set(val) {
          this.$store.commit("form/update_iscontrol", val)
        }
      },
      isuse: {
        get() {
          return this.$store.state.form.isuse
        },
        set(val) {
          this.$store.commit("form/update_isuse", val)
        }
      },
      xcompany: {
        get() {
          return this.$store.state.form.company
        },
        set(val) {
          this.$store.commit("form/update_company", val)
          this.$store.dispatch("form/getmou", this.$store.state.form.company)
        }
      },
      xmous() {
        return this.$store.state.form.mous
      },
      xmou: {
        get() {
          return this.$store.state.form.mou
        },
        set(val) {
          this.$store.commit("form/update_mou", val)
        }
      },
      xpaymenttypes() {
        return this.$store.state.form.paymenttypes
      },
      xpaymenttype: {
        get() {
          return this.$store.state.form.paymenttype
        },
        set(val) {
          this.$store.commit("form/update_paymenttype", val)
        }
      },
      snackbar: {
        get() {
          return this.$store.state.form.alert_success
        },
        set(val) {
          this.$store.commit("form/update_alert_success", val)
        }
      },
      msgsnackbar() {
        return this.$store.state.form.msg_success
      },
    },
    methods: {
      doSave() {
        var prm = {
          sysKaPusID:this.$store.state.form.xid,
          sysKaPusM_CompanyID: this.xcompany.M_CompanyID,
          sysKaPusM_PaymentTypeID: this.xpaymenttype.M_PaymentTypeID,
          sysKaPusPct: this.xkapuspct,
          sysKaPusControl: this.iscontrol === true ? "Y" : "N",
          sysKaPusUse: this.isuse === true ? "Y" : "N"
        }
        this.$store.dispatch("form/save", prm)
      },
      thr_search_company: _.debounce(function () {
        this.$store.dispatch("form/searchcompany", this.search_company)
      }, 2000),
    },
    watch: {
      search_company(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.form.update_autocomplete_status == 1) return
        this.thr_search_company()
      }
    }
  }
</script>