169 lines
3.8 KiB
Vue
169 lines
3.8 KiB
Vue
<template>
|
|
<div class="container is-fluid px-4">
|
|
<div class="field is-horizontal">
|
|
<div class="field-body">
|
|
<!-- Mã giỏ hàng -->
|
|
<div class="field is-narrow">
|
|
<label class="label"> Mã <span class="has-text-danger">*</span> </label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder="Nhập mã"
|
|
v-model="record.code"
|
|
id="code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tên giỏ hàng -->
|
|
<div class="field">
|
|
<label class="label"> Tên giỏ hàng <span class="has-text-danger">*</span> </label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder="Nhập tên giỏ hàng"
|
|
v-model="record.name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Index -->
|
|
<div
|
|
class="field"
|
|
style="width: 120px"
|
|
>
|
|
<label class="label"> Index <span class="has-text-danger">*</span> </label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="number"
|
|
placeholder="0"
|
|
v-model.number="record.index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Đại lý -->
|
|
<div class="field mt-5">
|
|
<label class="label">Đại lý</label>
|
|
<div class="control">
|
|
<SearchBox
|
|
v-bind="{
|
|
api: 'dealer',
|
|
field: 'code',
|
|
column: 'code',
|
|
optionid: record.dealer || null,
|
|
first: true,
|
|
viewaddon: viewAddon,
|
|
addon: newAddon,
|
|
}"
|
|
@option="dealerSelected"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nút lưu -->
|
|
<div class="field is-grouped is-grouped-right mt-6">
|
|
<div class="control">
|
|
<button
|
|
class="button is-primary has-text-white"
|
|
@click="update"
|
|
>
|
|
{{ record.id ? "Cập nhật" : "Thêm mới" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, nextTick } from "vue";
|
|
const { $copy, $resetNull, $snackbar, $getdata, $insertapi, $updateapi } = useNuxtApp();
|
|
|
|
// Chỉ nhận id (không nhận row)
|
|
const props = defineProps({
|
|
prefix: String,
|
|
id: [Number, String, null],
|
|
});
|
|
|
|
const emit = defineEmits(["close", "modalevent"]);
|
|
|
|
const record = ref({
|
|
code: "",
|
|
name: "",
|
|
index: 0,
|
|
dealer: null,
|
|
});
|
|
|
|
const viewAddon = {};
|
|
const newAddon = {};
|
|
|
|
function dealerSelected(obj) {
|
|
record.value.dealer = obj ? obj.id : null;
|
|
}
|
|
|
|
async function loadCart() {
|
|
if (!props.id) {
|
|
record.value = {
|
|
code: "",
|
|
name: "",
|
|
index: 0,
|
|
dealer: null,
|
|
};
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const row = await $getdata("cart", { id: props.id }, null, true);
|
|
|
|
if (row) {
|
|
record.value = $copy(row);
|
|
} else {
|
|
$snackbar("Không tìm thấy giỏ hàng này");
|
|
emit("close");
|
|
}
|
|
} catch (error) {
|
|
console.error("Lỗi khi tải dữ liệu giỏ hàng:", error);
|
|
$snackbar("Lỗi tải dữ liệu");
|
|
emit("close");
|
|
}
|
|
}
|
|
|
|
// Lưu dữ liệu
|
|
async function update() {
|
|
const data = $resetNull(record.value);
|
|
|
|
try {
|
|
let rs;
|
|
if (data.id) {
|
|
rs = await $updateapi("cart", data);
|
|
} else {
|
|
rs = await $insertapi("cart", data);
|
|
}
|
|
|
|
if (rs === "error") {
|
|
$snackbar("Lỗi khi lưu dữ liệu");
|
|
return;
|
|
}
|
|
|
|
$snackbar("Lưu thành công!");
|
|
emit("modalevent", { name: "dataevent", data: rs });
|
|
emit("close");
|
|
} catch (err) {
|
|
$snackbar("Có lỗi xảy ra khi lưu");
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
// Khởi tạo khi mở modal
|
|
onMounted(async () => {
|
|
await loadCart();
|
|
await nextTick();
|
|
document.getElementById("code")?.focus();
|
|
});
|
|
</script>
|