175 lines
3.8 KiB
Vue
175 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> |