170 lines
4.5 KiB
Vue
170 lines
4.5 KiB
Vue
<template>
|
|
<v-layout column>
|
|
<v-layout align-center row>
|
|
<v-flex xs12>
|
|
<v-card tile flat color="teal lighten-4" class="pa-2">
|
|
<h5 class="subtitle-1 font-weight-bold">REFERENCE & TIPE</h5>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row wrap class="pa-2">
|
|
<v-flex xs12 sm8 class="pr-2">
|
|
<v-autocomplete
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
clearable
|
|
return-object
|
|
:items="xreference"
|
|
v-model="selected_reference"
|
|
:search-input.sync="search_item_reference"
|
|
item-text="M_ReferenceName"
|
|
item-value="M_ReferenceID"
|
|
no-filter
|
|
label="Reference"
|
|
no-data-text="Pilih Reference"
|
|
>
|
|
<template #item="{ item }">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>{{ item.M_ReferenceName }}</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
</v-autocomplete>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm4>
|
|
<v-autocomplete
|
|
multiple
|
|
chips
|
|
deletable-chips
|
|
clearable
|
|
return-object
|
|
:items="xordertype"
|
|
v-model="selected_ordertype_multi"
|
|
:search-input.sync="search_item_ordertype"
|
|
item-text="M_OrderTypeName"
|
|
item-value="M_OrderTypeID"
|
|
no-filter
|
|
label="Order Type"
|
|
no-data-text="Pilih Order Type"
|
|
@click:clear="clearOrderType"
|
|
@focus="loadAllOrderType"
|
|
@change="limitOrderType"
|
|
>
|
|
<template #item="{ item }">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>{{ item.M_OrderTypeName }}</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</template>
|
|
</v-autocomplete>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
search_item_reference: "",
|
|
search_item_ordertype: "",
|
|
isClearingOrderType: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
xreference() {
|
|
return this.$store.state.reference.references || []
|
|
},
|
|
|
|
xordertype() {
|
|
return this.$store.state.reference.ordertypes || []
|
|
},
|
|
|
|
selected_reference: {
|
|
get() {
|
|
const v = this.$store.state.reference.selected_reference
|
|
return Array.isArray(v) ? v : []
|
|
},
|
|
set(val) {
|
|
this.$store.commit(
|
|
"reference/update_selected_reference",
|
|
Array.isArray(val) ? val : []
|
|
)
|
|
}
|
|
},
|
|
|
|
selected_ordertype_multi: {
|
|
get() {
|
|
const v = this.$store.state.reference.selected_ordertype
|
|
return v ? [v] : []
|
|
},
|
|
set(val) {
|
|
if (Array.isArray(val) && val.length > 0) {
|
|
this.$store.commit(
|
|
"reference/update_selected_ordertype",
|
|
val[val.length - 1]
|
|
)
|
|
} else {
|
|
this.$store.commit("reference/update_selected_ordertype", null)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
thr_search_reference: _.debounce(function () {
|
|
this.$store.dispatch("reference/searchreference", this.search_item_reference)
|
|
}, 500),
|
|
|
|
thr_search_ordertype: _.debounce(function () {
|
|
this.$store.dispatch("reference/searchordertype", this.search_item_ordertype)
|
|
}, 500),
|
|
|
|
clearOrderType() {
|
|
this.isClearingOrderType = true
|
|
this.$store.commit("reference/update_selected_ordertype", null)
|
|
this.search_item_ordertype = ""
|
|
|
|
this.$nextTick(() => {
|
|
this.isClearingOrderType = false
|
|
})
|
|
},
|
|
|
|
loadAllOrderType() {
|
|
if (!this.search_item_ordertype) {
|
|
this.$store.dispatch("reference/searchordertype", "")
|
|
}
|
|
},
|
|
|
|
limitOrderType(val) {
|
|
if (Array.isArray(val) && val.length > 1) {
|
|
this.$store.commit(
|
|
"reference/update_selected_ordertype",
|
|
val[val.length - 1]
|
|
)
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
search_item_reference(val) {
|
|
if (val === null || val === undefined) return
|
|
this.thr_search_reference()
|
|
},
|
|
|
|
search_item_ordertype(val) {
|
|
if (this.isClearingOrderType) return
|
|
if (val === null || val === undefined) return
|
|
if (typeof val !== "string") return
|
|
this.thr_search_ordertype()
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.$store.dispatch("reference/searchreference", "")
|
|
this.$store.dispatch("reference/searchordertype", "")
|
|
}
|
|
}
|
|
</script> |