changes

app/components/imports/AddProductVariant.vue

@@ -0,0 +1,61 @@
+<script setup>
+import DataView from "@/components/datatable/DataView.vue";
+import AddProductVariantForm from "@/components/imports/AddProductVariantForm.vue";
+const product = ref();
+const key = ref(0);
+watch(product, () => {
+  key.value++;
+});
+</script>
+
+<template>
+  <div class="fixed-grid has-12-cols">
+    <div class="grid">
+      <div class="cell is-col-span-6 is-col-start-4">
+        <div class="field">
+          <label class="label">Sản phẩm</label>
+          <SearchBox
+            v-bind="{
+              api: 'product',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              clearable: true,
+              placeholder: 'Tìm sản phẩm',
+              addon: {
+                component: 'imports/AddProductForm',
+                width: '90%',
+                height: 'auto',
+                title: 'Thêm sản phẩm',
+              },
+            }"
+            @option="product = $event"
+          />
+        </div>
+      </div>
+      <div
+        v-if="product"
+        class="cell is-col-span-12"
+      >
+        <DataView
+          :key="key"
+          v-bind="{
+            api: 'Product_Variant',
+            setting: 'product-variants',
+            pagename: 'product-variants',
+            params: {
+              values:
+                'id,code,product,product__name,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,price,note,create_time,update_time',
+              filter: { product: product.id },
+            },
+          }"
+        />
+      </div>
+    </div>
+  </div>
+  <AddProductVariantForm
+    v-if="product"
+    :productId="product.id"
+    @created="key++"
+  />
+</template>