<style> .passengerDetail .btmTitle { padding: 0 10px; margin: 20px 0 20px 0; border-left: 3px solid #e95252; font-size: 14px; color: #000000; } .passengerDetail .contOut { width: 100%; height: auto; overflow: hidden; border: 1px solid #ccc; padding: 20px 0; border-radius: 4px; display: flex; background: #fff; } .passengerDetail .contOut .contForm { flex: 1; } .passengerDetail .contOut .contForm li { float: left; width: 400px; } .passengerDetail .cont, .passengerDetail .cont1 { flex: auto; height: auto; background: #fff; border-radius: 4px; border: 1px solid #ccc; margin: 0 0 20px 0; padding: 20px; overflow: hidden; } .passengerDetail .el-date-editor.el-input { width: 100%; } .passengerDetail .el-form-item__label { font-size: 12px; } .passengerDetail .cont .el-form-item, ._Ec_Box .el-form-item { float: left; width: 500px; } .passengerDetail .cont ._AddressDetail { width: 57%; } .passengerDetail textarea { resize: none; } .fileContainer [type="file"] { z-index: 50; display: block; filter: alpha(opacity=0); height: 100%; width: 100%; opacity: 0; position: absolute; right: 0; top: 0; cursor: pointer; } </style> <template> <div class="passengerDetail"> <p class="btmTitle">旅客基本资料</p> <div class="contOut" v-loading='loading' element-loading-text="努力识别中...." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.7)" > <div class="contForm"> <el-form :model="addMsg" ref="addMsg" label-position="right" label-width="100px"> <li> <el-form-item label="中文姓" prop="SurName"> <el-input disabled v-model='addMsg.SurName' class="w230" @input="Transformation(addMsg.SurName,'SurName')" placeholder="请输入中文"></el-input> </el-form-item> </li> <li> <el-form-item label="中文名" prop="Name"> <el-input disabled v-model='addMsg.Name' class="w230" @input="Transformation(addMsg.Name,'Name')" placeholder="请输入中文"></el-input> </el-form-item> </li> <li> <el-form-item label="性别" prop="Sex"> <el-select disabled v-model='addMsg.Sex' size=mini class="w230"> <el-option key="1" label="男" value="1"> </el-option> <el-option key="2" label="女" value="2"> </el-option> </el-select> </el-form-item> </li> <li> <el-form-item label="英文姓" prop="ESurName"> <el-input disabled v-model='addMsg.ESurName' type="text" size=mini class="w230" maxlength="20" placeholder="请输入英文"></el-input> </el-form-item> </li> <li> <el-form-item label="英文名" prop="EName"> <el-input disabled v-model='addMsg.EName' type="text" size=mini class="w230" maxlength="20" placeholder="请输入英文"></el-input> </el-form-item> </li> <li> <el-form-item label="出生日期" prop="Birthday"> <el-date-picker disabled v-model='addMsg.Birthday' class="w230" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> </li> <li> <el-form-item label="护照号" prop="PassportNo"> <el-input disabled v-model='addMsg.PassportNo' type="text" size=mini class="w230" maxlength="20" placeholder="请填写护照号"></el-input> </el-form-item> </li> <li> <el-form-item label="护照签发地" prop="PassportAddress"> <el-input disabled v-model='addMsg.PassportAddress' type="text" size=mini class="w230" maxlength="100" placeholder="请填写"></el-input> </el-form-item> </li> <li> <el-form-item label="护照签发日期" prop="PassportIssued"> <el-date-picker disabled v-model='addMsg.PassportIssued' class="w230" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> </li> <li> <el-form-item label="护照过期日" prop="PassportExpiry"> <el-date-picker disabled v-model='addMsg.PassportExpiry' class="w230" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> </li> <li> <el-form-item label="国籍" prop="Nationality"> <el-select disabled v-model="addMsg.Nationality" filterable size=mini class="w230"> <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID"> </el-option> </el-select> </el-form-item> </li> <li> <el-form-item label="出生地" prop="BirthdayAddress"> <el-input disabled v-model="addMsg.BirthdayAddress" type="text" size=mini class="w230" maxlength="20" placeholder="请填写"></el-input> </el-form-item> </li> <li> <el-form-item label="婚姻" prop="Marriage"> <el-select disabled v-model="addMsg.Marriage" filterable size=mini class="w230"> <el-option v-for="item in MarriageType" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option> </el-select> </el-form-item> </li> <li> <el-form-item label="家庭居住地" prop="Address"> <el-input disabled v-model="addMsg.Address" type="text" size=mini class="w230" maxlength="50" placeholder="请填写"></el-input> </el-form-item> </li> <li> <el-form-item label="身份证号码" prop="IdCard"> <el-input disabled v-model="addMsg.IdCard" type="text" size=mini class="w230" maxlength="50" placeholder="请填写"></el-input> </el-form-item> </li> <li> <el-form-item label="手机号码" prop="MobilePhone"> <el-input disabled v-model="addMsg.MobilePhone" type="text" size=mini class="w230" maxlength="20" placeholder="请填写"></el-input> </el-form-item> </li> <li> <el-form-item label="家庭详细地址" prop="AddressDetail"> <el-input disabled v-model="addMsg.AddressDetail" type="text" class="w230" size=mini maxlength="200" placeholder="请填写"></el-input> </el-form-item> </li> <li> <el-form-item label="身份确认" prop="IdentityType"> <el-select disabled v-model="addMsg.IdentityType" filterable size=mini class="w230" v-if="addMsg.IdentityType==''"> <el-option v-for="item in VisaIdentityTypeEnum" :key="item.Id" :label="item.Name" :value="item.Name"> </el-option> </el-select> <el-input disabled v-else v-model="addMsg.IdentityType" type="text" size=mini class="w230" maxlength="50"></el-input> </el-form-item> </li> <li> <el-form-item label="出境记录" prop="HistoryRecord"> <el-select disabled v-model="addMsg.HistoryRecord" filterable size=mini class="w230" v-if="addMsg.HistoryRecord==''"> <el-option v-for="item in VisaDeparturesType" :key="item.Id" :label="item.Name" :value="item.Name"> </el-option> </el-select> <el-input disabled v-else v-model="addMsg.HistoryRecord" type="text" size=mini class="w230" maxlength="50" ></el-input> <el-checkbox disabled v-model='addMsg.IsRecommend' :true-label='1' :false-label='2'>推荐</el-checkbox> </el-form-item> </li> <li> <el-form-item label="职务" prop="Duty"> <el-select disabled v-model="addMsg.Duty" filterable size=mini class="w230" v-if="addMsg.Duty==''"> <el-option v-for="item in VisaDutyTypeEnum" :key="item.Id" :label="item.Name" :value="item.Name"> </el-option> </el-select> <el-input disabled v-else v-model="addMsg.Duty" type="text" size=mini class="w230" maxlength="50" ></el-input> </el-form-item> </li> <li> <el-form-item label="备注"> <el-input disabled v-model="addMsg.Remarks" type="text" size=mini class="w230" maxlength="1000"></el-input> </el-form-item> </li> <li> <el-form-item label="高校学生"> <el-checkbox disabled v-model="addMsg.IsHightSchool" :true-label='1' :false-label='2'></el-checkbox> </el-form-item> </li> <li> <el-form-item label="是否占床"> <el-checkbox disabled v-model="addMsg.IsBed" name="IsBed" :true-label='1' :false-label='0'>是</el-checkbox> <el-checkbox disabled v-model="addMsg.IsBed" name="IsBed" :true-label='0' :false-label='1'>否</el-checkbox> </el-form-item> </li> <li> <el-form-item label="是否需签证"> <el-checkbox disabled v-model='addMsg.IsVisaFree' name="IsVisaFree" :true-label='2' :false-label='1'>是</el-checkbox> <el-checkbox disabled v-model='addMsg.IsVisaFree' name="IsVisaFree" :true-label='1' :false-label='2'>否</el-checkbox> <el-select disabled v-model="addMsg.VisaReplaceId" filterable size=mini class="w120" v-if="IsMustVisa==2&addMsg.Id>0&VisaStartStatus==2&addMsg.IsVisaFree==1"> <el-option v-for="item in VisaNotNeedList" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option> </el-select> </el-form-item> </li> <li> <el-form-item label="是否单地接"> <el-checkbox disabled v-model='addMsg.IsNeedAirticket' name="IsNeedAirticket" :true-label='1' :false-label='2'>是</el-checkbox> <el-checkbox disabled v-model='addMsg.IsNeedAirticket' name="IsNeedAirticket" :true-label='2' :false-label='1'>否</el-checkbox> <el-select disabled v-model="addMsg.AirReplaceId" filterable size=mini class="w120" v-if="IsMustAir==2&addMsg.Id>0&AirStartStatus==1&addMsg.IsNeedAirticket==2"> <el-option v-for="item in AirNoeNeedList" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option> </el-select> </el-form-item> </li> <li> <el-form-item label="是否需保险"> <el-checkbox disabled v-model='addMsg.IsNeedSafe' name="IsNeedSafe" :true-label='1' :false-label='2'>是</el-checkbox> <el-checkbox disabled v-model='addMsg.IsNeedSafe' name="IsNeedSafe" :true-label='2' :false-label='2'>否</el-checkbox> <el-select disabled v-model="addMsg.SafeReplaceId" filterable size=mini class="w120" v-if="IsMustSafe==2&addMsg.Id>0&SafeStartStatus==1&addMsg.IsNeedSafe==2"> <el-option v-for="item in SafeNotNeedList" :key="item.Id" :label="item.Name" :value="item.Id"> </el-option> </el-select> </el-form-item> </li> <li v-for='(item,index) in EconomicCapabilityS' :key="index"> <el-form-item :label="item.Name" v-if='item.isShow' :key='index'> <el-input disabled v-model="item.Content" type="text" size=mini class="w230" maxlength="50"></el-input> </el-form-item> </li> </el-form> </div> </div> <p class="btmTitle">日本签证补录资料</p> <div class="cont1"> <el-form label-width="120px"> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="护照签发机关"> <el-input disabled v-model='addMsg.IssuingAuthority' size=mini maxlength="50"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="曾用中文名"> <el-input disabled v-model='addMsg.CName' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="曾用英文名"> <el-input disabled v-model='addMsg.CEName' size=mini maxlength="20"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="曾有国籍"> <el-input disabled v-model='addMsg.CNationality' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="联系电话"> <el-input disabled v-model='addMsg.Tel' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="单位名称"> <el-input disabled v-model='addMsg.UnitName' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="单位电话"> <el-input disabled v-model='addMsg.UnitPhone' size=mini maxlength="20"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="配偶/监护人职位"> <el-input disabled v-model='addMsg.UnitPost' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="单位地址"> <el-input disabled v-model='addMsg.UnitAddress' size=mini maxlength="200"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="赴日目的"> <el-input disabled v-model='addMsg.Purpose' size=mini maxlength="200"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="有无出境记录"> <el-select disabled v-model='addMsg.IsDepartureRecord'> <el-option key="1" label="有" value="1"> </el-option> <el-option key="2" label="无" value="2"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="上次去时间" prop="Birthday"> <el-date-picker disabled v-model='addMsg.LastTime' value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="上次取得截至时间"> <el-date-picker disabled v-model='addMsg.DeadlineTime' value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="出境国家"> <el-input disabled size=mini v-model='addMsg.NCNationality' maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="酒店名称/友人名称"> <el-input disabled v-model='addMsg.HotelName' size=mini maxlength="20"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="酒店电话/友人电话" prop="Birthday"> <el-input disabled v-model='addMsg.HotelTel' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="酒店地址/友人地址"> <el-input disabled v-model='addMsg.HotelAddress' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="紧急联络人"> <el-input disabled v-model='addMsg.EmergencyContact' size=mini maxlength="100"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="紧急人地址"> <el-input disabled v-model='addMsg.EmergencyAddress' size=mini maxlength="20"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="紧急人电话" prop="Birthday"> <el-input disabled v-model='addMsg.EmergencyTel' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="紧急人关系"> <el-input disabled v-model='addMsg.EmergencyRelation' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="犯罪记录"> <el-select disabled v-model='addMsg.IsCriminalRecord'> <el-option key="1" label="有" value="1"> </el-option> <el-option key="2" label="无" value="2"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="参团费用"> <el-input disabled v-model='addMsg.TravelCost' size=mini maxlength="20"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="40"> <el-col :span="6"> <el-form-item label="报名旅行社" prop="Birthday"> <el-input disabled v-model='addMsg.TravelName' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="一同报名亲友"> <el-input disabled v-model='addMsg.MutualFriends' size=mini maxlength="20"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="申请日期/报名时间"> <el-date-picker disabled v-model='addMsg.Date' value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> </el-col> </el-row> </el-form> </div> </div> </template> <script> import Vue from "vue"; export default { data() { return { loading: false, appkey_ocr: "OGAhU38ib8EweXMtPVqCbkpN", secretKey_ocr: "OcqfFF5hlleWovzA6vLweykxPgwE8XF2", BD_GET_ACCESS_TOKEN: "https://aip.baidubce.com/oauth/2.0/token", BD_COMMON_TEXT_DISCERN_IDCARD: "https://aip.baidubce.com/rest/2.0/ocr/v1/idcard", BD_COMMON_TEXT_DISCERN: "https://aip.baidubce.com/rest/2.0/solution/v1/iocr/recognise", access_token_ocr: "", templateType: 1, templateSign: "", imgBase64String: "", imgBase64String1: "", addMsg: { Id: 0, TCID: 0, OrderId: 0, SurName: "", Name: "", Sex: "", EName: "", ESurName: "", Birthday: "", BirthdayAddress: "", PassportAddress: "", PassportExpiry: "", PassportNo: "", Nationality: "", Marriage: "", Address: "", AddressDetail: "", HistoryRecord: "", IdentityType: "", Duty: "", EconomicCapabilityList: [], Remarks: "", IsHightSchool: "2", IsRecommend: "2", PassportIssued: "", IssuingAuthority: "", IdCard: "", CEName: "", CName: "", CNationality: "", Tel: "", MobilePhone: "", UnitAddress: "", UnitName: "", UnitPhone: "", UnitPost: "", Purpose: "", IsDepartureRecord: "2", LastTime: "", DeadlineTime: "", NCNationality: "", HotelTel: "", HotelAddress: "", HotelName: "", EmergencyContact: "", EmergencyAddress: "", EmergencyTel: "", IsCriminalRecord: "2", TravelCost: "", TravelName: "", MutualFriends: "", Date: "", IsBed: 1, IsVisaFree: 2, IsNeedAirticket: 1, IsNeedSafe: 1, AirReplaceId: "0", VisaReplaceId: "0", SafeReplaceId: "0" }, EconomicCapabilityS: [], //返回数据 VisaApplyForTypeEnum: [], JapanAirportList: [], ChinaAirportList: [], countryList: [], MarriageType: [], VisaDeparturesType: [], VisaDutyTypeEnum: [], VisaIdentityTypeEnum: [], FilghtForAirIn: [], FilghtForAirOut: [], IsMustVisa: 2, IsMustAir: 2, IsMustSafe: 2, VisaNotNeedList: [], AirNoeNeedList: [], SafeNotNeedList: [], VisaStartStatus: 2, AirStartStatus: 2, SafeStartStatus: 2, btnState: true }; }, methods: { getEconomicCapability() { //获取经济能力 this.apipost( "dict_post_GetList", { Key: "SK_Visa_EconomicCapability" }, res => { this.EconomicCapabilityS = res.data.data; if (this.$route.query.guestId != 0) { this.addMsg.Id = this.$route.query.guestId; this.getInfo(); } }, err => {} ); }, addEconomicCapability(obj) { // 添加经济能力说明 this.EconomicCapabilityS.forEach(x => { if (x.ID == obj.ID) { x.isShow ? (x.isShow = false) : (x.isShow = true); } }); this.$forceUpdate(); }, Transformation(val, type) { let text = this.pinyin(val, { style: this.pinyin.STYLE_NORMAL }); if (type == "SurName") { let upText = text.join("").toLocaleUpperCase() this.addMsg.ESurName = upText; } if (type == "Name") { let upText = text.join("").toLocaleUpperCase() this.addMsg.EName = upText; } }, getVisaIdentityTypeEnum() { //获取身份证明 let msg = {}; this.apipost( "dmc_get_visa_GetVisaIdentityTypeEnum", msg, res => { if (res.data.resultCode == 1) { this.VisaIdentityTypeEnum = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getVisaDutyTypeEnum() { //获取职务 let msg = {}; this.apipost( "dmc_get_visa_GetVisaDutyTypeEnum", msg, res => { if (res.data.resultCode == 1) { this.VisaDutyTypeEnum = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getVisaDeparturesType() { //获取出境记录状态 let msg = {}; this.apipost( "dmc_get_visa_GetVisaDeparturesTypeEnum", msg, res => { if (res.data.resultCode == 1) { this.VisaDeparturesType = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getMarriageType() { //获取婚姻 let msg = {}; this.apipost( "dmc_get_visa_GetVisaMarriageTypeEnum", msg, res => { if (res.data.resultCode == 1) { this.MarriageType = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getCountry() { //获取国家 let msg = {}; this.apipost( "dict_post_Destination_GetCountry", msg, res => { if (res.data.resultCode == 1) { this.countryList = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getVisaApplyForTypeEnum() { // 获取申请类型 this.apipost( "dmc_get_visa_GetVisaApplyForTypeEnum", {}, res => { if (res.data.resultCode == 1) { this.VisaApplyForTypeEnum = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getChinaAirportList() { // 获取国内机场 let msg = { City_id: 0, Country_id: 2 }; this.apipost( "airport_post_GetList", msg, res => { if (res.data.resultCode == 1) { this.ChinaAirportList = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getJapanAirportList() { // 获取日本机场 let msg = { City_id: 0, Country_id: 651 }; this.apipost( "airport_post_GetList", msg, res => { if (res.data.resultCode == 1) { this.JapanAirportList = res.data.data; } else { this.$message.error(res.data.message); } }, err => {} ); }, getInfo() { this.apipost( "sellorder_get_GetTravelGuestInfo", { GuestId: this.$route.query.guestId }, res => { if (res.data.resultCode == 1) { let obj = res.data.data; this.addMsg = obj; this.addMsg.Sex = obj.Sex.toString(); this.addMsg.Marriage = obj.Marriage.toString(); if (this.addMsg.Marriage == "0") { this.addMsg.Marriage = ""; } this.addMsg.IsCriminalRecord = obj.IsCriminalRecord===null?'':obj.IsCriminalRecord.toString(); this.addMsg.IsDepartureRecord = obj.IsDepartureRecord.toString(); this.EconomicCapabilityS.forEach(x => { obj.EconomicCapabilityList.forEach(y => { if (x.ID == y.ID) { x.isShow = true; x.Content = y.Value; } }); }); this.VisaStartStatus = this.addMsg.IsVisaFree; this.AirStartStatus = this.addMsg.IsNeedAirticket; this.SafeStartStatus = this.addMsg.IsNeedSafe; this.$forceUpdate(); } else { this.$message.error(res.data.message); } }, err => {} ); }, GetGuestMustVisaAir() { this.apipost( "sellorder_get_GetGuestMustVisaAir", { OrderId: this.$route.query.orderId }, res => { if (res.data.resultCode == 1) { let obj = res.data.data; this.IsMustVisa = obj.IsMustVisa; this.IsMustAir = obj.IsMustAir; this.IsMustSafe = obj.IsMustSafe; this.VisaNotNeedList = obj.VisaNotNeedList; this.AirNoeNeedList = obj.AirNoeNeedList; this.SafeNotNeedList = obj.SafeNotNeedList; if (obj.IsMustAir == 0) { this.addMsg.IsNeedAirticket = 2; } if (obj.IsMustVisa == 0) { this.addMsg.IsVisaFree = 1; } if (obj.IsMustSafe == 0) { this.addMsg.IsNeedSafe = 2; } } } ); } }, mounted() { this.getVisaApplyForTypeEnum(); this.getChinaAirportList(); this.getJapanAirportList(); this.getCountry(); this.getMarriageType(); this.getVisaDeparturesType(); this.getVisaDutyTypeEnum(); this.getVisaIdentityTypeEnum(); this.getEconomicCapability(); this.GetGuestMustVisaAir(); this.addMsg.TCID = this.$route.query.TCID; this.addMsg.OrderId = this.$route.query.orderId; } }; </script>