朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 b587d24c59396ba7ecffe30fe66129999a8efddd 1 个父辈 15d00441

新增转关运抵申报界面

内嵌 并排对比
正在显示 3 个修改的文件 包含 708 行增加 和 0 行删除
import http from './http.js'
let baseUrl = 'wlpt-nmms-manage/trans'
export const selectTrans = params => { return http.get(`${baseUrl}/selectTrans`, params); };
export const delTrans = params => { return http.post(`${baseUrl}/delTrans`, params); };
export const batchSend = params => { return http.post(`${baseUrl}/batchSend`, params); };
export const addTrans = params => { return http.post(`${baseUrl}/addTrans`, params); };
export const ediTrans = params => { return http.post(`${baseUrl}/ediTrans`, params); };
export const send = params => { return http.post(`${baseUrl}/send`, params); };
... ...
... ... @@ -83,6 +83,7 @@ import queryArrival from './views/airtransport/queryArrival.vue'
import queryConfirmatory from './views/airtransport/queryConfirmatory.vue'
import configure from './views/airtransport/configure.vue'
import queryConfigure from './views/airtransport/queryConfigure.vue'
import transit from './views/transit/transit.vue'
import departure from './views/airtransport/departure.vue'
import declare from './views/airtransport/declare.vue'
import queryDeparture from './views/airtransport/queryDeparture.vue'
... ... @@ -168,6 +169,7 @@ let routes = [
]
},
{
path: '/domdep',
component: Home,
... ... @@ -398,6 +400,15 @@ let routes = [
]
},
{
path: '/',
component: Home,
name: '转关运抵',
iconCls: 'el-icon-delete-location',
children: [
{path:'/transit',component:transit,name:'转关运抵申报'},
]
},
{
path: '/out',
component: Home,
name: '出港航班申报',
... ...
<template>
<el-row>
<el-row style="margin-top: 30px">
<el-col :span="2">
<el-input
v-model="formTrn.customscode"
placeholder="关区"
style="width: 100px"
/>
</el-col>
<el-col :span="3">
<el-input
v-model="formTrn.username"
placeholder="申报用户"
style="width: 160px"
/>
</el-col>
<el-col :span="3">
<!-- <el-input-->
<!-- v-model="formTrn.trnmode"-->
<!-- placeholder="转关方式"-->
<!-- style="width: 140px"-->
<!-- />-->
<el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 160px">
<el-option label="0-非转关运抵模式" value="0"></el-option>
<el-option label="1-南方转关运抵模式" value="1"></el-option>
<el-option label="2-北方转关运抵模式" value="2"></el-option>
<el-option label="3-水运中转运抵模式" value="3"></el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-input
v-model="formTrn.unloadcode"
placeholder="卸货地代码"
style="width: 160px"
/>
</el-col>
<el-col :span="7">
<!-- <el-input-->
<!-- v-model="formTrn.creattime"-->
<!-- placeholder="新增时间段"-->
<!-- style="width: 160px"-->
<!-- />-->
<el-date-picker
v-model="formTrn.creattime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
</el-col>
<el-col :span="5">
<el-button type="primary" icon="el-icon-search" @click="trnList">查询</el-button>
<el-button type="success" icon="el-icon-edit" @click="addTrn">新增</el-button>
<el-button type="warning" icon="el-icon-edit" :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>
</el-col>
</el-row>
<el-row>
<el-table
v-loading="listLoading"
:data="tableData"
border
fit
highlight-current-row
style="width: 100%"
@selection-change="trnSelectionChange"
>
<el-table-column
type="selection"
:selectable="checkSelectable"
fixed="left"
width="55"
/>
<el-table-column label="统一编号">
<template slot-scope="scope">
<span>{{ scope.row.seqno }}</span>
</template>
</el-table-column>
<el-table-column label="转关方式" width="140">
<template slot-scope="scope">
<span v-if="scope.row.trnmode ==='0'">非转关运抵模式</span>
<span v-if="scope.row.trnmode ==='1'">南方转关运抵模式</span>
<span v-if="scope.row.trnmode ==='2'">北方转关运抵模式</span>
<span v-if="scope.row.trnmode ==='3'">水运中转运抵模式</span>
<!-- <span>{{ scope.row.trnmode }}</span>-->
</template>
</el-table-column>
<el-table-column label="申报地海关" width="100">
<template slot-scope="scope">
<span>{{ scope.row.customscode }}</span>
</template>
</el-table-column>
<el-table-column label="集装箱（器）编号" width="140">
<template slot-scope="scope">
<span>{{ scope.row.contaid }}</span>
</template>
</el-table-column>
<el-table-column label="总提运单号" width="140">
<template slot-scope="scope">
<span>{{ scope.row.billno }}</span>
</template>
</el-table-column>
<el-table-column label="运输方式代码" width="120">
<template slot-scope="scope">
<span v-if="scope.row.trafmode ==='2'">江海运输</span>
<span v-if="scope.row.trafmode ==='3'">铁路运输</span>
<span v-if="scope.row.trafmode ==='4'">汽车运输</span>
<span v-if="scope.row.trafmode ==='5'">航空运输</span>
<span v-if="scope.row.trafmode ==='6'">邮件运输</span>
<!-- <span>{{ scope.row.trafmode }}</span>-->
</template>
</el-table-column>
<el-table-column label="境内运输工具名称" width="140">
<template slot-scope="scope">
<span>{{ scope.row.trafname }}</span>
</template>
</el-table-column>
<el-table-column label="境内运输工具航（班）次" width="160">
<template slot-scope="scope">
<span>{{ scope.row.voyageno }}</span>
</template>
</el-table-column>
<el-table-column label="境内运输方式" width="120">
<template slot-scope="scope">
<span v-if="scope.row.trafway ==='2'">江海运输</span>
<span v-if="scope.row.trafway ==='3'">铁路运输</span>
<span v-if="scope.row.trafway ==='4'">汽车运输</span>
<span v-if="scope.row.trafway ==='5'">航空运输</span>
<span v-if="scope.row.trafway ==='6'">邮件运输</span>
<!-- <span>{{ scope.row.trafway }}</span>-->
</template>
</el-table-column>
<el-table-column label="托运货物件数" width="100">
<template slot-scope="scope">
<span>{{ scope.row.packno }}</span>
</template>
</el-table-column>
<el-table-column label="货物总毛重" width="100">
<template slot-scope="scope">
<span>{{ scope.row.grosswt }}</span>
</template>
</el-table-column>
<el-table-column label="卸货地代码" width="120">
<template slot-scope="scope">
<span>{{ scope.row.unloadcode }}</span>
</template>
</el-table-column>
<el-table-column label="到达卸货地时间" width="140">
<template slot-scope="scope">
<span>{{ scope.row.arrivetime }}</span>
</template>
</el-table-column>
<el-table-column label="回执内容" width="140">
<template slot-scope="scope">
<span>{{ scope.row.customResponseText }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="400" fixed="right">
<template slot-scope="scope">
<el-button type="warning" size="mini" @click="editTrn(scope.$index,scope.row)">编辑</el-button>
<el-button type="success" size="mini" @click="declareTrn(scope.row)">
申报
</el-button>
<el-button type="success" size="mini" @click="statusTrn(scope.row)">
修改状态
</el-button>
<el-button type="danger" size="mini" :disabled="scope.row.customResponseText && scope.row.customResponseText !== undefined && scope.row.customResponseText.length>0" @click="delTrn(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!--分页区域-->
<div style="margin-top: 10px">
<el-pagination
:current-page="formTrn.pageNum"
:page-sizes="[10, 50, 100, 500]"
:page-size="formTrn.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-row>
<el-row>
<el-dialog
:title="dialogMap[dialogStatus]"
:visible.sync="trn_dialog.addDialog"
style="margin-top: -50px"
text-align="center"
width="80%"
@close="trn_addDialogClosed"
>
<el-form ref="form" :inline="true" :model="form" class="demo-form-inline" label-width="100px" style="margin-top: -20px;label:right" :rules="rules" >
<el-row>
<el-col :span="24">
<div class="grid-content content">信息表单</div>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="海关申报序号" prop="seqno">
<el-input v-model="form.seqno" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="海关关区" prop="customscode">
<el-input v-model="form.customscode" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="操作员卡号" prop="inputopid">
<el-input v-model="form.inputopid" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="操作员姓名" prop="inputopname">
<el-input v-model="form.inputopname" size="small" placeholder="" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="报关公司" prop="applyname">
<el-input v-model="form.applyname" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="十位海关编码" prop="applycode">
<el-input v-model="form.applycode" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="组织机构代码" prop="copcode">
<el-input v-model="form.copcode" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运抵编号" prop="arriveno">
<el-input v-model="form.arriveno" size="small" placeholder="" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="集装箱编号" prop="contaid">
<el-input v-model="form.contaid" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运单号" prop="billno">
<el-input v-model="form.billno" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运输方式" prop="trafmode">
<!-- <el-input v-model="form.trafmode" size="small" placeholder="" />-->
<el-select v-model="form.trafmode" placeholder="请选择" size="mini" >
<el-option label="2-江海运输" value="2"></el-option>
<el-option label="3-铁路运输" value="3"></el-option>
<el-option label="4-汽车运输" value="4"></el-option>
<el-option label="5-汽车运输" value="5"></el-option>
<el-option label="6-汽车运输" value="6"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="运输工具名称" prop="trafname">
<el-input v-model="form.trafname" size="small" placeholder="" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="启运时间" prop="voyageno">
<!-- <el-input v-model="form.voyageno" size="small" placeholder="" />-->
<el-date-picker
v-model="form.voyageno"
type="date" size="mini"
value-format="yyMMdd"
format="yyMMdd"
style="width:190px"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="境内运输方式" prop="trafway">
<!-- <el-input v-model="form.trafway" size="small" placeholder="" />-->
<el-select v-model="form.trafway" placeholder="请选择" size="mini">
<el-option label="2-江海运输" value="2"></el-option>
<el-option label="3-铁路运输" value="3"></el-option>
<el-option label="4-汽车运输" value="4"></el-option>
<el-option label="5-汽车运输" value="5"></el-option>
<el-option label="6-汽车运输" value="6"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="托运件数" prop="packno">
<el-input v-model="form.packno" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="托运重量" prop="grosswt">
<el-input v-model="form.grosswt" size="small" placeholder="" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="卸货地代码" prop="unloadcode">
<el-input v-model="form.unloadcode" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="到达卸货地时间" prop="arrivetime" label-width="110px">
<!-- <el-input v-model="form.arrivetime" size="mini" placeholder="" />-->
<el-date-picker
v-model="form.arrivetime"
type="datetime" size="mini"
value-format="yyyyMMddhhmmss"
format="yyyyMMddhhmmss"
style="width:190px"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="集装器尺寸" prop="contatype">
<el-input v-model="form.contatype" size="small" placeholder="" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="转关方式" prop="trnmode">
<!-- <el-input v-model="form.trnmode" size="small"/>-->
<el-select v-model="form.trnmode" placeholder="请选择" size="mini">
<el-option label="0-非转关运抵模式" value="0"></el-option>
<el-option label="1-南方转关运抵模式" value="1"></el-option>
<el-option label="2-北方转关运抵模式" value="2"></el-option>
<el-option label="3-水运中转运抵模式" value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="notes">
<el-input
v-model="form.notes"
type="textarea"
:rows="1" size="small" style="width: 440px"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item>
<el-button size="small" style="margin-left: 500px;width: 100px" type="info" @click="trn_dialog.addDialog = false">取消</el-button>
<el-button type="primary" size="small" style="margin-left: 20px;width: 100px" @click="dialogStatus==='create'?trn_add():trn_edit()">提交</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</el-row>
</el-row>
</template>
<script>
import {selectTrans,delTrans,batchSend,ediTrans,send,addTrans} from "../../api/trn";
export default {
name: "transit",
data(){
return{
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
formTrn: {
customscode:'',
username:'',
trnmode:'',
unloadcode:'',
creattime:'',
pageNum: 1,
pageSize: 10
},
total: 0,
dialogMap: {
update: '编辑',
create: '新增'
},
dialogStatus: 'create',
trn_dialog: {
// 添加对话框
addDialog: false,
// 编辑对话框
editDialog: false
},
batchSendLoading: false,
listLoading: false,
tableData: [],
//批量选中的
selectedWaybillList: [],
//新增编辑表单
form: {
autoid:'',
seqno:'',
customscode:'',
inputopid: '',
inputopname:'',
applyname:'',
applycode:'',
copcode:'',
arriveno:'',
contaid:'',
billno:'',
trafmode:'',
trafname:'',
voyageno:'',
trafway:'',
packno:'',
grosswt:'',
unloadcode:'',
arrivetime:'',
contatype:'',
trnmode:'',
notes:'',
opertype:'1',
sign:'qwer',
signdate:'20220113120000',
clientseqno:'qwertyuioplkjhgfds',
hostid:'1137490146@qq.com',
certno:'11',
},
rules: {
}
}
},
mounted() {
//获取列表
this.trnList();
},
methods:{
//分页
handleSizeChange(val) {
this.formTrn.pageSize = val
this.trnList()
},
handleCurrentChange(val) {
this.formTrn.pageNum = val
this.trnList()
},
//修改状态
statusTrn(row) {
this.$confirm('修改状态', '确认信息', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
row.customResponseText = undefined
})
},
// 删除
delTrn(row) {
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delTrans(row).then((response) => {
console.log(row)
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg)
// 刷新列表
this.trnList()
}).catch(error => {
this.$message.error(res.msg)
})
}).catch(() => {
})
},
// 获取消息标签列表
trnList() {
const _this = this
selectTrans(this.formTrn).then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data.list
// 获取列表的总记录数
_this.total = res.data.total
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
//新增编辑弹框关闭重置
trn_addDialogClosed() {
// 重置对话框
this.$refs.form.resetFields()
},
// 打开新增
addTrn() {
this.dialogStatus = 'create'
this.trn_dialog.addDialog = true
},
// 新增功能
trn_add() { // 进行表单的预验证
this.$refs.form.validate(valid => {
// 未通过，表单预校验
if (!valid) return
addTrans(this.form).then((response) => {
const res = response.data
// 添加失败
if (res.code !== '200') {
// 关闭加载
return this.$message.error(res.msg)
}
// 添加，成功
this.$message.success(res.msg)
// 隐藏对话框
this.trn_dialog.addDialog = false
// 刷新列表
this.trnList()
}).catch(error => {
this.$message.error(error.toString())
})
})
},
// 打开编辑
editTrn(index, row) {
this.form = Object.assign({}, row)
this.trn_dialog.addDialog = true
this.dialogStatus = 'update'
this.$nextTick(() => {
this.form = Object.assign({}, row)
})
},
// 编辑功能
trn_edit() {
// 进行表单的预验证
this.$refs.form.validate(valid => {
// 未通过，表单预校验
if (!valid) return
ediTrans(this.form).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg)
// 隐藏对话框
this.trn_dialog.addDialog = false
// 刷新列表
this.trnList()
}).catch(error => {
this.$message.error(error.toString())
})
})
},
// 申报
declareTrn(row) {
row.clientseqno= "qwertyuioplkjhgfds"
row.opertype= "1"
row.sign= "qwer"
row.signdate= "20220113120000"
row.hostid= "1137490146@qq.com"
row.certno= "11"
send(row).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success('申报成功！');
this.trnList();
}).catch(error => {
this.$message.error(error.toString());
});
},
// 产生回执的不批量发送
checkSelectable: function(row) {
if (row.customResponseText && row.customResponseText !== undefined && row.customResponseText.length > 0) {
return false
} else {
return true
}
},
//批量选中
trnSelectionChange: function(selectRows) {
console.log(selectRows)
const list = []
if (selectRows) {
selectRows.forEach(function(item, index) {
list.push(item.autoid)
})
}
this.selectedWaybillList = list
},
//批量申报
batchTrn() {
this.batchSendLoading = true
if (this.selectedWaybillList && this.selectedWaybillList.length > 0) {
batchSend(this.selectedWaybillList).then(res => {
if (res.code === '200') {
Message.success('批量申报成功')
} else {
Message.error('批量申报成功，请稍后重试')
}
}).catch(action => {
this.$message({
type: 'info',
message: action === 'cancel'
? '取消修改'
: '停留在当前页面'
})
})
this.batchSendLoading = false
setTimeout(() => {
this.trnList()
}, 1000)
Message.success('批量申报执行完毕')
} else {
Message.error('请选择需要批量发送的运单')
}
},
}
}
</script>
<style scoped>
</style>
... ...