Mauve
1153 lines
28 KiB
Vue
1153 lines
28 KiB
Vue
<template>
|
|
<div
|
|
class="modal fade"
|
|
id="will_modal_operas"
|
|
ref="modalRef"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<!--begin::Modal dialog-->
|
|
<div class="modal-dialog modal-dialog-centered mw-1000px">
|
|
<!--begin::Modal content-->
|
|
<div class="modal-content">
|
|
<!--begin::Modal header-->
|
|
<div class="modal-header" id="will_modal_operas_header">
|
|
<!--begin::Modal title-->
|
|
<h2 class="fw-bold">{{ opeoperaTitle }}</h2>
|
|
<!--end::Modal title-->
|
|
|
|
<!--begin::Close-->
|
|
<div
|
|
id="will_modal_operas_close"
|
|
data-bs-dismiss="modal"
|
|
class="btn btn-icon btn-sm btn-active-icon-primary"
|
|
>
|
|
<span class="svg-icon svg-icon-1">
|
|
<inline-svg
|
|
:src="
|
|
getAssetPath(
|
|
'media/icons/duotune/arrows/arr061.svg'
|
|
)
|
|
"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<!--end::Close-->
|
|
</div>
|
|
<!--end::Modal header-->
|
|
<!--begin::Form-->
|
|
<el-form
|
|
@submit.prevent="submit()"
|
|
:model="data"
|
|
:rules="rules"
|
|
ref="formRef"
|
|
>
|
|
<!--begin::Modal body-->
|
|
<div class="modal-body py-10 px-lg-17">
|
|
<div class="row g-9 mb-6">
|
|
</div>
|
|
<div class="row g-9 mb-6">
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Section</label
|
|
>
|
|
<el-form-item prop="sectionId">
|
|
<el-select
|
|
v-model="data.sectionId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
@change="changeSection"
|
|
>
|
|
<el-option
|
|
v-for="item in sectionData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Property</label
|
|
>
|
|
<el-form-item prop="propertyId">
|
|
<el-select
|
|
v-model="data.propertyId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
@change="handlePropertyChange"
|
|
>
|
|
<el-option
|
|
v-for="item in propertyData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="row g-9 mb-6">
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Booking Type</label
|
|
>
|
|
<el-form-item prop="bookingTypeId">
|
|
<el-select
|
|
v-model="data.bookingTypeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
v-for="item in bookingTypeData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Block Code</label
|
|
>
|
|
<el-form-item prop="blockCodeId">
|
|
<el-select
|
|
v-model="data.blockCodeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
v-for="item in blockCodeListTemp"
|
|
:key="item.id"
|
|
:label="item.code"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="row g-9 mb-6">
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Rate Code</label
|
|
>
|
|
<el-form-item prop="rateCodeId">
|
|
<el-select
|
|
v-model="data.rateCodeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
v-for="item in rateCodeListTemp"
|
|
:key="item.id"
|
|
:label="item.code"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Room Type</label
|
|
>
|
|
<el-form-item prop="roomTypeIds">
|
|
<el-select
|
|
v-model="data.roomTypeIds"
|
|
multiple
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
v-for="item in roomTypeListTemp"
|
|
:key="item.id"
|
|
:label="item.code"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-9 mb-6">
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Source Code</label
|
|
>
|
|
<el-form-item prop="sourceCodeId">
|
|
<el-select
|
|
v-model="data.sourceCodeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
v-for="item in sourceCodeListTemp"
|
|
:key="item.id"
|
|
:label="item.code"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="required fs-6 fw-semobold mb-2"
|
|
>Market Code</label
|
|
>
|
|
<el-form-item prop="marketCodeId">
|
|
<el-select
|
|
v-model="data.marketCodeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
v-for="item in marketCodeListTemp"
|
|
:key="item.id"
|
|
:label="item.code"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Approver</label
|
|
>
|
|
<el-form-item prop="approver">
|
|
<el-input
|
|
v-model="data.approver"
|
|
type="text"
|
|
placeholder=""
|
|
:readonly="!enableEdit"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Category</label
|
|
>
|
|
<el-form-item prop="compRuleCategory">
|
|
<el-select
|
|
v-model="data.compRuleCategory"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
>
|
|
<el-option
|
|
label="Room only"
|
|
:value="1"
|
|
/>
|
|
<el-option
|
|
label="Room & Misc charge field input"
|
|
:value="2"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Complimentary Type</label
|
|
>
|
|
<el-form-item prop="dlCompTypeId">
|
|
<el-select
|
|
v-model="data.dlCompTypeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
@change="handleCompTypeChange"
|
|
>
|
|
<el-option
|
|
v-for="item in complimentaryTypeList"
|
|
:key="item.id"
|
|
:label="item.enContent"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Payment Method Code</label
|
|
>
|
|
<el-form-item prop="dlPaymentMethodCodeId">
|
|
<el-select
|
|
v-model="data.dlPaymentMethodCodeId"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
@change="handlePaymentMethodCodeChange"
|
|
>
|
|
<el-option
|
|
v-for="item in paymentMethodCodeList"
|
|
:key="item.id"
|
|
:label="item.parentDescription + ' - ' + item.descriptions"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Complimentary Preset</label
|
|
>
|
|
<el-form-item prop="dlCompPresetIds">
|
|
<el-select
|
|
v-model="data.dlCompPresetIds"
|
|
placeholder="Select"
|
|
:disabled="!enableEdit"
|
|
multiple
|
|
collapse-tags
|
|
@change="handleCompPresetChange"
|
|
>
|
|
<el-option
|
|
v-for="item in complimentaryPresetList"
|
|
:key="item.id"
|
|
:label="item.enContent"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Soft Limit</label
|
|
>
|
|
<el-form-item prop="softLimit">
|
|
<el-input
|
|
v-model="data.softLimit"
|
|
type="text"
|
|
placeholder=""
|
|
:readonly="!enableEdit"
|
|
@input="handleSoftLimitInput"
|
|
>
|
|
<template #append>%</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-9 mb-6" v-if="disabled">
|
|
<div class="col-md-6 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Last Updated At</label
|
|
>
|
|
<!--end::Label-->
|
|
<!--begin::Input-->
|
|
<el-form-item prop="updatedAt">
|
|
<el-input
|
|
:value="formatTime(data.updatedAt)"
|
|
type="text"
|
|
placeholder=""
|
|
:disabled="disabled"
|
|
/>
|
|
</el-form-item>
|
|
<!--end::Input-->
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<!--begin::Label-->
|
|
<label class="fs-6 fw-semobold mb-2"
|
|
>Created At</label
|
|
>
|
|
<!--end::Label-->
|
|
<!--begin::Input-->
|
|
<el-form-item prop="updatedAt">
|
|
<el-input
|
|
:value="formatTime(data.createdAt)"
|
|
type="text"
|
|
placeholder=""
|
|
:disabled="disabled"
|
|
/>
|
|
</el-form-item>
|
|
<!--end::Input-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer flex-center">
|
|
<button
|
|
type="button"
|
|
data-bs-dismiss="modal"
|
|
class="btn btn-light me-3"
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
:disabled="loading"
|
|
:data-kt-indicator="loading ? 'on' : null"
|
|
class="btn btn-lg btn-primary"
|
|
type="submit"
|
|
v-if="enableEdit"
|
|
>
|
|
<span v-if="!loading" class="indicator-label">
|
|
Save
|
|
<span class="svg-icon svg-icon-3 ms-2 me-0">
|
|
<inline-svg
|
|
:src="
|
|
getAssetPath(
|
|
'media/icons/duotune/arrows/arr064.svg'
|
|
)
|
|
"
|
|
/>
|
|
</span>
|
|
</span>
|
|
<span v-if="loading" class="indicator-progress">
|
|
Please wait...
|
|
<span
|
|
class="spinner-border spinner-border-sm align-middle ms-2"
|
|
></span>
|
|
</span>
|
|
</button>
|
|
<!--end::Button-->
|
|
</div>
|
|
<!--end::Modal footer-->
|
|
</el-form>
|
|
<!--end::Form-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { getAssetPath } from "@/core/helpers/assets";
|
|
import { defineComponent, ref, computed, onMounted } from "vue";
|
|
import { hideModal, showModal } from "@/core/helpers/dom";
|
|
import ApiService from "@/core/services/ApiService";
|
|
import type { ResponseData } from "@/core/data/AjaxData";
|
|
import Swal from "sweetalert2";
|
|
import { ElNotification } from "element-plus";
|
|
import moment from "moment";
|
|
|
|
export default defineComponent({
|
|
name: "opera-modal-editor",
|
|
components: {},
|
|
setup() {
|
|
let divisionData = ref({});
|
|
let departmentData = ref({});
|
|
let sectionData = ref([]);
|
|
let propertyData = ref([]);
|
|
let bookingTypeData = ref([]);
|
|
let blockCodeData = ref([]);
|
|
let rateCodeData = ref([]);
|
|
let sourceCodeData = ref([]);
|
|
let marketCodeData = ref([]);
|
|
let roomTypeData = ref([]);
|
|
let complimentaryTypeData = ref(new Map());
|
|
let paymentMethodCodeData = ref(new Map());
|
|
let complimentaryPresetData = ref(new Map());
|
|
const formRef = ref<null | HTMLFormElement>(null);
|
|
const modalRef = ref<null | HTMLElement>(null);
|
|
const loading = ref<boolean>(false);
|
|
const operateType = ref("CREATE");
|
|
const actionCallback = ref(null);
|
|
const opeoperaTitle = computed(() => {
|
|
let titleLabel = "Create User-Room";
|
|
switch (operateType.value) {
|
|
case "CREATE":
|
|
titleLabel = "Create User-Room Mapping";
|
|
break;
|
|
case "VIEW":
|
|
titleLabel = "View User-Room Mapping";
|
|
break;
|
|
case "EDIT":
|
|
titleLabel = "Edit User-Room Mapping";
|
|
break;
|
|
case "DELETE":
|
|
titleLabel = "Remove User-Room Mapping";
|
|
break;
|
|
}
|
|
return titleLabel;
|
|
});
|
|
const getModalOption = () => {
|
|
let opt =
|
|
"CREATE" === operateType.value ||
|
|
"EDIT" === operateType.value ||
|
|
"COPY" === operateType.value
|
|
? { backdrop: "static" }
|
|
: {};
|
|
return opt;
|
|
};
|
|
const enableEdit = computed(() => {
|
|
let isEditable = false;
|
|
if (
|
|
operateType.value === "CREATE" ||
|
|
operateType.value === "EDIT"
|
|
) {
|
|
isEditable = true;
|
|
}
|
|
return isEditable;
|
|
});
|
|
const disabled = computed(() => {
|
|
let isEditable = false;
|
|
if (
|
|
operateType.value !== "CREATE" &&
|
|
operateType.value !== "COPY"
|
|
) {
|
|
isEditable = true;
|
|
}
|
|
return isEditable;
|
|
});
|
|
const formatTime = (pVal) => {
|
|
return pVal ? moment(pVal).format("YYYY-MM-DD HH:mm:ss") : "";
|
|
};
|
|
|
|
const data = ref({});
|
|
|
|
const fetchSection = () => {
|
|
let reqParas = {};
|
|
ApiService.processPostRequest(
|
|
"/app/section/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
sectionData.value = resData.data;
|
|
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchSection();
|
|
|
|
const changeSection = (sid) => {
|
|
console.log(sid);
|
|
|
|
};
|
|
|
|
const fetchProperty = () => {
|
|
return new Promise((resolve, reject) => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT_ONLY"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/property/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
propertyData.value = resData.data;
|
|
resolve();
|
|
},
|
|
(resData: ResponseData) => {
|
|
resolve();
|
|
},
|
|
(error) => {
|
|
reject(error);
|
|
}
|
|
);
|
|
});
|
|
};
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
await fetchProperty();
|
|
for (const property of propertyData.value) {
|
|
fetchComplimentaryType(property.dlPropertyId, property.id);
|
|
fetchPaymentMethodCode(property.dlPropertyId, property.id);
|
|
fetchComplimentaryPreset(property.dlPropertyId, property.id);
|
|
}
|
|
} catch (err) {
|
|
console.error("fetchProperty error:", err);
|
|
}
|
|
});
|
|
|
|
const fetchBookingType = () => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/booking_type/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
bookingTypeData.value = resData.data;
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchBookingType();
|
|
|
|
const fetchBlockCode = () => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/block_code/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
blockCodeData.value = resData.data;
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchBlockCode();
|
|
|
|
const fetchRateCode = () => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/rate_code/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
rateCodeData.value = resData.data;
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchRateCode();
|
|
|
|
const fetchSourceCode = () => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/source_code/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
sourceCodeData.value = resData.data;
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchSourceCode();
|
|
|
|
const fetchMarketCode = () => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/market_code/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
marketCodeData.value = resData.data;
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchMarketCode();
|
|
|
|
const fetchRoomType = () => {
|
|
let reqParas = {
|
|
category: "DAYLIGHT"
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/room_type/list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
roomTypeData.value = resData.data;
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
fetchRoomType();
|
|
|
|
const fetchComplimentaryType = (dlPropertyId, propertyId) => {
|
|
if (dlPropertyId == '') {
|
|
return;
|
|
}
|
|
let reqParas = {
|
|
dlPropertyId: dlPropertyId
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/daylight/daylight_complimentary_type_list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
complimentaryTypeData.value.set(String(propertyId), resData.data || []);
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
|
|
const fetchPaymentMethodCode = (dlPropertyId, propertyId) => {
|
|
if (dlPropertyId == '') {
|
|
return;
|
|
}
|
|
let reqParas = {
|
|
dlPropertyId: dlPropertyId
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/daylight/daylight_payment_method_code_list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
paymentMethodCodeData.value.set(String(propertyId), resData.data || []);
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
|
|
const fetchComplimentaryPreset = (dlPropertyId, propertyId) => {
|
|
if (dlPropertyId == '') {
|
|
return;
|
|
}
|
|
let reqParas = {
|
|
dlPropertyId: dlPropertyId
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/daylight/daylight_complimentary_preset_list",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
complimentaryPresetData.value.set(String(propertyId), resData.data || []);
|
|
},
|
|
(resData: ResponseData) => {},
|
|
(error) => {}
|
|
);
|
|
};
|
|
|
|
const resetForm = () => {
|
|
if (formRef.value) {
|
|
formRef.value.resetFields();
|
|
}
|
|
};
|
|
|
|
const openCreate = (fCallback) => {
|
|
resetForm();
|
|
operateType.value = "CREATE";
|
|
data.value = {
|
|
id: null,
|
|
name: "",
|
|
compTypeContent: "",
|
|
paymentMethodCodeContent: "",
|
|
dlCompPresetIds: [],
|
|
compPresetContents: [],
|
|
};
|
|
actionCallback.value = fCallback;
|
|
showModal(modalRef.value, getModalOption());
|
|
};
|
|
const openView = (id: number) => {
|
|
operateType.value = "VIEW";
|
|
actionCallback.value = null;
|
|
resetForm();
|
|
fetchInfo(id, operateType.value);
|
|
};
|
|
const openEdit = (id: number, fCallback) => {
|
|
operateType.value = "EDIT";
|
|
actionCallback.value = fCallback;
|
|
resetForm();
|
|
fetchInfo(id, operateType.value);
|
|
};
|
|
const openDelete = (id: number, fCallback) => {
|
|
operateType.value = "DELETE";
|
|
Swal.fire({
|
|
text: "Are you sure to remove this daylight mapping!",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Yes, remove it!",
|
|
cancelButtonText: "Cancel",
|
|
heightAuto: false,
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
cancelButton: "btn btn-light",
|
|
},
|
|
}).then((isConfirm) => {
|
|
if (isConfirm.value) {
|
|
actionCallback.value = fCallback;
|
|
deleteById(id);
|
|
}
|
|
});
|
|
};
|
|
const saveOrUpdateInfo = (dataObj: object) => {
|
|
if (dataObj) {
|
|
let postUrl =
|
|
dataObj.id == null
|
|
? "/app/daylight/create"
|
|
: "/app/daylight/update";
|
|
ApiService.processPostRequest(
|
|
postUrl,
|
|
dataObj,
|
|
(resData: ResponseData) => {
|
|
loading.value = false;
|
|
ElNotification({
|
|
position: "bottom-right",
|
|
title: "Success",
|
|
message:
|
|
"Daylight mapping has been successfully saved!",
|
|
type: "success",
|
|
});
|
|
hideModal(modalRef.value);
|
|
actionCallback.value && actionCallback.value();
|
|
},
|
|
(resData: ResponseData) => {
|
|
loading.value = false;
|
|
ElNotification({
|
|
position: "bottom-right",
|
|
title: "Fail",
|
|
message:
|
|
"Save data failed![" + resData.message + "]",
|
|
type: "error",
|
|
});
|
|
},
|
|
(error) => {
|
|
loading.value = false;
|
|
Swal.fire({
|
|
text: "Save data error![" + error + "]",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
heightAuto: false,
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
},
|
|
});
|
|
}
|
|
);
|
|
} else {
|
|
ElNotification({
|
|
position: "bottom-right",
|
|
title: "Fail",
|
|
message: "Empty opera mapping info",
|
|
type: "error",
|
|
});
|
|
}
|
|
};
|
|
const deleteById = (id: number) => {
|
|
if (id > 0) {
|
|
let operaObj = {
|
|
id: id,
|
|
};
|
|
let postUrl = "/app/daylight/delete";
|
|
ApiService.processPostRequest(
|
|
postUrl,
|
|
operaObj,
|
|
(resData: ResponseData) => {
|
|
loading.value = false;
|
|
ElNotification({
|
|
position: "bottom-right",
|
|
title: "Success",
|
|
message:
|
|
"Daylight mapping has been successfully deleted!",
|
|
type: "success",
|
|
});
|
|
actionCallback.value && actionCallback.value();
|
|
},
|
|
(resData: ResponseData) => {
|
|
ElNotification({
|
|
position: "bottom-right",
|
|
title: "Fail",
|
|
message:
|
|
"Delete daylight mapping failed![" +
|
|
resData.message +
|
|
"]",
|
|
type: "error",
|
|
});
|
|
},
|
|
(error) => {
|
|
Swal.fire({
|
|
text: "Delete daylight mapping error![" + error + "]",
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
heightAuto: false,
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
},
|
|
});
|
|
}
|
|
);
|
|
}
|
|
};
|
|
const fetchInfo = (id: number, opeopera: string) => {
|
|
let reqParas = {
|
|
searchId: id,
|
|
};
|
|
ApiService.processPostRequest(
|
|
"/app/daylight/get",
|
|
reqParas,
|
|
(resData: ResponseData) => {
|
|
let rdata = resData.data;
|
|
let roomTypeIds = [];
|
|
if (rdata.daylightRoomType != null) {
|
|
for (let i = 0; i < rdata.daylightRoomType.length; i++) {
|
|
let rtid = rdata.daylightRoomType[i].id;
|
|
roomTypeIds.push(rtid);
|
|
}
|
|
rdata.roomTypeIds = roomTypeIds;
|
|
}
|
|
if (rdata.cfgCompPresetList != null) {
|
|
rdata.dlCompPresetIds = rdata.cfgCompPresetList.map(
|
|
(item) => item.dlCompPresetId ?? item.compPresetId ?? item.id
|
|
);
|
|
rdata.compPresetContents = rdata.cfgCompPresetList.map(
|
|
(item) => item.compPresetContent ?? item.enContent ?? ""
|
|
);
|
|
}
|
|
data.value = rdata;
|
|
fetchSection();
|
|
showModal(modalRef.value, getModalOption());
|
|
},
|
|
(resData: ResponseData) => {
|
|
ElNotification({
|
|
position: "bottom-right",
|
|
title: "Fail",
|
|
message:
|
|
"Read daylight data error![" + resData.message + "]",
|
|
type: "error",
|
|
});
|
|
hideModal(modalRef.value);
|
|
},
|
|
(error) => {}
|
|
);
|
|
};
|
|
const rules = ref({
|
|
sectionId: [
|
|
{
|
|
required: true,
|
|
message: "Section is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
propertyId: [
|
|
{
|
|
required: true,
|
|
message: "Property is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
bookingTypeId: [
|
|
{
|
|
required: true,
|
|
message: "Booking Type is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
blockCodeId: [
|
|
{
|
|
required: true,
|
|
message: "Block Code is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
rateCodeId: [
|
|
{
|
|
required: true,
|
|
message: "Rate Code is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
roomTypeIds: [
|
|
{
|
|
required: true,
|
|
message: "Room Type is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
sourceCodeId: [
|
|
{
|
|
required: true,
|
|
message: "Source Code is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
marketCodeId: [
|
|
{
|
|
required: true,
|
|
message: "Market Code is required",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
softLimit: [
|
|
{
|
|
pattern: /^\d+(\.\d+)?$/,
|
|
message: "Soft Limit must be a number",
|
|
trigger: "change",
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value === '' || value === null || value === undefined) {
|
|
callback();
|
|
return;
|
|
}
|
|
const num = Number(value);
|
|
if (isNaN(num)) {
|
|
callback(new Error('Soft Limit must be a number'));
|
|
} else if (num < 1) {
|
|
callback(new Error('Soft Limit must be at least 1'));
|
|
} else if (num > 100) {
|
|
callback(new Error('Soft Limit must be at most 100'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'change',
|
|
}
|
|
]
|
|
});
|
|
|
|
const submit = () => {
|
|
if (!formRef.value) {
|
|
return;
|
|
}
|
|
|
|
if (loading.value) return;
|
|
formRef.value.validate((valid: boolean) => {
|
|
if (valid) {
|
|
loading.value = true;
|
|
saveOrUpdateInfo(data.value);
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSoftLimitInput = (value) => {
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
data.value.softLimit = String(value)
|
|
.replace(/[^\d.]/g, "")
|
|
.replace(/\.(?=.*\.)/g, "");
|
|
};
|
|
|
|
const blockCodeListTemp = computed(() => {
|
|
const selectId = data.value?.propertyId;
|
|
if (selectId == null) {
|
|
return [];
|
|
}
|
|
return blockCodeData.value.filter((item) => item.propertyId === selectId);
|
|
});
|
|
const rateCodeListTemp = computed(() => {
|
|
const selectId = data.value?.propertyId;
|
|
if (selectId == null) {
|
|
return [];
|
|
}
|
|
return rateCodeData.value.filter((item) => item.propertyId === selectId);
|
|
});
|
|
const roomTypeListTemp = computed(() => {
|
|
const selectId = data.value?.propertyId;
|
|
if (selectId == null) {
|
|
return [];
|
|
}
|
|
return roomTypeData.value.filter((item) => item.propertyId === selectId);
|
|
});
|
|
const sourceCodeListTemp = computed(() => sourceCodeData.value);
|
|
const marketCodeListTemp = computed(() => marketCodeData.value);
|
|
const complimentaryTypeList = computed(() => {
|
|
const selectId = data.value?.propertyId;
|
|
if (selectId == null) {
|
|
return [];
|
|
}
|
|
return complimentaryTypeData.value.get(String(selectId)) ?? [];
|
|
});
|
|
const paymentMethodCodeList = computed(() => {
|
|
const selectId = data.value?.propertyId;
|
|
if (selectId == null) {
|
|
return [];
|
|
}
|
|
return paymentMethodCodeData.value.get(String(selectId)) ?? [];
|
|
});
|
|
const complimentaryPresetList = computed(() => {
|
|
const selectId = data.value?.propertyId;
|
|
if (selectId == null) {
|
|
return [];
|
|
}
|
|
return complimentaryPresetData.value.get(String(selectId)) ?? [];
|
|
});
|
|
const paymentMethodCodeLabel = (item) => {
|
|
return item.parentDescription + ' - ' + item.descriptions;
|
|
};
|
|
const syncPaymentMethodCodeContent = (selectId) => {
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
const selectedPaymentMethodCode = paymentMethodCodeList.value.find(
|
|
(item) => item.id === selectId
|
|
);
|
|
data.value.paymentMethodCodeContent = selectedPaymentMethodCode
|
|
? paymentMethodCodeLabel(selectedPaymentMethodCode)
|
|
: "";
|
|
};
|
|
const handlePaymentMethodCodeChange = (selectId) => {
|
|
syncPaymentMethodCodeContent(selectId);
|
|
};
|
|
const syncCompTypeContent = (selectId) => {
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
const selectedType = complimentaryTypeList.value.find(
|
|
(item) => item.id === selectId
|
|
);
|
|
data.value.compTypeContent = selectedType?.enContent || "";
|
|
};
|
|
const handleCompTypeChange = (selectId) => {
|
|
syncCompTypeContent(selectId);
|
|
};
|
|
const syncCompPresetContent = (selectIds) => {
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
data.value.compPresetContents = (selectIds || []).map((id) => {
|
|
const selectedPreset = complimentaryPresetList.value.find(
|
|
(item) => item.id === id
|
|
);
|
|
return selectedPreset?.enContent || "";
|
|
});
|
|
};
|
|
const handleCompPresetChange = (selectIds) => {
|
|
console.log(selectIds);
|
|
syncCompPresetContent(selectIds);
|
|
};
|
|
const handlePropertyChange = (selectId) => {
|
|
if (!data.value) {
|
|
return;
|
|
}
|
|
data.value.propertyId = selectId;
|
|
data.value.blockCodeId = null;
|
|
data.value.rateCodeId = null;
|
|
data.value.roomTypeIds = [];
|
|
data.value.sourceCodeId = null;
|
|
data.value.marketCodeId = null;
|
|
data.value.dlCompTypeId = null;
|
|
data.value.compTypeContent = "";
|
|
data.value.dlPaymentMethodCodeId = null;
|
|
data.value.paymentMethodCodeContent = "";
|
|
data.value.dlCompPresetIds = [];
|
|
data.value.compPresetContents = [];
|
|
};
|
|
|
|
return {
|
|
data,
|
|
rules,
|
|
submit,
|
|
formRef,
|
|
loading,
|
|
modalRef,
|
|
getAssetPath,
|
|
openCreate,
|
|
openView,
|
|
openEdit,
|
|
openDelete,
|
|
operateType,
|
|
opeoperaTitle,
|
|
getModalOption,
|
|
enableEdit,
|
|
disabled,
|
|
sectionData,
|
|
propertyData,
|
|
bookingTypeData,
|
|
blockCodeData,
|
|
rateCodeData,
|
|
sourceCodeData,
|
|
marketCodeData,
|
|
roomTypeData,
|
|
formatTime,
|
|
changeSection,
|
|
handlePropertyChange,
|
|
handleCompTypeChange,
|
|
handlePaymentMethodCodeChange,
|
|
handleCompPresetChange,
|
|
handleSoftLimitInput,
|
|
blockCodeListTemp,
|
|
rateCodeListTemp,
|
|
roomTypeListTemp,
|
|
sourceCodeListTemp,
|
|
marketCodeListTemp,
|
|
complimentaryTypeList,
|
|
paymentMethodCodeList,
|
|
complimentaryPresetList,
|
|
};
|
|
},
|
|
});
|
|
</script>
|