152 lines
5.9 KiB
Vue
152 lines
5.9 KiB
Vue
<template>
|
|
<div>
|
|
<v-dialog v-model="dialog_detailform" persistent width="70vw">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
DAFTAR PERMINTAAN ITEM
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-data-table
|
|
class="elevation-1 mb-2" hide-actions xs12
|
|
v-model="temp_item" item-key="PurchaseRequestFlagID"
|
|
:headers="headers" :items="list_detailform.records"
|
|
>
|
|
<template v-slot:items="props">
|
|
<tr>
|
|
<td class="text-xs-center pa-2">{{ props.item.PurchaseRequestNumber }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.ItemUnitName }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.StockGudang }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.PurchaseRequestFlagQty }}</td>
|
|
<td class="text-xs-center pa-2">
|
|
<v-checkbox
|
|
hide-details primary class="d-inline-flex"
|
|
v-model="props.selected"
|
|
></v-checkbox>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
|
|
<div class="text-xs-center mt-2">
|
|
<v-pagination v-model="list_detailform_page" :length="detail_length" :total-visible="5"></v-pagination>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="error" flat @click="batalPick()">BATAL</v-btn>
|
|
<v-btn color="primary" @click="simpanPick()">TAMBAH</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.flex-centered {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
temp_item: [],
|
|
headers: [
|
|
{
|
|
text: "NO REQUEST", align: "center", sortable: false,
|
|
value: "no", width: "20%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "ITEM", align: "center", sortable: false,
|
|
value: "no", width: "30%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "UNIT", align: "center", sortable: false,
|
|
value: "no", width: "10%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "STOK GUDANG", align: "center", sortable: false,
|
|
value: "no", width: "15%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "JUMLAH", align: "center", sortable: false,
|
|
value: "no", width: "15%", class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "AKSI", align: "center", sortable: false,
|
|
value: "no", width: "10%", class: "blue lighten-3 white--text",
|
|
},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
dialog_detailform: {
|
|
get() {
|
|
return this.$store.state.np_form.dialog_detailform
|
|
},
|
|
set(val) {
|
|
this.$store.commit("np_form/update_dialog_detailform", val)
|
|
}
|
|
},
|
|
list_detailform: {
|
|
get() {
|
|
return this.$store.state.np_form.list_detailform
|
|
},
|
|
set(val) {
|
|
this.$store.commit("np_form/update_list_detailform", val)
|
|
}
|
|
},
|
|
list_detailform_page: {
|
|
get() {
|
|
return this.$store.state.np_form.list_detailform_page
|
|
},
|
|
set(val) {
|
|
this.$store.commit("np_form/update_list_detailform_page", val)
|
|
this.$store.dispatch("np_form/getListItemDetail")
|
|
}
|
|
},
|
|
form_detail: {
|
|
get() {
|
|
return this.$store.state.np_form.form_detail
|
|
},
|
|
set(val) {
|
|
this.$store.commit("np_form/update_form_detail", val)
|
|
}
|
|
},
|
|
detail_length() {
|
|
const total = this.list_detailform.total
|
|
if (total == undefined || total == 0) {
|
|
return 1
|
|
}
|
|
return Math.ceil(total/5)
|
|
}
|
|
},
|
|
methods: {
|
|
batalPick() {
|
|
this.temp_item = []
|
|
this.dialog_detailform = false
|
|
},
|
|
simpanPick() {
|
|
const current_detail = this.form_detail
|
|
const new_detail = this.temp_item
|
|
|
|
new_detail.forEach(element => {
|
|
element['PurchaseRequestFlagQtyRest'] = 0;
|
|
element['ItemRequest'] = [];
|
|
});
|
|
|
|
const merge = current_detail.concat(new_detail)
|
|
this.temp_item = []
|
|
this.form_detail = merge
|
|
this.dialog_detailform = false
|
|
}
|
|
},
|
|
}
|
|
</script> |