159 lines
4.7 KiB
Vue
159 lines
4.7 KiB
Vue
<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.product__name__icontains"
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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>
|