changes

app/components/imports/AddProductVariantForm.vue

@@ -0,0 +1,134 @@
+<script setup>
+import InputNumber from "@/components/common/InputNumber.vue";
+
+const { $insertapi } = useNuxtApp();
+
+const isPending = ref(false);
+const body = ref({
+  product: null,
+  price: null,
+  internal_storage: null,
+  ram: null,
+  color: null,
+  note: null,
+});
+
+function selected(field, data) {
+  if (field === "price") {
+    body.value[field] = data;
+  } else {
+    body.value[field] = data.id;
+  }
+}
+
+async function createProductVariant() {
+  isPending.value = true;
+  const res = await $insertapi("Product_Variant", body.value);
+  isPending.value = false;
+}
+</script>
+
+<template>
+  <h1 class="subtitle is-4">AddProductVariantForm</h1>
+  <form class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-8">
+        <div class="field">
+          <label class="label">Sản phẩm</label>
+          <SearchBox
+            v-bind="{
+              api: 'product',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Sản phẩm',
+            }"
+            @option="selected('product', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Đơn giá</label>
+          <div class="control">
+            <InputNumber
+              v-bind="{
+                record: body,
+                attr: 'price',
+                placeholder: 'Đơn giá',
+              }"
+              @number="selected('price', $event)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Màu sắc</label>
+          <SearchBox
+            v-bind="{
+              api: 'color',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              placeholder: 'Màu sắc',
+            }"
+            @option="selected('color', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">RAM</label>
+          <SearchBox
+            v-bind="{
+              api: 'RAM',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'RAM',
+            }"
+            @option="selected('ram', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-4">
+        <div class="field">
+          <label class="label">Bộ nhớ trong</label>
+          <SearchBox
+            v-bind="{
+              api: 'internalstorage',
+              field: 'code',
+              column: ['code'],
+              first: true,
+              placeholder: 'Bộ nhớ trong',
+            }"
+            @option="selected('internal_storage', $event)"
+          />
+        </div>
+      </div>
+      <div class="cell is-col-span-12">
+        <div class="field">
+          <label class="label">Ghi chú</label>
+          <textarea
+            v-model.trim="body.note"
+            class="textarea"
+            name="note"
+            placeholder="Ghi chú"
+            rows="2"
+          ></textarea>
+        </div>
+      </div>
+
+      <div class="cell is-col-span-12">
+        <button
+          :class="['button is-primary', { 'is-loading': isPending }]"
+          :disabled="Object.values(body).every((v) => v === null)"
+          @click.prevent="createProductVariant"
+        >
+          Thêm phiên bản
+        </button>
+      </div>
+    </div>
+  </form>
+</template>