This commit is contained in:
Viet An
2026-06-18 08:41:33 +07:00
parent a8aa9a3dce
commit b7c82e944d
17 changed files with 531 additions and 775 deletions

View File

@@ -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 IMEI 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 IMEI 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 {