Mauve
900 lines
36 KiB
Vue
900 lines
36 KiB
Vue
|
|
<template>
|
|
<!--begin::Toolbar-->
|
|
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
|
|
<!--begin::Toolbar container-->
|
|
<div
|
|
id="kt_app_toolbar_container"
|
|
class="d-flex flex-stack"
|
|
:class="{
|
|
'container-fluid': toolbarWidthFluid,
|
|
'container-xxl': !toolbarWidthFluid,
|
|
}"
|
|
style="padding:0px;"
|
|
>
|
|
<KTPageTitle />
|
|
<div class="d-flex align-items-center gap-2 gap-lg-3">
|
|
<div class="fv-row">
|
|
<label class=" fs-6 fw-semobold mb-2" style="margin-right:6px;">Status</label>
|
|
<el-select
|
|
v-model="pageFilters.searchStatus"
|
|
placeholder="Select"
|
|
style="width:140px;"
|
|
>
|
|
<view>
|
|
<el-option label="ALL" value="AP;AE;AC;AA;AR" />
|
|
<el-option label="Pending Approval" value="AP" selected="true"/>
|
|
<el-option label="Approved" value="AA"/>
|
|
<el-option label="Reject" value="AR"/>
|
|
<el-option label="Cancel" value="AC"/>
|
|
<el-option label="Expiry" value="AE"/>
|
|
</view>
|
|
|
|
</el-select>
|
|
</div>
|
|
<div class="fv-row" >
|
|
<label class=" fs-6 fw-semobold mb-2" style="margin-right:6px;">Player ID</label>
|
|
<el-input v-model="pageFilters.searchPlayerId" class="w-100px" />
|
|
</div>
|
|
|
|
<div class="fv-row" >
|
|
<label class=" fs-6 fw-semobold mb-2 w-120px" style="margin-right:6px;">Booker ID</label>
|
|
<el-input v-model="pageFilters.searchBookerId" class="w-100px" />
|
|
</div>
|
|
<div class="fv-row" >
|
|
<label class="fs-6 fw-semobold mb-2" style="margin-right:6px;">Approver</label>
|
|
<el-input v-model="pageFilters.searchApproverId" class="w-100px" />
|
|
</div>
|
|
|
|
<div class="fv-row">
|
|
<label class=" fs-6 fw-semobold mb-2" style="margin-right:6px;">Check in Date</label>
|
|
<el-date-picker
|
|
v-model="pageFilters.searchCheckInDate"
|
|
type="daterange"
|
|
range-separator="To"
|
|
start-placeholder="Start date"
|
|
end-placeholder="End date"
|
|
size="default"
|
|
value-format="YYYY-MM-DD"
|
|
style="width:240px;"
|
|
/>
|
|
</div>
|
|
<button
|
|
v-if="authStore.hasPermission(pageRouterId,'EXPORT')"
|
|
type="button"
|
|
class="btn btn-sm btn-bg-secondary btn-color-primary fw-bold"
|
|
@click="handleExport"
|
|
>Export</button>
|
|
|
|
<button
|
|
v-if="true"
|
|
type="button"
|
|
class="btn btn-sm btn-bg-light fw-bold"
|
|
@click="onSearchClickHandle"
|
|
>Search</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="handleSelect.showSelect">
|
|
Select {{ handleSelect.selectRecord }} records
|
|
</div>
|
|
<div id="divButtons" class="app-toolbar py-3 py-lg-3">
|
|
<div class="d-flex align-items-right gap-2 gap-lg-3" style="margin-left: auto;">
|
|
<div class="fv-row" v-show="false">
|
|
<label class=" fs-6 fw-semobold mb-2" style="margin-right:6px;">Status Update</label>
|
|
<el-select
|
|
v-model="waitlistStatus"
|
|
placeholder="Select"
|
|
clearable
|
|
style="width:140px;"
|
|
>
|
|
<view v-if="isMSC">
|
|
<el-option label="Reserved" value="WF"/>
|
|
<el-option label="Approved" value="WA"/>
|
|
<el-option label="Reject" value="WR"/>
|
|
<el-option label="Cancelled" value="WC"/>
|
|
<el-option label="Pending Approval" value="W"/>
|
|
</view>
|
|
<view v-else>
|
|
<el-option label="Approved" value="WA"/>
|
|
<el-option label="Reject" value="WR"/>
|
|
<el-option label="Pending Approval" value="W"/>
|
|
</view>
|
|
|
|
</el-select>
|
|
</div>
|
|
<button
|
|
v-if="authStore.hasPermission(pageRouterId,'MODIFY')"
|
|
type="button"
|
|
class="btn btn-sm btn-primary fw-bold"
|
|
@click="updateBatchStatus"
|
|
>Cancel</button>
|
|
</div>
|
|
</div>
|
|
<!--end::Toolbar-->
|
|
|
|
<ag-grid-vue
|
|
class="ag-theme-balham mgm-font"
|
|
:style="css"
|
|
:columnDefs="columnDefs"
|
|
:defaultColDef="defaultColDef"
|
|
rowSelection="multiple"
|
|
:animateRows="true"
|
|
rowModelType="infinite"
|
|
:rowHeight="rowHeight"
|
|
:pagination="true"
|
|
:paginationPageSize="pageSize"
|
|
:paginationPageSizeSelector="false"
|
|
:cacheBlockSize="pageSize"
|
|
:cacheOverflowSize="pageSize"
|
|
:maxBlocksInCache="1"
|
|
:headerHeight="headerHeight"
|
|
@cell-clicked="cellWasClicked"
|
|
@grid-ready="onGridReady"
|
|
@pagination-changed="onPaginationChanged"
|
|
v-if="show"
|
|
>
|
|
</ag-grid-vue>
|
|
<div v-loading.fullscreen.lock="pageLoading" element-loading-text="Loading..."></div>
|
|
<editModal ref="bookingEditorRef"></editModal>
|
|
<bookModal ref="createBookEditorRef"></bookModal>
|
|
<DownloadFrame ref="downloadFrame" parentId="DIVISION"></DownloadFrame>
|
|
<logModal ref="logRef"></logModal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, nextTick ,reactive, onBeforeMount, onMounted,onUnmounted, ref} from "vue";
|
|
import KTPageTitle from "@/layouts/main-layout/toolbar/PageTitle.vue";
|
|
import { toolbarWidthFluid } from "@/core/helpers/config";
|
|
import { AgGridVue } from "ag-grid-vue3"; // the AG Grid Vue Component
|
|
import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
|
|
import ApiService from "@/core/services/ApiService";
|
|
import {Modal} from "bootstrap";
|
|
import type { ResponseData } from "@/core/data/AjaxData";
|
|
import column from "./Column.vue";
|
|
import editModal from "./Modal.vue";
|
|
import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed
|
|
import "ag-grid-community/styles/ag-theme-balham.css"; // Optional theme CSS
|
|
import DownloadFrame from "@/views/apps/download/DownloadFrame.vue";
|
|
import {useAuthStore} from "@/stores/auth";
|
|
import Swal from "sweetalert2";
|
|
import { ElNotification } from 'element-plus';
|
|
import moment from "moment";
|
|
import CheckboxRender from "./CheckboxRender.vue";
|
|
import HeaderCheckboxRender from "./HeaderCheckboxRender.vue";
|
|
import bookModal from "./BookModal.vue";
|
|
import logModal from "./LogModal.vue";
|
|
|
|
export default defineComponent({
|
|
name: "system-users",
|
|
components: {
|
|
KTPageTitle,
|
|
AgGridVue,
|
|
column,
|
|
editModal,
|
|
DownloadFrame,
|
|
CheckboxRender,
|
|
HeaderCheckboxRender,
|
|
bookModal,
|
|
logModal
|
|
},
|
|
setup() {
|
|
ModuleRegistry.registerModules([ AllCommunityModule ]);
|
|
const downloadFrame=ref(null);
|
|
const gridApi = ref();
|
|
const pageSize = ref(20);
|
|
const rowHeight = 40;
|
|
const headerHeight=40;
|
|
const pageLoading = ref<boolean>(false);
|
|
let propertyData = ref({});
|
|
let roomTypeData = ref({});
|
|
const handleSelect=ref({
|
|
showSelect:false,
|
|
selectRecord:0
|
|
});
|
|
const pageRouterId = '00501';
|
|
const authStore = useAuthStore();
|
|
const show = ref<boolean>(false);
|
|
const css = ref<String>("");
|
|
const columnData = computed(() => {
|
|
return columnDefs
|
|
.filter(column => !column.hide)
|
|
.filter(column => column.headerName!=='Id')
|
|
.map((column, index) => ({
|
|
id: index + 1, // 自增 id，从1开始
|
|
headerName: column.headerName,
|
|
field: column.field,
|
|
status: 1 // 选中状态
|
|
}));
|
|
});
|
|
const bookingEditorRef = ref<editModal>(null);
|
|
const createBookEditorRef = ref<bookModal>(null);
|
|
const logRef = ref<logModal>(null);
|
|
const selectedIds = ref([]);
|
|
let isMSC = authStore.hasPermission(pageRouterId,'MSCSTATUS');
|
|
let gamingData = authStore.hasPermission(pageRouterId,'GAMINGDATA');
|
|
let isExpiry = authStore.hasPermission(pageRouterId,'EXPIRYSTATUS');
|
|
let isSharer = authStore.hasPermission(pageRouterId,'SHARER');
|
|
let startDate = moment().subtract(0, 'days').format('YYYY-MM-DD');
|
|
let handleAction = ref<String>("");
|
|
let exportColumnData = ref({});
|
|
const pageFilters = ref({
|
|
searchStatus:'AP',
|
|
searchPlayerId:'',
|
|
searchBookerId:'',
|
|
searchBookDate:null,
|
|
searchPropertyId:null,
|
|
searchBookerName:'',
|
|
searchBookerTeam:'',
|
|
searchCheckInDate:[startDate],
|
|
searchRoomId:[],
|
|
propertyName:'',
|
|
searchApproverName:'',
|
|
roomTypeName:'',
|
|
permissionId:'00401',
|
|
searchType:"",
|
|
searchApproverDate:null,
|
|
searchApproverId:null,
|
|
export_type:'approval_routing',
|
|
});
|
|
|
|
|
|
let waitlistStatus = ref("WC"); // 固定为 Cancelled，下拉框已隐藏
|
|
//const userDialog = new bootstrap.Modal('#kt_modal_add_customer', {});
|
|
// Obtain API from grid's onGridReady event
|
|
const onGridReady = (params) => {
|
|
gridApi.value = params.api;
|
|
const dataSource = ApiService.createTableDatasource('/web/booking/get_page',pageLoading,pageFilters);
|
|
params.api.setGridOption('datasource', dataSource);
|
|
};
|
|
|
|
const onPaginationChanged = (event) => {
|
|
// Since paginationPageSizeSelector is disabled, this function is not needed
|
|
// but kept for future reference if pagination selector is enabled again
|
|
if (gridApi.value) {
|
|
const newPageSize = gridApi.value.paginationGetPageSize();
|
|
console.log(newPageSize, pageSize.value)
|
|
if (newPageSize !== pageSize.value) {
|
|
pageSize.value = newPageSize;
|
|
adjustTable();
|
|
gridApi.value.setGridOption('cacheBlockSize', pageSize.value);
|
|
gridApi.value.setGridOption('cacheOverflowSize', pageSize.value);
|
|
|
|
gridApi.value.refreshInfiniteCache();
|
|
}
|
|
}
|
|
};
|
|
const reloadTableData =(isGoFirstPage) =>{
|
|
if(handleAction.value != 'EDIT'){
|
|
selectedIds.value = [];
|
|
handleSelect.value.selectRecord = 0;
|
|
handleSelect.value.showSelect = false;
|
|
}
|
|
if(isGoFirstPage && gridApi.value.paginationGetCurrentPage()!=0 && handleAction.value !== 'updateBatchStatus'){
|
|
gridApi.value.paginationGoToFirstPage();
|
|
}else{
|
|
gridApi.value.refreshInfiniteCache();
|
|
}
|
|
};
|
|
const actionCallback = ()=>{
|
|
reloadTableData(true);
|
|
};
|
|
const onCreateClickHandle = (evt)=>{
|
|
if(bookingEditorRef.value){
|
|
bookingEditorRef.value.openCreate(actionCallback);
|
|
}
|
|
};
|
|
const onCreateHandle = (evt)=>{
|
|
if(createBookEditorRef.value){
|
|
createBookEditorRef.value.openCreate(actionCallback);
|
|
}
|
|
};
|
|
const onSearchClickHandle =(evt)=>{
|
|
reloadTableData(true);
|
|
};
|
|
const onRowActionHandle = (pData, action)=>{
|
|
if(pData && action && bookingEditorRef.value){
|
|
if(action=='VIEW'){
|
|
bookingEditorRef.value.openView(pData.id);
|
|
}else if(action=='EDIT'){
|
|
handleAction.value = action;
|
|
createBookEditorRef.value.openEdit(pData.id,isMSC,actionCallback);
|
|
}else if(action=='VIEWLOG'){
|
|
logRef.value.openPreivew(pData.id,reloadTableData);
|
|
}else if(action=='DELETE'){
|
|
bookingEditorRef.value.openDelete(pData.id,actionCallback);
|
|
}
|
|
}
|
|
};
|
|
|
|
const getType = (pData)=>{
|
|
let val = pData.value
|
|
let type = "";
|
|
if(val==1){
|
|
type = "Extension"
|
|
}else if(val==0){
|
|
type = "New"
|
|
}
|
|
return type;
|
|
};
|
|
|
|
|
|
const getStatus = (pData)=>{
|
|
let status = {
|
|
AP: {'title': 'Pending Approved', 'state': 'warning'},
|
|
AA: {'title': 'Approved', 'state': 'success'},
|
|
AR: {'title': 'Reject', 'state': 'red'},
|
|
AC: {'title': 'Cancelled', 'state': 'dark'},
|
|
AE: {'title': 'Expired', 'state': 'dark'},
|
|
};
|
|
let val = pData.value;
|
|
|
|
if (typeof status[val] === 'undefined') {
|
|
return val;
|
|
}
|
|
return '<span class="badge badge-' + status[val].state + ' ">' + status[val].title + '</span>';
|
|
};
|
|
// Each Column Definition results in one Column.
|
|
const checkHeaderSelectState = () =>{
|
|
let isAll =false;
|
|
if(gridApi.value && gridApi.value.getDisplayedRowCount()==selectedIds.value.length && selectedIds.value.length>0){
|
|
isAll = true;
|
|
}
|
|
if(selectedIds.value.length>0){
|
|
handleSelect.value.showSelect = true;
|
|
handleSelect.value.selectRecord = selectedIds.value.length;
|
|
}else{
|
|
handleSelect.value.showSelect = false;
|
|
}
|
|
return isAll;
|
|
};
|
|
const onCheckboxChangeHandle = (pData, pIsChecked)=>{
|
|
if(pIsChecked){
|
|
if(!selectedIds.value.includes(pData))
|
|
selectedIds.value.push(pData);
|
|
}else{
|
|
let valIndex = selectedIds.value.indexOf(pData);
|
|
if(valIndex>=0)
|
|
selectedIds.value.splice(valIndex, 1);
|
|
}
|
|
if(gridApi.value)
|
|
gridApi.value.refreshHeader();
|
|
if(selectedIds.value.length>0){
|
|
handleSelect.value.showSelect = true;
|
|
handleSelect.value.selectRecord = selectedIds.value.length;
|
|
}else{
|
|
handleSelect.value.showSelect = false;
|
|
}
|
|
};
|
|
|
|
const getSharer = (pData)=>{
|
|
let val = pData.value
|
|
let sharerArr = [];
|
|
if(val!=undefined&&val!=""&&val!=null){
|
|
let jsonArr = JSON.parse(val);
|
|
for(let i of jsonArr){
|
|
if(i.playerId!=""&&i!=null){
|
|
sharerArr.push(i.playerId)
|
|
}
|
|
|
|
}
|
|
}
|
|
return sharerArr.join(";");
|
|
};
|
|
|
|
const getSharerName = (pData)=>{
|
|
let val = pData.value
|
|
let sharerArr = [];
|
|
if(val!=undefined&&val!=""&&val!=null){
|
|
let jsonArr = JSON.parse(val);
|
|
for(let i of jsonArr){
|
|
if(i.name!=""&&i!=null){
|
|
sharerArr.push(i.name)
|
|
}
|
|
|
|
}
|
|
}
|
|
return sharerArr.join(";");
|
|
};
|
|
|
|
const changeFormat = (pData)=>{
|
|
let val = pData.value;
|
|
if (/^-?\d+\.?\d*$/.test(val)) {
|
|
const num = parseFloat(val);
|
|
return new Intl.NumberFormat('en-US', {
|
|
maximumFractionDigits: 20
|
|
}).format(num);
|
|
}
|
|
return val;
|
|
}
|
|
|
|
|
|
const onHeaderCheckboxChangeHandle = (pIsChecked)=>{
|
|
if(pIsChecked){
|
|
if(gridApi.value){
|
|
const rowCount = gridApi.value.getDisplayedRowCount();
|
|
for (let i = 0; i < rowCount; i++) {
|
|
let rowData = gridApi.value.getDisplayedRowAtIndex(i).data;
|
|
if(rowData && rowData.id && !selectedIds.value.includes(rowData.id)){
|
|
selectedIds.value.push(rowData.id);
|
|
}
|
|
}
|
|
}
|
|
}else{
|
|
selectedIds.value=[];
|
|
}
|
|
};
|
|
const checkSelectState = (pData) =>{
|
|
return selectedIds.value.includes(pData);
|
|
};
|
|
const getBookType = (pData)=>{
|
|
let val = pData.value
|
|
let name = val==1?"Extend":"New";
|
|
return name;
|
|
};
|
|
|
|
// Each Column Definition results in one Column.
|
|
const columnDefs = [
|
|
{ headerName:"Id" , field: "id",minWidth:40, maxWidth:40, resizable: false,pinned: 'left',
|
|
headerComponent:HeaderCheckboxRender,
|
|
headerComponentParams:{
|
|
onCheckAction:onHeaderCheckboxChangeHandle,
|
|
checkStateFunc: checkHeaderSelectState,
|
|
},
|
|
cellRenderer: CheckboxRender,
|
|
cellRendererParams:{
|
|
onCheckAction:onCheckboxChangeHandle,
|
|
checkStateFunc: checkSelectState,
|
|
}
|
|
},
|
|
{ headerName:"Status" , width:130, field: "approveStatus",sortable: true,unSortIcon: true,pinned: 'left' , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
cellRenderer:getStatus ,
|
|
// onCellClicked(event: any) {
|
|
// updateStatus(event.data)
|
|
// }
|
|
},
|
|
{ headerName:"Create Time" ,width:100, field: "createdAt",sortable: true,unSortIcon: true,pinned: 'left' , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Conf#" ,width:100, field: "confirmationNo",sortable: true,unSortIcon: true,pinned: 'left' , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Patron ID" ,width:100, field: "playerId",sortable: true,unSortIcon: true,pinned: 'left' , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Player Name" ,width:100, field: "memberLastName",sortable: true,unSortIcon: true,pinned: 'left' , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Tier" , field: "tier" ,sortable: true,unSortIcon: true,width:100, resizable: true,pinned: 'left', cellClass: "cell-vertical-align-text-left",},
|
|
{ headerName:"Property" ,minWidth:100, field: "propertyName" ,sortable: true,unSortIcon: true, resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Room Catagory" , field: "room" ,sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Room Type" , field: "roomTypeCode" ,sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Type" , field: "bookType" ,sortable: true,unSortIcon: true,minWidth:60, resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
cellRenderer:getBookType,
|
|
},
|
|
{ headerName:"Check in Date" , field: "checkinDate",sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Check Out Date" , field: "checkoutDate" ,sortable: true,unSortIcon: true,minWidth:100, resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Continuous / Overlap Booking(C/I to C/O)" , field: "overlapBooking",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,hide:!gamingData, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Booker Team" , field: "sectionName",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Booker ID" , field: "createdBy",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Booker Name" , field: "booker",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Sharer" , field: "sharer", minWidth:150 , resizable: true,hide:!isSharer,
|
|
cellRenderer:getSharer},
|
|
{ headerName:"Sharer Name" , field: "sharer", minWidth:150 , resizable: true,hide:!isSharer,
|
|
cellRenderer:getSharerName},
|
|
{ headerName:"Remarks" , field: "remark",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left"},
|
|
|
|
{ headerName:"Ranking By Player Evaluation" ,sort:'desc', field: "dailyTheoProfit",sortable: true,unSortIcon: true, minWidth:150 , resizable: true,hide:!gamingData, cellClass: "cell-vertical-align-text-left"},
|
|
{ headerName:"Approval Remark" , field: "mscRemark",sortable: true,unSortIcon: true, minWidth:160 , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
editable: (params) => {
|
|
return true;
|
|
} ,
|
|
onCellValueChanged(event: any) {
|
|
updateRemark(event.data)
|
|
}
|
|
},
|
|
{ headerName:"Received Approver ID" , field: "approverId",sortable: true,unSortIcon: true, minWidth:190 , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
},
|
|
{ headerName:"Received Approver" , field: "approverName",sortable: true,unSortIcon: true, minWidth:170 , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
},
|
|
{ headerName:"Approval Reason" , field: "approvalReason",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
},
|
|
{ headerName:"Approver" , field: "approvedId",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
},
|
|
{ headerName:"Approved Date" , field: "approvedAt",sortable: true,unSortIcon: true, minWidth:150 , resizable: true, cellClass: "cell-vertical-align-text-left",
|
|
cellRenderer:params=>{
|
|
return params.value?moment(params.value).format("YYYY-MM-DD HH:mm:ss"):'';
|
|
}
|
|
},
|
|
{ headerName:"Operations" ,field: 'approveStatus', width:60,minWidth:60 ,resizable: false, pinned:'right',headerClass:"cell-vertical-align-text-center", cellClass: "cell-vertical-align-text-center",
|
|
cellRenderer:'column',
|
|
cellRendererParams:{
|
|
onRowAction:onRowActionHandle,
|
|
enableEdit: authStore.hasPermission(pageRouterId,'MODIFY'),
|
|
enableDelete: authStore.hasPermission(pageRouterId,'REMOVE'),
|
|
}
|
|
},
|
|
];
|
|
|
|
const selectedColumnIds = ref(columnDefs
|
|
.filter(column => !column.hide)
|
|
.filter(column => column.headerName!=='Id')
|
|
.map((_, index) => index + 1)
|
|
);
|
|
|
|
let newColumnDefs = columnDefs.map(columnDef => ({
|
|
...columnDef
|
|
}));
|
|
|
|
const changeColumn = () => {
|
|
const selectedColumnNames = columnData.value
|
|
.filter(col => selectedColumnIds.value.includes(col.id))
|
|
.map(col => col.headerName);
|
|
|
|
newColumnDefs = columnDefs.map(columnDef => ({
|
|
...columnDef,
|
|
hide: columnDef.headerName === 'Id' ? false : !selectedColumnNames.includes(columnDef.headerName)
|
|
}));
|
|
|
|
gridApi.value.setGridOption('columnDefs', newColumnDefs);
|
|
};
|
|
const getRowStyle = params => {
|
|
if(params.data){
|
|
if (params.data.approveStatus=="WC"||params.data.approveStatus=="WE") {
|
|
return { background: '#dadada' };
|
|
}
|
|
}
|
|
};
|
|
|
|
// DefaultColDef sets props common to all Columns
|
|
const defaultColDef = {
|
|
sortable: false,
|
|
filter: false,
|
|
flex: 1,
|
|
resizable: true, // resize col
|
|
suppressMovable:true, // move or drop col
|
|
};
|
|
|
|
const cellWasClicked = (event) => { // Example of consuming Grid Event
|
|
//console.log("cell was clicked", event);
|
|
};
|
|
let tableHeight = (pageSize.value+1) * rowHeight + headerHeight;
|
|
css.value = "minHeight:500px;height: "+tableHeight+"px;width:100%;font-family:'Inter-Regular';font-size:13px;";
|
|
// Example load data from server
|
|
|
|
const adjustTable=()=> {
|
|
var div1 = document.getElementById("mainDiv");
|
|
var div2 = document.getElementById("kt_app_toolbar");
|
|
var div3 = document.getElementById("divButtons");
|
|
tableHeight = div1?.clientHeight - div2?.clientHeight - div3?.clientHeight - 30;
|
|
css.value = "minHeight:500px;height: "+tableHeight+"px;width:100%;font-family:'Inter-Regular';font-size:13px;min-width: 1300px;";
|
|
show.value = true;
|
|
};
|
|
onMounted(() => {
|
|
adjustTable();
|
|
window.addEventListener("resize", adjustTable);
|
|
});
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", adjustTable);
|
|
});
|
|
|
|
const fetchProperty=()=>{
|
|
let reqParas = {
|
|
searchCategory:'',
|
|
permissionId:'00401',
|
|
category: 'ALL'
|
|
}
|
|
ApiService.processPostRequest('/app/property/list',reqParas,
|
|
(resData:ResponseData)=>{
|
|
propertyData.value=resData.data;
|
|
},
|
|
(resData:ResponseData)=>{
|
|
|
|
},
|
|
(error)=>{
|
|
|
|
});
|
|
};
|
|
fetchProperty();
|
|
|
|
const fetchRoom=()=>{
|
|
let reqParas = {
|
|
searchPropertyId:pageFilters.value.searchPropertyId!=undefined&&pageFilters.value.searchPropertyId!=0?pageFilters.value.searchPropertyId:null,
|
|
category: 'ALL',
|
|
}
|
|
ApiService.processPostRequest('/app/room/list',reqParas,
|
|
(resData:ResponseData)=>{
|
|
roomTypeData.value=resData.data;
|
|
},
|
|
(resData:ResponseData)=>{
|
|
|
|
},
|
|
(error)=>{
|
|
|
|
});
|
|
};
|
|
fetchRoom();
|
|
|
|
|
|
const changeProperty = (val)=>{
|
|
let propertyName = "";
|
|
pageFilters.value.searchRoomId = [];
|
|
propertyData.value.forEach(e => {
|
|
if(e.id==val){
|
|
propertyName = e.name
|
|
}
|
|
});
|
|
|
|
fetchRoom();
|
|
pageFilters.value.propertyName = propertyName;
|
|
|
|
};
|
|
|
|
|
|
|
|
const changeRoomType = (val)=>{
|
|
let roomTypeName = [];
|
|
roomTypeName.value.forEach(e => {
|
|
val.forEach(r => {
|
|
if(e.id==r){
|
|
roomTypeName.push(e.name)
|
|
}
|
|
});
|
|
});
|
|
pageFilters.value.roomTypeName = roomTypeName.join(',');
|
|
};
|
|
|
|
|
|
const updateStatus = (dataObj) => {
|
|
if(isMSC){
|
|
if(dataObj.approveStatus!="WA") return;
|
|
}else{
|
|
if(dataObj.approveStatus!="W") return;
|
|
}
|
|
|
|
if (dataObj) {
|
|
let createdTime = new Date(dataObj.createdAt)
|
|
let updatedTime = new Date(dataObj.updatedAt)
|
|
let createdAt = moment(createdTime).format('YYYY-MM-DD HH:mm:ss')
|
|
let updatedAt = moment(updatedTime).format('YYYY-MM-DD HH:mm:ss')
|
|
dataObj.createdAt = createdAt
|
|
dataObj.updatedAt = updatedAt
|
|
pageLoading.value = true;
|
|
let postUrl = '/web/waitlist/update_waitlist_status';
|
|
ApiService.processPostRequest(postUrl, dataObj,
|
|
(resData: ResponseData) => {
|
|
pageLoading.value = false;
|
|
ElNotification({ position: 'bottom-right',
|
|
title: 'Success',
|
|
message: 'Booking has been successfully saved!',
|
|
type: 'success',
|
|
});
|
|
onSearchClickHandle(false)
|
|
},
|
|
(resData: ResponseData) => {
|
|
pageLoading.value = false;
|
|
ElNotification({ position: 'bottom-right',
|
|
title: 'Fail',
|
|
message: 'Save data failed![' + resData.message + ']',
|
|
type: 'error',
|
|
});
|
|
},
|
|
(error) => {
|
|
pageLoading.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 booking info',
|
|
type: 'error',
|
|
});
|
|
}
|
|
};
|
|
|
|
const updateRemark = (dataObj) => {
|
|
if (dataObj) {
|
|
let postUrl = '/app/waitlist/update_waitlist_remark';
|
|
ApiService.processPostRequest(postUrl, dataObj,
|
|
(resData: ResponseData) => {
|
|
pageLoading.value = false;
|
|
ElNotification({ position: 'bottom-right',
|
|
title: 'Success',
|
|
message: 'Booking has been successfully saved!',
|
|
type: 'success',
|
|
});
|
|
},
|
|
(resData: ResponseData) => {
|
|
ElNotification({ position: 'bottom-right',
|
|
title: 'Fail',
|
|
message: 'Save data failed![' + resData.message + ']',
|
|
type: 'error',
|
|
});
|
|
},
|
|
(error) => {
|
|
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 booking info',
|
|
type: 'error',
|
|
});
|
|
}
|
|
};
|
|
|
|
const updateBatchStatus = () => {
|
|
handleAction.value = 'updateBatchStatus';
|
|
if(selectedIds.value.length==0){
|
|
Swal.fire({
|
|
text: 'Please Select Data',
|
|
icon: "info",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
heightAuto: false,
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
if(waitlistStatus.value==""){
|
|
Swal.fire({
|
|
text: 'Please Select Status',
|
|
icon: "info",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
heightAuto: false,
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
if (selectedIds.value.length>0) {
|
|
pageLoading.value = true;
|
|
let postUrl = '/app/approval/batch_cancel_approval';
|
|
let dataObj = {
|
|
'bookId' : selectedIds.value.join(";"),
|
|
}
|
|
ApiService.processPostRequest(postUrl, dataObj,
|
|
(resData: ResponseData) => {
|
|
pageLoading.value = false;
|
|
ElNotification({ position: 'bottom-right',
|
|
title: 'Success',
|
|
message: 'Booking has been successfully saved!',
|
|
type: 'success',
|
|
});
|
|
onSearchClickHandle()
|
|
},
|
|
(resData: ResponseData) => {
|
|
pageLoading.value = false;
|
|
Swal.fire({
|
|
text: resData.message,
|
|
icon: "error",
|
|
buttonsStyling: false,
|
|
confirmButtonText: "Ok, got it!",
|
|
heightAuto: false,
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
},
|
|
});
|
|
},
|
|
(error) => {
|
|
pageLoading.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 booking info',
|
|
type: 'error',
|
|
});
|
|
}
|
|
};
|
|
const handleExport=()=>{
|
|
if(downloadFrame.value){
|
|
let exportUrl = '/app/booking/export_excel?';
|
|
exportUrl += ApiService.encodeObjToUrl(pageFilters.value);
|
|
pageLoading.value=true;
|
|
downloadFrame.value.startDownload(exportUrl,'FailBooking.xlsx',pageLoading);
|
|
}
|
|
};
|
|
|
|
return {
|
|
onGridReady,
|
|
columnDefs,
|
|
pageSize,
|
|
pageLoading,
|
|
pageFilters,
|
|
defaultColDef,
|
|
cellWasClicked,
|
|
onCreateClickHandle,
|
|
onSearchClickHandle,
|
|
handleExport,
|
|
downloadFrame,
|
|
bookingEditorRef,
|
|
rowData: [],
|
|
rowHeight,
|
|
headerHeight,
|
|
toolbarWidthFluid,
|
|
css,
|
|
show,
|
|
getRowStyle,
|
|
authStore,
|
|
pageRouterId,
|
|
propertyData,
|
|
roomTypeData,
|
|
changeProperty,
|
|
changeRoomType,
|
|
updateBatchStatus,
|
|
waitlistStatus,
|
|
createBookEditorRef,
|
|
bookModal,
|
|
onCreateHandle,
|
|
logRef,
|
|
isMSC,
|
|
getSharer,
|
|
getSharerName,
|
|
changeFormat,
|
|
onPaginationChanged,
|
|
handleAction,
|
|
isExpiry,
|
|
handleSelect,
|
|
isSharer,
|
|
columnData,
|
|
selectedColumnIds,
|
|
changeColumn,
|
|
newColumnDefs
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.custom-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
.badge-warning {
|
|
color: #ffffff;
|
|
background-color: #C39A4B!important;
|
|
}
|
|
.badge-red {
|
|
color: #ffffff;
|
|
background-color: #d5460d!important;
|
|
}
|
|
.badge-blue {
|
|
color: #ffffff;
|
|
background-color: #5B9BD5!important;
|
|
}
|
|
|
|
</style>
|
|
|