Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
jiedao-app-operator-master
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lanbaoming
jiedao-app-operator-master
Commits
3a614958
Commit
3a614958
authored
Jul 27, 2022
by
huhaiqing106
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
海运操作开发
parent
53ff8b17
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
850 additions
and
196 deletions
+850
-196
booking.vue
src/views/ecw/box/shippingSea/nodePage/booking.vue
+1
-1
seaProcess.vue
src/views/ecw/box/shippingSea/seaProcess.vue
+57
-183
seaStepDetail.vue
src/views/ecw/box/shippingSea/seaStepDetail.vue
+432
-3
shippingSea.vue
src/views/ecw/box/shippingSea/shippingSea.vue
+360
-9
No files found.
src/views/ecw/box/shippingSea/nodePage/booking.vue
View file @
3a614958
...
@@ -120,7 +120,7 @@ export default {
...
@@ -120,7 +120,7 @@ export default {
this
.
$refs
[
"
bookingForm
"
].
validate
((
valid
)
=>
{
this
.
$refs
[
"
bookingForm
"
].
validate
((
valid
)
=>
{
if
(
valid
)
{
if
(
valid
)
{
booking
({
booking
({
shipmentId
:
this
.
$attrs
.
shipmentObj
.
id
,
shipmentId
:
this
.
shipmentObj
.
id
,
...
this
.
bookingObj
,
...
this
.
bookingObj
,
operateType
:
2
,
operateType
:
2
,
}).
then
((
res
)
=>
{
}).
then
((
res
)
=>
{
...
...
src/views/ecw/box/shippingSea/seaProcess.vue
View file @
3a614958
<
template
>
<
template
>
<div>
<div
class=
"app-seaProcess"
>
<!-- 海运流程图 -->
<!-- 海运流程图 -->
<el-scrollbar
:vertical=
"true"
style=
"width: 100%;"
viewClass=
"shipping-chart"
>
<el-scrollbar
:vertical=
"true"
viewClass=
"shipping-chart"
>
<div
v-for=
"(nodes,index) in
chartData['sea']
"
:key=
"index"
class=
"chart-nodes"
>
<div
v-for=
"(nodes,index) in
seaBaseData
"
:key=
"index"
class=
"chart-nodes"
>
<div
class=
"node-area"
>
<div
class=
"node-area"
>
<div
v-for=
"node in nodes"
:key=
"node.title"
@
click=
"nodeClick(node)"
class=
"node-div"
>
<div
v-for=
"node in nodes"
:key=
"node.title"
@
click=
"nodeClick(node)"
class=
"node-div"
>
<template
v-if=
"!node.unNode"
>
<template
v-if=
"!node.unNode"
>
<img
:src=
"
node.imgSrc
"
alt=
""
>
<img
:src=
"
getImgSrc(node)
"
alt=
""
>
<p>
{{
node
.
title
}}
</p>
<p>
{{
node
.
title
}}
</p>
</
template
>
</
template
>
<
template
v-else-if=
"node.unNode"
>
<
template
v-else-if=
"node.unNode"
>
...
@@ -14,7 +14,7 @@
...
@@ -14,7 +14,7 @@
</
template
>
</
template
>
</div>
</div>
</div>
</div>
<div
class=
"arrow-area"
v-if=
"index !== (
chartData['sea']
.length-1)"
>
<div
class=
"arrow-area"
v-if=
"index !== (
seaBaseData
.length-1)"
>
<img
src=
"@/assets/images/shipping/jt-start.png"
alt=
""
>
<img
src=
"@/assets/images/shipping/jt-start.png"
alt=
""
>
</div>
</div>
</div>
</div>
...
@@ -22,7 +22,7 @@
...
@@ -22,7 +22,7 @@
<!-- 弹窗 -->
<!-- 弹窗 -->
<el-dialog
custom-class=
"shipping-dialog"
:title=
"dialogConfig.title"
:visible.sync=
"dialogConfig.dialogVisible"
:width=
"dialogConfig.width"
:fullscreen=
"dialogConfig.fullscreen"
:close-on-click-modal=
false
:modal-append-to-body=
false
append-to-body
destroy-on-close
>
<el-dialog
custom-class=
"shipping-dialog"
:title=
"dialogConfig.title"
:visible.sync=
"dialogConfig.dialogVisible"
:width=
"dialogConfig.width"
:fullscreen=
"dialogConfig.fullscreen"
:close-on-click-modal=
false
:modal-append-to-body=
false
append-to-body
destroy-on-close
>
<component
v-bind:is=
"currentComponent"
@
closeDialog=
"closeDialog"
v-bind=
"$attrs"
:shipmentObj=
"shipmentObj"
:allSupplier=
"allSupplier"
:allDocks=
"allDocks"
:allUsers=
"allUsers"
></component>
<component
v-bind:is=
"currentComponent"
@
closeDialog=
"closeDialog"
v-bind=
"$attrs"
:shipmentObj=
"shipmentObj"
></component>
</el-dialog>
</el-dialog>
</div>
</div>
</template>
</template>
...
@@ -44,9 +44,6 @@ import arrivalWidget from "./nodePage/arrival.vue";
...
@@ -44,9 +44,6 @@ import arrivalWidget from "./nodePage/arrival.vue";
import
cusClearanceWidget
from
"
./nodePage/cusClearance.vue
"
;
import
cusClearanceWidget
from
"
./nodePage/cusClearance.vue
"
;
import
unloadingWidget
from
"
./nodePage/unloading/index.vue
"
;
import
unloadingWidget
from
"
./nodePage/unloading/index.vue
"
;
import
settlementWidget
from
"
./nodePage/settlement.vue
"
;
import
settlementWidget
from
"
./nodePage/settlement.vue
"
;
import
{
getSupplierPage
}
from
"
@/api/ecw/supplier
"
;
import
{
getDockPage
}
from
"
@/api/ecw/dock
"
;
import
{
listUser
}
from
"
@/api/system/user
"
;
/**
/**
* 海运流程图
* 海运流程图
...
@@ -72,8 +69,8 @@ export default {
...
@@ -72,8 +69,8 @@ export default {
settlementWidget
,
settlementWidget
,
},
},
props
:
{
props
:
{
shippingType
:
String
,
shipmentObj
:
Object
,
shipmentObj
:
Object
,
seaBaseData
:
Array
,
},
},
data
()
{
data
()
{
return
{
return
{
...
@@ -84,161 +81,11 @@ export default {
...
@@ -84,161 +81,11 @@ export default {
width
:
""
,
width
:
""
,
fullscreen
:
false
,
fullscreen
:
false
,
},
},
// 流程图节点
chartData
:
{
sea
:
[
[
{
title
:
"
订舱
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/dc-start.png
"
),
type
:
"
booking
"
,
voName
:
"
bookSeaInfo
"
,
},
],
[
{
title
:
"
预装
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/yz-start.png
"
),
type
:
"
preinstall
"
,
voName
:
"
preInstallInfo
"
,
},
{
title
:
"
拖车
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/tc-start.png
"
),
type
:
"
trailer
"
,
voName
:
"
trailerInfo
"
,
},
{
title
:
"
AGENT
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/agent-start.png
"
),
type
:
"
agent
"
,
voName
:
"
agentInfo
"
,
},
],
[
{
title
:
"
装柜
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/zg-start.png
"
),
type
:
"
cabinet
"
,
voName
:
"
cabinetInfo
"
,
},
],
[
{
title
:
"
报关
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/bg-start.png
"
),
type
:
"
cusDeclaration
"
,
voName
:
"
clearanceInfo
"
,
},
{
title
:
"
配船
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/pc-start.png
"
),
type
:
"
ship
"
,
voName
:
"
shipConfigInfo
"
,
},
{
title
:
"
提单补料
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/tdcl-start.png
"
),
type
:
"
subMaterial
"
,
voName
:
"
ladingBillInfo
"
,
},
],
[
{
title
:
"
驳船
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/bc-start.png
"
),
type
:
"
barge
"
,
voName
:
"
bargeInfo
"
,
},
],
[
{
title
:
"
起运
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/qy-start.png
"
),
type
:
"
departure
"
,
voName
:
"
shippingInfo
"
,
},
],
[
{
title
:
"
提单Copy
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/tdcopy-start.png
"
),
type
:
"
blCopy
"
,
voName
:
"
ladingCopyInfo
"
,
},
{
type
:
"
clrDocument
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/qg-start.png
"
),
title
:
"
清关文件
"
,
voName
:
"
clearanceDocInfo
"
,
},
],
[
{
title
:
"
到港
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/dg-start.png
"
),
type
:
"
arrival
"
,
voName
:
"
arrivalInfo
"
,
},
],
[
{
title
:
"
清关
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/qg-start.png
"
),
type
:
"
cusClearance
"
,
voName
:
"
clearanceInfo
"
,
},
],
[
{
title
:
"
卸柜
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/xg-start.png
"
),
type
:
"
unloading
"
,
voName
:
"
cabinetUnloadInfo
"
,
},
],
[
{
title
:
"
结算
"
,
imgSrc
:
require
(
"
@/assets/images/shipping/js-start.png
"
),
type
:
"
settlement
"
,
voName
:
"
settlementInfo
"
,
},
],
],
},
// 当前组件
// 当前组件
currentComponent
:
""
,
currentComponent
:
""
,
// 供应商
allSupplier
:
[],
// 码头
allDocks
:
[],
// 用户
allUsers
:
[],
};
};
},
},
created
()
{
created
()
{},
// 供应商
getSupplierPage
({
pageNo
:
"
1
"
,
pageSize
:
"
10000
"
}).
then
((
res
)
=>
{
const
{
data
}
=
res
;
this
.
allSupplier
=
data
.
list
.
map
((
item
)
=>
{
if
(
item
.
companyType
)
{
item
.
companyTypes
=
item
.
companyType
.
split
(
"
,
"
);
}
return
item
;
});
});
// 码头
getDockPage
({
pageNo
:
"
1
"
,
pageSize
:
"
10000
"
}).
then
((
res
)
=>
{
const
{
data
}
=
res
;
this
.
allDocks
=
data
.
list
;
});
// 用户
listUser
({
pageNo
:
"
1
"
,
pageSize
:
"
10000
"
}).
then
((
res
)
=>
{
const
{
data
}
=
res
;
this
.
allUsers
=
data
.
list
??
[];
});
},
methods
:
{
methods
:
{
/** 关闭弹窗 */
/** 关闭弹窗 */
closeDialog
()
{
closeDialog
()
{
...
@@ -271,22 +118,48 @@ export default {
...
@@ -271,22 +118,48 @@ export default {
}
}
this
.
$set
(
this
.
dialogConfig
,
"
dialogVisible
"
,
true
);
this
.
$set
(
this
.
dialogConfig
,
"
dialogVisible
"
,
true
);
},
},
/* 获取图片路径 */
getImgSrc
(
node
)
{
return
node
.
imgSrc
[
node
.
currStatus
??
"
start
"
];
},
},
},
watch
:
{
watch
:
{
shipmentObj
(
val
)
{
shipmentObj
(
val
)
{
console
.
log
(
val
);
// 迭代每个节点
this
.
shipmentObj
=
val
;
for
(
const
nodes
of
this
.
seaBaseData
)
{
for
(
const
node
of
nodes
)
{
const
{
keyName
,
voName
,
status
}
=
node
;
if
(
!
keyName
)
continue
;
const
{
start
,
wait
,
end
}
=
status
;
if
(
start
.
includes
(
val
[
keyName
]))
{
node
.
currStatus
=
"
start
"
;
}
if
(
start
.
includes
(
val
[
keyName
])
&&
val
[
voName
])
{
node
.
currStatus
=
"
wait
"
;
}
if
(
wait
.
includes
(
val
[
keyName
]))
{
node
.
currStatus
=
"
wait
"
;
}
if
(
end
.
includes
(
val
[
keyName
]))
{
node
.
currStatus
=
"
end
"
;
}
}
}
},
},
},
},
};
};
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
.shipping-chart
{
.app-seaProcess
{
.shipping-chart
{
width
:
max-content
;
width
:
max-content
;
display
:
flex
;
display
:
flex
;
justify-content
:
center
;
padding
:
10px
0
;
padding
:
10px
;
.chart-nodes
{
.chart-nodes
{
display
:
flex
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
...
@@ -310,5 +183,6 @@ export default {
...
@@ -310,5 +183,6 @@ export default {
margin
:
0
10px
;
margin
:
0
10px
;
}
}
}
}
}
}
}
</
style
>
</
style
>
src/views/ecw/box/shippingSea/seaStepDetail.vue
View file @
3a614958
<
template
>
<
template
>
<div
class=
"app-seaStepDetail"
>
<el-scrollbar
:vertical=
"true"
>
<div
class=
"shipping-step"
>
<template
v-for=
"(step, index) in flatSeaStep"
>
<div
:key=
"index"
v-if=
"shipmentObj[step.voName]"
class=
"step-table"
>
<div
class=
"step-title"
>
{{
step
.
title
}}
</div>
<div
v-for=
"(data, index) in columnsMapping[step.voName]"
:key=
"index"
class=
"step-content"
>
<p>
{{
data
.
title
}}
</p>
<p>
{{
getObjInfo
(
step
.
voName
,
data
)
}}
</p>
</div>
</div>
</
template
>
</div>
</el-scrollbar>
</div>
</template>
</template>
<
script
>
<
script
>
export
default
{};
import
dayjs
from
"
dayjs
"
;
export
default
{
name
:
"
seaStepDetail
"
,
props
:
{
shipmentObj
:
Object
,
seaBaseData
:
Array
,
},
data
()
{
return
{
flatSeaStep
:
this
.
seaBaseData
.
flat
(),
columnsMapping
:
{
bookSeaInfo
:
[
{
title
:
"
SO NO
"
,
key
:
"
sono
"
,
},
{
title
:
"
船公司类型
"
,
key
:
"
shipCompanyType
"
,
type
:
"
supplier
"
,
},
{
title
:
"
驳船港
"
,
key
:
"
bargePortId
"
,
type
:
"
dock
"
,
},
{
title
:
"
大船港
"
,
key
:
"
bigPortId
"
,
type
:
"
dock
"
,
},
{
title
:
"
目的港
"
,
key
:
"
destPortId
"
,
type
:
"
dock
"
,
},
{
title
:
"
订舱公司
"
,
key
:
"
spaceCompanyId
"
,
type
:
"
supplier
"
,
},
{
title
:
"
预计驳船时间
"
,
key
:
"
bargeTime
"
,
type
:
"
date
"
,
},
{
title
:
"
预计开船时间
"
,
key
:
"
sailTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
preInstallInfo
:
[
{
title
:
"
预装时间
"
,
key
:
"
createTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
trailerInfo
:
[
{
title
:
"
货柜号
"
,
key
:
"
tlContainerNo
"
,
},
{
title
:
"
封条
"
,
key
:
"
tlStripSeal
"
,
},
{
title
:
"
拖车公司
"
,
key
:
"
tlCompanyId
"
,
},
{
title
:
"
拖车时间
"
,
key
:
"
tlTime
"
,
},
{
title
:
"
车牌
"
,
key
:
"
tlLicensePlate
"
,
},
{
title
:
"
司机
"
,
key
:
"
tlDriver
"
,
},
{
title
:
"
联系方式
"
,
key
:
"
tlDriverContact
"
,
},
{
title
:
"
联系方式
"
,
key
:
"
tlDriverContact
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
agentInfo
:
[
{
title
:
"
代理商
"
,
key
:
"
agentId
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
cabinetInfo
:
[
{
title
:
"
到仓时间
"
,
key
:
"
ldInWarehouseTime
"
,
type
:
"
date
"
,
},
{
title
:
"
仓库类型
"
,
key
:
"
ldWarehouseType
"
,
},
{
title
:
"
装柜时间
"
,
key
:
"
ldBoxTime
"
,
type
:
"
date
"
,
},
{
title
:
"
出仓时间
"
,
key
:
"
ldOutWarehouseTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
customsInfo
:
[
{
title
:
"
报关方式
"
,
key
:
"
dcCustomsType
"
,
},
{
title
:
"
报关行公司
"
,
key
:
"
dcCompanyId
"
,
},
{
title
:
"
截关时间
"
,
key
:
"
dcCutOffTime
"
,
type
:
"
date
"
,
},
{
title
:
"
状态
"
,
key
:
"
dcCustomsStatus
"
,
},
{
title
:
"
放行时间
"
,
key
:
"
dcPassTime
"
,
},
{
title
:
"
新封条
"
,
key
:
"
dcStripSeal
"
,
},
{
title
:
"
柜重
"
,
key
:
"
dcBoxWgt
"
,
},
{
title
:
"
货重
"
,
key
:
"
dcGoodsWgt
"
,
},
{
title
:
"
VGM重量
"
,
key
:
"
dcVgmWgt
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
shipConfigInfo
:
[
{
title
:
"
已配/免配
"
,
key
:
"
saExmtStatus
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
ladingBillInfo
:
[
{
title
:
"
清关代理
"
,
key
:
"
agentId
"
,
},
{
title
:
"
提单品名
"
,
key
:
"
blMblNo
"
,
},
{
title
:
"
通知方
"
,
key
:
"
notifyingId
"
,
},
{
title
:
"
提单备注
"
,
key
:
"
remarks
"
,
},
{
title
:
"
数量
"
,
key
:
""
,
},
{
title
:
"
体积
"
,
key
:
""
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
bargeInfo
:
[
{
title
:
"
驳船
"
,
key
:
"
bgExmtStatus
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
shippingInfo
:
[
{
title
:
"
实际开船时间
"
,
key
:
"
dtRealShipTime
"
,
type
:
"
date
"
,
},
{
title
:
"
预计到港时间
"
,
key
:
"
dtEstArrivalTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
clearanceDocInfo
:
[
{
title
:
"
agent list
"
,
key
:
"
cdAgentlistType
"
,
},
{
title
:
"
soncap
"
,
key
:
"
cdSoncapType
"
,
},
{
title
:
"
出单方式
"
,
key
:
"
cdOutBillType
"
,
},
{
title
:
"
寄送时间
"
,
key
:
"
cdSendTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
arrivalInfo
:
[
{
title
:
"
实际到港时间
"
,
key
:
"
apRealTime
"
,
},
{
title
:
"
确认到港
"
,
key
:
"
apConfirmTime
"
,
},
{
title
:
"
卸港时间
"
,
key
:
"
apUnloadPortTime
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
clearanceInfo
:
[
{
title
:
"
预计清关时间
"
,
key
:
"
clEstTime
"
,
type
:
"
date
"
,
},
{
title
:
"
清关时间
"
,
key
:
"
clClearTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
cabinetUnloadInfo
:
[
{
title
:
"
到仓时间
"
,
key
:
"
ulWarehouseTime
"
,
type
:
"
date
"
,
},
{
title
:
"
卸货时间
"
,
key
:
"
ulBoxTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
settlementInfo
:
[
{
title
:
"
可结算
"
,
key
:
"
slSettlementTime
"
,
type
:
"
date
"
,
},
{
title
:
"
已结算
"
,
key
:
"
slSettledTime
"
,
type
:
"
date
"
,
},
{
title
:
"
业务员
"
,
key
:
"
operator
"
,
},
],
},
};
},
methods
:
{
getObjInfo
(
voName
,
data
)
{
const
{
key
,
type
}
=
data
;
let
val
=
this
.
shipmentObj
[
voName
]?.[
key
]
??
""
;
if
(
val
)
{
switch
(
type
)
{
case
"
date
"
:
val
=
dayjs
(
val
).
format
(
"
YYYY-MM-DD
"
);
break
;
case
"
supplier
"
:
val
=
this
.
getSupplier
(
Number
(
val
));
break
;
case
"
dock
"
:
val
=
this
.
getDock
(
Number
(
val
));
break
;
}
}
return
val
;
},
getSupplier
(
id
)
{
return
(
this
.
$attrs
.
allSupplier
.
find
((
item
)
=>
item
.
id
===
id
)?.
companyZh
??
id
);
},
getDock
(
id
)
{
return
(
this
.
$attrs
.
allSupplier
.
find
((
item
)
=>
item
.
id
===
id
)?.
countryZh
??
id
);
},
},
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
>
.app-seaStepDetail
{
.shipping-step
{
margin-top
:
15px
;
display
:
flex
;
flex-direction
:
column
;
flex-wrap
:
wrap
;
align-content
:
flex-start
;
// width: 100%;
height
:
500px
;
p
{
margin
:
0
;
}
.step-table
{
width
:
200px
;
border
:
1px
solid
gray
;
margin-bottom
:
15px
;
margin-right
:
15px
;
.step-title
{
font-size
:
16px
;
font-weight
:
bolder
;
background-color
:
#c6c8ce
;
line-height
:
30px
;
text-align
:
center
;
}
.step-content
{
display
:
grid
;
border-top
:
1px
solid
gray
;
font-size
:
14px
;
line-height
:
25px
;
grid-template-columns
:
repeat
(
2
,
1fr
);
>
p
:first-child
{
border-right
:
1px
solid
gray
;
}
>
p
{
padding
:
0
5px
;
}
}
}
}
}
</
style
>
</
style
>
src/views/ecw/box/shippingSea/shippingSea.vue
View file @
3a614958
<
template
>
<
template
>
<div>
<div>
<el-row
type=
"flex"
style=
"margin-top: 15px; margin-bottom: 15px"
justify=
"center"
>
<el-row
type=
"flex"
style=
"margin-top: 15px; margin-bottom: 15px"
justify=
"center"
>
<el-col
:xs=
"24"
:sm=
"24"
:md=
"24"
:lg=
"2
0"
:xl=
"20
"
>
<el-col
:xs=
"24"
:sm=
"24"
:md=
"24"
:lg=
"2
4"
:xl=
"19
"
>
<div
style=
"display: flex; justify-content: space-between;align-items: flex-end;"
>
<div
style=
"display: flex; justify-content: space-between;align-items: flex-end;"
>
<h2>
海运出货操作
</h2>
<h2>
海运出货操作
</h2>
</div>
</div>
...
@@ -24,18 +24,23 @@
...
@@ -24,18 +24,23 @@
</el-card>
</el-card>
<!-- 海运流程图 -->
<!-- 海运流程图 -->
<div
class=
"shipping-flow"
>
<seaProcess
:seaBaseData=
"seaBaseData"
:shipmentObj=
"shipmentObj"
:allSupplier=
"allSupplier"
:allDocks=
"allDocks"
:allUsers=
"allUsers"
/>
<shippingChart
:shipmentObj=
"shipmentObj"
/>
</div>
<!-- 海运步骤图 -->
<seaStepDetail
:seaBaseData=
"seaBaseData"
:shipmentObj=
"shipmentObj"
:allSupplier=
"allSupplier"
:allDocks=
"allDocks"
:allUsers=
"allUsers"
/>
</el-col>
</el-col>
</el-row>
</el-row>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
shippingChart
from
"
../shippingSea/seaProcess
"
;
import
seaProcess
from
"
./seaProcess.vue
"
;
import
seaStepDetail
from
"
./seaStepDetail.vue
"
;
import
{
getbox
}
from
"
@/api/ecw/box
"
;
import
{
getbox
}
from
"
@/api/ecw/box
"
;
import
{
getWarehouseList
}
from
"
@/api/ecw/warehouse
"
;
import
{
getWarehouseList
}
from
"
@/api/ecw/warehouse
"
;
import
{
getSupplierPage
}
from
"
@/api/ecw/supplier
"
;
import
{
getDockPage
}
from
"
@/api/ecw/dock
"
;
import
{
listUser
}
from
"
@/api/system/user
"
;
/**
/**
* 海运操作主页面
* 海运操作主页面
...
@@ -43,7 +48,8 @@ import { getWarehouseList } from "@/api/ecw/warehouse";
...
@@ -43,7 +48,8 @@ import { getWarehouseList } from "@/api/ecw/warehouse";
export
default
{
export
default
{
name
:
"
shippingSea
"
,
name
:
"
shippingSea
"
,
components
:
{
components
:
{
shippingChart
,
seaProcess
,
seaStepDetail
,
},
},
props
:
{
props
:
{
shipmentId
:
String
,
shipmentId
:
String
,
...
@@ -52,16 +58,364 @@ export default {
...
@@ -52,16 +58,364 @@ export default {
return
{
return
{
shipmentObj
:
{},
shipmentObj
:
{},
warehouseList
:
[],
warehouseList
:
[],
// 供应商
allSupplier
:
[],
// 码头
allDocks
:
[],
// 用户
allUsers
:
[],
// 流程图节点
seaBaseData
:
[
[
{
title
:
"
订舱
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/dc-start.png
"
),
end
:
require
(
"
@/assets/images/shipping/dc-end.png
"
),
},
type
:
"
booking
"
,
// 类型
/**
* 订舱状态:11、未订舱;12、已订舱
*/
voName
:
"
bookSeaInfo
"
,
// 订舱对象vo
keyName
:
"
bkStatus
"
,
status
:
{
start
:
[
11
],
wait
:
[],
end
:
[
12
],
},
},
],
[
{
title
:
"
预装
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/yz-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/yz-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/yz-end.png
"
),
},
type
:
"
preinstall
"
,
/**
* 预装状态:21、未预装;22、预装审核中;23、预装审核失败;24、预装审核成功
*/
voName
:
"
preInstallInfo
"
,
keyName
:
"
prStatus
"
,
status
:
{
start
:
[
21
],
wait
:
[
22
,
23
],
end
:
[
24
],
},
},
{
title
:
"
拖车
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/tc-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/tc-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/tc-end.png
"
),
},
type
:
"
trailer
"
,
/**
* 拖车状态:31、未派车;32、已派车
*/
voName
:
"
trailerInfo
"
,
keyName
:
"
tlStatus
"
,
status
:
{
start
:
[
31
],
wait
:
[],
end
:
[
32
],
},
},
{
title
:
"
AGENT
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/agent-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/agent-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/agent-end.png
"
),
},
type
:
"
agent
"
,
voName
:
"
agentInfo
"
,
currStatus
:
"
start
"
,
},
],
[
{
title
:
"
装柜
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/zg-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/zg-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/zg-end.png
"
),
},
type
:
"
cabinet
"
,
/**
* 装柜状态:41、未装柜;42、装柜中;43、已装柜、待封柜;44、封柜审核中;45、封柜审核失败;46、封柜审核成功
*/
voName
:
"
cabinetInfo
"
,
keyName
:
"
ldStatus
"
,
status
:
{
start
:
[
41
],
wait
:
[
42
,
43
,
44
,
45
],
end
:
[
46
],
},
},
],
[
{
title
:
"
报关
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/bg-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/bg-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/bg-end.png
"
),
},
type
:
"
cusDeclaration
"
,
voName
:
"
customsInfo
"
,
/**
*报关状态:51、未报关;52、报关中;53、已报关
*/
keyName
:
"
dcStatus
"
,
status
:
{
start
:
[
51
],
wait
:
[
52
],
end
:
[
53
],
},
},
{
title
:
"
配船
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/pc-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/pc-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/pc-end.png
"
),
},
type
:
"
ship
"
,
/**
* 配船状态:61、未配船;62、已配船
*/
voName
:
"
shipConfigInfo
"
,
keyName
:
"
saStatus
"
,
status
:
{
start
:
[
61
],
wait
:
[],
end
:
[
62
],
},
},
{
title
:
"
提单补料
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/tdcl-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/tdcl-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/tdcl-end.png
"
),
},
type
:
"
subMaterial
"
,
/**
* 提单补料状态:71、未提单补料;72、已提单补料
*/
voName
:
"
ladingBillInfo
"
,
keyName
:
"
blStatus
"
,
status
:
{
start
:
[
71
],
wait
:
[],
end
:
[
72
],
},
},
],
[
{
title
:
"
驳船
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/bc-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/bc-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/bc-end.png
"
),
},
type
:
"
barge
"
,
/**
* 驳船状态:81、未驳船;82、已驳船
*/
voName
:
"
bargeInfo
"
,
keyName
:
"
bgStatus
"
,
status
:
{
start
:
[
81
],
wait
:
[],
end
:
[
82
],
},
},
],
[
{
title
:
"
起运
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/qy-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/qy-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/qy-end.png
"
),
},
type
:
"
departure
"
,
/**
* 起运状态:91、未起运;92、已起运
*/
voName
:
"
shippingInfo
"
,
keyName
:
"
dtStatus
"
,
status
:
{
start
:
[
91
],
wait
:
[],
end
:
[
92
],
},
},
],
[
{
title
:
"
提单Copy
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/tdcopy-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/tdcopy-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/tdcopy-end.png
"
),
},
type
:
"
blCopy
"
,
/**
* 提单COPY状态:101、未上传;102、已上传
*/
voName
:
"
ladingCopyInfo
"
,
keyName
:
"
cpStatus
"
,
status
:
{
start
:
[
101
],
wait
:
[],
end
:
[
102
],
},
},
{
type
:
"
clrDocument
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/qg-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/qg-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/qg-end.png
"
),
},
title
:
"
清关文件
"
,
/**
* 清关文件状态:111、未清关文件;112、已清关文件
*/
voName
:
"
clearanceDocInfo
"
,
keyName
:
"
cdStatus
"
,
status
:
{
start
:
[
111
],
wait
:
[],
end
:
[
112
],
},
},
],
[
{
title
:
"
到港
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/dg-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/dg-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/dg-end.png
"
),
},
type
:
"
arrival
"
,
/**
* 到港状态:121、未到港;112、已到港
*/
voName
:
"
arrivalInfo
"
,
keyName
:
"
apStatus
"
,
status
:
{
start
:
[
121
],
wait
:
[],
end
:
[
122
],
},
},
],
[
{
title
:
"
清关
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/qg-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/qg-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/qg-end.png
"
),
},
type
:
"
cusClearance
"
,
/**
* 清关状态:131、未清关;132、已清关
*/
voName
:
"
clearanceInfo
"
,
keyName
:
"
clStatus
"
,
status
:
{
start
:
[
131
],
wait
:
[],
end
:
[
132
],
},
},
],
[
{
title
:
"
卸柜
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/xg-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/xg-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/xg-end.png
"
),
},
type
:
"
unloading
"
,
/**
* 卸柜状态:141、未卸柜;142、卸柜中;143、卸柜审核中;144、卸柜审核失败;145、卸柜审核成功;146、已卸柜
*/
voName
:
"
cabinetUnloadInfo
"
,
keyName
:
"
ulStatus
"
,
status
:
{
start
:
[
141
],
wait
:
[
142
,
143
,
144
,
145
],
end
:
[
146
],
},
},
],
[
{
title
:
"
结算
"
,
imgSrc
:
{
start
:
require
(
"
@/assets/images/shipping/js-start.png
"
),
wait
:
require
(
"
@/assets/images/shipping/js-wait.png
"
),
end
:
require
(
"
@/assets/images/shipping/js-end.png
"
),
},
type
:
"
settlement
"
,
/**
* 结算状态:151、未结算;152、结算中;153、已结算
*/
voName
:
"
settlementInfo
"
,
keyName
:
"
slStatus
"
,
status
:
{
start
:
[
151
],
wait
:
[
152
],
end
:
[
153
],
},
},
],
],
};
};
},
},
created
()
{
created
()
{
// 出货
getbox
(
this
.
shipmentId
).
then
((
res
)
=>
{
getbox
(
this
.
shipmentId
).
then
((
res
)
=>
{
const
{
data
}
=
res
;
const
{
data
}
=
res
;
this
.
shipmentObj
=
data
??
{};
this
.
shipmentObj
=
data
??
{};
});
});
// 仓库
getWarehouseList
().
then
((
r
)
=>
{
getWarehouseList
().
then
((
r
)
=>
{
this
.
warehouseList
=
r
.
data
;
this
.
warehouseList
=
r
.
data
;
});
});
// 供应商
getSupplierPage
({
pageNo
:
"
1
"
,
pageSize
:
"
10000
"
}).
then
((
res
)
=>
{
const
{
data
}
=
res
;
this
.
allSupplier
=
data
.
list
.
map
((
item
)
=>
{
if
(
item
.
companyType
)
{
item
.
companyTypes
=
item
.
companyType
.
split
(
"
,
"
);
}
return
item
;
});
});
// 码头
getDockPage
({
pageNo
:
"
1
"
,
pageSize
:
"
10000
"
}).
then
((
res
)
=>
{
const
{
data
}
=
res
;
this
.
allDocks
=
data
.
list
;
});
// 用户
listUser
({
pageNo
:
"
1
"
,
pageSize
:
"
10000
"
}).
then
((
res
)
=>
{
const
{
data
}
=
res
;
this
.
allUsers
=
data
.
list
??
[];
});
},
},
methods
:
{
methods
:
{
importCityName
(
id
)
{
importCityName
(
id
)
{
...
@@ -73,9 +427,6 @@ export default {
...
@@ -73,9 +427,6 @@ export default {
</
script
>
</
script
>
<
style
lang=
"scss"
>
<
style
lang=
"scss"
>
.shipping-flow
{
margin-top
:
5px
;
}
// 海运操作统一弹窗样式
// 海运操作统一弹窗样式
.shipping-dialog
{
.shipping-dialog
{
.el-dialog__body
{
.el-dialog__body
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment