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 ByjoveModelIndex from './model-index'
|
||||
import ByjoveModelCrud from './model-crud'
|
||||
import ByjoveReceiving from './receiving'
|
||||
|
||||
export {
|
||||
ByjoveApp,
|
||||
|
|
@ -14,4 +15,5 @@ export {
|
|||
ByjoveAutocomplete,
|
||||
ByjoveModelIndex,
|
||||
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