Skip to content

S
SuperMan
Commit de0f87ae authored by zhengke's avatar zhengke
Browse files
Options

增加合同

parent 75080765
Show whitespace changes
Inline Side-by-side
Showing with 1377 additions and 0 deletions
src/components/SingleContract.vue 0 → 100644
View file @ de0f87ae
<style>
*{
margin:0;
padding:0;
}
.TC-MainContent{
min-height: 650px;
background: url(../assets/img/bodyBg.png);
padding-top: 10px;
font: normal 13px 'Microsoft Yahei';
color:#555;
height:auto!important;
}
.TC-MainContent .fixedMenu {
position: fixed;
left: 20px;
top: 75px;
margin: 0;
padding-top: 10px;
}
.TC-MainContent .fixedMenu li {
padding: 5px 15px;
position: relative;
border-right: 2px solid #e2e2e2;
cursor: pointer;
list-style: none;
font-size:13px;
}
.TC-MainContent .fixedMenu li:after {
content: '';
display: block;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #e2e2e2;
position: absolute;
right: -12px;
top: 11px;
}
.TC-MainContent .contractTit {
position: fixed;
left: 0;
top:0;
width: 100%;
z-index: 1000;
padding: 15px 20px 12px;
line-height: 30px;
box-sizing: border-box;
background: url(../assets/img/bodyBg.png);
font-size: 18px;
color: #555;
}
.TC-MainContent .contractTit span{
font-size: 21px;
font-weight: bold;
}
.TC-MainContent .block {
border: 1px solid #cdcdcd;
background: #f9f9f9;
position: relative;
margin-bottom: 20px;
}
.TC-MainContent .container-fluid {
padding-right: 20px;
padding-left: 20px;
*zoom: 1;
}
.TC-MainContent .mtop15{
margin-top:15px;
}
.TC-MainContent .blockTitle {
border-bottom: 1px solid #cdcdcd;
background-color: #efefef;
}
.TC-MainContent .blockTitle span.icon {
border-right: 1px solid #CDCDCD;
position: absolute;
left: 10px;
height: 40px;
padding-right: 10px;
padding-top: 8px;
}
.TC-MainContent .blockTitle h2 {
font-size: 15px;
min-height: 40px;
margin: 0;
font-family: 'Microsoft Yahei';
color: #5b5b5b;
padding-right: 15px;
padding-left: 48px;
line-height: 40px;
}
.TC-MainContent .blockTitle h2 {
font-size: 15px;
min-height: 40px;
margin: 0;
font-family: 'Microsoft Yahei';
color: #5b5b5b;
padding-right: 15px;
padding-left: 48px;
}
.TC-MainContent .block em {
font-style: normal;
}
.TC-MainContent .createTableTitle {
padding: 10px 0;
margin: 5px 30px 0;
border-bottom: 1px dashed #ccc;
font: normal 15px 'microsoft yahei';
}
.TC-MainContent .createTable{
background-color: #f9f9f9;
width:100%;
}
.TC-MainContent .el-form-item{
margin-bottom:10px;
}
.TC-MainContent .w300{
width:300px!important;
}
.TC-MainContent .w150{
width:150px!important;
}
.TC-MainContent .w180{
width:180px!important;
}
.TC-MainContent .w600{
width:600px!important;
}
.TC-MainContent .singeRowTable{width: 100%;border-collapse:collapse;}
.TC-MainContent .singeRowTable tr th,.v-table-title-cell{background: #E6E6E6;height:40px; font-size: 14px; color: #333;}
.TC-MainContent .singeRowTable tr{background: #fff;text-align: center; height: 40px;}
.TC-MainContent .singeRowTable tr:nth-child(2n+1){background:#fafafa; }
.TC-MainContent .singeRowTable tr:hover{background: #f2f2f2;}
.TC-MainContent .singeRowTable tr td{font-size: 12px;border: 1px solid #E5E5E5;}
.TC-MainContent .TC_NewAddBtn{
background-color: #006dcc;
width:83px;
height:26px;
color:#fff;
border:none;
margin-right: 5px;
cursor: pointer;
}
.TC-MainContent .singeRowTable .el-button.is-circle{
padding:5px;
}
.TC-MainContent .TcNewTable td{
padding:5px;
}
.TcNewTable tr:hover{
background-color: transparent!important;
}
.TC-MainContent .fixedMenu li.active {
background: #90b7ec;
color: #fff;
border-right-color: #5882bb;
}
.TC-MainContent .fixedMenu li.active:after {
border-left-color: #5882bb;
}
.TC-MainContent .pull-right{
float:right;
}
.TC-MainContent .TC_disabled{
color:#57a3f3;
cursor: not-allowed!important;
}
.TC-MainContent .TCbtn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
padding:10px 19px;
border:none;
outline: none;
cursor: pointer;
}
.TC-MainContent .btn-warning{
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #faa732;
*background-color: #f89406;
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
padding:10px 19px;
outline: none;
border:none;
cursor: pointer;
}
.TCbtn-info:hover,.btn-warning:hover{
color: #ffffff;
opacity: 0.8;
}
.TcTravel_Table{
width: 100%;
border: none;
border-collapse: collapse;
border-spacing: 0;
}
.TcTravel_Table td{
border: 1px solid rgb(0, 0, 0);
word-break: break-all;
padding:5px;
line-height: 2;
}
.TC_LASTTD div{
margin-bottom:10px;
}
.feeJisuan .el-form-item__label{
margin-top:5px;
}
.TC-MainContent .ql-editor{
min-height: 200px;
}
</style>
<template>
<div class="TC-MainContent">
<!-- 内容开始 -->
<ul class="fixedMenu" id="fixedMenu">
<li v-for="(item,index) in menuArr" :class="{'active':index==ckedIndex}" @click="ckedIndex=index,goAnchor('#anchor-'+index)">{{item}}</li>
</ul>
<div class="contractTit">
<span>
单项委托协议
</span>
<div class="pull-right">
<input type="button" v-if="CtObj.auditContract!=2" class="btn-warning" @click="submitForm('CtObj')" value="保存"/>
</div>
</div>
<el-form label-width="180px" :model="CtObj" :rules="rules" ref="CtObj">
<div class="container-fluid" style="padding-top: 60px; padding-left: 220px;">
<div class="block mtop15" id="anchor-0" ref="anchor0">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-dingdanguanli-"></i>
</span>
<h2>
<em>合同基本信息</em>
</h2>
</div>
<div class="createTableTitle">委托方（旅游者）信息</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="姓名" prop="clientName">
<el-input type="text" v-model="CtObj.clientName" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="证件号码">
<el-input type="text" v-model="CtObj.clientIdcardnum" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="住所">
<el-input type="text" v-model="CtObj.clientAddress" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="联系电话" prop="clientCall">
<el-input type="text" v-model="CtObj.clientCall" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="传真">
<el-input type="text" v-model="CtObj.clientFax" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" v-model="CtObj.clientPostCode" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮箱">
<el-input type="text" v-model="CtObj.clientEmail" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="紧急情况联系人姓名">
<el-input type="text" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="紧急情况联系人电话">
<el-input type="text" maxlength="100" class="w300"></el-input>
</el-form-item>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">受托方（旅行社）信息</div>
<table class="createTable">
<tbody>
<tr>
<td>
<el-form-item label="名称">
<el-input type="text" v-model="CtObj.company" :disabled="true" class="w300"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="经办人" prop="agentName">
<el-input type="text" class="w300" v-model="CtObj.agentName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="营业地址">
<el-input type="text" class="w300" v-model="CtObj.companyAddress"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="联系电话">
<el-input type="text" class="w300" v-model="CtObj.companyCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="传真">
<el-input type="text" class="w300" v-model="CtObj.companyFax"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" class="w300" v-model="CtObj.companyPostCode"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="电子邮箱">
<el-input type="text" class="w300" v-model="CtObj.companyEmail"></el-input>
</el-form-item>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-1" ref="anchor1">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-renwuguanli"></i>
</span>
<h2>
<em>相关告知及提示</em>
</h2>
</div>
<div class="createTableTitle">机票预定</div>
<table class="createTable">
<tbody>
<tr>
<td>
<div style="margin:0 0 10px 50px">a．折扣机票出票后不得退票、不改签。不可变更姓名、证件号码、日期和航班，一般在合同签订后&nbsp;
<el-form-item style="display:inline-block;" label-width="0">
<el-input type="text" class="w150"></el-input>&nbsp;日内出票
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">酒店预订</div>
<table class="createTable">
<tbody>
<tr>
<td>
<div style="margin:0 0 20px 50px">旅行社代旅游者预订酒店，一般合同签订后&nbsp;
<el-form-item style="display:inline-block;margin-bottom:0;" label-width="0">
<el-input type="text" class="w150"></el-input>&nbsp;
</el-form-item>
日内旅行社将为旅游者下订单，并以短信的方式通知旅游者，酒店一经预定并由旅行社通知到旅游者即完成合同代理义务。因酒店服务质量、退改房等引起的纠纷旅行社不承担责任，但应协助旅游者与酒店协商解决。
</div>
</td>
</tr>
</tbody>
</table>
<div class="createTableTitle">代办签证</div>
<table class="createTable">
<tbody>
<tr>
<td>
<div style="margin:20px 0 10px 50px">旅游者委托旅行社代办旅游签证的，旅行社需收取一定数额的出境押金用于旅游者违反旅游行程时间滞留境外或逾期回国时，旅游者应当向旅行社承担由此造成损失，包括旅行社信誉或被停签的损失，一旦发生滞留境外或逾期回国、不配合旅行社销签的，旅行社将该押金用于赔偿损失，不予退还。该押金应于旅行社交付旅游者签证前&nbsp;
<el-form-item style="display:inline-block;margin-bottom:0;" label-width="0">
<el-input type="text" class="w150"></el-input>&nbsp;
</el-form-item>
日内全额交纳。如未按时交纳该押金，旅行社有权停止交付旅游者签证并办理注销，费用不退还；如旅游者按期回国并销签后凭记载有入境记录的护照和登机牌向旅行社领回该押金。如未收取押金旅游者发生滞留、晚归或不配合销签的，旅行社有权向旅游者追偿由此造成的损失。
</div>
</td>
</tr>
<tr>
<td>
<div style="margin:0 0 10px 50px">旅游者同意选择下列第&nbsp;
<el-form-item style="display:inline-block;margin-bottom:0;" label-width="0">
<el-input type="text" class="w150"></el-input>&nbsp;
</el-form-item>
种方式交付办理签证的材料及领取签证。
</div>
</td>
</tr>
<tr>
<td>
<div style="margin:0 0 10px 50px">A、旅游者亲自现场领取。</div>
</td>
</tr>
<tr>
<td>
<div style="margin:0 0 10px 50px">B、旅游者委托第三人现场领取，第三人应持旅游者本人签字的授权委托书原件。</div>
</td>
</tr>
<tr>
<td>
<div style="margin:0 0 10px 50px">C、旅游者通过中国邮政EMS快递专递形式领取，费用由旅游者承担。如旅游者采取该方式领取的，旅行社将签证交付邮政部门即完成代理义务。因快递发生延误、丢失、毁损、灭失等风险，均由旅游者自行承担责任。</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-2" ref="anchor2">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-copy"></i>
</span>
<h2>
<em>费用计算</em>
</h2>
</div>
<table class="createTable feeJisuan">
<tbody>
<tr>
<td>
<div style="margin:20px 0 10px 50px">
<el-form-item style="display:inline-block;" label="费用总额（小写）人民币">
<el-input type="text" class="w150"></el-input>&nbsp;元
</el-form-item>
<el-form-item style="display:inline-block;" label="（大写）人民币" label-width="120px">
<el-input type="text" class="w150"></el-input>&nbsp;元
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-3" ref="anchor3">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-people"></i>
</span>
<h2>
<em>游客信息</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="60">序号</th>
<th>姓名</th>
<th>性别</th>
<th>证件类型</th>
<th>护照号码</th>
<th>联系电话（手机）</th>
<th>身体状况</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in touristList">
<td>{{index+1}}</td>
<td>
<span v-if="item.IsShow==0">{{item.name}}</span>
<el-input v-else type="text" v-model="item.name"></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.sex}}</span>
<el-select v-else v-model="item.sex">
<el-option label="男" :value="1"></el-option>
<el-option label="女" :value="2"></el-option>
</el-select>
</td>
<td>
<span v-if="item.IsShow==0">{{item.certificateType}}</span>
<el-select v-else v-model="item.certificateType">
<el-option label="护照" :value="1"></el-option>
<el-option label="港澳通行证" :value="2"></el-option>
<el-option label="赴台证" :value="3"></el-option>
<el-option label="身份证" :value="4"></el-option>
<el-option label="其他" :value="5"></el-option>
</el-select>
</td>
<td>
<span v-if="item.IsShow==0">{{item.passportNo}}</span>
<el-input v-else type="text" v-model="item.passportNo"></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.mobilePhone}}</span>
<el-input v-else type="text" v-model="item.mobilePhone"></el-input>
</td>
<td>
<span v-if="item.IsShow==0">{{item.isHealth}}</span>
<el-input v-else type="text" v-model="item.isHealth"></el-input>
</td>
<td>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start" v-if="item.IsShow==0">
<el-button type="primary" icon="el-icon-edit" circle @click="item.IsShow=1"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="保存" placement="top-start" v-if="item.IsShow==1">
<el-button type="primary" icon="iconfont icon-baocun" circle @click="item.IsShow=0"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="item.IsShow==0">
<el-button type="danger" icon="el-icon-delete" @click="delTourist(index)" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="9" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" @click="addTourists()" value="+添加游客" />
</td>
</tr>
</table>
</div>
<div class="block mtop15" id="anchor-4" ref="anchor4">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>机票预订</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th width="10%">时间</th>
<th width="15%">出发地</th>
<th width="12%">目的地</th>
<th width="12%">航班号</th>
<th width="12%">机票金额（元/张）</th>
<th width="12%">机场建设费（元/张）</th>
<th width="12%">定金（元/张）</th>
<th width="100">操作</th>
</tr>
<tr>
<td>
1
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<!-- <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="保存" placement="top-start">
<el-button type="primary" icon="iconfont icon-baocun" circle></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="9" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" @click="addRecord()" value="+添加记录" />
</td>
</tr>
<tr>
<td colspan="9" style="text-align:left;">
<div style="margin:20px 0 10px 50px">
<el-form-item style="display:inline-block;" label="共计：" label-width="60px">
<el-input type="text" class="w150"></el-input>
</el-form-item>
<el-form-item style="display:inline-block;" label="张机票合同签订后" label-width="130px">
<el-input type="text" class="w150"></el-input>&nbsp;日内出票，
</el-form-item>
</div>
<div style="margin:0 0 20px 50px">
本机票出票后不得退票、改签。由于旅游者原因退、改签机票款全部损失，由旅游者自行承担。
</div>
<div style="margin-left:50px">
<el-form-item label="机票预定费用总额：" label-width="140px">
<el-input type="text" class="w150"></el-input>&nbsp;元
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-5" ref="anchor5">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>酒店预订</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th>酒店名称</th>
<th>标准间</th>
<th>单人间</th>
<th>三人间</th>
<th>成人人数</th>
<th>
<div>儿童人数</div>
<div>（不占床位、不加床位）</div>
</th>
<th>
<div>房费</div>
<div>（元/间/晚）</div>
</th>
<th>
<div>定金</div>
<div>（元/间/晚）</div>
</th>
<th>入住日期</th>
<th>离店日期</th>
<th width="100">操作</th>
</tr>
<tr>
<td>
1
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<!-- <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="保存" placement="top-start">
<el-button type="primary" icon="iconfont icon-baocun" circle></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="12" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" @click="addRecord()" value="+添加记录" />
</td>
</tr>
<tr>
<td colspan="12" style="text-align:left;">
<div style="margin:20px 0 0 50px">
<el-form-item style="display:inline-block;" label="共计：" label-width="60px">
<el-input type="text" class="w180"></el-input>&nbsp;间、晚
</el-form-item>
</div>
<div style="margin:10px 0 10px 50px">
<el-form-item style="display:inline-block;" label="酒店入住的方式：" label-width="130px">
<el-input type="text" class="w180"></el-input>
</el-form-item>
</div>
<div style="margin:0 0 10px 50px">
<el-form-item style="display:inline-block;" label="下订单后通知旅游者的方式：" label-width="200px">
<el-input type="text" class="w180"></el-input>
</el-form-item>
</div>
<div style="margin:0 0 20px 56px">
该酒店一经下订单不退、不改，如因客人原因退、改房，房费全损，由旅游者承担。
</div>
<div>
<el-form-item style="display:inline-block;" label="费用共计：" label-width="140px">
<el-input type="text" class="w180"></el-input>&nbsp;元
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-6" ref="anchor6">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>接送服务</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th>用车日期</th>
<th>乘客人数</th>
<th>出发地</th>
<th>目的地</th>
<th>类型</th>
<th width="100">操作</th>
</tr>
<tr>
<td>
1
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-select>
<el-option label="单程" :value="1"></el-option>
<el-option label="往返" :value="2"></el-option>
</el-select>
</td>
<td>
<!-- <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="保存" placement="top-start">
<el-button type="primary" icon="iconfont icon-baocun" circle></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="12" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" value="+添加记录" />
</td>
</tr>
<tr>
<td colspan="12" style="text-align:left;">
<div style="margin:20px 0 0 50px">
<el-form-item style="display:inline-block;" label="费用共计：" label-width="90px">
<el-input type="text" class="w180"></el-input>&nbsp;元
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-7" ref="anchor7">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>代办签证</em>
</h2>
</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th>国家（个人签证）</th>
<th>停留时间</th>
<th>代办签证费用（元/个）</th>
<th>交付保证金（元/个）</th>
<th width="100">操作</th>
</tr>
<tr>
<td>
1
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<!-- <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="保存" placement="top-start">
<el-button type="primary" icon="iconfont icon-baocun" circle></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="12" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" value="+添加记录" />
</td>
</tr>
<tr>
<td colspan="12" style="text-align:left;">
<div style="margin:20px 0 0 50px">
<el-form-item style="display:inline-block;" label="合计金额：" label-width="90px">
<el-input type="text" class="w180"></el-input>&nbsp;元
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-8" ref="anchor8">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>服务组合（ 机票与酒店）</em>
</h2>
</div>
<div style="margin:20px;">机票预订</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th>时间</th>
<th>出发地</th>
<th>目的地</th>
<th>航班号</th>
<th>舱位</th>
<th>机票金额（元/张）</th>
<th>机场建设费（元/张）</th>
<th width="100">操作</th>
</tr>
<tr>
<td>
1
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-select>
<el-option label="普通舱" :value="1"></el-option>
<el-option label="公务舱" :value="2"></el-option>
<el-option label="头等舱" :value="3"></el-option>
</el-select>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<!-- <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="保存" placement="top-start">
<el-button type="primary" icon="iconfont icon-baocun" circle></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="12" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" value="+添加记录" />
</td>
</tr>
</tbody>
</table>
<div style="margin:20px;">酒店预订</div>
<table class="singeRowTable TcNewTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="60">序号</th>
<th>酒店名称</th>
<th>标准间</th>
<th>单人间</th>
<th>三人间</th>
<th>入住日期</th>
<th>离店日期</th>
<th>成人费用</th>
<th>儿童费用</th>
<th width="100">操作</th>
</tr>
<tr>
<td>
1
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder=''></el-date-picker>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<el-input type="text"></el-input>
</td>
<td>
<!-- <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
</el-tooltip> -->
<el-tooltip class="item" effect="dark" content="保存" placement="top-start">
<el-button type="primary" icon="iconfont icon-baocun" circle></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button type="danger" icon="el-icon-delete" circle ></el-button>
</el-tooltip>
</td>
</tr>
<tr>
<td colspan="12" style="text-align:right;">
<input type="button" class="TC_NewAddBtn" value="+添加记录" />
</td>
</tr>
<tr>
<td colspan="12" style="text-align:left;">
<div style="margin:20px 0 0 50px">
<el-form-item style="display:inline-block;" label="合计金额：" label-width="90px">
<el-input type="text" class="w180"></el-input>&nbsp;元
</el-form-item>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="block mtop15" id="anchor-9" ref="anchor9">
<div class="blockTitle">
<span class="icon">
<i class="iconfont icon-bianji"></i>
</span>
<h2>
<em>其他单项服务事宜</em>
</h2>
</div>
<div>
<div style="margin:20px 0 0 50px">
<el-form-item style="display:inline-block;" label="其他服务费用合计：" label-width="140px">
<el-input type="text" class="w180"></el-input>&nbsp;元
</el-form-item>
</div>
</div>
<div>
<el-form-item label-width="0">
<quill-editor :options="editorOption"></quill-editor>
</el-form-item>
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
let valiTotalNumber = (rule, value, callback) => {
if (this.CtObj.totalNumber == 0||this.CtObj.totalNumber =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validateEach = (rule, value, callback) => {
if (this.CtObj.eachNumber == 0||this.CtObj.eachNumber =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatepayType = (rule, value, callback) => {
if (this.CtObj.payType == 0||this.CtObj.payType =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatesettleDisputeMode = (rule, value, callback) => {
if (this.CtObj.settleDisputeMode == 0 ||this.CtObj.settleDisputeMode=='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
return {
//选中切换
cked:1,
//查询参数
msg:{
TCID:0,
orderID:0,
guestId:0
},
addMsg: {
Country: 0,
Province: 0,
City: 0
},
//参数
CtObj:{
//基本信息
clientName:'',
clientIdcardnum:'',
clientCall:'',
clientFax:'',
clientEmail:'',
clientPostCode:'',
clientCountryid:0,
clientProvinceid:0,
clientCityid:0,
clientAddress:'',
company:'',
businessCertificate:'',
companyCall:'',
companyFax:'',
companyEmail:'',
companyPostCode:'',
companyCountryid:0,
companyProvinceid:0,
companyCityid:0,
companyAddress:'',
agentName:'',
agentCall:'',
//合同条款
totalNumber:2,
eachNumber:1,
productName:'',
startDate:'',
returnDate:'',
dayNum:'',
nightNum:'',
adultPrice:'',
childPrice:'',
servicePrice:'',
orderPrice:'',
payDate:'',
payType:'',
//客户同意
insuranceOpinion:'',
insuranceCompany:'',
insuranceProduct:'',
insuranceAmount:'',
minNumber:0,
insteadOpinion:'',
insteadCompany:'',
delayOpinion:'',
changeOpinion:'',
terminateOpinion:'',
carpoolOpinion:'',
carpoolCompany:'',
settleDisputeMode:2,
arbitrationCommission:'',
court:'',
otherMatter:'',
//投诉信息
companyComplainCall:'',
regulatorName:'',
regulatorComplainCall:'',
regulatorWebsite:'',
regulatorPostCode:'',
regulatorCountryid:0,
regulatorProvinceid:0,
regulatorCityid:0,
regulatorAddress:'',
//行程信息
travelContent:'',
//旅客信息
togetherRemark:'',
singleRemark:'',
nobedRemark:'',
aloneRemark:'',
tcid:0,
orderId:0,
tCNum:'',
payProtocol:'',
shopProtocol:''
},
rules: {
},
//自愿购物活动补充协议
VoluntaryArr:[],
//自愿付费项目补充协议
WillingPayArr:[],
//菜单列表
menuArr:['合同基本信息','相关告知及提示','费用计算','游客信息','机票预订','酒店预订','接送服务','代办签证','服务组合（机票与酒店）','其他单项服务事宜'],
ckedIndex:0,
ckedAll:false,
//旅客信息
touristList:[],
editorOption:{
modules:{
toolbar:[
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block','align']
]
}
},
};
},
methods: {
//跳转锚点
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.documentElement.scrollTop = anchor.offsetTop-70
},
//提交数据
SaveMsg(){
this.CtObj.status = 1;
this.CtObj.contractStatus=2;
let VolArr = [];
let WalArr = [];
if(this.VoluntaryArr.length>0){
this.VoluntaryArr.forEach(x=>{
if(x.IsShow==0){
VolArr.push(x);
}
})
if(VolArr.length>0){
this.CtObj.shopProtocol = JSON.stringify(VolArr);
}else{
this.CtObj.shopProtocol=''
}
}
if(this.WillingPayArr.length>0){
this.WillingPayArr.forEach(x=>{
if(x.IsShow==0){
WalArr.push(x);
}
})
if(WalArr.length>0){
this.CtObj.payProtocol = JSON.stringify(WalArr);
}else{
this.CtObj.payProtocol=''
}
}
this.CtObj.travelContent= this.$refs.TcTravel_Table.innerHTML;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.dialogVisible=false;
this.getList();
} else {
this.Error(res.data.message);
}
},null);
},
//跳转至预览
goUrl(){
this.$router.push({
name: 'TravelContractDetail',
query: {
TCID: this.$route.query.TCID,
guestId:this.CtObj.guestId,
orderID: this.$route.query.orderID,
blank: "y",
}
});
},
//提交
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.SaveMsg();
} else {
this.Error('请完成必填项');
return false;
}
});
},
//添加旅客信息
addTourists(){
let obj={
name:'',
sex:'',
certificateType:1,
passportNo:'',
mobilePhone:'',
isHealth:'',
IsShow:1
}
this.touristList.push(obj);
},
//删除旅客信息
delTourist(index){
this.touristList.splice(index, 1);
},
//添加补充协议
addRecord(){
let obj={
specificTime:'',
Address:'',
shoppName:'',
CommodityInformation:'',
stayTime:'',
other:'',
travelSign:'',
IsShow:1
}
this.VoluntaryArr.push(obj);
},
//删除补充协议1
delVoluntray(index){
this.VoluntaryArr.splice(index, 1);
},
//滚动条滚动选中tab
menu() {
var _self = this;
_self.scroll = (document.documentElement.scrollTop || document.body.scrollTop)+70;
//滑动到指定位置相应菜单高亮
var a_0 = this.$refs.anchor0.offsetTop;
var a_1 = this.$refs.anchor1.offsetTop;
var a_2 = this.$refs.anchor2.offsetTop;
var a_3 = this.$refs.anchor3.offsetTop;
var a_4 = this.$refs.anchor4.offsetTop;
var a_5 = this.$refs.anchor5.offsetTop;
var a_6 = this.$refs.anchor6.offsetTop;
var a_7 = this.$refs.anchor7.offsetTop;
var a_8 = this.$refs.anchor7.offsetTop;
var a_9 = this.$refs.anchor7.offsetTop;
if (_self.scroll < a_0) {
this.ckedIndex = 0
} else if (_self.scroll>a_0 && _self.scroll < a_1) {
this.ckedIndex = 1
} else if (_self.scroll > a_2 && _self.scroll<a_3) {
this.ckedIndex = 2
}else if (_self.scroll > a_3 && _self.scroll<a_4) {
this.ckedIndex = 3
}else if (_self.scroll > a_4 && _self.scroll<a_5) {
this.ckedIndex = 4
}else if (_self.scroll > a_5 && _self.scroll<a_6) {
this.ckedIndex = 5
}else if (_self.scroll > a_6 && _self.scroll<a_7) {
this.ckedIndex = 6
}else if (_self.scroll > a_7 && _self.scroll<a_8) {
this.ckedIndex = 7
}else if (_self.scroll > a_8 && _self.scroll<a_9) {
this.ckedIndex = 8
}
},
},
mounted() {
this.$nextTick(function () {
//滚动监听事件
window.addEventListener('scroll', this.menu)
});
}
};
</script>
src/router/config.js
View file @ de0f87ae
......@@ -4233,6 +4233,14 @@ export default {
title: '电子合同'
}
},
{
path: '/SingleContract', //单项合同
name: 'SingleContract',
component: resolve => require(['@/components/SingleContract'], resolve),
meta: {
title: '单项合同'
},
},
{
path: '/TravelContractDetail', //新电子合同详情
name: 'TravelContractDetail',
......@@ -4241,6 +4249,7 @@ export default {
title: '电子合同'
}
},
{
path: '/supplierLogin', //供应商登录
name: 'supplierLogin',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment