261 lines
7.7 KiB
Vue
261 lines
7.7 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialog" persistent max-width="600px">
|
|
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="headline" v-show="!state_edit">Tambah Data Harga Rujukan</span>
|
|
<span class="headline" v-show="state_edit">Ubah Data Harga Rujukan</span>
|
|
</v-card-title>
|
|
<v-card-text class="pt-0">
|
|
<v-container grid-list-md pa-0>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 pr-3>
|
|
<v-autocomplete
|
|
v-show="!state_edit"
|
|
label="Nama Test"
|
|
v-model="selected_px"
|
|
:items="pxs"
|
|
:search-input.sync="query_px"
|
|
|
|
auto-select-first
|
|
no-filter
|
|
return-object
|
|
clearable
|
|
item-text="T_TestName"
|
|
:loading="is_loading"
|
|
no-data-text="Pilih Test"
|
|
|
|
ref="ref_px"
|
|
>
|
|
<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="item.T_TestCode"></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
|
|
</v-autocomplete>
|
|
|
|
<v-text-field v-show="state_edit" label="Nama Test" readonly v-model="selected_px.T_TestName"></v-text-field>
|
|
</v-flex>
|
|
<!-- <v-flex xs6> </v-flex> -->
|
|
<v-flex xs12 sm12 md12>
|
|
<v-text-field v-model="new_price_amount" solo label="" hide-details required reverse suffix="Harga"></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pr-3>
|
|
<one-date-picker
|
|
label="Start Date"
|
|
:date="init_start_date"
|
|
@change="startDateChange"
|
|
v-if="refresh_date"
|
|
></one-date-picker>
|
|
</v-flex>
|
|
|
|
<v-flex xs6 pl-3>
|
|
<one-date-picker
|
|
label="End Date"
|
|
:date="init_end_date"
|
|
@change="endDateChange"
|
|
v-if="refresh_date"
|
|
></one-date-picker>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm12 md12 pt-2 pb-2><v-divider></v-divider></v-flex>
|
|
|
|
</v-layout>
|
|
</v-container>
|
|
<small>*indicates required field</small>
|
|
</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" :dark="btn_save_enabled" @click="save_price" :disabled="!btn_save_enabled">Simpan</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.v-input__append-outer {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<style>
|
|
.btn-outer, .btn-outer-2 {
|
|
margin-top: -6px;
|
|
/* border-radius: 5% !important; */
|
|
}
|
|
.btn-outer-2 {
|
|
margin-top: -10px;
|
|
margin-right: -5px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
components : {
|
|
'one-date-picker': httpVueLoader('./oneDatePicker.vue')
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
// new_price_amount: this.$store.state.price.new_price.amount,
|
|
// new_price_disc: this.$store.state.price.new_price.disc,
|
|
// new_price_discrp: this.$store.state.price.new_price.discrp
|
|
}
|
|
|
|
},
|
|
|
|
computed : {
|
|
state_edit () {
|
|
return this.$store.state.priceref.edit_price
|
|
},
|
|
|
|
dialog : {
|
|
get () {
|
|
return this.$store.state.priceref.dialog_px_new
|
|
},
|
|
set (v) {
|
|
this.$store.commit('priceref/update_dialog_px_new', v)
|
|
}
|
|
},
|
|
|
|
pxs () {
|
|
return this.$store.state.priceref.pxs
|
|
},
|
|
|
|
selected_px : {
|
|
get () {
|
|
return this.$store.state.priceref.selected_px
|
|
},
|
|
set (v) {
|
|
this.$store.commit('priceref/update_selected_px', v)
|
|
}
|
|
},
|
|
|
|
query_px : {
|
|
get () {
|
|
return this.$store.state.priceref.query_px
|
|
},
|
|
set (v) {
|
|
this.$store.commit('priceref/update_query_px', v)
|
|
}
|
|
},
|
|
|
|
new_price : {
|
|
get () {
|
|
return this.$store.state.priceref.new_price
|
|
},
|
|
set (v) {
|
|
|
|
this.$store.commit('priceref/update_new_price', v)
|
|
}
|
|
},
|
|
|
|
new_price_amount : {
|
|
get () {
|
|
return this.$store.state.priceref.new_price.amount
|
|
},
|
|
set (v) {
|
|
let x = this.$store.state.priceref.new_price
|
|
x.amount = v
|
|
this.$store.commit('priceref/update_new_price', x)
|
|
}
|
|
},
|
|
|
|
is_loading () {
|
|
return false
|
|
},
|
|
|
|
btn_save_enabled () {
|
|
if (!this.$store.state.priceref.selected_px.T_TestID)
|
|
return false
|
|
|
|
return true
|
|
},
|
|
|
|
init_start_date () {
|
|
if (this.$store.state.priceref.edit_price)
|
|
return this.$store.state.priceref.selected_price.T_PriceRefStartDate
|
|
else
|
|
return ''
|
|
},
|
|
|
|
init_end_date () {
|
|
if (this.$store.state.priceref.edit_price)
|
|
return this.$store.state.priceref.selected_price.T_PriceRefEndDate
|
|
else
|
|
return null
|
|
},
|
|
|
|
refresh_date : {
|
|
get () {
|
|
return this.$store.state.priceref.refresh_date
|
|
},
|
|
set (v) {
|
|
this.$store.commit('priceref/update_refresh_date', v)
|
|
}
|
|
}
|
|
},
|
|
|
|
methods : {
|
|
thr_search: _.debounce( function () {
|
|
this.$store.dispatch("priceref/search_px")
|
|
}, 700),
|
|
|
|
save_price () {
|
|
let x = this.state_edit
|
|
if (x == true)
|
|
this.$store.dispatch('priceref/save_px', this.$store.state.priceref.selected_price.T_PriceRefID)
|
|
else
|
|
this.$store.dispatch('priceref/save_px')
|
|
},
|
|
|
|
startDateChange (prm) {
|
|
let x = this.$store.state.priceref.new_price
|
|
x.start_date = prm.new_date
|
|
this.$store.commit('priceref/update_new_price', x)
|
|
},
|
|
|
|
endDateChange (prm) {
|
|
let x = this.$store.state.priceref.new_price
|
|
x.end_date = prm.new_date
|
|
this.$store.commit('priceref/update_new_price', x)
|
|
}
|
|
},
|
|
|
|
watch : {
|
|
query_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.priceref.search_status == 1 ) return
|
|
console.log("5-val:"+val)
|
|
this.$store.commit("priceref/update_query_px", val)
|
|
this.thr_search()
|
|
|
|
},
|
|
|
|
others (v, o) {
|
|
console.log(v)
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$store.dispatch('priceref/search_addon')
|
|
}
|
|
}
|
|
</script> |