|
|
@@ -1,13 +1,459 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- 酒店预订
|
|
|
+ <div class="hotelr-all">
|
|
|
+ <div class="hotelr-head">
|
|
|
+ <div class="hotelr-head-li">
|
|
|
+ <label>团组名称:</label>
|
|
|
+ <el-select @change="Receivables" v-model="value" filterable placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.groupName"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="hotelr-info">
|
|
|
+ <div class="hotelr-info-li">
|
|
|
+ <label>团 号：</label>
|
|
|
+ <span>团 号：</span>
|
|
|
+ </div>
|
|
|
+ <div class="hotelr-info-li">
|
|
|
+ <label>客 户：</label>
|
|
|
+ <span>客 户：</span>
|
|
|
+ </div>
|
|
|
+ <div class="hotelr-info-li">
|
|
|
+ <label>出访国家：</label>
|
|
|
+ <span>出访国家：</span>
|
|
|
+ </div>
|
|
|
+ <div class="hotelr-info-li">
|
|
|
+ <label>起止日期：</label>
|
|
|
+ <span> 起止日期：</span>
|
|
|
+ </div>
|
|
|
+ <div class="hotelr-info-li">
|
|
|
+ <label>天数/人数：</label>
|
|
|
+ <span>天数/人数：</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hotelr-table">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="预定号"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="酒店名称"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="入住日期"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="退房日期"
|
|
|
+ width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="付款金额"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="操作人"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="操作时间"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="附 件"
|
|
|
+ width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="是否审核"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="操 作"
|
|
|
+ width="140">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="VOUCHER">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </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">hover 激活</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="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item style="width:350px ;" label="客人类型" prop="region">
|
|
|
+ <el-select size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="计算费用币种" prop="region">
|
|
|
+ <el-select size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="汇率">
|
|
|
+ <span>7.52</span>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item style="width:350px ;" label="入住卷号码" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="预订网站" prop="region">
|
|
|
+ <el-select size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="预订号码" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="酒店确定号码" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item style="width:350px ;" label="所在城市" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="酒店名称" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="酒店电话" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="酒店地址" prop="desc">
|
|
|
+ <el-input :rows="1" type="textarea" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客人姓名" prop="desc">
|
|
|
+ <el-input :rows="1" type="textarea" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="remcss" style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item prop="date1" style="width:350px ;" label="入住时间" required>
|
|
|
+ <el-date-picker size="medium" type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="离店时间" prop="date2">
|
|
|
+ <el-date-picker size="medium" type="date" placeholder="选择时间" v-model="ruleForm.date2" 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="desc">
|
|
|
+ <el-input-number style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <span>间</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="酒店双间" prop="desc">
|
|
|
+ <el-input-number style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <span>间</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="酒店套房" prop="desc">
|
|
|
+ <el-input-number style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <span>间</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="其他房型" prop="desc">
|
|
|
+ <el-input-number style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <span>间</span>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="form-foundationone">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item label-width="100px" style="width:350px ;" label="信用卡金额" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="10px" prop="region">
|
|
|
+ <el-select size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="美元卡" value="shanghai"></el-option>
|
|
|
+ <el-option label="欧元卡" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="地税" prop="desc">
|
|
|
+ <el-input-number :precision="2" style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <el-select style="width:100px ;" size="medium" v-model="ruleForm.region" placeholder="请选择">
|
|
|
+ <el-option label="CNY" value="shanghai"></el-option>
|
|
|
+ <el-option label="USD" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="城市税" prop="desc">
|
|
|
+ <el-input-number :precision="2" style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <el-select style="width:100px ;" size="medium" v-model="ruleForm.region" placeholder="请选择">
|
|
|
+ <el-option label="CNY" value="shanghai"></el-option>
|
|
|
+ <el-option label="USD" value="beijing"></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="region">
|
|
|
+ <el-select style="width: 100%;" size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="客人房" value="shanghai"></el-option>
|
|
|
+ <el-option label="导游房" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="酒店地址" prop="desc">
|
|
|
+ <el-input :rows="1" type="textarea" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件" prop="desc">
|
|
|
+ <input type="file" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="desc">
|
|
|
+ <el-input :rows="3" type="textarea" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="form-foundationone">
|
|
|
+ <div>付款信息</div>
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item style="width:350px ;" label="支付方式" prop="region">
|
|
|
+ <el-select style="width: 100%;" size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="消费方式" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="date1" style="width:350px ;" label="消费日期" required>
|
|
|
+ <el-date-picker size="medium" type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="付款金额" prop="desc">
|
|
|
+ <el-input-number :precision="2" style="width:100px ;" size="medium" :controls="false" v-model="ruleForm.fangnum"></el-input-number>
|
|
|
+ <el-select style="width:100px ;" size="medium" v-model="ruleForm.region" placeholder="请选择">
|
|
|
+ <el-option label="CNY" value="shanghai"></el-option>
|
|
|
+ <el-option label="USD" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item style="width:350px ;" label="卡类型" prop="region">
|
|
|
+ <el-select style="width: 100%;" size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="银行卡号" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="date1" style="width:350px ;" label="持卡人姓名" required>
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;">
|
|
|
+ <el-form-item style="width:350px ;" label="收款方" prop="desc">
|
|
|
+ <el-input size="medium" type="text" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width:350px ;" label="费用标识" prop="region">
|
|
|
+ <el-select style="width: 100%;" size="medium" v-model="ruleForm.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="备注" prop="desc">
|
|
|
+ <el-input :rows="3" type="textarea" v-model="ruleForm.desc"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }],
|
|
|
+ gridData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }],
|
|
|
+ ruleForm: {
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ delivery: false,
|
|
|
+ type: [],
|
|
|
+ resource: '',
|
|
|
+ desc: '',
|
|
|
+ fangnum:'',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入活动名称', trigger: 'blur' },
|
|
|
+ { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ region: [
|
|
|
+ { required: true, message: '请选择活动区域', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ date1: [
|
|
|
+ { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ date2: [
|
|
|
+ { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ resource: [
|
|
|
+ { required: true, message: '请选择活动资源', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ desc: [
|
|
|
+ { required: true, message: '请填写活动形式', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert('submit!');
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</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>
|
