Selaa lähdekoodia

酒店界面编写,绑定

wangh 1 vuosi sitten
vanhempi
commit
625899915d
1 muutettua tiedostoa jossa 253 lisäystä ja 74 poistoa
  1. 253 74
      src/components/OP/HotelReservations.vue

+ 253 - 74
src/components/OP/HotelReservations.vue

@@ -102,8 +102,8 @@
                     </div>
                 </div>
                 <div class="form-foundationone select-bz">
-                    <el-form :model="OpHotelReservationsData" :rules="rules" ref="OpHotelReservationsData"
-                        label-width="110px" class="demo-OpHotelReservationsData">
+                    <el-form :model="OpHotelReservationsData" :rules="OpHotelReservationsDataRules"
+                        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="请选择客人类型">
@@ -113,14 +113,14 @@
                             </el-form-item>
                             <el-form-item style="width:350px ;" label="计算费用币种" prop="region">
                                 <el-select size="medium" v-model="OpHotelReservationsData.budgetCurrency"
-                                    placeholder="请选择币种">
+                                    placeholder="请选择币种" @change="budgetCurrencyChange" clearable filterable>
                                     <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>
+                                <span>{{ Rate }}</span>
                             </el-form-item>
                         </div>
                         <div style="display: flex;flex-wrap: wrap;">
@@ -200,8 +200,8 @@
                     </el-form>
                 </div>
                 <div class="form-foundationone">
-                    <el-form :model="OpHotelReservationsData" :rules="rules" ref="OpHotelReservationsData"
-                        label-width="100px" class="demo-OpHotelReservationsData">
+                    <el-form :model="OpHotelReservationsData" :rules="OpHotelReservationsDataRules"
+                        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"
@@ -274,7 +274,8 @@
                                 <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="请选择">
+                                    v-model="OpHotelReservationsData.governmentRentCurrency" placeholder="请选择" clearable
+                                    filterable>
                                     <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                         :value="item.id">
                                     </el-option>
@@ -282,9 +283,10 @@
                             </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="请选择">
+                                    v-model="OpHotelReservationsData.cityTax"></el-input-number>
+                                <el-select style="width:100px ;" size="medium"
+                                    v-model="OpHotelReservationsData.cityTaxCurrency" placeholder="请选择" clearable
+                                    filterable>
                                     <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                         :value="item.id">
                                     </el-option>
@@ -315,66 +317,154 @@
                 </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>
+                    <el-form :model="OpHotelReservationsData" :rules="OpHotelReservationsDataRules"
+                        ref="OpHotelReservationsData" label-width="100px" class="demo-OpHotelReservationsData">
+                        <div style="display: flex;">
+                            <div style="width: 25%;">
+                                <el-form-item label="支付方式:" prop="payDId" label-width="160px">
+                                    <el-select v-model="OpHotelReservationsData.payDId" placeholder="支付方式"
+                                        style="width: 100%;" @change="payChange">
+                                        <el-option v-for="item in payment" :key="item.id" :label="item.name"
+                                            :value="item.id">
+                                        </el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                            <div style="width: 25%;">
+                                <el-form-item label="消费方式:" prop="consumptionPatterns" label-width="160px">
+                                    <el-input placeholder="消费方式" v-model="OpHotelReservationsData.consumptionPatterns">
+                                    </el-input>
+                                </el-form-item>
+                            </div>
+                            <div style="width: 25%;">
+                                <el-form-item label="消费日期:" prop="consumptionDate" label-width="160px">
+                                    <el-date-picker v-model="OpHotelReservationsData.consumptionDate" placeholder="消费日期"
+                                        type="date">
+                                    </el-date-picker>
+
+                                </el-form-item>
+                            </div>
+                            <div style="width: 25%;">
+                                <el-form-item label="付款金额:" prop="payMoney" label-width="160px">
+                                    <el-input placeholder="付款金额" v-model="OpHotelReservationsData.visaPrice"
+                                        style="width: 52%;" :disabled="true">
+                                    </el-input>
+                                    <el-select v-model="OpHotelReservationsData.visaCurrency" style="width: 45%;"
+                                        :disabled="true">
+                                        <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>
-                        <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 v-if="OpHotelReservationsData.payDId == 72">
+                            <div style="display: flex;">
+                                <div style="width: 25%;">
+                                    <el-form-item label="卡类型:" prop="ctdId" label-width="160px">
+                                        <el-select v-model="OpHotelReservationsData.ctdId" placeholder="卡类型"
+                                            style="width: 100%;" @change="ctdChange">
+                                            <el-option v-for="item in bankCard" :key="item.id" :label="item.name"
+                                                :value="item.id">
+                                            </el-option>
+                                        </el-select>
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="银行卡号:" prop="bankNo" label-width="160px">
+                                        <el-input placeholder="银行卡号" v-model="OpHotelReservationsData.bankNo"
+                                            :disabled="true">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="持卡人姓名:" prop="cardholderName" label-width="160px">
+                                        <el-input placeholder="持卡人姓名" v-model="OpHotelReservationsData.cardholderName"
+                                            :disabled="true">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                            </div>
                         </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 v-else-if="OpHotelReservationsData.payDId == 73">
+                            <div style="display: flex;">
+                                <div style="width: 25%;">
+                                    <el-form-item label="公司银行账号:" label-width="160px" prop="companyBankNo">
+                                        <el-input placeholder="公司银行账号" v-model="OpHotelReservationsData.companyBankNo">
+                                        </el-input>
+
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
+                                        <el-input placeholder="对方开户行:" v-model="OpHotelReservationsData.otherBankName">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
+                                        <el-input placeholder="对方银行卡号" v-model="OpHotelReservationsData.otherSideNo">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
+                                        <el-input placeholder="对方姓名" v-model="OpHotelReservationsData.otherSideName">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else-if="OpHotelReservationsData.payDId == 83">
+                            <div style="display: flex;">
+                                <div style="width: 25%;">
+                                    <el-form-item label="对方开户行:" prop="otherBankName" label-width="160px">
+                                        <el-input placeholder="对方开户行" v-model="OpHotelReservationsData.otherBankName">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="对方银行卡号:" prop="otherSideNo" label-width="160px">
+                                        <el-input placeholder="对方银行卡号" v-model="OpHotelReservationsData.otherSideNo">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                                <div style="width: 25%;">
+                                    <el-form-item label="对方姓名:" prop="otherSideName" label-width="160px">
+                                        <el-input placeholder="对方姓名" v-model="OpHotelReservationsData.otherSideName">
+                                        </el-input>
+                                    </el-form-item>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else></div>
+                        <div style="display:flex;">
+                            <div style="width: 25%;">
+                                <el-form-item label="收款方:" prop="payee" label-width="160px">
+                                    <el-input placeholder="对方姓名:" v-model="OpHotelReservationsData.payee">
+                                    </el-input>
+                                </el-form-item>
+                            </div>
+                            <div style="width: 25%;">
+                                <el-form-item label="费用标识:" prop="orbitalPrivateTransfer" label-width="160px">
+                                    <el-select v-model="OpHotelReservationsData.orbitalPrivateTransfer" placeholder="费用标识"
+                                        style="width: 100%;">
+                                        <el-option key="0" label="公转" :value=0>
+                                        </el-option>
+                                        <el-option key="1" label="私转" :value=1>
+                                        </el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </div>
+                        </div>
+                        <div style="display: flex;">
+                            <div style="width: 100%;">
+                                <el-form-item label="备 注:" prop="Remark" label-width="160px">
+                                    <el-input type="textarea" :rows="5" placeholder="备注"
+                                        v-model="OpHotelReservationsData.cRemark"></el-input>
+                                </el-form-item>
+                            </div>
                         </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>
@@ -390,6 +480,7 @@ export default {
             currentPage: 1, // 当前页码
             pageSize: 5,// 每页的数据条数
             gridData: [],
+            Rate: '1',
             loading: false,
             delegationInfoList: [],
             delegationInfo: {},
@@ -422,7 +513,7 @@ export default {
                 diId: 0,
                 gtId: 0,
                 checkNumber: '',
-                reservationsWebsite: 0,
+                reservationsWebsite: 103,
                 reservationsNo: '',
                 determineNo: '',
                 city: '',
@@ -431,9 +522,8 @@ export default {
                 hotelTel: '',
                 guestName: '',
                 checkInDate: '',
+                budgetCurrency: 836,
                 checkOutDate: '',
-                budget: 0,
-                budgetCurrency: '',
                 singleRoomCount: 0,
                 singleRoomPrice: 0,
                 doubleRoomCount: 0,
@@ -451,11 +541,10 @@ export default {
                 predictSuiteRoom: 0,
                 predictOtherRoom: 0,
                 governmentRent: 0,
-                governmentRentCurrency: 0,
+                governmentRentCurrency: '',
                 cityTax: 0,
-                cityTaxCurrency: 0,
+                cityTaxCurrency: '',
                 checkType: '',
-                myProperty: 0,
                 createUserId: 0,
                 remark: '',
                 payDId: '',
@@ -472,7 +561,7 @@ export default {
                 orbitalPrivateTransfer: 0,
                 cRemark: ''
             },
-            rules: {
+            OpHotelReservationsDataRules: {
                 checkInDate: [
                     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                 ],
@@ -575,6 +664,96 @@ export default {
                 that.$message.error("网络错误,请稍后重试");
             });
         },
+        upDate(index, row) {
+
+            var url = "/api/Groups/HotelReservationsById"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + this.token
+                },
+                data: {
+                    id: row.id
+                }
+            }).then(function (res) {
+                if (res.data.code == 200) {
+                    var hotelReservations = res.data.data.hotelReservations
+                    var creditCardPayment = res.data.data.creditCardPayment
+
+                }
+            }).catch(function (error) {
+                that.$message.error("网络错误,请稍后重试");
+            });
+        },
+        payChange() {
+            this.OpHotelReservationsData.ctdId = '';
+            this.OpHotelReservationsData.bankNo = '';
+            this.OpHotelReservationsData.cardholderName = '';
+            this.OpHotelReservationsData.companyBankNo = '';
+            this.OpHotelReservationsData.otherBankName = '';
+            this.OpHotelReservationsData.otherSideNo = '';
+            this.OpHotelReservationsData.otherSideName = '';
+            this.OpHotelReservationsData.cRemark = '';
+            if (this.OpHotelReservationsData.payDId == 73) {
+                this.OpHotelReservationsDataRules.companyBankNo = [{ required: true, message: '公司银行账号', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.ctdId = []
+            } else if (this.OpHotelReservationsData.payDId == 72) {
+                this.OpHotelReservationsDataRules.ctdId = [{ required: true, message: '请选择卡类型', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.companyBankNo = []
+                this.OpHotelReservationsDataRules.otherBankName = []
+                this.OpHotelReservationsDataRules.otherSideNo = []
+                this.OpHotelReservationsDataRules.otherSideName = []
+            } else if (this.OpHotelReservationsData.payDId == 83) {
+                this.OpHotelReservationsDataRules.companyBankNo = []
+                this.OpHotelReservationsDataRules.otherBankName = [{ required: true, message: '对方开户行', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.otherSideNo = [{ required: true, message: '对方银行卡号', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.otherSideName = [{ required: true, message: '对方姓名', trigger: ['blur', 'change'] },]
+                this.OpHotelReservationsDataRules.ctdId = []
+            } else {
+                this.OpHotelReservationsDataRules.companyBankNo = []
+                this.OpHotelReservationsDataRules.otherBankName = []
+                this.OpHotelReservationsDataRules.otherSideNo = []
+                this.OpHotelReservationsDataRules.otherSideName = []
+                this.OpHotelReservationsDataRules.ctdId = []
+            }
+        },
+        ctdChange(id) {
+            this.OpHotelReservationsData.cardholderName = 'Zhang Hailin';
+            for (var i = 0; i < this.bankCard.length; i++) {
+                if (this.bankCard[i].id == parseInt(id)) {
+                    this.OpHotelReservationsData.bankNo = this.bankCard[i].remark
+                }
+            }
+        },
+        budgetCurrencyChange(Id) {
+            this.OpHotelReservationsData.governmentRentCurrency = Id;
+            this.OpHotelReservationsData.cityTaxCurrency = Id;
+            var that = this
+            var url = "/api/Business/PostCurrencyByDiid?DiId=" + that.OpHotelReservationsData.diid + "&CId=76&CurrencyId=" + Id
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + this.token
+                },
+            }).then(function (res) {
+                debugger
+                if (res.data.code == 200) {
+                    debugger
+                    var CurrencyBy = res.data.data;
+                    that.Rate = CurrencyBy.rate
+                } else {
+                    that.Rate = "暂未设置,请前往设置"
+                }
+            }).catch(function (error) {
+                that.$message.error("网络错误,请稍后重试");
+            });
+        },
         submitForm(formName) {
             this.$refs[formName].validate((valid) => {
                 if (valid) {