lijingjia
/
ds-wms-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新运输计划

Browse Source
szh-new
sunzehua 4 months ago
parent fce460b945
commit 42aa4ca14e
3 changed files with 108 additions and 349 deletions
Show Stats Download Patch File Download Diff File

2
src/views/taskmanage/api.ts
Unescape Escape View File

@ -379,7 +379,7 @@ export function TaskManageBCSendEmai1(parameter) {
}
export function TaskTransPlanHasChange(parameter) {
return request<DataResult>({
url: '/TaskTransPlanHasChange/taskPKId',
url: '/taskApi/TaskTransPlanHasChange/GetInfoByTaskId',
method: 'get',
params: parameter
})

2
src/views/taskmanage/taskList/taskStyle.less
Unescape Escape View File

@ -29,7 +29,7 @@
}
.box {
border: 1px solid rgba(232, 235, 237, 1);
border-bottom: 1px solid rgba(232, 235, 237, 1);
padding: 15px 20px;
margin-bottom: 16px;

453
src/views/taskmanage/taskList/transPlanHasChange.vue
Unescape Escape View File

@ -1,121 +1,120 @@
<template>
<div class="main">
<a-spin :spinning="spinning">
<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 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>
<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>
<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="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 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>
<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 class="box">
<div class="LeftHead">
<div style="font-weight: bold;">到达计划</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 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-row style="margin-top: 40px;" type="flex" justify="end" :gutter="16">
<taskButton :buttonList="['取消', '完成', '转移', '邮件', '检索']" @loadingStart="loadingStart"
@loadingStop="loadingStop" :id="taskPKId"></taskButton>
</a-row>
</a-spin>
<taskButton :buttonList="['取消', '完成', '转移', '邮件', '检索']" @loadingStart="loadingStart" @loadingStop="loadingStop"
:id="taskPKId"></taskButton>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { GetInfoByTaskIdNotice } from '../api'
import { TaskTransPlanHasChange } from '../api'
import taskButton from '../components/taskButton.vue'
import { useMessage } from '../../../hooks/web/useMessage'
const { createMessage } = useMessage()
@ -141,257 +140,17 @@ const tableLoad = ref(false)
onMounted(() => {
// getInfo()
taskData.value = {
"taskPkId": "08dcaf78-2a14-4a17-8754-fb8dd5630677",
"pkId": "08dcaf78-2a19-49df-8a32-b7b30cac12c3",
"billNo": "241585502",
"contaNoList": [
"TEMU1415619"
],
"carrier": "MSK",
"changeReasonNotes": "We would like to inform you that we are facing certain operational challenges at the terminal which will impact our container discharge operations. We are doing our utmost to minimize the delay & make the container available for further clearance.",
"groupBatchNo": "08dcaf78-0f8f-40a3-8c0e-689706b3f3bc",
"isLast": true,
"from": {
"portList": [
{
"indx": 1,
"portName": "Qingdao",
"countryCode": "CN",
"terminalName": "Qingdao Qianwan Container Co Ltd",
"isRemoved": false
}
],
"dateList": [
{
"indx": 1,
"dateVal": "2024-07-27 08:00:00",
"isRemoved": true
},
{
"indx": 2,
"dateVal": "2024-07-27 15:01:00",
"isRemoved": true
},
{
"indx": 3,
"dateVal": "2024-07-29 07:10:00",
"isRemoved": false
}
],
"vesselList": [
{
"indx": 1,
"vessel": "MAERSK SEBAROK",
"voyno": "430S",
"flag": "SG",
"isRemoved": false
}
]
},
"to": {
"portList": [
{
"indx": 1,
"portName": "Brisbane",
"countryCode": "AU",
"terminalName": "Brisbane Patrick Terminal",
"isRemoved": false
}
],
"dateList": [
{
"indx": 1,
"dateVal": "2024-08-22 07:00:00",
"isRemoved": true
},
{
"indx": 2,
"dateVal": "2024-08-27 14:00:00",
"isRemoved": true
},
{
"indx": 3,
"dateVal": "2024-08-28 02:00:00",
"isRemoved": false
}
],
"vesselList": [
{
"indx": 1,
"vessel": "MAERSK SEBAROK",
"voyno": "430S",
"flag": "SG",
"isRemoved": false
}
]
}
}
getInfo()
})
const columns = [
{
title: 'Shipment',
dataIndex: 'shipment',
align: 'center',
width: '120px'
},
{
title: 'equipmentNumber',
dataIndex: 'equipmentNumber',
align: 'center',
width: '150px'
},
{
title: 'Place of Receipt',
dataIndex: 'placeOfReceipt',
align: 'center',
width: '150px'
},
{
title: 'Load Port Name',
dataIndex: 'loadPortName',
align: 'center',
width: '150px'
},
{
title: 'Discharge Port Name',
align: 'center',
dataIndex: 'dischargePortName',
width: '180px'
},
{
title: 'Place of Delivery',
dataIndex: 'placeOfDelivery',
align: 'center',
width: '150px'
},
{
title: '已发通知',
dataIndex: 'isSend',
align: 'center',
width: '90px'
},
{
title: '订舱',
dataIndex: 'bookingId',
width: '70px',
align: 'center',
},
{
title: '客户同意换船',
dataIndex: 'userOpinion',
width: '120px',
align: 'center',
},
{
title: '是否客户提交',
dataIndex: 'isUserManual',
align: 'center',
width: '120px',
},
{
title: '箱型箱量',
dataIndex: 'ctnStat',
align: 'center',
width: '120px',
},
{
title: '客户',
width: '120px',
align: 'center',
dataIndex: 'customerName'
},
{
title: '分享链接',
dataIndex: 'groupName',
align: 'center',
width: '100px',
fixed: 'right',
customCell: (_, index) => {
return {
rowspan: mergeCells(_.groupName, taskData.value.preBillList, 'groupName', index)
}
},
}
]
const columnsLoad = [
{
title: 'Shipment',
dataIndex: 'shipment',
align: 'center',
width: '120px'
},
{
title: 'Equipment Number',
dataIndex: 'equipmentNumber',
align: 'center',
width: '120px'
},
{
title: 'Container',
dataIndex: 'containerType',
align: 'center',
width: '120px'
},
{
title: 'FEE',
dataIndex: 'fee',
align: 'center',
width: '70px'
},
{
title: 'Weight',
dataIndex: 'weight',
align: 'center',
width: '70px'
},
{
title: 'Place of Receipt',
dataIndex: 'placeOfReceipt',
align: 'center',
width: '120px'
},
{
title: 'Load Port Name',
dataIndex: 'loadPortName',
align: 'center',
width: '120px'
},
{
title: 'Discharge Port Name',
dataIndex: 'dischargePortName',
align: 'center',
width: '120px'
},
{
title: 'Place of Delivery',
dataIndex: 'placeOfDelivery',
align: 'center',
width: '120px'
}
]
function mergeCells(text, data, key, index) {
// 上一行该列数据是否一样
if (index !== 0 && text == data[index - 1][key]) {
return 0;
}
let rowSpan = 1;
// 判断下一行是否相等
for (let i = index + 1; i < data.length; i++) {
if (text !== data[i][key]) {
break;
}
rowSpan++;
}
return rowSpan;
}
function getInfo() {
spinning.value = true
const ApiData = {
taskPKId: taskPKId.value
}
GetInfoByTaskIdNotice(ApiData).then(res => {
TaskTransPlanHasChange(ApiData).then(res => {
if (res.succeeded) {
taskData.value = res.data
} else {

Write Preview
Loading…
Cancel
Save