<template>
<el-container>
<el-main>
<el-row class="row-bg">
<el-col :span="24">
<div class="grid-content content">单据查询</div>
</el-col>
</el-row>
<!--搜索区域-->
<el-row>
<el-form :label-position="labelPosition" :model="queryBill" :rules="rules" ref="queryBill"
class="demo-ruleForm">
<el-col :span="6" style="margin-left: 10px">
<el-form-item label="航班号:" prop="flightNo">
<el-input v-model="queryBill.flightNo" style="width: 180px"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" >
<el-form-item label="航空器注册号:" prop="aircraftNo">
<el-input v-model="queryBill.aircraftNo" style="width: 180px"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" >
<el-form-item label="进出港:" prop="accessFlag">
<el-input v-model="queryBill.accessFlag" style="width: 180px"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" >
<el-form-item label="航班日期:" prop="flightDate">
<el-date-picker
v-model="queryBill.flightDate"
type="date"
value-format="yyyyMMdd"
format="yyyyMMdd"
placeholder="选择日期" style="width: 180px"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="3" >
<el-button type="primary" @click="submitForm()" >查询</el-button>
</el-col>
</el-form>
</el-row>
<!--表单区域-->
<el-row>
<el-table
:data="tableData"
border
height="500"
v-loading="tableloading"
style="margin-bottom: 10px">
<el-table-column
fixed="left"
label="操作"
width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="primary"-->
<!-- @click="showPerson(scope.$index,scope.row)">添加机组人员</el-button>-->
</template>
</el-table-column>
<el-table-column
prop=aircraftNo"
label="航空器注册号">
</el-table-column>
<el-table-column
prop="flightNo"
label="航班号">
</el-table-column>
<el-table-column
prop="flightDate"
label="航班日期"
width="120">
</el-table-column>
<el-table-column
prop="accessFlag"
label="进出港标识"
width="120">
</el-table-column>
<el-table-column
prop="departureAirport"
label="出发港">
</el-table-column>
<el-table-column
prop="departuredatetime"
label="出发时间"
width="120">
</el-table-column>
<el-table-column
prop="arrivalAirport"
label="目的港">
</el-table-column>
<el-table-column
prop="arrivaldatetime"
label="到达时间"
width="120">
</el-table-column>
<el-table-column
prop="statusMsg"
label="海关回执"
width="140"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
fixed="right"
prop=""
label="报文操作"
width="280">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="selectDetail(scope.$index,scope.row)">查看回执</el-button>
<!-- <el-button size="mini" type="success">发送</el-button>-->
<el-button
size="mini"
type="danger"
@click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 50, 100, 500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-row>
<!--查看回执弹框-->
<el-dialog title="回执明细" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="sendtime" label="操作时间" ></el-table-column>
<el-table-column property="createBy" label="操作人" ></el-table-column>
<el-table-column property="flightNo" label="航班号"></el-table-column>
<el-table-column property="flightDate" label="航班日期" ></el-table-column>
<el-table-column property="receiptContent" label="回执内容" ></el-table-column>
</el-table>
</el-dialog>
</el-main>
<!--添加机组人员dialog-->
<!-- <el-row>-->
<!-- <el-dialog title="机组人员添加" :visible.sync="dialogTableVisibles" >-->
<!-- <el-form :model="billperson" :rules="brules" ref="billperson" label-width="130px" class="demo-ruleForm">-->
<!-- <el-row>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="姓名" prop="name">-->
<!-- <el-input v-model="billperson.name" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="性别" prop="gender">-->
<!-- <el-input v-model="billperson.gender" placeholder="M/F"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="证件类型" prop="certType">-->
<!-- <el-input v-model="billperson.certType" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="证件号码" prop="ceterNo">-->
<!-- <el-input v-model="billperson.ceterNo" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="国籍" prop="nationality">-->
<!-- <el-input v-model="billperson.nationality" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item label="职务" prop="gareer">-->
<!-- <el-input v-model="billperson.gareer" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="24">-->
<!-- <el-form-item label="备注" prop="meno">-->
<!-- <el-input v-model="billperson.meno" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="24"> <el-button type="primary" @click="submitPerson('billperson')" style="float: right">提 交</el-button></el-col>-->
<!-- </el-row>-->
<!-- </el-form>-->
<!-- <el-row>-->
<!-- <el-table-->
<!-- :data="tableData2"-->
<!-- border-->
<!-- style="width: 100%;margin-bottom: 10px">-->
<!-- <el-table-column-->
<!-- fixed="left"-->
<!-- prop="name"-->
<!-- label="姓名">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="gender"-->
<!-- label="性别">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="nationality"-->
<!-- label="国籍">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="certType"-->
<!-- label="证件类型">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="ceterNo"-->
<!-- label="证件编辑">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="gareer"-->
<!-- label="职务">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- prop="meno"-->
<!-- label="备注">-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-row>-->
<!-- </el-dialog>-->
<!-- </el-row>-->
<!--对话提示框-->
<el-row>
<el-dialog
title="系统提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>{{msg}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</el-row>
</el-container>
</template>
<style scoped>
.grid-content {
height: 36px;
line-height: 36px;
}
.el-dialog__body{text-align: center}
.content {
border-left: 4px #409EFF solid;
padding-left: 10px;
background-color: #f9fafc;
margin-bottom: 2px
}
.row-bg{
background-color: white;
}
</style>
<script>
import { addBillPerson, editBill, selectBill, selectReturnMsg} from "../../api/transport";
import loginUserInfo from "../../api/base";
export default {
data(){
return{
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '明天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() + 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}]
},
queryBill:{
flightNo:undefined,
aircraftNo:undefined,
flightDate:undefined,
accessFlag:undefined,
},
// billperson:{
// autoId:undefined,
// name:undefined,
// gender:undefined,
// gareer:undefined,
// nationality:undefined,
// certType:undefined,
// ceterNo:undefined,
// createTime:undefined,
// createBy:loginUserInfo.username,
// updateTime:undefined,
// updateBy:loginUserInfo.username,
// meno:undefined,
// isDelete:undefined,
// billsId:undefined
// },
// brules:{
// name: [
// {required: true, message: '请输入', trigger: 'blur'}
// ],
// gender: [
// {required: true, message: '请输入', trigger: 'blur'}
// ],
// certType: [
// {required: true, message: '请输入', trigger: 'blur'}
// ],
// ceterNo: [
// {required: true, message: '请输入', trigger: 'blur'}
// ],
// nationality: [
// {required: true, message: '请输入', trigger: 'blur'}
// ],
// gareer: [
// {required: true, message: '请输入', trigger: 'blur'}
// ],
// },
// dialogTableVisibles:false,
tableloading:false,
rules:{},
labelPosition:'left',
pageNum: 1,
pageSize:10,
total:0,
tableData:[],
tableData2:[],
gridData:[],
dialogTableVisible: false,
centerDialogVisible:false,
msg:undefined
}
},
methods: {
//添加机组人员按钮
// showPerson(index,row){
// this.dialogTableVisibles=true;
// this.billperson.billsId=row.uuid;
// },
//提交按钮
// submitPerson(formName){
// //console.log(this.billperson.billsId)
// this.$refs[formName].validate((valid) => {
// if (valid) {
// addBillPerson(this.billperson).then(res=>{
// let response=res.data;
// if(response.code=='200'){
// this.centerDialogVisible=true;
// this.msg=response.msg;
// }else{
// this.msg=response.msg;
// }
// });
// } else {
// console.log('error submit!!');
// return false;
// }
// });
// },
//查询回执列表
selectDetail(index,row){
this.gridData=[];
this.dialogTableVisible=true;
let params={messageid:row.messageid};
selectReturnMsg(params).then(res=>{
let response=res.data.data;
this.gridData=response;
});
},
//获取单据列表
submitForm(){
let params={pageNum:this.pageNum,pageSize:this.pageSize,flightNo:this.queryBill.flightNo,
aircraftNo:this.queryBill.aircraftNo,flightDate:this.queryBill.flightDate,accessFlag:this.queryBill.accessFlag};
this.tableloading=true;
selectBill(params).then(res=>{
let response=res.data.data;
this.tableData=response.list;
console.log(this.tableData)
this.tableloading=false;
this.total=response.total;
});
},
//列表删除功能
handleDel(index,row){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
editBill(row).then(res=>{
let response=res.data;
if(response.code=='200'){
this.$message({
type: 'info',
message: '删除成功'
});
this.submitForm();
}else{
this.$message({
type: 'info',
message: '删除失败'
}); }
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//获取默认值
defaultData(){
Object.assign(this.queryBill, this.$route.query);
},
//编辑单据查询
handleEdit(index,row){
this.$router.push({path:'/bill',query:row});
},
//分页
handleSizeChange(val) {
this.pageSize=val;
},
handleCurrentChange(val) {
this.pageNum=val;
this.submitForm();
}
},
//渲染方法
mounted(){
this.defaultData();
this.submitForm();
}
}
</script>