朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 c34dbca91391c747204c0cd5b0e0e6131e10682d 1 个父辈 5affd373 master ... ExportOrder flightplan2.0 master_dev master_dev_markdown master_dev_permission master_ffmTemp zhidan

进港快件新增8个界面

内嵌 并排对比
正在显示 9 个修改的文件 包含 4100 行增加 和 0 行删除
import http from './http.js'
let baseUrl = 'nmms-server-import/nmms/mt1201'
let baseUrlCross = 'nmms-server-import/nmms/crossday'
let baseUrl2 = 'nmms-server-import/nmms/awbm'
//进港快件
//快件导入
export const importExcelAWBM=params=>{return http.get(`${baseUrl2}/importExcelAWBM`, params);};
//获取进港快件列表
export const getAWBM1List=params=>{return http.get(`${baseUrl2}/getAWBM1List`, params);};
//跨天配置
export const addCrossday=params=>{return http.post(`${baseUrlCross}/addCrossday`, params);};
... ...
<template>
<el-container>
<el-main>
<div style="background-color:white;padding-top: 20px;padding-bottom: 20px ">
<el-row>
<el-col :span="6">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传原始数据</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-col>
<el-col :span="6">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传理货数据</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-col>
</el-row>
</div>
</el-main>
</el-container>
</template>
<!--自定义CSS-->
<style scoped>
.el-container{text-align: center}
.el-main{margin:0 auto;height:400px;}
p{font-size:25px;font-weight: bold;}
.row-bg{padding:30px 0;}
.el-form-item {margin-bottom: 0px;}
</style>
<script>
import { selectAirport } from '../../api/mt1201'
import jsutil from "@/common/js/util";
export default {
data() {
return {
};
},
methods:{
},
computed:{
},
/*渲染方法*/
activated(){
},
};
</script>
... ...
<template>
<el-container>
<el-main>
<!--检索条件-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="24"><div class="grid-content"><p>请输入航班信息：</p></div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content"><h1>Please Enter The Flight Information：</h1></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center" style="margin-top: 30px">
<el-col :span="5">
<el-form-item label="航班号" prop="flightno">
<el-input placeholder="" v-model="flightno" style="width:100%"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="航班日期" required>
<el-col :span="24">
<el-form-item prop="flightdate">
<el-date-picker type="date" placeholder="选择日期" :clearable="false" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="始发站" prop="originstation">
<el-select v-model="originstation"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod"
:loading="loading"
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.airportid"
:label="item.airportid"
:value="item.airportid">
<span style="float: left">{{ item.airportid }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportdescchn }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="目的站" prop="destinationstation">
<el-select v-model="destinationstation" filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod"
:loading="loading" placeholder="请选择">
<el-option
v-for="item in options2"
:key="item.airportid"
:label="item.airportid"
:value="item.airportid">
<span style="float: left">{{ item.airportid }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportdescchn }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" :offset="10">
<div class="grid-content">
<el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-main>
</el-container>
</template>
<!--自定义CSS-->
<style scoped>
.el-container{text-align: center}
.el-main{margin:0 auto;height:400px;}
p{font-size:25px;font-weight: bold;}
.row-bg{padding:30px 0;}
.el-form-item {margin-bottom: 0px;}
</style>
<script>
import { selectAirport } from '../../api/mt1201'
import jsutil from "@/common/js/util";
export default {
data() {
return {
/*初始化值*/
ruleForm: {
flightno:'',
flightdate:'',
originstation:'',
destinationstation:''
},
options: [],
options2:[],
airportid:'',
loading: false,
/*表单校验规则*/
rules: {
flightno: [
{required: true, message: '请输入航班号', trigger: 'blur'},
{min: 3, max: 6, message: '输入不符合规范', trigger: 'blur'}
],
originstation: [
{required: true, message: '请输入航班起始站', trigger: 'blur'},
{min: 3, max: 3, message: '长度为 3 ', trigger: 'blur'}
],
destinationstation: [
{required: true, message: '请输入目的站', trigger: 'blur'},
{min: 3, max: 3, message: '长度为 3 ', trigger: 'blur'}
],
flightdate: [
{ required: true, message: '请选择日期', trigger: 'blur' }
]
}
};
},
methods:{
remoteMethod:function(query) {
this.options = [];
this.options2=[];
let param={airportid:query};
this.loading = true;
selectAirport(param).then(res=>{
if (res !== '') {
setTimeout(() => {
this.loading = false;
this.options=res.data.data;
this.options2=res.data.data;
}, 200);
} else {
this.options = [];
this.options2=[];
}
});
},
/*按钮点击请求方法*/
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.push(
{
path:'/origmasters',
query:{
flightno: this.ruleForm.flightno,
flightdate: this.ruleForm.flightdate,
originstation: this.ruleForm.originstation,
destinationstation: this.ruleForm.destinationstation,
awba: ''
}
}
);
} else {
console.log('error submit!!');
return false;
}
});
},
/*航班日期格式化方法*/
dateConversion(value){
var date = new Date(value);
date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return date;
},
/*加载默认参数*/
getDefaultData(){
if(
jsutil.checkNull(this.$route.query)
&& jsutil.checkNull(this.$route.query.flightno)
&& jsutil.checkNull(this.$route.query.flightdate)
&& jsutil.checkNull(this.$route.query.originstation)
&& jsutil.checkNull(this.$route.query.destinationstation)
){
this.ruleForm.flightno=(this.$route.query.flightno);
this.ruleForm.flightdate=(this.$route.query.flightdate);
this.ruleForm.originstation=(this.$route.query.originstation);
this.ruleForm.destinationstation=(this.$route.query.destinationstation);
}
}
},
computed:{
originstation:{
get:function () {
return this.ruleForm.originstation;
},
set:function (val) {
this.ruleForm.originstation=val.toUpperCase();
}
},
destinationstation:{
get:function () {
return this.ruleForm.destinationstation;
},
set:function (val) {
this.ruleForm.destinationstation=val.toUpperCase();
}
},
flightno:{
get:function () {
return this.ruleForm.flightno;
},
set:function (val) {
this.ruleForm.flightno=val.toUpperCase();
}
}
},
/*渲染方法*/
activated(){
this.getDefaultData();
//this.getFlightList();
},
};
</script>
... ...
<template>
<el-container>
<el-main>
<!--表单检索条件-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row>
<el-col :span="24"><div class="grid-content"><p>请输入航班信息：</p></div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="grid-content"><h1>Please Enter The Flight Information：</h1></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center" style="margin-top: 30px">
<el-col :span="5">
<el-form-item label="航班号" prop="flightno">
<el-input onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="" v-model="flightno" style="width:100%"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="航班日期" required>
<el-col :span="24">
<el-form-item prop="flightdate">
<el-date-picker type="date" placeholder="选择日期" :clearable="false" v-model="ruleForm.flightdate" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
</el-col>
<el-col :span="5">
<!--<el-form-item label="始发站" prop="originstation">
<el-input placeholder="" v-model="ruleForm.originstation"></el-input>
</el-form-item>-->
<el-form-item label="始发站" prop="originstation">
<el-select v-model="originstation" filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod"
:loading="loading"
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.airportid"
:label="item.airportid"
:value="item.airportid">
<span style="float: left">{{ item.airportid }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportdescchn }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<!--<el-form-item label="目的站" prop="destinationstation">
<el-input placeholder="" v-model="ruleForm.destinationstation" :disabled="true"></el-input>
</el-form-item>-->
<el-form-item label="目的站" prop="destinationstation">
<el-select v-model="destinationstation"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod"
:loading="loading"
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.airportid"
:label="item.airportid"
:value="item.airportid">
<span style="float: left">{{ item.airportid }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.airportdescchn }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" :offset="10">
<div class="grid-content">
<el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-main>
</el-container>
</template>
<!--自定义CSS-->
<style scoped>
.el-container{text-align: center}
.el-main{margin:0 auto;height:400px;}
p{font-size:25px;font-weight: bold;}
.row-bg{padding:30px 0;}
.el-form-item {margin-bottom: 0px;}
</style>
<script>
import { selectAirport } from '../../api/mt1201'
import jsutil from "@/common/js/util";
export default {
data() {
return {
/*初始化值*/
ruleForm: {
flightno: '',
flightdate:'',
originstation:'',
destinationstation:'',
},
options: [],
airportid:'',
loading: false,
/*表单验证方法*/
rules: {
flightno: [
{required: true, message: '请输入航班号', trigger: 'blur'},
{min: 3, max: 6, message: '输入不符合规范', trigger: 'blur'}
],
originstation: [
{required: true, message: '请输入航班起始站', trigger: 'blur'},
{min: 3, max: 3, message: '长度为 3 ', trigger: 'blur'}
],
destinationstation: [
{required: true, message: '请输入目的站', trigger: 'blur'},
{min: 3, max: 3, message: '长度为 3 ', trigger: 'blur'}
],
flightdate: [
{ required: true, message: '请选择日期', trigger: 'change' }
]
}
};
},
computed:{
originstation:{
get:function () {
return this.ruleForm.originstation;
},
set:function (val) {
this.ruleForm.originstation=val.toUpperCase();
}
},
destinationstation:{
get:function () {
return this.ruleForm.destinationstation;
},
set:function (val) {
this.ruleForm.destinationstation=val.toUpperCase();
}
},
flightno:{
get:function () {
return this.ruleForm.flightno;
},
set:function (val) {
this.ruleForm.flightno=val.toUpperCase();
}
}
},
methods:{
remoteMethod:function(query) {
this.options = [];
let params={airportid:query};
this.loading = true;
selectAirport(params).then(res=>{
if (res !== '') {
setTimeout(() => {
this.loading = false;
this.options=res.data.data;
this.options2=res.data.data;
}, 200);
} else {
this.options = [];
}
});
},
/*按钮点击请求方法*/
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.push({path:'/tallymasters',query:
{flightno:JSON.stringify(this.ruleForm.flightno),
flightdate:JSON.stringify(this.dateConversion(this.ruleForm.flightdate)),
originstation:JSON.stringify(this.ruleForm.originstation),
destinationstation:JSON.stringify(this.ruleForm.destinationstation),
awba:JSON.stringify("")}});
} else {
//console.log('error submit!!');
return false;
}
});
},
/*航班日期格式化方法*/
dateConversion(value){
var date = new Date(value);
var date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return date;
},
/*获取默认值方法*/
getDefaultData(){
if(
jsutil.checkNull(this.$route.query)
&& jsutil.checkNull(this.$route.query.flightno)
&& jsutil.checkNull(this.$route.query.flightdate)
&& jsutil.checkNull(this.$route.query.originstation)
&& jsutil.checkNull(this.$route.query.destinationstation)
)
{
this.ruleForm.flightno=(this.$route.query.flightno);
this.ruleForm.flightdate=(this.$route.query.flightdate);
this.ruleForm.originstation=(this.$route.query.originstation);
this.ruleForm.destinationstation=(this.$route.query.destinationstation);
}
}
},
/*渲染方法*/
activated(){
this.getDefaultData();
}
};
</script>
... ...
<template>
<el-container>
<el-main >
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<template>
航班号
</template>
<el-input v-model="vcarrier" placeholder="航班号" style="width: 150px">
</el-input>
</el-col>
<el-col :span="6">
<template>
航班日期
</template>
<el-date-picker
v-model="flighttime"
type="date"
value-format="yyyy-MM-dd"
placeholder="航班日期"
:picker-options="dataPickerOptions"
style="width: 150px">
</el-date-picker>
</el-col>
<el-col :span="3">
<el-button type="primary" v-on:click="getFlightList">查询</el-button>
</el-col>
</el-row>
<!--TableList-->
<el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="flightno"
label="航班号"
>
</el-table-column>
<el-table-column
prop="flightdate"
label="航班日期"
>
</el-table-column>
<el-table-column
prop="originstation"
label="始发站"
>
</el-table-column>
<el-table-column
prop="destinationstation"
label="目的站"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="200">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="handleEdit(scope.$index, scope.row)">原始舱单</el-button>
<el-button
size="mini"
type="success"
@click="handleDelete(scope.$index, scope.row)">进港理货</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-row>
</el-main>
</el-container>
</template>
<style scoped>
.el-input-group{
display: table;
}
</style>
<script>
import { selectFlightLists } from '../../api/mt1201'
import {mapActions, mapGetters} from 'vuex'
import {loginedUserInfo} from "../../api/user";
export default {
name:'OrigFlightLists',
data() {
/*初始化值*/
return {
carrier:'',
tableData: [],
flighttime: undefined,
currentPage:1,
pageSize:10,
total:0,
tableloading:true,
departmentid:'',
dataPickerOptions: {
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 * 7);
picker.$emit('pick', date);
}
}]
}
}
},
mounted() {
this.getdatatime();
this.getFlightList();
},
methods: {
/*设置默认航班时间*/
getdatatime(){
this.flighttime=new Date();
},
/*分页方法*/
handleSizeChange(val) {
this.pageSize=val;
this.getFlightList();
},
handleCurrentChange(val) {
this.currentPage=val;
this.getFlightList();
},
/*查询列表请求*/
getFlightList:function() {
let params={
currentPage:this.currentPage,
pageSize:this.pageSize,
flighttime:this.flighttime,
carrier:this.carrier,
departmentid:loginedUserInfo().companyInfo.departmentid
};
this.listLoading = true;
selectFlightLists(params).then(res=>{
let response=res.data.data;
this.tableData=response.list;
this.tableloading=false;
this.total=response.total;
this.listLoading = false;
});
},
/*原始舱单跳转*/
handleEdit(index, row) {
// row.waybillType = 'MT1201'
this.$router.push(
{
path:'/enters',
query:row
}
)
},
/*进港理货跳转*/
handleDelete(index, row) {
// row.waybillType = 'MT5201'
this.$router.push(
{
path:'entertalls',
query:row
}
)
}
},
computed:{
vcarrier:{
get:function () {
return this.carrier;
},
set:function (val) {
this.carrier=val.toUpperCase();
}
},
...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
/*渲染方法*/
activated() {
let that=this;
},
}
</script>
<style>
.el-main{padding: 10px 0px 10px 0px; }
.el-col{margin-right: 10px;}
</style>
... ...
<template>
<el-container>
<el-main style="background-color: white">
<!--检索条目部分-->
<el-row class="row-bg">
<el-col :span="24">
<div class="grid-content content">航班信息</div>
</el-col>
<el-col :span="24">
<div class="grid-content co">
<el-col :span="1">
<div class="grid-content"></div>
</el-col>
<el-col :span="20">
<div class="grid-content">
<span>航班号：{{defaultQuery.flightno}}</span>
<span>航班日期：{{defaultQuery.flightdate}}</span>
<span>航段：{{defaultQuery.originstation}}-{{defaultQuery.destinationstation}}</span>
</div>
</el-col>
</div>
</el-col>
<el-col :span="24">
<div class="grid-content content">进港舱单查询</div>
</el-col>
<el-col :span="24">
<div class="grid-content co">
<el-col :span="1">
<div class="grid-content"></div>
</el-col>
<el-col :span="22">
<div class="grid-content">
<el-col :span="9" class="pub">
<div class="grid-content">
<el-input v-model="defaultQuery.awba" placeholder="请输入主单号" style="width: 250px" clearable>
<template slot="prepend">主单号</template>
</el-input>
</div>
</el-col>
<el-col :span="3" class="pub">
<div class="grid-content">
<el-button type="primary" size="mini" v-on:click="getList" icon="el-icon-search">&nbsp;查&emsp;&nbsp;询&nbsp;</el-button>
</div>
</el-col>
<el-col :span="3" class="pub">
<div class="grid-content">
<el-dropdown @command="handleCommand">
<el-button size="mini" type="success" icon="el-icon-download">
导出文件
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="PDF">导出PDF</el-dropdown-item>
<el-dropdown-item command="EXCEL">导出EXCEL</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
<el-col :span="3">
<div class="grid-content">
<el-button type="warning" @click="toggleRowExpansion" icon="el-icon-sort" size="mini">
全部{{ isExpansion ? "折叠" : "展开" }}
</el-button>
</div>
</el-col>
</div>
</el-col>
</div>
</el-col>
<el-col :span="24">
<div class="grid-content content" style="margin-top: 6px">舱单明细</div>
</el-col>
</el-row>
<!--查询列表部分-->
<el-row>
<el-col :span="24">
<template>
<el-table
class="table"
id="pdfDom"
v-loading="tableloading"
ref="dataTreeList"
:data="tableData"
tooltip-effect="dark"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange"
row-key="uuid"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
type="selection"
width="50">
</el-table-column>
<el-table-column
label="运单号"
width="185">
<template slot-scope="scope">
<span v-if="scope.row.awbh==''||scope.row.awbh==null">
{{scope.row.awba}}<i style="margin-left: 2px" class="el-icon-menu" :style="{'color':scope.row.splitcode=='P'?'rgb(255,77,81)'
:scope.row.splitcode=='M'?'rgb(255,77,81)':scope.row.splitcode=='D'?'rgb(255,77,81)':'rgba(255,255,255,0)'}"></i>
</span>
<span v-else>
{{scope.row.awbh}}
</span>
</template>
</el-table-column>
<el-table-column
prop="awbinfo.pcs"
label="总件数"
width="70">
</el-table-column>
<el-table-column
prop="awbinfo.weight"
label="总重量"
width="70">
</el-table-column>
<el-table-column
prop="piece"
label="舱单件数"
width="80">
<template slot-scope="scope">
<span v-if="scope.row.awbinfo==null" style="color: #ff4d51;font-weight: bold">
{{scope.row.piece}}
</span>
<span v-else-if="scope.row.awbinfo.pcs!=scope.row.piece" style="color: #ff4d51;font-weight: bold">
{{scope.row.piece}}
</span>
<span v-else>
{{scope.row.piece}}
</span>
</template>
</el-table-column>
<el-table-column
prop="weight"
label="舱单重量"
width="100">
<template slot-scope="scope" style="text-align: center">
<span v-if="scope.row.awbinfo==null" style="color: #ff4d51;font-weight: bold">
{{scope.row.weight}}
</span>
<span v-else-if="scope.row.weight != scope.row.awbinfo.weight" style="color: #ff4d51;font-weight: bold">
{{scope.row.weight}}
</span>
<span v-else>
{{scope.row.weight}}
</span>
</template>
</el-table-column>
<el-table-column
prop="goodsname"
label="货品名称"
width="140">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="100" :formatter="formatStatus">
</el-table-column>
<el-table-column
label="回执内容"
width="260">
<template slot-scope="scope">
<span v-if="scope.row.ext5 && scope.row.ext5.indexOf('异常') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不通过') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不接受') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='01' || scope.row.status=='11'" style="color: #67C23A">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='02' || scope.row.status=='03'" style="color: #E6A23C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='12' || scope.row.status=='13'" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else style="color: #909399;">
{{scope.row.ext5}}
</span>
</template>
</el-table-column>
<el-table-column
prop="operation"
label="操作"
width="380"
show-overflow-tooltip>
<template slot-scope="scope">
<el-row>
<el-button
size="mini"
type="info"
@click="handleDetail(scope.$index, scope.row)">收发明细
</el-button>
<el-button
v-if="scope.row.awbh==''||scope.row.awbh==null"
size="mini"
type="success"
@click="handleEdit(scope.$index, scope.row)">编辑主单
</el-button>
<el-button
v-else
size="mini"
type="success"
@click="handleFen(scope.$index, scope.row)">编辑分单
</el-button>
<el-button
size="mini"
type="primary"
@click="handleSend(scope.$index, scope.row)"
:disabled="btSendStatusFormater(scope.row.status)">发舱单报
</el-button>
<el-button
size="mini"
type="warning"
@click="UpdateStatus(scope.$index, scope.row)">更改状态
</el-button>
</el-row>
<el-row style="margin-bottom: 5px;margin-top: 30px">
<el-button
v-if="scope.row.awbh==''||scope.row.awbh==null"
size="mini"
@click="Importallocation(scope.$index, scope.row)">分拨申请
</el-button>
<el-button
v-else
disabled=""
size="mini"
@click="Importallocation(scope.$index, scope.row)">分拨申请
</el-button>
<!-- style="background-color: #63cdda;color: white"-->
<el-button
v-if="scope.row.awbh==''||scope.row.awbh==null"
size="mini"
@click="Allocatearrive(scope.$index, scope.row)">分拨运抵
</el-button>
<el-button
v-else
disabled=""
size="mini"
@click="Allocatearrive(scope.$index, scope.row)">分拨运抵
</el-button>
<!-- style="background-color:#778beb;color: white"-->
<el-button
size="mini"
style="background-color:#f19066;color: white"
@click="handleUpdate(scope.$index, scope.row)"
:disabled="btEditStatusFormater(scope.row.status)">发修改报
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
:disabled="btDeleStatusFormater(scope.row.status)">发删除报
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
<!--编辑主单-->
<el-dialog :title="'原始舱单信息'+textMap[dialogStatus]" :visible.sync="outerVisible" width="90%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="labelPosition" size="mini">
<!--航班信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content">航班信息</div>
</el-col>
<el-row class="flightInfo">
<el-col :span="6">
<el-form-item prop="awba">
<div v-if="dialogStatus === 'update'">
<el-input disabled="" v-model="ruleForm.awba" style="width: 200px">
<template slot="prepend">运单号</template>
</el-input>
</div>
<div v-else>
<el-input v-model="ruleForm.awba" style="width: 200px">
<template slot="prepend">运单号</template>
</el-input>
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="flightno">
<el-input disabled="" v-model="ruleForm.flightno" style="width: 200px">
<template slot="prepend">航班号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="originstation">
<el-input disabled="" v-model="ruleForm.originstation" style="width: 200px">
<template slot="prepend">航段</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" required>
<el-form-item prop="flightdate">
<div class="ip">
航班日期
</div>
<el-date-picker disabled="" type="date" placeholder="选择日期" :clearable="false"
v-model="ruleForm.flightdate"
style="width: 145px">
</el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row class="flightInfo">
<el-col :span="6">
<el-form-item prop="splitcode">
<div class="ip">
是否分批
</div>
<el-select v-model="ruleForm.splitcode" placeholder="" style="width: 110px">
<el-option v-for="item in splitcodes" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="1.5">
<el-form-item prop="splitcode">
<el-button size="mini" type="primary" @click="dialogStatus==='create'?createData('ruleForm'):updateData('ruleForm')" style="float: right">保存</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row class="flightInfo">
<el-col :span="6">
<div v-if="FenStatus === 'addAwbh'">
<el-form-item prop="awbh">
<el-input v-model="ruleForm.awbh" style="width: 200px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</div>
<div v-else>
<el-form-item style="display: none" prop="awbh" >
<el-input v-model="ruleForm.awbh" style="width: 200px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</el-row>
<!--运单信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content">运单信息</div>
</el-col>
</el-row>
<!--航程信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">航程信息</el-divider>
</el-col>
</el-row>
<el-row style="margin-bottom: 0px;">
<el-col :span="6">
<el-form-item prop="awbinfo.sairportid" >
<el-input v-model="ruleForm.awbinfo.sairportid" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">起始站</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="awbinfo.by1">
<el-input v-model="ruleForm.awbinfo.by1" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">承运人1</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="awbinfo.dest1">
<el-input v-model="ruleForm.awbinfo.dest1" style="width: 200px">
<template slot="prepend">到达站1</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="awbinfo.by2">
<el-input v-model="ruleForm.awbinfo.by2" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">承运人2</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item prop="awbinfo.dest2">
<el-input v-model="ruleForm.awbinfo.dest2" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">到达站2</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="awbinfo.by3">
<el-input v-model="ruleForm.awbinfo.by3" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">承运人3</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="awbinfo.dest3">
<el-input v-model="ruleForm.awbinfo.dest3" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">到达站3</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="awbinfo.eairportid">
<el-input v-model="ruleForm.awbinfo.eairportid" onkeyup="this.value=this.value.toUpperCase()" style="width: 200px">
<template slot="prepend">目的站</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!--货物信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">货物信息</el-divider>
</el-col>
</el-row>
<el-row style="margin-bottom: 0px;">
<el-row class="product">
<el-col :span="6">
<el-form-item label="" prop="awbinfo.pcs">
<el-input type="number" v-model="ruleForm.awbinfo.pcs" style="width: 200px">
<template slot="prepend">总件数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="awbinfo.weight">
<el-input type="number" v-model="ruleForm.awbinfo.weight" style="width: 200px">
<template slot="prepend">总重量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="piece">
<el-input type="number" v-model="ruleForm.piece" style="width: 200px">
<template slot="prepend">舱单件数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="weight">
<el-input type="number" v-model="ruleForm.weight" style="width: 200px">
<template slot="prepend">舱单重量</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row class="product">
<el-col :span="6">
<el-form-item label="" prop="specopeid">
<el-input v-model="ruleForm.awbinfo.specopeid" style="width: 200px">
<template slot="prepend">特货代码</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="customcode">
<div class="ip">
海关关区
</div>
<el-select v-model="ruleForm.customcode"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod2"
:loading="loading" placeholder="请选择" style="width: 115px">
<el-option
v-for="item in customcodes"
:key="item.customcode"
:label="item.customcode"
:value="item.customcode">
<span style="float: left">{{ item.customcode }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.customname }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6" >
<el-form-item label="" prop="awbinfo.awbtype">
<div class="ip">
海关状态
</div>
<el-select v-model="ruleForm.awbinfo.awbtype" placeholder="" style="width: 110px">
<el-option v-for="(item,index) in customext5" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="paymodel">
<div class="ip">
付费方式
</div>
<el-select v-model="ruleForm.awbinfo.paymodel" placeholder="" style="width: 120px">
<el-option v-for="item in paymodel" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row class="product">
<el-col :span="12">
<el-form-item label="" prop="goodsname">
<el-input v-model="ruleForm.goodsname" style="width: 100%">
<template slot="prepend">货物描述</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-row>
<!--发货人信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">发货人信息</el-divider>
</el-col>
</el-row>
<el-row style="margin-bottom: 0px;">
<el-col :span="6">
<el-form-item label="" prop="awbinfo.shprname">
<el-input v-model="ruleForm.awbinfo.shprname" style="width: 200px">
<template slot="prepend">发货人称</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="awbinfo.shpraddress">
<el-input v-model="ruleForm.awbinfo.shpraddress" style="width: 200px">
<template slot="prepend">地址</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="" prop="awbinfo.shprtel">
<el-input v-model="ruleForm.awbinfo.shprtel" style="width: 200px">
<template slot="prepend">电话</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" prop="awbinfo.shprcountyr">
<div class="ip">
国家代码
</div>
<el-select v-model="ruleForm.awbinfo.shprcountyr"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod" style="width: 110px"
:loading="loading" placeholder="请选择">
<el-option
v-for="item in shprcountyrs"
:key="item.countryCode"
:label="item.countryCode"
:value="item.countryCode">
<span style="float: left">{{ item.countryNameCn }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.countryCode }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!--收货人信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">收货人信息</el-divider>
</el-col>
</el-row>
<el-row style="margin-bottom: 5px">
<el-col :span="6">
<el-form-item label="" prop="awbinfo.cnsnname">
<el-input v-model="ruleForm.awbinfo.cnsnname" style="width: 200px">
<template slot="prepend">收货人称</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="awbinfo.cnsnaddress">
<el-input v-model="ruleForm.awbinfo.cnsnaddress" style="width: 200px">
<template slot="prepend">地址</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="" prop="awbinfo.cnsntel">
<el-input v-model="ruleForm.awbinfo.cnsntel" style="width: 200px">
<template slot="prepend">电话</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" prop="awbinfo.cnscountyr">
<div class="ip">
国家代码
</div>
<el-select v-model="ruleForm.awbinfo.cnscountyr"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod" style="width: 110px"
:loading="loading" placeholder="请选择">
<el-option
v-for="item in cnscountyrs"
:key="item.countryCode"
:label="item.countryCode"
:value="item.countryCode">
<span style="float: left">{{ item.countryNameCn }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.countryCode }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!--分单信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content" v-if="dialogStatus === 'update'">
<span>航班信息</span>
<el-button type="primary" v-on:click="addFen('ruleForm')" size="mini">新增分单</el-button>
</div>
<div class="grid-content content" v-else>
<span>航班信息</span>
<el-button type="primary" disabled="" @click="innerVisible = true" size="mini">新增分单</el-button>
</div>
</el-col>
</el-row>
<!--分单列表-->
<el-row>
<el-col :span="24">
<template>
<el-table
:data="tableData2"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column
prop="awbh"
label="分单号"
width="150">
</el-table-column>
<el-table-column
prop="pcs"
label="件数"
width="120">
</el-table-column>
<el-table-column
prop="wei"
label="重量"
width="120">
</el-table-column>
<el-table-column
prop="piece"
label="舱单件数"
width="120">
</el-table-column>
<el-table-column
prop="weight"
label="舱单重量"
width="120">
</el-table-column>
<el-table-column
prop="goodsname"
label="货物名称"
width="300">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="130">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">编辑
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
</el-form>
</el-dialog>
<!--footer部分-->
<el-row style="margin-top: 20px">
<el-col :span="2.5" class="pub">
<div class="grid-content">
<el-button type="primary" size="mini" v-on:click="addOrig()">新增原始舱单</el-button>
</div>
</el-col>
<el-col :span="2.5" class="pub">
<div class="grid-content">
<el-button type="primary" size="mini" :disabled="batich" @click="batchdel()">批量发送删除报</el-button>
</div>
</el-col>
<el-col :span="2.5" class="pub">
<div class="grid-content">
<el-button type="primary" size="mini" :disabled="batich" @click="batchaplly()">批量申请</el-button>
</div>
</el-col>
<el-col :span="1.5" class="pub">
<div class="grid-content">
<el-button type="primary" @click="back" size="mini">返回</el-button>
</div>
</el-col>
<el-col :span="2.5" class="pub">
<div class="grid-content"><span>主单数：{{sumNmmsCount}}</span></div>
</el-col>
<el-col :span="3.5" class="pub">
<div class="grid-content"><span>舱单总件数：{{sumNmmsPrice}}</span></div>
</el-col>
<el-col :span="7.5" class="pub">
<div class="grid-content"><span>舱单总重量：{{sumNmmsWeight}}</span></div>
</el-col>
</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-row>
<el-dialog :title="'提交'+Reason[udStatus]+'信息'" :visible.sync="dialogFormVisible">
<el-form :model="Udform" :rules="udrules" ref="Udform" class="demo-ruleForm">
<el-row style="margin: 10px auto">
<el-col :span="22">
<el-form-item label="" prop="operreason">
<div class="ip">
操作原因
</div>
<el-input autosize type="textarea" v-model="Udform.operreason" style="width: 80%">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11" style="margin-right: 10px">
<el-form-item label="" prop="operperson">
<el-input v-model="Udform.operperson" style="width: 200px">
<template slot="prepend">操作人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" prop="opertel">
<el-input v-model="Udform.opertel" style="width: 250px">
<template slot="prepend">联系电话</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="margin-top: 30px" align="center">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="udStatus==='delete'?deleteUdForm('Udform'):updateUdForm('Udform')">确 定</el-button>
</div>
</el-dialog>
</el-row>
<!--明细列表弹出框-->
<el-row>
<el-dialog title="回执明细列表" :visible.sync="dialogTableVisible" width="70%">
<el-table :data="gridData" style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column property="busdate" label="时间" width="160"></el-table-column>
<el-table-column property="operusername" label="操作人" width="130"></el-table-column>
<el-table-column property="buspiece" label="发送件数" width="130"></el-table-column>
<el-table-column property="busweight" label="发送重量" width="130"></el-table-column>
<el-table-column property="cusrestext" label="回执内容"></el-table-column>
</el-table>
</el-dialog>
</el-row>
</el-main>
</el-container>
</template>
<!--自定义CSS样式-->
<style scoped>
.ip{
max-width: 100px;
margin-right: -4px;
display: inline-block;
background-color: #6F8294;
color: #ffffff;
border: 1px solid #DCDFE6;
vertical-align: middle;
padding: 0 18px;
white-space: nowrap;
border-top-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0px;
font-size: 10px;
}
.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, .co {
background-color: white;
}
span {
font-weight: bold;
margin-right: 35px;
}
.el-table td, .el-table th {
text-align: center
}
.el-form-item {
margin-bottom: 2px;
}
.flightInfo {
margin-bottom: 0px
}
.el-dialog__body {
padding: 10px 20px;
}
.el-col {
margin-right: 0px
}
.product {
margin-bottom: 5px;
}
.pub {
margin-right: 10px;
}
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
import { getMt1201List,addMt1201,ediMt1201,getFenList,getCountryCode,selectCustomcode,sendCreateMt1201,sendEditeMt1201,sendRemoveMt1201,sendBatchDelMt1201,sendBatchApllyMt1201 } from '../../api/mt1201'
import{addResponse,selectResponseList} from "../../api/InResponse";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import htmlToPdf from "../../api/htmlToPdf";
import loginUserInfo from '@/api/base.js'
import {mapActions, mapGetters} from 'vuex'
import {loginedUserInfo} from "../../api/user";
import jsutil from "@/common/js/util";
export default {
name:'Origmasters',
data() {
/*初始数据*/
return {
isExpansion:true,
defaultQuery:{
flightno: undefined,
flightdate: undefined,
originstation: undefined,
destinationstation: undefined,
awba: undefined
},
LoginUserInfo: loginedUserInfo(),
FenQuery:{
flightno: undefined,
flightdate: undefined,
originstation: undefined,
destinationstation: undefined,
awba: undefined
},
tableData: [],
tableData2: [],
multipleSelection: [],
outerVisible: false,
innerVisible: false,
dialogStatus:'',
textMap:{
update: '编辑',
create: '添加'
},
Reason:{
update: '修改',
delete: '删除'
},
ruleForm: {
awba: undefined,
awbh: undefined,
passage: undefined,
customcode: undefined,
flightno: undefined,
flightdate: undefined,
originstation: undefined,
destinationstation: undefined,
piece: undefined,
weight: undefined,
goodsname: undefined,
splitcode: 'T',
isDelete:0,
uldType: undefined,
uldNo: undefined,
status: '22',
awbinfo: {
specopeid: undefined,
shprname: undefined,
shprmobiletype: undefined,
shprtel: undefined,
shpraddress: undefined,
shprcountyr: undefined,
shpcomidpre: undefined,
shpcomidpno: undefined,
cnsnname: undefined,
cnsrmobiletype: undefined,
cnsntel: undefined,
cnsnaddress: undefined,
cnscountyr: undefined,
cnscomidpre: undefined,
cnscomidno: undefined,
cnsrctcname: undefined,
cnsrctctel: undefined,
cargonm: undefined,
sairportid: '',
dest1city: undefined,
by1: undefined,
dest1: undefined,
by2: undefined,
dest2: undefined,
by3: undefined,
dest3: undefined,
eairportid: undefined,
csgcustomerid: undefined,
paymodel: 'PP',
pcs: undefined,
weight: undefined,
awbtype:'001',
},
userinfo: {
username: loginedUserInfo().username
},
waybill:undefined,
customText:undefined
},
paymodel:[{value:'PP',label:'预付'},{value:'CC',label:'到付'}],
customext5: [
{value:'001',label:'普通货物'},
{value:'002',label:'国际转运货物'},
{value:'003',label:'国内转关'},
{value:'004',label:'空箱'},
{value:'005',label:'快件'}],
customcodes:[],
customcode:'',
rules: {
waybill: [{required: true, message: '请输入运单号', trigger: 'blur'}],
flightno: [{required: true, message: '航班号必须输入', trigger: 'blur'}],
flightdate: [{required: true, message: '航班日期必须选择', trigger: 'blur'}],
originstation: [{required: true, message: '航段必须输入', trigger: 'blur'}],
splitcode: [{required: true, message: '必须选择', trigger: 'blur'}],
piece: [{required: true, message: '舱单件数必须输入且为数字', trigger: 'blur'}],
weight: [{required: true, message: '舱单重量必须输入且为数字', trigger: 'blur'}],
'awbinfo.sairportid': [{required: false, message: '起始站必须输入', trigger: 'blur'}],
'awbinfo.eairportid': [{required: true, message: '目的站必须输入', trigger: 'blur'}],
'awbinfo.by1': [{required: true, message: '第一承运人必须输入', trigger: 'blur'}],
'awbinfo.dest1': [{required: true, message: '第一到达站人必须输入', trigger: 'blur'}],
'awbinfo.pcs': [{required: true, message: '总件数必须输入且为数字', trigger: 'blur'}],
'awbinfo.weight': [{required: true, message: '总重量必须输入且为数字', trigger: 'blur'}],
'awbinfo.shprname': [{required: true, message: '发货人不能为空', trigger: 'blur'}],
'awbinfo.shprtel': [{required: true, message: '发货电话不能为空', trigger: 'blur'}],
'awbinfo.shpraddress': [{required: true, message: '发货地址不能为空', trigger: 'blur'}],
'awbinfo.shprcountyr': [{required: true, message: '国家代码不能为空', trigger: 'change'}],
'awbinfo.cnsnname': [{required: true, message: '收货人不能为空', trigger: 'blur'}],
'awbinfo.cnsntel': [{required: true, message: '收货电话不能为空', trigger: 'blur'}],
'awbinfo.cnsnaddress': [{required: true, message: '收获地址不能为空', trigger: 'blur'}],
'awbinfo.cnscountyr': [{required: true, message: '国家代码不能为空', trigger: 'change'}],
'awbinfo.paymodel':[{required: true, message: '付费方式必须选择', trigger: 'change'}],
'awbinfo.awbtype':[{required: true, message: '海关状态必须选择', trigger: 'change'}],
customcode:[{required: true, message: '海关关区必须选择', trigger: 'change'}],
goodsname:[{required: true, message: '货物描述必须填写', trigger: 'blur'}]
},
labelPosition: 'left',
splitcodes: [{value:'T',label:'否'},{value:'P',label:'是'}],
shprcountyrs:[],
cnscountyrs:[],
countryCode:'',
msg:'',
code:'',
centerDialogVisible:false,
FenStatus:'',
sumNmmsCount:0,
sumNmmsPrice:0,
sumNmmsWeight:0,
dialogFormVisible: false,
formLabelWidth: '100px',
Udform:{
operreason:'',
operperson:'',
opertel:'',
flightdate:'',
flightno:'',
carrier:'',
awbano:'',
awbhno:'',
bustype:'',
busdate:'',
busweight:'',
buspiece:'',
opertype:'',
cusrestext:''
},
udrules:{
operreason: [{required: true, message: '请输入操作原因', trigger: 'blur'}],
operperson: [{required: true, message: '请输入操作人', trigger: 'blur'}],
opertel: [{required: true, message: '请输入操作人联系电话', trigger: 'blur'}],
},
udStatus:'',
loading:false,
temprows:{},
dialogTableVisible:false,
gridData:[],
tableloading:false,
htmlTitle:'',
batich:true,
batichboolean:false,
uuids:[],
}
},
methods: {
toggleRowExpansion() {
this.isExpansion = !this.isExpansion;
this.toggleRowExpansionAll(this.tableData, this.isExpansion);
},
toggleRowExpansionAll(data, isExpansion) {
data.forEach((item) => {
this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
if (item.children !== undefined && item.children !== null) {
this.toggleRowExpansionAll(item.children, isExpansion);
}
});
},
//导出PDF,EXCEL文件
handleCommand(command) {
if(command=='EXCEL'){
this.$message('正在为您下载' + command+'文件');
this.downLoad();
}else{
this.htmlTitle=this.defaultQuery.flightno+this.defaultQuery.flightdate;
htmlToPdf.downloadPDF(document.querySelector('#pdfDom'), this.htmlTitle)
this.$message('正在为您下载' + command+'文件');
//this.getPdf();
}
},
downLoad(){
var wb = XLSX.utils.table_to_book(document.querySelector(".table"));
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
this.defaultQuery.flightno+this.defaultQuery.flightdate+ ".xlsx" // name+'.xlsx'表示导出的excel表格名字
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
//回执收发明细
handleDetail(index,row){
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2);
}
let params={awbano:row.awba,awbhno:row.awbh,carrier:row.carrier,flightno:row.flightno,flightdate:row.flightdate,bustype:'MT1201'}
selectResponseList(params).then(res=>{
this.dialogTableVisible=true;
let response=res.data.data;
this.gridData=response;
console.log(response)
});
},
//更改状态
UpdateStatus(column,row){
this.$confirm("是否发送更改状态", "确认消息", {
distinguishCancelAndClose: true,
confirmButtonText: '确认更改',
cancelButtonText: '取消更改'
}).then(() => {
row.status = '22';
}).catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? '取消状态更改'
: '状态更改取消'
})
})
},
//状态识别
formatStatus: function(row,column){
return row.status=='01'?'接受申报':row.status=='02'?'待人工审核':row.status=='03'?'退单'
:row.status=='11'?'放行':row.status=='12'?'拒装':row.status=='13'?'禁卸'
:row.status=='21'?'可自动发送':row.status=='22'?'未发送':row.status=='23'?'已发送新增报'
:row.status=='24'?'已发送删除报':row.status=='25'?'已发送修改报':'';
},
//发送舱单报按钮,删除，修改判定事件
btSendStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
btEditStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
btDeleStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
/*多选框功能批量选择*/
handleSelectionChange(val) {
this.multipleSelection = val;
if(this.multipleSelection!=null && this.multipleSelection!=""){
this.batich=false;
}else{
this.batich=true;
}
},
//批量删除
batchdel(){
let ids=[];
this.multipleSelection.forEach(function (item) {
ids.push(item.uuid);
})
this.uuids=ids;
this.udStatus='delete';
this.dialogFormVisible=true;
this.batichboolean=true;
},
//批量申请
batchaplly(){
let ids=[];
this.multipleSelection.forEach(function (item) {
ids.push(item.uuid);
})
sendBatchApllyMt1201(ids).then(res=>{
let response=res.data;
this.code=response.code;
if(this.code=='200'){
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
},
/*编辑主单信息*/
handleEdit(index, row){
this.outerVisible = true;
this.dialogStatus='update';
this.FenStatus='ediAwbh';
this.ruleForm=row;
this.ruleForm.originstation=this.defaultQuery.originstation+"-"+this.defaultQuery.destinationstation;
this.ruleForm.flightno=this.defaultQuery.flightno;
this.FenQuery.awba=row.awba;
this.FenQuery.flightno= row.flightno;
this.FenQuery.flightdate=row.flightdate
this.FenQuery.originstation=this.defaultQuery.originstation;
this.FenQuery.destinationstation=row.destinationstation;
this.getFenList(this.FenQuery);
// this.$nextTick(function () {
// this.$refs.formName.resetFields();
// });
},
/*编辑分单信息*/
handleFen(index,row){
this.outerVisible = true;
this.dialogStatus='update';
this.FenStatus='addAwbh';
this.ruleForm=row;
this.ruleForm.flightno=row.carrier+row.flightno;
this.ruleForm.originstation=row.originstation+"-"+row.destinationstation;
},
//发送舱单报
handleSend(index,row){
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2)
}else{
row.flightno=row.flightno;
}
const map = {'mt1201':row,'username':loginedUserInfo().username}
sendCreateMt1201(map).then(res=>{
let response=res.data;
//console.log(res);
this.code=response.code;
if(this.code=='200'){
row.status='23'
row.customText='舱单报发送成功';
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
},
//发送舱单删除报
handleDelete(index,row){
this.udStatus='delete';
this.dialogFormVisible=true;
this.Udform.awbano=row.awba;
this.Udform.awbhno=row.awbh;
this.Udform.carrier=row.carrier;
this.Udform.flightno=row.flightno.substring(2);
this.Udform.flightdate=row.flightdate;
this.Udform.bustype='MT1201';
this.Udform.busdate=Date.parse(new Date());
this.Udform.busweight=row.weight;
this.Udform.buspiece=row.piece;
this.Udform.opertype='发送舱单删除报';
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2);
}
this.temprows= row;
this.batichboolean=false;
},
//提交发送舱单删除报表单
deleteUdForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.batichboolean){
let arr={ids:this.uuids,reason:this.Udform.operreason,contactName:loginedUserInfo().username,contactTel:this.Udform.opertel,content:''}
sendBatchDelMt1201(arr).then(res=>{
let response=res.data;
this.code=response.code;
if(this.code=='200'){
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
}else{
const map = {'flightNo':this.temprows.flightno,
'flightDate':this.temprows.flightdate,
'awba':this.temprows.awba,
'content':'',
'customCode':this.temprows.customcode,
'awbh':this.temprows.awbh,
'reason' :this.Udform.operreason,
'contactName':this.Udform.operperson,
'contactTel':this.Udform.opertel,
'carrier':this.Udform.carrier,
'username':loginedUserInfo().username}
sendRemoveMt1201(map).then(res=>{
let response=res.data;
//console.log(res);
this.code=response.code;
if(this.code=='200'){
this.temprows.status='24';
this.temprows.customText='舱单删除报发送成功';
this.dialogFormVisible=false;
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.dialogFormVisible=false;
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
}
} else {
console.log('error submit!!');
return false;
}
});
},
/*发送舱单修改报*/
handleUpdate(index,row){
this.udStatus='update';
this.dialogFormVisible=true;
this.Udform.awbano=row.awba;
this.Udform.awbhno=row.awbh;
this.Udform.carrier=row.carrier;
this.Udform.flightno=row.flightno.substring(2);
this.Udform.flightdate=row.flightdate;
this.Udform.bustype='MT1201';
this.Udform.busdate=Date.parse(new Date());
this.Udform.busweight=row.weight;
this.Udform.buspiece=row.piece;
this.Udform.opertype='发送舱单修改报';
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2);
}else{
row.flightno=row.flightno;
}
this.temprows=row;
},
//提交发送舱单修改报表单
updateUdForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
const map = {'mt1201':this.temprows,
'reason' :this.Udform.operreason,
'contactName':this.Udform.operperson,
'contactTel':this.Udform.opertel,
'username':loginedUserInfo().username}
sendEditeMt1201(map).then(res=>{
let response=res.data;
//console.log(res);
this.code=response.code;
if(this.code=='200'){
this.temprows.status='25'
this.temprows.customText='舱单修改报发送成功';
this.dialogFormVisible=false;
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.dialogFormVisible=false;
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
/*编辑分单列表信息*/
handleClick(row) {
this.outerVisible = true;
this.dialogStatus='update';
this.FenStatus='addAwbh';
this.ruleForm=row;
this.ruleForm.flightno=row.carrier+row.flightno;
this.ruleForm.originstation=row.originstation+"-"+row.destinationstation;
},
/*获取默认值*/
getDefaultData(){
if(
jsutil.checkNull(this.$route.query)
&& jsutil.checkNull(this.$route.query.flightno)
&& jsutil.checkNull(this.$route.query.flightdate)
&& jsutil.checkNull(this.$route.query.originstation)
&& jsutil.checkNull(this.$route.query.destinationstation)
) {
this.defaultQuery.flightno =this.$route.query.flightno;
this.defaultQuery.flightdate = this.$route.query.flightdate;
this.defaultQuery.originstation = this.$route.query.originstation;
this.defaultQuery.destinationstation = this.$route.query.destinationstation;
this.defaultQuery.awba = this.$route.query.awba;
this.getList();
}else {
this.$router.push({
path:'/enters'
})
}
},
/*获取默认数据列表*/
getList(){
let _this = this;
this.tableloading=true;
getMt1201List(this.defaultQuery).then(res =>{
this.sumNmmsCount=0;
this.sumNmmsPrice=0;
this.sumNmmsWeight=0;
let response=res.data.data;
this.tableData=response;
this.tableloading=false;
response.forEach((item,i) => {
if(item.awba!=null&&item.awbh=="");
this.sumNmmsCount=Number(this.sumNmmsCount)+1;
this.sumNmmsPrice=Number(this.sumNmmsPrice)+Number(item.piece);
this.sumNmmsWeight=Number(Number(this.sumNmmsWeight)+Number(item.weight)).toFixed(2);
})
}).catch(error => {
_this.tableloading=false;
_this.$message({
// 饿了么的消息弹窗组件
message: error,
type: "error"
});
});
},
/*获取国家代码*/
remoteMethod:function(query){
this.shprcountyrs=[];
this.cnscountyrs=[];
let params={countryCode:query};
this.loading = true;
getCountryCode(params).then(res =>{
if (res !== '') {
setTimeout(() => {
this.loading = false;
this.shprcountyrs=res.data.data;
this.cnscountyrs=res.data.data;
}, 200);
} else {
this.shprcountyrs = [];
this.cnscountyrs=[];
}
});
},
//获取关区代码
remoteMethod2:function(query){
this.customcodes=[];
let params={customcode:query};
this.loading = true;
selectCustomcode(params).then(res =>{
if (res !== '') {
setTimeout(() => {
this.loading = false;
this.customcodes=res.data.data;
}, 200);
} else {
this.customcodes = [];
}
});
},
//新增原始舱单按钮
addOrig(){
this.dialogStatus="create";
this.outerVisible = true;
this.FenStatus='ediAwbh';
this.ruleForm.flightno=this.$route.query.flightno;
this.ruleForm.flightdate=this.$route.query.flightdate;
this.ruleForm.originstation=this.$route.query.originstation+"-"+this.$route.query.destinationstation;
},
//新增原始分单
addFen(formName){
this.dialogStatus="create";
this.outerVisible = true;
this.FenStatus='addAwbh';
},
//新增原始舱单数据
createData:function(formName){
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
_this.ruleForm.userinfo = {
username: ''
}
_this.ruleForm.userinfo.username=loginedUserInfo().username;
_this.ruleForm.status='22';
addMt1201(_this.ruleForm).then(res=>{
let response=res.data;
_this.code=response.code;
if(_this.code=='200'){
_this.outerVisible = false;
_this.$refs[formName].resetFields();
_this.centerDialogVisible=true;
_this.msg=response.msg;
_this.getList();
}else{
_this.outerVisible = false;
_this.centerDialogVisible=true;
_this.$refs[formName].resetFields();
_this.msg=response.msg;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
//修改原始舱单数据
updateData: function(formName){
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
_this.ruleForm.userinfo = {
username: ''
}
_this.ruleForm.userinfo.username=loginedUserInfo().username;
ediMt1201(_this.ruleForm).then(res=>{
let response=res.data;
//console.log(res);
_this.code=response.code;
if(_this.code=='200'){
_this.outerVisible = false;
_this.centerDialogVisible=true;
_this.msg=response.msg;
_this.getList();
}else{
_this.outerVisible = false;
_this.centerDialogVisible=true;
_this.msg=response.msg;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
//获取分单列表
getFenList(data){
getFenList(data).then(res =>{
//console.log(res);
let response=res.data.data;
this.tableData2=response;
});
},
//分拨申请
Importallocation(index,row){
this.$router.push({name:'进港分拨',params:{carrier:row.carrier,flightno:row.flightno,awba:row.awba,flightdate:row.flightdate,
turnpiece:row.awbinfo.pcs,turnweight:row.awbinfo.weight,customcode:row.customcode}});
},
//分拨运抵
Allocatearrive(index,row){
this.$router.push({name:'分拨运抵',params:{carrier:row.carrier,flightno:row.flightno,awba:row.awba,flightdate:row.flightdate,
turnpiece:row.awbinfo.pcs,turnweight:row.awbinfo.weight,customcode:row.customcode,goodsname:row.goodsname}});
},
//返回上一层
back(){
this.$router.go(-1);
},
},
computed:{
...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
/*渲染方法*/
activated(){
this.getDefaultData();
this.isExpansion=true;
}
}
</script>
... ...
<template>
<el-container>
<el-main style="background-color: white">
<!--航班信息部分-->
<el-row class="row-bg">
<el-col :span="24"><div class="grid-content content">航班信息</div></el-col>
<el-col :span="24">
<div class="grid-content co">
<el-col :span="1"><div class="grid-content"></div></el-col>
<el-col :span="20">
<div class="grid-content">
<span>航班号：{{defaultQuery.flightno}}</span>
<span>航班日期：{{defaultQuery.flightdate}}</span>
<span>航段：{{defaultQuery.originstation}}-{{defaultQuery.destinationstation}}</span>
</div>
</el-col>
</div>
</el-col>
<el-col :span="24"><div class="grid-content content">进港理货查询</div></el-col>
<el-col :span="24">
<div class="grid-content co" >
<el-col :span="1"><div class="grid-content"></div></el-col>
<el-col :span="22">
<div class="grid-content">
<el-col :span="9">
<div class="grid-content">
<el-input v-model="defaultQuery.awba" placeholder="请输入主单号" style="width: 250px">
<template slot="prepend">主单号</template>
</el-input>
</div>
</el-col>
<el-col :span="2"><div class="grid-content"><el-button type="primary" v-on:click="getMt5201List" size="mini">查询</el-button></div></el-col>
</div>
</el-col>
</div>
</el-col>
<el-col :span="24"><div class="grid-content content" style="margin-top: 6px">进港理货单明细</div></el-col>
</el-row>
<!--进港理货列表-->
<el-row>
<el-col :span="24">
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
v-loading="tableLoading"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange"
row-key="uuid"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
type="selection"
width="50">
</el-table-column>
<el-table-column
label="运单号"
width="185"
show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.awbh==''||scope.row.awbh==null">
{{scope.row.awba}}
</span>
<span v-else>
{{scope.row.awbh}}
</span>
</template>
</el-table-column>
<el-table-column
prop="totalpiece"
label="舱单件数"
width="80"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="totalweight"
label="舱单重量"
width="80"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="piece"
label="理货件数"
width="80"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="weight"
label="理货重量"
width="80"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="starttime"
label="卸货时间"
type="date"
width="160">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="100" :formatter="formatStatus">
</el-table-column>
<el-table-column
label="回执内容"
width="250">
<template slot-scope="scope">
<span v-if="scope.row.ext5 && scope.row.ext5.indexOf('异常') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不通过') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不接受') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='01' || scope.row.status=='11'" style="color: #67C23A">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='02' || scope.row.status=='03'" style="color: #E6A23C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='12' || scope.row.status=='13'" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else style="color: #909399;">
{{scope.row.ext5}}
</span>
</template>
</el-table-column>
<el-table-column
prop="operation"
label="操作"
width="285"
show-overflow-tooltip>
<template slot-scope="scope">
<el-row type="flex" justify="space-between">
<el-button
size="mini"
type="info"
@click="handleDetail(scope.$index, scope.row)">收发明细</el-button>
<el-button
v-if="scope.row.awbh==''||scope.row.awbh==null"
size="mini"
type="success"
@click="handleMain(scope.$index, scope.row)">编辑主单</el-button>
<el-button
v-else
size="mini"
type="success"
@click="handleFen(scope.$index, scope.row)">编辑分单
</el-button>
</el-row>
<el-row type="flex" justify="space-between">
<el-button
size="mini"
type="primary"
:disabled="btSendStatusFormater(scope.row.status)"
@click="handleCreate(scope.$index, scope.row)">发理货报</el-button>
<el-button
size="mini"
type="danger"
:disabled="btDeleStatusFormater(scope.row.status)"
@click="handleDelete(scope.$index, scope.row)">发删除报</el-button>
<el-button
size="mini"
type="warning"
@click="UpdateStatus(scope.$index, scope.row)">更改状态
</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
<!--编辑主单-->
<el-dialog :title="'进港理货信息'+textMap[dialogStatus]" :visible.sync="outerVisible" width="90%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="labelPosition"
label-width="78px" size="mini">
<!--航班信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content" style="margin-bottom: 10px;">航班信息</div>
</el-col>
<el-row class="flightInfo">
<el-col :span="6">
<el-form-item label="" prop="awba">
<div v-if="dialogStatus === 'update'">
<el-input disabled="" v-model="ruleForm.awba" style="width: 200px">
<template slot="prepend">运单号</template>
</el-input>
</div>
<div v-else>
<el-input v-model="ruleForm.awba" style="width: 200px">
<template slot="prepend">运单号</template>
</el-input>
</div>
</el-form-item>
</el-col>
<el-col :span="4" style="margin-right: -15px">
<div v-if="FenStatus === 'addAwbh'">
<el-form-item label="" prop="awbh">
<el-input v-model="ruleForm.awbh" style="width: 200px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</div>
<div v-else>
<el-form-item style="display: none" label="" prop="awbh">
<el-input v-model="ruleForm.awbh" style="width: 200px">
<template slot="prepend">分单号</template>
</el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="flightno">
<el-input disabled="" v-model="ruleForm.flightno" style="width: 200px">
<template slot="prepend">航班号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item label="" required prop="flightdate">
<div class="ip">
航班日期 </div>
<el-date-picker disabled="" type="date" placeholder="选择日期" :clearable="false"
v-model="ruleForm.flightdate"
style="width: 120px;"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row class="flightInfo">
<el-col :span="6">
<el-form-item label="" prop="originstation">
<el-input style="width: 200px" disabled="" v-model="ruleForm.originstation" onkeyup="this.value=this.value.toUpperCase()">
<template slot="prepend">起始站</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="" prop="destinationstation">
<el-input style="width: 200px" disabled="" v-model="ruleForm.destinationstation" onkeyup="this.value=this.value.toUpperCase()">
<template slot="prepend">目的站</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-button size="mini" type="primary" @click="dialogStatus==='create'?createData('ruleForm'):updateData('ruleForm')" style="float: right">保存</el-button>
</el-col>
</el-row>
</el-row>
<!--货物信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content">货物信息</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 0px;">
<el-row class="product">
<el-col :span="6">
<el-form-item label="" prop="pcs">
<el-input type="number" v-model="ruleForm.pcs" style="width: 200px">
<template slot="prepend">舱单件数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="wei">
<el-input type="number" v-model="ruleForm.wei" style="width: 200px">
<template slot="prepend">舱单重量</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="piece">
<el-input type="number" v-model="ruleForm.piece" style="width: 200px">
<template slot="prepend">理货件数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="weight">
<el-input type="number" v-model="ruleForm.weight" style="width: 200px">
<template slot="prepend">理货重量</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-row>
<el-row class="flightInfo">
<el-col :span="7">
<el-form-item label="" prop="customcode">
<div class="ip">
海关关区
</div>
<el-select v-model="ruleForm.customcode"
filterable
allow-create
default-first-option
remote
:remote-method="remoteMethod2"
:loading="loading" placeholder="请选择" style="width: 115px">
<el-option
v-for="item in customcodes"
:key="item.customcode"
:label="item.customcode"
:value="item.customcode">
<span style="float: left">{{ item.customcode }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.customname }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" style="margin-left: -45px">
<el-form-item label="" required>
<el-form-item prop="starttime">
<div class="ip">
卸货时间
</div>
<el-date-picker type="datetime" placeholder="选择日期" :clearable="false" value-format="yyyy-MM-dd HH:mm:ss"
v-model="ruleForm.starttime"
style="width: 200px;"></el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<!--分单信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<div class="grid-content content" v-if="dialogStatus === 'update'">
<span>分单信息</span>
<el-button type="primary" v-on:click="addFen('ruleForm')" size="mini">新增分单</el-button>
</div>
<div class="grid-content content" v-else>
<span>分单信息</span>
<el-button type="primary" disabled="" @click="innerVisible = true" size="mini">新增分单</el-button>
</div>
</el-col>
</el-row>
<!--分单列表-->
<el-row>
<el-col :span="24">
<template>
<el-table
:data="tableData2"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column
prop="awbh"
label="分单号"
width="250">
</el-table-column>
<el-table-column
prop="piece"
label="舱单件数"
width="200">
</el-table-column>
<el-table-column
prop="weight"
label="舱单重量"
width="200">
</el-table-column>
<el-table-column
prop="goodsname"
label="卸货时间"
width="250">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="230">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">编辑
</el-button>
<el-button @click="handleClick(scope.row)" type="text" size="small">删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
</el-form>
</el-dialog>
<!--底部按钮及理货信息-->
<el-row style="margin-top: 20px">
<el-col :span="2.5"><div class="grid-content"><el-button type="primary" v-on:click="addTally" size="mini">新增进港理货</el-button></div></el-col>
<el-col :span="2.5"><div class="grid-content"><el-button type="primary" size="mini" :disabled="batich" @click="batchdel()">批量发送删除报</el-button></div></el-col>
<el-col :span="2.5"><div class="grid-content"><el-button type="primary" size="mini" :disabled="batich" @click="batchaplly()">批量申请</el-button></div></el-col>
<el-col :span="1.5"><div class="grid-content"><el-button type="primary" @click="back" size="mini">返回</el-button></div></el-col>
<el-col :span="2.5"><div class="grid-content"><span>主单数：{{sumNmmsCount}}</span></div></el-col>
<el-col :span="3.5"><div class="grid-content"><span>理货总件数：{{sumNmmsPrice}}</span></div></el-col>
<el-col :span="7.5"><div class="grid-content"><span>理货总重量：{{sumNmmsWeight}}</span></div></el-col>
</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-row>
<el-dialog :title="'提交'+Reason[udStatus]+'信息'" :visible.sync="dialogFormVisible">
<el-form :model="Udform" :rules="udrules" ref="Udform" class="demo-ruleForm">
<!-- <el-form-item label="操作原因" prop="operreason">-->
<!-- <el-input type="textarea" v-model="Udform.operreason"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="操作人" prop="operperson">-->
<!-- <el-input v-model="Udform.operperson"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="联系电话" prop="opertel">-->
<!-- <el-input v-model="Udform.opertel"></el-input>-->
<!-- </el-form-item>-->
<el-row style="margin: 10px auto">
<el-col :span="22">
<el-form-item label="" prop="operreason">
<div class="ip">
操作原因
</div>
<el-input autosize type="textarea" v-model="Udform.operreason" style="width: 80%">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11" style="margin-right: 10px">
<el-form-item label="" prop="operperson">
<el-input v-model="Udform.operperson" style="width: 200px">
<template slot="prepend">操作人</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="" prop="opertel">
<el-input v-model="Udform.opertel" style="width: 250px">
<template slot="prepend">联系电话</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" style="margin-top: 30px" align="center">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteUdForm('Udform')">确 定</el-button>
</div>
</el-dialog>
</el-row>
<!--明细列表弹出框-->
<el-row>
<el-dialog title="回执明细列表" :visible.sync="dialogTableVisible" width="70%">
<el-table :data="gridData" style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column property="busdate" label="时间" width="160"></el-table-column>
<el-table-column property="username" label="操作人" width="130"></el-table-column>
<el-table-column property="buspiece" label="发送件数" width="100"></el-table-column>
<el-table-column property="busweight" label="发送重量" width="100"></el-table-column>
<el-table-column property="cusrestext" label="回执内容"></el-table-column>
</el-table>
</el-dialog>
</el-row>
</el-main>
</el-container>
</template>
<style scoped>
.ip{
max-width: 100px;
margin-right: -4px;
display: inline-block;
background-color: #6F8294;
color: #ffffff;
border: 1px solid #DCDFE6;
vertical-align: middle;
padding: 0 18px;
white-space: nowrap;
border-top-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0px;
font-size: 10px;
}
.grid-content{height: 36px;line-height: 36px;margin-right: 5px;}
.content{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px}
.row-bg,.co{background-color: white;}
span{font-weight: bold;margin-right: 35px;}
.el-table td,.el-table th{text-align: center}
.flightInfo {
margin-bottom: 0px
}
.el-form-item {
margin-bottom: 2px;
}
.flightInfo {
margin-bottom: 3px
}
.el-dialog__body {
padding: 10px 20px;
}
.el-col {
margin-right: 0px
}
.product {
margin-bottom: 5px;
}
.pub {
margin-right: 10px;
}
</style>
<script>
import{addResponse,selectResponseList} from "../../api/InResponse";
import { getMt5201List,addMt5201,ediMt5201,delMt5201,sendCreateMt520x,sendRemoveMt520x,selectCustomcode,sendbatchRemoveMt5201,sendbatchCreateMt5201} from '../../api/mt5201'
import loginUserInfo from '@/api/base'
import {sendBatchApllyMt1201, sendBatchDelMt1201} from "../../api/mt1201";
import {mapActions, mapGetters} from 'vuex'
import {loginedUserInfo} from "../../api/user";
export default {
name:'Tallymsters',
data() {
return {
defaultQuery:{
flightno:undefined,
flightdate:undefined,
originstation:undefined,
destinationstation:undefined,
awba:undefined,
},
LoginUserInfo: loginUserInfo,
tableData: [],
tableData2: [],
multipleSelection: [],
outerVisible: false,
dialogStatus:'',
labelPosition: 'left',
textMap:{
update: '编辑',
create: '添加'
},
customcodes:[],
ruleForm:{
awba:undefined,
awbh:undefined,
carrier:undefined,
flightno:undefined,
flightdate:undefined,
originstation:undefined,
destinationstation:undefined,
piece:undefined,
weight:undefined,
starttime:undefined,
endtime:undefined,
customcode:undefined,
goodsname:undefined,
actime:undefined,
rcfdep:"MT5201",
status:'22',
isdelete:undefined,
pcs:undefined,
wei:undefined,
ext5:undefined,
userinfo: {
username: loginedUserInfo().username
},
},
FenStatus:'',
rules: {
awba: [{required: true, message: '请输入运单号', trigger: 'blur'}],
flightno: [{required: true, message: '航班号必须输入', trigger: 'blur'}],
flightdate: [{required: true, message: '航班日期必须选择', trigger: 'blur'}],
originstation: [{required: true, message: '航段必须输入', trigger: 'blur'}],
piece: [{required: true, message: '舱单件数必须输入且为数字', trigger: 'blur'}],
weight: [{required: true, message: '舱单重量必须输入且为数字', trigger: 'blur'}],
customcode:[{required: true, message: '海关关区必须选择', trigger: 'change'}],
goodsname:[{required: true, message: '货物描述必须填写', trigger: 'blur'}],
starttime: [{required: true, message: '卸货时间必须选择', trigger: 'blur'}]
},
centerDialogVisible:false,
msg:'',
sumNmmsCount:0,
sumNmmsPrice:0,
sumNmmsWeight:0,
Udform:{
operreason:'',
operperson:'',
opertel:'',
flightdate:'',
flightno:'',
carrier:'',
awbano:'',
awbhno:'',
bustype:'',
busdate:'',
busweight:'',
buspiece:'',
opertype:'',
},
udrules:{
operreason: [{required: true, message: '请输入操作原因', trigger: 'blur'}],
operperson: [{required: true, message: '请输入操作人', trigger: 'blur'}],
opertel: [{required: true, message: '请输入操作人联系电话', trigger: 'blur'}],
},
Reason:{
update: '修改',
delete: '删除'
},
udStatus:'',
dialogFormVisible: false,
rows:{},
loading:false,
dialogTableVisible:false,
gridData:[],
tableLoading:false,
batich:true,
batichboolean:false,
uuids:[],
}
},
methods: {
//更改状态
UpdateStatus(column,row){
this.$confirm("是否发送更改状态", "确认消息", {
distinguishCancelAndClose: true,
confirmButtonText: '确认更改',
cancelButtonText: '取消更改'
}).then(() => {
row.status = '22';
}).catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? '取消状态更改'
: '状态更改取消'
})
})
},
//发送舱单报按钮判定事件
btSendStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
btDeleStatusFormater:(status) => {
if(status=='23' || status=='24'||status=='25'){
return true;
}else if(status=='22' ) {
return false;
}
},
//回执收发明细
handleDetail(index,row){
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2);
}
let params={awbano:row.awba,awbhno:row.awbh,carrier:row.carrier,flightno:row.flightno,flightdate:row.flightdate,bustype:'MT5201'}
selectResponseList(params).then(res=>{
this.dialogTableVisible=true;
let response=res.data.data;
this.gridData=response;
});
},
//状态适配
formatStatus:function (row,column) {
return row.status=='01'?'接受申报':row.status=='02'?'待人工审核':row.status=='03'?'退单'
:row.status=='11'?'放行':row.status=='12'?'拒装':row.status=='13'?'禁卸'
:row.status=='21'?'可自动发送':row.status=='22'?'未发送':row.status=='23'?'已发送新增报'
:row.status=='24'?'已发送删除报':row.status=='25'?'已发送修改报':'';
},
//获取关区代码
remoteMethod2:function(query){
this.customcodes=[];
let params={customcode:query};
this.loading = true;
selectCustomcode(params).then(res =>{
if (res !== '') {
setTimeout(() => {
this.loading = false;
this.customcodes=res.data.data;
}, 200);
} else {
this.customcodes = [];
}
});
},
//发送理货报
handleCreate(index,row){
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2)
}else{
row.flightno=row.flightno;
}
if(row.awbh==null){
row.awbh="";
}
const map = {'mt520x':row,'username':loginedUserInfo().username}
sendCreateMt520x(map).then(res=>{
let response=res.data;
//console.log(res);
this.code=response.code;
if(this.code=='200'){
row.status='23'
row.ext5='理货报发送成功';
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
},
//发送理货删除报
handleDelete(index,row){
this.dialogFormVisible=true;
this.udStatus='delete';
this.Udform.awbano=row.awba;
this.Udform.awbhno=row.awbh;
this.Udform.carrier=row.carrier;
this.Udform.flightno=row.flightno.substring(2);
this.Udform.flightdate=row.flightdate;
this.Udform.bustype='MT5201';
this.Udform.busdate=Date.parse(new Date());
this.Udform.busweight=row.weight;
this.Udform.buspiece=row.piece;
this.Udform.opertype='发送理货删除报';
if(row.flightno.length>4){
row.flightno=row.flightno.substring(2);
}
if(row.awbh==null){
row.awbh="";
}
this.rows=row;
this.batichboolean=false;
},
//发送理化删除报提交表单
deleteUdForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.batichboolean){
let arr={ids:this.uuids,reason:this.Udform.operreason,contactName:loginedUserInfo().username,contactTel:this.Udform.opertel,content:''}
sendbatchRemoveMt5201(arr).then(res=>{
let response=res.data;
this.code=response.code;
if(this.code=='200'){
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
}else{
const map = {'flightNo':this.rows.flightno,
'flightDate':this.rows.flightdate,
'awba':this.rows.awba,
'content':'',
'customCode':this.rows.customcode,
'awbh':this.rows.awbh,
'reason' :this.Udform.operreason,
'contactName':this.Udform.operperson,
'contactTel':this.Udform.opertel,
'rcfdep':this.rows.rcfdep,
'carrier':this.rows.carrier,
'username':loginedUserInfo().username}
sendRemoveMt520x(map).then(res=>{
let response=res.data;
//console.log(res);
this.code=response.code;
if(this.code=='200'){
this.rows.status='24';
this.rows.ext5='理货删除报发送成功';
this.dialogFormVisible=false;
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.dialogFormVisible=false;
this.outerVisible = false;
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
}
} else {
console.log('error submit!!');
return false;
}
});
},
//批量选中事件
handleSelectionChange(val) {
this.multipleSelection = val;
if(this.multipleSelection!=null && this.multipleSelection!=""){
this.batich=false;
}else{
this.batich=true;
}
},
//批量申请
batchaplly(){
let ids=[];
this.multipleSelection.forEach(function (item) {
ids.push(item.uuid);
})
sendbatchCreateMt5201(ids).then(res=>{
let response=res.data;
this.code=response.code;
if(this.code=='200'){
this.centerDialogVisible=true;
this.msg=response.msg;
}else{
this.centerDialogVisible=true;
this.msg=response.msg;
}
});
},
//批量删除
batchdel(){
let ids=[];
this.multipleSelection.forEach(function (item) {
ids.push(item.uuid);
})
this.uuids=ids;
this.udStatus='delete';
this.dialogFormVisible=true;
this.batichboolean=true;
},
//编辑主单
handleMain(index,row){
this.outerVisible = true;
this.dialogStatus='update';
this.FenStatus='ediAwbh';
this.ruleForm=row;
this.ruleForm.flightno=row.carrier+row.flightno;
},
//编辑分单
handleFen(index,row){
this.outerVisible = true;
this.dialogStatus='update';
this.FenStatus='addAwbh';
this.ruleForm=row;
this.ruleForm.flightno=row.carrier+row.flightno;
},
//新增分单
addFen(formName){
this.dialogStatus="create";
this.outerVisible = true;
this.FenStatus='addAwbh';
},
//获取默认值
getDefaultData(){
this.defaultQuery.flightno = JSON.parse(this.$route.query.flightno);
this.defaultQuery.flightdate = JSON.parse(this.$route.query.flightdate);
this.defaultQuery.originstation = JSON.parse(this.$route.query.originstation);
this.defaultQuery.destinationstation = JSON.parse(this.$route.query.destinationstation);
this.defaultQuery.awba=JSON.parse(this.$route.query.awba);
},
//获取进港理货列表
getMt5201List(){
this.tableLoading=true;
getMt5201List(this.defaultQuery).then(res =>{
this.sumNmmsCount=0;
this.sumNmmsPrice=0;
this.sumNmmsWeight=0;
let response=res.data.data;
this.tableData=response;
this.tableLoading=false;
response.forEach((item,i) => {
if(item.awba!=null&&item.awbh=="");
this.sumNmmsCount=Number(this.sumNmmsCount)+1;
this.sumNmmsPrice=Number(this.sumNmmsPrice)+Number(item.piece);
this.sumNmmsWeight=Number(this.sumNmmsWeight)+Number(item.weight);
})
});
},
//新增理货按钮事件
addTally(){
this.outerVisible = true;
this.dialogStatus="create";
this.FenStatus='ediAwbh';
this.ruleForm.flightno=JSON.parse(this.$route.query.flightno);
this.ruleForm.flightdate=JSON.parse(this.$route.query.flightdate);
this.ruleForm.originstation=JSON.parse(this.$route.query.originstation);
this.ruleForm.destinationstation=JSON.parse(this.$route.query.destinationstation);
},
//新增原始舱单数据
createData:function(formName){
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
_this.ruleForm.userinfo = {
username: ''
}
_this.ruleForm.userinfo.username=loginedUserInfo().username;
_this.ruleForm.status='22';
//this.ruleForm.endtime=this.ruleForm.starttime.add(Calendar.MINUTE, 15);
addMt5201(_this.ruleForm).then(res=>{
let response=res.data;
_this.code=response.code;
if(_this.code=='200'){
_this.outerVisible = false;
_this.$refs[formName].resetFields();
_this.centerDialogVisible=true;
_this.msg=response.msg;
_this.getMt5201List();
}else{
_this.outerVisible = false;
_this.centerDialogVisible=true;
_this.$refs[formName].resetFields();
_this.msg=response.msg;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
//修改进港理货数据
updateData:function(formName){
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
_this.ruleForm.userinfo = {
username: ''
}
_this.ruleForm.userinfo.username=loginedUserInfo().username;
ediMt5201(_this.ruleForm).then(res=>{
let response=res.data;
_this.code=response.code;
if(_this.code=='200'){
_this.outerVisible = false;
_this.centerDialogVisible=true;
_this.msg=response.msg;
_this.getMt5201List();
}else{
_this.outerVisible = false;
_this.centerDialogVisible=true;
_this.msg=response.msg;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
back(){
this.$router.go(-1);//返回上一层
},
},
computed:{
...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
//渲染方法
activated(){
this.getDefaultData();
this.getMt5201List();
}
}
</script>
... ...
<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="form" ref="queryFlight"
label-width="130px" class="demo-ruleForm">
<el-col :span="5" >
<el-form-item label="" prop="awba" label-width="70px">
<el-input v-model="form.awba" style="width:250px">
<template slot="prepend">主单号</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8" >
<el-form-item label="" prop="status" label-width="70px">
<!-- <el-input v-model="form.status" style="width:250px">-->
<!-- <template slot="prepend">运单状态</template>-->
<!-- </el-input>-->
<div style="display: inline-block;background-color: #6F8294;color: white;
border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
border-bottom-left-radius:4px;padding-left: 14px">运单状态</div>
<el-select v-model="form.status" style="width:200px">
<el-option label="正常" value="30"></el-option>
<el-option label="未理货" value="31"></el-option>
<el-option label="无原始" value="33"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" >
<el-button type="primary" @click="getList()">查询</el-button>
</el-col>
</el-form>
</el-row>
<!-- 表单区域-->
<el-row>
<el-table
:data="tableData"
border default-expand-all
height="500" tooltip-effect="dark"
v-loading="tableloading"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column
label="主单号"
prop="awba"
width="180">
<template slot-scope="scope">
<span v-if="scope.row.stocktypeid=='AWBA'">
{{scope.row.stockpre}}-{{scope.row.stockno}}
</span>
<span v-else>
{{scope.row.stockpre}}
</span>
</template>
</el-table-column>
<el-table-column
label="分单号"
width="150">
<template slot-scope="scope">
<span v-if="scope.row.stocktypeid=='AWBA'">
</span>
<span v-else>
{{scope.row.stockno}}
</span>
</template>
</el-table-column>
<el-table-column
label="件数"
prop="pcs"
width="120">
</el-table-column>
<el-table-column
label="重量"
prop="weight"
width="120">
</el-table-column>
<el-table-column
label="起始站"
prop="sairportid"
width="120">
</el-table-column>
<el-table-column
label="目的站"
prop="eairportid"
width="120">
</el-table-column>
<el-table-column
label="货物描述"
prop="goodsname">
</el-table-column>
<el-table-column
fixed="right"
prop=""
label="报文操作"
width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="success"
@click="trnList(scope.$index,scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-row>
<el-dialog title="运单明细" :visible.sync="dialogFormVisible" width="65%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="labelPosition" size="mini">
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">运单信息</el-divider>
</el-col>
</el-row>
<el-row class="flightInfo">
<el-col :span="6">
<el-form-item prop="stockpre">
<el-input readonly v-model="ruleForm.stockpre" style="width: 200px">
<template slot="prepend">主单号&emsp;</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stockno">
<el-input readonly v-model="ruleForm.stockno" style="width: 200px">
<template slot="prepend">分单号&emsp;</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="pcs">
<el-input readonly v-model="ruleForm.pcs" style="width: 200px">
<template slot="prepend">件&emsp;&emsp;数</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="weight">
<el-input readonly v-model="ruleForm.weight" style="width: 200px">
<template slot="prepend">重&emsp;&emsp;量</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row class="flightInfo">
<el-col :span="6">
<el-form-item prop="sairportid">
<el-input readonly v-model="ruleForm.sairportid" style="width: 200px">
<template slot="prepend">起始站&emsp;</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="eairportid">
<el-input readonly v-model="ruleForm.eairportid" style="width: 200px">
<template slot="prepend">目的站&emsp;</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="goodsname">
<el-input readonly v-model="ruleForm.goodsname" style="width: 200px">
<template slot="prepend">货物描述</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!--发货人信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">发货人信息</el-divider>
</el-col>
</el-row>
<el-row style="margin-bottom: 0px;">
<el-col :span="6">
<el-form-item label="" prop="shprname">
<el-input readonly v-model="ruleForm.shprname" style="width: 200px">
<template slot="prepend">发货人称</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="shpraddress">
<el-input readonly v-model="ruleForm.shpraddress" style="width: 200px">
<template slot="prepend">地&emsp;&emsp;址</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="shprtel">
<el-input readonly v-model="ruleForm.shprtel" style="width: 200px">
<template slot="prepend">电&emsp;&emsp;话</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="shprcountyr">
<el-input readonly v-model="ruleForm.shprcountyr" style="width: 200px">
<template slot="prepend">国家代码</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<!--收货人信息部分-->
<el-row class="flightInfo">
<el-col :span="24">
<el-divider content-position="left">收货人信息</el-divider>
</el-col>
</el-row>
<el-row style="margin-bottom: 30px">
<el-col :span="6">
<el-form-item label="" prop="cnsnname">
<el-input readonly v-model="ruleForm.cnsnname" style="width: 200px">
<template slot="prepend">收货人称</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="cnsnaddress">
<el-input readonly v-model="ruleForm.cnsnaddress" style="width: 200px">
<template slot="prepend">地&emsp;&emsp;址</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="cnsntel">
<el-input readonly v-model="ruleForm.cnsntel" style="width: 200px">
<template slot="prepend">电&emsp;&emsp;话</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="" prop="cnscountyr">
<el-input readonly v-model="ruleForm.cnscountyr" style="width: 200px">
<template slot="prepend">国家代码</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</el-main>
</el-container>
</template>
<script>
import { selectAwbList } from '../../api/wayDeclaration'
export default {
name: "WaybillQuerys",
data(){
return{
form:{
awba:'',
status:''
},
pageNum:1,
pageSize:100,
total:0,
ruleForm:{
stockpre:'',
stockno:'',
pcs:'',
weight:'',
sairportid:'',
eairportid:'',
goodsname:'',
shprname:'',
shprtel:'',
shprcountyr:'',
shpraddress:'',
cnsnname:'',
cnsnaddress:'',
cnsntel:'',
cnscountyr:'',
},
rules:{
},
dialogFormVisible:false,
tableData:[],
labelPosition:'left',
// pageNum: 1,
// pageSize:10,
// total:0,
tableloading:false,
}
},
methods:{
/*分页方法*/
handleSizeChange(val) {
this.pageSize=val;
this.getList();
},
handleCurrentChange(val) {
this.currentPage=val;
this.getList();
},
// 获取消息标签列表
getList() {
const _this = this
this.tableloading = true;
selectAwbList(this.form).then((response) => {
console.log(response);
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data.list;
// 获取列表的总记录数
// _this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
/*编辑主单信息*/
trnList(index, row){
this.dialogFormVisible = true;
this.ruleForm=row;
if(row.stocktypeid=="AWBA"){
this.ruleForm.stockpre=row.stockpre+"-"+row.stockno;
this.ruleForm.stockno="";
}
},
}
}
</script>
<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>
... ...
<template>
<el-container>
<el-main>
<el-row class="row-bg">
<el-col :span="24"><div class="grid-content content co">进港运单申报</div></el-col>
</el-row>
<!--查询条件-->
<el-row style="display: block;background-color: white">
<el-row>
<el-col :span="6">
<el-input placeholder="" v-model="defaultQuery.awba" style="width: 90%" clearable>
<template slot="prepend">主单号</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input placeholder="" v-model="vcarrier" style="width: 90%" clearable>
<template slot="prepend">承运人</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input placeholder="" v-model="defaultQuery.flightno" style="width: 90%" clearable>
<template slot="prepend">航班号</template>
</el-input>
</el-col>
<el-col :span="6">
<div class="ip">
航班日期
</div>
<el-date-picker
v-model="defaultQuery.flightdate"
type="date"
value-format="yyyy-MM-dd" style="width: 140px"
placeholder="航班日期">
</el-date-picker>
</el-col>
</el-row>
<el-row >
<el-col :span="6">
<div class="ip">
业务状态
</div>
<el-select v-model="defaultQuery.status" placeholder="选择状态" style="width: 125px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<div class="ip">
报文类型
</div>
<el-select v-model="defaultQuery.messageType" placeholder="报文类型" style="width: 125px">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span="6">
<el-col :span="8" style="margin-right: 0px">
<el-button type="primary" v-on:click="QueryData" icon="el-icon-search">查&nbsp;询</el-button>
</el-col>
<!--<el-col :span="16" style="margin-right: 0px">
<el-button type="primary">批量修改状态</el-button>
</el-col>-->
</el-col>
</el-row>
</el-row>
<!--查询结果样式-->
<el-row style="font-size: xx-small">
<el-col :span="1" class="mark"><div class="grid-content bg" style="color: red"><span>注：</span></div></el-col>
<el-col :span="3" class="mark"><div class="grid-content bg mainse" style="border-radius: 5px;margin-right: 5px;background-color: rgba(99,205,218,0.4)" ><span>主单原始舱单</span></div></el-col>
<el-col :span="3" class="mark"><div class="grid-content bg fense" style="border-radius: 5px;margin-right: 5px;background-color: rgba(119,139,235,0.3)"><span>分单原始舱单</span></div></el-col>
<el-col :span="3" class="mark"><div class="grid-content bg tallse" style="border-radius: 5px;margin-right: 5px;background-color: rgba(243,166,131,0.4)"><span>主单理货报告</span></div></el-col>
<el-col :span="3" class="mark"><div class="grid-content bg tallfense" style="border-radius: 5px;margin-right: 5px;background-color: rgba(247,215,148,0.4)"><span>分单理货报告</span></div></el-col>
</el-row>
<!--查询列表-->
<el-row>
<el-col :span="24">
<template>
<el-table
v-loading="tableloading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;min-height: 500px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
:default-sort = "{prop: 'date', order: 'descending'}"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="45">
</el-table-column>
<el-table-column
fixed="left"
label="操作"
width="75">
<template slot-scope="scope">
<el-button
v-if="scope.row.stype=='MT1201'"
@click="handleClick(scope.row)" type="text" size="small">原始舱单</el-button>
<el-button
v-else
@click="handleTally(scope.row)" type="text" size="small">进港理货</el-button>
</template>
</el-table-column>
<el-table-column
label="航班号"
width="75">
<template slot-scope="scope">
<span>{{scope.row.carrier}}{{scope.row.flightno}}</span>
</template>
</el-table-column>
<el-table-column
prop="flightdate"
label="航班日期"
width="95">
</el-table-column>
<el-table-column
label="航段"
width="90">
<template slot-scope="scope">
<span>{{scope.row.originstation}}-{{scope.row.destinationstation}}</span>
</template>
</el-table-column>
<el-table-column
label="主单号"
width="115"
>
<template slot-scope="scope">
<span v-if="scope.row.stype=='MT1201'&&scope.row.awbh==''" style="background-color:rgba(99,205,218,0.4);width: 100%;height:100%;display:block;color: black">
{{scope.row.awba}}
</span>
<span v-else-if="scope.row.stype=='MT1201'&&scope.row.awbh!=''" style="background-color:rgba(119,139,235,0.3);width: 100%;height:100%;display:block;color: black">
{{scope.row.awba}}
</span>
<span v-else-if="scope.row.stype=='MT5201'&&scope.row.awbh==''" style="background-color:rgba(243,166,131,0.4);width: 100%;height:100%;display:block;color: black">
{{scope.row.awba}}
</span>
<span v-else-if="scope.row.stype=='MT5201'&&scope.row.awbh!=''" style="background-color:rgba(247,215,148,0.4);width: 100%;height:100%;display:block;color: black">
{{scope.row.awba}}
</span>
</template>
</el-table-column>
<el-table-column
prop="awbh"
label="分单号"
width="130">
</el-table-column>
<el-table-column
prop="piece"
label="件数"
width="60">
</el-table-column>
<el-table-column
prop="weight"
label="重量"
width="70">
</el-table-column>
<el-table-column
prop="customcode"
label="关区号"
width="65">
</el-table-column>
<el-table-column
prop="actime"
label="时间"
width="155">
<template slot-scope="scope">{{timestampToTime(scope.row.actime)}}</template>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="90" :formatter="formatStatus">
</el-table-column>
<el-table-column
label="回执内容"
width="250">
<template slot-scope="scope">
<span v-if="scope.row.ext5 && scope.row.ext5.indexOf('异常') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不通过') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.ext5 && scope.row.ext5.indexOf('不接受') != -1" style="color: #F56C6C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='01' || scope.row.status=='11'" style="color: #67C23A">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='02' || scope.row.status=='03'" style="color: #E6A23C">
{{scope.row.ext5}}
</span>
<span v-else-if="scope.row.status=='12' || scope.row.status=='13'" style="color: #f56c6c">
{{scope.row.ext5}}
</span>
<span v-else style="color: #909399;">
{{scope.row.ext5}}
</span>
</template>
</el-table-column>
<!-- || scope.row.ext5.indexOf('不通过') != -1 || scope.row.ext5.indexOf('不接受') != -1-->
</el-table>
</template>
</el-col>
</el-row>
<!--分页部分-->
<el-row>
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<style scoped>
.ip{
max-width: 100px;
margin-right: -5px;
display: inline-block;
background-color: #6F8294;
color: #ffffff;
border: 1px solid #DCDFE6;
vertical-align: middle;
padding: 5px 18px;
white-space: nowrap;
border-top-right-radius: 0px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 0px;
font-size: 10px;
}
.co{height: 36px;line-height: 36px;}
.co{border-left: 4px #409EFF solid;padding-left: 10px;background-color: #f9fafc;margin-bottom: 2px}
.row-bg{background-color: white;padding:0px;}
.el-row{margin-bottom: 10px;}
.sel{display: inline;}
.mark{height:24px;}
.bg{height:24px;text-align: center;line-height:24px;min-height: 24px}
.mainse{background: #67C23A}
.fense{background-color: #409eff}
.tallse{background-color: #FF8C00}
.tallfense{background-color: #e6a23c}
.cell{background: #5BB75B}
.cell2{background-color: #12B399}
.el-input-group{
display: table;
}
</style>
<script>
import { QueryData } from '../../api/wayDeclaration'
import {mapActions, mapGetters} from 'vuex'
import {loginedUserInfo} from "../../api/user";
import jsutil from "@/common/js/util";
export default {
name:'Waybills',
data() {
return {
defaultQuery:{
awba:'',
carrier:'',
flightno:'',
flightdate:'',
status:'',
messageType:'',
departmentid:''
},
options: [
{
value: '',
label: '业务状态'
}, {
value: '22',
label: '未发送'
}, {
value: '23',
label: '已发舱单报'
}, {
value: '03',
label: '舱单报退单'
}],
options2: [
{
value: '',
label: '业务类型'
}, {
value: 'MT1201',
label: '原始舱单'
}, {
value: 'MT5201',
label: '进港理货'
}],
tableData: [],
multipleSelection: [],
currentPage:1,
pageSize:20,
total:0,
tableloading:false
}
},
methods:{
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.pageSize=val;
this.QueryData();
},
handleCurrentChange(val) {
this.currentPage=val;
this.QueryData();
},
//状态适配
formatStatus:function (row,column) {
return row.status=='01'?'接受申报':row.status=='02'?'待人工审核':row.status=='03'?'退单'
:row.status=='11'?'放行':row.status=='12'?'拒装':row.status=='13'?'禁卸'
:row.status=='21'?'可自动发送':row.status=='22'?'未发送':row.status=='23'?'已发送新增报'
:row.status=='24'?'已发送删除报':row.status=='25'?'已发送修改报':'';
},
//条件查询方法
QueryData(){
if(jsutil.checkNull(this.defaultQuery.awba)||jsutil.checkNull(this.defaultQuery.flightdate)){
let params={
currentPage:this.currentPage,
pageSize:this.pageSize,
awba:this.defaultQuery.awba,
carrier:this.defaultQuery.carrier,
flightno:this.defaultQuery.flightno,
flightdate:this.defaultQuery.flightdate,
status:this.defaultQuery.status,
messageType:this.defaultQuery.messageType,
departmentid:loginedUserInfo().companyInfo.departmentid
};
this.tableloading=true;
QueryData(params).then(res =>{
let response=res.data.data;
this.tableData=response.list;
this.total=response.total;
this.tableloading = false;
}).catch(err => {
this.tableloading = false;
});
}
else {
this.$confirm('主单号和航班日期至少选填一项！', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
}
},
//点击进入原始页面
handleClick(row){
this.$router.push({path:'/origmaster',
query:{
flightno:row.carrier+row.flightno,
destinationstation:row.destinationstation,
awba:row.awba,
flightdate:row.flightdate,
originstation:row.originstation
}
});
},
//点击进入理货页面
handleTally(row){
this.$router.push({path:'/tallymaster',query:{flightno:JSON.stringify(row.carrier+row.flightno),destinationstation:JSON.stringify(row.destinationstation),awba:JSON.stringify(row.awba),flightdate:JSON.stringify(row.flightdate),originstation:JSON.stringify(row.originstation)}});
},
//table显示时间转换
timestampToTime(timestamp) {
var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
return Y+M+D+h+m+s;
},
},
computed:{
vcarrier:{
get:function () {
return this.defaultQuery.carrier;
},
set:function (val) {
this.defaultQuery.carrier=val.toUpperCase();
}
},
...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
}
</script>
... ...