From 42aa4ca14e9a3fa73c06d242e217dd4d453dcf0b Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Fri, 9 Aug 2024 10:31:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=BF=90=E8=BE=93=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/taskmanage/api.ts                   |   2 +-
 src/views/taskmanage/taskList/taskStyle.less  |   2 +-
 .../taskList/transPlanHasChange.vue           | 453 ++++--------------
 3 files changed, 108 insertions(+), 349 deletions(-)

diff --git a/src/views/taskmanage/api.ts b/src/views/taskmanage/api.ts
index 00a72f63..33f06a9b 100644
--- a/src/views/taskmanage/api.ts
+++ b/src/views/taskmanage/api.ts
@@ -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
   })
diff --git a/src/views/taskmanage/taskList/taskStyle.less b/src/views/taskmanage/taskList/taskStyle.less
index 6ffb65c1..626823fc 100644
--- a/src/views/taskmanage/taskList/taskStyle.less
+++ b/src/views/taskmanage/taskList/taskStyle.less
@@ -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;
 
diff --git a/src/views/taskmanage/taskList/transPlanHasChange.vue b/src/views/taskmanage/taskList/transPlanHasChange.vue
index 508c47e3..91c9a83f 100644
--- a/src/views/taskmanage/taskList/transPlanHasChange.vue
+++ b/src/views/taskmanage/taskList/transPlanHasChange.vue
@@ -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 {