<style>
.page_visaList ._vl_nav li{float: left;font-size: 12px;color: #333333;padding: 16px 20px;cursor: pointer;display: flex;align-items: center;border-bottom: 3px solid white}
.page_visaList ._vl_nav li img{width: 40px;height: 40px;display: inline-block;margin-right: 10px}
.page_visaList ._vl_nav li._active{border-color: #E95252}
.page_visaList .normalBtn{width: auto;}
.page_visaList .icon-bianji-smal{color: #FF9797}
.page_visaList ._vl_content{width: 100%;padding: 30px 20px;overflow: auto}
.page_visaList .query-box{border: none}
.page_visaList ._vl_content ._vlc_list{height: 60px;margin-bottom: 10px;background-color: #FFFFFF;width: 100%;min-width: 1580px;}
.page_visaList ._vl_content ._vlc_list:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
.page_visaList ._vlc_list input[type="checkbox"]{margin: 0 30px}
.page_visaList ._vlc_list>div{float: left;height: 100%;display: flex;align-items: center;text-align: center}
.page_visaList ._radius {display: inline-block;width: 24px;height: 24px;background-color: #FF793E;color: #fff;border-radius: 50%;text-align: center;line-height: 22px;font-size: 12px;margin-right: 10px;}
.page_visaList ._radius._tuan{background-color: #3EABFF}
.page_visaList ._f_b3{font-size: 14px;color: #333333}
.page_visaList ._cu{text-decoration: underline;}
.page_visaList ._cu:hover{color: #E95252;cursor: pointer;text-decoration: underline}
.page_visaList ._br{border-right: 1px dashed #D7D7D7;}
.page_visaList ._pr30{padding-right: 30px}
.page_visaList ._pl30{padding-left: 30px}
.page_visaList ._square{height: 46px;width: 24px;background-color: #3FB9F8;border:2px solid #7FD3FF;border-radius:4px;display: inline-block;font-size: 12px;padding-top: 5px;margin-right: 15px;color: white}
.page_visaList .ta_l{text-align: left !important;}
.page_visaList ._ml20{margin-left: 20px}
.page_visaList ._font12{font-size: 12px}
.page_visaList ._mr_20{margin-right: 20px}
.page_visaList ._vlc_info span{color: #666666;display: inline-block;width: 55px;text-align: right !important}
.page_visaList .Operating{width: 250px;}
.page_visaList .Operating i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;}
.page_visaList .Operating i:nth-child(1){background-color: #00B1E4}
.page_visaList .Operating i:nth-child(2){background-color: #28CACC}
.page_visaList .Operating i:nth-child(3){background-color: #9E8DE3}
.page_visaList .Operating i:nth-child(4){background-color: #63C76A}
.page_visaList .Operating i:nth-child(5){background-color: rgb(255, 69, 0)}
.page_visaList .Operating i:nth-child(6){background-color: rgb(0, 69, 0)}
.page_visaList .Operating i:nth-child(1):hover{background-color: #00C6FF}
.page_visaList .Operating i:nth-child(2):hover{background-color: #2EDEE0}
.page_visaList .Operating i:nth-child(3):hover{background-color: #AD9AF6}
.page_visaList .Operating i:nth-child(4):hover{background-color: #6DD875}
.page_visaList .Operating i:nth-child(5):hover{background-color: rgb(253, 110, 56)}
.page_visaList .Operating i:nth-child(1):active{background-color: #00B5E9}
.page_visaList .Operating i:nth-child(2):active{background-color: #25C1C3}
.page_visaList .Operating i:nth-child(3):active{background-color: #9887D9}
.page_visaList .Operating i:nth-child(4):active{background-color: #5EBB64}
.page_visaList .Operating i:nth-child(5):active{background-color: rgb(253, 110, 56)}
.page_visaList .icon-img_gwgl{background-color: #9887D9}
.Operating .icon-lists{background-color: #6DD875}
.page_visaList .icon-img_kqmrtj{background-color: #FFA037}
.page_visaList ._scrollbar::-webkit-scrollbar{width: 4px;height:8px;}
.page_visaList ._scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
.page_visaList ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
.page_visaList .el-pagination{border:none}
.visaList_tripDetails{padding: 0;box-shadow: 0px 1px 3px 0px #dedede;margin-left: 235px}
.visaList_tripDetails .popper__arrow::after{border-bottom-color: #EDEDED !important;}
.visaList_tripDetails table{padding: 10px 0 0 20px;background-color: #EDEDED;border-collapse: collapse;border: 1px solid #D2D2D2;font-size: 12px;}
.visaList_tripDetails table th{background-color: #EDEDED;padding: 5px;}
.visaList_tripDetails table td{background-color: #FFFFFF;padding: 9px 15px;color: #333333;border: 1px solid #D2D2D2}
.visaList_tripDetails table ._color_666{color: #666666;}
.visaList_tripDetails table tr._color_666 th{padding: 9px 15px;}
.visaList_tripDetails ._form{text-decoration: underline;cursor: pointer;}
.page_visaList ._OrderRemarks{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 97px;}
.page_visaList ._OrderRemarks .iconfont.el-tooltip.item{font-size: 12px}
.page_visaList ._btn_group button{margin-left: 10px}
.saleOrderListpMate{color: #333;}
.saleOrderListpMate>span{color: #666!important;}
.saleOrderListpMate>span>i{color: #999!important;}
</style>
<template>
<div class="page_visaList">
<div class="query-box">
<ul>
<li>
<span><em>{{$t('objFill.v101.Rest.chanping')}}</em>
<el-select filterable v-model='msg.CountryType'>
<el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
<el-option
v-for='item in VisaManagementList'
:label='item.Name'
:value='item.Id'
:key='item.Id'
>
</el-option>
</el-select>
</span>
</li>
<li>
<span><em>{{$t('advmanager.v_type')}}</em>
<el-select filterable v-model='msg.SignStatus'>
<el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
<el-option :label="$t('visa.v_gvisa')" value='1'></el-option>
<el-option :label="$t('visa.v_tvisa')" value='2'></el-option>
</el-select>
</span>
</li>
<li>
<span><em>{{$t('admin.admin_status')}}</em>
<el-select filterable v-model='msg.PlanStatus'>
<el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
<el-option :label="$t('visa.v_chulizhong')" value='0'></el-option>
<el-option :label="$t('Airticket.Air_Processed')" value='1'></el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>{{$t('ios.sqriqi')}}</em>
<!--@change="dataDui()"-->
<el-date-picker clearable class="w150"
v-model="msg.StartTime"
type="date"
:picker-options="beforeCheck"
value-format="yyyy-MM-dd"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker>
<span class="_ln">-</span>
<el-date-picker clearable class="w150"
v-model="msg.EndTime"
type="date"
:picker-options="afterCheck"
value-format="yyyy-MM-dd"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker>
</span>
</li>
<li class="_btn_group">
<button class="hollowFixedBtn" @click="getList()">{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<div class="_vl_content _scrollbar" v-loading="loading">
<div class="_vlc_list" v-for="(item,index) in DataList" >
<div>
</div>
<div class="_br _pr30 w200">
<span class="_radius" v-if="item.SignStatus==1">{{$t('visa.v_dan')}}</span>
<span class="_radius _tuan" v-if="item.SignStatus==2">{{$t('visa.v_tuan')}}</span>
<el-popover
popper-class="visaList_tripDetails"
width="1200"
trigger="click">
<div class="">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="popTable">
<tr class="_color_666">
<th>{{$t('visa.v_paihao')}}</th>
<th>{{$t('system.query_name')}}</th>
<th>{{$t('system.table_sex')}}</th>
<th>{{$t('system.table_Passport')}}</th>
<th>{{$t('visa.v_jtjzd')}}</th>
<th>{{$t('visa.v_shenqingbiao')}}</th>
<th>{{$t('system.table_operation')}}</th>
</tr>
<tr v-for="(son,sIndex) in item.PeopleList">
<td>{{son.Id}}</td>
<td>{{son.Name}}</td>
<td>{{son.Sex}}</td>
<td>{{son.PassportNo}}</td>
<td>{{son.Address}}</td>
<td class="_form" @click="item.SignStatus==2?goUrl('VisaPersonalFormTuan',son.Id,'saleOrderList'):goUrl('VisaPersonalForm',son.Id,'saleOrderList')">{{$t('visaT.rbqzsqb')}}</td>
<td>
<img src="../../assets/img/fail@2x.png" v-if="son.ApplyStatus==2" alt="">
<img src="../../assets/img/pass@2x.png" v-if="son.ApplyStatus==1" alt="">
<!--<button class="normalBtn" type="button" @click="operationVisa('拒绝',son.Id,2)" v-if="son.ApplyStatus==0">{{$t('visa.v_jujue')}}</button>
<button class="normalBtn" type="button" @click="operationVisa('通过',son.Id,1)" v-if="son.ApplyStatus==0">{{$t('visa.v_tongguo')}}</button>-->
</td>
</tr>
</table>
</div>
<span slot="reference" class="_f_b3 _cu w95">{{item.NameRemark}}</span>
</el-popover>
</div>
<div class="_br _pr30 _pl30 fz14 ta_l _vlc_info w305">
<p class="saleOrderListpMate">
<span><i class="iconfont icon-bianhaonumbered5"></i>
{{$t('visa.v_tuanhao')}}</span>
{{item.OrderId}}
</p>
</div>
<div class="_br _pr30 _pl30 fz14 w305">
<p class="saleOrderListpMate">
<span><i class="iconfont icon-ico-shijianfanwei"></i>
{{$t('salesModule.ApplyTime')}}</span>
{{item.CreateTime}}
</p>
</div>
<div class="_br _pr30 _pl30 fz14 w305">
<p class="saleOrderListpMate">
<span>
<i class="iconfont icon-img_jiaqian"></i>
{{$t('objFill.v101.Rest.dindanjine')}}</span>
{{item.Interior_Price}}
</p>
</div>
<div class="_br _pr30 _pl30 fz14 w220">
<p class="saleOrderListpMate">
<span>
<i class="iconfont icon-qiehuan"></i>
{{$t('fnc.dqzhuangtai')}}
</span>
{{item.PlanStatus==1?$t('Airticket.Air_Processed'):$t('visa.v_chulizhong')}}
</p>
</div>
<div class="_pr30 _pl30 fz14 ta_l" style="color: #333;">
<div v-if="item.PlanStatus==0">----</div>
<div v-if='item.PlanStatus==1'>
<p>{{item.CreateByName}}</p>
<p>{{item.CreateTime}}</p>
</div>
</div>
</div>
<div class="noData" v-show="DataList.length==0||DataList==null">
{{$t('system.content_noData')}}
</div>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
return{
msg:{
pageIndex:1,
pageSize:9,
StartTime:'',
EndTime:'',
CountryType:'-1',
PlanStatus:'-1',
SignStatus:'-1'
},
actieID:1,
DataList:[],
checkList:[],
VisaManagementList:[],
total:0,
currentPage: 1,
noData:false,
loading:true,
loading2:false,
beforeCheck:{
disabledDate: (time) => {
let endTime = new Date(this.msg.EndTime);
return endTime.getTime()<time.getTime();
}
},
afterCheck:{
disabledDate: (time) => {
let startTime = new Date(this.msg.StartTime);
return startTime.getTime()>time.getTime()
}
},
}
},methods:{
getList(){ // 获取列表数据
this.loading = true;
this.apipost('dmc_get_visa_GetVisaListForAllograph',this.msg,res=>{
if(res.data.resultCode==1){
this.loading = false;
this.total=res.data.data.count
this.DataList = res.data.data.pageData
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
getVisaManagementList(){ // 获取签证管理
this.apipost('dmc_get_visa_GetVisaManagementList',{Status:0,BranchId:-1,SignStatus:0},res=>{
if(res.data.resultCode==1){
this.VisaManagementList = res.data.data
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
handleCurrentChange(val){
this.msg.pageIndex=val;
this.getList()
},
resetPageIndex(){
this.msg.pageIndex=1;
this.currentPage = 1
},
goUrl(path,id,url){
let routeData = this.$router.resolve({name: path, query: {data: id,url:url}});
window.open(routeData.href, '_blank');
}
},mounted(){
this.getList()
this.getVisaManagementList()
}
}
</script>