271 lines
11 KiB
Vue
271 lines
11 KiB
Vue
<template>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 class="left" fill-height pa-1>
|
|
<filter-pr></filter-pr>
|
|
<v-card class="mt-2">
|
|
<v-data-table
|
|
class="elevation-1"
|
|
hide-actions xs12
|
|
:headers="headers"
|
|
:loading="false"
|
|
:items="list_pr.records"
|
|
>
|
|
<template v-slot:items="props">
|
|
<tr>
|
|
<td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDate }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.PurchaseRequestNumber }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.S_RegionalName }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
|
|
<td class="text-xs-center pa-2">{{ `${props.item.PurchaseRequestDetailQty} ${props.item.UnitRequest || ''}` }}</td>
|
|
<td class="text-xs-center pa-2">
|
|
<template v-if="Array.isArray(props.item.StockQtyArray)">
|
|
<div v-for="(stock, index) in props.item.StockQtyArray" :key="index">
|
|
<span class="grey lighten-3 rounded pa-1 caption">
|
|
{{ `${stock.QtyTotal} ${stock.ItemUnitName || ''}` }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
0 (No Data)
|
|
</template>
|
|
</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailIsCito }}</td>
|
|
<td class="text-xs-center pa-2">{{ props.item.PurchaseRequestDetailStatus }}</td>
|
|
<td class="text-xs-center pa-2">
|
|
<v-btn
|
|
small round
|
|
color="primary"
|
|
:outline="isInList(props.item.PurchaseRequestFlagStatus, 'TF')"
|
|
:disabled="props.item.M_BranchCode == ''"
|
|
@click="changeFlag(props.item, 'TF')"
|
|
>TF</v-btn>
|
|
<v-btn
|
|
small round
|
|
color="primary"
|
|
:outline="isInList(props.item.PurchaseRequestFlagStatus, 'PO')"
|
|
@click="changeFlag(props.item, 'PO')"
|
|
>PO</v-btn>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
<div class="text-xs-center pt-2">
|
|
<v-pagination v-model="pagination" :length="length_page" :total-visible="7"></v-pagination>
|
|
</div>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.stock-item {
|
|
font-size: 0.75rem;
|
|
line-height: 1.2;
|
|
margin: 2px 0;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
components: {
|
|
"filter-pr": httpVueLoader("./filter-pr.vue")
|
|
},
|
|
mounted() {
|
|
let params = {
|
|
currpage: this.pagination,
|
|
startdate: this.startdate,
|
|
enddate: this.enddate,
|
|
regional: this.selected_regional.S_RegionalID,
|
|
branch: !this.selected_branch ? "" : this.selected_branch.M_BranchCode,
|
|
}
|
|
this.$store.dispatch("listingpr/getlistingpurchase", params)
|
|
this.$store.dispatch("listingpr/getbranch", { regionalID: this.selected_regional.S_RegionalID })
|
|
},
|
|
data() {
|
|
return {
|
|
headers: [
|
|
{
|
|
text: "Tanggal Request",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "8%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Nomor Request",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "8%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Regional",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "10%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Cabang",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "10%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Item",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "25%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Request",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "6%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Stok Gdg Reg",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "6%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Cito",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "4%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Status",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "8%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "Flag",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "no",
|
|
width: "15%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
list_pr() {
|
|
return this.$store.state.listingpr.list_pr
|
|
},
|
|
length_page() {
|
|
let total = this.list_pr.total;
|
|
if (total == undefined || total == 0) {
|
|
return 1
|
|
}
|
|
|
|
return Math.ceil(total/ 10)
|
|
},
|
|
selected_regional() {
|
|
return this.$store.state.listingpr.selected_regional
|
|
},
|
|
selected_branch() {
|
|
return this.$store.state.listingpr.selected_branch
|
|
},
|
|
startdate() {
|
|
return this.$store.state.listingpr.startdate
|
|
},
|
|
enddate() {
|
|
return this.$store.state.listingpr.enddate
|
|
},
|
|
pagination: {
|
|
get() {
|
|
return this.$store.state.listingpr.pagination
|
|
},
|
|
set(data) {
|
|
let params = {
|
|
currpage: data,
|
|
startdate: this.startdate,
|
|
enddate: this.enddate,
|
|
regional: this.selected_regional.S_RegionalID,
|
|
branch: !this.selected_branch ? "" : this.selected_branch.M_BranchCode,
|
|
}
|
|
|
|
this.$store.commit("listingpr/update_pagination", data)
|
|
this.$store.dispatch("listingpr/getlistingpurchase", params)
|
|
}
|
|
},
|
|
detaildialog: {
|
|
get() {
|
|
return this.$store.state.listingpr.detaildialog
|
|
},
|
|
set(data) {
|
|
this.$store.commit("listingpr/update_detaildialog", data)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
isInList(status, val) {
|
|
if (status == "") {
|
|
return true
|
|
}
|
|
|
|
let li = status.split(",")
|
|
if (li.includes(val)) {
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
async changeFlag(item, status) {
|
|
let flag = ""
|
|
let li = item.PurchaseRequestFlagStatus.split(",")
|
|
if (li.includes(status)) {
|
|
// const updated = li.filter(item => item !== status)
|
|
// flag = updated.join(",")
|
|
// console.log("already on read: ", status)
|
|
return
|
|
} else {
|
|
li.push(status)
|
|
flag = li.join(",")
|
|
}
|
|
|
|
let params = {
|
|
reqnumber: item.PurchaseRequestNumber,
|
|
requestflagid: item.PurchaseRequestFlagID,
|
|
reqdetailid: item.PurchaseRequestDetailID,
|
|
regionalid: item.S_RegionalID,
|
|
branchcode: item.M_BranchCode,
|
|
qty: item.PurchaseRequestDetailQty,
|
|
UnitIDRequest: item.UnitIDRequest,
|
|
// stock: item.StockQty,
|
|
stock: item.StockQtyArray,
|
|
status: flag
|
|
}
|
|
if (item.PurchaseRequestFlagID == "new") {
|
|
// console.log("new : ", params)
|
|
this.$store.dispatch("listingpr/addflagstatus", params)
|
|
} else {
|
|
// console.log("edit : ", params)
|
|
this.$store.dispatch("listingpr/editflagstatus", params)
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
}
|
|
</script> |