238 lines
8.5 KiB
Plaintext
238 lines
8.5 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_guadan_guest_index" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
|
|
<nav class="search-bar">
|
|
<div class="form-item">
|
|
<label>姓名：</label>
|
|
<input v-model="search.searchName" type="text" placeholder="請輸入姓名">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label>入住日期：</label>
|
|
<input v-model="search.searchCheckInDate" type="date">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label>退房日期：</label>
|
|
<input type="date" v-model="search.searchCheckOutDate">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label>入住日期區間:</label>
|
|
<input type="date" v-model="search.searchCheckInDateStart"> -
|
|
<input type="date" v-model="search.searchCheckInDateEnd">
|
|
</div>
|
|
|
|
<div class="form-item">
|
|
<label>退房日期區間:</label>
|
|
<input type="date" v-model="search.searchCheckOutDateStart"> -
|
|
<input type="date" v-model="search.searchCheckOutDateEnd">
|
|
</div>
|
|
|
|
<div class="form-item buttons">
|
|
<button @click="handleSearch" type="button">查詢</button>
|
|
<button type="button" @click="clearSearch">清除查詢條件</button>
|
|
</div>
|
|
</nav>
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
|
|
<div>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="guests"
|
|
:options.sync="options"
|
|
:server-items-length="total"
|
|
:loading="loading"
|
|
hide-default-footer
|
|
class="elevation-1"
|
|
>
|
|
<template v-slot:top>
|
|
<v-toolbar flat>
|
|
<v-toolbar-title>入住人列表</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
</v-toolbar>
|
|
</template>
|
|
<template #item.checkindate ="{item}">
|
|
{{item.checkindate|timeString('YYYY-MM-DD')}}
|
|
</template>
|
|
<template #item.checkoutdate ="{item}">
|
|
{{item.checkoutdate|timeString('YYYY-MM-DD')}}
|
|
</template>
|
|
<template #item.guadanorderno="{item}">
|
|
{{item.guadanorderno}}<a :href="'/admin/guadan/create.aspx?orderId='+item.guadanorderno" class="btn btn-outline-primary">查看掛單</a>
|
|
</template>
|
|
</v-data-table>
|
|
<v-container>
|
|
<v-row class="align-baseline" wrap>
|
|
<v-col cols="12" md="9">
|
|
<v-pagination
|
|
v-model="options.page"
|
|
:length="pageCount">
|
|
</v-pagination>
|
|
</v-col>
|
|
<v-col class="text-truncate text-right" cols="12" md="2">
|
|
共 {{ }} 筆, 頁數:
|
|
</v-col>
|
|
<v-col cols="6" md="1">
|
|
<v-text-field
|
|
v-model="options.page"
|
|
type="number"
|
|
hide-details
|
|
dense
|
|
min="1"
|
|
:max="pageCount"
|
|
@input="options.page = parseInt($event, 10)"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</div>
|
|
|
|
</asp:Content>
|
|
<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
|
|
<style>
|
|
.search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px;
|
|
background: #f9f9f9;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
input {
|
|
padding: 4px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button {
|
|
padding: 6px 14px;
|
|
background: #409eff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #66b1ff;
|
|
}
|
|
</style>
|
|
<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 {
|
|
loading: false,
|
|
search: {
|
|
searchName: null,
|
|
searchCheckInDateStart: null,//入住日期開始
|
|
searchCheckInDateEnd: null,//入住日期的結束
|
|
searchCheckOutDateStart: null,//退房日期的開始
|
|
searchCheckOutDateEnd: null,//退房日期的結束
|
|
searchCheckInDate: null,
|
|
searchCheckOutDate: null,
|
|
|
|
},
|
|
options: {
|
|
page: 1, // 當前頁
|
|
itemsPerPage: 10, // 每頁條數
|
|
sortBy: [],
|
|
sortDesc: []
|
|
},
|
|
headers: [
|
|
{ text: '姓名', value: 'name' },
|
|
{ text: '掛單單號', value: 'guadanorderno' },
|
|
{ text: '入住日期', value: 'checkindate' },
|
|
{ text: '退房日期', value: 'checkoutdate' },
|
|
{ text: '房間號', value: 'roomName' },
|
|
|
|
],
|
|
guests: [], // 表格數據
|
|
total: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
resetTableOptions() {
|
|
this.options = {
|
|
page: 1,
|
|
itemsPerPage: 10,
|
|
sortBy: [],
|
|
sortDesc: []
|
|
};
|
|
},
|
|
handleSearch() {
|
|
this.resetTableOptions();
|
|
},
|
|
clearSearch() {
|
|
this.search.searchName = null;
|
|
this.search.searchCheckInDate = null;
|
|
this.search.searchCheckOutDate = null;
|
|
this.search.searchCheckInDateStart = null;
|
|
this.search.searchCheckInDateEnd = null;
|
|
this.search.searchCheckOutDateStart = null;
|
|
this.search.searchCheckOutDateEnd = null;
|
|
this.resetTableOptions();
|
|
},
|
|
fetchGuests() {
|
|
if (this.search.searchName && this.search.searchName.includes(' ')) {
|
|
alert('搜索內容不能包含空格');
|
|
return; // 阻止繼續執行
|
|
}
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
axios.post('/api/guadan/guest/query/list',
|
|
{
|
|
page: this.options.page,
|
|
pageSize: this.options.itemsPerPage,
|
|
searchName: this.search.searchName,
|
|
searchCheckInDate: this.search.searchCheckInDate,
|
|
searchCheckOutDate: this.search.searchCheckOutDate,
|
|
searchCheckInDateStart: this.search.searchCheckInDateStart,
|
|
searchCheckInDateEnd: this.search.searchCheckInDateEnd,
|
|
searchCheckOutDateStart: this.search.searchCheckOutDateStart,
|
|
searchCheckOutDateEnd: this.search.searchCheckOutDateEnd,
|
|
|
|
}).then(res => {
|
|
this.guests = res.data.items; // 數據
|
|
this.total = res.data.total; // 總數
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler() {
|
|
this.fetchGuests(); // 監聽分頁、排序變化，自動載入數據
|
|
},
|
|
deep: true,
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
computed: {
|
|
pageCount() {
|
|
return Math.ceil(this.total / this.options.itemsPerPage)
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</asp:Content> |