Initial commit
This commit is contained in:
Viet An
202
app/components/modal/Reservation.vue
Normal file
202
app/components/modal/Reservation.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="columns is-multiline is-mobile mx-0">
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">ID<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.id" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Mã giữ chỗ<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.code">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Mã giao dịch<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.transaction__code">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Người tạo<span class="has-text-danger ml-1">*</span></label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" v-model="record.creator__fullname" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Ngày bắt đầu</label>
|
||||
<div class="control">
|
||||
<input class="input" type="date" v-model="record.date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Hạn thanh toán</label>
|
||||
<div class="control">
|
||||
<input class="input" type="date" v-model="record.due_date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Sô tiền đặt cọc</label>
|
||||
<div class="control">
|
||||
<input class="input" type="number" v-model="record.amount">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="field">
|
||||
<label class="label has-text-left">Trạng thái</label>
|
||||
<div class="control">
|
||||
<SearchBox
|
||||
v-bind="{
|
||||
api: 'status',
|
||||
field: 'name',
|
||||
column: ['name'],
|
||||
optionid: record.approve_status,
|
||||
first: true,
|
||||
}"
|
||||
@option="selectedStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12 pt-5">
|
||||
<a class="button is-primary has-text-white" @click="updateData()">Lưu lại</a>
|
||||
<a class="button is-dark has-text-white ml-5" @click="updateData(true)" v-if="record.id">Tạo mới</a>
|
||||
<a
|
||||
v-if="contractData"
|
||||
class="button is-info has-text-white ml-5"
|
||||
@click="openContractModal"
|
||||
>
|
||||
<span class="icon">
|
||||
<SvgIcon v-bind="{ name: 'contract.svg', type: 'primary', size: 18 }" />
|
||||
</span>
|
||||
<span>Xem hợp đồng</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Modal
|
||||
@close="showmodal = undefined"
|
||||
v-bind="showmodal"
|
||||
@texteditor="updateText"
|
||||
@update="updateAttr"
|
||||
@dataevent="handleModalEvent"
|
||||
v-if="showmodal"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits([])
|
||||
var props = defineProps({
|
||||
pagename: String,
|
||||
row: Object,
|
||||
api: String
|
||||
})
|
||||
|
||||
const { $copy, $resetNull, $insertrow, $updaterow, $getdata } = useNuxtApp()
|
||||
var record = ref(props.row ? $copy(props.row) : {})
|
||||
var showmodal = ref()
|
||||
var vapi = props.api || 'reservation'
|
||||
var contractData = ref(null)
|
||||
|
||||
const loadContract = async () => {
|
||||
if (record.value.transaction__code) {
|
||||
try {
|
||||
contractData.value = await $getdata('contract', { transaction__code: record.value.transaction__code }, undefined, true)
|
||||
} catch (error) {
|
||||
console.error('Error loading contract:', error)
|
||||
contractData.value = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const contractModalConfig = computed(() => ({
|
||||
component: 'application/Contract',
|
||||
title: 'Hợp đồng',
|
||||
width: '90%',
|
||||
height: '90vh',
|
||||
vbind: {
|
||||
row: contractData.value,
|
||||
api: 'transaction',
|
||||
},
|
||||
}))
|
||||
|
||||
const openContractModal = () => {
|
||||
showmodal.value = contractModalConfig.value
|
||||
}
|
||||
|
||||
const handleModalEvent = (eventData) => {
|
||||
if (eventData?.data?.transaction) {
|
||||
contractData.value = { ...contractData.value, ...eventData.data }
|
||||
}
|
||||
}
|
||||
|
||||
var selectedStatus = function(option) {
|
||||
record.value.approve_status = option.id
|
||||
}
|
||||
|
||||
var updateText = function (content) {
|
||||
record.value.vi = content
|
||||
}
|
||||
|
||||
var openEditor = function () {
|
||||
showmodal.value = {
|
||||
component: 'common/TextEditor',
|
||||
vbind: { content: record.value.vi },
|
||||
title: 'Text editor',
|
||||
width: '40%',
|
||||
height: '150px'
|
||||
}
|
||||
}
|
||||
|
||||
var editDetail = function () {
|
||||
let detail = record.value.detail ? record.value.detail : {}
|
||||
showmodal.value = {
|
||||
component: 'datatable/FieldAttribute',
|
||||
vbind: { field: detail, close: true },
|
||||
title: 'Sửa thuộc tính',
|
||||
width: '40%',
|
||||
height: '150px'
|
||||
}
|
||||
}
|
||||
|
||||
var updateAttr = function (detail) {
|
||||
record.value.detail = detail
|
||||
}
|
||||
|
||||
var updateData = async function (isNew) {
|
||||
let ele = record.value
|
||||
if (ele.create_time === null) ele.create_time = new Date()
|
||||
ele = $resetNull(ele)
|
||||
if (isNew) delete ele.id
|
||||
let result = ele.id
|
||||
? await $updaterow(vapi, ele, undefined, props.pagename)
|
||||
: await $insertrow(vapi, ele, undefined, props.pagename)
|
||||
if (isNew) emit('close')
|
||||
|
||||
await loadContract()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadContract()
|
||||
})
|
||||
|
||||
watch(() => record.value.transaction, () => {
|
||||
loadContract()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user