143 lines
5.5 KiB
JavaScript
143 lines
5.5 KiB
JavaScript
( async function(){
|
|
|
|
Vue.prototype.$types = window.ctp.types;
|
|
Vue.prototype.$accounts = window.ctp.accounts;
|
|
|
|
Vue.component('item-rows', {
|
|
props: ['index', 'item'],
|
|
methods : {
|
|
populateCuttingAccount : function (){
|
|
return this.$accounts.find(account => account.id === this.item.accountId).title;
|
|
},
|
|
},
|
|
template: `
|
|
<tr>
|
|
<td width="400">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].jobCardId'" v-bind:value="item.jobCardId" >
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].jobCardItemId'" v-bind:value="item.id" >
|
|
<item-search
|
|
v-bind:id-field-name="'items[' + index + '].itemId'"
|
|
v-bind:id="item.itemId"
|
|
v-bind:type="item.type"
|
|
v-bind:show-label="false"
|
|
v-bind:disabled="true"></item-search>
|
|
</td>
|
|
<td width="400">
|
|
<span class="form-control" readonly >{{item.sku}}</span>
|
|
</td>
|
|
<td width="500">
|
|
<cut-piece v-for="(piece, cIndex) in item.cutPieces"
|
|
v-bind:index="cIndex"
|
|
v-bind:pIndex="index"
|
|
v-bind:piece="piece"
|
|
v-bind:key="index + '-' + cIndex">
|
|
</cut-piece>
|
|
</td>
|
|
<td width="200">
|
|
<span class="form-control" readonly>{{item.expectedProduction}}</span>
|
|
</td>
|
|
<td width="200">
|
|
<input class="form-control" min="0" type="number" v-bind:name="'items[' + index + '].actualProduction'" required>
|
|
</td>
|
|
<td>
|
|
{{ populateCuttingAccount() }}
|
|
</td>
|
|
</tr>
|
|
`
|
|
});
|
|
|
|
|
|
Vue.component ('cut-piece', {
|
|
props: ['index', 'piece', 'pIndex'],
|
|
methods: {
|
|
removePiece: function (e) {
|
|
e.preventDefault();
|
|
this.$emit('piece-remove', this.index)
|
|
}
|
|
},
|
|
template: `
|
|
<div class="row mt-1">
|
|
<input hidden="hidden" v-bind:name="'items[' + pIndex + '].pieces[' + index + '].id'" v-bind:value="piece.id">
|
|
<input hidden="hidden" v-bind:name="'items[' + pIndex + '].pieces[' + index + '].jobCardItemId'" v-bind:value="piece.jobCardItemId">
|
|
<input hidden="hidden" v-bind:name="'items[' + pIndex + '].pieces[' + index + '].type'" v-bind:value="piece.type">
|
|
<div class="col-md-5">
|
|
<select style="width: 150px;" class="form-control" v-bind:name="'pieces[' + index +'].type'" v-model="piece.type" disabled>
|
|
<option value="">Please Select</option>
|
|
<option v-for="(type,index) in $types"
|
|
v-bind:selected="type.type === piece.type"
|
|
v-bind:value="type.type">{{type.type}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6" style="padding-left: 40px;">
|
|
<input class="form-control" type="number" v-bind:name="'items[' + pIndex + '].pieces[' + index +'].quantity'" v-model="piece.quantity" min="0" required/>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|
|
|
|
Vue.component('job-card-details',{
|
|
props:[ 'jobCard' ],
|
|
methods : {
|
|
|
|
},
|
|
template : `
|
|
<table class="table table-bordered bg-white w-100">
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Item Sku/Title</th>
|
|
<th>Cut Pieces</th>
|
|
<th>Expected Production</th>
|
|
<th>Actual Production</th>
|
|
<th style="width: 312px" >Account</th>
|
|
</tr>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<item-rows v-for="(item,index) in jobCard.items"
|
|
v-bind:key="index"
|
|
v-bind:index="index"
|
|
v-bind:item="item">
|
|
</item-rows>
|
|
</tbody>
|
|
</table>
|
|
`
|
|
});
|
|
|
|
|
|
let app = new Vue({
|
|
el : '#receiveInvApp',
|
|
data :{
|
|
jobCard : {}
|
|
},
|
|
computed: {
|
|
getStatus: function() {
|
|
return `badge-${this.jobCard.status}`;
|
|
},
|
|
getInvStatus: function() {
|
|
return `badge-${this.jobCard.inventoryStatus}`;
|
|
}
|
|
},
|
|
methods : {
|
|
onCardSelect : function ( id, card ) {
|
|
$.ajax({
|
|
url: `/ctp/rest/job-cards/find/${id}`,
|
|
method: 'GET',
|
|
contentType: 'application/json',
|
|
dataType: 'json',
|
|
success: ( data ) => {
|
|
this.jobCard = data;
|
|
},
|
|
error : function ( err ){
|
|
alert( err );
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted : function () {
|
|
|
|
}
|
|
})
|
|
|
|
|
|
})(jQuery); |