<style>
.ContractMain{
width:1200px;
margin:auto;
padding:20px;
background-color: #fff;
}
.CM_left{
float:left;
width: 150px;
height: 100%;
position: fixed;
margin-top:100px;
}
.CM_left ul li{
display: block;
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
padding: 0;
margin-top: 5px;
border-radius: 5px;
font-size: 13px;
cursor: pointer;
}
.CM_left ul li:hover {background-color:#ed4040;color:#fff;}
.CMcked{
background-color: #ed4040;
color:#fff;
}
.CM_right{
width:950px;
height:auto;
float:right;
text-align: center;
margin-left:10px;
}
.CM_rightHeader{
width:100%;
height:100%;
font-weight: bold;
margin-bottom:10px;
}
.contractName {
font-size:20px;
margin-bottom:5px;
}
.CM_ComTitle{
width:100%;
height:45px;
background-color: #F2F2F2;
font-weight: bold;
font-size:16px;
text-indent: 10px;
text-align:left;
display: flex;
align-items: center;
}
.CM_comTable{
width:100%;
}
.ContractMain .littleTitle{
margin:40px 0 20px 10px;
font-weight: bold;
text-align: left;
font-size:14px;
}
.CM_align{
text-align: right;
}
.CM_comTable td{
padding-left:80px;
text-align: left;
}
.w640{
width:640px!important;
}
.TC_tittle{
padding-left:0!important;
}
.CM_ComLast{
vertical-align:top;
text-align:right;
padding-right:20px;
}
.CM_comDiv{
margin-bottom:30px;
}
.TC_div{
display:none;
}
.checkedNav{
display: block;
}
</style>
<template>
<div class="ContractMain clearfix">
<div class="CM_left">
<ul>
<li :class="{'CMcked':cked==1}" @click="cked=1">基本信息</li>
<li :class="{'CMcked':cked==2}" @click="cked=2">合同条款</li>
<li :class="{'CMcked':cked==3}" @click="cked=3">投诉信息</li>
<li :class="{'CMcked':cked==4}" @click="cked=4">行程信息</li>
<li :class="{'CMcked':cked==5}" @click="cked=5">旅客信息</li>
</ul>
</div>
<div class="CM_right">
<div class="CM_rightHeader">
<div class="contractName">四川和平国际旅行社有限公司</div>
<div class="contractName">团队出境旅游合同</div>
<div>合同编号：<span style="color:blue;font-size:14px;">{{CtObj.contractNum}}</span></div>
</div>
<el-form label-width="180px" :model="CtObj" :rules="rules" ref="CtObj">
<div class="TC_div" :class="{'checkedNav':cked==1}">
<div class="CM_ComTitle">基本信息</div>
<div class="littleTitle">客户信息</div>
<table class="CM_comTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<el-form-item label="客户名称" prop="clientName">
<el-input type="text" v-model="CtObj.clientName" maxlength="100" class="w210"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="身份证号">
<el-input type="text" v-model="CtObj.clientIdcardnum" maxlength="100" class="w210"></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="w210"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="传真">
<el-input type="text" v-model="CtObj.clientFax" maxlength="100" class="w210"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="电子邮箱">
<el-input type="text" v-model="CtObj.clientEmail" maxlength="100" class="w210"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" v-model="CtObj.clientPostCode" maxlength="100" class="w210"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="所在地区">
<el-select placeholder="请选择国家" filterable class='multiple_input w210' v-model="CtObj.clientCountryid" @change="GetSubAreaList(CtObj.clientCountryid,1),CtObj.clientProvinceid=0,CtObj.clientCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择省" filterable class='multiple_input w210' v-model="CtObj.clientProvinceid"
@change="GetSubAreaList(CtObj.clientProvinceid,2),CtObj.clientCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in ClientProvinceList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择市" filterable class='multiple_input w210' v-model="CtObj.clientCityid">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in ClientCityList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="详细地址">
<el-input type="text" v-model="CtObj.clientAddress" class="w640"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">公司信息</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="公司名称">
<el-input type="text" v-model="CtObj.company" :disabled="true" class="w210"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="经营许可证号">
<el-input type="text" class="w210" :disabled="true" v-model="CtObj.businessCertificate"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="联系电话">
<el-input type="text" class="w210" v-model="CtObj.companyCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="传真">
<el-input type="text" class="w210" v-model="CtObj.companyFax"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="电子邮箱">
<el-input type="text" class="w210" v-model="CtObj.companyEmail"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="邮编">
<el-input type="text" class="w210" v-model="CtObj.companyPostCode"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="所在地区">
<el-select placeholder="请选择国家" filterable class='multiple_input w210' v-model="CtObj.companyCountryid" @change="GetComAreaList(CtObj.companyCountryid,1),CtObj.companyProvinceid=0,CtObj.companyCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择省" filterable class='multiple_input w210' v-model="CtObj.companyProvinceid"
@change="GetComAreaList(CtObj.companyProvinceid,2),CtObj.companyCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in companyProvinceList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择市" filterable class='multiple_input w210' v-model="CtObj.companyCityid">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in companyCityList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="详细地址">
<el-input type="text" class="w640" v-model="CtObj.companyAddress"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">经办人信息</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="经办人" prop="agentName">
<el-input type="text" class="w210" v-model="CtObj.agentName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="联系电话" prop="agentCall">
<el-input type="text" class="w210" v-model="CtObj.agentCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="签约地点/网点名称" prop="contractPlace">
<el-input type="text" class="w640" v-model="CtObj.contractPlace"></el-input>
</el-form-item>
</td>
</tr>
</tbody>
</table>
</div>
<div class="TC_div" :class="{'checkedNav':cked==2}">
<div class="CM_ComTitle">合同条款</div>
<div class="littleTitle">合同效力</div>
<table class="CM_comTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<el-form-item label="本合同一式" prop="totalNumber">
<el-select placeholder="请选择" filterable v-model="CtObj.totalNumber" class='w210'>
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<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-option label="陆" :value='6'></el-option>
<el-option label="柒" :value='7'></el-option>
<el-option label="捌" :value='8'></el-option>
<el-option label="玖" :value='9'></el-option>
<el-option label="拾" :value='10'></el-option>
</el-select>
份
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="双方各持" prop="eachNumber">
<el-select placeholder="请选择" filterable v-model="CtObj.eachNumber" class='w210'>
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<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-option label="陆" :value='6'></el-option>
<el-option label="柒" :value='7'></el-option>
<el-option label="捌" :value='8'></el-option>
<el-option label="玖" :value='9'></el-option>
<el-option label="拾" :value='10'></el-option>
</el-select>
份
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">线路行程时间</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="产品名称" prop="productName">
<el-input type="text" class="w210" v-model="CtObj.productName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="出发日期" prop="startDate">
<el-date-picker class="w210" v-model="CtObj.startDate" type="date" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="返回日期" prop="returnDate">
<el-date-picker class="w210" v-model="CtObj.returnDate" type="date" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="共" prop="dayNum">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.dayNum">
<el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
<el-option label="1" :value='1'></el-option>
<el-option label="2" :value='2'></el-option>
<el-option label="3" :value='3'></el-option>
<el-option label="4" :value='4'></el-option>
<el-option label="5" :value='5'></el-option>
<el-option label="6" :value='6'></el-option>
<el-option label="7" :value='7'></el-option>
<el-option label="8" :value='8'></el-option>
<el-option label="9" :value='9'></el-option>
<el-option label="10" :value='10'></el-option>
<el-option label="11" :value='11'></el-option>
<el-option label="12" :value='12'></el-option>
<el-option label="13" :value='13'></el-option>
<el-option label="14" :value='14'></el-option>
<el-option label="15" :value='15'></el-option>
<el-option label="16" :value='16'></el-option>
<el-option label="17" :value='17'></el-option>
<el-option label="18" :value='18'></el-option>
<el-option label="19" :value='19'></el-option>
<el-option label="20" :value='20'></el-option>
</el-select>
天
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="酒店住宿" prop="nightNum">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.nightNum">
<el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
<el-option label="1" :value='1'></el-option>
<el-option label="2" :value='2'></el-option>
<el-option label="3" :value='3'></el-option>
<el-option label="4" :value='4'></el-option>
<el-option label="5" :value='5'></el-option>
<el-option label="6" :value='6'></el-option>
<el-option label="7" :value='7'></el-option>
<el-option label="8" :value='8'></el-option>
<el-option label="9" :value='9'></el-option>
<el-option label="10" :value='10'></el-option>
<el-option label="11" :value='11'></el-option>
<el-option label="12" :value='12'></el-option>
<el-option label="13" :value='13'></el-option>
<el-option label="14" :value='14'></el-option>
<el-option label="15" :value='15'></el-option>
<el-option label="16" :value='16'></el-option>
<el-option label="17" :value='17'></el-option>
<el-option label="18" :value='18'></el-option>
<el-option label="19" :value='19'></el-option>
<el-option label="20" :value='20'></el-option>
</el-select>
晚
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">旅游费用及支付</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="成人价" prop="adultPrice">
<el-input type="text" class="w210" v-model="CtObj.adultPrice"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="小孩价" prop="childPrice">
<el-input type="text" class="w210" v-model="CtObj.childPrice"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="导游服务费 ">
<el-input type="text" class="w210" v-model="CtObj.servicePrice"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="费用合计" prop="orderPrice">
<el-input type="text" class="w210" v-model="CtObj.orderPrice"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="支付日期" prop="payDate">
<el-date-picker class="w210" v-model="CtObj.payDate" type="date" value-format="yyyy-MM-dd" placeholder></el-date-picker>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="支付方式" prop="payType">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.payType">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="现金" :value='1'></el-option>
<el-option label="转账" :value='2'></el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">人身意外伤害保险</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="客户" prop="insuranceOpinion">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.insuranceOpinion">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
委托出境社办理人身意外伤害保险
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="保险公司">
<el-input type="text" class="w210" v-model="CtObj.insuranceCompany"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="保险产品">
<el-input type="text" class="w210" v-model="CtObj.insuranceProduct"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="保额">
<el-input type="text" class="w210" v-model="CtObj.insuranceAmount"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">成团人数与不成团的约定</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="最低成团人数" prop="minNumber">
<el-input type="text" class="w210" v-model="CtObj.minNumber"></el-input> 人
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="如果不能成团，客户" prop="insteadOpinion">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.insteadOpinion">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
旅行社委托其他旅行社履行合同
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="被委托旅行社名称">
<el-input type="text" class="w210" v-model="CtObj.insteadCompany"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="如果不能成团，客户" prop="delayOpinion">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.delayOpinion">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
延期出团
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="如果不能成团，客户" prop="changeOpinion">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.changeOpinion">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
改签其他线路或产品出团
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="如果不能成团，客户" prop="terminateOpinion">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.terminateOpinion">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
解除合同
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">拼团约定</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="客户" prop="carpoolOpinion">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.carpoolOpinion">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="同意" :value='1'></el-option>
<el-option label="不同意" :value='2'></el-option>
</el-select>
采用拼团方式成团
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="参与拼团旅行社">
<el-input type="text" class="w210" v-model="CtObj.carpoolCompany"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">争议的解决方式</div>
</td>
</tr>
<tr>
<td>
<el-form-item label="协商或调解不成，按照第" prop="settleDisputeMode">
<el-select placeholder="请选择" filterable class='w210' v-model="CtObj.settleDisputeMode">
<el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
<el-option label="1" :value='1'></el-option>
<el-option label="2" :value='2'></el-option>
</el-select>
种方式解决
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="（1）提交">
<el-input type="text" class="w210" v-model="CtObj.arbitrationCommission"></el-input> 仲裁委员会仲裁
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="（2）依法向">
<el-input type="text" class="w210" v-model="CtObj.court"></el-input> 人民法院起诉
</el-form-item>
</td>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle">其他约定事项</div>
</td>
</tr>
<tr>
<td class="TC_tittle">
<el-input type="textarea" resize="none" v-model="CtObj.otherMatter" rows="6"></el-input>
</td>
</tr>
</tbody>
</table>
</div>
<div class="TC_div" :class="{'checkedNav':cked==3}">
<div class="CM_ComTitle">投诉信息</div>
<table class="CM_comTable" cellspacing="0" cellpadding="0" style="margin-top:40px;">
<tbody>
<tr>
<td>
<el-form-item label="公司投诉电话">
<el-input type="text" class="w210" v-model="CtObj.companyComplainCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构名称">
<el-input type="text" class="w210" v-model="CtObj.regulatorName"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构投诉电话">
<el-input type="text" class="w210" v-model="CtObj.regulatorComplainCall"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构网址">
<el-input type="text" class="w210" v-model="CtObj.regulatorWebsite"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构邮编">
<el-input type="text" class="w210" v-model="CtObj.regulatorPostCode"></el-input>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构所属地区">
<el-select placeholder="请选择国家" filterable class='multiple_input w210' v-model="CtObj.regulatorCountryid" @change="GetJianAreaList(CtObj.regulatorCountryid,1),CtObj.regulatorProvinceid=0,CtObj.regulatorCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择省" filterable class='multiple_input w210' v-model="CtObj.regulatorProvinceid"
@change="GetJianAreaList(CtObj.regulatorProvinceid,2),CtObj.regulatorCityid=0">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in JianProvinceList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
<el-select placeholder="请选择市" filterable class='multiple_input w210' v-model="CtObj.regulatorCityid">
<el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
<el-option v-for="childItem in JianCityList" :key="childItem.ID" :label="childItem.Name"
:value="childItem.ID">
</el-option>
</el-select>
</el-form-item>
</td>
</tr>
<tr>
<td>
<el-form-item label="监管机构详细地址">
<el-input type="text" class="w640" v-model="CtObj.regulatorAddress"></el-input>
</el-form-item>
</td>
</tr>
</tbody>
</table>
</div>
<div class="TC_div" :class="{'checkedNav':cked==4}">
<div class="CM_ComTitle" style="margin-bottom:40px;">行程信息</div>
<el-input type="textarea" rows="16" resize="none" v-model="CtObj.travelContent"></el-input>
</div>
<div class="TC_div" :class="{'checkedNav':cked==5}">
<div class="CM_ComTitle">旅客信息</div>
<div class="littleTitle" style="margin:40px 0 30px 0;">旅客名单（{{guestList.length}}人）</div>
<table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>国籍</th>
<th>民族</th>
<th>性别</th>
<th>出生日期</th>
<th>身份证号</th>
<th>护照号</th>
<th>手机号</th>
</tr>
<tr v-for="item in guestList">
<td>{{item.surName+''+item.name}}</td>
<td>{{item.nationalityName}}</td>
<td></td>
<td>{{item.sex==1?'男':'女'}}</td>
<td>{{getDate(item.birthday)}}</td>
<td>{{item.idCard}}</td>
<td>{{item.passportNo}}</td>
<td>{{item.mobilePhone}}</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="font-size:12px;width:100%;">
<tbody>
<tr>
<td class="TC_tittle" colspan="2">
<div class="littleTitle" style="margin-bottom:40px;">住宿情况</div>
</td>
</tr>
<tr>
<div class="CM_comDiv">
<td width="150" class="CM_ComLast">
同住人
</td>
<td style="text-align:left;">
<el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.togetherRemark"></el-input>
</td>
</div>
<div class="CM_comDiv">
<td width="150" class="CM_ComLast">
单男/单女
</td>
<td style="text-align:left;">
<el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.singleRemark"></el-input>
</td>
</div>
<div class="CM_comDiv">
<td width="150" class="CM_ComLast">
不占床人员
</td>
<td style="text-align:left;">
<el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.nobedRemark"></el-input>
</td>
</div>
<div>
<td width="150" class="CM_ComLast">
单独住人员
</td>
<td style="text-align:left;">
<el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.aloneRemark"></el-input>
</td>
</div>
</tr>
<tr>
<td class="TC_tittle">
<div class="littleTitle" style="margin-bottom:40px;">健康情况</div>
</td>
</tr>
<tr>
<div style="margin-left:-30px;">
<td style="text-align:left;" colspan="2">
<el-form-item label="参团旅客健康情况说明" prop="healthRemark">
<el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.healthRemark"></el-input>
</el-form-item>
</td>
</div>
</tr>
</tbody>
</table>
</div>
</el-form>
<div style="margin-top:20px;">
<input type="button" v-if="CtObj.status==1&&CtObj.auditContract==0" class="normalBtn" style="margin:0 0 30px 60px;" @click="sendAudit()" value="提交审核"/>
<input type="button" v-if="CtObj.status==1&&CtObj.auditContract==3" class="normalBtn" style="margin:0 0 30px 60px;" @click="sendAudit()" value="审核已被驳回,重新提交"/>
<input type="button" v-if="CtObj.auditContract==0||CtObj.auditContract==3" class="normalBtn" @click="submitForm('CtObj')" value="保存"/>
<input type="button" class="normalBtn" v-if="CtObj.status==1" @click="goUrl()" value="预览">
<input type="button" class="normalBtn" v-if="CtObj.status==1" @click="getinvalid()" value="作废">
</div>
</div>
</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 validateOption = (rule, value, callback) => {
if (this.CtObj.insuranceOpinion == 0||this.CtObj.insuranceOpinion =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validateinsteadO = (rule, value, callback) => {
if (this.CtObj.insteadOpinion == 0||this.CtObj.insteadOpinion =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatedelayOpinion = (rule, value, callback) => {
if (this.CtObj.delayOpinion == 0||this.CtObj.delayOpinion =='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatechangeOpinion = (rule, value, callback) => {
if (this.CtObj.changeOpinion == 0 ||this.CtObj.changeOpinion=='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validateterminateOpinion = (rule, value, callback) => {
if (this.CtObj.terminateOpinion == 0 ||this.CtObj.terminateOpinion=='') {
return callback(new Error('请选择'));
} else {
callback();
}
}
let validatecarpoolOpinion = (rule, value, callback) => {
if (this.CtObj.carpoolOpinion == 0 ||this.CtObj.carpoolOpinion=='') {
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 {
//国家列表
CountryList: [],
//客户省份列表
ClientProvinceList: [],
//客户城市列表
ClientCityList: [],
//公司省份列表
companyProvinceList:[],
//公司城市列表
companyCityList:[],
//监管机构省
JianProvinceList:[],
//监管机构市
JianCityList:[],
//选中切换
cked:1,
//查询参数
msg:{
TCID:0,
orderID:0
},
addMsg: {
Country: 0,
Province: 0,
City: 0
},
//参数
CtObj:{
//基本信息
clientName:'',
clientIdcardnum:'',
clientCall:'',
clientFax:'',
clientEmail:'',
clientPostCode:'',
clientCountryid:0,
clientProvinceid:0,
clientCityid:0,
clientAddress:'',
company:'四川和平国际旅行社有限公司',
businessCertificate:'0000000',
companyCall:'',
companyFax:'',
companyEmail:'',
companyPostCode:'',
companyCountryid:0,
companyProvinceid:0,
companyCityid:0,
companyAddress:'',
agentName:'',
agentCall:'',
contractPlace:'',
//合同条款
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:'',
arbitrationCommission:'',
court:'',
otherMatter:'',
//投诉信息
companyComplainCall:'',
regulatorName:'',
regulatorComplainCall:'',
regulatorWebsite:'',
regulatorPostCode:'',
regulatorCountryid:0,
regulatorProvinceid:0,
regulatorCityid:0,
regulatorAddress:'',
//行程信息
travelContent:'',
//旅客信息
togetherRemark:'',
singleRemark:'',
nobedRemark:'',
aloneRemark:'',
healthRemark:'',
tcid:0,
orderId:0,
},
//旅客名单
guestList:[],
tripList: [],
rules: {
clientName: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
clientCall: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
agentName: [{ required: true, message: "请输入经办人", trigger: "blur" }],
agentCall: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
contractPlace: [{ required: true, message: "请输入签约地点/网点名称", trigger: "blur" }],
totalNumber: [{ validator: valiTotalNumber,trigger: 'change',required: true,}],
eachNumber:[{ validator: validateEach, trigger: "change",required: true, }],
productName:[{ required: true, message: "请填写产品名称", trigger: "blur" }],
startDate:[{ required: true, message: "请选择出发日期", trigger: "change" }],
returnDate:[{ required: true, message: "请选择返回日期", trigger: "blur" }],
dayNum:[{ required: true, message: "请选择天数", trigger: "change" }],
nightNum:[{ required: true, message: "请选择晚数", trigger: "change" }],
adultPrice:[{ required: true, message: "请填写成人价", trigger: "blur" }],
childPrice:[{ required: true, message: "请填写小孩价", trigger: "blur" }],
orderPrice:[{ required: true, message: "请填写费用合计", trigger: "blur" }],
payDate:[{ required: true, message: "请选择支付日期", trigger: "change" }],
payType:[{ validator: validatepayType , trigger: "change",required: true, }],
insuranceOpinion:[{ validator: validateOption , trigger: "change" ,required: true,}],
minNumber:[{ required: true, message: "请填写最低成团人数", trigger: "change" }],
insteadOpinion:[{ required: true, validator: validateinsteadO , trigger: "change" }],
delayOpinion:[{ required: true, validator: validatedelayOpinion , trigger: "change" }],
changeOpinion:[{ required: true, validator: validatechangeOpinion, trigger: "change" }],
terminateOpinion:[{ required: true, validator: validateterminateOpinion, trigger: "change" }],
carpoolOpinion:[{ required: true, validator: validatecarpoolOpinion, trigger: "change" }],
settleDisputeMode:[{ required: true, validator: validatesettleDisputeMode, trigger: "change" }],
healthRemark:[{ required: true, message: "请填写参团旅客健康情况说明", trigger: "blur" }]
}
};
},
methods: {
//获取数据
getList(){
this.apiJavaPost("/api/contract/getContractInfo",this.msg,res => {
if (res.data.resultCode === 1) {
this.CtObj = res.data.data;
this.guestList = res.data.data.guestList;
this.CtObj.company = '四川和平国际旅行社有限公司';
this.CtObj.businessCertificate = '0000000';
this.CtObj.tcid = this.$route.query.TCID;
this.CtObj.orderId = this.$route.query.orderID;
this.CtObj.totalNumber=2;
this.CtObj.eachNumber=1;
if(this.CtObj.clientCountryid>0){
this.GetSubAreaList(this.CtObj.clientCountryid,1,1);
}
if(this.CtObj.clientProvinceid>0){
this.GetSubAreaList(this.CtObj.clientProvinceid,2,1);
}
if(this.CtObj.companyCountryid>0){
this.GetComAreaList(this.CtObj.companyCountryid,1,1);
}
if(this.CtObj.companyProvinceid>0){
this.GetComAreaList(this.CtObj.companyProvinceid,2,1);
}
if(this.CtObj.regulatorCountryid>0){
this.GetJianAreaList(this.CtObj.regulatorCountryid,1,1);
}
if(this.CtObj.regulatorProvinceid>0){
this.GetJianAreaList(this.CtObj.regulatorProvinceid,2,1);
}
} else {
this.Error(res.data.message);
}
},null);
},
//获取国家
GetCounrty() {
this.apipost(
"dict_post_Destination_GetCountry", {},
res => {
this.CountryList = res.data.data;
},
err => {}
);
},
//获取客户省份和城市
GetSubAreaList(ID, type, isClear) {
let msg = {
Id: ID
};
if (type == 1) {
if (isClear != 1) {
this.CtObj.clientProvinceid = 0;
this.CtObj.clientCityid = 0;
}
} else if (type == 2) {
if (isClear != 1) {
this.CtObj.clientCityid = 0;
}
}
if (this.CtObj.clientCountryid != 0) {
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.ClientProvinceList = res.data.data;
} else if (type == 2) {
this.ClientCityList = res.data.data;
}
},
err => {}
);
}
},
//获取公司身份城市
GetComAreaList(ID, type,isClear) {
let msg = {
Id: ID
};
if (type == 1) {
if (isClear != 1) {
this.CtObj.companyProvinceId = 0;
this.CtObj.companyCityId = 0;
}
} else if (type == 2) {
if (isClear != 1) {
this.CtObj.companyCityId = 0;
}
}
if (this.CtObj.companyCountryId != 0) {
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.companyProvinceList = res.data.data;
} else if (type == 2) {
this.companyCityList = res.data.data;
}
},
err => {}
);
}
},
//获取监管机构省市
GetJianAreaList(ID, type, isClear){
let msg = {
Id: ID
};
if (type == 1) {
if (isClear != 1) {
this.CtObj.regulatorProvinceid = 0;
this.CtObj.regulatorCityid = 0;
}
} else if (type == 2) {
if (isClear != 1) {
this.CtObj.regulatorCityid = 0;
}
}
if (this.CtObj.regulatorCountryid != 0) {
this.apipost(
"dict_post_Destination_GetChildList",
msg,
res => {
if (type == 1) {
this.JianProvinceList = res.data.data;
} else if (type == 2) {
this.JianCityList = res.data.data;
}
},
err => {}
);
}
},
getDate(date){
return moment(date).format("YYYY-MM-DD");
},
//提交数据
SaveMsg(){
this.CtObj.status = 1;
this.CtObj.contractStatus=2;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Error(res.data.message);
}
},null);
},
//跳转至预览
goUrl(){
this.$router.push({
name: 'ElectronicContract',
query: {
TCID: this.$route.query.TCID,
orderID: this.$route.query.orderID,
blank: "y",
}
});
},
//作废
getinvalid(){
this.$confirm('是否作废?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.CtObj.status=0;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.getList();
} else {
this.Error(res.data.message);
}
},null);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//提交
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.SaveMsg();
} else {
this.Error('请完成必填项');
return false;
}
});
},
sendAudit(){
this.CtObj.auditContract=1;
this.apiJavaPost("/api/contract/dosaveOrUpdate",this.CtObj,res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
} else {
this.Error(res.data.message);
}
},null);
},
GetTrip(id, TCID) {
this.tripList = [];
this.startDate = '';
var nTCID = 0;
if (TCID) {
nTCID = TCID;
}
var msg = {
configId: 0,
tcid: nTCID,
isClick:1//不算统计
};
if (id !== undefined) {
//根据ID 获取行程内容
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes", msg,
res => {
if (res.data.resultCode == 1) {
if (res.data.data.priceList && res.data.data.priceList.length > 0) {
this.startDate = res.data.data.priceList[0].startDate;
}
this.tripList = res.data.data.dayList;
this.init();
}
},
err => {}
);
} else {
var dayList = [];
this.subConfig.DayList.forEach((objItem, objIndex) => {
var dayItem = this.$tripUtils.daysArrayObj();
dayItem.dayNum = objItem.dayNum;
//每一天的数组
var dayArray = [];
//子项遍历
objItem.dayArray.forEach(subItem => {
switch (subItem.Type) {
//交通
case "1":
var subTraffiArray = [];
subItem.childItem.SubTraffic.forEach(subTrafficItem => {
subTraffiArray.push({
startCityName: subTrafficItem.StartCityName,
arrivalType: subTrafficItem.ArrivalType,
arrivalCityName: subTrafficItem.ArrivalCityName
});
});
var trafficObj = {
type: subItem.Type,
childItem: {
description: subItem.childItem.Description,
subTraffic: subTraffiArray
}
};
dayArray.push(trafficObj);
break;
//景点
case "2":
var imgArray = [];
subItem.childItem.ImaArray.forEach(imgItem => {
imgArray.push({
url: imgItem.Url,
name: imgItem.Name
});
});
var scenicObj = {
type: subItem.Type,
childItem: {
couponsName: subItem.childItem.CouponsName,
couponsTicketName: subItem.childItem.CouponsTicketName,
playTimeHour: subItem.childItem.PlayTimeHour,
playTimeMinutes: subItem.childItem.PlayTimeMinutes,
description: subItem.childItem.Description,
imaArray: imgArray
}
};
dayArray.push(scenicObj);
break;
//酒店
case "3":
var imgArray = [];
subItem.childItem.ImaArray.forEach(imgItem => {
imgArray.push({
url: imgItem.Url,
name: imgItem.Name
});
});
var hotelObj = {
type: subItem.Type,
childItem: {
hotelName: subItem.childItem.HotelName,
hotelProductName: subItem.childItem.HotelProductName,
useDinnerType: subItem.childItem.UseDinnerType,
description: subItem.childItem.Description,
imaArray: imgArray
}
};
dayArray.push(hotelObj);
break;
//餐厅
case "4":
var imgArray = [];
subItem.childItem.ImaArray.forEach(imgItem => {
imgArray.push({
url: imgItem.Url,
name: imgItem.Name
});
});
var dinnerObj = {
type: subItem.Type,
childItem: {
dinnerName: subItem.childItem.DinnerName,
mealName: subItem.childItem.MinnerName,
useDinnerType: subItem.childItem.UseDinnerType,
useTimeHour: subItem.childItem.UseTimeHour,
useTimeMinutes: subItem.childItem.UseTimeMinutes,
description: subItem.childItem.Description,
descriptionText: subItem.childItem.Description,
imaArray: imgArray
}
};
dayArray.push(dinnerObj);
break;
//自由活动
case "5":
var freedomObj = {
type: subItem.Type,
childItem: {
description: subItem.Description,
descriptionText: subItem.Description
}
};
dayArray.push(freedomObj);
break;
//温馨提示
case "6":
var warmObj = {
type: subItem.Type,
childItem: {
description: subItem.Description,
descriptionText: subItem.Description
}
};
dayArray.push(warmObj);
break;
//行程大点
case "7":
var titleObj = {
type: subItem.Type,
childItem: {
title: subItem.childItem.Title,
description: subItem.childItem.Description
}
};
dayArray.push(titleObj);
break;
}
});
dayItem.dayArray = dayArray;
dayList.push(dayItem);
});
this.tripList = dayList;
this.init();
}
},
init() {
this.tripList.forEach((x, j) => {
let useDinnerTypeBy = "";
let jin = [],
jiu = [],
jiu2 = [],
jiao = [],
dadian = [],
tips = [],
activy = [],
can = {
breakfirst: "敬请自理",
lanuch: "敬请自理",
dinner: "敬请自理"
};
x.dayArray.forEach((y, index) => {
if (y.type == 7 && y.childItem.title != "") {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ?
y.childItem.imaArray[0].url : "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
dadian.push(obj);
} else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
let title = "";
y.childItem.subTraffic.forEach((z, i) => {
title += z.startCityName;
if (z.arrivalType == 1) {
title += '-';
} else if (z.arrivalType == 2) {
title += '-';
} else if (z.arrivalType == 3) {
title += '-';
} else {
title += '-';
}
if (i + 1 == y.childItem.subTraffic.length) {
title += z.arrivalCityName;
}
});
let obj = {
title: title,
content: y.childItem.description,
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
jiao.push(obj);
} else if (
y.type == 2 &&
y.childItem.couponsName != "" &&
y.childItem.imaArray.length > 0
) {
let obj = {
title: y.childItem.couponsName,
content: y.childItem.description,
img: y.childItem.imaArray[0].url,
ticketName: y.childItem.couponsTicketName,
playTimeHour: y.childItem.playTimeHour,
playTimeMinutes: y.childItem.playTimeHour
};
jin.push(obj);
} else if (
y.type == 3 &&
y.childItem.hotelName != "" &&
y.childItem.imaArray.length > 0
) {
let obj = {
title: y.childItem.hotelName,
content: y.childItem.description,
img: y.childItem.imaArray[0].url,
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
jiu.push(obj);
} else if (y.type == 4) {
if (y.childItem.useDinnerType == "1") {
can.breakfirst = y.childItem.dinnerName;
} else if (y.childItem.useDinnerType == "2") {
can.lanuch = y.childItem.dinnerName;
} else if (y.childItem.useDinnerType == "3") {
can.dinner = y.childItem.dinnerName;
}
} else if (y.type == 5) {
let obj = {
title: "自由活动",
content: y.childItem.description,
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
activy.push(obj);
} else if (y.type == 6) {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
tips.push(obj);
}
if (y.type == 3) {
jiu2.push(y.childItem.hotelName);
useDinnerTypeBy = y.childItem.useDinnerType;
}
});
if (
can.breakfirst == "敬请自理" &&
useDinnerTypeBy.indexOf("1") != -1
) {
can.breakfirst = "酒店内享用早餐";
}
if (can.lanuch == "敬请自理" && useDinnerTypeBy.indexOf("2") != -1) {
can.lanuch = "酒店自助";
}
if (can.dinner == "敬请自理" && useDinnerTypeBy.indexOf("3") != -1) {
can.dinner = "酒店自助";
}
x.can = can;
let details = [];
x.tips = tips;
x.jiu2 = jiu2;
if (jin.length > 0) {
details = jin;
} else if (jiu.length > 0) {
details = jiu;
} else if (dadian.length > 0) {
details = dadian;
} else if (jiao.length > 0) {
if (j == this.tripList.length - 1) {
let obj = {
title: "温暖的家",
content: "感谢您参加本次行程，期待下次与您相遇",
img: ""
};
details.push(obj);
} else {
details = jiao;
}
} else if (activy.length > 0) {
details = activy;
}
x.title =
dadian.length > 0 ?
dadian[0].title :
jiao.length > 0 ?
jiao[0].title :
"集合出发";
x.details = details;
if (x.details.length == 0) {
if (j == 0) {
let obj = {
title: "集合出发",
content: "向着远方的目标出发起飞",
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
details.push(obj);
} else if (j == this.tripList.length - 1) {
let obj = {
title: "温暖的家",
content: "感谢您参加本次行程，期待下次与您相遇",
img: "",
ticketName: "",
playTimeHour: null,
playTimeMinutes: null
};
details.push(obj);
}
} else {
if (x.title == "集合出发") {
x.details.forEach(xc => {
if (xc.title !== undefined) x.title = xc.title + "~";
});
if (x.title == "集合出发") {
if (j > 0 && j < tripList.length - 1) x.title = "自由活动";
} else {
x.title = x.title.substring(0, x.title.length - 1);
}
}
}
x.islast = j + 1 == this.tripList.length;
this.$set(this.tripList, j, x);
});
for (let i = this.tripList.length - 1; i >= 0; i--) {
if (i == 0) this.tripList[i].can.breakfirst = "敬请自理";
else {
this.tripList[i].can.breakfirst = this.tripList[i - 1].can.breakfirst;
if (
this.tripList[i].lineId != 5 &&
this.tripList[i].can.breakfirst == "敬请自理"
)
this.tripList[i].can.breakfirst = "酒店内享用早餐";
}
}
let str = '';
this.tripList.forEach((x,index)=>{
str +=`第${x.dayNum}天 ${x.title}\n`
x.details.forEach(y=>{
if(index==this.tripList.length-1){
str+=`温暖的家\n`
}else{
str +=`${y.title}\n`
}
})
str +=`早餐：${x.can.breakfirst}\n午餐：${x.can.lanuch}\n晚餐：${x.can.dinner}\n \r`
})
this.CtObj.travelContent = str;
}
},
mounted() {
this.GetCounrty();
this.msg.TCID = this.$route.query.TCID;
this.msg.orderID = this.$route.query.orderID;
this.getList();
this.GetTrip(0,this.msg.TCID);
}
};
</script>