作者 shenhailong

快邮舱单申报 新增主分单 主单显示

import axios from 'axios'
import http from "../http";
let baseUrl = 'express-system/express'
... ... @@ -6,3 +7,7 @@ let baseUrl = 'express-system/express'
export const getExpressList = params => { return axios.get(`${baseUrl}/list`, { params: params }); };
export const awbaAdd = params => { return http.post(`${baseUrl}/awbaAdd`,params)};
export const awbahAdd = params => { return http.post(`${baseUrl}/awbhAdd`,params)};
... ...
... ... @@ -18,14 +18,14 @@
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getList()">查询</el-button>
<el-button type="primary" @click="getList()">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd()">新增</el-button>
<el-button type="primary" @click="expressAdd()">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="expressDate"
style="width: 100%"
row-key="id"
... ... @@ -37,56 +37,268 @@
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
<el-table-column prop="billno" label="主单号" width="180">
</el-table-column>
<el-table-column prop="voyageno" label="运输工具航次(班)号" width="180">
</el-table-column>
<el-table-column prop="ieflag" label="进出口标识">
</el-table-column>
<el-table-column prop="trafcnname" label="运输工具中文名称">
</el-table-column>
<el-table-column prop="trafenname" label="运输工具英文名称">
</el-table-column>
<el-table-column prop="grosswt" label="毛重">
</el-table-column>
<el-table-column prop="packno" label="件数">
</el-table-column>
<el-table-column prop="billnum" label="分运单总数">
</el-table-column>
<el-table-column prop="iedate" label="进出口日期">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<el-table-column prop="ieport" label="进出口岸代码">
</el-table-column>
<el-table-column prop="address" label="地址">
<el-table-column prop="tradename" label="经营单位名称">
</el-table-column>
<el-table-column prop="inputopname" label="录入人姓名">
</el-table-column>
<el-table-column prop="inputcompanyname" label="录入单位名称">
</el-table-column>
<el-table-column label="操作" min-width="150">
<template slot-scope="scope">
<el-button type="primary" size="small" v-if="scope.row.ext1 == 'awba'" @click="expressAwbhAdd(scope.$index, scope.row)">新增分单</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-col :span="24" class="toolbar">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
:page-sizes="[10, 50, 100, 200]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
:total=this.total>
</el-pagination>
</el-col>
<!--新增主单弹框-->
<el-dialog title="快邮舱单主单新增" :visible.sync="expressAwbaAddVisible" width="60%">
<el-form :model="expressAwbaAddModel" :rules="expressAwbaRules" ref="expressAwbaAddModel" >
<el-row>
<el-col :span="8">
<el-form-item label="主单号" :label-width="expressAddlWidth" prop="billno">
<el-input style="width: 80%" v-model="expressAwbaAddModel.billno" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="航班号" :label-width="expressAddlWidth" prop="flightNo">
<el-input style="width: 80%" v-model="expressAwbaAddModel.flightNo" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="航班日期" :label-width="expressAddlWidth" prop="flightDate">
<el-date-picker
v-model="expressAwbaAddModel.flightDate"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="进出口标志" :label-width="expressAddlWidth" prop="ieflag">
<el-select v-model="expressAwbaAddModel.ieflag" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="运输工具中文名称" :label-width="expressAddlWidth" prop="trafcnname">
<el-input style="width: 80%" v-model="expressAwbaAddModel.trafcnname" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="运输工具英文名称" :label-width="expressAddlWidth" prop="trafenname">
<el-input style="width: 80%" v-model="expressAwbaAddModel.trafenname" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="毛重" :label-width="expressAddlWidth" prop="grosswt">
<el-input style="width: 80%" v-model="expressAwbaAddModel.grosswt" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="件数" :label-width="expressAddlWidth" prop="packno">
<el-input style="width: 80%" type="number" v-model="expressAwbaAddModel.packno" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="分运单总数" :label-width="expressAddlWidth" prop="billnum">
<el-input style="width: 80%" type="number" v-model="expressAwbaAddModel.billnum" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="运输方式代码" :label-width="expressAddlWidth" prop="trafmode">
<el-input style="width: 80%" v-model="expressAwbaAddModel.trafmode" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="进出口日期" :label-width="expressAddlWidth" prop="iedate">
<el-date-picker
v-model="expressAwbaAddModel.iedate"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="指运港(抵运港)" :label-width="expressAddlWidth" prop="destinationport">
<el-input style="width: 80%" v-model="expressAwbaAddModel.destinationport" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="进出口岸代码" :label-width="expressAddlWidth" prop="ieport">
<el-input style="width: 80%" v-model="expressAwbaAddModel.ieport" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经营单位编号" :label-width="expressAddlWidth" prop="tradeco">
<el-input style="width: 80%" v-model="expressAwbaAddModel.tradeco" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经营单位名称" :label-width="expressAddlWidth" prop="tradename">
<el-input style="width: 80%" v-model="expressAwbaAddModel.tradename" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="录入人卡号" :label-width="expressAddlWidth" prop="inputno">
<el-input style="width: 80%" v-model="expressAwbaAddModel.inputno" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="录入人姓名" :label-width="expressAddlWidth" prop="inputopname">
<el-input style="width: 80%" v-model="expressAwbaAddModel.inputopname" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="录入单位代码" :label-width="expressAddlWidth" prop="inputcompanycode">
<el-input style="width: 80%" v-model="expressAwbaAddModel.inputcompanycode" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="录入单位名称" :label-width="expressAddlWidth" prop="inputcompanyname">
<el-input style="width: 80%" v-model="expressAwbaAddModel.inputcompanyname" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="expressAwbaAddVisible = false">取消</el-button>
<el-button type="primary" @click="expressAwbaAddSubmit()">提交</el-button>
</div>
</el-dialog>
<!--新增分单弹框-->
<el-dialog title="快邮舱单分单新增" :visible.sync="expressAwbhAddVisible" width="60%">
<el-form :model="expressAwbhAddModel" :rules="expressAwbhRules" ref="expressAwbhAddModel" >
<el-row>
<el-col :span="8">
<el-form-item label="主单号" :label-width="expressAddlWidth" prop="billno">
<el-input style="width: 80%" disabled v-model="expressAwbhAddModel.billno" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="航班号" :label-width="expressAddlWidth" prop="flightNo">
<el-input style="width: 80%" v-model="expressAwbhAddModel.flightNo" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="航班日期" :label-width="expressAddlWidth" prop="flightDate">
<el-date-picker
v-model="expressAwbhAddModel.flightDate"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="分单号" :label-width="expressAddlWidth" prop="assbillno">
<el-input style="width: 80%" v-model="expressAwbhAddModel.assbillno" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="主要商品名称" :label-width="expressAddlWidth" prop="maingname">
<el-input style="width: 80%" type="textarea" v-model="expressAwbhAddModel.maingname" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="件数" :label-width="expressAddlWidth" prop="packno">
<el-input style="width: 80%" type="number" v-model="expressAwbhAddModel.packno" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="商品毛重" :label-width="expressAddlWidth" prop="grosswt">
<el-input style="width: 80%" v-model="expressAwbhAddModel.grosswt" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="价值" :label-width="expressAddlWidth" prop="tradetotal">
<el-input style="width: 80%" v-model="expressAwbhAddModel.tradetotal" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="成交币制" :label-width="expressAddlWidth" prop="tradecurr">
<el-input style="width: 80%" v-model="expressAwbhAddModel.tradecurr" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="expressAwbhAddVisible = false">取消</el-button>
<el-button type="primary" @click="expressAwbhAddSubmit()">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
import {getExpressList} from '../../api/express/express'
import {getList} from "../../api/security/security";
import {getExpressList, awbaAdd, awbahAdd} from '../../api/express/express'
import loginUserInfo from "../../api/base";
export default {
name: "express",
data() {
return {
expressDate: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
expressDate: [],
options: [{
value: 'I',
label: '进口申报'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
value: 'E',
label: '出口申报'
}],
multipleSelection: [],
currentPage4: 1,
... ... @@ -95,14 +307,142 @@
flightNo: '',
flightDate: '',
},
expressAwbaRules: {
billno: [
{ required: true, message: '请输入主单号', trigger: 'blur' },
],
flightNo: [
{ required: true, message: '请输入航班号', trigger: 'blur' }
],
flightDate: [
{ type: 'string', required: true, message: '请选择航班日期', trigger: 'change' }
],
ieflag: [
{ required: true, message: '请选择进出口标识', trigger: 'blur' }
],
trafcnname: [
{ required: true, message: '请输入运输工具中文名称', trigger: 'blur' }
],
trafenname: [
{ required: true, message: '请输入运输工具英文名称', trigger: 'blur' }
],
grosswt: [
{ required: true, message: '请输入毛重', trigger: 'blur' }
],
packno: [
{ required: true, message: '请输入件数', trigger: 'blur' }
],
billnum: [
{ required: true, message: '请输入分单总数', trigger: 'blur' }
],
trafmode: [
{ required: true, message: '请输入运输方式代码', trigger: 'blur' }
],
iedate: [
{ type: 'string', required: true, message: '请选择进出口日期', trigger: 'change' }
],
destinationport: [
{ required: true, message: '请输入指运抵', trigger: 'blur' }
],
ieport: [
{ required: true, message: '请输入进出口代码', trigger: 'blur' }
],
tradeco: [
{ required: true, message: '请输入经营单位编号', trigger: 'blur' }
],
tradename: [
{ required: true, message: '请输入经营单位名称', trigger: 'blur' }
],
inputno: [
{ required: true, message: '请输入录入人卡号', trigger: 'blur' }
],
inputopname: [
{ required: true, message: '请输入录入人名称', trigger: 'blur' }
],
inputcompanycode: [
{ required: true, message: '请输入录入单位', trigger: 'blur' }
],
inputcompanyname: [
{ required: true, message: '请输入库如单位名称', trigger: 'blur' }
]
},
expressAwbhRules: {
flightNo: [
{ required: true, message: '请输入航班号', trigger: 'blur' }
],
flightDate: [
{ type: 'string', required: true, message: '请选择航班日期', trigger: 'change' }
],
assbillno: [
{ required: true, message: '请输入分单号', trigger: 'blur' }
],
maingname: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
packno: [
{ required: true, message: '请输入件数', trigger: 'blur' }
],
grosswt: [
{ required: true, message: '请输入毛重', trigger: 'blur' }
],
tradetotal: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
tradecurr: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
},
pageNum: 0,
pageSize: 0,
total: 0,
listLoading: false,
expressAwbaAddVisible: false,
expressAwbhAddVisible: false,
expressAddlWidth: '150px',
expressAwbaAddModel: {
billno: "",
flightNo: "",
flightDate: "",
voyageno: "",
ieflag: "",
trafcnname: "",
trafenname: "",
grosswt: "",
packno: "",
billnum: "",
trafmode: "",
iedate: "",
destinationport: "",
ieport: "",
tradeco: "",
tradename: "",
inputno: "",
inputopname: "",
inputcompanycode: "",
inputcompanyname: "",
userid: "",
userName: "",
},
expressAwbhAddModel: {
billno: "",
flightNo: "",
flightDate: "",
voyageno: "",
assbillno:"",
maingname:"",
packno:"",
grosswt:"",
tradetotal:"",
tradecurr:"",
userid:"",
userName:"",
}
}
},
methods: {
/**
* 获取列表集合
*/
getList(){
let para = {
pageNum: this.pageNum,
... ... @@ -122,35 +462,127 @@
});
},
// 分单懒加载
/**
* 分单懒加载
*/
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
},
// 多选单选
/**
* 多选单选
* @param val
*/
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 分页
/**
* 分页
* @param val
*/
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
},
/**
* 新增主单页面
*/
expressAdd(){
this.expressAwbaAddVisible = true
if (this.$refs.expressAwbaAddModel != undefined){
this.$refs.expressAwbaAddModel.resetFields();
}
},
/**
* 新增提交
*/
expressAwbaAddSubmit(){
this.$refs.expressAwbaAddModel.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
//NProgress.start();
this.listLoading = true;
this.expressAwbaAddModel.userName = loginUserInfo.username;
this.expressAwbaAddModel.userid = loginUserInfo.userId;
let para = Object.assign({}, this.expressAwbaAddModel);
awbaAdd(para).then((res) => {
if (res.data.code == 200){
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs.expressAwbaAddModel.resetFields();
this.expressAwbaAddVisible = false;
this.getList();
}else {
this.$message({
message: '提交失败',
type: 'error'
});
}
}).catch(error => alert(error));
}).catch(() =>{
});
}
});
},
/**
* 新增分单页面
*/
expressAwbhAdd(index, row){
this.expressAwbhAddModel.billno = row.billno;
this.expressAwbhAddModel.flightNo = row.flightNo;
this.expressAwbhAddModel.flightDate = row.flightDate;
this.expressAwbhAddModel.voyageno = row.voyageno;
this.expressAwbhAddVisible = true;
if (this.$refs.expressAwbhAddModel != undefined){
this.$refs.expressAwbhAddModel.resetFields();
}
},
/**
* 新增分单提交
*/
expressAwbhAddSubmit(){
this.$refs.expressAwbhAddModel.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
//NProgress.start();
this.listLoading = true;
this.expressAwbhAddModel.userName = loginUserInfo.username;
this.expressAwbhAddModel.userid = loginUserInfo.userId;
let para = Object.assign({}, this.expressAwbhAddModel);
awbahAdd(para).then((res) => {
if (res.data.code == 200){
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs.expressAwbhAddModel.resetFields();
this.expressAwbhAddVisible = false;
this.getList();
}else {
this.$message({
message: '提交失败',
type: 'error'
});
}
}).catch(error => alert(error));
}).catch(() =>{
});
}
});
}
},
mounted() {
this.getList();
}
}
</script>
... ...