changes

2026-06-04 16:12:51 +07:00
parent 2a1f85c2af
commit 3cfa103306
19 changed files with 106 additions and 106 deletions
--- a/app/components/pos/ChooseIMEIModal.vue
+++ b/app/components/pos/ChooseIMEIModal.vue
@@ -37,7 +37,7 @@ async function fetchImeis() {
    filter: { variant: props.variant.id },
  });

-  imeis.value = imeisFetched;
+  imeis.value = imeisFetched.filter((imeiRec) => !store.selectedImeis.find((i) => i.imei === imeiRec.imei));
  isLoading.value = false;
 }
 onMounted(fetchImeis);
@@ -84,27 +84,24 @@ onMounted(fetchImeis);
          v-for="(imeiRec, i) in imeis"
          :key="imeiRec.id"
          class="is-clickable"
-          :class="
-            (store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
-              selectedImeis.find((i) => i.imei === imeiRec.imei)) &&
-            'is-selected'
-          "
+          :class="selectedImeis.find((i) => i.imei === imeiRec.imei) && 'is-selected'"
          @click="toggleSelected(imeiRec)"
        >
          <td class="is-narrow">
            <label class="checkbox">
              <input
                type="checkbox"
-                :checked="
-                  store.selectedImeis.find((i) => i.imei === imeiRec.imei) ||
-                  selectedImeis.find((i) => i.imei === imeiRec.imei)
-                "
+                :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>{{ imeiRec.deleted ? "Không có sẵn" : "Có sẵn" }}</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>
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -3,6 +3,8 @@ import ProductCard from "@/components/pos/ProductCard.vue";
 import SearchBox from "@/components/SearchBox.vue";

 const store = useStore();
+const { $numtoString } = useNuxtApp();
+
 function openModal() {
  store.showmodal = {
    component: "pos/ProductSelection",
@@ -12,28 +14,31 @@ function openModal() {
  };
 }

-const customer = ref(null);
-const paymentMethod = ref(null);
+const record = ref({
+  customer: null,
+  paymentMethod: null,
+});
+const subtotal = computed(() => {
+  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+});
 </script>

 <template>
-  <div class="card">
-    <div class="card-content">
-      <button
-        @click="openModal"
-        class="button is-primary"
-      >
-        <span class="icon">
-          <Icon
-            name="material-symbols:add-rounded"
-            :size="20"
-          />
-        </span>
-        <span>Chọn sản phẩm</span>
-      </button>
-    </div>
+  <div class="block">
+    <button
+      @click="openModal"
+      class="button is-primary"
+    >
+      <span class="icon">
+        <Icon
+          name="material-symbols:add-rounded"
+          :size="20"
+        />
+      </span>
+      <span>Chọn sản phẩm</span>
+    </button>
  </div>
-  <div class="fixed-grid has-12-cols">
+  <div class="fixed-grid has-1-cols-mobile has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-8">
        <div class="card">
@@ -46,7 +51,6 @@ const paymentMethod = ref(null);
                />
              </span>
              <span>Giỏ hàng</span>
-              <span>({{ store.selectedImeis.length }})</span>
            </p>
            <div
              v-if="store.selectedImeis.length > 0"
@@ -86,7 +90,6 @@ const paymentMethod = ref(null);
                  field: 'label',
                  column: ['label'],
                  first: true,
-                  clearable: true,
                  placeholder: 'Khách hàng',
                  addon: {
                    component: 'customer/CustomerQuickAdd',
@@ -94,7 +97,7 @@ const paymentMethod = ref(null);
                    height: 'auto',
                    title: 'Tạo khách hàng',
                  },
-                  onOption: (e) => (customer = e),
+                  onOption: (e) => (record.customer = e),
                }"
              />
            </div>
@@ -118,14 +121,43 @@ const paymentMethod = ref(null);
                  field: 'name',
                  column: ['name'],
                  first: true,
-                  clearable: true,
                  placeholder: 'Phương thức thanh toán',
-                  onOption: (e) => (paymentMethod = e),
+                  onOption: (e) => (record.paymentMethod = e),
                }"
              />
            </div>
          </div>
        </div>
+        <div class="card mb-3">
+          <div class="card-content">
+            <p class="icon-text fs-17 font-semibold mb-4">Tổng cộng</p>
+            <div>
+              <table class="table is-fullwidth fs-13">
+                <tbody>
+                  <tr>
+                    <td>
+                      <span>Tạm tính</span>
+                      <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                    </td>
+                    <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
+                  </tr>
+                  <tr>
+                    <td class="font-bold fs-14">Tổng cộng</td>
+                    <td class="has-text-right has-text-success-35 font-bold fs-17">
+                      {{ $numtoString(subtotal, { hasUnit: true }) }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <button
+                class="button is-fullwidth is-success"
+                :disabled="!record.customer || !record.paymentMethod"
+              >
+                Thanh toán
+              </button>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  </div>
--- a/app/components/pos/ProductCard.vue
+++ b/app/components/pos/ProductCard.vue
@@ -4,7 +4,7 @@ import { remove } from "es-toolkit";
 const props = defineProps({
  imei: Object,
 });
-const { $copyToClipboard, $numtoString, $snackbar } = useNuxtApp();
+const { $numtoString, $snackbar } = useNuxtApp();
 const store = useStore();
 function removeFromCart() {
  remove(store.selectedImeis, (imeiRec) => imeiRec.id === props.imei.id);
@@ -14,7 +14,7 @@ function removeFromCart() {

 <template>
  <div class="card m-0">
-    <div class="card-content p-4 is-flex is-gap-3 is-justify-content-space-between is-align-items-center">
+    <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
      <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
        <div class="media m-0">
          <div class="media-left">
@@ -24,30 +24,16 @@ function removeFromCart() {
          </div>
          <div class="media-content">
            <p class="font-bold fs-15">{{ imei.variant__product__name }}</p>
-            <p class="fs-13">
+            <p class="fs-13 has-text-grey">
              <span>{{ imei.variant__ram__code }}</span>
              <span> • </span>
              <span>{{ imei.variant__internal_storage__code }}</span>
              <span> • </span>
              <span>{{ imei.variant__color__name }}</span>
            </p>
-            <div class="fs-13 is-flex is-gap-0.5 is-align-items-center">
-              <span class="is-family-monospace">IMEI: {{ imei.imei }}</span>
-              <button
-                class="button is-small size-7 p-0 is-primary is-light is-rounded"
-                @click="$copyToClipboard(imei.imei)"
-              >
-                <span class="icon">
-                  <Icon
-                    name="material-symbols:content-copy-outline-rounded"
-                    :size="14"
-                  />
-                </span>
-              </button>
-            </div>
          </div>
        </div>
-        <p class="has-text-primary-50 font-semibold">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
+        <p class="has-text-primary-50 font-medium">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
      </div>
      <div>
        <button
--- a/app/components/pos/ProductSelection.vue
+++ b/app/components/pos/ProductSelection.vue
@@ -18,7 +18,7 @@ function selected(api, chosen) {
            <div class="control">
              <input
                class="input"
-                v-model.trim="filter.name"
+                v-model.trim="filter.product__name__icontains"
                type="text"
                placeholder="Tên"
              />
@@ -34,7 +34,6 @@ function selected(api, chosen) {
                field: 'name',
                column: ['name'],
                first: true,
-                clearable: true,
                optionid: filter.os,
                placeholder: 'OS',
              }"
@@ -51,7 +50,6 @@ function selected(api, chosen) {
                field: 'name',
                column: ['name'],
                first: true,
-                clearable: true,
                optionid: filter.manufacturer,
                placeholder: 'Hãng',
              }"
@@ -68,7 +66,6 @@ function selected(api, chosen) {
                field: 'code',
                column: ['code'],
                first: true,
-                clearable: true,
                optionid: filter.battery,
                placeholder: 'Pin',
              }"
@@ -85,7 +82,6 @@ function selected(api, chosen) {
                field: 'label',
                column: ['resolution', 'standard', 'technology'],
                first: true,
-                clearable: true,
                optionid: filter.screen,
                placeholder: 'Màn hình',
              }"
@@ -102,7 +98,6 @@ function selected(api, chosen) {
                field: 'name',
                column: ['name'],
                first: true,
-                clearable: true,
                placeholder: 'CPU',
                optionid: filter.cpu,
              }"
@@ -119,7 +114,6 @@ function selected(api, chosen) {
                field: 'name',
                column: ['name'],
                first: true,
-                clearable: true,
                optionid: filter.gpu,
                placeholder: 'GPU',
              }"
@@ -136,7 +130,6 @@ function selected(api, chosen) {
                field: 'code',
                column: ['code'],
                first: true,
-                clearable: true,
                optionid: filter.external_storage,
                placeholder: 'Bộ nhớ ngoài',
                position: 'is-top-right',