朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 cf65bc77f8408dff073b714d07dc3735a3095290 2 个父辈 cf8975e9 882f2528

add: 

1. 跨境电商申报界面
内嵌 并排对比
正在显示 12 个修改的文件 包含 2173 行增加 和 0 行删除
import axios from 'axios'
import http from "../http";
let baseServiceURL = 'cross-border-service'
//新增客户配置
export const insertCustomer = params => { return http.post(`${baseServiceURL}/customer/insertCustomer`, params); };
//删除客户配置
export const delCustomer = params => { return axios.get(`${baseServiceURL}/customer/delCustomer`, { params: params }); };
//更新客户配置
export const ediCustomer = params => { return http.post(`${baseServiceURL}/customer/ediCustomer`, params); };
//客户配置列表
export const selectCustomers = params => { return axios.get(`${baseServiceURL}/customer/selectCustomers`, { params: params }); };
... ...
import axios from 'axios'
let baseServiceURL = 'wms-server-warehouse'
//危险品入库
export const dangerousImp = params => { return axios.get(`${baseServiceURL}/wms/newinventroyrecord/dangerousImport`, { params: params }); };
//危险品出库
export const dangerousExt = params => { return axios.get(`${baseServiceURL}/wms/newinventroyrecord/dangerousExt`, { params: params }); };
//预配信息查询
export const checkPre = params => { return axios.get(`${baseServiceURL}/wms/newinventroyrecord/checkPre`, { params: params }); };
... ...
import axios from 'axios'
import http from "../http";
//let baseServiceURL = 'cross-border-service'
let baseServiceURL2 = 'wlpt-cbed-system'
//订单列表
export const selectLists = params => { return axios.get(`${baseServiceURL2}/ExportOrderDeclaration/selectLists`, { params: params }); };
//订单申报
export const sendOrder = params => { return http.post(`${baseServiceURL2}/ExportOrderDeclaration/sendOrder`, params); };
//上传EXCEL
export const importExcel = params => { return http.postExcelData(`${baseServiceURL2}/import/importExcel`, params); };
//订单批量申报
export const batchOrder = params => { return http.post(`${baseServiceURL2}/ExportOrderDeclaration/batchOrder`, params); };
//订单批量导入申报
export const batchOrderImport = params => { return http.postExcelData(`${baseServiceURL2}/ExportOrderDeclaration/batchOrderImport`, params); };
//清单批量申报
export const eldhBatchDeclare = params => { return http.post(`${baseServiceURL2}/ExportListDeclaration/eldhBatchDeclare`, params); };
//清单批量导入申报
export const eldhImportDeclare = params => { return http.postExcelData(`${baseServiceURL2}/ExportListDeclaration/eldhImportDeclare`, params); };
//运单批量申报
export const eldBatchDeclare = params => { return http.post(`${baseServiceURL2}/ExportLogistics/eldBatchDeclare`, params); };
//运单批量导入申报
export const eldImportDeclare = params => { return http.postExcelData(`${baseServiceURL2}/ExportLogistics/eldImportDeclare`, params); };
//总分单批量申报
export const zfeldBatchDeclare = params => { return http.post(`${baseServiceURL2}/ExportWaybillDeclaration/eldBatchDeclare`, params); };
//总分单批量导入申报
export const zfeldImportDeclare = params => { return http.postExcelData(`${baseServiceURL2}/ExportWaybillDeclaration/eldImportDeclare`, params); };
... ...
... ... @@ -79,6 +79,17 @@ export default {
}
});
},
getPDF(url, params) {
return axios({
method: 'GET',
url: url,
responseType: 'blob',
params: params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
},
put(url, params){
return axios({
method: 'PUT',
... ...
import http from "../http";
import axios from "axios";
let baseUrl = 'zhidan-service'
//pdf导出
export const extPdf = params => { return http.getPDF(`${baseUrl}/zhidan/extpdf`, params); };
//excel导出
export const extExcel = params => { return http.getPDF(`${baseUrl}/zhidan/extexcel`, params); };
//导入excel
export const importExcel = params => { return http.postExcelData(`${baseUrl}/zhidan/importexcel`, params); };
//查询列表
export const selectLists = params => { return axios.get(`${baseUrl}/zhidan/selectLists`, { params: params }); };
//费率新增
export const addRate = params =>{return http.post(`${baseUrl}/rate/addRate`, params);};
//费率删除
export const delRate = params => { return axios.get(`${baseUrl}/rate/delRate`, { params: params }); };
//费率更新
export const ediRate = params =>{return http.post(`${baseUrl}/rate/ediRate`, params);};
//费率查询
export const selectRate = params => { return axios.get(`${baseUrl}/rate/selectRate`, { params: params }); };
... ...
... ... @@ -128,6 +128,8 @@ import area from './views/deploy/area.vue'
import seller from './views/deploy/seller.vue'
import classification from './views/deploy/classification.vue'
import subscribe from './views/deploy/subscribe.vue'
import DangerousImport from './views/deploy/dangerImport.vue'
import DangerousExt from './views/deploy/dangerExt.vue'
import UNcode from './views/wms/UNcode.vue'
//跨境电商
... ... @@ -196,7 +198,13 @@ import Dispatch from "./views/dispatch/Dispatch";
import multiple from "./views/deploy/multiple";
import satellite from "./views/deploy/satellite";
/*出口订单*/
import ExortOrder from './views/exportorder/Exportorder.vue'
import CustomerConfig from './views/exportorder/CustomerConfig.vue'
/*制单管理*/
import ZhiDan from './views/zhidan/zhidan.vue'
import Rate from './views/zhidan/rate.vue'
let routes = [
{
... ... @@ -222,6 +230,26 @@ let routes = [
]
},
{
path: '/order',
component: HomeNew,
name: '出口订单管理',
iconCls: 'el-icon-collection',
children: [
{path: '/ExortOrder', component: ExortOrder, name: '出口订单'},
{path: '/CustomerConfig', component: CustomerConfig, name: '客户配置'}
]
},
{
path: '/zhidan',
component: HomeNew,
name: '制单管理',
iconCls: 'el-icon-collection',
children: [
{path: '/ZhiDan', component: ZhiDan, name: '制单信息'},
{path: '/Rate', component: Rate, name: '费率设置'}
]
},
{
path: '/',
component: HomeNew,
name: 'Charts',
... ... @@ -425,6 +453,7 @@ let routes = [
]
},
{
path: '/nmms2',
component: HomeNew,
... ... @@ -596,6 +625,8 @@ let routes = [
{path:'/seller',component:seller,name:'商品管理'},
{path:'/classification',component:classification,name:'分类监管申请'},
{path:'/subscribe',component:subscribe,name:'分类监管查询'},
{path:'/DangerousImport',component:DangerousImport,name:'危险品入库'},
{path:'/DangerousExt',component:DangerousExt,name:'危险品出库'},
{path:'/unCode',component:UNcode,name:'国际危险品代码管理'},
]
},
... ...
<template>
<el-container class="form-container">
<el-header>
<h1>危险品出库</h1>
</el-header>
<el-main>
<el-card class="form-card">
<el-form :label-position="labelPosition" :model="form" ref="form" label-width="100px" :rules="rules">
<el-form-item label="运单号" prop="waybill">
<el-input class="form-input" v-model="form.waybill" placeholder="请输入运单号" clearable @blur="handleBlur"></el-input>
</el-form-item>
<el-form-item label="件数" prop="pcs">
<el-input class="form-input" type="number" v-model="form.pcs" placeholder="请输入件数" clearable></el-input>
</el-form-item>
<el-form-item label="重量 (kg)" prop="weight">
<el-input class="form-input" type="number" v-model="form.weight" placeholder="请输入重量" clearable></el-input>
</el-form-item>
<el-form-item label="危险品" prop="hazardous">
<el-select class="form-input" v-model="form.hazardous" 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-form-item>
<el-button type="primary" @click="submitForm" class="submit-button">危险品出库</el-button>
</el-form-item>
</el-form>
</el-card>
</el-main>
</el-container>
</template>
<script>
import {selectNewInventroys} from '../../api/consigner/station'
import {dangerousExt,} from '../../api/consigner/dangerous'
export default {
data() {
return {
options: [
{
value: "3481",
label: '一般危险品'
}, {
value: "3091",
label: '锂电池'
}
],
labelPosition:'left',
form: {
waybill: '',
pcs: null,
weight: null,
hazardous: '3481'
},
queryInfo: {
waybill:'',
billfhl:'',
locationno:'',
// 当前页数
pageNum: 1,
// 每页大小
pageSize: 10,
starttime:'',
endtime:'',
remark2:''
},
rules: {
waybill: [
{ required: true, message: '运单号不能为空', trigger: 'blur' }
],
pcs: [
{ required: true, message: '件数不能为空', trigger: 'blur' }
],
weight: [
{ required: true, message: '重量不能为空', trigger: 'blur' }
],
hazardous: [
{ required: true, message: '请选择是否为危险品', trigger: 'change' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
dangerousExt(this.form).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg);
this.$refs.form.resetFields();
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
} else {
return false;
}
});
},
handleBlur() {
// 在这里处理失去焦点事件
if(this.form.waybill!==null && this.form.waybill!==''){
this.queryInfo.waybill=this.form.waybill;
selectNewInventroys(this.queryInfo).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('剩余库调取失败')
}
if(res.data.list!==null){
this.form.pcs=res.data.list[0].pcs;
this.form.weight=res.data.list[0].weight;
this.form.hazardous=res.data.list[0].remark3;
}
this.$message.success('库存调取成功')
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
}
// 你可以在这里执行其他操作，比如验证输入或发送请求等
}
}
};
</script>
<style scoped>
.form-container {
background-color: #f5f5f5;
padding: 20px;
min-height: 100vh;
}
.el-header {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.form-card {
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-input {
width: 100%; /* 设置宽度为100% */
}
.submit-button {
width: 100%;
}
.el-form-item {
margin-bottom: 15px;
}
@media (max-width: 600px) {
.form-container {
padding: 10px;
}
}
</style>
... ...
<template>
<el-container class="form-container">
<el-header>
<h1>危险品入库</h1>
</el-header>
<el-main>
<el-card class="form-card">
<el-form :label-position="labelPosition" :model="form" ref="form" label-width="100px" :rules="rules">
<el-form-item label="运单号" prop="waybill">
<el-input class="form-input" v-model="form.waybill" placeholder="请输入运单号" clearable @blur="handleBlur"></el-input>
</el-form-item>
<el-form-item label="件数" prop="pcs">
<el-input class="form-input" type="number" v-model="form.pcs" placeholder="请输入件数" clearable></el-input>
</el-form-item>
<el-form-item label="重量 (kg)" prop="weight">
<el-input class="form-input" type="number" v-model="form.weight" placeholder="请输入重量" clearable></el-input>
</el-form-item>
<el-form-item label="危险品" prop="hazardous">
<el-select class="form-input" v-model="form.hazardous" 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-form-item>
<el-button type="success" @click="submitForm" class="submit-button">危险品入库</el-button>
</el-form-item>
</el-form>
</el-card>
</el-main>
</el-container>
</template>
<script>
import {dangerousImp,checkPre} from '../../api/consigner/dangerous'
import axios from 'axios';
export default {
data() {
return {
responseData: null,
options: [
{
value: "3481",
label: '一般危险品'
}, {
value: "3091",
label: '锂电池'
}
],
labelPosition:'left',
form: {
waybill: '',
pcs: null,
weight: null,
hazardous: '3481'
},
rules: {
waybill: [
{ required: true, message: '运单号不能为空', trigger: 'blur' }
],
pcs: [
{ required: true, message: '件数不能为空', trigger: 'blur' }
],
weight: [
{ required: true, message: '重量不能为空', trigger: 'blur' }
],
hazardous: [
{ required: true, message: '请选择是否为危险品', trigger: 'change' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
dangerousImp(this.form).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg);
this.$refs.form.resetFields();
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
} else {
return false;
}
});
},
handleBlur() {
if(this.form.waybill!==null && this.form.waybill!==''){
checkPre({waybill:this.form.waybill}).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg)
}
this.$message.success(res.msg);
this.form.pcs=res.data.pcs;
this.form.weight=res.data.weight;
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
}
}
},
};
</script>
<style scoped>
.form-container {
background-color: #f5f5f5;
padding: 20px;
min-height: 100vh;
}
.el-header {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.form-card {
background-color: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-input {
width: 100%; /* 设置宽度为100% */
}
.submit-button {
width: 100%;
}
.el-form-item {
margin-bottom: 15px;
}
@media (max-width: 600px) {
.form-container {
padding: 10px;
}
}
</style>
... ...
<template>
<div>
<!-- 第一行 -->
<el-row :gutter="24" >
<el-col :span="4">
<el-input size="medium" v-model="query.clientCode" placeholder="客户编码" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.ebcname" placeholder="电商企业名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.ebpname" placeholder="平台企业名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.logisticsName" placeholder="物流企业名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.agentName" placeholder="申报企业名称" clearable></el-input>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="24" >
<el-col :span="4">
<el-input size="medium" v-model="query.customsName" placeholder="申报口岸名称" clearable></el-input>
</el-col>
</el-row>
<!-- 第三行 -->
<el-row :gutter="24" >
<el-col :span="1.5">
<el-button size="medium" @click="getList">查询</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="medium" type="info" @click="exportDataToExcel">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="medium" type="success" @click="addForm">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="medium" type="danger">删除</el-button>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-left: 3px">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%;"
size="medium"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="clientCode"
label="客户编码"
width="120"
>
</el-table-column>
<el-table-column
prop="clientName"
label="客户名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
label="电商企业代码"
prop="ebccode"
width="120">
</el-table-column>-->
<el-table-column
prop="ebcname"
label="电商企业名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="ebpcode"
label="电商平台代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="ebpname"
label="电商平台名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="logisticsCode"
label="物流企业代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="logisticsName"
label="物流企业名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="agentCode"
label="申报企业代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="agentName"
label="申报企业名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="customsCode"
label="申报口岸代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="customsName"
label="申报口岸名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="portCode"
label="出口口岸代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="portName"
label="出口口岸名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="ownerCode"
label="生产销售企业代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="ownerName"
label="生产销售企业"
width="120"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="loctNo"
label="监管场所"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button
@click.native.prevent="ediForm(scope.row)"
type="text"
style="color: #5BB75B"
size="small">
更新
</el-button>
<el-button
@click.native.prevent="deleteRow(scope.row.id)"
type="text"
style="color: #5BB75B"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pageNum"
:page-sizes="[100, 200, 300, 400]"
:page-size="query.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-row>
<el-dialog
:title="'客户信息'+textMap[dialogStatus]"
:visible.sync="dialogVisible"
width="65%"
:before-close="handleClose">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="客户编码" prop="clientCode">
<el-input size="medium" v-model="ruleForm.clientCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="客户名称" prop="clientName">
<el-input size="medium" v-model="ruleForm.clientName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="电商企业代码" prop="ebccode">
<el-input size="medium" v-model="ruleForm.ebccode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="电商企业名称" prop="ebcname">
<el-input size="medium" v-model="ruleForm.ebcname"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="电商平台代码" prop="ebpcode">
<el-input size="medium" v-model="ruleForm.ebpcode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="电商平台名称" prop="ebpname">
<el-input size="medium" v-model="ruleForm.ebpname"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="物流企业代码" prop="logisticsCode">
<el-input size="medium" v-model="ruleForm.logisticsCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="物流企业名称" prop="logisticsName">
<el-input size="medium" v-model="ruleForm.logisticsName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="申报企业代码" prop="agentCode">
<el-input size="medium" v-model="ruleForm.agentCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="申报企业名称" prop="agentName">
<el-input size="medium" v-model="ruleForm.agentName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="申报口岸代码" prop="customsCode">
<el-input size="medium" v-model="ruleForm.customsCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="申报口岸名称" prop="customsName">
<el-input size="medium" v-model="ruleForm.customsName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="出口口岸代码" prop="portCode">
<el-input size="medium" v-model="ruleForm.portCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="出口口岸名称" prop="portName">
<el-input size="medium" v-model="ruleForm.portName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="出口口岸代码" prop="portCode">
<el-input size="medium" v-model="ruleForm.portCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="出口口岸名称" prop="portName">
<el-input size="medium" v-model="ruleForm.portName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="生产销售企业代码" prop="ownerCode">
<el-input size="medium" v-model="ruleForm.ownerCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="生产销售企业名称" prop="ownerName">
<el-input size="medium" v-model="ruleForm.ownerName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="监管场所" prop="loctNo">
<el-input size="medium" v-model="ruleForm.loctNo"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item>
<el-button size="medium" type="primary" @click="dialogStatus==='create'?addsubmitForm('ruleForm'):edisubmitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {insertCustomer,delCustomer,ediCustomer,selectCustomers} from '../../api/consigner/customerconfig'
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
export default {
data() {
return {
dialogStatus: '',
dialogVisible: false,
textMap: {
update: '更新',
create: '新增'
},
ruleForm: {
id:0,
userId:'',
userName:'',
ext1:'',
ext2:'',
ext3:'',
clientCode: '',
clientName:'',
ebccode:'',
ebcname: '',
ebpcode:'',
ebpname:'',
logisticsCode:'',
logisticsName:'',
agentCode:'',
agentName:'',
customsCode:'',
customsName:'',
portCode:'',
portName:'',
ownerCode:'',
ownerName:'',
loctNo:''
},
rules: {
clientCode: [
{ required: true, message: '请输入客户编码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
clientName: [
{ required: true, message: '请输入客户名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
ebccode: [
{ required: true, message: '请输入电商企业代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
ebcname: [
{ required: true, message: '请输入电商企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
ebpcode: [
{ required: true, message: '请输入电商平台代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
ebpname: [
{ required: true, message: '请输入电商平台名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
logisticsCode: [
{ required: true, message: '请输入物流企业代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
logisticsName: [
{ required: true, message: '请输入物流企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
agentCode: [
{ required: true, message: '请输入申报企业代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
agentName: [
{ required: true, message: '请输入申报企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
customsCode: [
{ required: true, message: '请输入申报口岸代码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
],
customsName: [
{ required: true, message: '请输入申报口岸名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
portCode: [
{ required: true, message: '请输入出口口岸代码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
],
portName: [
{ required: true, message: '请输入出口口岸名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
ownerCode: [
{ required: true, message: '生产销售企业代码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
ownerName: [
{ required: true, message: '生产销售企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
]
},
total:0,
tableData: [],
multipleSelection: [],
query: {
clientCode: '',
ebcname: '',
ebpname: '',
logisticsName: '',
agentName: '',
customsName: '',
pageNum:1,
pageSize:20
},
};
},
mounted() {
this.getList();
},
methods: {
addForm(){
this.dialogVisible = true;
this.dialogStatus = 'create';
},
ediForm(row){
this.dialogVisible = true;
this.dialogStatus = 'update';
this.ruleForm=row;
},
//Dialog关闭提示
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {
});
},
addsubmitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.id='';
insertCustomer(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('资源添加，失败！')
}
this.$message.success('资源添加，成功！')
this.dialogVisible = false;
this.getList();
}).catch(error => {
// 关闭加载
this.$message.warning('资源添加，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
edisubmitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ediCustomer(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('更新资源添加，失败！')
}
this.$message.success('更新资源添加，成功！')
this.dialogVisible = false;
this.getList();
}).catch(error => {
// 关闭加载
this.$message.warning('更新资源添加，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
getList(){
selectCustomers(this.query).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())
})
},
handleSizeChange(val) {
this.query.pageSize=val;
this.getList();
},
handleCurrentChange(val) {
this.query.pageNum=val;
this.getList()
},
deleteRow(id) {
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delCustomer({id: id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error('删除车载运单，失败！')
})
}).catch(() => {
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
exportDataToExcel() {
// 获取当前日期作为文件名的一部分
const currentDate = new Date();
const fileName = `导出数据_${currentDate.toISOString().split('T')[0]}.xlsx`;
// 将表格数据转换为Excel格式
const ws = XLSX.utils.json_to_sheet(this.tableData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 导出为Excel文件
XLSX.writeFile(wb, fileName);
// 或者使用file-saver保存文件
// const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
// try {
// saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
// } catch (e) {
// if (typeof console !== 'undefined') console.log(e, wbout);
// }
}
}
};
</script>
<style scoped>
</style>
... ...
<template>
<div class="table-container">
<div>
<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
<el-form-item label="">
<el-input size="medium" v-model="queryInfo.ext1" class="" placeholder="客户编码"></el-input>
</el-form-item>
<el-form-item label="">
<el-input size="medium" v-model="queryInfo.orderno" placeholder="订单号"></el-input>
</el-form-item>
<el-form-item label="">
<el-select size="medium" v-model="queryInfo.ordertype" placeholder="订单类型">
<el-option
v-for="item in ordertypes"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-select size="medium" v-model="queryInfo.apptype" placeholder="报送类型">
<el-option
v-for="item in apptypes"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-select size="medium" v-model="queryInfo.appstatus" placeholder="报关状态">
<el-option
v-for="item in appstatuss"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="block">
<el-date-picker
style="background: none"
size="medium"
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-form-item>
<el-form-item>
<el-button size="medium" @click="getList" style="background: none">查询</el-button>
</el-form-item>
<el-form-item>
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="uploadFile"
:show-file-list="false">
<el-button size="medium" type="primary">导入订单</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
<div style="margin-bottom: 20px">
<el-row :gutter="24">
<el-col :span="3">
<el-button size="medium" @click="batchOrder" style="background: none">订单批量申报</el-button>
</el-col>
<el-col :span="4">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="batchOrderImport"
:show-file-list="false">
<el-button size="medium" style="background: none">订单批量导入申报</el-button>
</el-upload>
</el-col>
<el-col :span="3">
<el-button size="medium" @click="batchDeclare" style="background: none">清单批量申报</el-button>
</el-col>
<el-col :span="4">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="batchDeclareImport"
:show-file-list="false">
<el-button size="medium" style="background: none">清单批量导入申报</el-button>
</el-upload>
</el-col>
<el-col :span="3">
<el-button size="medium" @click="ydeldBatchDeclare" style="background: none">运单批量申报</el-button>
</el-col>
<el-col :span="4">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="ydbatchDeclareImport"
:show-file-list="false">
<el-button size="medium" style="background: none">运单批量导入申报</el-button>
</el-upload>
</el-col>
</el-row>
</div>
<div style="margin-bottom: 20px">
<el-row :gutter="24">
<el-col :span="3">
<el-button size="medium" @click="zfbatchOrder" style="background: none">总分单批量申报</el-button>
</el-col>
<el-col :span="4">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="zfbatchOrderImport"
:show-file-list="false">
<el-button size="medium" style="background: none">总分单批量导入申报</el-button>
</el-upload>
</el-col>
</el-row>
</div>
<el-table
:data="tableData"
style="width: 100%"
row-key="guid"
:expand-row-keys="expandedRowKeys"
@selection-change="handleSelectionChange"
border
stripe
>
<el-table-column type="expand" label="详细信息">
<template v-slot:default="{ row }">
<el-table
:data="row.exportOrderDeclarationBodyList"
style="width: 85%;margin-left: 45px"
row-key="id"
stripe
>
<el-table-column prop="itemno" label="企业商品货号" />
<el-table-column prop="itemname" label="企业商品名称" />
<el-table-column prop="itemdescribe" label="企业商品描述" />
<el-table-column prop="barcode" label="条形码" />
<el-table-column prop="unit" label="计量单位" />
<el-table-column prop="currency" label="币制" />
<el-table-column prop="qty" label="数量" />
<el-table-column prop="price" label="单价" />
<el-table-column prop="totalprice" label="总价" />
<el-table-column prop="note" label="备注" />
</el-table>
</template>
</el-table-column>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="ext1" label="客户编号" width="180"></el-table-column>
<el-table-column prop="orderno" label="订单编号" width="180"></el-table-column>
<el-table-column prop="ordertype" label="订单类型" width="120">
<template slot-scope="scope">
<span v-if="scope.row.ordertype==='E'">
B2C
</span>
<span v-else-if="scope.row.ordertype==='B'">
B2B
</span>
<span v-else>
海外仓
</span>
</template>
</el-table-column>
<el-table-column prop="apptype" label="报送类型" width="120">
<template slot-scope="scope">
<span v-if="scope.row.apptype==='1'">
新增
</span>
<span v-else>
变更
</span>
</template>
</el-table-column>
<el-table-column prop="apptime" label="报送时间" width="180"></el-table-column>
<el-table-column prop="appstatus" label="报送状态" width="120">
<template slot-scope="scope">
<span v-if="scope.row.appstatus==='1'">
暂存
</span>
<span v-else>
申报
</span>
</template>
</el-table-column>
<el-table-column prop="ebpname" label="电商平台" width="180"></el-table-column>
<el-table-column prop="goodsvalue" label="商品金额" width="120"></el-table-column>
<el-table-column prop="freight" label="运杂费" width="120"></el-table-column>
<el-table-column prop="note" label="备注" width="180"></el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180"
show-overflow-tooltip>
<template slot-scope="scope">
<el-button type="text" size="small" @click="sendorder(scope.row)">订单申报</el-button>
<el-button type="text" size="small" @click="sendDeclare(scope.row)">清单申报</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-sizes="[20, 30, 40, 100]"
:page-size="queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import {sendOrder,selectLists,batchOrder,batchOrderImport,importExcel,eldhBatchDeclare,eldhImportDeclare,
eldBatchDeclare,eldImportDeclare,zfeldBatchDeclare,zfeldImportDeclare} from '../../api/consigner/exportOrder'
export default {
data() {
return {
apptypes: [
{
value: '1',
label: '新增'
}, {
value: '2',
label: '变更'
}
],
appstatuss: [
{
value: '1',
label: '暂存'
}, {
value: '2',
label: '申报'
}
],
ordertypes: [
{
value: 'E',
label: 'B2C出口订单'
}, {
value: 'B',
label: 'B2B出口订单'
}, {
value: 'W',
label: '海外仓订仓单'
}
],
tableData: [],
selectedRows: [],
expandedRowKeys: [],
queryInfo:{
appstatus:'',
apptype:'',
orderno:'',
ordertype:'',
ext1:'',
starttime:'',
endtime:'',
pageNum:1,
pageSize:20
},
total:0,
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]);
}
}]
},
value2:'',
transformedData:''
};
},
mounted() {
// this.expandedRowKeys = this.tableData.map(item => item.guid);
this.getList();
},
methods: {
//运单批量导入申报
zfbatchOrderImport({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
zfeldImportDeclare(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
//运单批量申报
zfbatchOrder(){
if(this.selectedRows.length!==0){
this.transformedData = this.selectedRows.map(item => ({
orderno: item.orderno,
ext1: item.ext1
}));
zfeldBatchDeclare(this.transformedData).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('总分单批量申报失败！')
}
this.$message.success('总分单批量申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
}else{
this.$message.error('请选勾取需要申报的总分单信息！');
}
},
//运单批量导入申报
ydbatchDeclareImport({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
eldImportDeclare(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
//运单批量申报
ydeldBatchDeclare(){
if(this.selectedRows.length!==0){
this.transformedData = this.selectedRows.map(item => ({
orderno: item.orderno,
ext1: item.ext1
}));
eldBatchDeclare(this.transformedData).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('运单批量申报失败！')
}
this.$message.success('运单批量申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
}else{
this.$message.error('请选勾取需要申报的运单信息！');
}
},
//清单批量导入申报
batchDeclareImport({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
eldhImportDeclare(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
//清单申报
sendDeclare(row){
const { orderno, ext1 } = row;
const senddata= [{ orderno, ext1 }];
eldhBatchDeclare(senddata).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('清单批量申报失败！')
}
this.$message.success('清单批量申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
},
//清单批量申报
batchDeclare(){
if(this.selectedRows.length!==0){
this.transformedData = this.selectedRows.map(item => ({
orderno: item.orderno,
ext1: item.ext1
}));
eldhBatchDeclare(this.transformedData).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('清单批量申报失败！')
}
this.$message.success('清单批量申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
}else{
this.$message.error('请选勾取需要申报的清单信息！');
}
},
//订单批量导入申报
batchOrderImport({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
batchOrderImport(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
//批量申报订单
batchOrder(){
if(this.selectedRows.length!==0){
this.transformedData = this.selectedRows.map(item => ({
orderno: item.orderno,
ext1: item.ext1
}));
batchOrder(this.transformedData).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('订单批量申报失败！')
}
this.$message.success('订单批量申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
}else{
this.$message.error('请选勾取需要申报的订单信息！');
}
},
//导入订单excel
beforeUpload(file) {
// 检查文件类型
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
if (!isExcel) {
this.$message.error('上传文件只能是 Excel 格式!');
return false; // 取消文件上传
}
return true; // 允许上传
},
uploadFile({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
importExcel(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
//订单申报
sendorder(row){
sendOrder(row).then((response)=>{
const res=response.data;
if (res.code !== '200') {
return this.$message.error('订单申报失败！')
}
this.$message.success('订单申报成功！');
this.getList();
}).catch(error=>{
this.$message.error(error.toString())
})
},
//订单列表查询
getList(){
if(this.value2 !== null && this.value2 !== ""){
this.queryInfo.starttime = this.value2[0];
this.queryInfo.endtime = this.value2[1];
}
selectLists(this.queryInfo).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())
})
},
//分页
handleSizeChange(val) {
this.queryInfo.pageSize=val;
this.getList();
},
//分页
handleCurrentChange(val) {
this.queryInfo.pageNum=val;
this.getList();
},
//多选
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
};
</script>
<style scoped>
.el-input__inner{
background-color: #f5f7fd;
}
.el-table {
border: 1px solid #ddd;
}
.el-table th {
background-color: #f0f0f0;
}
.el-table tr.el-table__row--striped > td {
background-color: #f8f8f8;
}
.el-table td, .el-table th {
border: 1px solid #ddd;
padding: 8px;
}
</style>
... ...
<template>
<div>
<el-row :gutter="24">
<el-col :span="4">
<el-input size="medium" v-model="query.carrier" onkeyup="this.value=this.value.toUpperCase()" placeholder="承运人二字码"></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.dest" onkeyup="this.value=this.value.toUpperCase()" placeholder="目的港"></el-input>
</el-col>
<el-col :span="2">
<el-button size="medium" @click="getList" type="primary">查询</el-button>
</el-col>
<el-col :span="2">
<el-button size="medium" @click="add" type="primary">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="carrier"
label="承运人二字码"
width="120">
</el-table-column>
<el-table-column
prop="dest"
label="目的港"
width="120">
</el-table-column>
<el-table-column
prop="destrate"
label="目的港费率"
width="120">
</el-table-column>
<el-table-column
prop="mycname"
label="燃油费类型"
width="120">
</el-table-column>
<el-table-column
prop="myc"
label="燃油费率"
width="120">
</el-table-column>
<el-table-column
prop="sccname"
label="战险类型"
width="120">
</el-table-column>
<el-table-column
prop="scc"
label="战险费率"
width="120">
</el-table-column>
<el-table-column
prop="zhidanfei"
label="制单费"
width="120">
</el-table-column>
<el-table-column
prop="cgc"
label="信息传输费"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
<el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24">
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="query.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
<el-dialog
title="费率信息"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="目的港" prop="dest">
<el-input v-model="ruleForm.dest" onkeyup="this.value=this.value.toUpperCase()"></el-input>
</el-form-item>
<el-form-item label="目的港费率" prop="destrate">
<el-input v-model="ruleForm.destrate" type="number"></el-input>
</el-form-item>
<el-form-item label="承运人二字码" prop="carrier">
<el-input v-model="ruleForm.carrier" onkeyup="this.value=this.value.toUpperCase()"></el-input>
</el-form-item>
<el-form-item label="燃油费类型：" prop="mycname">
<el-input v-model="ruleForm.mycname" onkeyup="this.value=this.value.toUpperCase()"></el-input>
</el-form-item>
<el-form-item label="燃油费率" prop="myc">
<el-input v-model="ruleForm.myc" type="number"></el-input>
</el-form-item>
<el-form-item label="战险类型" prop="sccname">
<el-input v-model="ruleForm.sccname" onkeyup="this.value=this.value.toUpperCase()"></el-input>
</el-form-item>
<el-form-item label="战险费率" prop="scc">
<el-input v-model="ruleForm.scc" type="number"></el-input>
</el-form-item>
<el-form-item label="制单费" prop="zhidanfei">
<el-input v-model="ruleForm.zhidanfei" type="number"></el-input>
</el-form-item>
<el-form-item label="信息传输费" prop="cgc">
<el-input v-model="ruleForm.cgc" type="number"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dialogStatus==='create'?addForm('ruleForm'):ediForm('ruleForm')">保存</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {addRate,delRate,ediRate,selectRate} from "../../api/zhidan/zhidan";
export default {
data(){
return{
ruleForm: {
id:'',
carrier: '',
dest:'',
destrate:0,
myc:0,
scc:0,
zhidanfei:0,
mycname:'',
sccname:'',
cgc:0,
},
rules: {
},
query:{
carrier:'',
dest:'',
pageNum:1,
pageSize:20
},
total:0,
tableData:[],
dialogVisible:false,
dialogStatus: '',
}
},
mounted() {
this.getList();
},
methods:{
addForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
addRate(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('费率新增，失败！')
}
this.$message.success('费率新增，成功！')
this.dialogVisible = false;
this.getList();
}).catch(error => {
// 关闭加载
this.$message.warning('费率新增，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
ediForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ediRate(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('费率更新，失败！')
}
this.$message.success('费率更新，成功！')
this.dialogVisible = false;
this.getList();
}).catch(error => {
// 关闭加载
this.$message.warning('费率更新，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
add(){
this.ruleForm={
id:'',
carrier: '',
dest:'',
destrate:0,
myc:0,
scc:0,
zhidanfei:0,
mycname:'',
sccname:'',
cgc:0,
}
this.dialogVisible=true;
this.dialogStatus='create';
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
handleClick(row) {
this.dialogVisible=true;
this.dialogStatus='update';
this.ruleForm=row;
},
deleteClick(row) {
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delRate({id: row.id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList();
}).catch(error => {
this.$message.error('删除配置，失败！')
})
}).catch(() => {
})
},
handleSizeChange(val) {
this.query.pageSize=val;
this.getList();
},
handleCurrentChange(val) {
this.query.pageNum=val;
this.getList();
},
getList(){
selectRate(this.query).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())
})
},
validateUppercaseInput() {
// 使用正则表达式来匹配非大写字母，并替换为空字符串
this.uppercaseInput = this.uppercaseInput.replace(/[^A-Z]/g, '');
}
}
}
</script>
... ...
<template>
<div>
<el-row :gutter="24">
<el-col :span="4">
<el-input size="medium" v-model="query.waybill" placeholder="运单号"></el-input>
</el-col>
<el-col :span="9">
<el-date-picker
size="medium"
v-model="value2"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</el-col>
<el-col :span="2">
<el-button size="medium" @click="getList" type="primary">查询</el-button>
</el-col>
<el-col :span="2">
<el-upload
class="upload-demo"
action=""
:before-upload="beforeUpload"
:http-request="impExcel"
:show-file-list="false">
<el-button size="medium" type="success">导入数据</el-button>
</el-upload>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="waybill"
label="运单号"
width="120">
</el-table-column>
<!--<el-table-column
prop="fhl"
label="分单号"
width="120">
</el-table-column>-->
<el-table-column
prop="flightno"
label="航班号"
width="120">
</el-table-column>
<el-table-column
prop="flightdate"
label="航班日期"
width="150">
</el-table-column>
<el-table-column
prop="pcs"
label="件数"
width="120">
</el-table-column>
<el-table-column
prop="weight"
label="重量"
width="120">
</el-table-column>
<el-table-column
prop="feweifht"
label="计费重"
width="120">
</el-table-column>
<el-table-column
prop="vol"
label="体积"
width="120">
</el-table-column>
<el-table-column
prop="descr"
label="品名"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="160">
<template slot-scope="scope">
<el-button @click="handlePdf(scope.row)" type="text" size="small">下载PDF</el-button>
<el-button @click="handleExcel(scope.row)" type="text" size="small">下载EXCEL</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24">
<el-pagination
size="medium"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pageNum"
:page-sizes="[100, 200, 300, 400]"
:page-size="query.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
</div>
</template>
<script>
import {selectLists,extPdf,extExcel,importExcel} from "../../api/zhidan/zhidan";
export default {
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]);
}
}
]
},
query:{
waybill:'',
starttime:'',
endtime:'',
pageNum:1,
pageSize:20
},
value2:'',
tableData: [],
total:0,
}
},
mounted() {
this.getList();
},
methods:{
//导入订单excel
beforeUpload(file) {
// 检查文件类型
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
if (!isExcel) {
this.$message.error('上传文件只能是 Excel 格式!');
return false; // 取消文件上传
}
return true; // 允许上传
},
impExcel({ file, onSuccess, onError }){
// 生成 FormData 对象
const formData = new FormData();
formData.append('file', file);
importExcel(formData).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.getList();
onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
onError(error); // 调用 onError 回调通知上传失败
})
},
getList(){
if(this.value2 !== null && this.value2 !== ""){
this.query.starttime=this.value2[0];
this.query.endtime=this.value2[1];
}
selectLists(this.query).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())
})
},
handlePdf(row) {
extPdf({id: row.id}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', row.waybill+'.pdf'); // 动态设置文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // 清理临时链接
window.URL.revokeObjectURL(url); // 清理URL对象
}).catch(error => {
console.error('Error downloading PDF:', error);
});
},
handleExcel(row) {
extExcel({id: row.id}).then(response => {
if (!response || !response.data) {
console.error('Response data is empty or not a Blob.');
return;
}
const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
const tempFile = URL.createObjectURL(blob);
fetch(tempFile)
.then(res => res.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', row.waybill+'.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('Error creating temporary file:', error);
});
window.URL.revokeObjectURL(tempFile);
}).catch(error => {
console.error('Error downloading Excel:', error);
});
},
handleSizeChange(val) {
this.query.pageSize=val;
this.getList();
},
handleCurrentChange(val) {
this.query.pageNum=val;
this.getList();
}
}
}
</script>
... ...