Commit f4784031 authored by dragondean@qq.com's avatar dragondean@qq.com
parents c60c5e0b 8faf6911
...@@ -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) => {
......
<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,150 +81,11 @@ export default { ...@@ -84,150 +81,11 @@ export default {
width: "", width: "",
fullscreen: false, 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: "", 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() {
...@@ -260,21 +118,48 @@ export default { ...@@ -260,21 +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) {
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;
...@@ -298,5 +183,6 @@ export default { ...@@ -298,5 +183,6 @@ export default {
margin: 0 10px; margin: 0 10px;
} }
} }
}
} }
</style> </style>
This diff is collapsed.
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