<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 .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 .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; } .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; } </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> {{ CtObj.company }}团队出境旅游合同 <span style="color: blue; font-size: 14px; font-weight: bold">{{ CtObj.contractNum }}</span> </span> <div class="pull-right"> <input type="button" class="TCbtn-info" v-if="CtObj.companySignature == '' && CtObj.auditContract == 2" @click="(isShowFade = true), GetQrCode()" value="客户签字链接" /> <span v-if="CtObj.auditContract == 1" style="font-size: 12px; color: red">等待行政审批通过后获取签字链接</span> <input type="button" v-if="CtObj.status == 1 && CtObj.auditContract == 0" class="TCbtn-info" @click="sendAudit()" :value="$t('objFill.tijiaoshenhe')" /> <font v-if=" CtObj.status == 1 && CtObj.auditContract == 3 && CtObj.auditContractReason " style="color: red"> {{$t('ios.bohui')}}原因:{{ CtObj.auditContractReason }}</font> <input type="button" v-if="CtObj.status == 1 && CtObj.auditContract == 3" class="TCbtn-info" @click="sendAudit()" :value="$t('objFill.v101.Contract.shenhybhcxtj')" /> <input type="button" class="TCbtn-info" v-if="CtObj.status == 1" @click="goContract()" :value="$t('sm.yulan')" /> <input type="button" class="TCbtn-info" v-if="CtObj.auditContract == 2" @click="getinvalid()" :value="$t('active.cl_zuofei')" /> <template v-if="CtObj.orderType==0"> <input type="button" class="TCbtn-info" @click="(dialogVisible = true), getGuestList()" value="复制合同" /> </template> <template v-if="CtObj.auditContract != 2"> <el-button type="primary" size="medium" @click="submitForm('CtObj')" :loading="SaveLoading"> {{$t('pub.saveBtn')}}</el-button> </template> <template v-if="CurrentUserInfo.EmployeeId == 615"> <el-button type="primary" size="medium" @click="submitForm('CtObj')" :loading="SaveLoading">{{$t('pub.saveBtn')}}(S)</el-button> </template> </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="$t('system.query_name')" 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.guestNum" 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="$t('hotel.hotel_detailinfo')"> <el-input type="text" v-model="CtObj.clientAddress" class="w300"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('scen.sc_tel')" 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="$t('hotel.hotel_fax')"> <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="$t('objFill.youbian')"> <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="$t('objFill.dianziyx')"> <el-input type="text" v-model="CtObj.clientEmail" 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-select v-model="CtObj.signType" :placeholder="$t('pub.pleaseSel')" @change="changeSignType"> <el-option key="0" label="和平章" :value="0"> </el-option> <el-option key="1" label="日本公司章" :value="1"> </el-option> </el-select> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('admin.admin_company')"> <el-input type="text" v-model="CtObj.company" :disabled=" CurrentUserInfo.RB_Group_id == 2 ? true : false " class="w300"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.jingyinxkz')"> <el-input type="text" class="w300" :disabled=" CurrentUserInfo.RB_Group_id == 2 ? true : false " v-model="CtObj.businessCertificate"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.jinbanr')" 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="$t('scen.sc_tel')"> <el-input type="text" class="w300" v-model="CtObj.companyCall"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('hotel.hotel_fax')"> <el-input type="text" class="w300" v-model="CtObj.companyFax"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.youbian')"> <el-input type="text" class="w300" v-model="CtObj.companyPostCode"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.dianziyx')"> <el-input type="text" class="w300" v-model="CtObj.companyEmail"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item label="签约地点"> <el-input type="text" class="w300" v-model="CtObj.contractPlace"></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">{{$t('objFill.xianluxcsj')}}</div> <table class="createTable"> <tbody> <tr> <td> <el-form-item :label="$t('visa.v_tuanhao')"> <el-input type="text" class="w300" v-model="CtObj.tCNum"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item label="旅游产品名称" prop="productName"> <el-input type="text" class="w300" v-model="CtObj.productName"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('hotel.hotel_StarDate')" prop="startDate"> <el-date-picker class="w300" 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="$t('sm.fanhuiDate')" prop="returnDate"> <el-date-picker class="w300" 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="$t('hotel.hotel_totalRoom')" prop="dayNum"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" 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> {{$t('hotel.hotel_day')}} </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.jiudianzs')" prop="nightNum"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" 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> </tbody> </table> <div class="createTableTitle">{{$t('objFill.lvyoufyjzf')}}</div> <table class="createTable"> <tbody> <tr> <td> <el-form-item :label="$t('objFill.chengrenjia')" prop="adultPrice"> <el-input type="text" class="w300" v-model="CtObj.adultPrice"></el-input> <template v-if="CtObj.signType == 0"> 元 </template> <template v-else> 円 </template> /人 </el-form-item> </td> </tr> <tr> <td> <el-form-item label="儿童(不满14岁的)"> <el-input type="text" class="w300" v-model="CtObj.childPrice"></el-input> <template v-if="CtObj.signType == 0"> 元 </template> <template v-else> 円 </template>/人 </el-form-item> </td> </tr> <tr> <td> <el-form-item label="导游服务费" prop="servicePrice"> <el-input type="text" class="w300" v-model="CtObj.servicePrice"></el-input> <template v-if="CtObj.signType == 0"> 元 </template> <template v-else> 円 </template>/人 </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.feiyonghj')" prop="orderPrice"> <el-input type="text" class="w300" v-model="CtObj.orderPrice"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.zfrq')" prop="payDate"> <el-date-picker class="w300" 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="$t('objFill.zffs')" prop="payType"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" v-model="CtObj.payType"> <el-option :label="$t('fnc.xianjin')" :value="1"></el-option> <el-option :label="$t('objFill.zhuanzhang')" :value="2"></el-option> <el-option label="支票" :value="3"></el-option> </el-select> </el-form-item> </td> </tr> </tbody> </table> <div class="createTableTitle">{{$t('objFill.renshnegywbx')}}</div> <table class="createTable"> <tbody> <tr> <td> <el-form-item label="旅游者"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" v-model="CtObj.insuranceOpinion"> <el-option label="委托出境社购买" :value="1"></el-option> <el-option label="自行购买" :value="2"></el-option> <el-option label="放弃购买" :value="3"></el-option> </el-select> </el-form-item> </td> </tr> <tr> <td> <el-form-item label="保险公司名称" v-if="CtObj.insuranceOpinion == 1"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w300" v-model="CtObj.insuranceCompany"> <el-option label="中国平安财产保险股份有限公司成都市锦城支公司" value="中国平安财产保险股份有限公司成都市锦城支公司"></el-option> <el-option label="あいおいニッセイ同和損害保険株式会社" value="あいおいニッセイ同和損害保険株式会社"></el-option> <el-option label="中国大地财产保险股份有限公司" value="中国大地财产保险股份有限公司"></el-option> <el-option label="中国人民财产保险股份有限公司" value="中国人民财产保险股份有限公司"></el-option> </el-select> </el-form-item> </td> </tr> <tr style="display: none"> <td> <el-form-item label="保险产品名称" v-if="CtObj.insuranceOpinion == 1"> <el-input type="text" class="w300" v-model="CtObj.insuranceProduct"></el-input> </el-form-item> </td> </tr> </tbody> </table> <div class="createTableTitle">{{$t('objFill.chengtrsybctyd')}}</div> <table class="createTable"> <tbody> <tr> <td> <el-form-item :label="$t('objFill.zuidictrs')" prop="minNumber"> <el-input type="text" class="w300" v-model="CtObj.minNumber"></el-input> {{$t('hotel.hotel_people')}} </el-form-item> </td> </tr> <tr> <td style="padding: 10px 0 20px 86px"> 如不能成团,旅游者是否同意按下列方式解决: </td> </tr> <tr> <td> <template v-if="CtObj.orderType==0"> <el-form-item label="1、"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w150" v-model="CtObj.insteadOpinion"> <el-option :label="$t('salesModule.Agree')" :value="1"></el-option> <el-option :label="$t('objFill.butongyi')" :value="2"></el-option> </el-select> 出境社委托 <el-input type="text" class="w300" v-model="CtObj.insteadCompany"></el-input> 出境社履行合同; </el-form-item> </template> <template v-else> <el-form-item label="1、"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w150" v-model="CtObj.insteadOpinion"> <el-option :label="$t('salesModule.Agree')" :value="1"></el-option> <el-option :label="$t('objFill.butongyi')" :value="2"></el-option> </el-select> 转给 <el-input type="text" class="w300" v-model="CtObj.insteadCompany"></el-input> {{$t('system.table_operation')}}; </el-form-item> </template> </td> </tr> <tr> <td> <el-form-item label="2、"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w150" v-model="CtObj.delayOpinion"> <el-option :label="$t('salesModule.Agree')" :value="1"></el-option> <el-option :label="$t('objFill.butongyi')" :value="2"></el-option> </el-select> 延期出团; </el-form-item> </td> </tr> <tr> <td> <el-form-item label="3、"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w150" v-model="CtObj.changeOpinion"> <el-option :label="$t('salesModule.Agree')" :value="1"></el-option> <el-option :label="$t('objFill.butongyi')" :value="2"></el-option> </el-select> 改签其他线路出团; </el-form-item> </td> </tr> <tr> <td> <el-form-item label="4、"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w150" v-model="CtObj.terminateOpinion"> <el-option :label="$t('salesModule.Agree')" :value="1"></el-option> <el-option :label="$t('objFill.butongyi')" :value="2"></el-option> </el-select> 解除合同。 </el-form-item> </td> </tr> </tbody> </table> <div class="createTableTitle">{{$t('objFill.pingtuanyd')}}</div> <table class="createTable"> <tbody> <tr> <td> <el-form-item label="旅游者"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w150" v-model="CtObj.carpoolOpinion"> <el-option :label="$t('salesModule.Agree')" :value="1"></el-option> <el-option :label="$t('objFill.butongyi')" :value="2"></el-option> </el-select> 采用拼团方式拼至 <el-input type="text" class="w300" v-model="CtObj.carpoolCompany"></el-input> 出境社成团。 </el-form-item> </td> </tr> </tbody> </table> <div class="createTableTitle">{{$t('objFill.zhenyidjjfs')}}</div> <table class="createTable"> <tbody> <tr> <td> <div style="margin: 20px 0 10px 20px"> 本合同履行过程中发生争议,由双方协商解决;亦可向合同签订地的旅游质监执法机构、消费者协会等有关部门或者机构申请调解解决。 </div> <el-form-item :label="$t('objFill.xieshtjbcazd')" prop="settleDisputeMode"> <el-select :placeholder="$t('pub.pleaseSel')" filterable class="w210" v-model="CtObj.settleDisputeMode"> <el-option label="1" :value="1"></el-option> <el-option label="2" :value="2"></el-option> </el-select> 种方式解决: </el-form-item> <el-form-item label="1、提交"> <el-input type="text" v-model="CtObj.arbitrationCommission" style="width: 300px"></el-input> {{$t('objFill.v101.Contract.zhongcwyhzc')}}. </el-form-item> <el-form-item label="2、依法向"> <el-input type="text" v-model="CtObj.court" style="width: 300px"></el-input> {{$t('objFill.renmingfyqs')}}. </el-form-item> </td> </tr> </tbody> </table> <table class="createTable"> <tbody> <tr> <td> <el-form-item :label="$t('objFill.benhtys')" prop="totalNumber"> <el-select :placeholder="$t('pub.pleaseSel')" filterable v-model="CtObj.totalNumber" class="w210"> <el-option :label="$t('objFill.v101.Contract.daxie1')" :value="1"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie2')" :value="2"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie3')" :value="3"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie4')" :value="4"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie5')" :value="5"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie6')" :value="6"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie7')" :value="7"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie8')" :value="8"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie9')" :value="9"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie10')" :value="10"></el-option> </el-select> {{$t('salesModule.Fen')}} </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.shuanfangc')" prop="eachNumber"> <el-select :placeholder="$t('pub.pleaseSel')" filterable v-model="CtObj.eachNumber" class="w210"> <el-option :label="$t('objFill.v101.Contract.daxie1')" :value="1"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie2')" :value="2"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie3')" :value="3"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie4')" :value="4"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie5')" :value="5"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie6')" :value="6"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie7')" :value="7"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie8')" :value="8"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie9')" :value="9"></el-option> <el-option :label="$t('objFill.v101.Contract.daxie10')" :value="10"></el-option> </el-select> 份,具有同等法律效力,自双方当事人签字或者盖章之日起生效。 </el-form-item> </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>{{$t('objFill.qitayuedsx')}}</em> </h2> </div> <div style="padding: 10px"> 未尽事宜,经旅游者和出境社双方协商一致,可以列入补充条款。(如合同空间不够,可以另附纸张,由双方签字或者盖章确认。) </div> <my-edit v-on:edit-value="CtObj.otherMatter = arguments[0]" v-bind:editValue="CtObj.otherMatter" v-bind:toolbarShow="toolbar" v-bind:referenceList="[]"></my-edit> </div> <div class="block mtop15" id="anchor-3" ref="anchor3"> <div class="blockTitle"> <span class="icon"> <i class="iconfont icon-Shape2"></i> </span> <h2> <em>投诉联系</em> </h2> </div> <table class="createTable"> <tbody> <tr> <td> <el-form-item label="出境社监督、投诉电话"> <el-input type="text" class="w300" v-model="CtObj.regulatorComplainCall"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.jiangjgmc')"> <el-input type="text" class="w300" v-model="CtObj.regulatorName"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item label="投诉电话"> <el-input type="text" class="w300" v-model="CtObj.companyComplainCall"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.dianziyx')"> <el-input type="text" class="w300" v-model="CtObj.regulatorWebsite"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('admin.admin_address')"> <el-input type="text" class="w300" v-model="CtObj.regulatorAddress"></el-input> </el-form-item> </td> </tr> <tr> <td> <el-form-item :label="$t('objFill.youbian')"> <el-input type="text" class="w300" v-model="CtObj.regulatorPostCode"></el-input> </el-form-item> </td> </tr> </tbody> </table> </div> <div class="block mtop15" id="anchor-4" ref="anchor4"> <div class="blockTitle"> <span class="icon"> <i class="iconfont icon-Shape1"></i> </span> <h2> <em>{{$t('objFill.xiingchengxx')}}</em> </h2> </div> <div style="padding: 10px; background: #f9f9f9; color: red"> 《行程单》应当对如下内容作出明确的说明: (1)旅游行程的出发地、途经地、目的地、结束地,线路行程时间(按自然日计算,含乘飞机、车、船等在途时间,不足24小时以一日计); (2)旅游目的地地接社的名称、地址、联系人和联系电话; (3)交通服务安排及其标准(明确交通工具及档次等级、出发时间以及是否需中转等信息); (4)住宿服务安排及其标准(明确住宿饭店的名称、地址、档次等级及是否有空调、热水等相关服务设施); (5)用餐(早餐和正餐)服务安排及其标准(明确用餐次数、地点、标准); (6)出境社统一安排的游览项目的具体内容及时间(明确旅游线路内容包括景区点及游览项目名称、景区点停留的最少时间); (7)自由活动的时间; (8)行程安排的娱乐活动(明确娱乐活动的时间、地点和项目内容); {{$t('objFill.v101.Contract.xingcdyyx')}} </div> <div v-if="CtObj.travelContent != ''" v-html="CtObj.travelContent" ref="TcTravel_Table"></div> <div v-else ref="TcTravel_Table"> <table class="TcTravel_Table"> <tbody> <tr> <td colspan="5" contenteditable="true">组团社:印象之旅</td> </tr> <tr> <td colspan="5" contenteditable="true"> 旅游线路名称:{{ CtObj.productName }} 行程共计:{{ CtObj.dayNum }}天 {{ CtObj.nightNum }}{{$t('objFill.wan')}}(含在途时间) </td> </tr> <tr> <td colspan="5" contenteditable="true"> {{$t('Airticket.Air_StartTime')}}:{{ getDate(CtObj.startDate) }} 出发地点:{{ CtObj.goAirport }} 目的地:{{ CtObj.touristDestination }} </td> </tr> <tr> <td colspan="5" contenteditable="true"> 结束时间:{{ getDate(CtObj.returnDate) }} 返回地点:{{ CtObj.backAirport }} </td> </tr> <tr> <td colspan="5"> <div style="display: flex"> <span>地接社名称:</span> <div contenteditable="true" style="width: 250px"> 株式会社 ピースインターナショナル </div> </div> </td> </tr> <tr> <td style="width: 15%">{{$t('objFill.xingchengsj')}}</td> <td style="width: 50%">主要景点名称(游览时间)</td> <td>交通工具(标准)</td> <td>酒店标准</td> <td>房间标准</td> </tr> <tr v-for="(item, index) in tripDays"> <td contenteditable="true"> {{ getDayAddOne(CtObj.startDate, index) }} </td> <td contenteditable="true"> <div v-for="subItem in item.dayArray"> <span v-if="subItem.type == 2"> {{ subItem.childItem.couponsName }} <span v-if=" subItem.childItem.playTimeHour != null && subItem.childItem.playTimeHour != '' ">({{ subItem.childItem.playTimeHour }}{{$t('objFill.xiaoshi')}}</span> <span v-if=" subItem.childItem.playTimeMinutes != null && subItem.childItem.playTimeMinutes != '' "> <template v-if=" subItem.childItem.playTimeHour == null && subItem.childItem.playTimeHour != '' ">(</template> {{ subItem.childItem.playTimeMinutes }}分钟)</span> </span> <span v-if=" subItem.type == 7 && (index == 0 || index == tripDays.length - 1) "> {{ subItem.childItem.title }} </span> </div> </td> <td contenteditable="true"> {{ item.TrifficType }} </td> <td contenteditable="true"> <span v-if="index != tripList.length - 1">旅游酒店</span> <span v-else>{{$t('fnc.no')}}</span> </td> <td contenteditable="true"> <span v-if="index != tripList.length - 1">{{$t('objFill.shuanrenjian')}}</span> <span v-else>{{$t('fnc.no')}}</span> </td> </tr> <tr> <td colspan="5" class="TC_LASTTD" contenteditable="true"> <div style="color: red" v-if="CtObj.CType!=3"> 注:用房全程酒店均为二人一间,如您的订单产生单房,在未补单房差的情况下,我社将尽量安排您与其它客人拼房或是与同行者入住三人房,不可选择房型。敬请配合,服从调配。 </div> <template v-if="CtObj.TeamType == 2"> <div> {{$t('pub.pubRemark')}}:<br /> 注:《1》本行程交通、住宿、用餐、观光点尽量忠于原行程,若遇特殊状况:如天气、交通阻塞、路况等、观光点休假、住宿饭店调整及其它不可抗拒之现象,行程会有所变动,相应调整,本公司保有变更行程之权利。尽量忠于原行程,敬请谅解!<br /> 注:《2》根据人数调配车型,不可以指定车型车牌!<br /> 注:《3》由于停车问题,司机兼向导大多数情况下为沿途讲解,不入景区,司机兼向导最重要的是保证贵宾的行车安全,敬请谅解!如果对讲解有特别高的要求,建议加配专职导游! <br /> 注:《4》あいおいニッセイ同和損害保険株式会社的保险保障只针对日本以外的外国人有效,不适用于:持在留卡者及日本本国人。敬请注意!<br /> 【行程中的观光时间仅限参考,实际旅行过程中有时间浮动敬请贵宾谅解为谢!!!】<br /> ※因本行程为精品拼团游,雨雪天行驶较为困难,故建议于出发前 10 分钟⾄集合地点等候,请贵宾注意集合时间。<br /> ※⾏程时间由司导根据⻋程远近等情况来进⾏安排,请互相理解配合,统⼀听从司导安排!精品散拼团 请贵宾时间严守!<br /> ※再次提醒短途旅行,请贵宾携带小包出行,【不要带大件礼箱!】<br /> 【退改规则】<br /> 出发前 11-8 天(不含),收取损失30%。<br /> 出发前 3~7(不含),收取损失50%。<br /> 出发前 2~3 天(含),收取损失 80%。<br /> 出发前 1 天(含),将不退还任何费⽤,收取损失100%<br /> </div> </template> </td> </tr> </tbody> </table> </div> </div> <div class="block mtop15" id="anchor-5" ref="anchor5"> <div class="blockTitle"> <span class="icon"> <i class="iconfont icon-people"></i> </span> <h2> <em>游客信息</em> </h2> </div> <template v-if="CtObj.orderType == 0"> <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0"> <tr> <th>{{$t('objFill.v101.traveltrip.xuanzhe')}}</th> <th>{{$t('active.ad_xuhao')}}</th> <th>{{ $t("system.query_name") }}</th> <th>{{$t('system.table_sex')}}</th> <th>证件类型</th> <th>{{$t('sm.huzhaohaoma')}}</th> <th>{{$t('objFill.lianxifangshi')}}</th> <th>{{$t('objFill.v101.Contract.shengtizk')}}</th> </tr> <tr v-for="(item, index) in guestList"> <td> <el-checkbox v-model="item.isCheck"></el-checkbox> </td> <td>{{ index + 1 }}</td> <td>{{ item.surName + "" + item.name }}</td> <td>{{ item.sex == 1 ? "男" : "女" }}</td> <td>{{item.passportNo.length>0?$t('salesModule.Passport'):'身份证'}}</td> <td>{{ item.passportNo.length>0?item.passportNo:item.idCard }}</td> <td>{{ item.mobilePhone }}</td> <td>健康</td> </tr> </table> </template> <template v-else> <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0"> <tr> <th>{{$t('active.ad_xuhao')}}</th> <th>{{ $t("system.query_name") }}</th> <th>{{$t('system.table_sex')}}</th> <th>证件类型</th> <th>{{$t('sm.huzhaohaoma')}}</th> <th>{{$t('objFill.lianxifangshi')}}</th> <th>{{$t('objFill.v101.Contract.shengtizk')}}</th> <th>操作 <a style="color:blue;cursor:pointer" @click="AddGuest()">{{$t('fnc.tianjia')}}</a></th> </tr> <tr v-for="(item, index) in CtObj.guestInfo"> <td>{{ index + 1 }}</td> <td> <el-input v-model="item.Name"></el-input> </td> <td> <el-input v-model="item.Sex"></el-input> </td> <td>{{$t('salesModule.Passport')}}</td> <td> <el-input v-model="item.PassportNo"></el-input> </td> <td> <el-input v-model="item.Mobile"></el-input> </td> <td>健康</td> <td> <a style="color:red;cursor:pointer" @click="DeleteGuest(index)">{{$t('system.table_delete')}}</a> </td> </tr> </table> </template> </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">{{$t('active.ad_xuhao')}}</th> <th width="10%">{{$t('objFill.jutishij')}}</th> <th width="15%">{{$t('objFill.didian')}}</th> <th width="12%">{{$t('objFill.gouwucsmc')}}</th> <th width="12%">{{$t('objFill.zhuyaospxx')}}</th> <th width="12%">{{$t('objFill.zuichangtlsj')}}</th> <th width="12%">{{$t('objFill.qitashuim')}}</th> <th width="12%">旅游者签名同意</th> <th width="100">{{ $t("hotel.table_operat") }}</th> </tr> <tr v-for="(item, index) in VoluntaryArr"> <td> {{ index + 1 }} </td> <td> <span v-if="item.IsShow == 0">{{ item.specificTime }}</span> <el-date-picker v-else v-model="item.specificTime" class="w150" type="date" value-format="yyyy-MM-dd" placeholder=""></el-date-picker> </td> <td> <span v-if="item.IsShow == 0">{{ item.Address }}</span> <el-input type="text" v-model="item.Address" v-else></el-input> </td> <td style="text-align: left"> <span v-if="item.IsShow == 0">{{ item.shoppName }}</span> <el-input type="text" v-model="item.shoppName" v-else></el-input> </td> <td style="text-align: left"> <span v-if="item.IsShow == 0">{{ item.CommodityInformation }}</span> <el-input type="text" v-model="item.CommodityInformation" v-else></el-input> </td> <td> <span v-if="item.IsShow == 0">{{ item.stayTime }}</span> <el-input type="text" v-model="item.stayTime" v-else></el-input> </td> <td style="text-align: left"> <span v-if="item.IsShow == 0">{{ item.other }}</span> <el-input type="text" v-model="item.other" v-else></el-input> </td> <td> <span v-if="item.IsShow == 0">{{ item.travelSign }}</span> <el-input type="text" v-model="item.travelSign" v-else></el-input> </td> <td> <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" 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="$t('pub.saveBtn')" 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="$t('system.table_delete')" placement="top-start" v-if="item.IsShow == 0"> <el-button type="danger" icon="el-icon-delete" @click="delVoluntray(index)" 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> </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">{{$t('active.ad_xuhao')}}</th> <th width="10%">{{$t('objFill.jutishij')}}</th> <th width="15%">{{$t('objFill.didian')}}</th> <th width="12%">项目名称和内容</th> <th width="12%"> 费用( <template v-if="CtObj.signType == 0"> 元 </template> <template v-else> 円 </template>) </th> <th width="12%">项目时长(分钟)</th> <th width="12%">{{$t('objFill.qitashuim')}}</th> <th width="12%">旅游者签名同意</th> <th width="100">{{ $t("hotel.table_operat") }}</th> </tr> <tr v-for="(item, index) in WillingPayArr"> <td> {{ index + 1 }} </td> <td> <span v-if="item.IsShow == 0">{{ item.specificTime }}</span> <el-date-picker v-else v-model="item.specificTime" class="w150" type="date" value-format="yyyy-MM-dd" placeholder=""></el-date-picker> </td> <td> <span v-if="item.IsShow == 0">{{ item.Address }}</span> <el-input type="text" v-model="item.Address" v-else></el-input> </td> <td style="text-align: left"> <span v-if="item.IsShow == 0">{{ item.programName }}</span> <el-input type="text" v-model="item.programName" v-else></el-input> </td> <td style="text-align: left"> <span v-if="item.IsShow == 0">{{ item.money }}</span> <el-input type="text" v-model="item.money" v-else></el-input> </td> <td> <span v-if="item.IsShow == 0">{{ item.programTime }}</span> <el-input type="text" v-model="item.programTime" v-else></el-input> </td> <td style="text-align: left"> <span v-if="item.IsShow == 0">{{ item.other }}</span> <el-input type="text" v-model="item.other" v-else></el-input> </td> <td> <span v-if="item.IsShow == 0">{{ item.travelSign }}</span> <el-input type="text" v-model="item.travelSign" v-else></el-input> </td> <td> <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" 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="$t('pub.saveBtn')" 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="$t('system.table_delete')" placement="top-start" v-if="item.IsShow == 0"> <el-button type="danger" icon="el-icon-delete" @click="delWilling(index)" circle></el-button> </el-tooltip> </td> </tr> <tr> <td colspan="9" style="text-align: right"> <input type="button" class="TC_NewAddBtn" @click="addWilling()" value="+添加记录" /> </td> </tr> </tbody> </table> </div> </div> </el-form> <el-dialog custom-class="w600" title="合同复制" :visible.sync="dialogVisible" center> <input type="button" v-if="backGuest && backGuest.length > 0" class="TCbtn-info" style="padding: 8px 10px; float: right; margin-bottom: 10px" @click="copyContract()" value="批量复制合同" /> <table border="0" cellspacing="0" cellpadding="0" class="singeRowTable"> <tr> <th>{{$t('objFill.v101.traveltrip.xuanzhe')}}</th> <th>{{$t('objFill.lvkexm')}}</th> <th>{{ $t("hotel.table_tel") }}</th> </tr> <tr v-for="(item, index) in backGuest"> <td> <template v-if="item.IsShow"> <el-checkbox v-model="item.isCheck"></el-checkbox> </template> <template v-else> <span style="color: red">已存在合同</span> </template> </td> <td>{{ item.surName + "" + item.name }}</td> <td>{{ item.mobilePhone }}</td> </tr> <tr v-if="backGuest.length == 0"> <td colspan="3">已经复制完成</td> </tr> </table> </el-dialog> <div class="fade" v-show="isShowFade"></div> <div class="qrCodeDiv" v-show="isShowFade"> <div style="margin-top: 15px">{{$t('objFill.v101.Contract.qingsmqz')}}</div> <div id="qrcode" style="margin: 25px" ref="qrcode"> <img class="WeiXinShare" :src="'data:image/png;base64,' + QRCodeStr" /> </div> <i class="iconfont icon-cha Ec_cha" @click="isShowFade = false"></i> </div> </div> </template> <script> import moment from "moment"; import * as Quill from "quill"; //引入编辑器 import MyEdit from "./EditTemplate.vue"; //quill编辑器的字体 var fonts = [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", "Times-New-Roman", "sans-serif" ]; var Font = Quill.import("formats/font"); Font.whitelist = fonts; //将字体加入到白名单 Quill.register(Font, true); 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 { //字体样式 fonts: [ "SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", "Times-New-Roman", "sans-serif" ], toolbar: { clean: false, //加粗 font: false, //字体 narrative: false //叙述, }, //国家列表 CountryList: [], isShowFade: false, //是否显示签证弹窗 QRCodeStr: "", //客户省份列表 ClientProvinceList: [], //客户城市列表 ClientCityList: [], //公司省份列表 companyProvinceList: [], //公司城市列表 companyCityList: [], //监管机构省 JianProvinceList: [], //监管机构市 JianCityList: [], //选中切换 cked: 1, //查询参数 msg: { TCID: 0, orderID: 0, guestId: 0, orderType: 0, //0-跟团订单,1-单项产品订单 Id: 0, //出境合同表主键编号 }, addMsg: { Country: 0, Province: 0, City: 0, }, dialogVisible: false, CurrentUserInfo: {}, //当前用户信息 //参数 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: "", 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: 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: "", dmcName: "", signType: 0, //合同章类型(0-和平,1-日本) orderType: 0, guestInfo: [], //单项订单旅客名单 }, //旅客名单 guestList: [], tripList: [], rules: { clientName: [{ required: true, message: this.$t('rule.EnterCusNameC'), trigger: "blur", }, ], clientCall: [{ required: true, message: this.$t("rule.EnterPNum"), trigger: "blur", }, ], agentName: [{ required: true, message: this.$t('objFill.qingsrjbren'), trigger: "blur", }, ], agentCall: [{ required: true, message: this.$t("rule.EnterPNum"), trigger: "blur", }, ], totalNumber: [{ validator: valiTotalNumber, trigger: "change", required: true, }, ], eachNumber: [{ validator: validateEach, trigger: "change", required: true, }, ], productName: [{ required: true, message: this.$t("objFill.qingtianxcpmc"), trigger: "blur", }, ], startDate: [{ required: true, message: this.$t('objFill.qingxuanzcfrq'), trigger: "change", }, ], returnDate: [{ required: true, message: this.$t('objFill.qingxzfhrq'), trigger: "blur", }, ], dayNum: [{ required: true, message: this.$t('objFill.qingxzts'), trigger: "change", }, ], nightNum: [{ required: true, message: this.$t('objFill.qingxzws'), trigger: "change", }, ], adultPrice: [{ required: true, message: this.$t('objFill.qingtxcrj'), trigger: "blur", }, ], orderPrice: [{ required: true, message: this.$t('objFill.qingtxfyhj'), trigger: "blur", }, ], payDate: [{ required: true, message: this.$t('objFill.qingxzzfrqi'), trigger: "change", }, ], payType: [{ validator: validatepayType, trigger: "change", required: true, }, ], servicePrice: [{ required: true, message: "请输入导游服务费", trigger: "blur", }, ], insuranceProduct: [{ required: true, message: "请填写保险名称", trigger: "blur", }, ], minNumber: [{ required: true, message: this.$t('objFill.qingtxzdctrs'), trigger: "change", }, ], settleDisputeMode: [{ required: true, validator: validatesettleDisputeMode, trigger: "change", }, ], }, //自愿购物活动补充协议 VoluntaryArr: [], //自愿付费项目补充协议 WillingPayArr: [], //菜单列表 menuArr: [ "合同基本信息", "合同协议条款", "其他约定事项", "投诉联系", "行程信息", "游客信息", "自愿购物活动补充协议", "自愿付费项目补充协议", ], ckedIndex: 0, LineName: "", //交通 trifficList: [], //行程 tripDays: [], //旅客名单 backGuest: [], content: "发送短信", //按钮显示内容 SaveLoading: false, //保存Loading }; }, components: { "my-edit": MyEdit }, methods: { AddGuest() { this.CtObj.guestInfo.push({ Name: "", Sex: "", IDType: "", PassportNo: "", Mobile: "" }); }, DeleteGuest(index) { this.CtObj.guestInfo.splice(index, 1); }, changeSignType() { if (this.CtObj.signType == 0) { this.CtObj.company = "四川和平国际旅行社有限公司"; this.CtObj.companyAddress = "成都市锦江区青和里南段55号1栋2310、2311、2312号 "; this.CtObj.businessCertificate = "L-SC-CJ00015"; this.CtObj.regulatorName = "四川省成都市旅游质监执法机构"; } else { this.CtObj.company = "(株)ピースインターナショナル"; this.CtObj.companyAddress = ""; this.CtObj.businessCertificate = ""; this.CtObj.regulatorName = ""; } }, goContract() { this.$router.push({ name: "TravelContractDetail", query: { TCID: this.$route.query.TCID, guestId: this.CtObj.guestId, orderID: this.$route.query.orderID, Id: this.$route.query.Id, orderType: this.$route.query.orderType, blank: "y", }, }); }, GetQrCode: function () { let urlObj = this.domainManager(); let msg = { TCID: this.$route.query.TCID, orderID: this.$route.query.orderID, guestId: this.$route.query.guestId, Id: this.$route.query.ID, pUrl: "clientConfirm", }; this.$http({ headers: { "Content-Type": "application/json", }, method: "post", url: urlObj.DomainUrl + "/api/file/GetQrCodeImage?", data: { msg: msg, }, }) .then((res) => { if (res.data.resultCode === 1) { this.QRCodeStr = res.data.data; } else {} }) .catch((err) => {}); }, //跳转锚点 goAnchor(selector) { var anchor = this.$el.querySelector(selector); document.documentElement.scrollTop = anchor.offsetTop - 70; }, getList() { this.apipost( "travelcontract_post_GetContractInfoService", this.msg, (res) => { if (res.data.resultCode === 1) { var tempObj = res.data.data; this.CtObj = tempObj; this.guestList = tempObj.allGuestList; this.CtObj.tcid = this.$route.query.TCID; this.CtObj.orderId = this.$route.query.orderID; if (this.$route.query.orderType) { this.CtObj.orderType = this.$route.query.orderType; } this.CtObj.totalNumber = 2; this.CtObj.eachNumber = 1; this.VoluntaryArr = this.CtObj.shopProtocolList; this.WillingPayArr = this.CtObj.payProtocolList; 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); } if (tempObj && tempObj.id <= 0) { this.CtObj.company = "四川和平国际旅行社有限公司"; this.CtObj.businessCertificate = "L-SC-CJ00015"; this.CtObj.companyAddress = "成都市锦江区青和里南段55号1栋2310、2311、2312号 "; this.CtObj.regulatorComplainCall = "17708046437"; this.CtObj.companyComplainCall = "028-96927"; //生成其他约定事项 let otherMatter = ""; otherMatter += `<p>本人已阅读了本合同所有条款 , 乙方(旅行社)已就合同条款对本人进行了真实、准确、完整的说明,本人已完全了解合同条款的内容及含义,本人对以下约定基于确认:</p>`; otherMatter += "<p>1、本人同意本合同条款包括行程中有关自愿购物活动以及自愿参加另付费旅游项目的说明。</p>" otherMatter += "<p>2、健康承诺书:本人悉知自身身体适宜此次旅行,并承诺在旅游过程中,如本人未按贵社要求如实告知相关健康情况,本人承担因此而产生的全部后果,并承担给乙方造成损失的赔偿责任。本人自愿放弃不适宜本人身体状况参加的相应景点或相应活动。若因本人坚持参加所产生的全部后果均由本人自行承;本人在出行时会携带自身常用药品,如有身体不适必须第一时间告知随团导游或领队,并及时到当地医院做检查,如因个人原因耽误病情,一切后果均由本人自行承担。</p>" otherMatter += "<p>3、旅游意外伤害险是旅行社强制要求旅游者购买的,但该份旅游意外伤害保险的投保费用是旅行社赠送客人是,因此,如有出险理赔视为旅行社责任风险分摊,保险公司赔偿金额为最终赔付 ,旅行社不再进行赔偿。</p>" otherMatter += "<p>4、本人充分了解附件3的内容,并承诺会将附件3《行前说明会告知书》载明的注意事项详细转告给其他每一位参团旅游者,并强调其重要性。</p>" otherMatter += "<p>5、本人因自身过错,造成的一切其他损失由本人承担 。</p>" otherMatter += "<p>6、签约委托授权书:本人已征得其余全体委托人同意作为本次旅游出行签约代表(全体委托人名单详见游客名单),全体委托人享受本合同约定的权利,履行本合同约定的义务 ,受托人在旅游合同及其附件上的签字全体委托人均予以认可。本人作为此次出行的签约代表,已就此承诺告知了全体委托人及其直系亲属并得到他们的同意。如其他游客不予认可本合同或者本人未取得授权、未告知本合 同及相关告知书内容的,由本人承担相应责任。</p>" this.CtObj.otherMatter = otherMatter; //初始化行程 this.GetTrip(0, this.msg.TCID); } if (this.CtObj.auditContract == 2) { if (this.CurrentUserInfo.EmployeeId != 615) { this.goContract(); } } } 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) { if (date && date != "") { return moment(date).format("YYYY-MM-DD"); } return ""; }, //提交数据 SaveMsg() { this.SaveLoading = true; this.CtObj.status = 1; this.CtObj.contractStatus = 2; let VolArr = []; let WalArr = []; if (this.VoluntaryArr.length > 0) { this.VoluntaryArr.forEach((x) => { 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) => { 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.CtObj.rbGroupId = this.CurrentUserInfo.RB_Group_id; let newArr = []; this.guestList.forEach((x) => { if (x.isCheck) { newArr.push(x.id); } }); this.CtObj.Id = this.msg.Id; this.CtObj.unionGuestIds = newArr.join(","); this.apipost( "travelcontract_post_SetContractService", this.CtObj, (res) => { this.SaveLoading = false; if (res.data.resultCode === 1) { this.Success(res.data.message); this.dialogVisible = false; var tempData = res.data.data; this.$router.push({ name: "TravelContractNew", query: { TCID: tempData.TCID, guestId: tempData.GuestId, orderID: tempData.OrderId, Id: tempData.Id, orderType: tempData.orderType }, }); this.msg.Id = tempData.Id; this.CtObj.Id = tempData.Id; } else { this.Error(res.data.message); } }, (err) => { this.SaveLoading = false; } ); }, //作废 getinvalid() { this.$confirm("是否作废?", this.$t("tips.tips"), { confirmButtonText: this.$t("pub.sureBtn"), cancelButtonText: this.$t("pub.cancelBtn"), type: "warning", }) .then(() => { this.CtObj.status = 0; this.CtObj.auditContract = 0; this.apipost( "travelcontract_post_UpdateStatusContractService", 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: this.$t("tips.cancleDelete"), }); }); }, //提交 submitForm(addMsg) { //提交创建、修改表单 this.$refs[addMsg].validate((valid) => { if (valid) { this.SaveMsg(); } else { this.Error("请完成必填项"); return false; } }); }, sendAudit() { this.apipost( "travelcontract_get_UpdateAuditContractService", { AuditContract: 1, Id: this.CtObj.Id, }, (res) => { if (res.data.resultCode === 1) { this.Success(res.data.message); this.getList(); } else { this.Error(res.data.message); } }, null ); }, //添加补充协议 addRecord() { let obj = { specificTime: "", Address: "", shoppName: "", CommodityInformation: "", stayTime: "", other: "", travelSign: "", IsShow: 1, }; this.VoluntaryArr.push(obj); }, //删除补充协议1 delVoluntray(index) { this.VoluntaryArr.splice(index, 1); }, //添加自愿付费协议 addWilling() { let obj = { specificTime: "", Address: "", programName: "", money: "", programTime: "", other: "", travelSign: "", IsShow: 1, }; this.WillingPayArr.push(obj); }, //删除自愿付费协议 delWilling(index) { this.WillingPayArr.splice(index, 1); }, //滚动条滚动选中tab menu() { var _self = this; _self.scroll = (document.documentElement.scrollTop || document.body.scrollTop) + 70; //滑动到指定位置相应菜单高亮 var a_0 = 0; if (_self.$refs.anchor0 && _self.$refs.anchor0.offsetTop) { a_0 = _self.$refs.anchor0.offsetTop; } var a_1 = 0; if (_self.$refs.anchor1 && _self.$refs.anchor1.offsetTop) { a_1 = _self.$refs.anchor1.offsetTop; } var a_2 = 0; if (_self.$refs.anchor2 && _self.$refs.anchor2.offsetTop) { a_2 = _self.$refs.anchor2.offsetTop; } var a_3 = 0; if (_self.$refs.anchor3 && _self.$refs.anchor3.offsetTop) { a_3 = _self.$refs.anchor3.offsetTop; } var a_4 = 0; if (_self.$refs.anchor4 && _self.$refs.anchor4.offsetTop) { a_4 = _self.$refs.anchor4.offsetTop; } var a_5 = 0; if (_self.$refs.anchor5 && _self.$refs.anchor5.offsetTop) { a_5 = _self.$refs.anchor5.offsetTop; } var a_6 = 0; if (_self.$refs.anchor6 && _self.$refs.anchor6.offsetTop) { a_6 = _self.$refs.anchor6.offsetTop; } var a_7 = 0; if (_self.$refs.anchor7 && _self.$refs.anchor7.offsetTop) { a_7 = _self.$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) { this.ckedIndex = 7; } }, //加一天返回 getDayAddOne(day, num) { if (day && day != "") { return moment(day).add(num, "days").format("MM/DD"); } return ""; }, //点击合同获取旅客信息 getGuestList() { let msg = { orderId: this.msg.orderID, }; this.apipost( "travelcontract_post_GetContractGuestByOrderId", msg, (res) => { if (res.data.resultCode === 1) { var tempData = res.data.data; if (tempData && tempData.length > 0) { tempData.forEach((item) => { item.IsShow = true; if (this.guestList && this.guestList.length > 0) { this.guestList.forEach((sItem) => { if (sItem.id == item.id && sItem.isCheck && item.IsShow) { item.IsShow = false; } }); } }); } this.backGuest = tempData; } else { this.Error(res.data.message); } }, null ); }, //复制合同 copyContract() { let newArr = []; this.backGuest.forEach((x) => { if (x.isCheck) { newArr.push(x.id); } }); var unionGuestIds = newArr.join(","); if (unionGuestIds == "") { this.Error("请选择要复制的旅客"); return; } let copyMsg = { TCID: this.msg.TCID, guestId: 0, orderID: this.msg.orderID, unionGuestIds: unionGuestIds, }; if (this.$route.query.guestId && this.$route.query.guestId > 0) { copyMsg.guestId = this.$route.query.guestId; } this.apipost( "travelcontract_post_CopyContractServices", copyMsg, (res) => { if (res.data.resultCode === 1) { this.Success("复制成功!"); this.dialogVisible = false; var tempData = res.data.data; this.$router.push({ name: "TravelContractNew", query: { TCID: tempData.TCID, guestId: tempData.GuestId, orderID: tempData.OrderId, Id: tempData.Id, orderType: tempData.orderType }, }); } 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, //不算统计 }; //根据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.tripDays = res.data.data.dayList; this.trifficList = res.data.data.trafficList; this.tripList = res.data.data.dayList; this.LineName = res.data.data.lineName; this.init(); } }, (err) => {} ); }, 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 = "酒店内享用早餐"; } } this.trifficList.forEach((x, index) => { if (x.airportPickUp == 1 || x.airportPickUp == 2) { if (x.isUseBus == 1) { this.tripDays[index].TrifficType = "飞机+大巴"; } } if (x.airportPickUp == 0 && x.isUseBus == 1) { this.tripDays[index].TrifficType = "大巴"; } if (x.airportPickUp == 1 || x.airportPickUp == 2) { if (x.isUseBus == 0) { this.tripDays[index].TrifficType = "飞机"; } } if (x.airportPickUp == 0 || x.airportPickUp == 0) { if (x.isUseBus == 0) { this.tripDays[index].TrifficType = this.$t('fnc.no') } } }); }, }, mounted() { this.CurrentUserInfo = this.getLocalStorage(); this.GetCounrty(); this.msg.TCID = this.$route.query.TCID; this.msg.orderID = this.$route.query.orderID; this.msg.guestId = this.$route.query.guestId; if (this.$route.query.orderType) { this.msg.orderType = this.$route.query.orderType; } if (this.$route.query.Id && this.$route.query.Id > 0) { this.msg.Id = this.$route.query.Id; } this.getList(); this.$nextTick(function () { //滚动监听事件 window.addEventListener("scroll", this.menu); }); }, watch: { $route(to, from) { //重新获取数据 this.getList(); }, }, }; </script>