07/25

src/views/bookingcabin/generation/api.ts

@@ -25,3 +25,11 @@ export function CreateBookingOrder(parameter) {
     data: parameter
   })
 }
+
+export function GetEnableProjectDictTreeList(parameter) {
+  return request<DataResult>({
+    url: '/opApi/DjyServiceStatus/GetEnableProjectDictTreeList',
+    method: 'get',
+    params: parameter
+  })
+}

src/views/bookingcabin/generation/columns.tsx

@@ -60,6 +60,18 @@ export const formSchema: FormSchema[] = [
             }
             GetClientInfoWithContact(data).then(res=>{
               customerContactAllList.value = res.data.clientContactList
+              if(res.data.saleId){
+                formModel.saleId = res.data.saleId
+              }
+              if(res.data.op){
+                formModel.operatorId = res.data.op
+              }
+              if(res.data.doc){
+                formModel.docId = res.data.doc
+              }
+              if(res.data.customerService){
+                formModel.custserviceId = res.data.customerService
+              }
             })
           }
           if (!obj && !e) {

src/views/bookingcabin/generation/index.vue

@@ -1,6 +1,7 @@
 <template>
   <BasicModal width="800px" v-bind="$attrs" :use-wrapper="true" title="生成方式选择" @register="registerModal"
     @ok="handleSave">
+    <div class="ctn-box">
       <BasicForm @register="registerForm">
         <template #slotNo="{ model, field }">
           <span>{{ model[field] }}</span>
@@ -11,8 +12,16 @@
           </span>
         </template>
       </BasicForm>
+    </div>
     <div class="ctn-box">
-      <div>选择箱型</div>
+      <div style="margin-bottom: 10px;" >服务项目</div>
+      <div class="project-list">
+        <div @click="handleClickPro(index)"  :class="{active:item.active}" class="project-item" v-for="(item, index) in projectList" :key="index">{{
+          item.name }}</div>
+      </div>
+    </div>
+    <div class="ctn-box">
+      <div style="margin-bottom: 10px;">选择箱型</div>
       <div class="list">
         <div class="item" v-for="item in CtnList" :key="item.gid">
           <a-input-number style="width: 100%;" :max="item.maxnum" v-model:value="item.ctnNum" :min="0">
@@ -38,10 +47,10 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { BasicModal, useModalInner } from '/@/components/Modal'
 import { BasicForm, useForm } from '/@/components/Form/index'
-import { getAvailableCtnsBySlot, CreateBookingOrder } from './api'
+import { getAvailableCtnsBySlot, CreateBookingOrder, GetEnableProjectDictTreeList } from './api'
 import { formSchema } from './columns'
 import { useMessage } from '/@/hooks/web/useMessage'
 const { createMessage } = useMessage()
@@ -52,11 +61,29 @@ const [registerForm, { resetFields, setFieldsValue, getFieldsValue }] = useForm(
 })
 const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
   if (data.type === 'init') {
+    console.log(1231233)
     setFieldsValue(data.row)
     init(data.row)
   }
 })
-
+const projectList = ref([]) as any
+onMounted(() => {
+  GetEnableProjectDictTreeList({ isAvoidCache: false }).then(res => {
+    if (res.success) {
+      if (res.data) {
+        projectList.value = res.data[0].children ? res.data[0].children : []
+        projectList.value.forEach(item => {
+          item.active = false
+        })
+      }
+    } else {
+      createMessage.error(res.message)
+    }
+  })
+})
+function handleClickPro(index) {
+  projectList.value[index].active = !projectList.value[index].active
+}
 const type = ref('')
 const CtnList = ref([]) as any
 const ctnListCopy = ref([]) as any
@@ -121,12 +148,12 @@ function handleSave() {
   }
 }
 function handleSaveCabin() {
-  const projectList = []
+  const projectArr = [] as any
-  // this.bookingServiceItem.forEach(item => {
+  projectList.value.forEach(item => {
-  //   if (item.isYield) {
+    if (item.active) {
-  //     projectList.push(item.serviceProjectCode)
+      projectArr.push(item.code)
-  //   }
+    }
-  // })
+  })
   if (CtnList.value.length > 0) {
     const arr = [] as any
     CtnList.value.forEach(item => {
@@ -144,7 +171,7 @@ function handleSaveCabin() {
   }
   const ApiData = {
     slotId: slotEdit.value.id,
-    projectList,
+    projectList:projectArr,
     ...getFieldsValue()
   }
   setModalProps({ loading: true })
@@ -203,4 +230,22 @@ function handleSaveCabin() {
   padding: 10px 20px 15px;
   margin-top: 15px;
 }
+
+.project-list {
+  display: flex;
+
+  .project-item {
+    background-color: rgb(255, 255, 255);
+    color: rgb(37, 122, 250);
+    padding: 3px 7px;
+    text-align: center;
+    margin-right: 8px;
+    font-size: 12px;
+    cursor: pointer;
+    &.active {
+      background-color: rgb(37, 122, 250);
+      color: white;
+    }
+  }
+}
 </style>

src/views/taskmanage/api.ts

@@ -4,16 +4,745 @@ import { DataResult, PageRequest } from '/@/api/model/baseModel'
 
 export function GetCurrentTotalStat(data) {
   return request<DataResult>({
-    url: '/opApi/BookingLabel/GetPage',
+    url: '/taskApi/TaskManage/GetCurrentTotalStat',
     method: 'post',
     data,
   })
 }
 
-export function mskGetPage(parameter) {
+export function GetPageAsync(parameter) {
   return request<DataResult>({
-    url: '/opApi/SpaceBookingMSKAPI/GetPageAsync',
+    url: '/taskApi/TaskManage/GetPageAsync',
     method: 'post',
     data: parameter
   })
 }
+// 获取所有用户下拉
+export function GetUserListAll() {
+  return request<DataResult>({
+    url: '/mainApi/Common/GetUserList',
+    method: 'get'
+  })
+}
+
+export function TransferTask(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/TransferTask',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function CompleteTask(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/CompleteTask',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function CancelTaskBC(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/CancelTaskBC',
+    method: 'get',
+    params: parameter
+  })
+}
+export function GetVGMCompareResult(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/GetVGMCompareResult',
+    method: 'get',
+    params: parameter
+  })
+}
+
+
+
+/**
+ * 查询台账
+ */
+export function GetTaskManagePage(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/GetPage',
+    method: 'post',
+    data: parameter
+  })
+}
+
+
+
+/**
+ * 获取查询参数
+ *  ParaType STATUS-任务状态;TASK_TYPE-任务类型;SOURCE-任务来源
+ */
+export function GetParaInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/GetParaInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 取消任务
+ */
+export function CancelTask(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/CancelTask',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 完成任务
+ */
+
+
+/**
+ * 下载
+ */
+export function DownloadTaskAttach(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/DownloadTaskAttach',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 转发电子邮件
+ */
+export function SendTelexEmail(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/SendTelexEmail',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 页数计算
+ */
+export function LaraPaperCalc(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/LaraPaperCalc?' + parameter,
+    method: 'post'
+  })
+}
+
+/**
+ * LARA提单纸登记
+ */
+export function LaraPaperRegist(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/LaraPaperRegist?' + parameter,
+    method: 'post'
+  })
+}
+
+/**
+ * 下载正本提单(可批量)
+ */
+export function DownloadOriginalTask(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/DownloadOriginalTask',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * copy 打印
+ */
+export function PrintBatch(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/PrintBatch',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * copy 下载
+ */
+export function DownloadAttach(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/DownloadAttach',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 获取详情
+ */
+export function GetBookingOrderInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageSISubmitted/GetBookingOrderInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * lara 记录
+ */
+export function LaraPaperRegistPost(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/LaraPaperRegistPost',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 发送SI
+ */
+export function SendShippingOrder(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/SendShippingOrder',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetSIFeedBackInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageSISubmitted/GetSIFeedBackInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SaveBookingSI(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/SaveBookingSI',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function LaraPaperRecordExport(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/LaraPaperRecordExport',
+    method: 'get',
+    params: parameter
+  })
+}
+
+
+
+export function SaveBookingVGM(id) {
+  return request<DataResult>({
+    url: '/TaskManage/SaveBookingVGM?taskPKId=' + id,
+    method: 'post'
+  })
+}
+
+export function AcceptChangeShip(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/AcceptChangeShip',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function AcceptCancelChangeShip(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/AcceptCancelChangeShip',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetChangeShipInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/GetChangeShipInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetAbortChangeShipInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/GetAbortChangeShipInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 重新比对
+export function ManualReCompareBC(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/ManualReCompareBC?' + parameter,
+    method: 'post'
+  })
+}
+
+export function DownloadClosingEDI(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/DownloadClosingEDI',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SendClosingEDI(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/SendClosingEDI',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function CalcLaraPageNumbers(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/CalcLaraPageNumbers',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function GetLaraPaperRecordPage(parameter) {
+  return request<DataResult>({
+    url: '/TaskManage/GetLaraPaperRecordPage',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function GetVGMSubmissionInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageVGM/GetVGMSubmissionInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function DownloadFileByBC(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/DownloadFile',
+    method: 'get',
+    params: parameter,
+    responseType: 'blob'
+  })
+}
+export function GetProjectList(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/GetProjectList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function DownloadFile(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/DownloadFile',
+    method: 'get',
+    params: parameter,
+    responseType: 'blob'
+  })
+}
+
+export function CreateBookingAndSlot(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/CreateBookingAndSlot',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function TaskManageBCSendEmai1(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/SendEmail',
+    method: 'get',
+    params: parameter
+  })
+}
+export function TaskTransPlanHasChange(parameter) {
+  return request<DataResult>({
+    url: '/TaskTransPlanHasChange/taskPKId',
+    method: 'get',
+    params: parameter
+  })
+}
+export function TaskManageBCGetCompareResult(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/GetCompareResult',
+    method: 'get',
+    params: parameter
+  })
+}
+export function TaskManageRollingNominationGetInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetLoadStatusDetailList(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetLoadStatusDetailList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function RefreshBookingorder(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/RefreshBookingorder',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function TaskManageRolingWominationGetUrl(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetUrl',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function TaskManageRolingWominationCancelsharelink(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/Cancelsharelink',
+    method: 'post',
+    params: parameter
+  })
+}
+
+export function DispatchRollingNomination(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/DispatchRollingNomination',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function CreateShareLink(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/CreateShareLink',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function GetPreBillDetailList(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetPreBillDetailList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SaveDetai1Container(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/SaveDetailContainer',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function GenShareLink(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GenShareLink',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function PushShareLink(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/PushShareLink',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function shareGetinfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageShareLink/GetInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function PushShareLinkFeedBack(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageShareLink/PushShareLinkFeedBack',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function GetUserFeedBack(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetUserFeedBack',
+    method: 'post',
+    params: parameter
+  })
+}
+
+export function GetVGMMissingInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageVGM/GetVGMMissingInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function CutDateGetInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageCutDate/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function PoddGetInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/PODDischargeGateoutFull/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SendInstantlessage(parameter) {
+  return request<DataResult>({
+    url: '/PODDischargeGateoutFull/SendInstantMessage',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SearchAndConnectBookingInfo(parameter) {
+  return request<DataResult>({
+    url: '/PODDischargeGateoutFull/SearchAndConnectBookingInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function DraftGetInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageDRAFT/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function DraftDownloadFile(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageDRAFT/DownloadFile',
+    method: 'get',
+    responseType: 'arraybuffer',
+    params: parameter
+  })
+}
+
+export function DRAFTSendEmail(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageDRAFT/SendEmail',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function DRAFTSearchAndConnectBookingInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageDRAFT/SearchAndConnectBookingInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function BcSearchAndConnectBookingInfo(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/ReCompareResult',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function ReCompareResult(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/SearchAndConnectBookingInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetBookingOrder(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageBC/GetBookingOrder',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetToShipSelect(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetToShipSelect',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetRollingNominationNoticeReview(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/GetRollingNominationNoticeReview',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function SendRollingNominationNotice(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageRollingNomination/SendRollingNominationNotice',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function GetInfoByTaskIdNotice(parameter) {
+  return request<DataResult>({
+    url: '/TaskCautionNotice/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetInfoByTaskIdPlan(parameter) {
+  return request<DataResult>({
+    url: '/TaskTransPlanHasChange/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function GetInfoByTaskIdRoute(parameter) {
+  return request<DataResult>({
+    url: '/RouteChangeAdvisory/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function QueryVesselVoynoBookingOrder(parameter) {
+  return request<DataResult>({
+    url: '/RouteChangeAdvisory/QueryVesselVoynoBookingOrder',
+    method: 'get',
+    params: parameter
+  })
+}
+export function QueryBookingOrderPlan(parameter) {
+  return request<DataResult>({
+    url: '/TaskTransPlanHasChange/QueryBookingOrder',
+    method: 'get',
+    params: parameter
+  })
+}
+export function BatchSendEmailToCustomer(parameter) {
+  return request<DataResult>({
+    url: '/RouteChangeAdvisory/BatchSendEmailToCustomer',
+    method: 'post',
+    data: parameter
+  })
+}
+export function MergeCreateBookingOrder(parameter) {
+  return request<DataResult>({
+    url: '/BookingSlot/MergeCreateBookingOrder',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 通过任务主键获取派车详情
+ */
+export function TaskManageTruckGetInfoByTaskId(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageTruck/GetInfoByTaskId',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取订舱打印模板列表（带有当前用户打印历史排序）
+ *
+ * @author Myshipping
+ */
+export function TaskManageTruckPrintTemplateWithHistoryList(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageTruck/PrintTemplateWithHistoryList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 打印派车
+ *
+ * @author Myshipping
+ */
+export function TaskManageTruckPrint(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageTruck/Print',
+    method: 'get',
+    params: parameter
+  })
+}
+/**
+ * 批量派车通过任务ID
+ */
+export function TaskManageTruckSendDispatchBatchByTask(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageTruck/SendDispatchBatchByTask',
+    method: 'post',
+    data: parameter
+  })
+}
+/**
+ * 批量派车通过任务ID
+ */
+export function TaskManageTruckCancelDispatchBatchByTask(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageTruck/CancelDispatchBatchByTask',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 检索往来单位（包含车队）
+ *
+ * @author Myshipping
+ */
+export function DjyCustomerQuerytDjyCustomerInfo(parameter) {
+  return request<DataResult>({
+    url: '/DjyCustomer/QuerytDjyCustomerInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SaveTruckByPage(parameter) {
+  return request<DataResult>({
+    url: '/TaskManageTruck/SaveTruckByPage',
+    method: 'post',
+    data: parameter
+  })
+}
+

src/views/taskmanage/components/taskButton.vue

@@ -0,0 +1,104 @@
+<template>
+    <a-row type="flex" :gutter="16">
+        <a-col>
+            <a-button type="primary" @click="OpenUser">转移任务</a-button>
+        </a-col>
+        <a-col>
+            <a-button type="primary" @click="FnCompleteTask">完成任务</a-button>
+        </a-col>
+        <a-col>
+            <a-button type="primary" @click="OpenModal">生 成</a-button>
+        </a-col>
+        <a-col>
+            <a-button type="danger" @click="FnCancelTask">取消任务</a-button>
+        </a-col>
+        <a-col>
+            <a-button type="primary" @click="handleSendMail">发送邮件</a-button>
+        </a-col>
+    </a-row>
+    <a-modal @cancel="UserVisible = false" :visible="UserVisible" title="转移任务" @ok="UserhandleOk">
+        <div style="margin: 15px 0;">接收人</div>
+        <a-select show-search style="width: 200px;" :filter-option="filterOption" v-model:value="UserId">
+            <a-select-option v-for="item in UserList" :key="item.value" :value="item.value">
+                {{ item.label }}
+            </a-select-option>
+        </a-select>
+    </a-modal>
+</template>
+<script lang="ts" setup>
+import { number } from 'echarts';
+import { ref, onMounted, defineProps } from 'vue'
+import { GetUserListAll, TransferTask, CompleteTask, CancelTaskBC } from '../api'
+import { useMessage } from '/@/hooks/web/useMessage'
+const { createMessage } = useMessage()
+const props = defineProps({
+    id: {
+        type: String || Number
+    }
+});
+const UserVisible = ref(false);
+const UserList = ref([]) as any
+const UserId = ref('') //转移任务的用户id
+const emit = defineEmits(['loadingStart', 'loadingStop'])
+function OpenUser() {
+    UserVisible.value = true
+    GetUserListAll().then(res => {
+        UserList.value = res.data
+    })
+}
+function UserhandleOk() {
+    const ApiData = {
+        taskPKId: props.id,
+        userId: UserId.value
+    }
+    TransferTask(ApiData).then(res => {
+        if (res.data.succ) {
+            UserVisible.value = false
+            createMessage.success(res.data.msg)
+        } else {
+            createMessage.error(res.data.msg)
+        }
+    })
+}
+
+function filterOption(input, option) {
+    return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    );
+}
+// 完成任务
+function FnCompleteTask() {
+    const ApiData = [props.id]
+    emit('loadingStart')
+    CompleteTask(ApiData).then(res => {
+        if (res.data.succ) {
+            createMessage.success(res.data.msg)
+        } else {
+            createMessage.error(res.data.msg)
+        }
+        emit('loadingStop')
+    })
+}
+function OpenModal() {
+    console.log('OpenUser')
+}
+//取消任务
+function FnCancelTask() {
+    const ApiData = {
+        taskPKId: props.id
+    }
+    emit('loadingStart')
+    CancelTaskBC(ApiData).then(res => {
+        if (res.data.succ) {
+            createMessage.success(res.data.msg)
+        } else {
+            createMessage.error(res.data.msg)
+        }
+        emit('loadingStop')
+    })
+}
+function handleSendMail() {
+    console.log('OpenUser')
+}
+
+</script>

src/views/taskmanage/components/taskData.vue

@@ -0,0 +1,329 @@
+<template>
+    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="form">
+        <div class="box">
+            <div class="LeftHead">
+                <p class="title">
+                    {{ props.title }} ({{ form.carrierId }})
+                    <i @click="reload" class="icon-refresh-1-copy iconfont"></i>
+                </p>
+                <p>订舱时间：{{ form.bookingConfirmDate }}</p>
+            </div>
+            <a-row>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>提单号</div>
+                        <span class="text"> {{ form.mblNo }}</span>
+                        <i class="icon-fuzhi4 iconfont" @click="copyText(form.mblNo)" style="cursor: pointer;font-size: 13px;margin-left: 10px"></i>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>船名/航次</div>
+                        <span class="text"> {{ form.vessel }}/{{ form.voyNo }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>收货地</div>
+                        <span class="text"> {{ form.placeReceipt }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>ETD</div>
+                        <span class="text"> {{ form.etd ? form.etd.substring(0, 11) : '-' }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>交货地</div>
+                        <span class="text"> {{ form.placeDelivery }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>ETA</div>
+                        <span class="text"> {{ form.eta ? form.eta.substring(0, 11) : '-' }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>订舱人</div>
+                        <span class="text"> {{ form.bookingParty }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>合约号</div>
+                        <span class="text"> {{ form.contractNo }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>样单截止时间</div>
+                        <span class="text"> {{ form.siCutDate }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>箱使天数</div>
+                        <span class="text"> {{ form.detensionFreeDays }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>舱单截止时间</div>
+                        <span class="text"> {{ form.manifestCutDate }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>截港时间</div>
+                        <span class="text"> {{ form.cyCutoffTime }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>MDGF截止时间</div>
+                        <span class="text"> {{ form.mdgfCutDate }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>VGM截止时间</div>
+                        <span class="text"> {{ form.vgmCutoffTime }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>箱型箱量</div>
+                        <span class="text"> {{ form.ctnStat }}</span>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+        </div>
+
+
+        <div class="box">
+            <a-row>
+                <a-col :span="24">
+                    <p class="title">一程</p>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>船名/航次</div>
+                        <span class="text">{{ form.vessel }}/{{ form.voyNo }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>ETD</div>
+                        <span class="text">{{ form.etd ? form.etd.substring(0, 11) : '-' }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>装货港</div>
+                        <span class="text">{{ form.portload }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>ETA</div>
+                        <span class="text"> {{ form.eta ? form.eta.substring(0, 11) : '-' }}</span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>卸货港</div>
+                        <span class="text">{{ form.portDischarge }}</span>
+                    </a-form-item>
+                </a-col>
+
+                <div v-if="form.carriageType == 'TRANSFER_SHIP'">
+                    <a-col :span="24">
+                        <p class="title">二程</p>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="">
+                            <div>船名/航次</div>
+                            <span class="text">{{ form.secondVessel }}/{{ form.secondVoyno }}</span>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="ETD：">
+                            <div>ETD</div>
+                            <span class="text"> {{ form.secondETD ? form.secondETD.substring(0, 11) : '-'
+                                }}</span>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="">
+                            <div>装货港</div>
+                            <span class="text"> {{ form.transferPort1 }}</span>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="">
+                            <div>ETA</div>
+                            <span class="text"> {{ form.secondETA ? form.secondETA.substring(0, 11) : '-'
+                                }}</span>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="8">
+                        <a-form-item label="">
+                            <div>卸货港</div>
+                            <span class="text"> {{ form.portDischarge }}</span>
+                        </a-form-item>
+                    </a-col>
+                </div>
+            </a-row>
+        </div>
+
+
+        <div class="box">
+            <a-row>
+                <a-col :span="24">
+                    <p class="title">关联详情</p>
+                </a-col>
+            </a-row>
+            <a-row>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>已生成舱位</div>
+                        <span class="text">
+                            {{ form.bookingSlotId ? '是' : '否' }}
+                            <span class="CsSee" v-if="form.bookingSlotId" @click="FnSee1">(查看)</span>
+                        </span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>已生成订舱</div>
+                        <span class="text">
+                            {{ form.bookingOrderId ? '是' : '否' }}
+                            <span class="CsSee" v-if="form.bookingOrderId" @click="FnSee">(查看)</span>
+                        </span>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-form-item label="">
+                        <div>任务状态</div>
+                        <span class="text"> {{ form.taskStatus == 'Complete' ? '已完成' : '-' }}</span>
+                    </a-form-item>
+                </a-col>
+            </a-row>
+        </div>
+        <div class="box">
+            <a-col :span="24">
+                <p class="title">关键信息</p>
+            </a-col>
+            <div class="unitBox">
+                <p v-for="(item, index) in form.keywords" :key="index" class="unit" :style="{
+                    background: item.background,
+                    color: Rcolor(item.background),
+                }">
+                    <i :class="item.icon" class="iconfont"></i>{{ item.name }}
+                </p>
+            </div>
+        </div>
+    </a-form>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+const wrapperCol = { span: 22 }
+const labelCol = { span: 0 }
+import { useRouter, useRoute } from 'vue-router'
+const props = defineProps({
+    title: {
+        type: String
+    }
+});
+const form = ref({}) as any
+function reload() {
+
+}
+const router = useRouter();
+function FnSee() {
+    router.push({ path: '/BookingDetail?id=' + this.form.bookingOrderId })
+}
+
+function FnSee1() {
+    router.push({ path: '/CabinManagementDetails?type=Edit&id=' + this.form.bookingSlotId })
+}
+function copyText(text) {
+    const inputDom = document.createElement('textarea')
+    document.body.appendChild(inputDom)
+    inputDom.value = text
+    inputDom.select()
+    inputDom.focus()
+    document.execCommand('copy')
+    document.body.removeChild(inputDom)
+    this.$message.success('复制成功')
+}
+function Rcolor(hexColor) {
+    const hex = hexColor.replace('#', '').toLowerCase()
+    const red = parseInt(hex.substring(0, 2), 16) - 90
+    const green = parseInt(hex.substring(2, 4), 16) - 90
+    const blue = parseInt(hex.substring(4, 6), 16) - 50
+    return `rgb(${red}, ${green}, ${blue})`
+}
+defineExpose({ init })
+function init(data){
+    form.value = data
+}
+</script>
+<style lang="less" scoped>
+.LeftHead {
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+        font-size: 15px;
+        font-weight: 700;
+        color: black;
+    }
+}
+
+.text {
+    font-weight: 700;
+    color: black;
+}
+
+/deep/ .ant-form-item-control-input-content {
+    div {
+        color: rgba(122, 135, 152, 1);
+    }
+}
+
+.box {
+    border: 1px solid rgba(232, 235, 237, 1);
+    padding: 15px 20px;
+    margin-bottom: 16px;
+
+    .title {
+        font-size: 15px;
+        font-weight: 700;
+        color: black;
+    }
+}
+
+.CsSee {
+    color: rgb(104, 104, 228);
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.unitBox {
+    display: flex;
+
+    .unit {
+        margin-right: 15px;
+        padding: 0 5px;
+    }
+}
+
+/deep/ .ant-form-item {
+    margin-bottom: 10px;
+}
+</style>

src/views/taskmanage/taskList/Amendment.vue

@@ -0,0 +1,178 @@
+<template>
+    <a-spin :spinning="spinning">
+        <a-row style="padding: 15px;" :gutter="16">
+            <a-col :span="pdfUrl ? 11 : 24">
+                <taskData ref="taskDataRef" title='Booking Amendment' ></taskData>
+            </a-col>
+            <a-col>
+                <pdf ref="pdfData"></pdf>
+                <taskButton @loadingStart="loadingStart" @loadingStop="loadingStop" :id="taskPKId" ref="taskButtonRef"></taskButton>
+            </a-col>
+        </a-row>
+    </a-spin>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useRouter,useRoute } from 'vue-router'
+import pdf from '../components/pdf.vue'
+import taskData from '../components/taskData.vue'
+import taskButton from '../components/taskButton.vue'
+const route = useRoute()
+const router = useRouter();
+const form = ref({
+    "pkId": "08dcab8e-3757-49bb-8082-1bb3de042459",
+    "taskId": "08dcab8e-374d-4a44-8093-6dc531177f01",
+    "busiType": "BookingConfirmation",
+    "bookingParty": "QINGDAO CHENGSI FREIGHT FORWARDER CO",
+    "mblNo": "242636125",
+    "vessel": "GSL MELITA",
+    "voyNo": "431S",
+    "placeReceipt": "Qingdao,Shandong,China",
+    "portload": "QINGDAO QIANWAN CONTAINER CO LTD",
+    "vgmCutoffTime": "2024-08-01 17:00:00",
+    "eta": "2024-09-03 00:00:00",
+    "etd": "2024-08-03 00:00:00",
+    "portDischarge": "Brisbane Patrick Terminal",
+    "placeDelivery": "Brisbane,Queensland,Australia",
+    "contractNo": "299026908",
+    "fstCustomerSerUserName": "Eight chengsi",
+    "cyCutoffTime": "2024-08-01 22:00:00",
+    "ctnList": [
+        {
+            "ctnALL": "40HC",
+            "ctnnum": 1
+        }
+    ],
+    "fileList": [
+        {
+            "filePath": "BookingAttach\\bcfiles\\08dcab8e-374d-4a44-8093-6dc531177f01\\20240724111048159\\DB_aabhcbhjagaf0x023A.pdf",
+            "fileType": ".pdf",
+            "fileName": "DB_aabhcbhjagaf0x023A.pdf",
+            "fileCategory": "BC",
+            "fileCategoryName": "Booking Confirmation"
+        },
+        {
+            "filePath": "BookingAttach\\bcnoticefiles\\08dcab8e-374d-4a44-8093-6dc531177f01\\20240724111048174\\DB_aabhcbhjagaf0x023A_MODIFY.pdf",
+            "fileType": ".pdf",
+            "fileName": "DB_aabhcbhjagaf0x023A_MODIFY.pdf",
+            "fileCategory": "BC_NOTICE",
+            "fileCategoryName": "Booking Confirmation Notice"
+        }
+    ],
+    "bookingSlotId": 571905822330949,
+    "carrierId": "MSK",
+    "carriageType": "DIRECT_SHIP",
+    "carriageTypeName": "直达",
+    "bookingSlotType": "CONTRACT_ORDER",
+    "bookingSlotTypeName": "合约订舱",
+    "ctnStat": "40HC*1",
+    "weekAt": "31",
+    "detensionFreeDays": 0,
+    "siCutDate": "2024-07-31 18:00:00",
+    "bookingConfirmDate": "2024-07-24 11:10:00",
+    "keywords": [
+        {
+            "name": "承运方式：直达",
+            "background": "#FFFF80",
+            "icon": "icon-yunshu1"
+        },
+        {
+            "name": "订舱方式：合约订舱",
+            "background": "#81D3F8",
+            "icon": "icon-touzijilu"
+        }
+    ],
+    "taskStatus": "Create"
+}) as any
+const pdfUrl = ref('123')
+const taskDataRef = ref()
+onMounted(() => {
+    taskDataRef.value.init(form.value)
+})
+const taskPKId = ref(route.query.taskPKId)
+const spinning = ref(false)
+const formItemLayout = {
+    labelCol1: { span: 6 },
+    wrapperCol1: { span: 18 },
+    labelCol2: { span: 8 },
+    wrapperCol2: { span: 16 },
+    labelCol3: { span: 4 },
+    wrapperCol3: { span: 20 },
+    labelCol4: { span: 8 },
+    wrapperCol4: { span: 16 },
+    labelCol5: { span: 14 },
+    wrapperCol5: { span: 10 },
+    labelCol6: { span: 8 },
+    wrapperCol6: { span: 16 }
+}
+
+const pdfData = ref()
+
+onMounted(() => {
+    pdfData.value.init()
+})
+
+function loadingStart(){
+    spinning.value = true
+}
+function loadingStop(){
+    spinning.value = false
+}
+
+
+
+
+</script>
+<style lang="less" scoped>
+.LeftHead {
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+        font-size: 15px;
+        font-weight: 700;
+        color: black;
+    }
+}
+
+.text {
+    font-weight: 700;
+    color: black;
+}
+
+/deep/ .ant-form-item-control-input-content {
+    div {
+        color: rgba(122, 135, 152, 1);
+    }
+}
+
+.box {
+    border: 1px solid rgba(232, 235, 237, 1);
+    padding: 15px 20px;
+    margin-bottom: 16px;
+
+    .title {
+        font-size: 15px;
+        font-weight: 700;
+        color: black;
+    }
+}
+
+.CsSee {
+    color: rgb(104, 104, 228);
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.unitBox {
+    display: flex;
+
+    .unit {
+        margin-right: 15px;
+        padding: 0 5px;
+    }
+}
+/deep/ .ant-form-item{
+    margin-bottom: 10px;
+}
+</style>

src/views/taskmanage/taskList/BcEditing.vue

@@ -2,273 +2,22 @@
     <a-spin :spinning="spinning">
         <a-row style="padding: 15px;" :gutter="16">
             <a-col :span="pdfUrl ? 11 : 24">
-                <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="form">
+                <taskData ref="taskDataRef" title='Booking Confirmation' ></taskData>
-                    <div class="box">
-                        <div class="LeftHead">
-                            <p class="title">
-                                Booking Confirmation（{{ form.carrierId }}）
-                                <i @click="reload" class="icon-refresh-1-copy iconfont"></i>
-                            </p>
-                            <p>订舱时间：{{ form.bookingConfirmDate }}</p>
-                        </div>
-                        <a-row>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>提单号</div>
-                                    <span class="text"> {{ form.mblNo }}</span>
-                                    <a-icon @click="copyText(form.mblNo)" style="cursor: pointer;" type="copy" />
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>船名/航次</div>
-                                    <span class="text"> {{ form.vessel }}/{{ form.voyNo }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>收货地</div>
-                                    <span class="text"> {{ form.placeReceipt }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>ETD</div>
-                                    <span class="text"> {{ form.etd ? form.etd.substring(0, 11) : '-' }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>交货地</div>
-                                    <span class="text"> {{ form.placeDelivery }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>ETA</div>
-                                    <span class="text"> {{ form.eta ? form.eta.substring(0, 11) : '-' }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>订舱人</div>
-                                    <span class="text"> {{ form.bookingParty }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>合约号</div>
-                                    <span class="text"> {{ form.contractNo }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>样单截止时间</div>
-                                    <span class="text"> {{ form.siCutDate }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>箱使天数</div>
-                                    <span class="text"> {{ form.detensionFreeDays }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>舱单截止时间</div>
-                                    <span class="text"> {{ form.manifestCutDate }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>截港时间</div>
-                                    <span class="text"> {{ form.cyCutoffTime }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>MDGF截止时间</div>
-                                    <span class="text"> {{ form.mdgfCutDate }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>VGM截止时间</div>
-                                    <span class="text"> {{ form.vgmCutoffTime }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>箱型箱量</div>
-                                    <span class="text"> {{ form.ctnStat }}</span>
-                                </a-form-item>
-                            </a-col>
-                        </a-row>
-                    </div>
-
-
-                    <div class="box">
-                        <a-row>
-                            <a-col :span="24">
-                                <p class="title">一程</p>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>船名/航次</div>
-                                    <span class="text">{{ form.vessel }}/{{ form.voyNo }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>ETD</div>
-                                    <span class="text">{{ form.etd ? form.etd.substring(0, 11) : '-' }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>装货港</div>
-                                    <span class="text">{{ form.portload }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>ETA</div>
-                                    <span class="text"> {{ form.eta ? form.eta.substring(0, 11) : '-' }}</span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>卸货港</div>
-                                    <span class="text">{{ form.portDischarge }}</span>
-                                </a-form-item>
-                            </a-col>
-
-                            <div v-if="form.carriageType == 'TRANSFER_SHIP'">
-                                <a-col :span="24">
-                                    <p class="title">二程</p>
-                                </a-col>
-                                <a-col :span="8">
-                                    <a-form-item label="">
-                                        <div>船名/航次</div>
-                                        <span class="text">{{ form.secondVessel }}/{{ form.secondVoyno }}</span>
-                                    </a-form-item>
-                                </a-col>
-                                <a-col :span="8">
-                                    <a-form-item label="ETD：">
-                                        <div>ETD</div>
-                                        <span class="text"> {{ form.secondETD ? form.secondETD.substring(0, 11) : '-'
-                                            }}</span>
-                                    </a-form-item>
-                                </a-col>
-                                <a-col :span="8">
-                                    <a-form-item label="">
-                                        <div>装货港</div>
-                                        <span class="text"> {{ form.transferPort1 }}</span>
-                                    </a-form-item>
-                                </a-col>
-                                <a-col :span="8">
-                                    <a-form-item label="">
-                                        <div>ETA</div>
-                                        <span class="text"> {{ form.secondETA ? form.secondETA.substring(0, 11) : '-'
-                                            }}</span>
-                                    </a-form-item>
-                                </a-col>
-                                <a-col :span="8">
-                                    <a-form-item label="">
-                                        <div>卸货港</div>
-                                        <span class="text"> {{ form.portDischarge }}</span>
-                                    </a-form-item>
-                                </a-col>
-                            </div>
-                        </a-row>
-                    </div>
-
-
-                    <div class="box">
-                        <a-row>
-                            <a-col :span="24">
-                                <p class="title">关联详情</p>
-                            </a-col>
-                        </a-row>
-                        <a-row>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>已生成舱位</div>
-                                    <span class="text">
-                                        {{ form.bookingSlotId ? '是' : '否' }}
-                                        <span class="CsSee" v-if="form.bookingSlotId" @click="FnSee1">(查看)</span>
-                                    </span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>已生成订舱</div>
-                                    <span class="text">
-                                        {{ form.bookingOrderId ? '是' : '否' }}
-                                        <span class="CsSee" v-if="form.bookingOrderId" @click="FnSee">(查看)</span>
-                                    </span>
-                                </a-form-item>
-                            </a-col>
-                            <a-col :span="8">
-                                <a-form-item label="">
-                                    <div>任务状态</div>
-                                    <span class="text"> {{ form.taskStatus == 'Complete' ? '已完成' : '-' }}</span>
-                                </a-form-item>
-                            </a-col>
-                        </a-row>
-                    </div>
-                    <div class="box">
-                        <a-col :span="24">
-                            <p class="title">关键信息</p>
-                        </a-col>
-                        <div class="unitBox">
-                            <p v-for="(item, index) in form.keywords" :key="index" class="unit" :style="{
-                                background: item.background,
-                                color: Rcolor(item.background),
-                            }">
-                                <i :class="item.icon" class="iconfont"></i>{{ item.name }}
-                            </p>
-                        </div>
-                    </div>
-                </a-form>
             </a-col>
             <a-col>
                 <pdf ref="pdfData"></pdf>
-                <a-row type="flex" :gutter="16">
+                <taskButton @loadingStart="loadingStart" @loadingStop="loadingStop" :id="taskPKId" ref="taskButtonRef"></taskButton>
-                    <a-col>
-                        <a-button type="primary" @click="OpenUser">
-                            转移任务
-                        </a-button>
-                    </a-col>
-                    <a-col>
-                        <a-button type="primary" @click="FnCompleteTask">
-                            完成任务
-                        </a-button>
-                    </a-col>
-                    <a-col>
-                        <a-button type="primary" @click="OpenModal">
-                            生 成
-                        </a-button>
-                    </a-col>
-                    <a-col>
-                        <a-button type="danger" @click="FnCancelTask">
-                            取消任务
-                        </a-button>
-                    </a-col>
-                    <a-col>
-                        <a-button type="primary" @click="handleSendMail">
-                            发送邮件
-                        </a-button>
-                    </a-col>
-                </a-row>
             </a-col>
         </a-row>
     </a-spin>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter,useRoute } from 'vue-router'
 import pdf from '../components/pdf.vue'
+import taskData from '../components/taskData.vue'
+import taskButton from '../components/taskButton.vue'
+const route = useRoute()
 const router = useRouter();
 const form = ref({
     "pkId": "08dcab8e-3757-49bb-8082-1bb3de042459",
@@ -336,8 +85,11 @@ const form = ref({
     "taskStatus": "Create"
 }) as any
 const pdfUrl = ref('123')
-const wrapperCol = { span: 22 }
+const taskDataRef = ref()
-const labelCol = { span: 0 }
+onMounted(() => {
+    taskDataRef.value.init(form.value)
+})
+const taskPKId = ref(route.query.taskPKId)
 const spinning = ref(false)
 const formItemLayout = {
     labelCol1: { span: 6 },
@@ -353,40 +105,22 @@ const formItemLayout = {
     labelCol6: { span: 8 },
     wrapperCol6: { span: 16 }
 }
-function reload() {
 
-}
 const pdfData = ref()
 
 onMounted(() => {
     pdfData.value.init()
 })
-function Rcolor(hexColor) {
-    const hex = hexColor.replace('#', '').toLowerCase()
-    const red = parseInt(hex.substring(0, 2), 16) - 90
-    const green = parseInt(hex.substring(2, 4), 16) - 90
-    const blue = parseInt(hex.substring(4, 6), 16) - 50
-    return `rgb(${red}, ${green}, ${blue})`
-}
 
-function FnSee() {
+function loadingStart(){
-    router.push({ path: '/BookingDetail?id=' + this.form.bookingOrderId })
+    spinning.value = true
 }
-
+function loadingStop(){
-function FnSee1() {
+    spinning.value = false
-    router.push({ path: '/CabinManagementDetails?type=Edit&id=' + this.form.bookingSlotId })
 }
 
-function copyText(text) {
+
-    const inputDom = document.createElement('textarea')
+
-    document.body.appendChild(inputDom)
-    inputDom.value = text
-    inputDom.select()
-    inputDom.focus()
-    document.execCommand('copy')
-    document.body.removeChild(inputDom)
-    this.$message.success('复制成功')
-}
 
 </script>
 <style lang="less" scoped>
@@ -438,4 +172,7 @@ function copyText(text) {
         padding: 0 5px;
     }
 }
+/deep/ .ant-form-item{
+    margin-bottom: 10px;
+}
 </style>

src/views/taskmanage/taskList/Cancellation.vue

@@ -0,0 +1,178 @@
+<template>
+    <a-spin :spinning="spinning">
+        <a-row style="padding: 15px;" :gutter="16">
+            <a-col :span="pdfUrl ? 11 : 24">
+                <taskData ref="taskDataRef" title='Booking Cancellation' ></taskData>
+            </a-col>
+            <a-col>
+                <pdf ref="pdfData"></pdf>
+                <taskButton @loadingStart="loadingStart" @loadingStop="loadingStop" :id="taskPKId" ref="taskButtonRef"></taskButton>
+            </a-col>
+        </a-row>
+    </a-spin>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useRouter,useRoute } from 'vue-router'
+import pdf from '../components/pdf.vue'
+import taskData from '../components/taskData.vue'
+import taskButton from '../components/taskButton.vue'
+const route = useRoute()
+const router = useRouter();
+const form = ref({
+    "pkId": "08dcab8e-3757-49bb-8082-1bb3de042459",
+    "taskId": "08dcab8e-374d-4a44-8093-6dc531177f01",
+    "busiType": "BookingConfirmation",
+    "bookingParty": "QINGDAO CHENGSI FREIGHT FORWARDER CO",
+    "mblNo": "242636125",
+    "vessel": "GSL MELITA",
+    "voyNo": "431S",
+    "placeReceipt": "Qingdao,Shandong,China",
+    "portload": "QINGDAO QIANWAN CONTAINER CO LTD",
+    "vgmCutoffTime": "2024-08-01 17:00:00",
+    "eta": "2024-09-03 00:00:00",
+    "etd": "2024-08-03 00:00:00",
+    "portDischarge": "Brisbane Patrick Terminal",
+    "placeDelivery": "Brisbane,Queensland,Australia",
+    "contractNo": "299026908",
+    "fstCustomerSerUserName": "Eight chengsi",
+    "cyCutoffTime": "2024-08-01 22:00:00",
+    "ctnList": [
+        {
+            "ctnALL": "40HC",
+            "ctnnum": 1
+        }
+    ],
+    "fileList": [
+        {
+            "filePath": "BookingAttach\\bcfiles\\08dcab8e-374d-4a44-8093-6dc531177f01\\20240724111048159\\DB_aabhcbhjagaf0x023A.pdf",
+            "fileType": ".pdf",
+            "fileName": "DB_aabhcbhjagaf0x023A.pdf",
+            "fileCategory": "BC",
+            "fileCategoryName": "Booking Confirmation"
+        },
+        {
+            "filePath": "BookingAttach\\bcnoticefiles\\08dcab8e-374d-4a44-8093-6dc531177f01\\20240724111048174\\DB_aabhcbhjagaf0x023A_MODIFY.pdf",
+            "fileType": ".pdf",
+            "fileName": "DB_aabhcbhjagaf0x023A_MODIFY.pdf",
+            "fileCategory": "BC_NOTICE",
+            "fileCategoryName": "Booking Confirmation Notice"
+        }
+    ],
+    "bookingSlotId": 571905822330949,
+    "carrierId": "MSK",
+    "carriageType": "DIRECT_SHIP",
+    "carriageTypeName": "直达",
+    "bookingSlotType": "CONTRACT_ORDER",
+    "bookingSlotTypeName": "合约订舱",
+    "ctnStat": "40HC*1",
+    "weekAt": "31",
+    "detensionFreeDays": 0,
+    "siCutDate": "2024-07-31 18:00:00",
+    "bookingConfirmDate": "2024-07-24 11:10:00",
+    "keywords": [
+        {
+            "name": "承运方式：直达",
+            "background": "#FFFF80",
+            "icon": "icon-yunshu1"
+        },
+        {
+            "name": "订舱方式：合约订舱",
+            "background": "#81D3F8",
+            "icon": "icon-touzijilu"
+        }
+    ],
+    "taskStatus": "Create"
+}) as any
+const pdfUrl = ref('123')
+const taskDataRef = ref()
+onMounted(() => {
+    taskDataRef.value.init(form.value)
+})
+const taskPKId = ref(route.query.taskPKId)
+const spinning = ref(false)
+const formItemLayout = {
+    labelCol1: { span: 6 },
+    wrapperCol1: { span: 18 },
+    labelCol2: { span: 8 },
+    wrapperCol2: { span: 16 },
+    labelCol3: { span: 4 },
+    wrapperCol3: { span: 20 },
+    labelCol4: { span: 8 },
+    wrapperCol4: { span: 16 },
+    labelCol5: { span: 14 },
+    wrapperCol5: { span: 10 },
+    labelCol6: { span: 8 },
+    wrapperCol6: { span: 16 }
+}
+
+const pdfData = ref()
+
+onMounted(() => {
+    pdfData.value.init()
+})
+
+function loadingStart(){
+    spinning.value = true
+}
+function loadingStop(){
+    spinning.value = false
+}
+
+
+
+
+</script>
+<style lang="less" scoped>
+.LeftHead {
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+        font-size: 15px;
+        font-weight: 700;
+        color: black;
+    }
+}
+
+.text {
+    font-weight: 700;
+    color: black;
+}
+
+/deep/ .ant-form-item-control-input-content {
+    div {
+        color: rgba(122, 135, 152, 1);
+    }
+}
+
+.box {
+    border: 1px solid rgba(232, 235, 237, 1);
+    padding: 15px 20px;
+    margin-bottom: 16px;
+
+    .title {
+        font-size: 15px;
+        font-weight: 700;
+        color: black;
+    }
+}
+
+.CsSee {
+    color: rgb(104, 104, 228);
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.unitBox {
+    display: flex;
+
+    .unit {
+        margin-right: 15px;
+        padding: 0 5px;
+    }
+}
+/deep/ .ant-form-item{
+    margin-bottom: 10px;
+}
+</style>

src/views/taskmanage/taskList/changeShip.vue

@@ -0,0 +1,3 @@
+<template>
+    changeShip
+</template>

src/views/taskmanage/taskList/cutModify.vue

@@ -0,0 +1,3 @@
+<template>
+    cutModify
+</template>

src/views/taskmanage/taskList/draft.vue

@@ -0,0 +1,3 @@
+<template>
+    draft
+</template>

src/views/taskmanage/taskList/invoiceBillMail.vue

@@ -0,0 +1,3 @@
+<template>
+    invoiceBillMail
+</template>

src/views/taskmanage/taskList/originalLost.vue

@@ -0,0 +1,3 @@
+<template>
+    originalLost
+</template>

src/views/taskmanage/taskList/perBill.vue

@@ -0,0 +1,3 @@
+<template>
+    perBill
+</template>

src/views/taskmanage/taskList/podDischargeFull.vue

@@ -0,0 +1,3 @@
+<template>
+    podDischargeFull
+</template>

src/views/taskmanage/taskList/podGateoutFull.vue

@@ -0,0 +1,3 @@
+<template>
+    podGateoutFull
+</template>

src/views/taskmanage/taskList/rollingNomination.vue

@@ -0,0 +1,3 @@
+<template>
+    rollingNomination
+</template>

src/views/taskmanage/taskList/routeCutChange.vue

@@ -0,0 +1,3 @@
+<template>
+    routeCutChange
+</template>

src/views/taskmanage/taskList/transPlanHasChange.vue

@@ -0,0 +1,3 @@
+<template>
+    transPlanHasChange
+</template>

src/views/taskmanage/taskList/vgmCompare.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="task-vgm-contrast">
+    <div class="nav-btn-box" v-if="taskType === 'Create'">
+      <a-button class="nav-btn" type="primary" @click="overTaskFun">完成任务</a-button>
+      <a-button class="nav-btn" type="primary" @click="updateTaskFun">更新订舱</a-button>
+    </div>
+    <div class="vgm-compare">
+      <a-row :gutter="10">
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <div class="booking-vgm old">
+            <div class="title">原订舱箱信息</div>
+            <ul class="vgm-table">
+              <li class="top">
+                <span class="label" v-for="(label, index) in columns" :key="index"
+                  :class="{ 'isContaNo': label.key === 'contaNo' }"
+                  :style="label.key === 'contaNo' ? 'width:110px;' : 'flex:1;'">{{ label.title
+                  }}</span>
+              </li>
+              <li v-for="(lastItem, oindex) in vgmLastTableData" :key="oindex">
+                <span class="label" v-for="(lastlabel, lindex) in columns" :key="lindex"
+                  :class="[{ 'active': lastItem.compareDiffList.includes(lastlabel.key.slice(0, 1).toUpperCase() + lastlabel.key.slice(1)) || lastItem.compareDiffList.includes(lastlabel.key.toUpperCase()) }, { 'isContaNo': lastlabel.key === 'contaNo' }]"
+                  :style="lastlabel.key === 'contaNo' ? 'width:110px;' : 'flex:1;'">
+                  {{ lastItem[lastlabel.key] }}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+          <div class="booking-vgm new">
+            <div class="title">客户提交信息</div>
+            <ul class="vgm-table">
+              <li class="top">
+                <span class="label" v-for="(label, index) in columns" :key="index"
+                  :style="label.key === 'contaNo' ? 'width:110px;' : 'flex:1;'">
+                  {{ label.title }}
+                </span>
+              </li>
+              <li v-for="(submitItem, zindex) in vgmSubmitTableData" :key="zindex">
+                <span class="label" v-for="(slabel, sindex) in columns" :key="sindex"
+                  :class="[{ 'active': submitItem.compareDiffList.includes(slabel.key.slice(0, 1).toUpperCase() + slabel.key.slice(1)) || submitItem.compareDiffList.includes(slabel.key.toUpperCase()) }, { 'isContaNo': slabel.key === 'contaNo' }]"
+                  :style="slabel.key === 'contaNo' ? 'width:110px;' : 'flex:1;'">
+                  {{ submitItem[slabel.key] }}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { GetVGMCompareResult, SaveBookingVGM, CompleteTask } from '../api'
+import { useRouter, useRoute } from 'vue-router'
+import { useMessage } from '/@/hooks/web/useMessage'
+const { createMessage } = useMessage()
+const route = useRoute()
+const taskPKId = ref(route.query.taskPKId)
+const taskType = ref(route.query.type)
+const columns = ref([
+  { dataIndex: 'contaType', key: 'contaType', title: '箱型' },
+  { dataIndex: 'contaNo', key: 'contaNo', title: '箱号' },
+  { dataIndex: 'sealNo', key: 'sealNo', title: '封号' },
+  { dataIndex: 'kgs', key: 'kgs', title: '毛重' },
+  { dataIndex: 'tareWeight', key: 'tareWeight', title: '皮重' },
+  { dataIndex: 'weighKGs', key: 'weighKGs', title: '称重重量' },
+  { dataIndex: 'weighType', key: 'weighType', title: '称重方式' }
+])
+onMounted(() => {
+  getInfo()
+})
+const vgmLastTableData = ref([]) as any
+const vgmSubmitTableData = ref([]) as any
+function getInfo() {
+  GetVGMCompareResult({
+    taskPKId: taskPKId.value
+  }).then((res) => {
+    if (res.success) {
+      res.data.bookOrderCompareList.map((item, index) => {
+        if (!item.hasOwnProperty('compareDiffList')) {
+          item.compareDiffList = []
+        }
+      })
+      res.data.vgmCompareList.map((oitem, oindex) => {
+        if (!oitem.hasOwnProperty('compareDiffList')) {
+          oitem.compareDiffList = []
+        }
+      })
+      vgmLastTableData.value = res.data.bookOrderCompareList
+      vgmSubmitTableData.value = res.data.vgmCompareList
+    } else {
+      createMessage.error(res.message)
+    }
+  }).catch((err) => {
+    console.log(err)
+  })
+}
+function overTaskFun() {
+  CompleteTask({
+    PKIds: [this.taskPKId]
+  }).then((res) => {
+    if (res.success) {
+      this.$message.success('已完成任务')
+    } else {
+      this.$message.error(res.message)
+    }
+  }).catch((err) => {
+    console.log(err)
+  })
+}
+function updateTaskFun() {
+  SaveBookingVGM(this.taskPKId).then((res) => {
+    if (res.success) {
+      this.$message.success('更新成功')
+    } else {
+      this.$message.error(res.message)
+    }
+  }).catch((err) => {
+    console.log(err)
+  })
+}
+</script>
+<style lang="less" scoped>
+.nav-btn-box {
+  margin-bottom: 20px;
+
+  .nav-btn {
+    margin-right: 10px;
+  }
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+.vgm-compare {
+  padding: 20px;
+  background: #fff;
+
+  .booking-vgm {
+    padding: 0 20px;
+
+    .title {
+      height: 30px;
+      line-height: 30px;
+      font-size: 16px;
+      color: #666;
+      border-bottom: 1px solid #eee;
+      margin-bottom: 10px;
+    }
+
+    .vgm-table {
+      border: 1px solid #eee;
+      padding: 0;
+
+      li {
+        height: 40px;
+        border-bottom: 1px solid #eee;
+        line-height: 40px;
+        display: flex;
+
+        span {
+          display: block;
+          // flex: 1;
+          text-align: center;
+          font-size: 14px;
+          border-right: 1px solid #eee;
+
+          &:nth-last-of-type(1) {
+            border-right: none;
+          }
+
+          &.active {
+            color: #CC3333;
+          }
+
+          &.isContaNo {
+            // width: 110px;
+          }
+        }
+
+        &.top {
+          background: #f8f8fa;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/taskmanage/taskList/vgmDetail.vue

@@ -0,0 +1,3 @@
+<template>
+    vgmDetail
+</template>