360 lines
9.8 KiB
Vue
360 lines
9.8 KiB
Vue
<template>
|
|
<div class="receiving">
|
|
|
|
<nav class="breadcrumb">
|
|
<ul>
|
|
<li>
|
|
<router-link :to="getIndexURL()">Receiving</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link :to="getBatchURL()">{{ row.batch_id_str }}</router-link>
|
|
</li>
|
|
<li>
|
|
{{ row[productKey] }}
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div style="display: flex;">
|
|
<div style="flex-grow: 1;">
|
|
<p class="has-text-weight-bold">
|
|
{{ row.brand_name }}
|
|
</p>
|
|
|
|
<p class="has-text-weight-bold">
|
|
{{ row.description }} {{ row.size }}
|
|
</p>
|
|
|
|
<p v-if="allowCases"
|
|
class="has-text-weight-bold">
|
|
1 CS = {{ row.case_quantity || 1 }} {{ row.unit_uom }}
|
|
</p>
|
|
|
|
<table class="receiving-quantities">
|
|
<tr v-if="row.order_quantities_known">
|
|
<td>ordered</td>
|
|
<td>
|
|
<span v-if="allowCases">
|
|
{{ row.cases_ordered || 0}} /
|
|
</span>
|
|
{{ row.units_ordered || 0}}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="row.order_quantities_known">
|
|
<td>shipped</td>
|
|
<td>
|
|
<span v-if="allowCases">
|
|
{{ row.cases_shipped || 0}} /
|
|
</span>
|
|
{{ row.units_shipped || 0}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>received</td>
|
|
<td>
|
|
<span v-if="allowCases">
|
|
{{ row.cases_received || 0}} /
|
|
</span>
|
|
{{ row.units_received || 0}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>damaged</td>
|
|
<td>
|
|
<span v-if="allowCases">
|
|
{{ row.cases_damaged || 0}} /
|
|
</span>
|
|
{{ row.units_damaged || 0}}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="allowExpired">
|
|
<td>expired</td>
|
|
<td>
|
|
<span v-if="allowCases">
|
|
{{ row.cases_expired || 0}} /
|
|
</span>
|
|
{{ row.units_expired || 0}}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div>
|
|
<img :src="row.image_url" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="row.received_alert"
|
|
class="has-text-danger">
|
|
<br />
|
|
<p>{{ row.received_alert }}</p>
|
|
</div>
|
|
|
|
<div v-if="row.unexpected_alert"
|
|
class="has-text-danger">
|
|
<br />
|
|
<p>{{ row.unexpected_alert }}</p>
|
|
</div>
|
|
|
|
<slot name="warnings" :row="row"></slot>
|
|
|
|
<br />
|
|
|
|
<div v-if="shouldShowQuickReceive">
|
|
<slot name="quick-receive">
|
|
<!-- only show quick-receive if we have an identifiable product -->
|
|
<div class="buttons">
|
|
<b-button v-if="row.quick_receive_all"
|
|
type="is-primary"
|
|
@click="addQuickAmount(row.quick_receive_quantity, row.quick_receive_uom)"
|
|
expanded>
|
|
{{ row.quick_receive_text }}
|
|
</b-button>
|
|
<div v-if="!row.quick_receive_all">
|
|
<div class="buttons"
|
|
v-if="allowCases">
|
|
<b-button type="is-primary"
|
|
@click="addQuickAmount(1, 'CS')"
|
|
expanded>
|
|
Receive 1 CS
|
|
</b-button>
|
|
</div>
|
|
<div class="buttons has-text-centered" style="width: 100%;">
|
|
<b-button type="is-primary"
|
|
@click="addQuickAmount(1, row.unit_uom)">
|
|
1 {{ row.unit_uom }}
|
|
</b-button>
|
|
<b-button type="is-primary"
|
|
@click="addQuickAmount(3, row.unit_uom)">
|
|
3 {{ row.unit_uom }}
|
|
</b-button>
|
|
<b-button type="is-primary"
|
|
@click="addQuickAmount(6, row.unit_uom)">
|
|
6 {{ row.unit_uom }}
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</slot> <!-- quick-receive -->
|
|
|
|
<p class="has-text-centered is-italic">OR</p>
|
|
<br />
|
|
</div>
|
|
|
|
<b-field grouped>
|
|
<b-field class="control">
|
|
<b-input v-model="inputQuantity"
|
|
type="number"
|
|
custom-class="receiving-quantity-input">
|
|
</b-input>
|
|
</b-field>
|
|
<b-field class="control">
|
|
<b-radio-button v-model="inputUOM"
|
|
native-value="CS"
|
|
:disabled="!allowCases">
|
|
<span>CS</span>
|
|
</b-radio-button>
|
|
<b-radio-button v-model="inputUOM"
|
|
:native-value="row.unit_uom">
|
|
<span>{{ row.unit_uom }}</span>
|
|
</b-radio-button>
|
|
</b-field>
|
|
</b-field>
|
|
|
|
<b-field>
|
|
<b-radio-button v-model="inputType"
|
|
native-value="received">
|
|
<span>RCVD</span>
|
|
</b-radio-button>
|
|
<b-radio-button v-model="inputType"
|
|
native-value="damaged">
|
|
<span>DMGD</span>
|
|
</b-radio-button>
|
|
<b-radio-button v-model="inputType"
|
|
native-value="expired"
|
|
:disabled="!allowExpired">
|
|
<span>EXPD</span>
|
|
</b-radio-button>
|
|
<b-radio-button v-model="inputType"
|
|
native-value="mispick"
|
|
disabled>
|
|
<span>MSPK</span>
|
|
</b-radio-button>
|
|
</b-field>
|
|
|
|
<b-field v-if="inputType == 'expired'"
|
|
label="Expiration Date">
|
|
<b-input v-model="expirationDate"
|
|
type="date">
|
|
</b-input>
|
|
</b-field>
|
|
|
|
<div class="buttons">
|
|
<b-button type="is-primary"
|
|
@click="addAmount()"
|
|
:disabled="addAmountDisabled">
|
|
Add Amount
|
|
</b-button>
|
|
<b-button type="is-warning"
|
|
@click="subtractAmount()">
|
|
Subtract Amount
|
|
</b-button>
|
|
</div>
|
|
|
|
<p class="has-text-centered is-italic">OR</p>
|
|
<br />
|
|
|
|
<div class="buttons">
|
|
<b-button type="is-primary"
|
|
tag="router-link"
|
|
:to="`/receiving/rows/${row.uuid}`">
|
|
View this Row
|
|
</b-button>
|
|
<b-button type="is-primary"
|
|
disabled>
|
|
Edit this Row
|
|
</b-button>
|
|
<b-button type="is-danger"
|
|
disabled>
|
|
Delete this Row
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ByjoveReceiving',
|
|
props: {
|
|
productKey: {
|
|
type: String,
|
|
default: 'upc',
|
|
},
|
|
allowCases: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
allowExpired: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
row: {},
|
|
inputQuantity: 1,
|
|
inputUOM: null,
|
|
inputType: 'received',
|
|
expirationDate: null,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
addAmountDisabled: function() {
|
|
if (this.inputType == 'expired' && !this.expirationDate) {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
shouldShowQuickReceive() {
|
|
if (!this.row.quick_receive) {
|
|
return false
|
|
}
|
|
if (!this.row.product_uuid) {
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.fetch(this.$route.params.uuid)
|
|
},
|
|
|
|
methods: {
|
|
|
|
getIndexURL() {
|
|
return '/receiving/'
|
|
},
|
|
|
|
getBatchURL() {
|
|
return `/receiving/${this.row.batch_uuid}`
|
|
},
|
|
|
|
fetch(uuid) {
|
|
this.$http.get(`/api/receiving-batch-row/${uuid}`).then(response => {
|
|
this.row = response.data.data
|
|
this.inputUOM = this.row.unit_uom
|
|
}, response => {
|
|
if (response.status == 403) { // forbidden; redirect to model index
|
|
this.$buefy.toast.open({
|
|
message: "You do not have permission to access that page.",
|
|
type: 'is-danger',
|
|
})
|
|
this.$router.push(this.getIndexURL())
|
|
} else {
|
|
this.$buefy.toast.open({
|
|
message: "Failed to fetch page data!",
|
|
type: 'is-danger',
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
addAmount() {
|
|
let url = `/api/receiving-batch-row/${this.row.uuid}/receive`
|
|
let params = {
|
|
row: this.row.uuid,
|
|
mode: this.inputType,
|
|
cases: null,
|
|
units: null,
|
|
expiration_date: this.expirationDate,
|
|
quick_receive: false,
|
|
}
|
|
|
|
if (this.inputUOM == 'CS') {
|
|
params.cases = this.inputQuantity
|
|
} else {
|
|
params.units = this.inputQuantity
|
|
}
|
|
|
|
this.$http.post(url, params).then(response => {
|
|
if (response.data.data) {
|
|
this.$router.push(`/receiving/${this.row.batch_uuid}`)
|
|
} else {
|
|
this.$buefy.toast.open({
|
|
message: response.data.error || "Failed to post receiving!",
|
|
type: 'is-danger',
|
|
})
|
|
}
|
|
}, response => {
|
|
this.$buefy.toast.open({
|
|
message: "Failed to post receiving!",
|
|
type: 'is-danger',
|
|
})
|
|
})
|
|
},
|
|
|
|
addQuickAmount(quantity, uom) {
|
|
this.inputQuantity = quantity
|
|
this.inputUOM = uom
|
|
this.addAmount()
|
|
},
|
|
|
|
subtractAmount() {
|
|
this.inputQuantity = -this.inputQuantity
|
|
this.addAmount()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
table.receiving-quantities td {
|
|
padding: 0px 10px 0px 0px;
|
|
}
|
|
.input.receiving-quantity-input {
|
|
width: 10rem;
|
|
}
|
|
</style>
|