<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" style="margin-bottom: unset !important;">
|
<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" style="margin-bottom: unset !important;">
|
<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">
|
<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="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="estinatedArrival" align="center">
|
<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="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="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 v-else-if="scope.row.status == '卡车和收货⼈均确认'">预约完成</div>
|
<div v-else>{{ scope.row.status }}</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"
|
: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 } from './home'
|
export default {
|
name: "Home",
|
components: {
|
UserInfo,
|
Header,
|
NoticeComponent,
|
},
|
data() {
|
return {
|
noticeShow: false,
|
showUserInfo: false,
|
searchForm: {
|
orderId: '',
|
container: '',
|
bol: '',
|
email: '',
|
address: '',
|
DO: '',
|
status: '',
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra
|
},
|
options: [
|
{
|
id: '待到港',
|
label: '待到港'
|
},
|
{
|
id: '已到港',
|
label: '已到港'
|
},
|
{
|
id: '可提柜',
|
label: '可提柜'
|
},
|
{
|
id: '预约中',
|
label: '预约中'
|
},
|
{
|
id: '预约完成',
|
label: '预约完成'
|
},
|
{
|
id: '送柜中',
|
label: '送柜中'
|
},
|
{
|
id: '送柜完成',
|
label: '送柜完成'
|
},
|
{
|
id: '返空',
|
label: '返空'
|
},
|
{
|
id: '订单完成',
|
label: '订单完成'
|
},
|
{
|
id: '已取消',
|
label: '已取消'
|
},
|
{
|
id: '预约中',
|
label: '预约中'
|
},
|
{
|
id: '预约完成',
|
label: '预约完成'
|
}
|
],
|
tableData: [],
|
option1: [
|
{
|
id: 1,
|
label: '是'
|
},
|
{
|
id: 2,
|
label: '否'
|
}
|
],
|
// pagination: {
|
// total: 999,
|
// pageNum: 1,
|
// pageSize: 10,
|
// },
|
};
|
},
|
created() {
|
this.getLists()
|
},
|
methods: {
|
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
|
})
|
},
|
search() {
|
this.getLists()
|
},
|
reset() {
|
this.searchForm = {
|
orderId: '',
|
container: '',
|
bol: '',
|
email: '',
|
address: '',
|
DO: '',
|
status: '',
|
extra: JSON.parse(localStorage.getItem('userInfo')).extra
|
}
|
this.getLists()
|
}
|
}
|
};
|
</script>
|
<style>
|
html {
|
background-color: rgba(237, 237, 243, 1);
|
}
|
</style>
|
<style scoped lang="less">
|
.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>
|
