Commit f4784031 authored by dragondean@qq.com's avatar dragondean@qq.com
parents c60c5e0b 8faf6911
......@@ -120,7 +120,7 @@ export default {
this.$refs["bookingForm"].validate((valid) => {
if (valid) {
booking({
shipmentId: this.$attrs.shipmentObj.id,
shipmentId: this.shipmentObj.id,
...this.bookingObj,
operateType: 2,
}).then((res) => {
......
<template>
<div>
<div class="app-seaProcess">
<!-- 海运流程图 -->
<el-scrollbar :vertical="true" style="width: 100%;" viewClass="shipping-chart">
<div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes">
<el-scrollbar :vertical="true" viewClass="shipping-chart">
<div v-for="(nodes,index) in seaBaseData" :key="index" class="chart-nodes">
<div class="node-area">
<div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div">
<template v-if="!node.unNode">
<img :src="node.imgSrc" alt="">
<img :src="getImgSrc(node)" alt="">
<p>{{node.title}}</p>
</template>
<template v-else-if="node.unNode">
......@@ -14,7 +14,7 @@
</template>
</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="">
</div>
</div>
......@@ -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>
<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>
</div>
</template>
......@@ -44,9 +44,6 @@ import arrivalWidget from "./nodePage/arrival.vue";
import cusClearanceWidget from "./nodePage/cusClearance.vue";
import unloadingWidget from "./nodePage/unloading/index.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 {
settlementWidget,
},
props: {
shippingType: String,
shipmentObj: Object,
seaBaseData: Array,
},
data() {
return {
......@@ -84,150 +81,11 @@ export default {
width: "",
fullscreen: false,
},
// 流程图节点
chartData: {
sea: [
[
{
title: "订舱",
imgSrc: require("@/assets/images/shipping/dc-start.png"),
type: "booking",
},
],
[
{
title: "预装",
imgSrc: require("@/assets/images/shipping/yz-start.png"),
type: "preinstall",
},
{
title: "拖车",
imgSrc: require("@/assets/images/shipping/tc-start.png"),
type: "trailer",
},
{
title: "AGENT",
imgSrc: require("@/assets/images/shipping/agent-start.png"),
type: "agent",
},
],
[
{
title: "装柜",
imgSrc: require("@/assets/images/shipping/zg-start.png"),
type: "cabinet",
},
],
[
{
title: "报关",
imgSrc: require("@/assets/images/shipping/bg-start.png"),
type: "cusDeclaration",
},
{
title: "配船",
imgSrc: require("@/assets/images/shipping/pc-start.png"),
type: "ship",
},
{
title: "提单材料",
imgSrc: require("@/assets/images/shipping/tdcl-start.png"),
type: "subMaterial",
},
],
[
{
title: "驳船",
imgSrc: require("@/assets/images/shipping/bc-start.png"),
type: "barge",
},
],
[
{
title: "起运",
imgSrc: require("@/assets/images/shipping/qy-start.png"),
type: "departure",
},
],
[
/* {
title: "清关文件",
imgSrc: require("@/assets/images/shipping/qg-start.png"),
type: "clearanceDocument",
}, */
{
title: "提单Copy",
imgSrc: require("@/assets/images/shipping/tdcopy-start.png"),
type: "blCopy",
},
{
type: "clrDocument",
imgSrc: require("@/assets/images/shipping/qg-start.png"),
title: "清关文件",
},
],
[
{
title: "到港",
imgSrc: require("@/assets/images/shipping/dg-start.png"),
type: "arrival",
},
],
[
{
title: "清关",
imgSrc: require("@/assets/images/shipping/qg-start.png"),
type: "cusClearance",
},
],
[
{
title: "卸柜",
imgSrc: require("@/assets/images/shipping/xg-start.png"),
type: "unloading",
},
],
[
{
title: "结算",
imgSrc: require("@/assets/images/shipping/js-start.png"),
type: "settlement",
},
],
],
},
// 当前组件
currentComponent: "",
// 供应商
allSupplier: [],
// 码头
allDocks: [],
// 用户
allUsers: [],
};
},
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 ?? [];
});
},
created() {},
methods: {
/** 关闭弹窗 */
closeDialog() {
......@@ -260,21 +118,48 @@ export default {
}
this.$set(this.dialogConfig, "dialogVisible", true);
},
/* 获取图片路径 */
getImgSrc(node) {
return node.imgSrc[node.currStatus ?? "start"];
},
},
watch: {
shipmentObj(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>
<style lang="scss">
.shipping-chart {
.app-seaProcess {
.shipping-chart {
width: max-content;
display: flex;
justify-content: center;
padding: 10px;
padding: 10px 0;
.chart-nodes {
display: flex;
align-items: center;
......@@ -298,5 +183,6 @@ export default {
margin: 0 10px;
}
}
}
}
</style>
<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>
<script>
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>
<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>
<template>
<div>
<el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="19">
<div style="display: flex; justify-content: space-between;align-items: flex-end;">
<h2>海运出货操作</h2>
</div>
......@@ -24,18 +24,23 @@
</el-card>
<!-- 海运流程图 -->
<div class="shipping-flow">
<shippingChart :shipmentObj="shipmentObj" />
</div>
<seaProcess :seaBaseData="seaBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" />
<!-- 海运步骤图 -->
<seaStepDetail :seaBaseData="seaBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" />
</el-col>
</el-row>
</div>
</template>
<script>
import shippingChart from "../shippingSea/seaProcess";
import seaProcess from "./seaProcess.vue";
import seaStepDetail from "./seaStepDetail.vue";
import { getbox } from "@/api/ecw/box";
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";
export default {
name: "shippingSea",
components: {
shippingChart,
seaProcess,
seaStepDetail,
},
props: {
shipmentId: String,
......@@ -52,16 +58,364 @@ export default {
return {
shipmentObj: {},
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() {
// 出货
getbox(this.shipmentId).then((res) => {
const { data } = res;
this.shipmentObj = data ?? {};
});
// 仓库
getWarehouseList().then((r) => {
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: {
importCityName(id) {
......@@ -73,9 +427,6 @@ export default {
</script>
<style lang="scss">
.shipping-flow {
margin-top: 5px;
}
// 海运操作统一弹窗样式
.shipping-dialog {
.el-dialog__body {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment