126 lines
4.5 KiB
JavaScript
126 lines
4.5 KiB
JavaScript
( async function(){
|
|
|
|
Vue.prototype.$types = window.ctp.types;
|
|
|
|
Vue.component('item-rows', {
|
|
props: ['index', 'item'],
|
|
template: `
|
|
<tr>
|
|
<td width="400">
|
|
<input hidden="hidden" v-bind:value="item.id">
|
|
<input hidden="hidden" v-bind:value="item.sku">
|
|
<item-search
|
|
v-bind:id-field-name="'items[' + index + '].itemId'"
|
|
v-bind:id="item.itemId"
|
|
v-bind:title="item.title"
|
|
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.expectedProductionQuantity}}</span>
|
|
</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 + '].cutPieces[' + index +'].id'" v-bind:value="piece.id">
|
|
<input hidden="hidden" v-bind:name="'items[' + pIndex + '].cutPieces[' + index +'].jobCardItemId'" v-bind:value="piece.jobCardItemId">
|
|
<div class="col-md-5">
|
|
<select class="form-control" v-bind:name="'items[' + pIndex + '].cutPieces[' + index +'].type'" v-model="piece.type" disabled>
|
|
<option value="">Please Select</option>
|
|
<option v-for="(type,index) in $types"
|
|
v-bind:selected="type.title === piece.type"
|
|
v-bind:value="type.title">{{type.title}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<span class="form-control" readonly="">{{piece.quantity}}</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
});
|
|
|
|
Vue.component('job-card-details',{
|
|
props:[ 'jobCard' ],
|
|
template : `
|
|
<table class="table table-bordered bg-white col-sm-8">
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Item Sku/Title</th>
|
|
<th>Cut Pieces</th>
|
|
<th>Expected Production</th>
|
|
</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); |