changes

app/components/pos/ProductSelection.vue

@@ -0,0 +1,165 @@
+<script setup>
+import DataView from "@/components/datatable/DataView.vue";
+
+const filter = ref({});
+
+function selected(api, chosen) {
+  filter.value[`product__${api}`] = chosen?.id;
+}
+</script>
+
+<template>
+  <div>
+    <form class="fixed-grid has-12-cols">
+      <div class="grid">
+        <div class="cell is-col-span-8">
+          <div class="field">
+            <label class="label">Tên sản phẩm</label>
+            <div class="control">
+              <input
+                class="input"
+                v-model.trim="filter.name"
+                type="text"
+                placeholder="Tên"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">OS</label>
+            <SearchBox
+              v-bind="{
+                api: 'OS',
+                field: 'name',
+                column: ['name'],
+                first: true,
+                clearable: true,
+                optionid: filter.os,
+                placeholder: 'OS',
+              }"
+              @option="selected('os', $event)"
+            />
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Hãng</label>
+            <SearchBox
+              v-bind="{
+                api: 'Manufacturer',
+                field: 'name',
+                column: ['name'],
+                first: true,
+                clearable: true,
+                optionid: filter.manufacturer,
+                placeholder: 'Hãng',
+              }"
+              @option="selected('manufacturer', $event)"
+            />
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Pin</label>
+            <SearchBox
+              v-bind="{
+                api: 'Battery',
+                field: 'code',
+                column: ['code'],
+                first: true,
+                clearable: true,
+                optionid: filter.battery,
+                placeholder: 'Pin',
+              }"
+              @option="selected('battery', $event)"
+            />
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Màn hình</label>
+            <SearchBox
+              v-bind="{
+                api: 'Screen',
+                field: 'label',
+                column: ['resolution', 'standard', 'technology'],
+                first: true,
+                clearable: true,
+                optionid: filter.screen,
+                placeholder: 'Màn hình',
+              }"
+              @option="selected('screen', $event)"
+            />
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">CPU</label>
+            <SearchBox
+              v-bind="{
+                api: 'CPU',
+                field: 'name',
+                column: ['name'],
+                first: true,
+                clearable: true,
+                placeholder: 'CPU',
+                optionid: filter.cpu,
+              }"
+              @option="selected('cpu', $event)"
+            />
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">GPU</label>
+            <SearchBox
+              v-bind="{
+                api: 'GPU',
+                field: 'name',
+                column: ['name'],
+                first: true,
+                clearable: true,
+                optionid: filter.gpu,
+                placeholder: 'GPU',
+              }"
+              @option="selected('gpu', $event)"
+            />
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Bộ nhớ ngoài</label>
+            <SearchBox
+              v-bind="{
+                api: 'External_Storage',
+                field: 'code',
+                column: ['code'],
+                first: true,
+                clearable: true,
+                optionid: filter.external_storage,
+                placeholder: 'Bộ nhớ ngoài',
+                position: 'is-top-right',
+              }"
+              @option="selected('external_storage', $event)"
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+    <DataView
+      :key="JSON.stringify(filter)"
+      v-bind="{
+        api: 'Product_Variant',
+        setting: 'product-variants-selection',
+        pagename: 'product-variants-selection',
+        params: {
+          values:
+            'id,code,product,product__name,product__os__name,product__external_storage__max_capacity,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,image__path,price,note,create_time,update_time',
+          sort: 'id',
+          filter,
+        },
+      }"
+    />
+  </div>
+</template>