91 lines
4.1 KiB
JavaScript
91 lines
4.1 KiB
JavaScript
(async function () {
|
|
|
|
Vue.component('bundle-table', {
|
|
props: ['bundles'],
|
|
methods: {
|
|
removeBundle: function (idx) {
|
|
this.$emit('bundle-remove', idx)
|
|
},
|
|
getFormattedDateTime: function (bundle) {
|
|
if (!!bundle.createdAt) {
|
|
return bundle.createdAt.split('T')[0] + ' ' + bundle.createdAt.split('T')[1];
|
|
}
|
|
return luxon.DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss');
|
|
},
|
|
},
|
|
template: `
|
|
<table class="table table-bordered bg-white col-sm-8">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Item ID</th>
|
|
<th>Sku</th>
|
|
<th>Job Card ID</th>
|
|
<th>Wrap Quantity</th>
|
|
<th>Type</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(bundle,index) in bundles">
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].id'" v-bind:value="bundle.id" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].itemId'" v-bind:value="bundle.itemId" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].sku'" v-bind:value="bundle.sku" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].masterBundleId'" v-bind:value="bundle.masterBundleId" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].jobCardId'" v-bind:value="bundle.jobCardId" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].wrapQuantity'" v-bind:value="bundle.wrapQuantity" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].type'" v-bind:value="bundle.type" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].barcode'" v-bind:value="bundle.barcode" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].createdAt'" v-bind:value="getFormattedDateTime(bundle.createdAt)" >
|
|
<input hidden="hidden" v-bind:name="'bundles[' + index + '].createdBy'" v-bind:value="bundle.createdBy" >
|
|
<td><span>{{bundle.id}}</span></td>
|
|
<td><span>{{bundle.itemId}}</span></td>
|
|
<td><span>{{bundle.sku}}</span></td>
|
|
<td><span>{{bundle.jobCardId}}</span></td>
|
|
<td><span>{{bundle.wrapQuantity}}</span></td>
|
|
<td><span>{{bundle.type}}</span></td>
|
|
<td>
|
|
<button type="button" title="Remove" class="btn btn-light text-left" v-on:click="removeBundle(index)">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`
|
|
|
|
})
|
|
|
|
|
|
let app = new Vue({
|
|
el: "#masterBarcodeApp",
|
|
data: {
|
|
bundles: [],
|
|
},
|
|
methods: {
|
|
removeBundle: function (idx) {
|
|
this.bundles.splice(idx, 1)
|
|
},
|
|
onBundleSelect: function (id, bundle) {
|
|
this.bundles.push(
|
|
bundle
|
|
)
|
|
},
|
|
hasMultipleItemSelect : function () {
|
|
const ids = this.bundles.map(item => item.itemId);
|
|
const uniqueIds = new Set(ids);
|
|
return uniqueIds.size > 1;
|
|
},
|
|
hasDuplicates: function () {
|
|
const ids = this.bundles.map(item => item.id);
|
|
const uniqueIds = new Set(ids);
|
|
return ids.length !== uniqueIds.size;
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.bundles = window.ctp.wrapper.bundles;
|
|
}
|
|
|
|
});
|
|
|
|
})(jQuery); |