Files
web/app/components/imports/AddProductVariant.vue
2026-05-20 14:42:53 +07:00

63 lines
1.7 KiB
Vue

<script setup>
import DataView from "@/components/datatable/DataView.vue";
import ProductVariantForm from "@/components/imports/ProductVariantForm.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-8 is-col-start-3">
<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,image__path,price,note,create_time,update_time',
filter: { product: product.id },
sort: 'id',
},
}"
/>
</div>
</div>
</div>
<ProductVariantForm
v-if="product"
:productId="product.id"
@created="key++"
/>
</template>