Add new ByjoveReceiving component
This commit is contained in:
Lance Edgar
parent
09852baa84
commit
36ba991bdc
|
|
@ -5,6 +5,7 @@ import ByjoveFeedback from './feedback'
|
||||||
import ByjoveAutocomplete from './autocomplete'
|
import ByjoveAutocomplete from './autocomplete'
|
||||||
import ByjoveModelIndex from './model-index'
|
import ByjoveModelIndex from './model-index'
|
||||||
import ByjoveModelCrud from './model-crud'
|
import ByjoveModelCrud from './model-crud'
|
||||||
|
import ByjoveReceiving from './receiving'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
ByjoveApp,
|
ByjoveApp,
|
||||||
|
|
@ -14,4 +15,5 @@ export {
|
||||||
ByjoveAutocomplete,
|
ByjoveAutocomplete,
|
||||||
ByjoveModelIndex,
|
ByjoveModelIndex,
|
||||||
ByjoveModelCrud,
|
ByjoveModelCrud,
|
||||||
|
ByjoveReceiving,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
351
src/components/receiving/ByjoveReceiving.vue
Normal file
351
src/components/receiving/ByjoveReceiving.vue
Normal file
|
|
@ -0,0 +1,351 @@
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div v-if="shouldShowQuickReceive">
|
||||||
|
<slot name="quick-receive">
|
||||||
|
<!-- only show quick-receive if we have an identifiable product -->
|
||||||
|
<div v-if="shouldShowQuickReceive" 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) {
|
||||||
|
console.log("row says not to")
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (!this.row.product_uuid) {
|
||||||
|
console.log("row has no product")
|
||||||
|
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>
|
||||||
28
src/components/receiving/index.js
Normal file
28
src/components/receiving/index.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
// Import vue component
|
||||||
|
import ByjoveReceiving from './ByjoveReceiving.vue'
|
||||||
|
|
||||||
|
// Declare install function executed by Vue.use()
|
||||||
|
export function install(Vue) {
|
||||||
|
if (install.installed) return;
|
||||||
|
install.installed = true;
|
||||||
|
Vue.component('ByjoveReceiving', ByjoveReceiving);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create module definition for Vue.use()
|
||||||
|
const plugin = {
|
||||||
|
install,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-install when vue is found (eg. in browser via <script> tag)
|
||||||
|
let GlobalVue = null;
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
GlobalVue = window.Vue;
|
||||||
|
} else if (typeof global !== 'undefined') {
|
||||||
|
GlobalVue = global.Vue;
|
||||||
|
}
|
||||||
|
if (GlobalVue) {
|
||||||
|
GlobalVue.use(plugin);
|
||||||
|
}
|
||||||
|
|
||||||
|
// To allow use as module (npm/webpack/etc.) export component
|
||||||
|
export default ByjoveReceiving
|
||||||
Loading…
Reference in a new issue