<template>
|
<div>
|
<!-- <UserInfo :show="true" /> -->
|
<Header style="position: sticky;top: 0;z-index: 1999;" />
|
<NoticeComponent v-if="noticeShow" :show="noticeShow" @close="noticeShow = false" />
|
<AddedInformation v-if="false" :show="false" />
|
<div class="search-box">
|
<div class="title-card">
|
<div class="title-left">
|
订单列表 | Order List
|
</div>
|
<div class="title-right">
|
<div>
|
<div @click="noticeShow = true" class="order-agress">下单须知</div>
|
<div @click="noticeShow = true" class="order-agress">Usage Instructions</div>
|
</div>
|
<div class="line"></div>
|
<div>
|
<div class="add-ord" @click="$router.push('/addOrder')">添加订单</div>
|
<div class="add-ord" @click="$router.push('/addOrder')">Add orders</div>
|
</div>
|
</div>
|
</div>
|
<div class="search-form">
|
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
<div class="flex a-center justify-between flex-wrap">
|
<el-form-item prop="orderId" class="unset_m" style="margin-left: 15px">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>订单编号</div>
|
<div style="font-size: 12px;color: #999">Order No.</div>
|
</div>
|
</template>
|
<el-input style="width: 230px;" v-model="searchForm.orderId" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="container" class="unset_m">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>集装箱号</div>
|
<div style="font-size: 12px;color: #999">Container No.</div>
|
</div>
|
</template>
|
<el-input style="width: 230px;" v-model="searchForm.container" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="bol" class="unset_m">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>提单号</div>
|
<div style="font-size: 12px;color: #999">BOL No.</div>
|
</div>
|
</template>
|
<el-input style="width: 230px;" v-model="searchForm.bol" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="email" class="unset_m">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>收件人邮箱</div>
|
<div style="font-size: 12px;color: #999">Consignee's Email</div>
|
</div>
|
</template>
|
<el-input style="width: 230px;" v-model="searchForm.email" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="status" class="unset_m">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>订单状态</div>
|
<div style="font-size: 12px;color: #999">Order Status</div>
|
</div>
|
</template>
|
<el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.status"
|
placeholder="请选择">
|
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item prop="address" class="unset_m1">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>收件人地址</div>
|
<div style="font-size: 12px;color: #999">Consignee's Address</div>
|
</div>
|
</template>
|
<el-input style="width: 230px;" v-model="searchForm.address" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item prop="DO" class="unset_m1">
|
<template #label>
|
<div style="white-space: normal;line-height:1.2">
|
<div>DO文件是否上传</div>
|
<div style="font-size: 12px;color: #999">Was DO Uploaded?</div>
|
</div>
|
</template>
|
<el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.DO"
|
placeholder="请选择">
|
<el-option v-for="item in option1" :key="item.id" :label="item.label" :value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item style="width: 570px;">
|
</el-form-item>
|
<div class="flex a-center">
|
<el-button type="default" class="reset" @click="reset">重置 | Reset</el-button>
|
<el-button type="primary" class="search" @click="search">搜索 | Search</el-button>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
<div class="table-box">
|
<div class="flex a-center p-3">
|
<el-button type="primary" class="search" @click="exportExcel(false)">导出 | Export</el-button>
|
<el-button type="primary" class="search" @click="importExcel">导入 | Import</el-button>
|
<el-button type="link" class="Download" @click="downloadTemplate">下载模板 | Download Template</el-button>
|
</div>
|
<el-table :data="tableData" style="width: 100%" border>
|
<el-table-column width="200" prop="orderId" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>订单编号</div>
|
<div class="header-en">Order No.</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="container" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>集装箱号</div>
|
<div class="header-en">Container No.</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="bol" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>提单号</div>
|
<div class="header-en">BOL No.</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="cargoType" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>柜型</div>
|
<div class="header-en">Container Type</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="SOC" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>SOC</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="mail" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>收件人邮箱</div>
|
<div class="header-en">Consignee's Email</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="250" prop="address" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>收件人地址</div>
|
<div class="header-en">Consignee's Address</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="hold" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>Hold</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="estinatedArrival" align="center" sortable>
|
<template #header>
|
<div class="custom-header">
|
<div>预计到港</div>
|
<div class="header-en">ETA</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="pickupDate" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>提柜日期</div>
|
<div class="header-en">Pickup Date</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="200" prop="deliverySchedule" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>计划送柜日期</div>
|
<div class="header-en">Delivery Schedule</div>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column width="200" prop="realSchedule" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>实际送货日期</div>
|
<div class="header-en">Actual Delivery Date</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="150" prop="DO" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>DO文件是否上传</div>
|
<div class="header-en">Was DO Uploaded?</div>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<div>{{ scope.row.DO ? '是' : '否' }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="150" prop="asPU" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>PU文件是否上传</div>
|
<div class="header-en">Is PU Uploaded?</div>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<div>{{ scope.row.asPU ? '是' : '否' }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column width="150" prop="status" align="center">
|
<template #header>
|
<div class="custom-header">
|
<div>订单状态</div>
|
<div class="header-en">Order Status</div>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<div
|
v-if="scope.row.status == '收货⼈已确认' || scope.row.status == '待卡车确认' || scope.row.status == '待收货⼈确认'">
|
<div>预约中</div>
|
<div>Booking</div>
|
</div>
|
<div v-else-if="scope.row.status == '卡车和收货⼈均确认'">
|
<div>预约完成</div>
|
<div>Appt Confirmed</div>
|
</div>
|
<div v-else>
|
<div>{{ scope.row.status }}</div>
|
<div>{{ fanyiObj[scope.row.status] }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column width="150" prop="option" align="center" fixed="right">
|
<template #header>
|
<div class="custom-header">
|
<div>操作</div>
|
<div class="header-en">Operation</div>
|
</div>
|
</template>
|
<template slot-scope="scope">
|
<el-button type="text" class="table-btn"
|
@click="handleClick(scope.row, 'detail')">查看详情</el-button>
|
<span class="line-set">|</span>
|
<el-button type="text" class="table-btn" @click="handleClick(scope.row, 'edit')">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="text-right pagination-card">
|
<el-pagination background :page-size="pagination.pageSize" layout="slot,prev,pager,next,sizes,jumper"
|
:current-page="pagination.pageNum" @current-change="handleCurrentChange"
|
@size-change="handleSizeChange" :total="pagination.total">
|
<span class="total-num">共{{ pagination.total }}条记录</span>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import UserInfo from '@/component/userInfo.vue'
|
import Header from '@/component/Header.vue'
|
import NoticeComponent from '@/component/Notice.vue'
|
import { getList, iptOrder, exportList, getModoul } from './home'
|
import * as XLSX from 'xlsx'
|
export default {
|
name: "Home",
|
components: {
|
UserInfo,
|
Header,
|
NoticeComponent,
|
},
|
data() {
|
return {
|
noticeShow: false,
|
showUserInfo: false,
|
searchForm: {
|
orderId: '',
|
container: '',
|
bol: '',
|
email: '',
|
address: '',
|
DO: '',
|
status: '',
|
pageNum: 0,
|
pageSize: 10,
|
total: 0,
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra
|
},
|
fanyiObj: {
|
'待到港': 'Pending Arrival',
|
'已到港': 'Arrived at Port',
|
'可提柜': 'Ready for Pickup',
|
'预约中': 'Booking In Progress',
|
'预约完成': 'Appt Confirmed',
|
'送柜中': 'On the Way',
|
'送柜完成': 'Delivered',
|
'返空': 'Empty Return',
|
'订单完成': 'Order Completed',
|
'已取消': 'Cancelled',
|
'预约中': 'Booking',
|
'预约完成': 'Appt Confirmed'
|
},
|
options: [
|
{
|
id: '待到港',
|
label: '待到港 | Pending Arrival',
|
},
|
{
|
id: '已到港',
|
label: '已到港 | Arrived at Port',
|
},
|
{
|
id: '可提柜',
|
label: '可提柜 | Ready for Pickup'
|
},
|
{
|
id: '预约中',
|
label: '预约中 | Booking In Progress'
|
},
|
{
|
id: '预约完成',
|
label: '预约完成 | Appt Confirmed'
|
},
|
{
|
id: '送柜中',
|
label: '送柜中 | On the Way'
|
},
|
{
|
id: '送柜完成',
|
label: '送柜完成 | Delivered'
|
},
|
{
|
id: '返空',
|
label: '返空 | Empty Return'
|
},
|
{
|
id: '订单完成',
|
label: '订单完成 | Order Completed'
|
},
|
{
|
id: '已取消',
|
label: '已取消 | Cancelled'
|
},
|
],
|
tableData: [],
|
option1: [
|
{
|
id: 1,
|
label: '是 (Y)',
|
value: '是'
|
},
|
{
|
id: 2,
|
label: '否 (N)',
|
value: '否'
|
}
|
],
|
pagination:{
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
pageSizes: [10, 20, 30, 40, 50]
|
},
|
|
};
|
},
|
created() {
|
this.getLists()
|
},
|
methods: {
|
downloadTemplate() {
|
getModoul().then(res => {
|
window.open(res.data.url, '_blank')
|
})
|
},
|
handleCurrentChange(val){
|
this.pagination.pageNum = val
|
console.log('val', val);
|
|
if (val === 1) {
|
this.searchForm.pageNum = 0
|
}else{
|
this.searchForm.pageNum = (val - 1) * this.pagination.pageSize
|
}
|
this.getLists()
|
},
|
handleSizeChange(val) {
|
this.pagination.pageSize = val
|
this.searchForm.pageSize = val - 1
|
this.getLists()
|
},
|
handleClick(e, type) {
|
this.$router.push({
|
path: '/addOrder',
|
query: {
|
orderId: e.orderId,
|
type: type
|
},
|
})
|
},
|
getLists() {
|
let params = {
|
...this.searchForm
|
}
|
// params.orderId = params.orderId ? params.orderId : null
|
if (!params.orderId) {
|
delete params.orderId
|
}
|
if (!params.container) {
|
delete params.container
|
}
|
if (!params.bol) {
|
delete params.bol
|
}
|
if (!params.email) {
|
delete params.email
|
}
|
if (!params.address) {
|
delete params.address
|
}
|
if (!params.DO) {
|
delete params.DO
|
}
|
if (!params.status) {
|
delete params.status
|
}
|
getList({ ...params, }).then(res => {
|
this.tableData =res.data&&res.data.list&&res.data.list.sort((a, b) => {
|
return new Date(a.estinatedArrival) - new Date(b.estinatedArrival);
|
});
|
this.pagination.total =res.data && res.data.total || 0
|
})
|
},
|
search() {
|
this.pagination.pageNum = 1
|
this.pagination.pageSize = this.pagination.pageSize
|
this.searchForm.pageNum = 0
|
this.searchForm.pageSize = this.pagination.pageSize - 1
|
this.getLists()
|
},
|
reset() {
|
this.pagination.pageNum = 1
|
this.pagination.pageSize = this.pagination.pageSize
|
this.searchForm = {
|
orderId: '',
|
container: '',
|
bol: '',
|
email: '',
|
address: '',
|
DO: '',
|
status: '',
|
pageNum: 0,
|
pageSize: 10,
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra
|
}
|
this.getLists()
|
},
|
Download() {
|
|
},
|
// 导出Excel
|
async exportExcel(arr) {
|
let exportData = [{
|
'集装箱号 | Container No.': null,
|
'提单号 | BOL No.': null,
|
'柜型 | Container Type': null,
|
'船司 | Carrier': null,
|
'船名航次 | Vessel Name and Voyage': null,
|
'提柜地 | Pickup Location': null,
|
'预计到港 | ETA': null,
|
'SOC': null,
|
'DG': null,
|
'是否超重 | Overweight': null,
|
'是否查验 | Exam/Inspection': null,
|
'DROP/LIVE': null,
|
'Hold': null,
|
'客户单号 | Customer Ref. No.': null,
|
'品名 | Commodity': null,
|
'数量 | QTY': null,
|
'包装种类 | Packages': null,
|
'毛重 | Gr. Wt': null,
|
'毛重(磅) | Weight (LBs)': null,
|
'体积 | Volume': null,
|
'收件人 | Consignee': null,
|
'收件人公司 | Company Name': null,
|
'邮编 | Postal Code': null,
|
'地址 | Address': null,
|
'联系电话 | Tel': null,
|
'邮箱 | Email': null,
|
'其他联系方式 | Other Contact Information': null,
|
'备注 | Remarks': null
|
}];
|
if (!arr) {
|
let res = await exportList({ userExtra: localStorage.getItem('extra') })
|
exportData = res.data.map(item => ({
|
'集装箱号 | Container No.': item.ContainerNo,
|
'提单号 | BOL No.': item.BolNo,
|
'柜型 | Container Type': item.containerType,
|
'船司 | Carrier': item.carrier,
|
'船名航次 | Vessel Name and Voyage': item.vesselNameAndVoyage,
|
'提柜地 | Pickup Location': item.pickupLocation,
|
'预计到港 | ETA': item.eta,
|
'SOC': item.soc === '是' ? 'Y' : (item.soc === '否' ? 'N' : ''),
|
'DG': item.dg === '是' ? 'Y' : (item.dg === '否' ? 'N' : ''),
|
'是否超重 | Overweight': item.overweight === '是' ? 'Y' : (item.overweight === '否' ? 'N' : ''),
|
'是否查验 | Exam/Inspection': item.exam === '是' ? 'Y' : (item.exam === '否' ? 'N' : ''),
|
'DROP/LIVE': item.dropOrLive,
|
'Hold': item.hold === '等国内通知派送' ? '等国内通知派送｜Client Hold' :
|
(item.hold === '扣柜放行' ? '扣柜放行｜Client Release' :
|
(item.hold === '正常' ? '正常｜Normal' : '')),
|
'客户单号 | Customer Ref. No.': item.customerRefNo,
|
'品名 | Commodity': item.commodity,
|
'数量 | QTY': item.qty,
|
'包装种类 | Packages': item.packages,
|
'毛重 | Gr. Wt': item.GrWt,
|
'毛重(磅) | Weight (LBs)': item.weightLBS,
|
'体积 | Volume': item.volume,
|
'收件人 | Consignee': item.consignee,
|
'收件人公司 | Company Name': item.companyName,
|
'邮编 | Postal Code': item.postalCode,
|
'地址 | Address': item.address,
|
'联系电话 | Tel': item.tel,
|
'邮箱 | Email': item.email,
|
'其他联系方式 | Other Contact Information': item.otherContactInformation,
|
'备注 | Remarks': item.remarks
|
}));
|
}
|
// 准备导出数据
|
|
// 创建工作簿
|
const wb = XLSX.utils.book_new();
|
const ws = XLSX.utils.json_to_sheet(exportData);
|
|
// 设置列宽
|
const colWidths = [
|
{ wch: 25 }, // 集装箱号
|
{ wch: 25 }, // 提单号
|
{ wch: 20 }, // 柜型
|
{ wch: 20 }, // 船司
|
{ wch: 30 }, // 船名航次
|
{ wch: 25 }, // 提柜地
|
{ wch: 25 }, // 预计到港
|
{ wch: 15 }, // SOC
|
{ wch: 15 }, // DG
|
{ wch: 20 }, // 是否超重
|
{ wch: 20 }, // 是否查验
|
{ wch: 20 }, // DROP/LIVE
|
{ wch: 25 }, // Hold
|
{ wch: 25 }, // 客户单号
|
{ wch: 30 }, // 品名
|
{ wch: 15 }, // 数量
|
{ wch: 20 }, // 包装种类
|
{ wch: 15 }, // 毛重
|
{ wch: 20 }, // 毛重(磅)
|
{ wch: 15 }, // 体积
|
{ wch: 20 }, // 收件人
|
{ wch: 25 }, // 收件人公司
|
{ wch: 15 }, // 邮编
|
{ wch: 35 }, // 地址
|
{ wch: 20 }, // 联系电话
|
{ wch: 25 }, // 邮箱
|
{ wch: 30 }, // 其他联系方式
|
{ wch: 35 } // 备注
|
];
|
ws['!cols'] = colWidths;
|
|
// 将工作表添加到工作簿
|
XLSX.utils.book_append_sheet(wb, ws, "订单列表");
|
|
// 导出文件
|
XLSX.writeFile(wb, `订单列表_${new Date().toLocaleDateString()}.xlsx`);
|
},
|
|
// 导入Excel
|
importExcel() {
|
// 创建文件输入元素
|
const input = document.createElement('input');
|
input.type = 'file';
|
input.accept = '.xlsx,.xls';
|
|
input.onchange = (e) => {
|
const file = e.target.files[0];
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
try {
|
const data = new Uint8Array(e.target.result);
|
const workbook = XLSX.read(data, { type: 'array' });
|
const firstSheetName = workbook.SheetNames[0];
|
const worksheet = workbook.Sheets[firstSheetName];
|
|
// 使用header选项来获取原始表头
|
const jsonData = XLSX.utils.sheet_to_json(worksheet, {
|
raw: true,
|
defval: '',
|
header: 1
|
});
|
// 获取表头并打印日志
|
const headers = jsonData[2];
|
console.log(jsonData);
|
|
// 验证模板格式
|
const requiredFields = [
|
'集装箱号 | Container No.',
|
'提单号 | BOL No.',
|
'柜型 | Container Type',
|
'船司 | Carrier',
|
'船名航次 | Vessel Name and Voyage',
|
'提柜地 | Pickup Location',
|
'预计到港 | ETA',
|
'SOC',
|
'DG',
|
'是否超重 | Overweight',
|
'是否查验 | Exam/Inspection',
|
'DROP/LIVE',
|
'Hold',
|
'客户单号 | Customer Ref. No.',
|
'品名 | Commodity',
|
'数量 | QTY',
|
'包装种类 | Packages',
|
'毛重 | Gr. Wt',
|
'毛重(磅) | Weight (LBs)',
|
'体积 | Volume',
|
'收件人 | Consignee',
|
'收件人公司 | Company Name',
|
'邮编 | Postal Code',
|
'地址 | Address',
|
'联系电话 | Tel',
|
'邮箱 | Email',
|
'其他联系方式 | Other Contact Information',
|
'备注 | Remarks'
|
];
|
|
// 检查表头是否匹配
|
const missingFields = requiredFields.filter(field => !headers.includes(field));
|
if (missingFields.length > 0) {
|
this.$message.error(`模板格式不正确，缺少以下字段：${missingFields.join(', ')}`);
|
return;
|
}
|
|
// 转换数据格式
|
const transformedData = jsonData.slice(3).map(row => {
|
const item = {};
|
headers.forEach((header, index) => {
|
item[header] = row[index] || '';
|
});
|
|
return {
|
userExtra: JSON.parse(localStorage.getItem('userInfo')).extra,
|
ContainerNo: item['集装箱号 | Container No.'],
|
BolNo: item['提单号 | BOL No.'],
|
containerType: item['柜型 | Container Type'],
|
carrier: item['船司 | Carrier'],
|
vesselNameAndVoyage: item['船名航次 | Vessel Name and Voyage'],
|
pickupLocation: item['提柜地 | Pickup Location'],
|
eta: item['预计到港 | ETA'],
|
soc: item['SOC'] === 'Y' ? '是' : (item['SOC'] === 'N' ? '否' : ''),
|
dg: item['DG'] === 'Y' ? '是' : (item['DG'] === 'N' ? '否' : ''),
|
overweight: item['是否超重 | Overweight'] === 'Y' ? '是' : (item['是否超重 | Overweight'] === 'N' ? '否' : ''),
|
exam: item['是否查验 | Exam/Inspection'] === 'Y' ? '是' : (item['是否查验 | Exam/Inspection'] === 'N' ? '否' : ''),
|
dropOrLive: item['DROP/LIVE'],
|
hold: item['Hold'] ? item['Hold'].split('｜')[0] : '',
|
customerRefNo: item['客户单号 | Customer Ref. No.'],
|
commodity: item['品名 | Commodity'],
|
qty: item['数量 | QTY'],
|
packages: item['包装种类 | Packages'],
|
GrWt: item['毛重 | Gr. Wt'],
|
weightLBS: item['毛重(磅) | Weight (LBs)'],
|
volume: item['体积 | Volume'],
|
consignee: item['收件人 | Consignee'],
|
companyName: item['收件人公司 | Company Name'],
|
postalCode: item['邮编 | Postal Code'],
|
address: item['地址 | Address'],
|
tel: item['联系电话 | Tel'],
|
email: item['邮箱 | Email'],
|
otherContactInformation: item['其他联系方式 | Other Contact Information'],
|
remarks: item['备注 | Remarks']
|
};
|
});
|
|
// 数据校验和过滤
|
const filteredData = [];
|
const invalidData = [];
|
|
transformedData.forEach((item, index) => {
|
const errors = [];
|
|
// 检查是否所有字段都为空（排除userExtra字段）
|
const { userExtra, ...otherFields } = item;
|
const allFieldsEmpty = Object.values(otherFields).every(value =>
|
value === '' || value === null || value === undefined
|
);
|
|
// 如果所有字段都为空，跳过这条数据
|
if (allFieldsEmpty) {
|
return;
|
}
|
|
// 必填字段校验
|
const requiredFields = [
|
{ field: 'ContainerNo', name: '集装箱号' },
|
{ field: 'BolNo', name: '提单号' },
|
{ field: 'containerType', name: '柜型' },
|
{ field: 'carrier', name: '船司' },
|
{ field: 'vesselNameAndVoyage', name: '船名航次' },
|
{ field: 'pickupLocation', name: '提柜地' },
|
{ field: 'eta', name: '预计到港' },
|
{ field: 'soc', name: 'SOC' },
|
{ field: 'dg', name: 'DG' },
|
{ field: 'overweight', name: '是否超重' },
|
{ field: 'exam', name: '是否查验' },
|
{ field: 'commodity', name: '品名' },
|
{ field: 'qty', name: '数量' },
|
{ field: 'GrWt', name: '毛重' },
|
{ field: 'volume', name: '体积' },
|
{ field: 'companyName', name: '收件人公司' },
|
{ field: 'postalCode', name: '邮编' },
|
{ field: 'address', name: '地址' }
|
];
|
|
requiredFields.forEach(({ field, name }) => {
|
if (!item[field]) {
|
errors.push(`${name}不能为空`);
|
}
|
});
|
|
// 联系电话和邮箱至少填写一项
|
if (!item.tel && !item.email) {
|
errors.push('联系电话和邮箱至少填写其中一项');
|
}
|
|
if (errors.length > 0) {
|
invalidData.push({
|
row: index + 4,
|
containerNo: item.ContainerNo,
|
errors: errors
|
});
|
} else {
|
filteredData.push(item);
|
}
|
});
|
|
// 显示被过滤掉的数据信息
|
if (invalidData.length > 0 && filteredData.length > 0) {
|
const errorMessage = invalidData.map(data =>
|
`第${data.row}行(集装箱号: ${data.containerNo || '无'}): ${data.errors.join('; ')}`
|
).join('\n');
|
|
this.$message.warning({
|
message: `以下${invalidData.length}条数据不符合要求，将被过滤：\n${errorMessage}`,
|
duration: 0,
|
showClose: true
|
});
|
}
|
|
if (filteredData.length === 0) {
|
this.$message.error('没有有效数据可以导入');
|
return;
|
}
|
|
// 使用post方法直接传递过滤后的数组
|
iptOrder(filteredData).then(res => {
|
console.log(res, filteredData);
|
|
if (res) {
|
this.$message({
|
message: '导入成功',
|
type: 'success'
|
});
|
this.getLists();
|
} else {
|
this.$message({
|
message: '导入失败',
|
type: 'warning'
|
});
|
}
|
}).catch(error => {
|
this.$message.error('导入失败，请检查文件格式是否正确');
|
});
|
} catch (error) {
|
console.error('导入失败：', error);
|
this.$message.error('导入失败，请检查文件格式是否正确');
|
}
|
};
|
|
reader.readAsArrayBuffer(file);
|
};
|
|
input.click();
|
},
|
}
|
};
|
</script>
|
<style>
|
html {
|
background-color: rgba(237, 237, 243, 1);
|
}
|
</style>
|
<style scoped lang="less">
|
.Download {
|
text-decoration: underline;
|
color: #014099;
|
margin-left: 20px;
|
font-weight: bold;
|
cursor: pointer;
|
border: none !important;
|
}
|
|
.search {
|
// width: 190px;
|
height: 50px;
|
background: #014099;
|
border-radius: 4px;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 20px;
|
color: #FFFFFF;
|
}
|
|
.search-box {
|
background-color: #fff;
|
|
border-radius: 6px;
|
min-height: 263px;
|
margin-top: 16px;
|
margin-left: 35px;
|
margin-right: 35px;
|
width: calc(100% - 70px);
|
|
.title-card {
|
padding: 0 23px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 75px;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 20px;
|
color: #3B3F56;
|
border-bottom: 1px solid rgba(151, 151, 151, .25);
|
|
.title-right {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
|
.order-agress {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 20px;
|
color: #014099;
|
cursor: pointer;
|
}
|
|
.line {
|
width: 2px;
|
height: 20px;
|
margin: 0 10px;
|
background-color: rgba(1, 64, 153, .8);
|
}
|
|
.add-ord {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 20px;
|
color: #014099;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.search-form {
|
padding: 23px 23px 32px 17px;
|
|
.reset {
|
width: 190px;
|
height: 50px;
|
background: #FFFFFF;
|
border-radius: 4px;
|
border: 2px solid #D2D2D2;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 20px;
|
color: rgba(0, 0, 0, .81);
|
}
|
|
.search {
|
width: 190px;
|
height: 50px;
|
background: #014099;
|
border-radius: 4px;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 20px;
|
color: #FFFFFF;
|
}
|
|
::v-deep {
|
.el-form-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.el-form-item__label {
|
line-height: 1.2 !important;
|
vertical-align: middle;
|
}
|
|
.el-input__inner {
|
height: 50px;
|
font-size: 16px;
|
}
|
|
.el-form-item {
|
margin-left: unset;
|
margin-right: unset;
|
margin-bottom: 32px;
|
}
|
|
|
|
}
|
}
|
}
|
|
.table-box {
|
margin-top: 16px;
|
margin-left: 35px;
|
margin-right: 35px;
|
width: calc(100% - 70px);
|
border-radius: 6px;
|
background-color: #fff;
|
padding-bottom: 24px;
|
|
::v-deep {
|
.el-table__header {
|
.el-table__cell {
|
background-color: rgba(246, 246, 247, 1) !important;
|
|
.cell {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 500;
|
font-size: 16px;
|
color: #3B3F56;
|
}
|
}
|
}
|
}
|
|
::v-deep {
|
.el-table__cell {
|
height: 50px;
|
}
|
}
|
|
::v-deep .el-table__row {
|
.el-table__cell {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 400;
|
font-size: 16px;
|
color: #3B3F56 !important;
|
}
|
}
|
|
.table-btn {
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: 400;
|
font-size: 16px;
|
color: #014099;
|
}
|
|
.line-set {
|
font-size: 14px;
|
color: #014099;
|
margin: 0 5px;
|
}
|
|
.total-num {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 12px;
|
color: #989BB0;
|
margin-right: 12px;
|
}
|
}
|
|
::v-deep .el-pager {
|
.number {
|
min-width: 30px;
|
height: 30px;
|
background: #FFFFFF !important;
|
border-radius: 4px !important;
|
border: 1px solid #DBDBE7 !important;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 12px;
|
color: #989BB0;
|
}
|
|
.active {
|
min-width: 30px;
|
height: 30px;
|
background: #014099 !important;
|
border-radius: 4px !important;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 12px;
|
color: #FFFFFF;
|
}
|
|
|
}
|
|
.pagination-card {
|
margin-top: 49px;
|
margin-right: 14px;
|
}
|
|
::v-deep .btn-prev {
|
margin-left: 0;
|
margin-right: 5px;
|
|
.el-icon-arrow-left:before {
|
content: "\E792";
|
}
|
}
|
|
::v-deep .btn-next {
|
margin-left: 5px;
|
margin-right: 0;
|
|
.el-icon-arrow-right:before {
|
content: "\E791";
|
}
|
}
|
</style>
|
