219 lines
8.5 KiB
JavaScript
219 lines
8.5 KiB
JavaScript
(async function () {
|
|
|
|
|
|
Vue.prototype.$types = window.ctp.types;
|
|
|
|
Vue.component('item-table', {
|
|
props: ['items'],
|
|
methods: {
|
|
removeItem: function (index) {
|
|
if (confirm('Do want to delete Item?')) {
|
|
if (this.items[index].id === 0) {
|
|
this.items.splice(index, 1);
|
|
} else {
|
|
// post request and reload page on success
|
|
$.ajax({
|
|
url: '/ctp/rest/job-cards?job-card-item-id=' + this.items[index].id,
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
location.reload();
|
|
},
|
|
error: function (err) {
|
|
console.log(err)
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<table class="table table-bordered bg-white">
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Item Sku/Title</th>
|
|
<th>Cut Panels</th>
|
|
<th>Expected Production</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<item-rows v-for="(item,index) in items"
|
|
v-bind:key="index"
|
|
v-bind:index="index"
|
|
v-bind:item="item"
|
|
v-on:remove-item="removeItem">
|
|
</item-rows>
|
|
</tbody>
|
|
</table>
|
|
`,
|
|
|
|
|
|
});
|
|
|
|
|
|
Vue.component('item-rows', {
|
|
props: ['index', 'item'],
|
|
methods: {
|
|
removeItem: function (e) {
|
|
e.preventDefault();
|
|
this.$emit('remove-item', this.index);
|
|
},
|
|
addPieces: function (e) {
|
|
e.preventDefault();
|
|
this.item.cutPieces.push({
|
|
'id': 0,
|
|
'jobCardItemId': 0,
|
|
'type': '',
|
|
'quantity': 0
|
|
})
|
|
},
|
|
removePiece: function (index) {
|
|
if (confirm('Do want to delete Item?')) {
|
|
if (this.item.cutPieces[index].id === 0) {
|
|
this.item.cutPieces.splice(index, 1);
|
|
} else {
|
|
// post request and reload page on success
|
|
$.ajax({
|
|
url: '/ctp/rest/cut-pieces?cut-piece-id=' + this.item.cutPieces[index].id,
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
location.reload();
|
|
},
|
|
error: function (err) {
|
|
console.log(err)
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
onItemSelect(itemId, invItem) {
|
|
this.item.itemId = invItem.id;
|
|
this.item.sku = invItem.sku;
|
|
}
|
|
},
|
|
template: `
|
|
<tr>
|
|
<td width="400">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].id'" v-bind:value="item.id">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].sku'" v-bind:value="item.sku">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].totalProduction'" v-bind:value="item.totalProduction">
|
|
<item-search
|
|
v-bind:id-field-name="'items[' + index + '].itemId'"
|
|
v-bind:id="item.itemId"
|
|
v-bind:title="item.title"
|
|
v-on:item-select="onItemSelect"
|
|
v-bind:show-label="false"
|
|
v-bind:requuired="true"></item-search>
|
|
</td>
|
|
<td width="400">
|
|
<span class="form-control" readonly >{{item.sku}}</span>
|
|
</td>
|
|
<td width="500">
|
|
<span class="bi-plus-circle-fill" title="Add Pieces" v-on:click="addPieces"></span>
|
|
<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"
|
|
v-on:piece-remove="removePiece">
|
|
</cut-piece>
|
|
</td>
|
|
<td width="200">
|
|
<input type="number" class="form-control" v-bind:name="'items[' + index + '].expectedProductionQuantity'" v-model="item.expectedProductionQuantity" required>
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-light" title="Edit" v-on:click="removeItem">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</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" required>
|
|
<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">
|
|
<input type="number" class="form-control" v-bind:name="'items[' + pIndex + '].cutPieces[' + index +'].quantity'" v-model="piece.quantity" required>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<span class="bi-trash2-fill" title="Remove Piece" v-on:click="removePiece" ></span>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
});
|
|
|
|
|
|
let app = new Vue({
|
|
el: '#jobCardApp',
|
|
data: {
|
|
jobCard: {},
|
|
items: [],
|
|
},
|
|
methods: {
|
|
addItem: function (e) {
|
|
e.preventDefault();
|
|
this.items.push(this.createNewItem())
|
|
},
|
|
createNewItem: function () {
|
|
return {
|
|
'id': 0,
|
|
'jobCardId': 0,
|
|
'itemId': 0,
|
|
'sku': '',
|
|
'expectedProductionQuantity': 0.0,
|
|
cutPieces: []
|
|
}
|
|
},
|
|
removeItem: function () {
|
|
e.preventDefault();
|
|
|
|
},
|
|
hasDuplicates: function () {
|
|
const ids = this.items.map(item => item.itemId);
|
|
const uniqueIds = new Set(ids);
|
|
return ids.length !== uniqueIds.size;
|
|
},
|
|
hasEmptyItems: function () {
|
|
if( this.items.length === 0 ) return true;
|
|
for( let x of this.items ){
|
|
if( x.itemId === 0 ){
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.jobCard = window.ctp.jobCard;
|
|
this.items = this.jobCard.items;
|
|
|
|
}
|
|
});
|
|
|
|
})(jQuery); |