挂单查询
This commit is contained in:
@@ -4,24 +4,40 @@
|
||||
</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.searchName" type="text" placeholder="請輸入姓名">
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<label>入住日期：</label>
|
||||
<input v-model="search.date" type="date">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>入住日期：</label>
|
||||
<input v-model="search.searchCheckInDate" type="date">
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<button @click="handleSearch" type="button">查询</button>
|
||||
<button type="button" @click="clearSearch">清除查询条件</button>
|
||||
</div>
|
||||
</nav>
|
||||
<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
|
||||
@@ -45,6 +61,9 @@
|
||||
<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>
|
||||
@@ -67,7 +86,7 @@
|
||||
:max="pageCount"
|
||||
@input="options.page = parseInt($event, 10)"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
@@ -123,23 +142,29 @@ button:hover {
|
||||
loading: false,
|
||||
search: {
|
||||
searchName: null,
|
||||
|
||||
searchCheckInDateStart: null,//入住日期开始
|
||||
searchCheckInDateEnd: null,//入住日期的结束
|
||||
searchCheckOutDateStart: null,//退房日期的开始
|
||||
searchCheckOutDateEnd: null,//退房日期的结束
|
||||
searchCheckInDate: null,
|
||||
searchCheckOutDate: null,
|
||||
|
||||
},
|
||||
options: {
|
||||
page: 1, // 当前页
|
||||
itemsPerPage: 1, // 每页条数
|
||||
page: 1, // 當前頁
|
||||
itemsPerPage: 10, // 每頁條數
|
||||
sortBy: [],
|
||||
sortDesc: []
|
||||
},
|
||||
headers: [
|
||||
{ text: '姓名', value: 'name' },
|
||||
{ text: '挂单单号', value: 'guadanorderno'},
|
||||
{ text: '掛單單號', value: 'guadanorderno' },
|
||||
{ text: '入住日期', value: 'checkindate' },
|
||||
{ text: '退房日期', value: 'checkoutdate'},
|
||||
{ text: '房间号', value: 'roomName' },
|
||||
{ text: '退房日期', value: 'checkoutdate' },
|
||||
{ text: '房間號', value: 'roomName' },
|
||||
|
||||
],
|
||||
guests: [], // 表格数据
|
||||
guests: [], // 表格數據
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
@@ -157,9 +182,19 @@ button:hover {
|
||||
},
|
||||
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',
|
||||
@@ -167,19 +202,25 @@ button:hover {
|
||||
page: this.options.page,
|
||||
pageSize: this.options.itemsPerPage,
|
||||
searchName: this.search.searchName,
|
||||
date: this.search.date
|
||||
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;
|
||||
});
|
||||
this.guests = res.data.items; // 數據
|
||||
this.total = res.data.total; // 總數
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler() {
|
||||
this.fetchGuests(); // 监听分页、排序变化，自动加载数据
|
||||
this.fetchGuests(); // 監聽分頁、排序變化，自動載入數據
|
||||
},
|
||||
deep: true,
|
||||
}
|
||||
@@ -194,5 +235,4 @@ button:hover {
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</asp:Content>
|
||||
|
||||
</asp:Content>
|
||||
Reference in New Issue
Block a user