17168ERP/web/admin/guadan/guest/index.aspx

<%@ 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.date" type="date">
  </div>

  <div class="form-item">
    <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>
      </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,
                        
                    },
                    options: {
                        page: 1,          // 当前页
                        itemsPerPage: 1, // 每页条数
                        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.resetTableOptions();
                },
                fetchGuests() {
                    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,
                            date: this.search.date
                        }).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>