oa-system/src/components/OP/HotelReservations.vue

<template>
    <div>
        <div class="hotelr-all">
            <div class="hotelr-head">
                <div class="hotelr-head-li">
                    <label>团组名称:</label>
                    <el-select @change="delegationSelectChange" v-model="OpHotelReservationsData.diid" clearable filterable
                        placeholder="请选择">
                        <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="hotelr-info">
                    <div class="hotelr-info-li">
                        <label>团 号：</label>
                        <span>{{ delegationInfo.tourCode }}</span>
                    </div>
                    <div class="hotelr-info-li">
                        <label>客 户：</label>
                        <span>{{ delegationInfo.clientName }}</span>
                    </div>
                    <div class="hotelr-info-li">
                        <label>出访国家：</label>
                        <span>{{ delegationInfo.visitCountry }}</span>
                    </div>
                    <div class="hotelr-info-li">
                        <label>起止日期：</label>
                        <span>{{ delegationInfo.visitDate }}</span>
                    </div>
                    <div class="hotelr-info-li">
                        <label>天数/人数：</label>
                        <span>{{ delegationInfo.visitDays }}/{{ delegationInfo.visitPNumber }}</span>
                    </div>
                </div>
            </div>
            <div class="hotelr-table">
                <el-table :data="tableDatas.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
                    style="width: 100%" v-loading="loading" element-loading-text="拼命加载中...">
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="reservationsNo" label="预定号" width="180">
                    </el-table-column>
                    <el-table-column prop="hotelName" label="酒店名称" width="180">
                    </el-table-column>
                    <el-table-column prop="checkInDate" label="入住日期" width="120">
                    </el-table-column>
                    <el-table-column prop="checkOutDate" label="退房日期" width="120">
                    </el-table-column>
                    <el-table-column prop="payMoney" label="付款金额" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.payMoney }}({{ scope.row.paymentCurrency }})
                        </template>
                    </el-table-column>
                    <el-table-column prop="createUserName" label="操作人" width="120">
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="180">
                    </el-table-column>
                    <el-table-column prop="attachment" label="附 件" width="80">
                        <template>
                            <i>下载附件</i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isAuditGMStr" label="是否审核" width="100">
                    </el-table-column>
                    <el-table-column prop="name" label="操 作" width="140">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="primary" size="mini" icon="el-icon-edit"
                                    @click="upDate(scope.$index, scope.row)"></el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete"
                                    @click="del(scope.$index, scope.row)"></el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="VOUCHER">
                        <i>生成</i>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[3, 5, 7, 9]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next" :total="tableDatas.length">
                    </el-pagination>
                </div>
            </div>
            <div class="hotelr-form">
                <div class="form-head">
                    <el-popover placement="right" trigger="hover">
                        <el-table :data="gridData" border>
                            <el-table-column width="150" property="date" label="日期"></el-table-column>
                            <el-table-column width="100" property="name" label="姓名"></el-table-column>
                            <el-table-column width="300" property="address" label="地址"></el-table-column>
                        </el-table>
                        <el-button slot="reference">移上提示每天详细房价</el-button>
                    </el-popover>
                    <div class="form-head-btn">
                        <el-button type="primary">确认单</el-button>
                        <el-button type="primary">预订成本</el-button>
                        <el-button type="primary">新增切换</el-button>
                        <el-button type="primary">保存设置</el-button>
                    </div>
                </div>
                <div class="form-foundationone select-bz">
                    <el-form :model="OpHotelReservationsData" :rules="rules" ref="OpHotelReservationsData"
                        label-width="110px" class="demo-OpHotelReservationsData">
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="客人类型" prop="gTId">
                                <el-select size="medium" v-model="OpHotelReservationsData.gTId" placeholder="请选择客人类型">
                                    <el-option v-for="item in guestType" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="计算费用币种" prop="region">
                                <el-select size="medium" v-model="OpHotelReservationsData.budgetCurrency"
                                    placeholder="请选择币种">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="当前币种团组汇率" label-width="150px">
                                <span>7.52</span>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="入住卷号码" prop="checkNumber">
                                <el-input size="medium" type="text"
                                    v-model="OpHotelReservationsData.checkNumber"></el-input>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="预订网站" prop="reservationsWebsite">
                                <el-select size="medium" v-model="OpHotelReservationsData.reservationsWebsite"
                                    placeholder="预订网站">
                                    <el-option v-for="item in bookingWebsite" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="酒店确定号码" prop="determineNo">
                                <el-input size="medium" type="text"
                                    v-model="OpHotelReservationsData.determineNo"></el-input>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:100% ;" label="预订号码" prop="reservationsNo">
                                <el-input :rows="1" type="textarea"
                                    v-model="OpHotelReservationsData.reservationsNo"></el-input>

                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="所在城市" prop="city">
                                <el-input size="medium" type="text" v-model="OpHotelReservationsData.city"></el-input>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="酒店名称" prop="hotelName">
                                <el-input size="medium" type="text" v-model="OpHotelReservationsData.hotelName"></el-input>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="酒店电话" prop="hotelTel">
                                <el-input size="medium" type="text" v-model="OpHotelReservationsData.hotelTel"></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="酒店地址" prop="hotelAddress">
                            <el-input :rows="1" type="textarea" v-model="OpHotelReservationsData.hotelAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="客人姓名" prop="guestName">
                            <el-input :rows="1" type="textarea" v-model="OpHotelReservationsData.guestName"></el-input>
                        </el-form-item>
                        <div class="remcss" style="display: flex;flex-wrap: wrap;">
                            <el-form-item prop="checkInDate" style="width:350px ;" label="入住时间" required>
                                <el-date-picker size="medium" type="date" placeholder="选择日期"
                                    v-model="OpHotelReservationsData.checkInDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="离店时间" prop="checkOutDate">
                                <el-date-picker size="medium" type="date" placeholder="选择时间"
                                    v-model="OpHotelReservationsData.checkOutDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="酒店单间" prop="predictSingleRoom">
                                <el-input-number style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.predictSingleRoom"></el-input-number>
                                <span>间</span>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="酒店双间" prop="predictDoubleRoom">
                                <el-input-number style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.predictDoubleRoom"></el-input-number>
                                <span>间</span>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="酒店套房" prop="predictSuiteRoom">
                                <el-input-number style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.predictSuiteRoom"></el-input-number>
                                <span>间</span>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="其他房型" prop="predictOtherRoom">
                                <el-input-number style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.predictOtherRoom"></el-input-number>
                                <span>间</span>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="form-foundationone">
                    <el-form :model="OpHotelReservationsData" :rules="rules" ref="OpHotelReservationsData"
                        label-width="100px" class="demo-OpHotelReservationsData">
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:25% ;" label="酒店单间" prop="singleRoomCount">
                                <el-input-number style="width:50px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.singleRoomCount"></el-input-number>
                                <span>间</span>
                                <el-input-number style="width:80px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.singleRoomPrice"></el-input-number>
                                <span>单价</span>
                                <el-select size="medium" v-model="OpHotelReservationsData.budgetCurrency"
                                    style="width: 80px;" :disabled="true" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:25% ;" label="酒店双间" prop="desc">
                                <el-input-number style="width:50px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.doubleRoomCount"></el-input-number>
                                <span>间</span>
                                <el-input-number style="width:80px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.doubleRoomPrice"></el-input-number>
                                <span>单价</span>
                                <el-select size="medium" v-model="OpHotelReservationsData.budgetCurrency"
                                    style="width: 80px;" :disabled="true" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:25% ;" label="酒店套房" prop="suiteRoomCount">
                                <el-input-number style="width:50px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.suiteRoomCount"></el-input-number>
                                <span>间</span>
                                <el-input-number style="width:80px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.suiteRoomPrice"></el-input-number>
                                <span>单价</span>
                                <el-select size="medium" v-model="OpHotelReservationsData.budgetCurrency"
                                    style="width: 80px;" :disabled="true" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:25% ;" label="其他房型" prop="otherRoomCount">
                                <el-input-number style="width:50px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.otherRoomCount"></el-input-number>
                                <span>间</span>
                                <el-input-number style="width:80px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.fangnum"></el-input-number>
                                <span>单价</span>
                                <el-select size="medium" v-model="OpHotelReservationsData.otherRoomPrice"
                                    style="width: 80px;" :disabled="true" placeholder="">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item label-width="100px" style="width:350px ;" label="信用卡金额" prop="cardPrice">
                                <el-input size="medium" type="text" v-model="OpHotelReservationsData.cardPrice"></el-input>
                            </el-form-item>
                            <el-form-item label-width="10px" prop="cTDId">
                                <el-select size="medium" v-model="OpHotelReservationsData.cTDId" placeholder="请选择信用卡">
                                    <el-option v-for="item in bankCard" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="地税" prop="governmentRent">
                                <el-input-number :precision="2" style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.governmentRent"></el-input-number>
                                <el-select style="width:100px ;" size="medium"
                                    v-model="OpHotelReservationsData.governmentRentCurrency" placeholder="请选择">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="城市税" prop="cityTax">
                                <el-input-number :precision="2" style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.fangnum"></el-input-number>
                                <el-select style="width:100px ;" size="medium" v-model="OpHotelReservationsData.cityTax"
                                    placeholder="请选择">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item label-width="100px" style="width:350px ;" label="入住类型" prop="checkType">
                                <el-select style="width: 100%;" size="medium" v-model="OpHotelReservationsData.checkType"
                                    placeholder="请选择入住人类型">
                                    <el-option v-for="item in CheckType" :key="item.value" :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="房间说明" prop="roomExplanation">
                            <el-input :rows="1" type="textarea"
                                v-model="OpHotelReservationsData.roomExplanation"></el-input>
                        </el-form-item>
                        <el-form-item label="附件" prop="attachment">
                            <input type="file" />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input :rows="3" type="textarea" v-model="OpHotelReservationsData.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="form-foundationone">
                    <div>付款信息</div>
                    <el-form :model="OpHotelReservationsData" :rules="rules" ref="OpHotelReservationsData"
                        label-width="100px" class="demo-OpHotelReservationsData">
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="支付方式" prop="payDId">
                                <el-select style="width: 100%;" size="medium" v-model="OpHotelReservationsData.payDId"
                                    placeholder="请选择支付方式">
                                    <el-option v-for="item in payment" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="消费方式" prop="consumptionPatterns">
                                <el-input size="medium" type="text"
                                    v-model="OpHotelReservationsData.consumptionPatterns"></el-input>
                            </el-form-item>
                            <el-form-item prop="consumptionDate" style="width:350px ;" label="消费日期" required>
                                <el-date-picker size="medium" type="date" placeholder="选择日期"
                                    v-model="OpHotelReservationsData.consumptionDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="付款金额" prop="cardPrices">
                                <el-input-number :precision="2" style="width:100px ;" size="medium" :controls="false"
                                    v-model="OpHotelReservationsData.cardPrice"></el-input-number>
                                <el-select style="width:100px ;" size="medium"
                                    v-model="OpHotelReservationsData.budgetCurrency" placeholder="请选择">
                                    <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="卡类型" prop="cTDId">
                                <el-select style="width: 100%;" size="medium" v-model="OpHotelReservationsData.cTDId"
                                    placeholder="请选择卡类型">
                                    <el-option v-for="item in bankCard" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="银行卡号" prop="bankNo">
                                <el-input size="medium" type="text" v-model="OpHotelReservationsData.bankNo"></el-input>
                            </el-form-item>
                            <el-form-item prop="cardholderName" style="width:350px ;" label="持卡人姓名" required>
                                <el-input size="medium" type="text"
                                    v-model="OpHotelReservationsData.cardholderName"></el-input>
                            </el-form-item>
                        </div>
                        <div style="display: flex;flex-wrap: wrap;">
                            <el-form-item style="width:350px ;" label="收款方" prop="payee">
                                <el-input size="medium" type="text" v-model="OpHotelReservationsData.payee"></el-input>
                            </el-form-item>
                            <el-form-item style="width:350px ;" label="费用标识" prop="orbitalPrivateTransfer">
                                <el-select style="width: 100%;" size="medium"
                                    v-model="OpHotelReservationsData.orbitalPrivateTransfer" placeholder="请选择费用标识">
                                    <el-option label="公转" :value="0"></el-option>
                                    <el-option label="私转" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="备注" prop="desc">
                            <el-input :rows="3" type="textarea" v-model="OpHotelReservationsData.desc"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            tableDatas: [],
            currentPage: 1, // 当前页码
            pageSize: 5,// 每页的数据条数
            gridData: [],
            loading: false,
            delegationInfoList: [],
            delegationInfo: {},
            guestType: [],//客人类型
            currencyList: [],//币种下拉框
            bankCard: [],//卡类型下拉框
            payment: [],//支付方式下拉框
            bookingWebsite: [],//预订网站
            CheckType: [
                {
                    name: '客人房',
                    value: '',
                },
                {
                    name: '司机房',
                    value: 'D',
                },
                {
                    name: '导游房',
                    value: 'G',
                },
                {
                    name: '司机导游房',
                    value: 'D&G',
                },
            ],
            OpHotelReservationsData: {
                status: 0,
                id: 0,
                diId: 0,
                gtId: 0,
                checkNumber: '',
                reservationsWebsite: 0,
                reservationsNo: '',
                determineNo: '',
                city: '',
                hotelName: '',
                hotelAddress: '',
                hotelTel: '',
                guestName: '',
                checkInDate: '',
                checkOutDate: '',
                budget: 0,
                budgetCurrency: '',
                singleRoomCount: 0,
                singleRoomPrice: 0,
                doubleRoomCount: 0,
                doubleRoomPrice: 0,
                suiteRoomCount: 0,
                suiteRoomPrice: 0,
                otherRoomCount: 0,
                otherRoomPrice: 0,
                roomExplanation: '',
                attachment: '',
                cardPrice: 0,
                isCardPrice: 0,
                predictSingleRoom: 0,
                predictDoubleRoom: 0,
                predictSuiteRoom: 0,
                predictOtherRoom: 0,
                governmentRent: 0,
                governmentRentCurrency: 0,
                cityTax: 0,
                cityTaxCurrency: 0,
                checkType: '',
                myProperty: 0,
                createUserId: 0,
                remark: '',
                payDId: '',
                consumptionPatterns: '',
                consumptionDate: '',
                ctdId: 0,
                companyBankNo: '',
                otherBankName: '',
                otherSideNo: '',
                otherSideName: '',
                bankNo: '',
                cardholderName: '',
                payee: '',
                orbitalPrivateTransfer: 0,
                cRemark: ''
            },
            rules: {
                checkInDate: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            },
        }
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        HotelReservationsInitialize() {
            var url = "/api/Groups/HotelReservationsInitialize"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    UserId: that.userId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    debugger
                    that.guestType = res.data.data.guestType//客人类型
                    that.currencyList = res.data.data.currencyList//币种下拉框
                    that.bankCard = res.data.data.bankCard//卡类型下拉框
                    that.payment = res.data.data.payment//支付方式下拉框
                    that.bookingWebsite = res.data.data.bookingWebsite//预订网站

                    that.delegationInfoList = res.data.data.delegations;
                    that.OpHotelReservationsData.diid = that.$route.query.diId
                    if (that.OpHotelReservationsData.diid == undefined) {
                        that.delegationInfo = that.delegationInfoList[0]
                        that.OpHotelReservationsData.diid = that.delegationInfoList[0].id;
                        that.VisitDate = that.dateFormat(that.delegationInfo.visitStartDate) + '至' + that.dateFormat(that.delegationInfo.visitEndDate);
                    } else {
                        for (let index = 0; index < that.delegationInfoList.length; index++) {
                            debugger
                            if (that.delegationInfoList[index].id == that.OpHotelReservationsData.diid) {
                                that.delegationInfo = that.delegationInfoList[index];
                                that.OpHotelReservationsData.diid = that.delegationInfoList[index].id;
                                break;
                            }
                        }
                    }
                    that.HotelReservationsByDiId();
                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },
        delegationSelectChange() {
            for (let index = 0; index < this.delegationInfoList.length; index++) {
                debugger
                if (this.delegationInfoList[index].id == this.OpHotelReservationsData.diid) {
                    this.delegationInfo = this.delegationInfoList[index];
                    this.OpHotelReservationsData.diid = this.delegationInfoList[index].id;
                    this.VisitDate = this.dateFormat(this.delegationInfo.visitStartDate) + '至' + this.dateFormat(this.delegationInfo.visitEndDate);
                    break;
                }
            }
            this.HotelReservationsByDiId();
        },
        HotelReservationsByDiId() {
            var url = "/api/Groups/HotelReservationsByDiId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    pageIndex: 0,
                    pageSize: 0,
                    portType: 1,
                    diId: that.OpHotelReservationsData.diid,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tableDatas = res.data.data;
                    that.tableData = that.tableDatas
                    if (that.tableDatas.length != 0) {
                        if (that.tableDatas.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize).length == 0) {
                            if (that.currentPage > 1) {
                                that.currentPage = that.currentPage - 1;
                            }
                        }
                    }
                }
            }).catch(function (error) {
                that.$message.error("网络错误，请稍后重试");
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.HotelReservationsInitialize();
        //this.AirTicketResList()
    }
}
</script>
<style>
.hotelr-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}

.hotelr-head-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.hotelr-head {
    display: flex;
    justify-content: space-between;
}

.hotelr-info {
    display: flex;
    margin-top: 10px;
}

.hotelr-info-li {
    margin-right: 30px;
}

.hotelr-info-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.hotelr-info-li span {
    color: #606266;
    font-size: 14px;
}

.hotelr-table {
    margin-top: 10px;
}

.form-head {
    display: flex;
    justify-content: space-between;
}

.hotelr-form {
    margin-top: 20px;
}

.form-foundationone {
    margin-top: 10px;
    border-top: 2px solid #409EFF;
    padding-top: 20px;
}

.form-foundationone .el-form-item {
    margin-bottom: 12px;
}

.form-foundationone .el-form-item__error {
    top: 90%;
}

.select-bz .el-select {
    width: 100%;
}
</style>