|
|
|
|
@ -1,225 +1,245 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<a-spin :spinning="spinning">
|
|
|
|
|
<div class="main-box">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<p>
|
|
|
|
|
<i style="color: orange;margin-right: 10px;font-size: 16px"
|
|
|
|
|
class="icon-lunchuan iconfont"></i>
|
|
|
|
|
货物运输计划已变更 {{ taskData.carrier }}
|
|
|
|
|
</p>
|
|
|
|
|
<p>时间：{{ taskData.createTime }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">提单号</div>
|
|
|
|
|
{{ taskData.billNo }}
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">此订舱号派生自原单号</div>
|
|
|
|
|
{{ taskData.origBillNo }}
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">订舱号</div>
|
|
|
|
|
{{ taskData.bookingNo }}
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">集装箱号</div>
|
|
|
|
|
{{ taskData.contaNoList }}
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="20">
|
|
|
|
|
<div class="text">变更原因</div>
|
|
|
|
|
{{ taskData.changeReasonNotes }}
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<div style="font-weight: bold;">出运计划</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;margin-top: 15px;">
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
<div style="font-weight: bold;font-size: 13px;">港口名,国家,码头</div>
|
|
|
|
|
<div :class="{
|
|
|
|
|
gray: taskData.from.portList.length == 1,
|
|
|
|
|
red: taskData.from.portList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.from.portList.length > 1 && !item.isRemoved
|
|
|
|
|
}" v-for="(item, index) in taskData.from.portList" :key="index">
|
|
|
|
|
{{ item.portName }},{{ item.countryCode }},{{ item.terminalName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
<div style="font-weight: bold;font-size: 13px;">预计离港日</div>
|
|
|
|
|
<div :class="{
|
|
|
|
|
gray: taskData.from.dateList.length == 1,
|
|
|
|
|
red: taskData.from.dateList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.from.dateList.length > 1 && !item.isRemoved
|
|
|
|
|
}" v-for="(item, index) in taskData.from.dateList" :key="index">
|
|
|
|
|
{{ item.dateVal }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
<div style="font-weight: bold;font-size: 13px;">船名,航次,船旗</div>
|
|
|
|
|
<div :class="{
|
|
|
|
|
gray: taskData.from.vesselList.length == 1,
|
|
|
|
|
red: taskData.from.vesselList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.from.vesselList.length > 1 && !item.isRemoved
|
|
|
|
|
}" v-for="(item, index) in taskData.from.vesselList" :key="index">
|
|
|
|
|
{{ item.vessel }},{{ item.voyno }},{{ item.flag }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<div style="font-weight: bold;">到达计划</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;margin-top: 15px;">
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
<div style="font-weight: bold;font-size: 13px;">港口名,国家,码头</div>
|
|
|
|
|
<div :class="{
|
|
|
|
|
gray: taskData.to.portList.length == 1,
|
|
|
|
|
red: taskData.to.portList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.to.portList.length > 1 && !item.isRemoved
|
|
|
|
|
}" v-for="(item, index) in taskData.to.portList" :key="index">
|
|
|
|
|
{{ item.portName }},{{ item.countryCode }},{{ item.terminalName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
<div style="font-weight: bold;font-size: 13px;">预计到港日</div>
|
|
|
|
|
<div :class="{
|
|
|
|
|
gray: taskData.to.dateList.length == 1,
|
|
|
|
|
red: taskData.to.dateList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.to.dateList.length > 1 && !item.isRemoved
|
|
|
|
|
}" v-for="(item, index) in taskData.to.dateList" :key="index">
|
|
|
|
|
{{ item.dateVal }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%;">
|
|
|
|
|
<div style="font-weight: bold;font-size: 13px;">船名,航次,船旗</div>
|
|
|
|
|
<div :class="{
|
|
|
|
|
gray: taskData.to.vesselList.length == 1,
|
|
|
|
|
red: taskData.to.vesselList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.to.vesselList.length > 1 && !item.isRemoved
|
|
|
|
|
}" v-for="(item, index) in taskData.to.vesselList" :key="index">
|
|
|
|
|
{{ item.vessel }},{{ item.voyno }},{{ item.flag }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<a-spin :spinning="spinning">
|
|
|
|
|
<div class="main-box">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<p>
|
|
|
|
|
<i
|
|
|
|
|
style="color: orange; margin-right: 10px; font-size: 16px"
|
|
|
|
|
class="icon-lunchuan iconfont"
|
|
|
|
|
></i>
|
|
|
|
|
货物运输计划已变更 {{ taskData.carrier }}
|
|
|
|
|
</p>
|
|
|
|
|
<p>时间：{{ taskData.createTime }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">提单号</div>
|
|
|
|
|
{{ taskData.billNo }}
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">此订舱号派生自原单号</div>
|
|
|
|
|
{{ taskData.origBillNo }}
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">订舱号</div>
|
|
|
|
|
{{ taskData.bookingNo }}
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<div class="text">集装箱号</div>
|
|
|
|
|
{{ taskData.contaNoList }}
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="20">
|
|
|
|
|
<div class="text">变更原因</div>
|
|
|
|
|
{{ taskData.changeReasonNotes }}
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<div style="font-weight: bold">出运计划</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 15px">
|
|
|
|
|
<div style="width: 33%">
|
|
|
|
|
<div style="font-weight: bold; font-size: 13px">港口名,国家地区,码头</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="{
|
|
|
|
|
gray: taskData.from.portList.length == 1,
|
|
|
|
|
red: taskData.from.portList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.from.portList.length > 1 && !item.isRemoved,
|
|
|
|
|
}"
|
|
|
|
|
v-for="(item, index) in taskData.from.portList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.portName }},{{ item.countryCode }},{{ item.terminalName }}</div
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
<taskButton :buttonList="['取消', '完成', '转移', '邮件', '检索']" @loadingStart="loadingStart" @loadingStop="loadingStop"
|
|
|
|
|
:id="taskPKId"></taskButton>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%">
|
|
|
|
|
<div style="font-weight: bold; font-size: 13px">预计离港日</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="{
|
|
|
|
|
gray: taskData.from.dateList.length == 1,
|
|
|
|
|
red: taskData.from.dateList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.from.dateList.length > 1 && !item.isRemoved,
|
|
|
|
|
}"
|
|
|
|
|
v-for="(item, index) in taskData.from.dateList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.dateVal }}</div
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%">
|
|
|
|
|
<div style="font-weight: bold; font-size: 13px">船名,航次,船旗</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="{
|
|
|
|
|
gray: taskData.from.vesselList.length == 1,
|
|
|
|
|
red: taskData.from.vesselList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.from.vesselList.length > 1 && !item.isRemoved,
|
|
|
|
|
}"
|
|
|
|
|
v-for="(item, index) in taskData.from.vesselList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.vessel }},{{ item.voyno }},{{ item.flag }}</div
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="LeftHead">
|
|
|
|
|
<div style="font-weight: bold">到达计划</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 15px">
|
|
|
|
|
<div style="width: 33%">
|
|
|
|
|
<div style="font-weight: bold; font-size: 13px">港口名,国家地区,码头</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="{
|
|
|
|
|
gray: taskData.to.portList.length == 1,
|
|
|
|
|
red: taskData.to.portList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.to.portList.length > 1 && !item.isRemoved,
|
|
|
|
|
}"
|
|
|
|
|
v-for="(item, index) in taskData.to.portList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.portName }},{{ item.countryCode }},{{ item.terminalName }}</div
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%">
|
|
|
|
|
<div style="font-weight: bold; font-size: 13px">预计到港日</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="{
|
|
|
|
|
gray: taskData.to.dateList.length == 1,
|
|
|
|
|
red: taskData.to.dateList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.to.dateList.length > 1 && !item.isRemoved,
|
|
|
|
|
}"
|
|
|
|
|
v-for="(item, index) in taskData.to.dateList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.dateVal }}</div
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 33%">
|
|
|
|
|
<div style="font-weight: bold; font-size: 13px">船名,航次,船旗</div>
|
|
|
|
|
<div
|
|
|
|
|
:class="{
|
|
|
|
|
gray: taskData.to.vesselList.length == 1,
|
|
|
|
|
red: taskData.to.vesselList.length > 1 && item.isRemoved,
|
|
|
|
|
green: taskData.to.vesselList.length > 1 && !item.isRemoved,
|
|
|
|
|
}"
|
|
|
|
|
v-for="(item, index) in taskData.to.vesselList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.vessel }},{{ item.voyno }},{{ item.flag }}</div
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
<taskButton
|
|
|
|
|
:buttonList="['取消', '完成', '转移', '邮件', '检索']"
|
|
|
|
|
@loadingStart="loadingStart"
|
|
|
|
|
@loadingStop="loadingStop"
|
|
|
|
|
:id="taskPKId"
|
|
|
|
|
></taskButton>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, onMounted, computed } from 'vue'
|
|
|
|
|
import { TaskTransPlanHasChange } from '../api'
|
|
|
|
|
import taskButton from '../components/taskButton.vue'
|
|
|
|
|
import { useMessage } from '../../../hooks/web/useMessage'
|
|
|
|
|
const { createMessage } = useMessage()
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
const selectedRowKeysTable = ref([])
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const spinning = ref(false)
|
|
|
|
|
const taskData = ref({
|
|
|
|
|
import { ref, onMounted, computed } from 'vue'
|
|
|
|
|
import { TaskTransPlanHasChange } from '../api'
|
|
|
|
|
import taskButton from '../components/taskButton.vue'
|
|
|
|
|
import { useMessage } from '../../../hooks/web/useMessage'
|
|
|
|
|
const { createMessage } = useMessage()
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
const selectedRowKeysTable = ref([])
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const spinning = ref(false)
|
|
|
|
|
const taskData = ref({
|
|
|
|
|
from: {
|
|
|
|
|
vesselList: [],
|
|
|
|
|
dateList: [],
|
|
|
|
|
portList: [],
|
|
|
|
|
vesselList: [],
|
|
|
|
|
dateList: [],
|
|
|
|
|
portList: [],
|
|
|
|
|
},
|
|
|
|
|
to: {
|
|
|
|
|
vesselList: [],
|
|
|
|
|
dateList: [],
|
|
|
|
|
portList: [],
|
|
|
|
|
vesselList: [],
|
|
|
|
|
dateList: [],
|
|
|
|
|
portList: [],
|
|
|
|
|
},
|
|
|
|
|
contaNoList: []
|
|
|
|
|
}) as any
|
|
|
|
|
const taskPKId = ref(route.query.taskPKId)
|
|
|
|
|
const tableLoad = ref(false)
|
|
|
|
|
|
|
|
|
|
contaNoList: [],
|
|
|
|
|
}) as any
|
|
|
|
|
const taskPKId = ref(route.query.taskPKId)
|
|
|
|
|
const tableLoad = ref(false)
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getInfo()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function getInfo() {
|
|
|
|
|
function getInfo() {
|
|
|
|
|
spinning.value = true
|
|
|
|
|
const ApiData = {
|
|
|
|
|
taskPKId: taskPKId.value
|
|
|
|
|
taskPKId: taskPKId.value,
|
|
|
|
|
}
|
|
|
|
|
TaskTransPlanHasChange(ApiData).then(res => {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
taskData.value = res.data
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
spinning.value = false
|
|
|
|
|
TaskTransPlanHasChange(ApiData).then((res) => {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
taskData.value = res.data
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
spinning.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
function handleOpenUser() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function handleOpen() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function handleOpenCtn() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function onSelectChange(selectedRowKeys) {
|
|
|
|
|
selectedRowKeys.value = selectedRowKeys;
|
|
|
|
|
};
|
|
|
|
|
function loadingStart() {
|
|
|
|
|
}
|
|
|
|
|
function handleOpenUser() {}
|
|
|
|
|
function handleOpen() {}
|
|
|
|
|
function handleOpenCtn() {}
|
|
|
|
|
function onSelectChange(selectedRowKeys) {
|
|
|
|
|
selectedRowKeys.value = selectedRowKeys
|
|
|
|
|
}
|
|
|
|
|
function loadingStart() {
|
|
|
|
|
spinning.value = true
|
|
|
|
|
}
|
|
|
|
|
function loadingStop() {
|
|
|
|
|
}
|
|
|
|
|
function loadingStop() {
|
|
|
|
|
spinning.value = false
|
|
|
|
|
}
|
|
|
|
|
function handleRefshPage() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function handleRefsh() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function handleSendNotice() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function handleRefshPage() {}
|
|
|
|
|
function handleRefsh() {}
|
|
|
|
|
function handleSendNotice() {}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
@import url('./taskStyle.less');
|
|
|
|
|
@import url('./taskStyle.less');
|
|
|
|
|
|
|
|
|
|
.gray {
|
|
|
|
|
.gray {
|
|
|
|
|
color: rgb(157 157 157);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.red {
|
|
|
|
|
.red {
|
|
|
|
|
color: red;
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.green {
|
|
|
|
|
.green {
|
|
|
|
|
color: rgb(40, 202, 40);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.point {
|
|
|
|
|
.point {
|
|
|
|
|
height: 10px;
|
|
|
|
|
width: 10px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background: green;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modaltitle {
|
|
|
|
|
.modaltitle {
|
|
|
|
|
border-bottom: 1px solid #000;
|
|
|
|
|
width: 5rem;
|
|
|
|
|
padding: 0.2rem 0.5rem;
|
|
|
|
|
margin-top: 1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-chuanfanguanli-chuanfanshenqing {
|
|
|
|
|
.icon-chuanfanguanli-chuanfanshenqing {
|
|
|
|
|
color: '#02A7F0';
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
张同海
1 month ago