17168ERP/web/admin/region/handle_bed_in_used.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="handle_bed_in_used.aspx.cs" Inherits="admin_region_handle_bed_in_used" %>

<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
<nav>
  <div>
    <label style="display: inline-block;">區域：</label>
    <select style="display: inline-block; min-width:150px; max-width:20%;"
        class="form-select"
        v-model="selectedRegionUuid"
        :disabled="isFromUrl"
        @change="onRegionChange"
        ><option :value="null">請選擇區域</option>
        <option 
            v-for="region in regions" 
            :key="region.uuid" 
            :value="region.uuid"
        >
            {{ region.name }}
        </option>
    </select>
    <label style="display: inline-block;margin-left: 20px;">客房：</label>
    <select style="display: inline-block; min-width:200px; max-width:20%;"
        class="form-select"
        v-model="selectedRoomUuid"
        :disabled="isFromUrl"
        @change="onRoomChange"
        >
        <option :value="null">請選擇房間</option>
        <option v-for="room in rooms" :key="room.uuid" :value="room.uuid">{{room.fullName}}</option>
    </select>
    <label style="display: inline-block;margin-left: 20px;">床位：</label>
    <select style="display: inline-block; width:100px;"
        class="form-select"
        v-model="selectedBedUuid"
        :disabled="isFromUrl"
        ></select>
  </div>
</nav>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div>
        <v-data-table
            :items="items"
            show-select
            v-model:selected="selectedItems"
              item-key="bedUuid"

            :headers="headers">
            <template #item.actions="{item}">
                <button class="btn btn-outline-danger" type="button" @click="confirmAndCancelSingleBedBooking(item)">取消預約</button>
            </template>
            <template #item.guadan_during="{item}">
                {{item.guadan_during.checkInAt|timeString('YYYY-MM-DD')}} -  {{item.guadan_during.checkOutAt|timeString('YYYY-MM-DD')}}
            </template>
            <template #item.status="{item}">
                {{item.status.name}}
            </template>
        </v-data-table>
    </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">
    <script>
        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 {

                    regionUuidFromUrl: '<%= Request.QueryString["region"] %>' || null,
                    roomUuidFromUrl: '<%= Request.QueryString["room"] %>' || null,
                    bedUuidFromUrl: '<%= Request.QueryString["bed"] %>' || null,
                    // 用戶選擇的值
                    selectedRegionUuid: null,
                    selectedRoomUuid: null,
                    selectedBedUuid: null,
                    regions: [],
                    rooms: [],
                    bed: [],
                    selectedItems: [],
                    items: [],
                    headers: [
                        { text: '床位名稱', value: 'fullName' },
                        { text: '掛單號:', value: 'guaDanOrderNo' },
                        { text: '掛單人', value: 'u_name' },
                        { text: '掛單時間', value: 'guadan_during' },
                        { text: '掛單狀態', value: 'status' },
                        { text: '', value: 'actions' },
                    ]
                }
            },
            methods: {
                onRegionChange() {
                    console.log("選擇的區域 UUID:", this.selectedRegionUuid);
                    this.selectedRoomUuid = null;
                    this.selectedBedUuid = null;
                    this.GetInUsedBed();
                    this.GetRoomList();
                },
                onRoomChange() {
                    console.log("選擇的客房 UUID:", this.selectedRoomUuid);
                    this.GetInUsedBed();
                },
                async GetInUsedBed() {
                    //獲取已經預約或者入住的床位
                    try {
                        const payload = {
                            regionUuid: this.selectedRegionUuid || null,
                            roomUuid: this.selectedRoomUuid || null,
                            bedUuid: this.selectedBedUuid || null
                        };

                        const response = await axios.post(HTTP_HOST + "api/bed/inuse/list", payload);

                        // 假設返回的就是床位數組
                        this.items = response.data;

                        console.log("已獲取床位:");
                    } catch (error) {
                        console.error("獲取床位失敗:", error);
                    }
                },
                async confirmAndCancelSingleBedBooking(item) {
                    // 先彈出確認彈出視窗
                    this.$refs.confirmModal.open({
                        message: `確定要取消床位 ${item.name || ''} 的所有預約嗎？`,
                        onConfirm: async () => {
                            try {
                                const payload = {
                                    bedUuid: item.bedUuid || null
                                };

                                const response = await axios.post(
                                    HTTP_HOST + "api/bed/inuse/cancel/singlebed/booking",
                                    payload
                                );

                                // 刷新床位列表
                                this.GetInUsedBed();

                                // 成功提示
                                console.log("取消成功:", item.bedUuid);
                                this.$refs.messageModal.open({
                                    title: '取消成功',
                                    message: response?.data?.message || '取消成功！',
                                    status: 'success'
                                });
                            } catch (error) {
                                console.error("取消失敗:", error);
                                this.$refs.messageModal.open({
                                    title: '取消失敗',
                                    message: error.response?.data?.message || '取消過程中發生錯誤！',
                                    status: 'error'
                                });
                            }
                        }
                    });
                },
                async CancelAllBedBooking() {
                    //取消符合條件的所有床位的所有預約
                },
                async GetRegionList() {
                    try {
                        const response = await axios.get(
                            HTTP_HOST + "api/bed/inuse/region/list"
                        );
                        this.regions = response.data;
                    } catch (error) {

                    }
                },
                async GetRoomList() {
                    try {
                        const response = await axios.get(
                            HTTP_HOST + "api/bed/inuse/room/list", {
                            params: {
                                regionUuid: this.selectedRegionUuid
                            }
                        }
                        );
                        this.rooms = response.data;
                    } catch (error) {

                    }
                },
            },
            watch: {

            },
            mounted() {
                this.selectedRegionUuid = this.regionUuidFromUrl;
                this.selectedRoomUuid = this.roomUuidFromUrl;
                this.selectedBedUuid = this.bedUuidFromUrl;
                this.GetInUsedBed();
                this.GetRegionList();
                this.GetRoomList();
            },
            computed: {
                // 判斷是否來自 URL，禁用下拉框
                isFromUrl() {
                    return this.regionUuidFromUrl || this.roomUuidFromUrl || this.bedUuidFromUrl;
                }
            }
        });
    </script>
</asp:Content>