朱兆平 / vue_cli · 提交

转到一个项目

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

add: 

1. 跨境电商申报界面
内嵌 并排对比
正在显示 12 个修改的文件 包含 2173 行增加 和 0 行删除
  1 +import axios from 'axios'
  2 +import http from "../http";
  3 +
  4 +let baseServiceURL = 'cross-border-service'
  5 +
  6 +//新增客户配置
  7 +export const insertCustomer = params => { return http.post(`${baseServiceURL}/customer/insertCustomer`, params); };
  8 +//删除客户配置
  9 +export const delCustomer = params => { return axios.get(`${baseServiceURL}/customer/delCustomer`, { params: params }); };
  10 +//更新客户配置
  11 +export const ediCustomer = params => { return http.post(`${baseServiceURL}/customer/ediCustomer`, params); };
  12 +//客户配置列表
  13 +export const selectCustomers = params => { return axios.get(`${baseServiceURL}/customer/selectCustomers`, { params: params }); };
  1 +import axios from 'axios'
  2 +
  3 +let baseServiceURL = 'wms-server-warehouse'
  4 +
  5 +
  6 +
  7 +//危险品入库
  8 +export const dangerousImp = params => { return axios.get(`${baseServiceURL}/wms/newinventroyrecord/dangerousImport`, { params: params }); };
  9 +//危险品出库
  10 +export const dangerousExt = params => { return axios.get(`${baseServiceURL}/wms/newinventroyrecord/dangerousExt`, { params: params }); };
  11 +//预配信息查询
  12 +export const checkPre = params => { return axios.get(`${baseServiceURL}/wms/newinventroyrecord/checkPre`, { params: params }); };
  1 +import axios from 'axios'
  2 +import http from "../http";
  3 +
  4 +//let baseServiceURL = 'cross-border-service'
  5 +let baseServiceURL2 = 'wlpt-cbed-system'
  6 +
  7 +
  8 +
  9 +//订单列表
  10 +export const selectLists = params => { return axios.get(`${baseServiceURL2}/ExportOrderDeclaration/selectLists`, { params: params }); };
  11 +//订单申报
  12 +export const sendOrder = params => { return http.post(`${baseServiceURL2}/ExportOrderDeclaration/sendOrder`, params); };
  13 +//上传EXCEL
  14 +export const importExcel = params => { return http.postExcelData(`${baseServiceURL2}/import/importExcel`, params); };
  15 +//订单批量申报
  16 +export const batchOrder = params => { return http.post(`${baseServiceURL2}/ExportOrderDeclaration/batchOrder`, params); };
  17 +//订单批量导入申报
  18 +export const batchOrderImport = params => { return http.postExcelData(`${baseServiceURL2}/ExportOrderDeclaration/batchOrderImport`, params); };
  19 +//清单批量申报
  20 +export const eldhBatchDeclare = params => { return http.post(`${baseServiceURL2}/ExportListDeclaration/eldhBatchDeclare`, params); };
  21 +//清单批量导入申报
  22 +export const eldhImportDeclare = params => { return http.postExcelData(`${baseServiceURL2}/ExportListDeclaration/eldhImportDeclare`, params); };
  23 +//运单批量申报
  24 +export const eldBatchDeclare = params => { return http.post(`${baseServiceURL2}/ExportLogistics/eldBatchDeclare`, params); };
  25 +//运单批量导入申报
  26 +export const eldImportDeclare = params => { return http.postExcelData(`${baseServiceURL2}/ExportLogistics/eldImportDeclare`, params); };
  27 +//总分单批量申报
  28 +export const zfeldBatchDeclare = params => { return http.post(`${baseServiceURL2}/ExportWaybillDeclaration/eldBatchDeclare`, params); };
  29 +//总分单批量导入申报
  30 +export const zfeldImportDeclare = params => { return http.postExcelData(`${baseServiceURL2}/ExportWaybillDeclaration/eldImportDeclare`, params); };
@@ -79,6 +79,17 @@ export default { @@ -79,6 +79,17 @@ export default {
79 } 79 }
80 }); 80 });
81 }, 81 },
  82 + getPDF(url, params) {
  83 + return axios({
  84 + method: 'GET',
  85 + url: url,
  86 + responseType: 'blob',
  87 + params: params,
  88 + headers: {
  89 + 'Content-Type': 'application/x-www-form-urlencoded'
  90 + }
  91 + });
  92 + },
82 put(url, params){ 93 put(url, params){
83 return axios({ 94 return axios({
84 method: 'PUT', 95 method: 'PUT',
  1 +import http from "../http";
  2 +import axios from "axios";
  3 +let baseUrl = 'zhidan-service'
  4 +
  5 +//pdf导出
  6 +export const extPdf = params => { return http.getPDF(`${baseUrl}/zhidan/extpdf`, params); };
  7 +//excel导出
  8 +export const extExcel = params => { return http.getPDF(`${baseUrl}/zhidan/extexcel`, params); };
  9 +//导入excel
  10 +export const importExcel = params => { return http.postExcelData(`${baseUrl}/zhidan/importexcel`, params); };
  11 +//查询列表
  12 +export const selectLists = params => { return axios.get(`${baseUrl}/zhidan/selectLists`, { params: params }); };
  13 +
  14 +//费率新增
  15 +export const addRate = params =>{return http.post(`${baseUrl}/rate/addRate`, params);};
  16 +//费率删除
  17 +export const delRate = params => { return axios.get(`${baseUrl}/rate/delRate`, { params: params }); };
  18 +//费率更新
  19 +export const ediRate = params =>{return http.post(`${baseUrl}/rate/ediRate`, params);};
  20 +//费率查询
  21 +export const selectRate = params => { return axios.get(`${baseUrl}/rate/selectRate`, { params: params }); };
@@ -128,6 +128,8 @@ import area from './views/deploy/area.vue' @@ -128,6 +128,8 @@ import area from './views/deploy/area.vue'
128 import seller from './views/deploy/seller.vue' 128 import seller from './views/deploy/seller.vue'
129 import classification from './views/deploy/classification.vue' 129 import classification from './views/deploy/classification.vue'
130 import subscribe from './views/deploy/subscribe.vue' 130 import subscribe from './views/deploy/subscribe.vue'
  131 +import DangerousImport from './views/deploy/dangerImport.vue'
  132 +import DangerousExt from './views/deploy/dangerExt.vue'
131 import UNcode from './views/wms/UNcode.vue' 133 import UNcode from './views/wms/UNcode.vue'
132 134
133 //跨境电商 135 //跨境电商
@@ -196,7 +198,13 @@ import Dispatch from "./views/dispatch/Dispatch"; @@ -196,7 +198,13 @@ import Dispatch from "./views/dispatch/Dispatch";
196 import multiple from "./views/deploy/multiple"; 198 import multiple from "./views/deploy/multiple";
197 import satellite from "./views/deploy/satellite"; 199 import satellite from "./views/deploy/satellite";
198 200
  201 +/*出口订单*/
  202 +import ExortOrder from './views/exportorder/Exportorder.vue'
  203 +import CustomerConfig from './views/exportorder/CustomerConfig.vue'
199 204
  205 +/*制单管理*/
  206 +import ZhiDan from './views/zhidan/zhidan.vue'
  207 +import Rate from './views/zhidan/rate.vue'
200 208
201 let routes = [ 209 let routes = [
202 { 210 {
@@ -222,6 +230,26 @@ let routes = [ @@ -222,6 +230,26 @@ let routes = [
222 ] 230 ]
223 }, 231 },
224 { 232 {
  233 + path: '/order',
  234 + component: HomeNew,
  235 + name: '出口订单管理',
  236 + iconCls: 'el-icon-collection',
  237 + children: [
  238 + {path: '/ExortOrder', component: ExortOrder, name: '出口订单'},
  239 + {path: '/CustomerConfig', component: CustomerConfig, name: '客户配置'}
  240 + ]
  241 + },
  242 + {
  243 + path: '/zhidan',
  244 + component: HomeNew,
  245 + name: '制单管理',
  246 + iconCls: 'el-icon-collection',
  247 + children: [
  248 + {path: '/ZhiDan', component: ZhiDan, name: '制单信息'},
  249 + {path: '/Rate', component: Rate, name: '费率设置'}
  250 + ]
  251 + },
  252 + {
225 path: '/', 253 path: '/',
226 component: HomeNew, 254 component: HomeNew,
227 name: 'Charts', 255 name: 'Charts',
@@ -425,6 +453,7 @@ let routes = [ @@ -425,6 +453,7 @@ let routes = [
425 ] 453 ]
426 }, 454 },
427 455
  456 +
428 { 457 {
429 path: '/nmms2', 458 path: '/nmms2',
430 component: HomeNew, 459 component: HomeNew,
@@ -596,6 +625,8 @@ let routes = [ @@ -596,6 +625,8 @@ let routes = [
596 {path:'/seller',component:seller,name:'商品管理'}, 625 {path:'/seller',component:seller,name:'商品管理'},
597 {path:'/classification',component:classification,name:'分类监管申请'}, 626 {path:'/classification',component:classification,name:'分类监管申请'},
598 {path:'/subscribe',component:subscribe,name:'分类监管查询'}, 627 {path:'/subscribe',component:subscribe,name:'分类监管查询'},
  628 + {path:'/DangerousImport',component:DangerousImport,name:'危险品入库'},
  629 + {path:'/DangerousExt',component:DangerousExt,name:'危险品出库'},
599 {path:'/unCode',component:UNcode,name:'国际危险品代码管理'}, 630 {path:'/unCode',component:UNcode,name:'国际危险品代码管理'},
600 ] 631 ]
601 }, 632 },
  1 +<template>
  2 + <el-container class="form-container">
  3 + <el-header>
  4 + <h1>危险品出库</h1>
  5 + </el-header>
  6 + <el-main>
  7 + <el-card class="form-card">
  8 + <el-form :label-position="labelPosition" :model="form" ref="form" label-width="100px" :rules="rules">
  9 + <el-form-item label="运单号" prop="waybill">
  10 + <el-input class="form-input" v-model="form.waybill" placeholder="请输入运单号" clearable @blur="handleBlur"></el-input>
  11 + </el-form-item>
  12 + <el-form-item label="件数" prop="pcs">
  13 + <el-input class="form-input" type="number" v-model="form.pcs" placeholder="请输入件数" clearable></el-input>
  14 + </el-form-item>
  15 + <el-form-item label="重量 (kg)" prop="weight">
  16 + <el-input class="form-input" type="number" v-model="form.weight" placeholder="请输入重量" clearable></el-input>
  17 + </el-form-item>
  18 + <el-form-item label="危险品" prop="hazardous">
  19 + <el-select class="form-input" v-model="form.hazardous" placeholder="请选择">
  20 + <el-option
  21 + v-for="item in options"
  22 + :key="item.value"
  23 + :label="item.label"
  24 + :value="item.value">
  25 + </el-option>
  26 + </el-select>
  27 + </el-form-item>
  28 + <el-form-item>
  29 + <el-button type="primary" @click="submitForm" class="submit-button">危险品出库</el-button>
  30 + </el-form-item>
  31 + </el-form>
  32 + </el-card>
  33 + </el-main>
  34 + </el-container>
  35 +</template>
  36 +
  37 +<script>
  38 + import {selectNewInventroys} from '../../api/consigner/station'
  39 + import {dangerousExt,} from '../../api/consigner/dangerous'
  40 + export default {
  41 + data() {
  42 + return {
  43 + options: [
  44 + {
  45 + value: "3481",
  46 + label: '一般危险品'
  47 + }, {
  48 + value: "3091",
  49 + label: '锂电池'
  50 + }
  51 + ],
  52 + labelPosition:'left',
  53 + form: {
  54 + waybill: '',
  55 + pcs: null,
  56 + weight: null,
  57 + hazardous: '3481'
  58 + },
  59 + queryInfo: {
  60 + waybill:'',
  61 + billfhl:'',
  62 + locationno:'',
  63 + // 当前页数
  64 + pageNum: 1,
  65 + // 每页大小
  66 + pageSize: 10,
  67 + starttime:'',
  68 + endtime:'',
  69 + remark2:''
  70 + },
  71 + rules: {
  72 + waybill: [
  73 + { required: true, message: '运单号不能为空', trigger: 'blur' }
  74 + ],
  75 + pcs: [
  76 + { required: true, message: '件数不能为空', trigger: 'blur' }
  77 + ],
  78 + weight: [
  79 + { required: true, message: '重量不能为空', trigger: 'blur' }
  80 + ],
  81 + hazardous: [
  82 + { required: true, message: '请选择是否为危险品', trigger: 'change' }
  83 + ]
  84 + }
  85 + };
  86 + },
  87 + methods: {
  88 + submitForm() {
  89 + this.$refs.form.validate((valid) => {
  90 + if (valid) {
  91 + dangerousExt(this.form).then((response) => {
  92 + const res = response.data
  93 + if (res.code !== '200') {
  94 + return this.$message.error(res.msg)
  95 + }
  96 + this.$message.success(res.msg);
  97 + this.$refs.form.resetFields();
  98 + }).catch(error => {
  99 + // 关闭加载
  100 + this.$message.error(error.toString())
  101 + })
  102 + } else {
  103 + return false;
  104 + }
  105 + });
  106 + },
  107 + handleBlur() {
  108 + // 在这里处理失去焦点事件
  109 + if(this.form.waybill!==null && this.form.waybill!==''){
  110 + this.queryInfo.waybill=this.form.waybill;
  111 + selectNewInventroys(this.queryInfo).then((response) => {
  112 + const res = response.data
  113 + if (res.code !== '200') {
  114 + return this.$message.error('剩余库调取失败')
  115 + }
  116 + if(res.data.list!==null){
  117 + this.form.pcs=res.data.list[0].pcs;
  118 + this.form.weight=res.data.list[0].weight;
  119 + this.form.hazardous=res.data.list[0].remark3;
  120 + }
  121 + this.$message.success('库存调取成功')
  122 + }).catch(error => {
  123 + // 关闭加载
  124 + this.$message.error(error.toString())
  125 + })
  126 + }
  127 + // 你可以在这里执行其他操作，比如验证输入或发送请求等
  128 + }
  129 + }
  130 + };
  131 +</script>
  132 +
  133 +<style scoped>
  134 + .form-container {
  135 + background-color: #f5f5f5;
  136 + padding: 20px;
  137 + min-height: 100vh;
  138 + }
  139 +
  140 + .el-header {
  141 + text-align: center;
  142 + margin-bottom: 20px;
  143 + color: #333;
  144 + }
  145 +
  146 + .form-card {
  147 + background-color: #ffffff;
  148 + border-radius: 8px;
  149 + padding: 20px;
  150 + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  151 + }
  152 +
  153 + .form-input {
  154 + width: 100%; /* 设置宽度为100% */
  155 + }
  156 +
  157 + .submit-button {
  158 + width: 100%;
  159 + }
  160 +
  161 + .el-form-item {
  162 + margin-bottom: 15px;
  163 + }
  164 +
  165 + @media (max-width: 600px) {
  166 + .form-container {
  167 + padding: 10px;
  168 + }
  169 + }
  170 +</style>
  1 +<template>
  2 + <el-container class="form-container">
  3 + <el-header>
  4 + <h1>危险品入库</h1>
  5 + </el-header>
  6 + <el-main>
  7 + <el-card class="form-card">
  8 + <el-form :label-position="labelPosition" :model="form" ref="form" label-width="100px" :rules="rules">
  9 + <el-form-item label="运单号" prop="waybill">
  10 + <el-input class="form-input" v-model="form.waybill" placeholder="请输入运单号" clearable @blur="handleBlur"></el-input>
  11 + </el-form-item>
  12 + <el-form-item label="件数" prop="pcs">
  13 + <el-input class="form-input" type="number" v-model="form.pcs" placeholder="请输入件数" clearable></el-input>
  14 + </el-form-item>
  15 + <el-form-item label="重量 (kg)" prop="weight">
  16 + <el-input class="form-input" type="number" v-model="form.weight" placeholder="请输入重量" clearable></el-input>
  17 + </el-form-item>
  18 + <el-form-item label="危险品" prop="hazardous">
  19 + <el-select class="form-input" v-model="form.hazardous" placeholder="请选择">
  20 + <el-option
  21 + v-for="item in options"
  22 + :key="item.value"
  23 + :label="item.label"
  24 + :value="item.value">
  25 + </el-option>
  26 + </el-select>
  27 + </el-form-item>
  28 + <el-form-item>
  29 + <el-button type="success" @click="submitForm" class="submit-button">危险品入库</el-button>
  30 + </el-form-item>
  31 + </el-form>
  32 + </el-card>
  33 + </el-main>
  34 + </el-container>
  35 +</template>
  36 +
  37 +<script>
  38 + import {dangerousImp,checkPre} from '../../api/consigner/dangerous'
  39 + import axios from 'axios';
  40 + export default {
  41 + data() {
  42 + return {
  43 + responseData: null,
  44 + options: [
  45 + {
  46 + value: "3481",
  47 + label: '一般危险品'
  48 + }, {
  49 + value: "3091",
  50 + label: '锂电池'
  51 + }
  52 + ],
  53 + labelPosition:'left',
  54 + form: {
  55 + waybill: '',
  56 + pcs: null,
  57 + weight: null,
  58 + hazardous: '3481'
  59 + },
  60 + rules: {
  61 + waybill: [
  62 + { required: true, message: '运单号不能为空', trigger: 'blur' }
  63 + ],
  64 + pcs: [
  65 + { required: true, message: '件数不能为空', trigger: 'blur' }
  66 + ],
  67 + weight: [
  68 + { required: true, message: '重量不能为空', trigger: 'blur' }
  69 + ],
  70 + hazardous: [
  71 + { required: true, message: '请选择是否为危险品', trigger: 'change' }
  72 + ]
  73 + }
  74 + };
  75 + },
  76 + methods: {
  77 + submitForm() {
  78 + this.$refs.form.validate((valid) => {
  79 + if (valid) {
  80 + dangerousImp(this.form).then((response) => {
  81 + const res = response.data
  82 + if (res.code !== '200') {
  83 + return this.$message.error(res.msg)
  84 + }
  85 + this.$message.success(res.msg);
  86 + this.$refs.form.resetFields();
  87 + }).catch(error => {
  88 + // 关闭加载
  89 + this.$message.error(error.toString())
  90 + })
  91 + } else {
  92 + return false;
  93 + }
  94 + });
  95 + },
  96 + handleBlur() {
  97 + if(this.form.waybill!==null && this.form.waybill!==''){
  98 + checkPre({waybill:this.form.waybill}).then((response) => {
  99 + const res = response.data
  100 + if (res.code !== '200') {
  101 + return this.$message.error(res.msg)
  102 + }
  103 + this.$message.success(res.msg);
  104 + this.form.pcs=res.data.pcs;
  105 + this.form.weight=res.data.weight;
  106 + }).catch(error => {
  107 + // 关闭加载
  108 + this.$message.error(error.toString())
  109 + })
  110 + }
  111 + }
  112 + },
  113 +
  114 + };
  115 +</script>
  116 +
  117 +<style scoped>
  118 + .form-container {
  119 + background-color: #f5f5f5;
  120 + padding: 20px;
  121 + min-height: 100vh;
  122 + }
  123 +
  124 + .el-header {
  125 + text-align: center;
  126 + margin-bottom: 20px;
  127 + color: #333;
  128 + }
  129 +
  130 + .form-card {
  131 + background-color: #ffffff;
  132 + border-radius: 8px;
  133 + padding: 20px;
  134 + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  135 + }
  136 +
  137 + .form-input {
  138 + width: 100%; /* 设置宽度为100% */
  139 + }
  140 +
  141 + .submit-button {
  142 + width: 100%;
  143 + }
  144 +
  145 + .el-form-item {
  146 + margin-bottom: 15px;
  147 + }
  148 +
  149 + @media (max-width: 600px) {
  150 + .form-container {
  151 + padding: 10px;
  152 + }
  153 + }
  154 +</style>
  1 +<template>
  2 + <div>
  3 + <!-- 第一行 -->
  4 + <el-row :gutter="24" >
  5 + <el-col :span="4">
  6 + <el-input size="medium" v-model="query.clientCode" placeholder="客户编码" clearable></el-input>
  7 + </el-col>
  8 + <el-col :span="4">
  9 + <el-input size="medium" v-model="query.ebcname" placeholder="电商企业名称" clearable></el-input>
  10 + </el-col>
  11 + <el-col :span="4">
  12 + <el-input size="medium" v-model="query.ebpname" placeholder="平台企业名称" clearable></el-input>
  13 + </el-col>
  14 + <el-col :span="4">
  15 + <el-input size="medium" v-model="query.logisticsName" placeholder="物流企业名称" clearable></el-input>
  16 + </el-col>
  17 + <el-col :span="4">
  18 + <el-input size="medium" v-model="query.agentName" placeholder="申报企业名称" clearable></el-input>
  19 + </el-col>
  20 + </el-row>
  21 +
  22 + <!-- 第二行 -->
  23 + <el-row :gutter="24" >
  24 + <el-col :span="4">
  25 + <el-input size="medium" v-model="query.customsName" placeholder="申报口岸名称" clearable></el-input>
  26 + </el-col>
  27 + </el-row>
  28 +
  29 + <!-- 第三行 -->
  30 + <el-row :gutter="24" >
  31 + <el-col :span="1.5">
  32 + <el-button size="medium" @click="getList">查询</el-button>
  33 + </el-col>
  34 + <el-col :span="1.5">
  35 + <el-button size="medium" type="info" @click="exportDataToExcel">导出</el-button>
  36 + </el-col>
  37 + <el-col :span="1.5">
  38 + <el-button size="medium" type="success" @click="addForm">新增</el-button>
  39 + </el-col>
  40 + <el-col :span="1.5">
  41 + <el-button size="medium" type="danger">删除</el-button>
  42 + </el-col>
  43 + </el-row>
  44 + <el-row :gutter="24" style="margin-left: 3px">
  45 + <el-table
  46 + ref="multipleTable"
  47 + :data="tableData"
  48 + tooltip-effect="dark"
  49 + style="width: 100%;"
  50 + size="medium"
  51 + @selection-change="handleSelectionChange">
  52 + <el-table-column
  53 + type="selection"
  54 + width="55">
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="clientCode"
  58 + label="客户编码"
  59 + width="120"
  60 + >
  61 + </el-table-column>
  62 + <el-table-column
  63 + prop="clientName"
  64 + label="客户名称"
  65 + width="120"
  66 + show-overflow-tooltip>
  67 + </el-table-column>
  68 + <!--<el-table-column
  69 + label="电商企业代码"
  70 + prop="ebccode"
  71 + width="120">
  72 + </el-table-column>-->
  73 + <el-table-column
  74 + prop="ebcname"
  75 + label="电商企业名称"
  76 + width="120"
  77 + show-overflow-tooltip>
  78 + </el-table-column>
  79 + <!--<el-table-column
  80 + prop="ebpcode"
  81 + label="电商平台代码"
  82 + show-overflow-tooltip>
  83 + </el-table-column>-->
  84 + <el-table-column
  85 + prop="ebpname"
  86 + label="电商平台名称"
  87 + width="120"
  88 + show-overflow-tooltip>
  89 + </el-table-column>
  90 + <!--<el-table-column
  91 + prop="logisticsCode"
  92 + label="物流企业代码"
  93 + show-overflow-tooltip>
  94 + </el-table-column>-->
  95 + <el-table-column
  96 + prop="logisticsName"
  97 + label="物流企业名称"
  98 + width="120"
  99 + show-overflow-tooltip>
  100 + </el-table-column>
  101 + <!--<el-table-column
  102 + prop="agentCode"
  103 + label="申报企业代码"
  104 + show-overflow-tooltip>
  105 + </el-table-column>-->
  106 + <el-table-column
  107 + prop="agentName"
  108 + label="申报企业名称"
  109 + width="120"
  110 + show-overflow-tooltip>
  111 + </el-table-column>
  112 + <!--<el-table-column
  113 + prop="customsCode"
  114 + label="申报口岸代码"
  115 + show-overflow-tooltip>
  116 + </el-table-column>-->
  117 + <el-table-column
  118 + prop="customsName"
  119 + label="申报口岸名称"
  120 + width="120"
  121 + show-overflow-tooltip>
  122 + </el-table-column>
  123 + <!--<el-table-column
  124 + prop="portCode"
  125 + label="出口口岸代码"
  126 + show-overflow-tooltip>
  127 + </el-table-column>-->
  128 + <el-table-column
  129 + prop="portName"
  130 + label="出口口岸名称"
  131 + width="120"
  132 + show-overflow-tooltip>
  133 + </el-table-column>
  134 + <!--<el-table-column
  135 + prop="ownerCode"
  136 + label="生产销售企业代码"
  137 + show-overflow-tooltip>
  138 + </el-table-column>-->
  139 + <el-table-column
  140 + prop="ownerName"
  141 + label="生产销售企业"
  142 + width="120"
  143 + show-overflow-tooltip>
  144 + </el-table-column>
  145 + <el-table-column
  146 + prop="loctNo"
  147 + label="监管场所"
  148 + show-overflow-tooltip>
  149 + </el-table-column>
  150 + <el-table-column
  151 + prop="createTime"
  152 + label="创建时间"
  153 + show-overflow-tooltip>
  154 + </el-table-column>
  155 +
  156 + <el-table-column
  157 + fixed="right"
  158 + label="操作"
  159 + width="120">
  160 + <template slot-scope="scope">
  161 + <el-button
  162 + @click.native.prevent="ediForm(scope.row)"
  163 + type="text"
  164 + style="color: #5BB75B"
  165 + size="small">
  166 + 更新
  167 + </el-button>
  168 + <el-button
  169 + @click.native.prevent="deleteRow(scope.row.id)"
  170 + type="text"
  171 + style="color: #5BB75B"
  172 + size="small">
  173 + 移除
  174 + </el-button>
  175 + </template>
  176 + </el-table-column>
  177 + </el-table>
  178 + </el-row>
  179 + <el-row>
  180 + <div class="block">
  181 + <el-pagination
  182 + @size-change="handleSizeChange"
  183 + @current-change="handleCurrentChange"
  184 + :current-page="query.pageNum"
  185 + :page-sizes="[100, 200, 300, 400]"
  186 + :page-size="query.pageSize"
  187 + layout="total, sizes, prev, pager, next, jumper"
  188 + :total="total">
  189 + </el-pagination>
  190 + </div>
  191 + </el-row>
  192 + <el-dialog
  193 + :title="'客户信息'+textMap[dialogStatus]"
  194 + :visible.sync="dialogVisible"
  195 + width="65%"
  196 + :before-close="handleClose">
  197 + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
  198 + <el-row :gutter="20">
  199 + <el-col :span="10">
  200 + <el-form-item label="客户编码" prop="clientCode">
  201 + <el-input size="medium" v-model="ruleForm.clientCode"></el-input>
  202 + </el-form-item>
  203 + </el-col>
  204 + <el-col :span="10">
  205 + <el-form-item label="客户名称" prop="clientName">
  206 + <el-input size="medium" v-model="ruleForm.clientName"></el-input>
  207 + </el-form-item>
  208 + </el-col>
  209 + </el-row>
  210 + <el-row :gutter="20">
  211 + <el-col :span="10">
  212 + <el-form-item label="电商企业代码" prop="ebccode">
  213 + <el-input size="medium" v-model="ruleForm.ebccode"></el-input>
  214 + </el-form-item>
  215 + </el-col>
  216 + <el-col :span="10">
  217 + <el-form-item label="电商企业名称" prop="ebcname">
  218 + <el-input size="medium" v-model="ruleForm.ebcname"></el-input>
  219 + </el-form-item>
  220 + </el-col>
  221 + </el-row>
  222 + <el-row :gutter="20">
  223 + <el-col :span="10">
  224 + <el-form-item label="电商平台代码" prop="ebpcode">
  225 + <el-input size="medium" v-model="ruleForm.ebpcode"></el-input>
  226 + </el-form-item>
  227 + </el-col>
  228 + <el-col :span="10">
  229 + <el-form-item label="电商平台名称" prop="ebpname">
  230 + <el-input size="medium" v-model="ruleForm.ebpname"></el-input>
  231 + </el-form-item>
  232 + </el-col>
  233 + </el-row>
  234 + <el-row :gutter="20">
  235 + <el-col :span="10">
  236 + <el-form-item label="物流企业代码" prop="logisticsCode">
  237 + <el-input size="medium" v-model="ruleForm.logisticsCode"></el-input>
  238 + </el-form-item>
  239 + </el-col>
  240 + <el-col :span="10">
  241 + <el-form-item label="物流企业名称" prop="logisticsName">
  242 + <el-input size="medium" v-model="ruleForm.logisticsName"></el-input>
  243 + </el-form-item>
  244 + </el-col>
  245 + </el-row>
  246 + <el-row :gutter="20">
  247 + <el-col :span="10">
  248 + <el-form-item label="申报企业代码" prop="agentCode">
  249 + <el-input size="medium" v-model="ruleForm.agentCode"></el-input>
  250 + </el-form-item>
  251 + </el-col>
  252 + <el-col :span="10">
  253 + <el-form-item label="申报企业名称" prop="agentName">
  254 + <el-input size="medium" v-model="ruleForm.agentName"></el-input>
  255 + </el-form-item>
  256 + </el-col>
  257 + </el-row>
  258 + <el-row :gutter="20">
  259 + <el-col :span="10">
  260 + <el-form-item label="申报口岸代码" prop="customsCode">
  261 + <el-input size="medium" v-model="ruleForm.customsCode"></el-input>
  262 + </el-form-item>
  263 + </el-col>
  264 + <el-col :span="10">
  265 + <el-form-item label="申报口岸名称" prop="customsName">
  266 + <el-input size="medium" v-model="ruleForm.customsName"></el-input>
  267 + </el-form-item>
  268 + </el-col>
  269 + </el-row>
  270 + <el-row :gutter="20">
  271 + <el-col :span="10">
  272 + <el-form-item label="出口口岸代码" prop="portCode">
  273 + <el-input size="medium" v-model="ruleForm.portCode"></el-input>
  274 + </el-form-item>
  275 + </el-col>
  276 + <el-col :span="10">
  277 + <el-form-item label="出口口岸名称" prop="portName">
  278 + <el-input size="medium" v-model="ruleForm.portName"></el-input>
  279 + </el-form-item>
  280 + </el-col>
  281 + </el-row>
  282 + <el-row :gutter="20">
  283 + <el-col :span="10">
  284 + <el-form-item label="出口口岸代码" prop="portCode">
  285 + <el-input size="medium" v-model="ruleForm.portCode"></el-input>
  286 + </el-form-item>
  287 + </el-col>
  288 + <el-col :span="10">
  289 + <el-form-item label="出口口岸名称" prop="portName">
  290 + <el-input size="medium" v-model="ruleForm.portName"></el-input>
  291 + </el-form-item>
  292 + </el-col>
  293 + </el-row>
  294 + <el-row :gutter="20">
  295 + <el-col :span="10">
  296 + <el-form-item label="生产销售企业代码" prop="ownerCode">
  297 + <el-input size="medium" v-model="ruleForm.ownerCode"></el-input>
  298 + </el-form-item>
  299 + </el-col>
  300 + <el-col :span="10">
  301 + <el-form-item label="生产销售企业名称" prop="ownerName">
  302 + <el-input size="medium" v-model="ruleForm.ownerName"></el-input>
  303 + </el-form-item>
  304 + </el-col>
  305 + </el-row>
  306 + <el-row :gutter="20">
  307 + <el-col :span="10">
  308 + <el-form-item label="监管场所" prop="loctNo">
  309 + <el-input size="medium" v-model="ruleForm.loctNo"></el-input>
  310 + </el-form-item>
  311 + </el-col>
  312 + </el-row>
  313 + <el-row :gutter="20">
  314 + <el-col :span="20">
  315 + <el-form-item>
  316 + <el-button size="medium" type="primary" @click="dialogStatus==='create'?addsubmitForm('ruleForm'):edisubmitForm('ruleForm')">保存</el-button>
  317 + </el-form-item>
  318 + </el-col>
  319 + </el-row>
  320 + </el-form>
  321 + </el-dialog>
  322 + </div>
  323 +</template>
  324 +
  325 +<script>
  326 + import {insertCustomer,delCustomer,ediCustomer,selectCustomers} from '../../api/consigner/customerconfig'
  327 + import * as XLSX from 'xlsx';
  328 + import { saveAs } from 'file-saver';
  329 + export default {
  330 + data() {
  331 + return {
  332 + dialogStatus: '',
  333 + dialogVisible: false,
  334 + textMap: {
  335 + update: '更新',
  336 + create: '新增'
  337 + },
  338 + ruleForm: {
  339 + id:0,
  340 + userId:'',
  341 + userName:'',
  342 + ext1:'',
  343 + ext2:'',
  344 + ext3:'',
  345 + clientCode: '',
  346 + clientName:'',
  347 + ebccode:'',
  348 + ebcname: '',
  349 + ebpcode:'',
  350 + ebpname:'',
  351 + logisticsCode:'',
  352 + logisticsName:'',
  353 + agentCode:'',
  354 + agentName:'',
  355 + customsCode:'',
  356 + customsName:'',
  357 + portCode:'',
  358 + portName:'',
  359 + ownerCode:'',
  360 + ownerName:'',
  361 + loctNo:''
  362 + },
  363 + rules: {
  364 + clientCode: [
  365 + { required: true, message: '请输入客户编码', trigger: 'blur' },
  366 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  367 + ],
  368 + clientName: [
  369 + { required: true, message: '请输入客户名称', trigger: 'blur' },
  370 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  371 + ],
  372 + ebccode: [
  373 + { required: true, message: '请输入电商企业代码', trigger: 'blur' },
  374 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  375 + ],
  376 + ebcname: [
  377 + { required: true, message: '请输入电商企业名称', trigger: 'blur' },
  378 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  379 + ],
  380 + ebpcode: [
  381 + { required: true, message: '请输入电商平台代码', trigger: 'blur' },
  382 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  383 + ],
  384 + ebpname: [
  385 + { required: true, message: '请输入电商平台名称', trigger: 'blur' },
  386 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  387 + ],
  388 + logisticsCode: [
  389 + { required: true, message: '请输入物流企业代码', trigger: 'blur' },
  390 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  391 + ],
  392 + logisticsName: [
  393 + { required: true, message: '请输入物流企业名称', trigger: 'blur' },
  394 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  395 + ],
  396 + agentCode: [
  397 + { required: true, message: '请输入申报企业代码', trigger: 'blur' },
  398 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  399 + ],
  400 + agentName: [
  401 + { required: true, message: '请输入申报企业名称', trigger: 'blur' },
  402 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  403 + ],
  404 + customsCode: [
  405 + { required: true, message: '请输入申报口岸代码', trigger: 'blur' },
  406 + { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
  407 + ],
  408 + customsName: [
  409 + { required: true, message: '请输入申报口岸名称', trigger: 'blur' },
  410 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  411 + ],
  412 + portCode: [
  413 + { required: true, message: '请输入出口口岸代码', trigger: 'blur' },
  414 + { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
  415 + ],
  416 + portName: [
  417 + { required: true, message: '请输入出口口岸名称', trigger: 'blur' },
  418 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  419 + ],
  420 + ownerCode: [
  421 + { required: true, message: '生产销售企业代码', trigger: 'blur' },
  422 + { min: 1, max: 4, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  423 + ],
  424 + ownerName: [
  425 + { required: true, message: '生产销售企业名称', trigger: 'blur' },
  426 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  427 + ]
  428 + },
  429 + total:0,
  430 + tableData: [],
  431 + multipleSelection: [],
  432 + query: {
  433 + clientCode: '',
  434 + ebcname: '',
  435 + ebpname: '',
  436 + logisticsName: '',
  437 + agentName: '',
  438 + customsName: '',
  439 + pageNum:1,
  440 + pageSize:20
  441 + },
  442 + };
  443 + },
  444 + mounted() {
  445 + this.getList();
  446 + },
  447 + methods: {
  448 + addForm(){
  449 + this.dialogVisible = true;
  450 + this.dialogStatus = 'create';
  451 + },
  452 + ediForm(row){
  453 + this.dialogVisible = true;
  454 + this.dialogStatus = 'update';
  455 + this.ruleForm=row;
  456 + },
  457 + //Dialog关闭提示
  458 + handleClose(done) {
  459 + this.$confirm('确认关闭？')
  460 + .then(_ => {
  461 + done();
  462 + })
  463 + .catch(_ => {
  464 + });
  465 + },
  466 + addsubmitForm(formName) {
  467 + this.$refs[formName].validate((valid) => {
  468 + if (valid) {
  469 + this.ruleForm.id='';
  470 + insertCustomer(this.ruleForm).then((response) => {
  471 + const res = response.data
  472 + if (res.code !== '200') {
  473 + return this.$message.error('资源添加，失败！')
  474 + }
  475 + this.$message.success('资源添加，成功！')
  476 + this.dialogVisible = false;
  477 + this.getList();
  478 + }).catch(error => {
  479 + // 关闭加载
  480 + this.$message.warning('资源添加，失败！')
  481 + })
  482 + } else {
  483 + console.log('error submit!!');
  484 + return false;
  485 + }
  486 + });
  487 + },
  488 + edisubmitForm(formName) {
  489 + this.$refs[formName].validate((valid) => {
  490 + if (valid) {
  491 + ediCustomer(this.ruleForm).then((response) => {
  492 + const res = response.data
  493 + if (res.code !== '200') {
  494 + return this.$message.error('更新资源添加，失败！')
  495 + }
  496 + this.$message.success('更新资源添加，成功！')
  497 + this.dialogVisible = false;
  498 + this.getList();
  499 + }).catch(error => {
  500 + // 关闭加载
  501 + this.$message.warning('更新资源添加，失败！')
  502 + })
  503 + } else {
  504 + console.log('error submit!!');
  505 + return false;
  506 + }
  507 + });
  508 + },
  509 + getList(){
  510 + selectCustomers(this.query).then((response) => {
  511 + const res = response.data
  512 + if (res.code !== '200') {
  513 + return this.$message.error('获取消息收发记录，失败！')
  514 + }
  515 + // 获取列表数据
  516 + this.tableData = res.data.list
  517 + // 获取列表的总记录数
  518 + this.total = res.data.total
  519 + this.$message.success('获取消息收发记录，成功！');
  520 + }).catch(error => {
  521 + // 关闭加载
  522 + this.$message.error(error.toString())
  523 + })
  524 + },
  525 + handleSizeChange(val) {
  526 + this.query.pageSize=val;
  527 + this.getList();
  528 + },
  529 + handleCurrentChange(val) {
  530 + this.query.pageNum=val;
  531 + this.getList()
  532 + },
  533 + deleteRow(id) {
  534 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  535 + confirmButtonText: '确定删除',
  536 + cancelButtonText: '取消',
  537 + type: 'warning'
  538 + }
  539 + ).then(() => {
  540 + delCustomer({id: id}).then((response) => {
  541 + const res = response.data
  542 + this.$message.success(res.msg)
  543 + this.getList()
  544 + }).catch(error => {
  545 + this.$message.error('删除车载运单，失败！')
  546 + })
  547 + }).catch(() => {
  548 + })
  549 + },
  550 + handleSelectionChange(val) {
  551 + this.multipleSelection = val;
  552 + },
  553 + exportDataToExcel() {
  554 + // 获取当前日期作为文件名的一部分
  555 + const currentDate = new Date();
  556 + const fileName = `导出数据_${currentDate.toISOString().split('T')[0]}.xlsx`;
  557 +
  558 + // 将表格数据转换为Excel格式
  559 + const ws = XLSX.utils.json_to_sheet(this.tableData);
  560 + const wb = XLSX.utils.book_new();
  561 + XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  562 +
  563 + // 导出为Excel文件
  564 + XLSX.writeFile(wb, fileName);
  565 +
  566 + // 或者使用file-saver保存文件
  567 + // const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  568 + // try {
  569 + // saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
  570 + // } catch (e) {
  571 + // if (typeof console !== 'undefined') console.log(e, wbout);
  572 + // }
  573 + }
  574 + }
  575 + };
  576 +</script>
  577 +
  578 +<style scoped>
  579 +
  580 +</style>
  1 +<template>
  2 + <div class="table-container">
  3 + <div>
  4 + <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
  5 + <el-form-item label="">
  6 + <el-input size="medium" v-model="queryInfo.ext1" class="" placeholder="客户编码"></el-input>
  7 + </el-form-item>
  8 + <el-form-item label="">
  9 + <el-input size="medium" v-model="queryInfo.orderno" placeholder="订单号"></el-input>
  10 + </el-form-item>
  11 + <el-form-item label="">
  12 + <el-select size="medium" v-model="queryInfo.ordertype" placeholder="订单类型">
  13 + <el-option
  14 + v-for="item in ordertypes"
  15 + :key="item.value"
  16 + :label="item.label"
  17 + :value="item.value">
  18 + </el-option>
  19 + </el-select>
  20 + </el-form-item>
  21 + <el-form-item label="">
  22 + <el-select size="medium" v-model="queryInfo.apptype" placeholder="报送类型">
  23 + <el-option
  24 + v-for="item in apptypes"
  25 + :key="item.value"
  26 + :label="item.label"
  27 + :value="item.value">
  28 + </el-option>
  29 + </el-select>
  30 + </el-form-item>
  31 + <el-form-item label="">
  32 + <el-select size="medium" v-model="queryInfo.appstatus" placeholder="报关状态">
  33 + <el-option
  34 + v-for="item in appstatuss"
  35 + :key="item.value"
  36 + :label="item.label"
  37 + :value="item.value">
  38 + </el-option>
  39 + </el-select>
  40 + </el-form-item>
  41 + <el-form-item>
  42 + <div class="block">
  43 + <el-date-picker
  44 + style="background: none"
  45 + size="medium"
  46 + v-model="value2"
  47 + type="daterange"
  48 + align="right"
  49 + unlink-panels
  50 + range-separator="至"
  51 + start-placeholder="开始日期"
  52 + end-placeholder="结束日期"
  53 + value-format="yyyy-MM-dd HH:mm:ss"
  54 + :picker-options="pickerOptions">
  55 + </el-date-picker>
  56 + </div>
  57 + </el-form-item>
  58 + <el-form-item>
  59 + <el-button size="medium" @click="getList" style="background: none">查询</el-button>
  60 + </el-form-item>
  61 + <el-form-item>
  62 + <el-upload
  63 + class="upload-demo"
  64 + action=""
  65 + :before-upload="beforeUpload"
  66 + :http-request="uploadFile"
  67 + :show-file-list="false">
  68 + <el-button size="medium" type="primary">导入订单</el-button>
  69 + </el-upload>
  70 + </el-form-item>
  71 + </el-form>
  72 + </div>
  73 + <div style="margin-bottom: 20px">
  74 + <el-row :gutter="24">
  75 + <el-col :span="3">
  76 + <el-button size="medium" @click="batchOrder" style="background: none">订单批量申报</el-button>
  77 + </el-col>
  78 + <el-col :span="4">
  79 + <el-upload
  80 + class="upload-demo"
  81 + action=""
  82 + :before-upload="beforeUpload"
  83 + :http-request="batchOrderImport"
  84 + :show-file-list="false">
  85 + <el-button size="medium" style="background: none">订单批量导入申报</el-button>
  86 + </el-upload>
  87 + </el-col>
  88 + <el-col :span="3">
  89 + <el-button size="medium" @click="batchDeclare" style="background: none">清单批量申报</el-button>
  90 + </el-col>
  91 + <el-col :span="4">
  92 + <el-upload
  93 + class="upload-demo"
  94 + action=""
  95 + :before-upload="beforeUpload"
  96 + :http-request="batchDeclareImport"
  97 + :show-file-list="false">
  98 + <el-button size="medium" style="background: none">清单批量导入申报</el-button>
  99 + </el-upload>
  100 + </el-col>
  101 + <el-col :span="3">
  102 + <el-button size="medium" @click="ydeldBatchDeclare" style="background: none">运单批量申报</el-button>
  103 + </el-col>
  104 + <el-col :span="4">
  105 + <el-upload
  106 + class="upload-demo"
  107 + action=""
  108 + :before-upload="beforeUpload"
  109 + :http-request="ydbatchDeclareImport"
  110 + :show-file-list="false">
  111 + <el-button size="medium" style="background: none">运单批量导入申报</el-button>
  112 + </el-upload>
  113 + </el-col>
  114 + </el-row>
  115 + </div>
  116 + <div style="margin-bottom: 20px">
  117 + <el-row :gutter="24">
  118 + <el-col :span="3">
  119 + <el-button size="medium" @click="zfbatchOrder" style="background: none">总分单批量申报</el-button>
  120 + </el-col>
  121 + <el-col :span="4">
  122 + <el-upload
  123 + class="upload-demo"
  124 + action=""
  125 + :before-upload="beforeUpload"
  126 + :http-request="zfbatchOrderImport"
  127 + :show-file-list="false">
  128 + <el-button size="medium" style="background: none">总分单批量导入申报</el-button>
  129 + </el-upload>
  130 + </el-col>
  131 + </el-row>
  132 + </div>
  133 +
  134 + <el-table
  135 + :data="tableData"
  136 + style="width: 100%"
  137 + row-key="guid"
  138 + :expand-row-keys="expandedRowKeys"
  139 + @selection-change="handleSelectionChange"
  140 + border
  141 + stripe
  142 + >
  143 + <el-table-column type="expand" label="详细信息">
  144 + <template v-slot:default="{ row }">
  145 + <el-table
  146 + :data="row.exportOrderDeclarationBodyList"
  147 + style="width: 85%;margin-left: 45px"
  148 + row-key="id"
  149 + stripe
  150 + >
  151 + <el-table-column prop="itemno" label="企业商品货号" />
  152 + <el-table-column prop="itemname" label="企业商品名称" />
  153 + <el-table-column prop="itemdescribe" label="企业商品描述" />
  154 + <el-table-column prop="barcode" label="条形码" />
  155 + <el-table-column prop="unit" label="计量单位" />
  156 + <el-table-column prop="currency" label="币制" />
  157 + <el-table-column prop="qty" label="数量" />
  158 + <el-table-column prop="price" label="单价" />
  159 + <el-table-column prop="totalprice" label="总价" />
  160 + <el-table-column prop="note" label="备注" />
  161 + </el-table>
  162 + </template>
  163 + </el-table-column>
  164 + <el-table-column type="selection" width="55"></el-table-column>
  165 + <el-table-column prop="ext1" label="客户编号" width="180"></el-table-column>
  166 + <el-table-column prop="orderno" label="订单编号" width="180"></el-table-column>
  167 + <el-table-column prop="ordertype" label="订单类型" width="120">
  168 + <template slot-scope="scope">
  169 + <span v-if="scope.row.ordertype==='E'">
  170 + B2C
  171 + </span>
  172 + <span v-else-if="scope.row.ordertype==='B'">
  173 + B2B
  174 + </span>
  175 + <span v-else>
  176 + 海外仓
  177 + </span>
  178 + </template>
  179 + </el-table-column>
  180 + <el-table-column prop="apptype" label="报送类型" width="120">
  181 + <template slot-scope="scope">
  182 + <span v-if="scope.row.apptype==='1'">
  183 + 新增
  184 + </span>
  185 + <span v-else>
  186 + 变更
  187 + </span>
  188 + </template>
  189 + </el-table-column>
  190 + <el-table-column prop="apptime" label="报送时间" width="180"></el-table-column>
  191 + <el-table-column prop="appstatus" label="报送状态" width="120">
  192 + <template slot-scope="scope">
  193 + <span v-if="scope.row.appstatus==='1'">
  194 + 暂存
  195 + </span>
  196 + <span v-else>
  197 + 申报
  198 + </span>
  199 + </template>
  200 + </el-table-column>
  201 + <el-table-column prop="ebpname" label="电商平台" width="180"></el-table-column>
  202 + <el-table-column prop="goodsvalue" label="商品金额" width="120"></el-table-column>
  203 + <el-table-column prop="freight" label="运杂费" width="120"></el-table-column>
  204 + <el-table-column prop="note" label="备注" width="180"></el-table-column>
  205 + <el-table-column
  206 + fixed="right"
  207 + label="操作"
  208 + width="180"
  209 + show-overflow-tooltip>
  210 + <template slot-scope="scope">
  211 + <el-button type="text" size="small" @click="sendorder(scope.row)">订单申报</el-button>
  212 + <el-button type="text" size="small" @click="sendDeclare(scope.row)">清单申报</el-button>
  213 + </template>
  214 + </el-table-column>
  215 + </el-table>
  216 + <div class="block">
  217 + <el-pagination
  218 + @size-change="handleSizeChange"
  219 + @current-change="handleCurrentChange"
  220 + :current-page="queryInfo.pageNum"
  221 + :page-sizes="[20, 30, 40, 100]"
  222 + :page-size="queryInfo.pageSize"
  223 + layout="total, sizes, prev, pager, next, jumper"
  224 + :total="total">
  225 + </el-pagination>
  226 + </div>
  227 + </div>
  228 +</template>
  229 +
  230 +<script>
  231 + import {sendOrder,selectLists,batchOrder,batchOrderImport,importExcel,eldhBatchDeclare,eldhImportDeclare,
  232 + eldBatchDeclare,eldImportDeclare,zfeldBatchDeclare,zfeldImportDeclare} from '../../api/consigner/exportOrder'
  233 + export default {
  234 + data() {
  235 + return {
  236 + apptypes: [
  237 + {
  238 + value: '1',
  239 + label: '新增'
  240 + }, {
  241 + value: '2',
  242 + label: '变更'
  243 + }
  244 + ],
  245 + appstatuss: [
  246 + {
  247 + value: '1',
  248 + label: '暂存'
  249 + }, {
  250 + value: '2',
  251 + label: '申报'
  252 + }
  253 + ],
  254 + ordertypes: [
  255 + {
  256 + value: 'E',
  257 + label: 'B2C出口订单'
  258 + }, {
  259 + value: 'B',
  260 + label: 'B2B出口订单'
  261 + }, {
  262 + value: 'W',
  263 + label: '海外仓订仓单'
  264 + }
  265 + ],
  266 + tableData: [],
  267 + selectedRows: [],
  268 + expandedRowKeys: [],
  269 + queryInfo:{
  270 + appstatus:'',
  271 + apptype:'',
  272 + orderno:'',
  273 + ordertype:'',
  274 + ext1:'',
  275 + starttime:'',
  276 + endtime:'',
  277 + pageNum:1,
  278 + pageSize:20
  279 + },
  280 + total:0,
  281 + pickerOptions: {
  282 + shortcuts: [{
  283 + text: '最近一周',
  284 + onClick(picker) {
  285 + const end = new Date();
  286 + const start = new Date();
  287 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  288 + picker.$emit('pick', [start, end]);
  289 + }
  290 + }, {
  291 + text: '最近一个月',
  292 + onClick(picker) {
  293 + const end = new Date();
  294 + const start = new Date();
  295 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  296 + picker.$emit('pick', [start, end]);
  297 + }
  298 + }, {
  299 + text: '最近三个月',
  300 + onClick(picker) {
  301 + const end = new Date();
  302 + const start = new Date();
  303 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  304 + picker.$emit('pick', [start, end]);
  305 + }
  306 + }]
  307 + },
  308 + value2:'',
  309 + transformedData:''
  310 + };
  311 + },
  312 + mounted() {
  313 + // this.expandedRowKeys = this.tableData.map(item => item.guid);
  314 + this.getList();
  315 + },
  316 + methods: {
  317 + //运单批量导入申报
  318 + zfbatchOrderImport({ file, onSuccess, onError }){
  319 + // 生成 FormData 对象
  320 + const formData = new FormData();
  321 + formData.append('file', file);
  322 + zfeldImportDeclare(formData).then((response) => {
  323 + const res = response.data
  324 + if (res.code !== '200') {
  325 + return this.$message.error(res.msg);
  326 + }
  327 + this.$message.success(res.msg);
  328 + this.getList();
  329 + onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
  330 + }).catch(error => {
  331 + // 关闭加载
  332 + this.$message.error(error.toString())
  333 + onError(error); // 调用 onError 回调通知上传失败
  334 + })
  335 + },
  336 + //运单批量申报
  337 + zfbatchOrder(){
  338 + if(this.selectedRows.length!==0){
  339 + this.transformedData = this.selectedRows.map(item => ({
  340 + orderno: item.orderno,
  341 + ext1: item.ext1
  342 + }));
  343 + zfeldBatchDeclare(this.transformedData).then((response)=>{
  344 + const res=response.data;
  345 + if (res.code !== '200') {
  346 + return this.$message.error('总分单批量申报失败！')
  347 + }
  348 + this.$message.success('总分单批量申报成功！');
  349 + this.getList();
  350 + }).catch(error=>{
  351 + this.$message.error(error.toString())
  352 + })
  353 + }else{
  354 + this.$message.error('请选勾取需要申报的总分单信息！');
  355 + }
  356 + },
  357 + //运单批量导入申报
  358 + ydbatchDeclareImport({ file, onSuccess, onError }){
  359 + // 生成 FormData 对象
  360 + const formData = new FormData();
  361 + formData.append('file', file);
  362 + eldImportDeclare(formData).then((response) => {
  363 + const res = response.data
  364 + if (res.code !== '200') {
  365 + return this.$message.error(res.msg);
  366 + }
  367 + this.$message.success(res.msg);
  368 + this.getList();
  369 + onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
  370 + }).catch(error => {
  371 + // 关闭加载
  372 + this.$message.error(error.toString())
  373 + onError(error); // 调用 onError 回调通知上传失败
  374 + })
  375 + },
  376 + //运单批量申报
  377 + ydeldBatchDeclare(){
  378 + if(this.selectedRows.length!==0){
  379 + this.transformedData = this.selectedRows.map(item => ({
  380 + orderno: item.orderno,
  381 + ext1: item.ext1
  382 + }));
  383 + eldBatchDeclare(this.transformedData).then((response)=>{
  384 + const res=response.data;
  385 + if (res.code !== '200') {
  386 + return this.$message.error('运单批量申报失败！')
  387 + }
  388 + this.$message.success('运单批量申报成功！');
  389 + this.getList();
  390 + }).catch(error=>{
  391 + this.$message.error(error.toString())
  392 + })
  393 + }else{
  394 + this.$message.error('请选勾取需要申报的运单信息！');
  395 + }
  396 + },
  397 + //清单批量导入申报
  398 + batchDeclareImport({ file, onSuccess, onError }){
  399 + // 生成 FormData 对象
  400 + const formData = new FormData();
  401 + formData.append('file', file);
  402 + eldhImportDeclare(formData).then((response) => {
  403 + const res = response.data
  404 + if (res.code !== '200') {
  405 + return this.$message.error(res.msg);
  406 + }
  407 + this.$message.success(res.msg);
  408 + this.getList();
  409 + onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
  410 + }).catch(error => {
  411 + // 关闭加载
  412 + this.$message.error(error.toString())
  413 + onError(error); // 调用 onError 回调通知上传失败
  414 + })
  415 + },
  416 + //清单申报
  417 + sendDeclare(row){
  418 + const { orderno, ext1 } = row;
  419 + const senddata= [{ orderno, ext1 }];
  420 + eldhBatchDeclare(senddata).then((response)=>{
  421 + const res=response.data;
  422 + if (res.code !== '200') {
  423 + return this.$message.error('清单批量申报失败！')
  424 + }
  425 + this.$message.success('清单批量申报成功！');
  426 + this.getList();
  427 + }).catch(error=>{
  428 + this.$message.error(error.toString())
  429 + })
  430 +
  431 + },
  432 + //清单批量申报
  433 + batchDeclare(){
  434 + if(this.selectedRows.length!==0){
  435 + this.transformedData = this.selectedRows.map(item => ({
  436 + orderno: item.orderno,
  437 + ext1: item.ext1
  438 + }));
  439 + eldhBatchDeclare(this.transformedData).then((response)=>{
  440 + const res=response.data;
  441 + if (res.code !== '200') {
  442 + return this.$message.error('清单批量申报失败！')
  443 + }
  444 + this.$message.success('清单批量申报成功！');
  445 + this.getList();
  446 + }).catch(error=>{
  447 + this.$message.error(error.toString())
  448 + })
  449 + }else{
  450 + this.$message.error('请选勾取需要申报的清单信息！');
  451 + }
  452 + },
  453 + //订单批量导入申报
  454 + batchOrderImport({ file, onSuccess, onError }){
  455 + // 生成 FormData 对象
  456 + const formData = new FormData();
  457 + formData.append('file', file);
  458 + batchOrderImport(formData).then((response) => {
  459 + const res = response.data
  460 + if (res.code !== '200') {
  461 + return this.$message.error(res.msg);
  462 + }
  463 + this.$message.success(res.msg);
  464 + this.getList();
  465 + onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
  466 + }).catch(error => {
  467 + // 关闭加载
  468 + this.$message.error(error.toString())
  469 + onError(error); // 调用 onError 回调通知上传失败
  470 + })
  471 + },
  472 + //批量申报订单
  473 + batchOrder(){
  474 + if(this.selectedRows.length!==0){
  475 + this.transformedData = this.selectedRows.map(item => ({
  476 + orderno: item.orderno,
  477 + ext1: item.ext1
  478 + }));
  479 + batchOrder(this.transformedData).then((response)=>{
  480 + const res=response.data;
  481 + if (res.code !== '200') {
  482 + return this.$message.error('订单批量申报失败！')
  483 + }
  484 + this.$message.success('订单批量申报成功！');
  485 + this.getList();
  486 + }).catch(error=>{
  487 + this.$message.error(error.toString())
  488 + })
  489 + }else{
  490 + this.$message.error('请选勾取需要申报的订单信息！');
  491 + }
  492 + },
  493 + //导入订单excel
  494 + beforeUpload(file) {
  495 + // 检查文件类型
  496 + const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
  497 + if (!isExcel) {
  498 + this.$message.error('上传文件只能是 Excel 格式!');
  499 + return false; // 取消文件上传
  500 + }
  501 + return true; // 允许上传
  502 +
  503 + },
  504 + uploadFile({ file, onSuccess, onError }){
  505 + // 生成 FormData 对象
  506 + const formData = new FormData();
  507 + formData.append('file', file);
  508 + importExcel(formData).then((response) => {
  509 + const res = response.data
  510 + if (res.code !== '200') {
  511 + return this.$message.error(res.msg);
  512 + }
  513 + this.$message.success(res.msg);
  514 + this.getList();
  515 + onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
  516 + }).catch(error => {
  517 + // 关闭加载
  518 + this.$message.error(error.toString())
  519 + onError(error); // 调用 onError 回调通知上传失败
  520 + })
  521 + },
  522 + //订单申报
  523 + sendorder(row){
  524 + sendOrder(row).then((response)=>{
  525 + const res=response.data;
  526 + if (res.code !== '200') {
  527 + return this.$message.error('订单申报失败！')
  528 + }
  529 + this.$message.success('订单申报成功！');
  530 + this.getList();
  531 + }).catch(error=>{
  532 + this.$message.error(error.toString())
  533 + })
  534 + },
  535 + //订单列表查询
  536 + getList(){
  537 + if(this.value2 !== null && this.value2 !== ""){
  538 + this.queryInfo.starttime = this.value2[0];
  539 + this.queryInfo.endtime = this.value2[1];
  540 + }
  541 + selectLists(this.queryInfo).then((response) => {
  542 + const res = response.data
  543 + if (res.code !== '200') {
  544 + return this.$message.error('获取消息收发记录，失败！')
  545 + }
  546 + // 获取列表数据
  547 + this.tableData = res.data.list
  548 + // 获取列表的总记录数
  549 + this.total = res.data.total
  550 + this.$message.success('获取消息收发记录，成功！');
  551 + }).catch(error => {
  552 + // 关闭加载
  553 + this.$message.error(error.toString())
  554 + })
  555 + },
  556 + //分页
  557 + handleSizeChange(val) {
  558 + this.queryInfo.pageSize=val;
  559 + this.getList();
  560 + },
  561 + //分页
  562 + handleCurrentChange(val) {
  563 + this.queryInfo.pageNum=val;
  564 + this.getList();
  565 + },
  566 + //多选
  567 + handleSelectionChange(selection) {
  568 + this.selectedRows = selection;
  569 + }
  570 + }
  571 + };
  572 +</script>
  573 +
  574 +<style scoped>
  575 + .el-input__inner{
  576 + background-color: #f5f7fd;
  577 + }
  578 + .el-table {
  579 + border: 1px solid #ddd;
  580 + }
  581 +
  582 + .el-table th {
  583 + background-color: #f0f0f0;
  584 + }
  585 +
  586 + .el-table tr.el-table__row--striped > td {
  587 + background-color: #f8f8f8;
  588 + }
  589 +
  590 + .el-table td, .el-table th {
  591 + border: 1px solid #ddd;
  592 + padding: 8px;
  593 + }
  594 +</style>
  1 +<template>
  2 + <div>
  3 + <el-row :gutter="24">
  4 + <el-col :span="4">
  5 + <el-input size="medium" v-model="query.carrier" onkeyup="this.value=this.value.toUpperCase()" placeholder="承运人二字码"></el-input>
  6 + </el-col>
  7 + <el-col :span="4">
  8 + <el-input size="medium" v-model="query.dest" onkeyup="this.value=this.value.toUpperCase()" placeholder="目的港"></el-input>
  9 + </el-col>
  10 + <el-col :span="2">
  11 + <el-button size="medium" @click="getList" type="primary">查询</el-button>
  12 + </el-col>
  13 + <el-col :span="2">
  14 + <el-button size="medium" @click="add" type="primary">新增</el-button>
  15 + </el-col>
  16 + </el-row>
  17 + <el-row :gutter="24">
  18 + <el-col :span="24">
  19 + <el-table
  20 + :data="tableData"
  21 + border
  22 + style="width: 100%">
  23 + <el-table-column
  24 + prop="carrier"
  25 + label="承运人二字码"
  26 + width="120">
  27 + </el-table-column>
  28 + <el-table-column
  29 + prop="dest"
  30 + label="目的港"
  31 + width="120">
  32 + </el-table-column>
  33 + <el-table-column
  34 + prop="destrate"
  35 + label="目的港费率"
  36 + width="120">
  37 + </el-table-column>
  38 + <el-table-column
  39 + prop="mycname"
  40 + label="燃油费类型"
  41 + width="120">
  42 + </el-table-column>
  43 + <el-table-column
  44 + prop="myc"
  45 + label="燃油费率"
  46 + width="120">
  47 + </el-table-column>
  48 + <el-table-column
  49 + prop="sccname"
  50 + label="战险类型"
  51 + width="120">
  52 + </el-table-column>
  53 + <el-table-column
  54 + prop="scc"
  55 + label="战险费率"
  56 + width="120">
  57 + </el-table-column>
  58 + <el-table-column
  59 + prop="zhidanfei"
  60 + label="制单费"
  61 + width="120">
  62 + </el-table-column>
  63 + <el-table-column
  64 + prop="cgc"
  65 + label="信息传输费"
  66 + width="120">
  67 + </el-table-column>
  68 + <el-table-column
  69 + fixed="right"
  70 + label="操作"
  71 + width="100">
  72 + <template slot-scope="scope">
  73 + <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
  74 + <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
  75 + </template>
  76 + </el-table-column>
  77 + </el-table>
  78 + </el-col>
  79 + <el-col :span="24">
  80 + <div class="block">
  81 + <el-pagination
  82 + @size-change="handleSizeChange"
  83 + @current-change="handleCurrentChange"
  84 + :current-page="query.pageNum"
  85 + :page-sizes="[10, 20, 30, 40]"
  86 + :page-size="query.pageSize"
  87 + layout="total, sizes, prev, pager, next, jumper"
  88 + :total="total">
  89 + </el-pagination>
  90 + </div>
  91 + </el-col>
  92 + </el-row>
  93 +
  94 + <el-dialog
  95 + title="费率信息"
  96 + :visible.sync="dialogVisible"
  97 + width="30%"
  98 + :before-close="handleClose">
  99 + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  100 + <el-form-item label="目的港" prop="dest">
  101 + <el-input v-model="ruleForm.dest" onkeyup="this.value=this.value.toUpperCase()"></el-input>
  102 + </el-form-item>
  103 + <el-form-item label="目的港费率" prop="destrate">
  104 + <el-input v-model="ruleForm.destrate" type="number"></el-input>
  105 + </el-form-item>
  106 + <el-form-item label="承运人二字码" prop="carrier">
  107 + <el-input v-model="ruleForm.carrier" onkeyup="this.value=this.value.toUpperCase()"></el-input>
  108 + </el-form-item>
  109 + <el-form-item label="燃油费类型：" prop="mycname">
  110 + <el-input v-model="ruleForm.mycname" onkeyup="this.value=this.value.toUpperCase()"></el-input>
  111 + </el-form-item>
  112 + <el-form-item label="燃油费率" prop="myc">
  113 + <el-input v-model="ruleForm.myc" type="number"></el-input>
  114 + </el-form-item>
  115 + <el-form-item label="战险类型" prop="sccname">
  116 + <el-input v-model="ruleForm.sccname" onkeyup="this.value=this.value.toUpperCase()"></el-input>
  117 + </el-form-item>
  118 + <el-form-item label="战险费率" prop="scc">
  119 + <el-input v-model="ruleForm.scc" type="number"></el-input>
  120 + </el-form-item>
  121 + <el-form-item label="制单费" prop="zhidanfei">
  122 + <el-input v-model="ruleForm.zhidanfei" type="number"></el-input>
  123 + </el-form-item>
  124 + <el-form-item label="信息传输费" prop="cgc">
  125 + <el-input v-model="ruleForm.cgc" type="number"></el-input>
  126 + </el-form-item>
  127 + <el-form-item>
  128 + <el-button type="primary" @click="dialogStatus==='create'?addForm('ruleForm'):ediForm('ruleForm')">保存</el-button>
  129 + <el-button @click="resetForm('ruleForm')">重置</el-button>
  130 + </el-form-item>
  131 + </el-form>
  132 + </el-dialog>
  133 +
  134 + </div>
  135 +</template>
  136 +<script>
  137 + import {addRate,delRate,ediRate,selectRate} from "../../api/zhidan/zhidan";
  138 + export default {
  139 + data(){
  140 + return{
  141 + ruleForm: {
  142 + id:'',
  143 + carrier: '',
  144 + dest:'',
  145 + destrate:0,
  146 + myc:0,
  147 + scc:0,
  148 + zhidanfei:0,
  149 + mycname:'',
  150 + sccname:'',
  151 + cgc:0,
  152 + },
  153 + rules: {
  154 +
  155 + },
  156 + query:{
  157 + carrier:'',
  158 + dest:'',
  159 + pageNum:1,
  160 + pageSize:20
  161 + },
  162 + total:0,
  163 + tableData:[],
  164 + dialogVisible:false,
  165 + dialogStatus: '',
  166 + }
  167 + },
  168 + mounted() {
  169 + this.getList();
  170 + },
  171 + methods:{
  172 + addForm(formName) {
  173 + this.$refs[formName].validate((valid) => {
  174 + if (valid) {
  175 + addRate(this.ruleForm).then((response) => {
  176 + const res = response.data
  177 + if (res.code !== '200') {
  178 + return this.$message.error('费率新增，失败！')
  179 + }
  180 + this.$message.success('费率新增，成功！')
  181 + this.dialogVisible = false;
  182 + this.getList();
  183 + }).catch(error => {
  184 + // 关闭加载
  185 + this.$message.warning('费率新增，失败！')
  186 + })
  187 + } else {
  188 + console.log('error submit!!');
  189 + return false;
  190 + }
  191 + });
  192 + },
  193 + ediForm(formName) {
  194 + this.$refs[formName].validate((valid) => {
  195 + if (valid) {
  196 + ediRate(this.ruleForm).then((response) => {
  197 + const res = response.data
  198 + if (res.code !== '200') {
  199 + return this.$message.error('费率更新，失败！')
  200 + }
  201 + this.$message.success('费率更新，成功！')
  202 + this.dialogVisible = false;
  203 + this.getList();
  204 + }).catch(error => {
  205 + // 关闭加载
  206 + this.$message.warning('费率更新，失败！')
  207 + })
  208 + } else {
  209 + console.log('error submit!!');
  210 + return false;
  211 + }
  212 + });
  213 + },
  214 + resetForm(formName) {
  215 + this.$refs[formName].resetFields();
  216 + },
  217 + add(){
  218 + this.ruleForm={
  219 + id:'',
  220 + carrier: '',
  221 + dest:'',
  222 + destrate:0,
  223 + myc:0,
  224 + scc:0,
  225 + zhidanfei:0,
  226 + mycname:'',
  227 + sccname:'',
  228 + cgc:0,
  229 + }
  230 + this.dialogVisible=true;
  231 + this.dialogStatus='create';
  232 + },
  233 + handleClose(done) {
  234 + this.$confirm('确认关闭？')
  235 + .then(_ => {
  236 + done();
  237 + })
  238 + .catch(_ => {});
  239 + },
  240 + handleClick(row) {
  241 + this.dialogVisible=true;
  242 + this.dialogStatus='update';
  243 + this.ruleForm=row;
  244 + },
  245 + deleteClick(row) {
  246 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  247 + confirmButtonText: '确定删除',
  248 + cancelButtonText: '取消',
  249 + type: 'warning'
  250 + }
  251 + ).then(() => {
  252 + delRate({id: row.id}).then((response) => {
  253 + const res = response.data
  254 + this.$message.success(res.msg)
  255 + this.getList();
  256 + }).catch(error => {
  257 + this.$message.error('删除配置，失败！')
  258 + })
  259 + }).catch(() => {
  260 + })
  261 + },
  262 + handleSizeChange(val) {
  263 + this.query.pageSize=val;
  264 + this.getList();
  265 + },
  266 + handleCurrentChange(val) {
  267 + this.query.pageNum=val;
  268 + this.getList();
  269 + },
  270 + getList(){
  271 + selectRate(this.query).then((response) => {
  272 + const res = response.data
  273 + if (res.code !== '200') {
  274 + return this.$message.error('获取消息收发记录，失败！')
  275 + }
  276 + // 获取列表数据
  277 + this.tableData = res.data.list
  278 + // 获取列表的总记录数
  279 + this.total = res.data.total
  280 + this.$message.success('获取消息收发记录，成功！');
  281 + }).catch(error => {
  282 + // 关闭加载
  283 + this.$message.error(error.toString())
  284 + })
  285 + },
  286 + validateUppercaseInput() {
  287 + // 使用正则表达式来匹配非大写字母，并替换为空字符串
  288 + this.uppercaseInput = this.uppercaseInput.replace(/[^A-Z]/g, '');
  289 + }
  290 + }
  291 + }
  292 +</script>
  1 +<template>
  2 + <div>
  3 + <el-row :gutter="24">
  4 + <el-col :span="4">
  5 + <el-input size="medium" v-model="query.waybill" placeholder="运单号"></el-input>
  6 + </el-col>
  7 + <el-col :span="9">
  8 + <el-date-picker
  9 + size="medium"
  10 + v-model="value2"
  11 + type="datetimerange"
  12 + :picker-options="pickerOptions"
  13 + range-separator="至"
  14 + start-placeholder="开始日期"
  15 + end-placeholder="结束日期"
  16 + align="right">
  17 + </el-date-picker>
  18 + </el-col>
  19 + <el-col :span="2">
  20 + <el-button size="medium" @click="getList" type="primary">查询</el-button>
  21 + </el-col>
  22 + <el-col :span="2">
  23 + <el-upload
  24 + class="upload-demo"
  25 + action=""
  26 + :before-upload="beforeUpload"
  27 + :http-request="impExcel"
  28 + :show-file-list="false">
  29 + <el-button size="medium" type="success">导入数据</el-button>
  30 + </el-upload>
  31 + </el-col>
  32 + </el-row>
  33 + <el-row :gutter="24">
  34 + <el-col :span="24">
  35 + <el-table
  36 + :data="tableData"
  37 + border
  38 + style="width: 100%">
  39 + <el-table-column
  40 + prop="waybill"
  41 + label="运单号"
  42 + width="120">
  43 + </el-table-column>
  44 + <!--<el-table-column
  45 + prop="fhl"
  46 + label="分单号"
  47 + width="120">
  48 + </el-table-column>-->
  49 + <el-table-column
  50 + prop="flightno"
  51 + label="航班号"
  52 + width="120">
  53 + </el-table-column>
  54 + <el-table-column
  55 + prop="flightdate"
  56 + label="航班日期"
  57 + width="150">
  58 + </el-table-column>
  59 + <el-table-column
  60 + prop="pcs"
  61 + label="件数"
  62 + width="120">
  63 + </el-table-column>
  64 + <el-table-column
  65 + prop="weight"
  66 + label="重量"
  67 + width="120">
  68 + </el-table-column>
  69 + <el-table-column
  70 + prop="feweifht"
  71 + label="计费重"
  72 + width="120">
  73 + </el-table-column>
  74 + <el-table-column
  75 + prop="vol"
  76 + label="体积"
  77 + width="120">
  78 + </el-table-column>
  79 + <el-table-column
  80 + prop="descr"
  81 + label="品名"
  82 + width="120">
  83 + </el-table-column>
  84 + <el-table-column
  85 + fixed="right"
  86 + label="操作"
  87 + width="160">
  88 + <template slot-scope="scope">
  89 + <el-button @click="handlePdf(scope.row)" type="text" size="small">下载PDF</el-button>
  90 + <el-button @click="handleExcel(scope.row)" type="text" size="small">下载EXCEL</el-button>
  91 + </template>
  92 + </el-table-column>
  93 + </el-table>
  94 + </el-col>
  95 + <el-col :span="24">
  96 + <el-pagination
  97 + size="medium"
  98 + @size-change="handleSizeChange"
  99 + @current-change="handleCurrentChange"
  100 + :current-page="query.pageNum"
  101 + :page-sizes="[100, 200, 300, 400]"
  102 + :page-size="query.pageSize"
  103 + layout="total, sizes, prev, pager, next, jumper"
  104 + :total="total">
  105 + </el-pagination>
  106 + </el-col>
  107 + </el-row>
  108 + </div>
  109 +</template>
  110 +<script>
  111 + import {selectLists,extPdf,extExcel,importExcel} from "../../api/zhidan/zhidan";
  112 +
  113 + export default {
  114 + data(){
  115 + return{
  116 + pickerOptions: {
  117 + shortcuts: [
  118 + {
  119 + text: '最近一周',
  120 + onClick(picker) {
  121 + const end = new Date();
  122 + const start = new Date();
  123 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  124 + picker.$emit('pick', [start, end]);
  125 + }
  126 + }, {
  127 + text: '最近一个月',
  128 + onClick(picker) {
  129 + const end = new Date();
  130 + const start = new Date();
  131 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  132 + picker.$emit('pick', [start, end]);
  133 + }
  134 + }, {
  135 + text: '最近三个月',
  136 + onClick(picker) {
  137 + const end = new Date();
  138 + const start = new Date();
  139 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  140 + picker.$emit('pick', [start, end]);
  141 + }
  142 + }
  143 + ]
  144 + },
  145 + query:{
  146 + waybill:'',
  147 + starttime:'',
  148 + endtime:'',
  149 + pageNum:1,
  150 + pageSize:20
  151 + },
  152 + value2:'',
  153 + tableData: [],
  154 + total:0,
  155 + }
  156 + },
  157 + mounted() {
  158 + this.getList();
  159 + },
  160 + methods:{
  161 + //导入订单excel
  162 + beforeUpload(file) {
  163 + // 检查文件类型
  164 + const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
  165 + if (!isExcel) {
  166 + this.$message.error('上传文件只能是 Excel 格式!');
  167 + return false; // 取消文件上传
  168 + }
  169 + return true; // 允许上传
  170 +
  171 + },
  172 + impExcel({ file, onSuccess, onError }){
  173 + // 生成 FormData 对象
  174 + const formData = new FormData();
  175 + formData.append('file', file);
  176 + importExcel(formData).then((response) => {
  177 + const res = response.data
  178 + if (res.code !== '200') {
  179 + return this.$message.error(res.msg);
  180 + }
  181 + this.$message.success(res.msg);
  182 + this.getList();
  183 + onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
  184 + }).catch(error => {
  185 + // 关闭加载
  186 + this.$message.error(error.toString())
  187 + onError(error); // 调用 onError 回调通知上传失败
  188 + })
  189 + },
  190 + getList(){
  191 + if(this.value2 !== null && this.value2 !== ""){
  192 + this.query.starttime=this.value2[0];
  193 + this.query.endtime=this.value2[1];
  194 + }
  195 + selectLists(this.query).then((response) => {
  196 + const res = response.data
  197 + if (res.code !== '200') {
  198 + return this.$message.error('获取消息收发记录，失败！')
  199 + }
  200 + // 获取列表数据
  201 + this.tableData = res.data.list
  202 + // 获取列表的总记录数
  203 + this.total = res.data.total
  204 + this.$message.success('获取消息收发记录，成功！');
  205 + }).catch(error => {
  206 + // 关闭加载
  207 + this.$message.error(error.toString())
  208 + })
  209 + },
  210 + handlePdf(row) {
  211 + extPdf({id: row.id}).then(response => {
  212 + const url = window.URL.createObjectURL(new Blob([response.data]));
  213 + const link = document.createElement('a');
  214 + link.href = url;
  215 + link.setAttribute('download', row.waybill+'.pdf'); // 动态设置文件名
  216 + document.body.appendChild(link);
  217 + link.click();
  218 + document.body.removeChild(link); // 清理临时链接
  219 + window.URL.revokeObjectURL(url); // 清理URL对象
  220 + }).catch(error => {
  221 + console.error('Error downloading PDF:', error);
  222 + });
  223 + },
  224 + handleExcel(row) {
  225 + extExcel({id: row.id}).then(response => {
  226 + if (!response || !response.data) {
  227 + console.error('Response data is empty or not a Blob.');
  228 + return;
  229 + }
  230 +
  231 + const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
  232 + const tempFile = URL.createObjectURL(blob);
  233 +
  234 + fetch(tempFile)
  235 + .then(res => res.blob())
  236 + .then(blob => {
  237 + const url = window.URL.createObjectURL(blob);
  238 + const link = document.createElement('a');
  239 + link.href = url;
  240 + link.setAttribute('download', row.waybill+'.xlsx');
  241 + document.body.appendChild(link);
  242 + link.click();
  243 + document.body.removeChild(link);
  244 + window.URL.revokeObjectURL(url);
  245 + })
  246 + .catch(error => {
  247 + console.error('Error creating temporary file:', error);
  248 + });
  249 +
  250 + window.URL.revokeObjectURL(tempFile);
  251 + }).catch(error => {
  252 + console.error('Error downloading Excel:', error);
  253 + });
  254 + },
  255 + handleSizeChange(val) {
  256 + this.query.pageSize=val;
  257 + this.getList();
  258 + },
  259 + handleCurrentChange(val) {
  260 + this.query.pageNum=val;
  261 + this.getList();
  262 + }
  263 + }
  264 + }
  265 +</script>