changes
This commit is contained in:
@@ -70,86 +70,88 @@ onMounted(fetchImeis);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="is-flex is-justify-content-center"
|
||||
>
|
||||
<Icon
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
:size="26"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="imeis.length === 0">
|
||||
<p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI có sẵn nào.</p>
|
||||
<div class="block">
|
||||
<AddIMEIForm
|
||||
:variant="variant"
|
||||
@created="fetchImeis"
|
||||
<div>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="is-flex is-justify-content-center"
|
||||
>
|
||||
<Icon
|
||||
name="svg-spinners:180-ring-with-bg"
|
||||
:size="26"
|
||||
class="has-text-primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<ImportData
|
||||
code="imeis"
|
||||
@close="fetchImeis"
|
||||
/>
|
||||
<div v-else-if="imeis.length === 0">
|
||||
<p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI có sẵn nào.</p>
|
||||
<div class="block">
|
||||
<AddIMEIForm
|
||||
:variant="variant"
|
||||
@created="fetchImeis"
|
||||
/>
|
||||
</div>
|
||||
<div class="block">
|
||||
<ImportData
|
||||
code="imeis"
|
||||
@close="fetchImeis"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<table class="table is-hoverable is-fullwidth mb-2 fs-13">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>STT</th>
|
||||
<th>IMEI</th>
|
||||
<th>Trạng thái</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(imeiRec, i) in imeis"
|
||||
:key="imeiRec.id"
|
||||
class="is-clickable"
|
||||
:class="selectedImeis.find((i) => i.imei === imeiRec.imei) && 'is-selected'"
|
||||
@click="toggleSelected(imeiRec)"
|
||||
<template v-else>
|
||||
<table class="table is-hoverable is-fullwidth mb-2 fs-13">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>STT</th>
|
||||
<th>IMEI</th>
|
||||
<th>Trạng thái</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(imeiRec, i) in imeis"
|
||||
:key="imeiRec.id"
|
||||
class="is-clickable"
|
||||
:class="selectedImeis.find((i) => i.imei === imeiRec.imei) && 'is-selected'"
|
||||
@click="toggleSelected(imeiRec)"
|
||||
>
|
||||
<td class="is-narrow">
|
||||
<label class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedImeis.find((i) => i.imei === imeiRec.imei)"
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td class="is-narrow">{{ i + 1 }}</td>
|
||||
<td class="is-family-monospace">{{ imeiRec.imei }}</td>
|
||||
<td>
|
||||
<span :class="['tag is-light', imeiRec.deleted ? 'is-danger' : 'is-success']">{{
|
||||
imeiRec.deleted ? "Không có sẵn" : "Có sẵn"
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="is-flex is-justify-content-end">
|
||||
<button
|
||||
@click="addToCart"
|
||||
:class="['button is-primary', isAdding && 'is-loading']"
|
||||
:disabled="selectedImeis.length === 0"
|
||||
>
|
||||
<td class="is-narrow">
|
||||
<label class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedImeis.find((i) => i.imei === imeiRec.imei)"
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td class="is-narrow">{{ i + 1 }}</td>
|
||||
<td class="is-family-monospace">{{ imeiRec.imei }}</td>
|
||||
<td>
|
||||
<span :class="['tag is-light', imeiRec.deleted ? 'is-danger' : 'is-success']">{{
|
||||
imeiRec.deleted ? "Không có sẵn" : "Có sẵn"
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="is-flex is-justify-content-end">
|
||||
<button
|
||||
@click="addToCart"
|
||||
:class="['button is-primary', isAdding && 'is-loading']"
|
||||
:disabled="selectedImeis.length === 0"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<span>Thêm vào giỏ</span>
|
||||
<span v-if="selectedImeis.length > 0"> ({{ selectedImeis.length }})</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<span class="icon">
|
||||
<Icon
|
||||
name="material-symbols:add-rounded"
|
||||
:size="18"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<span>Thêm vào giỏ</span>
|
||||
<span v-if="selectedImeis.length > 0"> ({{ selectedImeis.length }})</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.table tr.is-selected {
|
||||
|
||||
Reference in New Issue
Block a user