<style>
.PlaneTicket .el-input--prefix .el-input__inner {
padding-left: 30px;
}
.PlaneTicket_list {
padding: 20px 0 0 0;
}
.PlaneTicket ._ol_info {
font-size: 12px;
width: 100%;
overflow-x: auto;
height: 100%;
}
.PlaneTicket ._ol_color {
font-size: 12px;
width: 100%;
margin-bottom: 20px;
}
.PlaneTicket ._ol_color li {
float: left;
padding: 0 15px;
display: flex;
align-items: center;
}
.PlaneTicket ._ol_color li ._cl {
border-radius: 3px;
display: inline-block;
width: 5px;
height: 12px;
margin-right: 5px;
}
.PlaneTicket ._red {
background-color: #e95252;
}
.PlaneTicket ._red_text {
color: #e95252;
}
.PlaneTicket ._green {
background-color: #47bf8c;
}
.PlaneTicket ._green_text {
color: #47bf8c;
}
.PlaneTicket ._blu {
background-color: #2aaef2;
}
.PlaneTicket ._blu_text {
color: #2aaef2;
}
.PlaneTicket ._ol_list {
margin-top: 20px;
min-height: 500px;
}
.PlaneTicket_flex_none.PlaneTicket ._ol_list > li {
align-items: center;
height: 78px;
border:1px solid #dddddd;
margin: 20px 0 0px 15px;
overflow: hidden;
transition: linear all 0.5s;
background-color: #fff;
}
.PlaneTicket ._ol_list > li:hover {
box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
transition: all linear 0.5s;
}
.PlaneTicket ._oll_tit {
color: #333333;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.PlaneTicket ._oll_tit span {
display: inline-block;
padding: 1px 10px;
font-size: 12px;
border: solid 1px #ff9000;
color: #ff9000;
border-radius: 4px;
}
.PlaneTicket ._oll_line {
max-width: 5px;
min-width: 5px;
height: 78px;
background: rgba(233, 82, 82, 1);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
.PlaneTicket ._oll_line._o_green {
background: #47bf8c;
}
.PlaneTicket ._oll_line._o_blu {
background: #2aaef2;
}
.PlaneTicket ._oll_info {
padding-left: 20px;
overflow: hidden;
}
.PlaneTicket ._oll_img {
height: 50px;
width: 50px;
border-radius: 50%;
margin-left: 20px;
}
.PlaneTicket ._oll_adrr {
color: white;
font-size: 12px;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
padding: 4px 9px;
background-color: #2aaef2;
border-radius: 2px;
}
.PlaneTicket ._oll_time {
display: inline-block;
background-color: #efefef;
border-radius: 4px;
color: #999999;
font-size: 12px;
padding: 2px 10px;
margin-top: 10px;
}
.PlaneTicket ._oll_food {
min-width: 64px;
max-width: 64px;
height: 36px;
background: rgba(42, 174, 242, 1);
border-radius: 4px;
margin: 0 30px;
color: white;
line-height: 36px;
text-align: center;
padding: 0 10px;
overflow: hidden;
}
.PlaneTicket .InfoChangeLog {
max-width: 250px;
height: auto;
min-width: 250px;
max-height: 220px;
background-color: #ffffff;
position: absolute;
left: 0;
z-index: 50;
top: 70px;
padding: 30px 20px 20px 0;
box-shadow: 0px 0px 14px 0px #adadad;
}
.PlaneTicket .InfoChangeLog .close {
color: #cccccc;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
width: 17px;
height: 17px;
}
.wangfan {
color: #2aaef2 !important;
font-size: 12px !important;
display: inline-block !important;
padding: 4px 9px !important;
background-color: white !important;
border-radius: 9px !important;
border: 1px solid #2aaef2 !important;
width: auto !important;
height: auto !important;
}
.wangfan.hollowFixedBtn:hover {
color: #ffffff;
border-color: #2aaef2;
background-color: #2aaef2;
}
.wangfan.hollowFixedBtn {
cursor: pointer;
}
._destination {
text-align: center;
padding: 0 20px 0 0;
}
._destination .iconfont {
color: #2aaef2;
}
._destination p ._destination_line {
color: #b7b7b7;
position: relative;
top: -3px;
}
._destination p ._destination_name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 50px;
display: inline-block;
}
._CNY {
height: 100%;
display: flex;
align-items: center;
color: #333333;
font-size: 16px;
padding-left: 40px;
min-width: 170px;
}
._CNY span {
color: #47bf8c;
font-size: 18px;
}
.OutFlightNum {
height: 100%;
padding:0 20px;
font-size:12px;
border-left: 1px dashed #dcdfe6;
}
.SeatList {
width: 190px;
height: 60px;
background-color: #f9f9f9;
margin: 9px 20px 0 0;
}
.SeatList > ul > li:nth-child(1) {
margin-left: 16px;
}
.SeatList > ul > li {
float: left;
text-align: center;
margin: 5px 21px 0 0;
}
.SeatList > ul > li:last-child {
margin-right: 0;
}
.SeatList .iconfont {
color: #d1d1d1;
display: inline-block;
margin-top: 5px;
}
.SeatList ._num1 {
font-size: 20px;
color: #333333;
font-family: PingFangSC-Semibold, sans-serif;
}
.SeatList ._num2 {
font-size: 20px;
color: #47bf8c;
font-family: PingFangSC-Semibold, sans-serif;
}
.SeatList ._num3 {
font-size: 20px;
color: #e95252;
font-family: PingFangSC-Semibold, sans-serif;
}
.SeatList ._wz {
color: #666666;
}
.SeatList ._yiyong {
cursor: pointer;
text-decoration: underline;
}
.TSS_raduis > ul {
display: -webkit-box;
align-items: center;
padding-left: 25px;
margin-top: 5px;
}
.TSS_raduis > ul > li:not(._head) {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: #47bf8c;
color: white;
text-align: center;
line-height: 24px;
margin-right: 16px;
}
.TSS_raduis > ul > li:not(._head) {
background-color: #bcbcbc;
color: #909090;
}
.TSS_raduis > ul > li._head {
display: flex;
align-items: center;
}
.TSS_raduis > ul > li._head img {
height: 26px;
width: 26px;
border-radius: 50%;
margin-left: 15px;
}
.TSS_raduis > ul > li._head span {
padding-left: 7px;
display: inline-block;
margin-right: 25px;
}
._flaghtDate {
color: #666666;
margin: 0 30px;
min-width: 100px;
}
._flaghtDate .PingFangSC {
font-size: 16px;
}
._flaghtDate ._text {
font-size: 12px;
}
._btn._tsseat_page {
height: 100%;
display: flex;
align-items: center;
padding-left: 25px;
border-left: 1px dashed #dcdfe6;
}
._btn._tsseat_page .hollowFixedBtn {
padding: 6px 11px;
width: 60px;
margin-right: 10px;
font-size: 12px;
}
.PlaneTicket .el-pagination {
border: none !important;
}
._tripDetails {
padding: 0;
box-shadow: 0px 1px 3px 0px #dedede;
}
._tripDetails .popper__arrow::after {
border-bottom-color: #ededed !important;
}
._tripDetails table {
padding: 10px 0 0 20px;
background-color: #ededed;
border-collapse: collapse;
border: 1px solid #d2d2d2;
font-size: 12px;
}
._tripDetails table th {
background-color: #ededed;
padding: 5px;
}
._tripDetails table td {
background-color: #ffffff;
padding: 9px 15px;
color: #333333;
border: 1px solid #d2d2d2;
}
._tripDetails table td._d_name {
background-color: #ededed;
}
._tripDetails table ._color_666 {
color: #666666;
}
._tripDetails table tr._color_666 th {
padding: 9px 15px;
}
._CNY p {
color: #333333;
cursor: pointer;
text-decoration: underline;
font-size: 14px;
}
.PlaneTicket .InfoChangeLog .changLog {
background-color: #f9f9f9;
height: auto;
max-height: 170px;
width: 100%;
overflow: auto;
}
.PlaneTicket .InfoChangeLog .changLog ul {
margin-left: 20px;
}
.PlaneTicket .InfoChangeLog .changLog li {
border-left: 1px solid #e9e9e9;
position: relative;
padding-bottom: 15px;
padding-left: 20px;
}
.PlaneTicket .InfoChangeLog .changLog li p {
text-align: left;
}
.PlaneTicket .InfoChangeLog .changLog li .radius {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
position: absolute;
left: -4px;
top: 4px;
}
.PlaneTicket .InfoChangeLog .changLog li.red .radius {
background-color: #e95252;
}
.PlaneTicket .InfoChangeLog .changLog li.green .radius {
background-color: #47bf8c;
}
.PlaneTicket .InfoChangeLog .time {
color: #666666;
padding-bottom: 5px;
}
.PlaneTicket .InfoChangeLog .changLog::-webkit-scrollbar,
.PlaneTicket ._ol_info::-webkit-scrollbar,
.Journal .changLogList::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.PlaneTicket .InfoChangeLog .changLog::-webkit-scrollbar-thumb,
.PlaneTicket ._ol_info::-webkit-scrollbar-thumb,
.Journal .changLogList::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
}
.PlaneTicket .InfoChangeLog .changLog::-webkit-scrollbar-track,
.PlaneTicket ._ol_info::-webkit-scrollbar-track,
.Journal .changLogList::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #ededed;
}
.PlaneTicket .el-form-item__label {
font-size: 12px;
color: #6666;
line-height: 30px;
width: 85px;
}
._pingtai .el-select .el-input {
height: auto;
}
._pingtai .el-form-item,
._add_ret > ul > li .el-form-item {
display: flex;
}
.PlaneTicket .upload-demo {
text-align: center;
}
.PlaneTicket .query-box ul .el-input {
width: 150px;
}
.wangfan_dan {
padding: 2px 9px !important;
}
._bg_gre {
background-color: #47bf8c !important;
color: white !important;
}
.PlaneTicket .width_auto {
width: 80%;
}
.PlaneTicket ._rizhi {
background: #fff !important;
color: #e95252 !important;
height: 30px !important;
border: 1px solid #e95252 !important;
cursor: pointer !important;
border-radius: 15px !important;
}
.PlaneTicket .Journal {
width: 250px !important;
}
.Journal .InfoChangeLog {
height: auto;
max-height: 220px;
background-color: #ffffff;
}
.Journal .changLogList {
padding-left: 20px;
max-height: 220px;
overflow: auto;
}
.Journal .changLogList_l {
border-left: 1px solid #e9e9e9;
position: relative;
padding-bottom: 10px;
padding-left: 20px;
padding-top: 10px;
}
.PlaneTicket .Journal ._radius_green {
background-color: #47bf8c;
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
position: absolute;
left: -4px;
top: 15px;
}
.PlaneTicket .Journal .changLog_time {
color: #666666;
padding-bottom: 5px;
}
.PlaneTicket .downBtn {
padding: 6px 20px;
position: relative;
top: -1px;
}
.PlaneTicket .icon-img_plane {
font-size: 12px;
-webkit-transform: scale(0.8);
}
.PlaneTicket .departName {
text-align: right;
}
.PlaneTicket .arrivalName {
text-align: left;
}
.PlaneTicket ._destination .el-button:focus {
background-color: #2aaef2 !important;
color: #fff !important;
}
.PlaneTicket .travelTo {
position: relative;
top: -2px;
}
.PlaneTicket .icon-arrow1 {
font-size: 12px;
}
.PlaneTicket .multiple_input .el-input {
height: auto !important;
}
.PlaneTicket .el-button--primary {
padding: 5px;
margin-right: 1px;
}
.PlanTicketTab {
margin-left: 20px;
}
.PlanTicketTab .el-tabs__nav-wrap::after{
background-color: #f5f5f5!important;
}
.inversion {
width: 60px;
height: 25px;
line-height: 25px;
margin: 0 10px;
padding: 0 !important;
}
.flightCode {
width: 200px;
height: 100%;
border-right: 1px dashed #dcdfe6;
}
.Flight_number {
font-size: 14px;
color: #333;
margin: 20px 0 5px 40px;
}
.flight_CodeName {
margin-left: 40px;
color: #666666;
font-size: 12px;
}
.defaultImgDiv {
padding-right: 20px;
text-align: center;
}
.defaultImgDiv img {
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
font-size: 12px;
}
.OutNum{color:#33B87F;font-size:16px;margin-top:20px;font-weight:bold;}
.daiqueren i{font-size:14px!important;margin-right:5px;color:#999999;}
.yiqueren{color:#33B87F;font-size:14px;}
.yiquxiao{color:#E95252;font-size:14px;}
.yiqueren i,.yiquxiao i{margin-right:5px;}
.SureDateStr{margin:5px 0 0 20px;color:#666666;}
.PlaneTicket_flex_none .vmiddle {
display: flex;
align-items: Center;
height: 78px;
}
.TS_PNR{font-size:12px;color:#666666;margin:5px 0 0 26px;}
</style>
<template>
<div class="flexOne PlaneTicket_flex_none PlaneTicket">
<div class="query-box">
<ul>
<li>
<span class="hotel_name">
<em>{{$t('objFill.v101.jiweidaim')}}</em>
<el-input v-model="Query.Flight_number" type="text" class="w150" :placeholder="$t('system.ph_airNum')"></el-input>
</span>
<span class="hotel_name">
<em>{{$t('objFill.v101.jiaohriqi')}}</em>
<el-date-picker class="w150"
v-model="Query.CreateDate"
type="date"
value-format="yyyy-MM-dd"
:placeholder="$t('objFill.v101.jiaohriqi')">
</el-date-picker>
</span>
<span class="hotel_name" v-if="Recived">
<em>{{$t('objFill.v101.songcren')}}</em>
<el-select v-model="Query.OutEmployeeId" filterable :placeholder="$t('system.ph_in')" class="w150">
<el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
<el-option v-for="item in EmployeeList"
:label='item.EmName'
:value='item.EmployeeId'
:key='item.EmployeeId'>
</el-option>
</el-select>
</span>
<span class="hotel_name" v-if="Send">
<em>{{$t('objFill.v101.jieshouren')}}</em>
<el-select v-model="Query.ReciveEmployeeId" filterable :placeholder="$t('system.ph_in')" class="w150">
<el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
<el-option v-for="item in EmployeeList"
:label='item.EmName'
:value='item.EmployeeId'
:key='item.EmployeeId'>
</el-option>
</el-select>
</span>
<span class="hotel_name">
<em>{{$t('Airticket.Air_ProcessState')}}</em>
<el-select v-model="Query.IsSure" filterable :placeholder="$t('system.ph_in')" class="w150">
<el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue2"></el-option>
<el-option v-for="item in QueryStateArr"
:label='item.Name'
:value='item.Id'
:key='item.Id'>
</el-option>
</el-select>
</span>
</li>
<li>
<button class="normalBtn" type="button" @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<div class="PlaneTicket_list">
<ul class="_ol_color clearfix">
<li><span class="_red _cl"></span><span class="_red_text">{{$t('Airticket.Air_redType')}}：</span>{{$t('Airticket.Air_firstClass')}}</li>
<li><span class="_green _cl"></span><span class="_green_text">{{$t('Airticket.Air_greenType')}}：</span>{{$t('Airticket.Air_businessClass')}}</li>
<li><span class="_blu _cl"></span><span class="_blu_text">{{$t('Airticket.Air_blueType')}}：</span>{{$t('Airticket.Air_EconomyClass')}}</li>
</ul>
<div class="_ol_info" >
<div class="PlanTicketTab">
<el-tabs v-model="activeName" @tab-click="switchTab(activeName)">
<el-tab-pane :label="item.Name" :name="item.Id" :key="item.subCode" v-for="item in tabList">
</el-tab-pane>
</el-tabs>
</div>
<div v-if="Send">
<ul class="_ol_list" v-loading="loading" >
<li v-for="(item,index) in dataList" :data-id="item.ID">
<el-row :gutter="10">
<el-col :span="3" class="vmiddle">
<span class="_oll_line" v-if="item.FreightSpace==1"></span>
<span class="_oll_line _o_green" v-if="item.FreightSpace==2"></span>
<span class="_oll_line _o_blu" v-if="item.FreightSpace==3"></span>
<!-- <div class="flightCode">
<div class="Flight_number">{{item.Flight_number}}{{item.FlightDateStr}}</div>
<div class="flight_CodeName">{{$t('objFill.v101.jiweidaim')}}</div>
</div> -->
<img v-if="!item.AirlineUrl" class="_oll_img" src="../../../assets/img/bg_z1@2x.png">
<img v-else class="_oll_img" :src="item.AirlineUrl" :onerror="defaultImg">
</el-col>
<el-col :span="3" class="vmiddle">
<div class="_oll_info" :data-id="item.ID">
<el-tooltip class="item" effect="dark" :content="item.AirlineName" placement="top-start" popper-class="max-w250">
<p class="_oll_tit"> {{item.AirlineName}} </p>
</el-tooltip>
<span class="_oll_adrr">{{item.FreightSpaceStr}}</span>
</div>
</el-col>
<el-col :span="1" class="vmiddle">
<div v-if="item.flightList.length!=null && item.flightList.length>0" class="_destination" >
<el-popover popper-class="_tripDetails" width="550" trigger="click">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="_color_666">
<th>{{$t('Airticket.Air_segment')}}</th>
<th>{{$t('system.query_flightNum')}}</th>
<th>{{$t('Airticket.Air_flightDate')}}</th>
<th>{{$t('Airticket.Air_Trip')}}</th>
</tr>
<tr v-for="(ds,din) in item.flightList">
<td class="_d_name _color_666" v-if="ds.FlightSubType==1&&din==0">{{$t('Airticket.Air_go')}}</td>
<td class="_d_name _color_666" v-else-if="ds.FlightSubType==1&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
<td class="_d_name _color_666" v-if="ds.FlightSubType==3&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
<td class="_d_name _color_666" v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</td>
<td>{{ds.Flight_number}}</td>
<td>{{ds.edDate}}</td>
<td>
<div>({{ds.DIATA}}){{ds.DepartureName}}-({{ds.AIATA}}){{ds.ArrivalCityName}}</div>
<div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
</td>
</tr>
</table>
<el-button slot="reference" class="hollowFixedBtn wangfan">{{$t('fnc.xiangqing')}}</el-button>
</el-popover>
</div>
</el-col>
<el-col :span="2" class="vmiddle">
<div v-if="item.UnionList!=null&& item.UnionList.length>0" class="_destination">
<el-popover popper-class="_tripDetails" width="100" trigger="click">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="_color_666">
<th>{{$t('visa.v_lycity')}}</th>
</tr>
<tr v-for="(unionItem,x) in item.UnionList">
<td> {{unionItem.CityName}} </td>
</tr>
</table>
<el-button slot="reference" class="hollowFixedBtn wangfan">{{$t('salesModule.Union')}}</el-button>
</el-popover>
</div>
</el-col>
<el-col :span="2" class="vmiddle">
<div class="OutFlightNum">
<div class="OutNum">{{item.OutNum}}</div>
<div>{{$t('objFill.v101.zhuanchujw')}}</div>
</div>
</el-col>
<el-col :span="4" class="vmiddle">
<div class="TSS_raduis">
<ul>
<li :class="item.FirstDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.FirstDeposit" placement="top" popper-class="max-w250" v-if="item.FirstDeposit">
<span>1</span>
</el-tooltip>
<span v-else>1</span>
</li>
<li :class="item.SecondDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.SecondDeposit" placement="top" popper-class="max-w250" v-if="item.SecondDeposit">
<span >2</span>
</el-tooltip>
<span v-else>2</span>
</li>
<li :class="item.ThirdDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.ThirdDeposit" placement="top" popper-class="max-w250" v-if="item.ThirdDeposit">
<span >3</span>
</el-tooltip>
<span v-else>3</span>
</li>
<li :class="item.FourthDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.FourthDeposit" placement="top" popper-class="max-w250" v-if="item.FourthDeposit">
<span>4</span>
</el-tooltip>
<span v-else>4</span>
</li>
<li :class="item.FourthDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.FinalPayment" placement="top" popper-class="max-w250" v-if="item.FinalPayment">
<span>{{$t('op.WEI')}}</span>
</el-tooltip>
<span v-else>{{$t('op.WEI')}}</span>
</li>
</ul>
<div class="TS_PNR">
PNR:{{item.PNR}}
</div>
</div>
</el-col>
<el-col :span="3" class="vmiddle">
<div class="_flaghtDate" >
<p class="PingFangSC">{{item.FlightDate}}</p>
<p class="_text">{{$t('Airticket.Air_departureDate')}}</p>
</div>
</el-col>
<el-col :span="2" class="vmiddle">
<div class="defaultImgDiv">
<img :src="item.CreateUrl?item.CreateUrl:'../../../assets/img/default_head_img.jpg'" :onerror="defaultImg">
<div>{{item.CreateName}}</div>
</div>
</el-col>
<el-col :span="3" class="vmiddle">
<div class="_btn _tsseat_page">
<span v-if="item.IsSure==0">
<span class="daiqueren"><i class="iconfont icon-daiqueren"></i>{{$t('Airticket.Air_toProcessed')}}</span>
<!-- <button type="button" class="hollowFixedBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[1].Id)">{{$t('objFill.v101.jieshou')}}</button>
<button type="button" class="normalBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[2].Id)">{{$t('visa.v_jujue')}}</button> -->
</span>
<span v-if="item.IsSure==1">
<div class="yiqueren"><i class="iconfont icon-yiqueren"></i>{{$t('objFill.v101.jieszrujiw')}}</div>
<div class="SureDateStr">{{item.SureDateStr}}</div>
</span>
<span v-if="item.IsSure==2">
<div class="yiquxiao"><i class="iconfont icon-yiquxiao"></i>{{$t('objFill.v101.jujjszrujw')}}</div>
<div class="SureDateStr">{{item.SureDateStr}}</div>
</span>
</div>
</el-col>
</el-row>
</li>
</ul>
</div>
<div v-if="Recived">
<ul class="_ol_list" v-loading="loading" >
<li v-for="(item,index) in dataList">
<el-row :gutter="10">
<el-col :span="3" class="vmiddle">
<span class="_oll_line" v-if="item.FreightSpace==1"></span>
<span class="_oll_line _o_green" v-if="item.FreightSpace==2"></span>
<span class="_oll_line _o_blu" v-if="item.FreightSpace==3"></span>
<!-- <div class="flightCode">
<div class="Flight_number">{{item.Flight_number}}{{item.FlightDateStr}}</div>
<div class="flight_CodeName">{{$t('objFill.v101.jiweidaim')}}</div>
</div> -->
<img v-if="!item.AirlineUrl" class="_oll_img" src="../../../assets/img/bg_z1@2x.png">
<img v-else class="_oll_img" :src="item.AirlineUrl" :onerror="defaultImg">
</el-col>
<el-col :span="2" class="vmiddle">
<div class="_oll_info">
<el-tooltip class="item" effect="dark" :content="item.AirlineName" placement="top-start" popper-class="max-w250">
<p class="_oll_tit"> {{item.AirlineName}} </p>
</el-tooltip>
<span class="_oll_adrr">{{item.FreightSpaceStr}}</span>
</div>
</el-col>
<el-col :span="2" class="vmiddle">
<div v-if="item.flightList.length!==0" class="_destination" >
<div v-for="(son,x) in item.flightList" v-if="x<1">
<el-popover v-if="item.TicketType==2"
popper-class="_tripDetails"
width="500"
trigger="click">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="_color_666">
<th>{{$t('Airticket.Air_segment')}}</th>
<th>{{$t('system.query_flightNum')}}</th>
<th>{{$t('Airticket.Air_flightDate')}}</th>
<th width="200">{{$t('Airticket.Air_Trip')}}</th>
</tr>
<tr v-for="(ds,din) in item.flightList">
<td class="_d_name _color_666" v-if="ds.FlightSubType==1&&din==0">{{$t('Airticket.Air_go')}}</td>
<td class="_d_name _color_666" v-else-if="ds.FlightSubType==1&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
<td class="_d_name _color_666" v-if="ds.FlightSubType==3&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
<td class="_d_name _color_666" v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</td>
<td>{{ds.Flight_number}}</td>
<td>{{ds.edDate}}</td>
<td>
<div>({{ds.DIATA}}){{ds.DepartureName}}-({{ds.AIATA}}){{ds.ArrivalCityName}}</div>
<div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
</td>
</tr>
</table>
<el-button slot="reference" class="hollowFixedBtn wangfan" @click="getDetails(index)">{{$t('fnc.xiangqing')}}</el-button>
</el-popover>
<el-popover v-if="item.TicketType==1"
popper-class="_tripDetails"
width="500"
trigger="click">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="_color_666">
<th>{{$t('Airticket.Air_segment')}}</th>
<th>{{$t('system.query_flightNum')}}</th>
<th>{{$t('Airticket.Air_flightDate')}}</th>
<th width="200">{{$t('Airticket.Air_Trip')}}</th>
</tr>
<tr v-for="(ds,din) in item.flightList">
<td class="_d_name _color_666" v-if="ds.FlightSubType==1&&din==0">{{$t('Airticket.Air_go')}}</td>
<td class="_d_name _color_666" v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</td>
<td>{{ds.Flight_number}}</td>
<td>{{ds.edDate}}</td>
<td>
<div>({{ds.DIATA}}){{ds.DepartureName}}-({{ds.AIATA}}){{ds.ArrivalCityName}}</div>
<div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
</td>
</tr>
</table>
<el-button slot="reference" class="hollowFixedBtn wangfan" @click="getDetails(index)">{{$t('fnc.xiangqing')}}</el-button>
</el-popover>
</div>
</div>
</el-col>
<el-col :span="3" class="vmiddle">
<div class="OutFlightNum">
<div class="OutNum">{{item.OutNum}}</div>
<div>{{$t('objFill.v101.zhuanchujw')}}</div>
</div>
</el-col>
<el-col :span="4" class="vmiddle">
<div class="TSS_raduis">
<ul>
<li :class="item.FirstDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.FirstDeposit" placement="top" popper-class="max-w250" v-if="item.FirstDeposit">
<span>1</span>
</el-tooltip>
<span v-else>1</span>
</li>
<li :class="item.SecondDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.SecondDeposit" placement="top" popper-class="max-w250" v-if="item.SecondDeposit">
<span >2</span>
</el-tooltip>
<span v-else>2</span>
</li>
<li :class="item.ThirdDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.ThirdDeposit" placement="top" popper-class="max-w250" v-if="item.ThirdDeposit">
<span >3</span>
</el-tooltip>
<span v-else>3</span>
</li>
<li :class="item.FourthDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.FourthDeposit" placement="top" popper-class="max-w250" v-if="item.FourthDeposit">
<span>4</span>
</el-tooltip>
<span v-else>4</span>
</li>
<li :class="item.FourthDeposit?'_bg_gre':''">
<el-tooltip effect="dark" :content="item.FinalPayment" placement="top" popper-class="max-w250" v-if="item.FinalPayment">
<span>{{$t('op.WEI')}}</span>
</el-tooltip>
<span v-else>{{$t('op.WEI')}}</span>
</li>
</ul>
<div class="TS_PNR">
PNR:{{item.PNR}}
</div>
</div>
</el-col>
<el-col :span="3" class="vmiddle">
<div class="_flaghtDate" >
<p class="PingFangSC">{{item.FlightDate}}</p>
<p class="_text">{{$t('Airticket.Air_departureDate')}}</p>
</div>
</el-col>
<el-col :span="2" class="vmiddle">
<div class="defaultImgDiv">
<img :src="item.CreateUrl?item.CreateUrl:'../../assets/img/default_head_img.jpg'" :onerror="defaultImg">
<div>{{item.CreateName}}</div>
</div>
</el-col>
<el-col :span="5" class="vmiddle">
<div class="_btn _tsseat_page">
<span v-if="item.IsSure==0">
<span class="daiqueren"><i class="iconfont icon-daiqueren"></i>{{$t('Airticket.Air_toProcessed')}}</span>
<button type="button" class="normalBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[1].Id)">{{$t('objFill.v101.jieshou')}}</button>
<button type="button" class="normalBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[2].Id)">{{$t('visa.v_jujue')}}</button>
</span>
<span v-if="item.IsSure==1">
<div class="yiqueren"><i class="iconfont icon-yiqueren"></i>{{$t('objFill.v101.jieszrujiw')}}</div>
<div class="SureDateStr">{{item.SureDateStr}}</div>
</span>
<span v-if="item.IsSure==2">
<div class="yiquxiao"><i class="iconfont icon-yiquxiao"></i>{{$t('objFill.v101.jujjszrujw')}}</div>
<div class="SureDateStr">{{item.SureDateStr}}</div>
</span>
</div>
</el-col>
</el-row>
</li>
</ul>
</div>
<div class="noData" v-show="noData">
{{$t('system.content_noData')}}
</div>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=Query.pageSize :total=Query.total>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
Query: {
//页码
pageIndex: 1,
//每页显示条数
pageSize: 6,
//总条数
total: 0,
//送出人
OutEmployeeId: 0,
//接收人
ReciveEmployeeId: 0,
//起飞时间
CreateDate: "",
//是否确认
IsSure: -1,
//机位代码
Flight_number: "",
//类型(1-送出，2-接收)
QueryType: 1
},
//选项卡默认选中
activeName: '1',
tabList:[
{Id:'1',Name:this.$t('objFill.v101.wosongcde')},
{Id:'2',Name:this.$t('objFill.v101.woshoudde')}
],
QueryStateArr: [
{ Id: 0, Name: this.$t('salesModule.NotDeal') },
{ Id: 1, Name: this.$t('objFill.v101.jieshou') },
{ Id: 2, Name: this.$t('visa.v_jujue') }
],
//员工列表
EmployeeList: [],
//默认图片
defaultImg:
'this.src="' + require("../../../assets/img/bg_z1@2x.png") + '"',
//下拉框默认值
selectDefauleValue: 0,
selectDefauleValue2: -1,
currentPage: 1,
//是否显示加载层
loading: false,
//是否有数据
noData: false,
//数据列表
dataList: [],
//航班详情
tripDetails: [],
Send: true,
Recived: false,
//提交数据
PostData: {
ID: 0,
IsSure: -1
}
};
},
methods: {
//获取列表
getList() {
this.dataList = [];
this.loading = true;
this.apipost(
"TravelAirTicket_Get_GetOutPageList",
this.Query,
res => {
if (res.data.resultCode == 1) {
this.Query.total = res.data.data.count;
if (res.data.data.count > 0) {
this.dataList = res.data.data.pageData;
this.noData = false;
} else {
this.noData = true;
this.dataList = [];
}
} else {
this.Warning(res.data.message);
}
this.loading = false;
},
err => {}
);
},
//航班详情
getDetails(index) {
this.dataList[index].flightList.forEach(x => {
x.edDate = new Date(
x.FlightDate.replace(/年/, "-")
.replace(/月/, "-")
.replace(/日/, "")
).Format("yyyy-MM-dd");
});
this.tripDetails = this.dataList[index].flightList;
},
//翻页功能按钮
handleCurrentChange(val) {
this.Query.pageIndex = val;
this.getList();
},
//查询初始化页码
resetPageIndex() {
this.Query.pageIndex = 1;
this.currentPage = 1;
},
//选项卡切换
switchTab(type) {
this.Query.pageIndex = 1;
if (type == 1) {
this.Send = true;
this.Recived = false;
this.Query.QueryType = 1;
} else {
this.Send = false;
this.Recived = true;
this.Query.QueryType = 2;
}
this.getList();
},
//获取员工列表获取账号
getEmployeeList() {
let msg = {
GroupId: "",
BranchId: "",
DepartmentId: "",
PostId: "",
IsLeave: "0"
};
this.apipost(
"admin_get_EmployeeGetList",
msg,
res => {
this.EmployeeList = res.data.data;
},
err => {}
);
},
//接受机票
OperateTicket(id, Type) {
this.PostData.ID = id;
this.PostData.IsSure = Type;
this.apipost(
"TravelAirTicket_Post_AuditAirticketOut",
this.PostData,
res => {
if (res.data.resultCode == 1) {
this.Success(this.$t('objFill.v101.zhuancjwcgo'));
this.getList();
} else {
this.Error(res.data.message);
}
},
err => {}
);
}
},
mounted() {
this.getEmployeeList();
this.getList();
}
};
</script>