112 lines
5.4 KiB
JavaScript
112 lines
5.4 KiB
JavaScript
( async function(){
|
|
|
|
Vue.prototype.$accounts = window.ctp.accounts;
|
|
|
|
Vue.component('finish-item-table',{
|
|
props : [ 'items' ],
|
|
methods: {
|
|
getFormattedDateTime: function (dateTime) {
|
|
if (!!dateTime) {
|
|
return dateTime.split('T')[0] + ' ' + dateTime.split('T')[1];
|
|
}
|
|
return luxon.DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
|
|
},
|
|
removeItem: function (index) {
|
|
this.$emit('remove-item', index)
|
|
}
|
|
},
|
|
template : `
|
|
<table class="table table-bordered bg-white col-sm-12">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Item ID</th>
|
|
<th>Sku</th>
|
|
<th>Created By</th>
|
|
<th>Created At</th>
|
|
<th>Job Card ID</th>
|
|
<th>Barcode</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item,index) in items">
|
|
<td>
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].id'" v-bind:value="item.id">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].itemId'" v-bind:value="item.itemId">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].sku'" v-bind:value="item.sku">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].createdBy'" v-bind:value="item.createdBy">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].createdAt'" v-bind:value="getFormattedDateTime(item.createdAt)">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].jobCardId'" v-bind:value="item.jobCardId">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].barcode'" v-bind:value="item.barcode" >
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].isQa'" v-bind:value="item.isQa">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].stitchedItemId'" v-bind:value="item.stitchedItemId">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].isSegregated'" v-bind:value="item.isSegregated">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].qaStatus'" v-bind:value="item.qaStatus">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].accountId'" v-bind:value="item.accountId">
|
|
<input hidden="hidden" v-bind:name="'items[' + index + '].operationDate'" v-bind:value="getFormattedDateTime(item.operationDate)">
|
|
<span> {{item.id}} </span>
|
|
</td>
|
|
<td> {{item.itemId}} </td>
|
|
<td> {{item.sku}} </td>
|
|
<td> {{item.createdBy}} </td>
|
|
<td> {{ getFormattedDateTime( item.createdAt) }} </td>
|
|
<td> {{item.jobCardId}}</td>
|
|
<td> {{item.barcode}} </td>
|
|
<td >
|
|
<span v-if="!item.qaStatus" class="badge badge-danger">NOT PERFORMED</span>
|
|
<span v-else-if="item.qaStatus === 'APPROVED'" class="font-lg badge badge-success">{{ item.qaStatus }}</span>
|
|
<span v-else-if="item.qaStatus === 'ALTER' || item.qaStatus === 'B GRADE'" class="font-lg badge badge-danger">{{ item.qaStatus }}</span>
|
|
<span v-else-if="item.qaStatus === 'WASHED'" class="font-lg badge badge-APPROVED">{{ item.qaStatus }}</span>
|
|
<span v-else-if="item.qaStatus === 'REJECT'" class="font-lg badge badge-danger">{{ item.qaStatus }}</span>
|
|
</td>
|
|
<td>
|
|
<button type="button" title="Remove" class="btn btn-light text-left" v-on:click="removeItem(index)">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`,
|
|
|
|
})
|
|
|
|
let app = new Vue({
|
|
el : '#packagingApp',
|
|
data : {
|
|
items : [],
|
|
reason: '',
|
|
},
|
|
methods : {
|
|
onItemSelect: function (id, item) {
|
|
this.items.push(item);
|
|
},
|
|
removeItem: function (index) {
|
|
this.items.splice(index, 1);
|
|
},
|
|
hasDuplicates: function () {
|
|
const ids = this.items.map(item => item.id);
|
|
const uniqueIds = new Set(ids);
|
|
return ids.length !== uniqueIds.size;
|
|
},
|
|
submitWithRejectReason: function (reason) {
|
|
this.reason = reason;
|
|
this.$nextTick(() => {
|
|
const form = document.getElementById('packagingApp');
|
|
if (form.checkValidity()) {
|
|
form.submit();
|
|
} else {
|
|
form.reportValidity();
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
mounted : function () {
|
|
console.log( this.$accounts )
|
|
}
|
|
})
|
|
|
|
})(jQuery) |