1801 lines
83 KiB
Plaintext
1801 lines
83 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="create.aspx.cs" Inherits="admin_guadan_create" %>
|
||
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
|
||
<fieldset class="border rounded p-4 mb-5 shadow-sm bg-white">
|
||
<legend class="w-auto px-3 font-weight-bold text-primary">掛單資訊</legend>
|
||
<!-- 🟢 區塊一：掛單資訊 -->
|
||
<div class="border rounded p-3 bg-white shadow-sm">
|
||
<h6 class="text-secondary mb-3">📝掛單資訊</h6>
|
||
<div class="form-group row mt-3">
|
||
<label class="col-sm-2 col-form-label text-center">掛單單號(不可修改)</label>
|
||
<div class="col-sm-4 text-left">
|
||
<input class="form-control" v-model="guadanorder.order_form.orderNo" readonly />
|
||
</div>
|
||
<label class="col-sm-2 col-form-label text-center">關聯活動</label>
|
||
<div class="col-sm-4">
|
||
<select class="form-control" v-model="guadanorder.order_form.activityNum" >
|
||
<option :value="null">未關聯</option>
|
||
<option v-for="activity in activityList" :key="activity.num" :value="activity.num">
|
||
{{activity.subject}}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group row mt-3">
|
||
<label class="col-sm-2 col-form-label text-center">
|
||
預約開始日期
|
||
</label>
|
||
<div class="col-sm-4 text-left">
|
||
<input class="form-control" type="date" v-model="guadanorder.order_form.startdate" />
|
||
</div>
|
||
<label class="col-sm-2 col-form-label text-center">
|
||
預約結束日期
|
||
</label>
|
||
<div class="col-sm-4">
|
||
<input class="form-control" type="date" v-model="guadanorder.order_form.enddate" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row mt-3">
|
||
<label class="col-sm-2 col-form-label text-center">預定人姓名</label>
|
||
<div class="col-sm-4">
|
||
<input class="form-control" v-model="guadanorder.order_form.bookerName" />
|
||
</div>
|
||
<label class="col-sm-2 col-form-label text-center">預定人電話</label>
|
||
<div class="col-sm-4">
|
||
<input class="form-control" v-model="guadanorder.order_form.bookerPhone" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group row mt-3">
|
||
<label class="col-sm-2 col-form-label text-center">備註</label>
|
||
<div class="col-sm-4">
|
||
<textarea class="form-control" v-model="guadanorder.order_form.note"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3">
|
||
<button v-if="guadanorder.order_form.uuid" type="button" class="btn btn-primary mx-auto" style="width: 120px;" @click="updateGuadanOrder">修改</button>
|
||
<button v-else v-on:click="createGuadanOrder" type="button" class="btn btn-primary mx-auto" style="width: 120px;">儲存</button>
|
||
</div>
|
||
</div>
|
||
|
||
</fieldset>
|
||
<fieldset class="border rounded p-4 mb-5 shadow-sm bg-white">
|
||
<!-- 表格標題緊貼表格上方，居中 -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<!-- 左側按鈕 -->
|
||
<v-btn color="primary" variant="elevated" @click="showCheckInModal" class="me-3">
|
||
<v-icon start>mdi-plus</v-icon>
|
||
增加蓮友
|
||
</v-btn>
|
||
<v-btn @click="showAutomaticBedAllocation">
|
||
自動分配床位
|
||
</v-btn>
|
||
|
||
<!-- 中間標題（flex-grow撐開居中） -->
|
||
<div class="flex-grow-1 text-center">
|
||
<h5 class="text-primary fw-bold mb-0">
|
||
<i class="bi bi-people-fill me-2"></i>掛單蓮友
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- v-data-table 表格 -->
|
||
<v-data-table :headers="guadanguest.headers" :items="guadanguest.items" class="elevation-1 rounded" dense>
|
||
<template #item.checkinat="{item}">
|
||
{{item.checkinat |timeString('YYYY-MM-DD')}}
|
||
</template>
|
||
<template #item.checkoutat="{item}">
|
||
{{item.checkoutat |timeString('YYYY-MM-DD')}}
|
||
</template>
|
||
<template v-slot:item.name="{item}">
|
||
{{item.follower?.u_name}}
|
||
</template>
|
||
<template #item.actions="{ item }">
|
||
<div>
|
||
<!-- 取消預訂 -->
|
||
<v-btn
|
||
color="red"
|
||
variant="outlined"
|
||
size="small"
|
||
class="me-2"
|
||
:disabled="item.statuscode !== '401'"
|
||
@click="confirmDeleteGuadanOrderGuest(item)"
|
||
>
|
||
取消預訂
|
||
</v-btn>
|
||
<v-btn
|
||
color="red"
|
||
variant="outlined"
|
||
size="small"
|
||
class="me-2"
|
||
:disabled="item.statuscode !== '401'"
|
||
@click="checkinGuadanGuest(item)"
|
||
>
|
||
入住
|
||
</v-btn>
|
||
<v-btn
|
||
color="red"
|
||
variant="outlined"
|
||
size="small"
|
||
class="me-2"
|
||
:disabled="item.statuscode !== '402'"
|
||
@click="showXuzhuGuestModalMethod(item)">
|
||
續住
|
||
</v-btn>
|
||
<!-- 退房 -->
|
||
<v-btn
|
||
color="primary"
|
||
variant="outlined"
|
||
size="small"
|
||
:disabled="item.statuscode !== '402'"
|
||
@click="checkoutGuadanOrderGuest(item)"
|
||
>
|
||
<v-icon start>mdi-exit-run</v-icon>
|
||
退房
|
||
</v-btn>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
</v-data-table>
|
||
</fieldset>
|
||
<!-- 🟢 續住彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="guadanguest.xuzhu.showXuzhuGuestModal" max-width="50%">
|
||
<v-card
|
||
class="pa-6 d-flex flex-column" style="min-height: 60vh; border-radius: 12px;"
|
||
style="min-height: 40vh; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15);"
|
||
>
|
||
<!-- 弹窗标题 -->
|
||
<v-card-title
|
||
class="text-h6 d-flex align-center justify-space-between pb-4"
|
||
style="border-bottom: 1px solid #eee;"
|
||
>
|
||
<div class="d-flex align-center">
|
||
<span class="font-weight-bold">续住</span>
|
||
</div>
|
||
<v-btn icon @click="closeXuzhuGuestModalMethod">
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</v-card-title>
|
||
|
||
<!-- 弹窗内容 -->
|
||
<v-card-text class="flex-grow-1 py-6" style="overflow-y: auto;">
|
||
<div class="mb-4">
|
||
<span class="font-weight-medium">当前退房时间：</span>
|
||
<span class="text-primary">{{ guadanguest.xuzhu.currentCheckoutDate }}</span>
|
||
</div>
|
||
<div class="d-flex align-center">
|
||
<span class="font-weight-medium mr-2">续住后退房时间:</span>
|
||
<input
|
||
type="date"
|
||
id="newCheckoutDate"
|
||
v-model="guadanguest.xuzhu.newCheckoutDate"
|
||
class="pa-2"
|
||
style="border: 1px solid #ccc; border-radius: 6px; padding: 6px 10px;"
|
||
/>
|
||
</div>
|
||
</v-card-text>
|
||
|
||
<!-- 弹窗操作按钮 -->
|
||
<v-card-actions class="justify-end pt-4" style="border-top: 1px solid #eee;">
|
||
<v-btn color="primary" class="px-6" @click="xuzhuPost">续住</v-btn>
|
||
<v-btn text class="ml-2" @click="closeXuzhuGuestModalMethod">取消</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
|
||
<!-- 🟢 掛單蓮友彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="checkInGuest.showSelectGuadanOrderGuest" max-width="80%">
|
||
<v-card class="pa-6" style="min-height: 90vh;">
|
||
<!-- 標題列 -->
|
||
<v-card-title class="text-h6 d-flex align-center justify-space-between pb-4">
|
||
<div class="d-flex align-center">
|
||
<v-icon class="me-2">mdi-account-multiple-plus</v-icon>
|
||
<span>掛單蓮友資料</span>
|
||
</div>
|
||
<v-btn icon @click="closeCheckInModal">
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</v-card-title>
|
||
|
||
<!-- 內容區 -->
|
||
<v-card-text class="py-6">
|
||
<v-container>
|
||
<v-row dense>
|
||
<!-- 掛單單號 -->
|
||
<v-col cols="12">
|
||
<v-text-field v-model="checkInGuest.inGuest.orderNo" label="掛單單號" readonly variant="underlined"></v-text-field>
|
||
</v-col>
|
||
|
||
<!-- 入住時間 -->
|
||
<v-col cols="12" sm="6">
|
||
<v-text-field
|
||
v-model="checkInGuest.inGuest.checkInAt"
|
||
label="入住時間" type="date"
|
||
variant="underlined"></v-text-field>
|
||
</v-col>
|
||
|
||
<!-- 退房時間 -->
|
||
<v-col cols="12" sm="6">
|
||
<v-text-field
|
||
v-model="checkInGuest.inGuest.checkOutAt"
|
||
label="退房時間" type="date"
|
||
variant="underlined"></v-text-field>
|
||
</v-col>
|
||
<!-- 蓮友選擇 -->
|
||
<v-col cols="12" sm="6">
|
||
<div class="d-flex align-center" style="height: 100%;">
|
||
<v-btn color="teal" variant="outlined" block @click="showSelectGuestModalMethod">
|
||
<v-icon left class="me-2">mdi-account-search</v-icon>
|
||
選擇掛單蓮友
|
||
</v-btn>
|
||
</div>
|
||
</v-col>
|
||
|
||
<v-col cols="12" sm="6">
|
||
<div class="d-flex flex-column justify-center" style="height: 100%;">
|
||
<div>
|
||
<div class="text-muted text-sm">
|
||
已選：<strong>{{ selectGuestModal?.fullNameText || '未選擇' }}</strong>
|
||
</div>
|
||
<div class="text-info text-xs mt-1">如無符合，請先新增蓮友資料</div>
|
||
</div>
|
||
</div>
|
||
</v-col>
|
||
|
||
<!-- 床位選擇 -->
|
||
<v-col cols="12" sm="6">
|
||
<div class="d-flex align-center" style="height: 100%;">
|
||
<v-btn color="indigo" variant="outlined" block @click="openSelectBedModal">
|
||
<v-icon left class="me-2">mdi-bed</v-icon>
|
||
選擇床位
|
||
</v-btn>
|
||
</div>
|
||
</v-col>
|
||
<v-col cols="12" sm="6">
|
||
<div class="d-flex flex-column justify-center" style="height: 100%;">
|
||
<div class="text-muted text-sm">
|
||
已選床位：<strong>{{ region_modal.currentSelectBedText }}</strong>
|
||
</div>
|
||
<div class="text-info text-xs mt-1">請從床位清單中選擇</div>
|
||
</div>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</v-card-text>
|
||
|
||
<!-- 操作按鈕 -->
|
||
<v-card-actions class="justify-end pt-6">
|
||
<v-btn color="primary" @click="saveEditGuadanOrderGuest" v-if="checkInGuest.isEdit">
|
||
<v-icon left class="me-1">mdi-content-save</v-icon>
|
||
修改
|
||
</v-btn>
|
||
|
||
<v-btn color="primary" @click="saveCheckInGuest" v-else>
|
||
<v-icon left class="me-1">mdi-content-save</v-icon>
|
||
儲存
|
||
</v-btn>
|
||
<v-btn variant="text" @click="closeCheckInModal">
|
||
<v-icon left class="me-1">mdi-close-circle-outline</v-icon>
|
||
取消
|
||
</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
<!-- 子彈出視窗打開時，添加一個透明遮罩層覆蓋整個界面 -->
|
||
<v-overlay v-if="selectGuestModal.showSelectGuestModal" :scrim="false" persistent style="z-index: 202;"></v-overlay>
|
||
</v-dialog>
|
||
</div>
|
||
<!-- 選擇床位彈出視窗 -->
|
||
<div id="bedSelectionModal" v-if="region_modal.showSelectBedModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||
background-color: rgba(0,0,0,0.5); z-index: 10000; display: flex; justify-content: center; align-items: center;">
|
||
<div style="background: white; min-width: 70%; min-height: 80%; max-width: 80%; max-height: 80%;
|
||
display: flex; border-radius: 4px; height: 100%;">
|
||
|
||
<div style="display: flex; width: 100%; height: 100%;">
|
||
|
||
<!-- 左側 30% -->
|
||
<div style="width: 30%; border-right: 1px solid #e8e8e8; height: 100%; display: flex; flex-direction: column;">
|
||
<div style="padding: 12px 16px; border-bottom: 1px solid #e8e8e8; flex-shrink: 0;">
|
||
<h3 style="margin: 0; font-size: 16px; font-weight: normal;">區域列表</h3> <span>當前可用床位：{{availableBedCount.male + '(男)'}} {{availableBedCount.female + '(女)'}}</span>
|
||
</div>
|
||
<div style="padding: 8px 0; overflow-y: auto; flex: 1;">
|
||
<div v-for="region in region_modal.regions" :key="region.id">
|
||
<div class="tree" style="padding: 8px 16px; cursor: pointer; display: flex; align-items: center;">
|
||
<region-item :item="region" :selected-id="region_modal.selectedId" :selected-type="region_modal.selectedType" @select-region="selectRegion" @select-room="selectRoom" :expand-all="region_modal.expandAllFlag" :collapse-all="region_modal.collapseAllFlag" @clear-expand-all="region_modal.expandAllFlag = false" @clear-collapse-all="region_modal.collapseAllFlag = false" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右側 70% -->
|
||
<div style="width: 70%; display: flex; flex-direction: column; height: 100%;">
|
||
<div style="padding: 12px 16px; border-bottom: 1px solid #e8e8e8; flex-shrink: 0;">
|
||
<h3 style="margin: 0; font-size: 16px; font-weight: normal;">床位列表</h3>
|
||
<div>掛單起訖時間：{{checkInGuest.inGuest.checkInAt|timeString('YYYY-MM-DD')}} - {{checkInGuest.inGuest.checkOutAt|timeString('YYYY-MM-DD')}}</div>
|
||
</div>
|
||
|
||
<div style="flex: 1; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow-y: auto;">
|
||
<div v-for="bed in region_modal.currentSelectBeds" :key="bed.uuid" @click="selectBed(bed)" style="padding: 8px; border: 1px solid #d9d9d9; cursor: pointer; max-height: 250px;" :style="{
|
||
backgroundColor: region_modal.currentSelectBed?.uuid === bed.uuid
|
||
? '#bae7ff' // 當前選中
|
||
: (bed.canUsed ? '#f6ffed' : '#fff1f0'), // 可用綠色，不可用紅色
|
||
color: bed.canUsed ? 'black' : '#999', // 不可用時灰色文字
|
||
pointerEvents: bed.canUsed ? 'auto' : 'none' // 不可用時無法點擊
|
||
}">
|
||
<div style="font-weight: 500;">{{ bed.name }}</div>
|
||
<div style="margin-top: 4px; font-size: 12px;">
|
||
{{ bed.canUsed ? '可用' : '不可用' }}
|
||
</div>
|
||
|
||
<div
|
||
v-for="schedule in bed.schedule"
|
||
:key="schedule.id"
|
||
style="margin-top: 4px; font-size: 12px; background-color: #fafafa; padding: 4px; border-radius: 4px;"
|
||
>
|
||
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||
🕒 {{ schedule.scheduledate|timeString("YYYY-MM-DD") }}
|
||
</div>
|
||
<div style="color: #555;">📌 {{ schedule.title }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding: 12px 16px; text-align: right; border-top: 1px solid #e8e8e8; flex-shrink: 0;">
|
||
<span class="me-8 shadow-lg">當前已選擇床位： {{ region_modal.currentSelectBedText }}</span>
|
||
<button type="button" @click="cancelSelectBed" style="margin-right: 8px; padding: 4px 15px; background: #fff; border: 1px solid #d9d9d9; border-radius: 2px; cursor: pointer;">
|
||
取消
|
||
</button>
|
||
<button type="button" @click="confirmSelectBed" v-if="region_modal.currentSelectBed" style="padding: 4px 15px; background: #1890ff; color: #fff; border: 1px solid #1890ff; border-radius: 2px; cursor: pointer;">
|
||
確定
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 選擇蓮友彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="selectGuestModal.showSelectGuestModal" max-width="70%" scrollable persistent>
|
||
<v-card>
|
||
<v-card-title class="text-h6 d-flex align-center justify-space-between pb-4">
|
||
<div class="d-flex align-center">
|
||
<v-icon class="me-2">mdi-account-multiple-plus</v-icon>
|
||
<span>蓮友列表</span>
|
||
</div>
|
||
<div class="mx-4 d-flex align-center" style="flex: 1 1 50%; max-width: 50%;">
|
||
<input class="form-control me-2" style="flex: 1 1 auto; min-width: 0;" placeholder="搜尋..." v-model="selectGuestModal.searchNameOrPhone" />
|
||
<button @click="getGuadanFollowers" type="button" class="btn btn-primary" style="white-space: nowrap;">搜索</button>
|
||
</div>
|
||
|
||
|
||
<v-btn icon @click="selectGuestModal.showSelectGuestModal=false">
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</v-card-title>
|
||
<v-card-text style="max-height: 500px; overflow-y: auto;">
|
||
<v-data-table
|
||
:headers="selectGuestModal.headers"
|
||
:items="selectGuestModal.items"
|
||
:options.sync="selectGuestModal.options"
|
||
:footer-props="selectGuestModal.footer"
|
||
hide-default-footer
|
||
:server-items-length="selectGuestModal.count"
|
||
:page.sync="selectGuestModal.page"
|
||
:items-per-page.sync="selectGuestModal.pageSize">
|
||
<template v-slot:item.actions="{item}">
|
||
<button type="button" @click="selectGuadanOrderGuest(item)" class="btn btn-primary">選擇</button>
|
||
</template>
|
||
</v-data-table>
|
||
</v-card-text>
|
||
<div class="ms-10">
|
||
<v-container>
|
||
<v-row class="align-baseline" wrap>
|
||
<v-col cols="12" md="9">
|
||
<v-pagination v-model="selectGuestModal.page" :length="pageCount">
|
||
</v-pagination>
|
||
</v-col>
|
||
<v-col class="text-truncate text-right" cols="12" md="2">
|
||
共 {{ selectGuestModal.count }} 筆, 頁數:
|
||
</v-col>
|
||
<v-col cols="6" md="1">
|
||
<v-text-field v-model="selectGuestModal.page" type="number" hide-details dense min="1" :max="pageCount" @input="selectGuestModal.page = parseInt($event, 10)"></v-text-field>
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</div>
|
||
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
<!-- 自動分配彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="automaticBedAllocation.showModal" max-width="80%">
|
||
<v-card class="pa-6" style="height: 90vh; display: flex; flex-direction: column;">
|
||
<!-- 標題列 -->
|
||
<v-card-title class="text-h6 d-flex align-center justify-space-between pb-4" style="flex: 0 0 auto;">
|
||
<div class="d-flex align-center">
|
||
<v-icon class="me-2">mdi-account-multiple-plus</v-icon>
|
||
<span>床位自動分配</span>
|
||
</div>
|
||
<div>
|
||
<span>當前可用床位：{{availableBedCount.male + '(男)'}} {{availableBedCount.female + '(女)'}}</span>
|
||
</div>
|
||
</v-card-title>
|
||
|
||
<!-- 內容區，高度自動填滿 -->
|
||
<div style="flex: 1 1 auto; display: flex; overflow: hidden; gap: 16px;">
|
||
|
||
<!-- 左側 30% -->
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fafafa;
|
||
box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
|
||
"
|
||
>
|
||
<!-- 左側標題 -->
|
||
<div
|
||
style="
|
||
padding: 14px 20px;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
background: linear-gradient(90deg, #6a8cff, #3b5de7);
|
||
color: white;
|
||
border-top-left-radius: 8px;
|
||
border-top-right-radius: 8px;
|
||
box-shadow: 0 2px 6px rgb(58 94 255 / 0.5);
|
||
user-select: none;
|
||
"
|
||
>
|
||
自動分配條件
|
||
</div>
|
||
<!-- 左側內容滾動區 -->
|
||
<div style="padding: 16px; overflow: auto; flex: 1;">
|
||
<!-- 這裡放左側具體內容 -->
|
||
指定區域<br />
|
||
指定房間<br />
|
||
便利設施<br />
|
||
盡量分配在同一個房間<br />
|
||
<br />
|
||
<br />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右側 70%，上下分割 -->
|
||
<div
|
||
style="
|
||
width: 70%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
"
|
||
>
|
||
<!-- 右側上半部 -->
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
|
||
background-color: #fff;
|
||
"
|
||
>
|
||
<!-- 右側上半部標題列 -->
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 14px 20px;
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
background: linear-gradient(90deg, #4f86f7, #1c5bd9);
|
||
color: white;
|
||
border-top-left-radius: 8px;
|
||
border-top-right-radius: 8px;
|
||
box-shadow: 0 3px 8px rgb(31 78 250 / 0.5);
|
||
user-select: none;
|
||
"
|
||
>
|
||
<span>待分配蓮友列表</span>
|
||
<div>
|
||
<button
|
||
@click="showautomaticBedAllocationMethod"
|
||
type="button"
|
||
style="
|
||
padding: 8px 18px;
|
||
background-color: #ffffff;
|
||
color: #1c5bd9;
|
||
border: none;
|
||
border-radius: 20px;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
box-shadow: 0 2px 6px rgba(28, 91, 217, 0.4);
|
||
user-select: none;
|
||
"
|
||
onmouseover="this.style.backgroundColor='#e6e6e6';"
|
||
onmouseout="this.style.backgroundColor='white';"
|
||
>
|
||
選擇蓮友
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style="
|
||
padding: 8px 18px;
|
||
background-color: #ffffff;
|
||
color: #1c5bd9;
|
||
border: none;
|
||
border-radius: 20px;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s ease;
|
||
box-shadow: 0 2px 6px rgba(28, 91, 217, 0.4);
|
||
user-select: none;
|
||
"
|
||
onmouseover="this.style.backgroundColor='#e6e6e6';"
|
||
onmouseout="this.style.backgroundColor='white';"
|
||
@click="preAllocation"
|
||
>按條件自動預分配</button>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 右側上半部內容滾動區 -->
|
||
<div style="padding: 16px; overflow: auto; flex: 1;">
|
||
<v-data-table
|
||
:items="automaticBedAllocation.selectedFollowers"
|
||
:headers="automaticBedAllocation.headers">
|
||
<template #item.prebed="{item}">
|
||
{{ getPreBed(item.num)?.bedUuid}}
|
||
</template>
|
||
<template #item.actions="{item}">
|
||
<button
|
||
class="btn btn-outline-danger btn-sm"
|
||
type="button"
|
||
style="min-width: 70px;"
|
||
@click="removeSelectedFollower(item.num);removePreBed(item.num)"
|
||
>
|
||
<i class="mdi mdi-delete-outline me-1"></i> 刪除
|
||
</button>
|
||
|
||
</template>
|
||
</v-data-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 底部按鈕區 -->
|
||
<v-card-actions
|
||
style="
|
||
justify-content: flex-end;
|
||
border-top: 1px solid #eee;
|
||
padding: 16px 24px;
|
||
background-color: #f9f9f9;
|
||
flex: 0 0 auto;
|
||
"
|
||
>
|
||
<v-btn color="primary" @click="cancelAutomaticBedAllocation">
|
||
取消分配
|
||
</v-btn>
|
||
<v-btn color="primary" @click="confirmAllocation" class="ms-3" :disabled="automaticBedAllocation.preBeds.length === 0">
|
||
確認分配
|
||
</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
|
||
<!-- 子彈出視窗打開時，添加一個透明遮罩層覆蓋整個界面 -->
|
||
<v-overlay v-if="automaticBedAllocation.followerModal.showModal" :scrim="false" persistent style="z-index: 202;"></v-overlay>
|
||
</v-dialog>
|
||
</div>
|
||
<!-- 自動分配選擇蓮友彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="automaticBedAllocation.followerModal.showModal" max-width="70%" scrollable persistent>
|
||
<v-card>
|
||
<v-card-title class="text-h6 d-flex align-center justify-space-between pb-4">
|
||
<div class="d-flex align-center">
|
||
<v-icon class="me-2">mdi-account-multiple-plus</v-icon>
|
||
<span>蓮友列表</span>
|
||
</div>
|
||
<div class="mx-4 d-flex align-center" style="flex: 1 1 50%; max-width: 50%;">
|
||
<input class="form-control me-2" style="flex: 1 1 auto; min-width: 0;" placeholder="搜尋..." v-model="automaticBedAllocation.followerModal.searchNameOrPhone" />
|
||
<button @click="getMultiSelectFollowers" type="button" class="btn btn-primary" style="white-space: nowrap;">搜索</button>
|
||
</div>
|
||
|
||
|
||
<v-btn icon @click="automaticBedAllocation.followerModal.showModal=false">
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</v-card-title>
|
||
<v-card-text style="max-height: 500px; overflow-y: auto;">
|
||
<v-data-table
|
||
:headers="automaticBedAllocation.followerModal.headers"
|
||
:items="automaticBedAllocation.followerModal.followerList"
|
||
:items-per-page="automaticBedAllocation.followerModal.pageSize"
|
||
:page.sync="automaticBedAllocation.followerModal.page"
|
||
:value="automaticBedAllocation.followerModal.selectedFollowerItems"
|
||
@input="onMultiSelectChange"
|
||
show-select
|
||
item-key="num"
|
||
hide-default-footer
|
||
:item-class="getFollowerRowClass"
|
||
>
|
||
<template #item.data-table-select="{ item, isSelected, select }">
|
||
<v-simple-checkbox
|
||
:value="isSelected"
|
||
:disabled="isFollowerDisabled(item)"
|
||
@input="select($event)"
|
||
/>
|
||
</template>
|
||
|
||
<template #header.data-table-select>
|
||
<!-- 留空即可去掉全選 -->
|
||
</template>
|
||
<template #item.actions="{item}">
|
||
{{isFollowerDisabled(item) ? '已掛單' : ''}}
|
||
</template>
|
||
</v-data-table>
|
||
</v-card-text>
|
||
<div class="ms-10">
|
||
<v-container>
|
||
<v-row class="align-baseline" wrap>
|
||
<v-col cols="12" md="9">
|
||
<!-- 分頁 -->
|
||
<v-pagination
|
||
v-model="automaticBedAllocation.followerModal.page"
|
||
:length="pageCount2"
|
||
></v-pagination>
|
||
</v-col>
|
||
<v-col class="text-truncate text-right" cols="12" md="2">
|
||
共 {{ automaticBedAllocation.followerModal.totalCount }} 筆
|
||
</v-col>
|
||
</v-row>
|
||
</v-container>
|
||
</div>
|
||
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
|
||
|
||
<!-- 更新修改確認彈出視窗 -->
|
||
<message-modal ref="messageModal"></message-modal>
|
||
<!-- 刪除確認彈出視窗 -->
|
||
<confirm-modal ref="confirmModal"></confirm-modal>
|
||
|
||
</asp:Content>
|
||
|
||
<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
|
||
<style>
|
||
/* 調整 fieldset 風格 */
|
||
fieldset {
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 0.5rem;
|
||
background-color: #fff;
|
||
}
|
||
|
||
legend {
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
color: #0d6efd;
|
||
width: auto;
|
||
padding: 0 0.75rem;
|
||
}
|
||
|
||
.form-group label {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 按鈕置右 */
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
|
||
/* 選擇床位相關 */
|
||
.tree,
|
||
.tree ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.toggle-icon {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
width: 1rem;
|
||
display: inline-block;
|
||
color: #007bff;
|
||
}
|
||
|
||
.region-item-label {
|
||
cursor: pointer;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.region-item-label.selected {
|
||
background-color: #eaf4ff;
|
||
color: #0d6efd;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.selected-room {
|
||
background-color: #cce5ff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 選擇床位相關 */
|
||
</style>
|
||
<script>
|
||
Vue.component('region-item', {
|
||
props: ['item', 'selectedId', 'selectedType', 'expandAll', 'collapseAll'],
|
||
data() {
|
||
return {
|
||
expanded: false, // 預設全部收起
|
||
selectedRoomId: null,
|
||
}
|
||
},
|
||
watch: {
|
||
expandAll(newVal) {
|
||
if (newVal) {
|
||
this.expanded = true;
|
||
// 執行完後發事件通知父組件清除標誌
|
||
this.$nextTick(() => this.$emit('clear-expand-all'));
|
||
}
|
||
},
|
||
collapseAll(newVal) {
|
||
if (newVal) {
|
||
this.expanded = false;
|
||
this.$nextTick(() => this.$emit('clear-collapse-all'));
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
hasChildren() {
|
||
return this.item.children && this.item.children.length > 0;
|
||
},
|
||
icon() {
|
||
// 無論有無子節點，皆可點擊展開/收起
|
||
return this.expanded ? '▼' : '▶';
|
||
},
|
||
isSelected() {
|
||
return this.selectedType === 'region' && this.item.uuid === this.selectedId;
|
||
}
|
||
},
|
||
methods: {
|
||
toggle() {
|
||
this.expanded = !this.expanded;
|
||
},
|
||
select() {
|
||
this.$emit('select-region', this.item);
|
||
},
|
||
selectRoom(room) {
|
||
this.selectedRoomId = room.uuid;
|
||
this.$emit('select-room', room); // 可以發事件給父組件
|
||
}
|
||
},
|
||
template: `
|
||
<div>
|
||
<span class="toggle-icon" @click="toggle">{{ icon }}</span>
|
||
<span @click="select"
|
||
class="region-item-label"
|
||
:class="{ 'selected': isSelected }">
|
||
{{ item.rooms.length>0 ? (item.name + '(' + item.rooms.length + '房)'): item.name }}
|
||
</span>
|
||
|
||
<!-- 子區域列表 -->
|
||
<ul v-if="hasChildren && expanded">
|
||
<li v-for="(child, index) in item.children" :key="child.id + '-' + index">
|
||
<region-item
|
||
:item="child"
|
||
:selected-id="selectedId"
|
||
:selected-type="selectedType"
|
||
:expand-all="expandAll"
|
||
:collapse-all="collapseAll"
|
||
@select-region="$emit('select-region', $event)"
|
||
@select-room="$emit('select-room', $event)"
|
||
@clear-expand-all="$emit('clear-expand-all')"
|
||
@clear-collapse-all="$emit('clear-collapse-all')"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- 客房列表：無論是否有子區域，只要展開就顯示 -->
|
||
<ul v-if="item.rooms && item.rooms.length > 0 && expanded">
|
||
<li v-for="room in item.rooms" :key="'room-' + room.uuid"
|
||
@click="selectRoom(room)"
|
||
:class="{ 'selected-room': selectedType === 'room' && selectedId === room.uuid }"
|
||
style="cursor: pointer;">
|
||
<span class="bed-label">
|
||
🛏️ {{ room.name + ' (' + room.beds.length + '床) ' + (room.gender === true ? '(男客房)' : room.gender === false ? '(女客房)' : '') }}
|
||
</span>
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
});
|
||
Vue.filter('timeString', function (value, myFormat) {
|
||
return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
|
||
});
|
||
new Vue({
|
||
el: '#app',
|
||
vuetify: new Vuetify(vuetify_options),
|
||
data() {
|
||
return {
|
||
activityList: [],
|
||
availableBedCount: {
|
||
male: 0,
|
||
female: 0,
|
||
},
|
||
guadanorder: {
|
||
order_form: {
|
||
uuid: '<%= Request.QueryString["orderid"] %>' || null,
|
||
startdate: null,
|
||
enddate: null,
|
||
note: null,
|
||
orderNo: null,
|
||
bookerName: null,
|
||
bookerPhone: null,
|
||
bookerFollowerNum: null,
|
||
activityNum: null,
|
||
},
|
||
status_items: [],
|
||
},
|
||
guadanguest: {
|
||
guest: {
|
||
uuid: null, // int?
|
||
fullName: '', // string
|
||
gender: null, // int?
|
||
phone: '', // string
|
||
idNumber: '', // string
|
||
birthday: null, // Date (建議用 date picker)
|
||
email: '', // string
|
||
address: '', // string
|
||
emergencyContact: '', // string
|
||
emergencyPhone: '', // string
|
||
status: null, // int?
|
||
notes: '' // string
|
||
},
|
||
headers: [{
|
||
text: '姓名',
|
||
value: 'name'
|
||
},
|
||
{
|
||
text: '掛單開始時間',
|
||
value: 'checkinat'
|
||
},
|
||
{
|
||
text: '掛單結束時間',
|
||
value: 'checkoutat'
|
||
},
|
||
{
|
||
text: '房間',
|
||
value: 'roomName'
|
||
},
|
||
{
|
||
text: '床位',
|
||
value: 'bedName'
|
||
},
|
||
{
|
||
text: '狀態',
|
||
value: 'statusName'
|
||
},
|
||
{
|
||
text: '備註',
|
||
value: 'note'
|
||
},
|
||
{
|
||
text: '',
|
||
value: 'actions'
|
||
},
|
||
],
|
||
items: [],
|
||
showCreateGuestModal: false,
|
||
xuzhu: {
|
||
showXuzhuGuestModal: false,
|
||
currentCheckoutDate: null,
|
||
newCheckoutDate: null,
|
||
guestUuid: null,
|
||
guestBedUuid: null,
|
||
}
|
||
},
|
||
checkInGuest: {
|
||
showSelectGuadanOrderGuest: false,
|
||
isEdit: false,
|
||
|
||
inGuest: {
|
||
uuid: null,
|
||
orderNo: null,
|
||
followerNum: null,
|
||
roomUuid: null,
|
||
bedUuid: null,
|
||
checkInAt: null,
|
||
checkOutAt: null,
|
||
statuscode: null,
|
||
},
|
||
status: [],
|
||
},
|
||
region_modal: {
|
||
regions: [],
|
||
currentSelectRegion: null,
|
||
currentSelectRoom: null,
|
||
currentSelectBeds: [],
|
||
currentSelectBed: null,
|
||
showSelectBedModal: false,
|
||
selectedId: null, // 被選中項目ID
|
||
selectedType: null, // 'region' 或 'room'
|
||
expandAllFlag: false, // 控制全部展開
|
||
collapseAllFlag: false, // 控制全部收起
|
||
currentSelectBedText: null,
|
||
},
|
||
selectGuestModal: {
|
||
showSelectGuestModal: false,
|
||
currentSelectedGuest: null,
|
||
fullNameText: null,
|
||
|
||
headers: [{
|
||
text: '姓名',
|
||
value: 'u_name'
|
||
},
|
||
{
|
||
text: '電話',
|
||
value: 'phone'
|
||
},
|
||
{
|
||
text: '',
|
||
value: 'actions'
|
||
},
|
||
],
|
||
items: [],
|
||
|
||
options: { //v-data-table參數
|
||
page: 1,
|
||
itemsPerPage: 10,
|
||
sortBy: [],
|
||
sortDesc: [],
|
||
multiSort: false,
|
||
},
|
||
page: 1,
|
||
pageSize: 10,
|
||
count: 0,
|
||
footer: {
|
||
showFirstLastPage: true,
|
||
disableItemsPerPage: true,
|
||
itemsPerPageAllText: '',
|
||
itemsPerPageText: '',
|
||
},
|
||
searchNameOrPhone: null,
|
||
},
|
||
automaticBedAllocation: {
|
||
showModal: false,
|
||
|
||
// 蓮友選擇彈出視窗
|
||
followerModal: {
|
||
showModal: false,
|
||
followerList: [],
|
||
selectedFollowerItems: [],
|
||
page: 1,
|
||
pageSize: 10,
|
||
totalCount: 0,
|
||
searchNameOrPhone: '',
|
||
headers: [
|
||
{ text: '姓名', value: 'u_name' },
|
||
{ text: '電話', value: 'phone' },
|
||
{ text: '操作', value: 'actions', sortable: false }
|
||
],
|
||
},
|
||
|
||
// 已選擇的待分配列表
|
||
selectedFollowers: [],
|
||
preBeds: [],
|
||
headers: [
|
||
{ text: '姓名', value: 'u_name' },
|
||
{ text: '電話', value: 'phone' },
|
||
{ text: '性別', value: 'sex' },
|
||
{ text: '預分配床位', value: 'prebed' },
|
||
{ text: '', value: 'actions' }
|
||
],
|
||
|
||
},
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
//续住相關方法--------------------start
|
||
showXuzhuGuestModalMethod(guest) {
|
||
if (!guest.checkoutat) {
|
||
return;
|
||
}
|
||
this.guadanguest.xuzhu.showXuzhuGuestModal = true;
|
||
this.guadanguest.xuzhu.currentCheckoutDate = guest.checkoutat;
|
||
this.guadanguest.xuzhu.guestUuid = guest.uuid;
|
||
this.guadanguest.xuzhu.guestBedUuid = guest.bedUuid;
|
||
|
||
this.$nextTick(() => { // 确保弹窗 DOM 已渲染
|
||
const input = document.getElementById('newCheckoutDate');
|
||
if (input) {
|
||
const checkoutDate = new Date(guest.checkoutat); // 用指定日期
|
||
checkoutDate.setDate(checkoutDate.getDate() + 1); // 明天
|
||
const year = checkoutDate.getFullYear();
|
||
const month = String(checkoutDate.getMonth() + 1).padStart(2, '0');
|
||
const day = String(checkoutDate.getDate()).padStart(2, '0');
|
||
const tomorrow = `${year}-${month}-${day}`;
|
||
input.min = tomorrow; // 限制最小值
|
||
//input.value = tomorrow; // 默认选中明天
|
||
}
|
||
});
|
||
console.log(guest.checkoutat)
|
||
},
|
||
closeXuzhuGuestModalMethod() {
|
||
console.log(this.guadanguest.xuzhu.newCheckoutDate)
|
||
this.guadanguest.xuzhu.showXuzhuGuestModal = false;
|
||
this.guadanguest.xuzhu.currentCheckoutDate = null;
|
||
this.guadanguest.xuzhu.newCheckoutDate = null;
|
||
this.guadanguest.xuzhu.guestUuid = null;
|
||
this.guadanguest.xuzhu.guestBedUuid = null;
|
||
console.log(this.guadanguest.xuzhu.newCheckoutDate)
|
||
console.log(this.guadanguest.xuzhu.currentCheckoutDate)
|
||
console.log(this.guadanguest.xuzhu.guestUuid)
|
||
console.log(this.guadanguest.xuzhu.guestBedUuid)
|
||
},
|
||
xuzhuPost() {
|
||
// 校验必填
|
||
if (!this.guadanguest.xuzhu.guestUuid || !this.guadanguest.xuzhu.guestBedUuid) {
|
||
alert("GuestUuid 和 GuestBedUuid 不能为空");
|
||
return;
|
||
}
|
||
if (!this.guadanguest.xuzhu.newCheckoutDate || !this.guadanguest.xuzhu.currentCheckoutDate) {
|
||
alert("续住时间不能为空");
|
||
return;
|
||
}
|
||
|
||
const payload = {
|
||
guestUuid: this.guadanguest.xuzhu.guestUuid,
|
||
guestBedUuid: this.guadanguest.xuzhu.guestBedUuid,
|
||
currentCheckoutDate: this.guadanguest.xuzhu.currentCheckoutDate,
|
||
newCheckoutDate: this.guadanguest.xuzhu.newCheckoutDate
|
||
};
|
||
|
||
axios.post('/api/guadanorderguest/xuzhu', payload)
|
||
.then((res) => {
|
||
this.$refs.messageModal.open({
|
||
title: '续住成功',
|
||
message: '客人续住已处理',
|
||
status: 'success',
|
||
callback: () => {
|
||
// 弹窗关闭后的回调
|
||
try {
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
}
|
||
catch (error) {
|
||
console.error("发生错误：", error.message);
|
||
} finally {
|
||
this.closeXuzhuGuestModalMethod();
|
||
}
|
||
}
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
this.$refs.messageModal.open({
|
||
title: '续住失败',
|
||
message: error.response?.data?.message || '系统异常，请稍后重试',
|
||
status: 'error'
|
||
});
|
||
});
|
||
},
|
||
//续住相關方法--------------------end
|
||
getActivityList() {
|
||
axios.post('/api/activity/GetList?page=1&pageSize=500', { kind: 0, subject: "" })
|
||
.then((res) => {
|
||
this.activityList = res.data.list
|
||
})
|
||
},
|
||
getavailablebedcountbytime(startTime, endTime) {
|
||
axios.get('/api/region/bed/getavailablebedcountbytime', {
|
||
params: {
|
||
startTime: startTime,
|
||
endTime: endTime
|
||
}
|
||
}).then((res) => {
|
||
this.availableBedCount = res.data;
|
||
})
|
||
},
|
||
//自動分配相關方法--------------------start
|
||
showAutomaticBedAllocation() {
|
||
if (!this.guadanorder.order_form.uuid) {
|
||
this.$refs.messageModal.open({
|
||
message: '請先創建掛單',
|
||
});
|
||
return;
|
||
}
|
||
this.automaticBedAllocation.showModal = true;
|
||
this.getavailablebedcountbytime(this.guadanorder.order_form.startdate, this.guadanorder.order_form.enddate);
|
||
},
|
||
confirmAllocation() {
|
||
//確認分配
|
||
axios.post('/api/region/bed/confirmallocation', {
|
||
preBeds: this.automaticBedAllocation.preBeds,
|
||
orderNo: this.guadanorder.order_form.orderNo,
|
||
checkInAt: this.guadanorder.order_form.startdate,
|
||
checkOutAt: this.guadanorder.order_form.enddate
|
||
})
|
||
.then(res => {
|
||
this.resetAutomaticBedAllocation();
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
});
|
||
|
||
},
|
||
preAllocation() {
|
||
const follower = this.automaticBedAllocation.selectedFollowers.map(({ num, sex }) => ({
|
||
num,
|
||
sex: sex === '男眾' ? 'M' : sex === '女眾' ? 'F' : ''
|
||
}));
|
||
console.log(follower);
|
||
const payload = {
|
||
PreBeds: follower, // 這裡傳待分配人員列表
|
||
OrderNo: this.guadanorder.order_form.orderNo || '', // 訂單號
|
||
CheckInAt: this.guadanorder.order_form.startdate || new Date(), // 入住時間
|
||
CheckOutAt: this.guadanorder.order_form.enddate || null // 退房時間，可為空
|
||
};
|
||
axios.post('/api/region/bed/preallocation', payload)
|
||
.then(res => {
|
||
this.automaticBedAllocation.preBeds = res.data.data;
|
||
})
|
||
.catch(error => {
|
||
this.$refs.messageModal.open({
|
||
title: '分配失敗',
|
||
message: (error.response?.data?.message || error.message)
|
||
});
|
||
});
|
||
},
|
||
getPreBed(num) {
|
||
return this.automaticBedAllocation.preBeds.find(a => a.num == num) || null;
|
||
},
|
||
resetAutomaticBedAllocation() {
|
||
this.automaticBedAllocation.showModal = false;
|
||
this.automaticBedAllocation.followerModal.showModal = false;
|
||
this.automaticBedAllocation.followerModal.followerList = [];
|
||
this.automaticBedAllocation.followerModal.selectedFollowerItems = [];
|
||
this.automaticBedAllocation.followerModal.page = 1;
|
||
this.automaticBedAllocation.followerModal.pageSize = 10;
|
||
this.automaticBedAllocation.followerModal.totalCount = 0;
|
||
this.automaticBedAllocation.selectedFollowers = [];
|
||
this.automaticBedAllocation.preBeds = [];
|
||
this.automaticBedAllocation.searchNameOrPhone = '';
|
||
},
|
||
cancelAutomaticBedAllocation() {
|
||
this.resetAutomaticBedAllocation();
|
||
},
|
||
isFollowerDisabled(item) {
|
||
return this.guadanguest.items.some(f => f.followerNum === item.num);
|
||
},
|
||
getFollowerRowClass(item) {
|
||
return this.isFollowerDisabled(item) ? 'bg-secondary' : '';
|
||
},
|
||
onMultiSelectChange(selectedItems) {
|
||
// 這裡拿到最新選中的列表
|
||
this.automaticBedAllocation.followerModal.selectedFollowerItems = selectedItems;
|
||
this.automaticBedAllocation.selectedFollowers = [...selectedItems];
|
||
},
|
||
showautomaticBedAllocationMethod() {
|
||
this.automaticBedAllocation.followerModal.showModal = true;
|
||
this.getMultiSelectFollowers();
|
||
},
|
||
// 獲取蓮友分頁數據
|
||
getMultiSelectFollowers: function () {
|
||
var fm = this.automaticBedAllocation.followerModal;
|
||
var self = this;
|
||
axios.post('/api/lianyou/getfollowers', null, {
|
||
params: {
|
||
page: fm.page,
|
||
pageSize: fm.pageSize,
|
||
searchName: fm.searchNameOrPhone || null
|
||
}
|
||
}).then(function (res) {
|
||
fm.followerList = res.data.data || [];
|
||
fm.totalCount = res.data.count || 0;
|
||
}).catch(function (err) {
|
||
console.error('獲取蓮友列表失敗', err);
|
||
});
|
||
},
|
||
|
||
// 選擇蓮友到右側
|
||
selectMultiFollower: function (item) {
|
||
var exists = this.automaticBedAllocation.selectedFollowers.some(function (f) {
|
||
return f.num === item.num;
|
||
});
|
||
if (!exists) {
|
||
this.automaticBedAllocation.selectedFollowers.push(item);
|
||
console.log(item)
|
||
}
|
||
},
|
||
|
||
// 移除已選蓮友
|
||
removeSelectedFollower: function (num) {
|
||
var arr = this.automaticBedAllocation.selectedFollowers;
|
||
this.automaticBedAllocation.selectedFollowers = arr.filter(function (f) {
|
||
return f.num !== num;
|
||
});
|
||
this.automaticBedAllocation.followerModal.selectedFollowerItems = this.automaticBedAllocation.followerModal.selectedFollowerItems.filter(f => f.num !== num);
|
||
|
||
},
|
||
removePreBed(num) {
|
||
this.automaticBedAllocation.preBeds = this.automaticBedAllocation.preBeds.filter(item => item.num !== num);
|
||
console.log(this.automaticBedAllocation.preBeds.length)
|
||
},
|
||
//自動分配相關方法--------------------end
|
||
//掛單相關方法-------------------start
|
||
validateOrderForm() {
|
||
if (!this.guadanorder.order_form.startdate) {
|
||
this.$refs.messageModal.open({
|
||
message: '請輸入必填資訊'
|
||
});
|
||
return false;
|
||
}
|
||
if (!this.guadanorder.order_form.enddate) {
|
||
this.$refs.messageModal.open({
|
||
message: '請輸入必填資訊'
|
||
});
|
||
return false;
|
||
}
|
||
if (!this.guadanorder.order_form.bookerName) {
|
||
this.$refs.messageModal.open({
|
||
message: '請輸入姓名'
|
||
});
|
||
return false;
|
||
}
|
||
if (this.guadanorder.order_form.bookerPhone && !/^\d{2,4}-?\d{3,4}-?\d{3,4}$/.test(this.guadanorder.order_form.bookerPhone)) {
|
||
this.$refs.messageModal.open({
|
||
message: '電話輸入有誤'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
|
||
},
|
||
getGuadanOrderById() {
|
||
if (this.guadanorder.order_form.uuid) {
|
||
axios.get('/api/guadan/getorderbyid', {
|
||
params: {
|
||
orderId: this.guadanorder.order_form.uuid
|
||
}
|
||
}).then((res) => {
|
||
this.guadanorder.order_form.note = res.data.notes;
|
||
this.guadanorder.order_form.startdate = res.data.startDate;
|
||
this.guadanorder.order_form.enddate = res.data.endDate;
|
||
this.guadanorder.order_form.orderNo = res.data.guaDanOrderNo;
|
||
this.guadanorder.order_form.bookerName = res.data.bookerName;
|
||
this.guadanorder.order_form.bookerPhone = res.data.bookerPhone;
|
||
this.guadanorder.order_form.bookerFollowerNum = res.data.bookerFollowerNum;
|
||
this.guadanorder.order_form.uuid = res.data.uuid;
|
||
this.guadanorder.order_form.activityNum = res.data.activityNum;
|
||
})
|
||
}
|
||
},
|
||
getGuadanOrderGuestByOrderNo() {
|
||
if (this.guadanorder.order_form.orderNo) {
|
||
axios.get('/api/guadanorderguest/getbyorderno', {
|
||
params: {
|
||
orderNo: this.guadanorder.order_form.orderNo
|
||
}
|
||
}).then((res => {
|
||
this.guadanguest.items = res.data;
|
||
}))
|
||
}
|
||
},
|
||
getGuadanOrderStatus() {
|
||
axios.get('/api/region/guadan/status/list')
|
||
.then((res) => {
|
||
this.guadanorder.status_items = res.data;
|
||
})
|
||
},
|
||
createGuadanOrder() {
|
||
if (!this.validateOrderForm()) {
|
||
return;
|
||
}
|
||
axios.post('/api/guadan/create', this.guadanorder.order_form)
|
||
.then((res => {
|
||
this.$refs.messageModal.open({
|
||
title: '掛單提示',
|
||
message: '掛單資料建立成功'
|
||
})
|
||
this.guadanorder.order_form.uuid = res.data.uuid;
|
||
this.guadanorder.order_form.orderNo = res.data.guaDanOrderNo;
|
||
console.log(this.guadanorder.order_form.uuid);
|
||
|
||
// 跳转到当前 URL 加上 ?orderId=UUID
|
||
const currentUrl = window.location.origin + window.location.pathname;
|
||
window.location.href = `${currentUrl}?orderId=${res.data.guaDanOrderNo}`;
|
||
})).catch((error) => {
|
||
this.$refs.messageModal.open({
|
||
title: '錯誤',
|
||
message: '建立掛單資料失敗：' + (error.response?.data?.message || error.message)
|
||
});
|
||
});
|
||
},
|
||
updateGuadanOrder() {
|
||
if (!this.validateOrderForm()) {
|
||
return;
|
||
}
|
||
axios.post('/api/guadan/update', this.guadanorder.order_form)
|
||
.then((res => {
|
||
this.$refs.messageModal.open({
|
||
title: '掛單提示',
|
||
message: '掛單資料更新成功'
|
||
})
|
||
this.guadanorder.order_form.uuid = res.data.uuid;
|
||
console.log(this.guadanorder.order_form.uuid);
|
||
})).catch((error) => {
|
||
this.$refs.messageModal.open({
|
||
title: '錯誤',
|
||
message: '建立掛單資料失敗：' + (error.response?.data?.message || error.message)
|
||
});
|
||
});
|
||
},
|
||
showCheckInModal() {
|
||
if (!this.guadanorder.order_form.uuid) {
|
||
this.$refs.messageModal.open({
|
||
message: '請先創建掛單',
|
||
});
|
||
return;
|
||
}
|
||
this.checkInGuest.inGuest.checkInAt = this.guadanorder.order_form.startdate || null;
|
||
this.checkInGuest.inGuest.checkOutAt = this.guadanorder.order_form.enddate || null;
|
||
this.checkInGuest.inGuest.orderNo = this.guadanorder.order_form.orderNo;
|
||
this.checkInGuest.showSelectGuadanOrderGuest = true;
|
||
},
|
||
closeCheckInModal() {
|
||
this.resetRegionModal();
|
||
this.resetInGuest();
|
||
this.selectGuestModal.currentSelectedGuest = null;
|
||
this.selectGuestModal.fullNameText = null;
|
||
this.checkInGuest.showSelectGuadanOrderGuest = false;
|
||
this.checkInGuest.isEdit = false;
|
||
},
|
||
//掛單相關方法-------------------end
|
||
|
||
//增加蓮友方法-------------------start
|
||
checkoutGuadanOrderGuest(guest) {
|
||
this.$refs.confirmModal.open({
|
||
message: `確定要將 ${guest.follower.u_name || ''} 退房嗎？`,
|
||
onConfirm: async () => {
|
||
try {
|
||
const response = await axios.post(`/api/guadanorderguest/checkout`, null, {
|
||
params: { uuid: guest.uuid }
|
||
});
|
||
|
||
// 成功提示
|
||
this.$refs.messageModal.open({
|
||
title: '操作成功',
|
||
message: '退房成功！',
|
||
status: 'success'
|
||
});
|
||
|
||
// 更新狀態並刷新資料
|
||
guest.statusCode = "403"; // 已退房
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
} catch (error) {
|
||
console.error(error);
|
||
|
||
// 失敗提示
|
||
this.$refs.messageModal.open({
|
||
title: '操作失敗',
|
||
message: error.response?.data?.message || '退房過程中發生錯誤！',
|
||
status: 'error'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
resetInGuest() {
|
||
this.checkInGuest.inGuest = {
|
||
uuid: null,
|
||
orderNo: null,
|
||
guestId: null,
|
||
roomUuid: null,
|
||
bedUuid: null,
|
||
checkInAt: null,
|
||
checkOutAt: null,
|
||
statuscode: null,
|
||
};
|
||
},
|
||
setInGuest() {
|
||
if (this.region_modal.currentSelectRoom) {
|
||
this.checkInGuest.inGuest.roomUuid = this.region_modal.currentSelectRoom.uuid;
|
||
}
|
||
if (this.region_modal.currentSelectBed) {
|
||
this.checkInGuest.inGuest.bedUuid = this.region_modal.currentSelectBed.uuid;
|
||
}
|
||
console.log(this.checkInGuest.inGuest)
|
||
},
|
||
validateCheckInGuest() {
|
||
//驗證添加掛單蓮友的時候輸入資料
|
||
if (!this.checkInGuest.inGuest.orderNo) {
|
||
this.$refs.messageModal.open({
|
||
message: '掛單編號不能為空'
|
||
})
|
||
}
|
||
if (!this.checkInGuest.inGuest.checkInAt) {
|
||
this.$refs.messageModal.open({
|
||
message: '入住時間不能為空'
|
||
})
|
||
return false;
|
||
}
|
||
if (!this.checkInGuest.inGuest.checkOutAt) {
|
||
this.$refs.messageModal.open({
|
||
message: '退單時間不能為空'
|
||
})
|
||
return false;
|
||
}
|
||
|
||
if (!this.checkInGuest.inGuest.roomUuid) {
|
||
this.$refs.messageModal.open({
|
||
message: '請選擇房間'
|
||
})
|
||
return false;
|
||
}
|
||
if (!this.checkInGuest.inGuest.bedUuid) {
|
||
this.$refs.messageModal.open({
|
||
message: '請選擇房間'
|
||
})
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
async saveCheckInGuest() {
|
||
if (!this.validateCheckInGuest()) {
|
||
return;
|
||
}
|
||
try {
|
||
const res = await this.createCheckInGuest();
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
this.closeCheckInModal();
|
||
} catch (error) {
|
||
console.log(error)
|
||
this.$refs.messageModal.open({
|
||
message: (error.response?.data?.message || error.message)
|
||
})
|
||
}
|
||
|
||
},
|
||
createCheckInGuest() {
|
||
return axios.post('/api/guadanorderguest/create', this.checkInGuest.inGuest)
|
||
},
|
||
checkBedAndFollower() {
|
||
this.checkInGuest.inGuest
|
||
},
|
||
getGuadanGuestStatus() {
|
||
axios.get('/api/region/bed/status/list')
|
||
.then((res) => {
|
||
this.checkInGuest.status = res.data.filter(item => item.category === 4 && item.code != '404');
|
||
})
|
||
},
|
||
//增加蓮友方法-------------------end
|
||
|
||
//蓮友選擇相關方法---------------start
|
||
getGuadanFollowers() {
|
||
//從信眾表中獲取掛單人列表
|
||
const {
|
||
sortBy,
|
||
sortDesc,
|
||
page,
|
||
itemsPerPage
|
||
} = this.selectGuestModal.options
|
||
const params = {
|
||
sortBy: sortBy[0],
|
||
sortDesc: sortDesc[0],
|
||
page: page,
|
||
pageSize: itemsPerPage,
|
||
searchName: this.selectGuestModal.searchNameOrPhone
|
||
};
|
||
axios.post('/api/lianyou/getfollowers', null, {
|
||
params: params
|
||
}).then((res) => {
|
||
this.selectGuestModal.items = res.data.data
|
||
this.selectGuestModal.count = res.data.count;
|
||
})
|
||
},
|
||
showSelectGuestModalMethod() {
|
||
this.selectGuestModal.showSelectGuestModal = true;
|
||
},
|
||
selectGuadanOrderGuest(guest) {
|
||
this.selectGuestModal.currentSelectedGuest = guest;
|
||
console.log('----------' + guest)
|
||
this.selectGuestModal.fullNameText = guest.u_name;
|
||
this.checkInGuest.inGuest.followerNum = guest.num;
|
||
this.selectGuestModal.showSelectGuestModal = false;
|
||
},
|
||
editGuadanOrderGuest(guest) {
|
||
this.checkInGuest.inGuest.uuid = guest.uuid;
|
||
this.checkInGuest.inGuest.followerNum = guest.followerNum;
|
||
this.checkInGuest.inGuest.roomUuid = guest.roomUuid;
|
||
this.checkInGuest.inGuest.bedUuid = guest.bedUuid;
|
||
this.checkInGuest.inGuest.orderNo = guest.orderNo;
|
||
this.checkInGuest.inGuest.checkInAt = guest.checkinat;
|
||
this.checkInGuest.inGuest.checkOutAt = guest.checkoutat;
|
||
this.checkInGuest.showSelectGuadanOrderGuest = true;
|
||
this.checkInGuest.isEdit = true;
|
||
this.getCurrentSelectBedTextByBedId(guest.bedUuid);
|
||
this.selectGuestModal.fullNameText = guest.follower?.u_name;
|
||
this.selectGuestModal.currentSelectedGuest = guest.follower;
|
||
this.checkInGuest.inGuest.statuscode = guest.statuscode;
|
||
|
||
},
|
||
async saveEditGuadanOrderGuest() {
|
||
try {
|
||
const res = await axios.post('/api/guadanorderguest/update', this.checkInGuest.inGuest)
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
this.closeCheckInModal();
|
||
} catch (error) {
|
||
this.$refs.messageModal.open({
|
||
message: (error.response?.data?.message || error.message)
|
||
})
|
||
}
|
||
|
||
},
|
||
deleteGuadanOrderGuest(guest) {
|
||
axios.post('/api/guadanorderguest/cancel?uuid=' + guest.uuid)
|
||
.then((res) => {
|
||
this.guadanguest.items = this.guadanguest.items.filter(i => i.uuid != guest.uuid);
|
||
}).catch((error) => {
|
||
this.$refs.messageModal.open({
|
||
message: (error.response?.data?.message || error.message)
|
||
})
|
||
});
|
||
},
|
||
confirmDeleteGuadanOrderGuest(guest) {
|
||
this.$refs.confirmModal.open({
|
||
'message': '確認取消？',
|
||
'onConfirm': () => {
|
||
this.deleteGuadanOrderGuest(guest);
|
||
}
|
||
})
|
||
},
|
||
async checkinGuadanGuest(guest) {
|
||
// 先確認操作
|
||
this.$refs.confirmModal.open({
|
||
message: '確認入住？',
|
||
onConfirm: async () => {
|
||
try {
|
||
// 發送請求到後端 API
|
||
const response = await axios.post(`/api/guadanorderguest/checkin`, null, {
|
||
params: { uuid: guest.uuid }
|
||
});
|
||
|
||
// 成功提示
|
||
this.$refs.messageModal.open({
|
||
title: '操作成功',
|
||
message: '入住成功！',
|
||
status: 'success'
|
||
});
|
||
|
||
// 更新本地列表，修改狀態為已入住 (402)
|
||
guest.statusCode = "402";
|
||
|
||
// 如果需要刷新整個列表，也可以調用
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
|
||
} catch (error) {
|
||
console.error(error);
|
||
|
||
// 失敗提示
|
||
this.$refs.messageModal.open({
|
||
title: '操作失敗',
|
||
message: error.response?.data?.message || '入住過程中發生錯誤！',
|
||
status: 'error'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//蓮友選擇相關方法---------------end
|
||
|
||
//床位選擇相關方法----------------start
|
||
async loadRegions() {
|
||
const res = await axios.post('/api/region/getRegionList');
|
||
this.region_modal.regions = res.data;
|
||
},
|
||
async loadRegionsByGender() {
|
||
let isMale = null;
|
||
const guest = this.selectGuestModal.currentSelectedGuest;
|
||
|
||
if (guest && guest.sex) {
|
||
if (guest.sex === '男眾') {
|
||
isMale = true;
|
||
} else if (guest.sex === '女眾') {
|
||
isMale = false;
|
||
}
|
||
}
|
||
|
||
const res = await axios.post('/api/region/getRegionListByGender', {
|
||
IsMale: isMale
|
||
});
|
||
|
||
this.region_modal.regions = res.data;
|
||
},
|
||
selectRegion(region) {
|
||
this.region_modal.currentSelectRegion = region;
|
||
this.region_modal.selectedId = region.uuid;
|
||
this.region_modal.selectedType = 'region';
|
||
},
|
||
selectRoom(room) {
|
||
this.region_modal.currentSelectRoom = room;
|
||
this.region_modal.selectedId = room.uuid;
|
||
this.region_modal.selectedType = 'room';
|
||
this.region_modal.currentSelectBeds = room.beds;
|
||
if (this.checkInGuest.inGuest.checkInAt && this.checkInGuest.inGuest.checkOutAt) {
|
||
axios.get('/api/region/room/bed/list', {
|
||
params: {
|
||
roomUuid: room.uuid,
|
||
StartTime: this.checkInGuest.inGuest.checkInAt,
|
||
EndTime: this.checkInGuest.inGuest.checkOutAt
|
||
}
|
||
})
|
||
.then((res) => {
|
||
this.region_modal.currentSelectBeds = res.data
|
||
})
|
||
}
|
||
},
|
||
selectBed(bed) {
|
||
this.region_modal.currentSelectBed = bed;
|
||
this.getCurrentSelectBedTextByBedId(bed.uuid);
|
||
},
|
||
GetRegionRoomBedListByRoomId(roomUuid) {
|
||
if (this.checkInGuest.inGuest.checkInAt && this.checkInGuest.inGuest.checkOutAt) {
|
||
axios.get('/api/region/bed/list')
|
||
.then((res) => {
|
||
|
||
})
|
||
}
|
||
},
|
||
cancelSelectBed() {
|
||
this.resetRegionModal();
|
||
this.getCurrentSelectBedTextByBedId(this.checkInGuest.inGuest.bedUuid);
|
||
this.region_modal.showSelectBedModal = false;
|
||
},
|
||
confirmSelectBed() {
|
||
this.region_modal.showSelectBedModal = false;
|
||
//this.setOrderForm();
|
||
this.setInGuest();
|
||
},
|
||
openSelectBedModal() {
|
||
if (!this.checkInGuest.inGuest.checkInAt || !this.checkInGuest.inGuest.checkOutAt) {
|
||
this.$refs.messageModal.open({
|
||
message: '請先選擇時間'
|
||
});
|
||
return;
|
||
}
|
||
this.region_modal.showSelectBedModal = true;
|
||
this.loadRegionsByGender();
|
||
this.getavailablebedcountbytime(this.checkInGuest.inGuest.checkInAt, this.checkInGuest.inGuest.checkOutAt);
|
||
},
|
||
getCurrentSelectBedTextByBedId(bedUuid) {
|
||
//獲取當前選擇的床位和所有上級組成的字串
|
||
this.region_modal.currentSelectBedText = this.findBedPath(this.region_modal.regions, bedUuid)
|
||
},
|
||
findBedPath(data, targetBedId) {
|
||
const path = [];
|
||
|
||
function dfs(regions, currentPath) {
|
||
for (const region of regions) {
|
||
const regionPath = [...currentPath, region.name];
|
||
// 遍歷當前區域的 rooms
|
||
for (const room of region.rooms || []) {
|
||
const roomPath = [...regionPath, room.name];
|
||
|
||
// 尋找床位
|
||
for (const bed of room.beds || []) {
|
||
if (bed.uuid === targetBedId) {
|
||
// 找到目標床位
|
||
path.push(...roomPath, bed.name);
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
// 遍歷子區域
|
||
if (region.children && region.children.length > 0) {
|
||
if (dfs(region.children, regionPath)) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
|
||
dfs(data, []);
|
||
return path.length > 0 ? path.join(' / ') : null;
|
||
},
|
||
resetRegionModal() {
|
||
this.region_modal.currentSelectBeds = [];
|
||
this.region_modal.currentSelectRegion = null;
|
||
this.region_modal.currentSelectRoom = null;
|
||
this.region_modal.currentSelectBed = null;
|
||
this.region_modal.selectedId = null;
|
||
this.region_modal.selectedType = null;
|
||
this.region_modal.expandAllFlag = null;
|
||
this.region_modal.collapseAllFlag = null;
|
||
this.region_modal.currentSelectBedText = '';
|
||
},
|
||
//床位選擇相關方法----------------end
|
||
formatDate(datetimeStr) {
|
||
const d = new Date(datetimeStr);
|
||
return d.toLocaleDateString('zh-CN', {
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
},
|
||
|
||
},
|
||
watch: {
|
||
'guadanorder.order_form.orderNo'(newValue, oldValue) {
|
||
if (newValue) {
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
}
|
||
},
|
||
'selectGuestModal.options': {
|
||
handler() {
|
||
this.getGuadanFollowers();
|
||
},
|
||
deep: true
|
||
},
|
||
// 分頁變化時自動刷新
|
||
'automaticBedAllocation.followerModal.page': function () {
|
||
this.getMultiSelectFollowers();
|
||
},
|
||
'automaticBedAllocation.followerModal.pageSize': function () {
|
||
this.getMultiSelectFollowers();
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.guadanorder.order_form.uuid) {
|
||
this.getGuadanOrderById();
|
||
this.getGuadanOrderGuestByOrderNo();
|
||
}
|
||
this.loadRegions();
|
||
this.getGuadanOrderStatus();
|
||
this.getGuadanGuestStatus();
|
||
this.getActivityList();
|
||
|
||
},
|
||
computed: {
|
||
pageCount() {
|
||
return Math.ceil(this.selectGuestModal.count / this.selectGuestModal.pageSize)
|
||
},
|
||
pageCount2: function () {
|
||
var fm = this.automaticBedAllocation.followerModal;
|
||
return Math.ceil(fm.totalCount / fm.pageSize) || 1;
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
</asp:Content> |