144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<script setup>
|
|
const { $empty, $insertapi } = useNuxtApp();
|
|
const emit = defineEmits(["modalevent"]);
|
|
|
|
const isLoading = ref(false);
|
|
const body = ref({
|
|
code: null,
|
|
technology: null,
|
|
standard: null,
|
|
size: null,
|
|
resolution: null,
|
|
max_brightness: null,
|
|
refresh_rate: null,
|
|
screen_type: null,
|
|
});
|
|
|
|
async function submit() {
|
|
isLoading.value = true;
|
|
const newRow = await $insertapi("Screen", body.value);
|
|
emit("modalevent", { name: "dataevent", data: newRow });
|
|
isLoading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form class="fixed-grid has-12-cols">
|
|
<div class="grid">
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Mã</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.code"
|
|
placeholder="Mã"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Công nghệ màn hình</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.technology"
|
|
placeholder="Công nghệ màn hình"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Tiêu chuẩn</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.standard"
|
|
placeholder="Tiêu chuẩn"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Kích thước</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.size"
|
|
placeholder="Kích thước"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Độ phân giải</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.resolution"
|
|
placeholder="Độ phân giải"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Độ sáng tối đa</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.max_brightness"
|
|
placeholder="Độ sáng tối đa"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Tần số quét</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.refresh_rate"
|
|
placeholder="Tần số quét"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-4">
|
|
<div class="field">
|
|
<label class="label">Loại màn hình</label>
|
|
<div class="control">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
v-model.trim="body.screen_type"
|
|
placeholder="Loại màn hình"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-12">
|
|
<button
|
|
@click.prevent="submit"
|
|
:disabled="Object.values(body).every($empty)"
|
|
:class="['button is-primary', { 'is-loading': isLoading }]"
|
|
>
|
|
Thêm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|