135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<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>
|