lijingjia 4 months ago
commit 13bdb47606

@ -195,7 +195,7 @@ const [registerTable, { reload, setLoading, getForm, getSelectRows, setProps, se
})
const generation = ref('')
function handleOpenSlot(row) {
openModal(true, { type: 'init', row: row })
openModal(true, { type: 'cabin', row: row })
}
function handledbclick(record) {
go(`/CabinManagementDetail?type=edit&id=${record.id}`)

@ -32,4 +32,12 @@ export function GetEnableProjectDictTreeList(parameter) {
method: 'get',
params: parameter
})
}
export function CreateBookingAndSlot(parameter) {
return request<DataResult>({
url: '/taskApi/TaskManageBC/CreateBookingAndSlot',
method: 'post',
data: parameter
})
}

@ -1,343 +0,0 @@
import { ref } from 'vue'
import { BasicColumn, FormSchema } from '/@/components/Table'
import { GetControllerClientList, GetSaleUserList,GetCustomerServiceList,GetVouchingClerkList } from '/@/views/operation/seaexport/api/BookingLedger'
import { GetCtnSelectList } from '/@/api/common'
import { getDictOption } from '/@/utils/dictUtil'
import { useOptionsStore } from '/@/store/modules/options'
import { getOptions } from '/@/hooks/dict'
import { GetClientInfoWithContact } from './api'
import dayjs from 'dayjs';
const customerContactAllList = ref([]) //接口获取的联系人信息
//详情表单
export const formSchema: FormSchema[] = [
{
label: '',
field: 'id',
component: 'Input',
defaultValue: '',
show: false,
},
{
field: 'slotNo',
label: '订舱编号',
component: 'Input',
slot: 'slotNo',
colProps: { span: 24 },
},
{
label: '委托单位',
field: 'customerId',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 12 },
componentProps: ({ formModel }) => {
return {
api: () => {
return new Promise((resolve) => {
GetControllerClientList().then((res) => {
resolve(res)
})
})
},
immediate: false,
labelField: 'shortName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.customerName = obj.label
const data = {
"clientId": obj.value,
"isController": true
}
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) {
formModel.customerName = ''
}
},
}
},
},
{
field: 'customerContactId',
label: '联系人',
component: 'Select',
componentProps: ({ formModel }) => {
return {
mode: "multiple",
fieldNames:{
label:'shortName',
value: 'id',
},
options:customerContactAllList.value,
onChange: (e, obj) => {
if (obj) {
formModel.customerContactList = obj
}
if (!obj && !e) {
formModel.customerContactList = []
}
},
}
},
colProps: { span: 12 },
},
{
field: 'customerContactList',
label: '联系人信息',
slot: 'customerContactList',
component: 'Input',
show: ({ values }) => {
console.log(values)
if(values.customerContactList && values.customerContactList.length>0){
return true
}
},
colProps: { span: 24 },
},
{
label: '销售',
field: 'saleId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.saleName = obj.label
}
if (!obj && !e) {
formModel.saleName = ''
}
},
}
},
},
{
label: '操作',
field: 'operatorId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.opName = obj.label
}
if (!obj && !e) {
formModel.opName = ''
}
},
}
},
},
{
label: '单证',
field: 'docId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetVouchingClerkList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.docName = obj.label
}
if (!obj && !e) {
formModel.docName = ''
}
},
}
},
},
{
label: '客服',
field: 'custserviceId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetCustomerServiceList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.custserviceName = obj.label
}
if (!obj && !e) {
formModel.custserviceName = ''
}
},
}
},
},
{
label: '商务',
field: 'businessid',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.business = obj.label
}
if (!obj && !e) {
formModel.business = ''
}
},
}
},
},
{
label: '航线操作',
field: 'routeID',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.route = obj.label
}
if (!obj && !e) {
formModel.route = ''
}
},
}
},
},
{
label: '航线管理',
field: 'lineManageID',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.lineManage = obj.label
}
if (!obj && !e) {
formModel.lineManage = ''
}
},
}
},
},
{
field: 'shipper',
label: 'SHIPPER',
component: 'Input',
colProps: { span: 6 },
},
{
field: 'goodsname',
label: '品名',
component: 'Input',
colProps: { span: 6 },
},
{
field: 'saleTime',
label: '销售日期',
component: 'DatePicker',
defaultValue: dayjs().format('YYYY-MM-DD'),
colProps: { span: 6 },
componentProps: {
allowClear: true,
valueFormat: 'YYYY-MM-DD',
format: 'YYYY-MM-DD',
},
},
{
field: 'sellingPrice',
label: '卖价',
component: 'InputNumber',
colProps: { span: 6 },
},
{
field: 'czRemark',
label: '操作备注',
component: 'Input',
colProps: { span: 24 },
},
{
field: 'shenQingXiangShi',
label: '申请箱使',
component: 'Input',
colProps: { span: 24 },
},
]

@ -14,13 +14,14 @@
</BasicForm>
</div>
<div class="ctn-box">
<div style="margin-bottom: 10px;" >服务项目</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 @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 class="ctn-box" v-if="generationType=='cabin'" >
<div style="margin-bottom: 10px;">选择箱型</div>
<div class="list">
<div class="item" v-for="item in CtnList" :key="item.gid">
@ -50,21 +51,403 @@
import { ref, watch, onMounted } from 'vue'
import { BasicModal, useModalInner } from '/@/components/Modal'
import { BasicForm, useForm } from '/@/components/Form/index'
import { getAvailableCtnsBySlot, CreateBookingOrder, GetEnableProjectDictTreeList } from './api'
import { formSchema } from './columns'
import { getAvailableCtnsBySlot, CreateBookingOrder, GetEnableProjectDictTreeList,CreateBookingAndSlot } from './api'
import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage } = useMessage()
import { BasicColumn, FormSchema } from '/@/components/Table'
import { GetControllerClientList, GetSaleUserList, GetCustomerServiceList, GetVouchingClerkList } from '/@/views/operation/seaexport/api/BookingLedger'
import { GetClientInfoWithContact } from './api'
import dayjs from 'dayjs';
const customerContactAllList = ref([]) //
const formSchema: FormSchema[] = [
{
label: '',
field: 'id',
component: 'Input',
defaultValue: '',
show: false,
},
{
field: 'slotNo',
label: '订舱编号',
component: 'Input',
slot: 'slotNo',
show: ({ values }) => {
if (generationType.value === 'cabin') {
return true
}
},
colProps: { span: 24 },
},
{
field: 'generateMethod',
label: '生成方式',
component: 'RadioGroup',
show: ({ values }) => {
if (generationType.value === 'task') {
return true
}
},
componentProps: ({ formModel }) => {
return {
options:[
{label: '更新订舱', value: 'UPD_BOOKING' },
{label: '直接生成舱位和订舱', value: 'GEN_BOOKING_SLOT' },
{label: '只生成订舱', value: 'GEN_BOOKING' },
{label: '只生成舱位', value: 'GEN_SLOT' },
{label: '匹配已有订舱', value: 'GEN_EXIST_BOOKING' }
]
}
},
colProps: { span: 24 },
},
{
field: 'isDirectSend',
component: 'CheckboxGroup',
show: ({ values }) => {
if (generationType.value === 'task') {
return true
}
},
componentProps: ({ formModel }) => {
return {
options:[
{label: '是否直接发送邮件给订舱联系人', value: 'isDirectSend' },
]
}
},
colProps: { span: 24 },
},
{
label: '委托单位',
field: 'customerId',
component: 'ApiSelect',
required: false,
dynamicDisabled: false,
colProps: { span: 12 },
componentProps: ({ formModel }) => {
return {
api: () => {
return new Promise((resolve) => {
GetControllerClientList().then((res) => {
resolve(res)
})
})
},
immediate: false,
labelField: 'shortName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.customerName = obj.label
const data = {
"clientId": obj.value,
"isController": true
}
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) {
formModel.customerName = ''
}
},
}
},
},
{
field: 'customerContactId',
label: '联系人',
component: 'Select',
componentProps: ({ formModel }) => {
return {
mode: "multiple",
fieldNames: {
label: 'shortName',
value: 'id',
},
options: customerContactAllList.value,
onChange: (e, obj) => {
if (obj) {
formModel.customerContactList = obj
}
if (!obj && !e) {
formModel.customerContactList = []
}
},
}
},
colProps: { span: 12 },
},
{
field: 'customerContactList',
label: '联系人信息',
slot: 'customerContactList',
component: 'Input',
show: ({ values }) => {
if (values.customerContactList && values.customerContactList.length > 0) {
return true
}
},
colProps: { span: 24 },
},
{
label: '销售',
field: 'saleId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.saleName = obj.label
}
if (!obj && !e) {
formModel.saleName = ''
}
},
}
},
},
{
label: '操作',
field: 'operatorId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.opName = obj.label
}
if (!obj && !e) {
formModel.opName = ''
}
},
}
},
},
{
label: '单证',
field: 'docId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetVouchingClerkList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.docName = obj.label
}
if (!obj && !e) {
formModel.docName = ''
}
},
}
},
},
{
label: '客服',
field: 'custserviceId',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetCustomerServiceList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.custserviceName = obj.label
}
if (!obj && !e) {
formModel.custserviceName = ''
}
},
}
},
},
{
label: '商务',
field: 'businessid',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.business = obj.label
}
if (!obj && !e) {
formModel.business = ''
}
},
}
},
},
{
label: '航线操作',
field: 'routeID',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.route = obj.label
}
if (!obj && !e) {
formModel.route = ''
}
},
}
},
},
{
label: '航线管理',
field: 'lineManageID',
component: 'ApiSelect',
colProps: { span: 6 },
componentProps: ({ formModel }) => {
return {
api: GetSaleUserList,
labelField: 'userName',
valueField: 'id',
resultField: 'data',
filterOption: (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
onChange: (e, obj) => {
if (obj) {
formModel.lineManage = obj.label
}
if (!obj && !e) {
formModel.lineManage = ''
}
},
}
},
},
{
field: 'shipper',
label: 'SHIPPER',
component: 'Input',
colProps: { span: 6 },
},
{
field: 'goodsname',
label: '品名',
component: 'Input',
colProps: { span: 6 },
},
{
field: 'saleTime',
label: '销售日期',
component: 'DatePicker',
defaultValue: dayjs().format('YYYY-MM-DD'),
colProps: { span: 6 },
componentProps: {
allowClear: true,
valueFormat: 'YYYY-MM-DD',
format: 'YYYY-MM-DD',
},
},
{
field: 'sellingPrice',
label: '卖价',
component: 'InputNumber',
colProps: { span: 6 },
},
{
field: 'czRemark',
label: '操作备注',
component: 'Input',
colProps: { span: 24 },
},
{
field: 'shenQingXiangShi',
label: '申请箱使',
component: 'Input',
colProps: { span: 24 },
},
]
const [registerForm, { resetFields, setFieldsValue, getFieldsValue }] = useForm({
labelWidth: 150,
schemas: formSchema,
showActionButtonGroup: false,
})
const generationType = ref('')
const taskId = ref('')
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
resetFields()
if (data.type === 'init') {
console.log(1231233)
generationType.value = data.type
if (data.type === 'cabin') {
setFieldsValue(data.row)
init(data.row)
cabinInit(data.row)
}
if (data.type === 'task') {
taskInit()
taskId.value = data.taskId
}
})
const projectList = ref([]) as any
@ -85,7 +468,6 @@ onMounted(() => {
function handleClickPro(index) {
projectList.value[index].active = !projectList.value[index].active
}
const type = ref('')
const CtnList = ref([]) as any
const ctnListCopy = ref([]) as any
const slotEdit = ref({}) as any
@ -120,9 +502,8 @@ watch(CtnList, (nval, Old) => {
}
}, { deep: true })
function init(row) {
type.value = 'cabin'
//
function cabinInit(row) {
setModalProps({ loading: true })
getAvailableCtnsBySlot({ slotId: row.id }).then(res => {
if (res.succeeded) {
@ -143,11 +524,19 @@ function init(row) {
setModalProps({ loading: false })
})
}
//
function taskInit() {
setFieldsValue({generateMethod:'GEN_BOOKING'})
}
function handleSave() {
if (type.value === 'cabin') {
if (generationType.value === 'cabin') {
handleSaveCabin()
}
if (generationType.value === 'task') {
handleSaveTask()
}
}
//
function handleSaveCabin() {
const projectArr = [] as any
projectList.value.forEach(item => {
@ -172,8 +561,8 @@ function handleSaveCabin() {
}
const ApiData = {
slotId: slotEdit.value.id,
projectList:projectArr,
ctnList:CtnList.value,
projectList: projectArr,
ctnList: CtnList.value,
...getFieldsValue()
}
setModalProps({ loading: true })
@ -182,12 +571,38 @@ function handleSaveCabin() {
closeModal()
createMessage.success(res.message)
} else {
createMessage.error(res.message)
createMessage.error(res.data.msg)
}
setModalProps({ loading: false })
})
}
//
function handleSaveTask(){
const projectArr = [] as any
projectList.value.forEach(item => {
if (item.active) {
projectArr.push(item.code)
}
})
const ApiData = {
projectList: projectArr,
bcTaskId: taskId.value,
...getFieldsValue()
}
setModalProps({ loading: true })
CreateBookingAndSlot(ApiData).then(res => {
if (res.succeeded) {
closeModal()
createMessage.success(res.message)
} else {
createMessage.error(res.data.msg)
}
setModalProps({ loading: false })
})
}
</script>
<style lang="less" scoped>
.list {
@ -235,7 +650,7 @@ function handleSaveCabin() {
.project-list {
display: flex;
flex-wrap: wrap;
.project-item {
background-color: rgb(255, 255, 255);
color: rgb(37, 122, 250);
@ -244,6 +659,8 @@ function handleSaveCabin() {
margin-right: 8px;
font-size: 12px;
cursor: pointer;
margin-bottom: 10px;
&.active {
background-color: rgb(37, 122, 250);
color: white;

@ -40,12 +40,17 @@
</a-select>
</a-spin>
</a-modal>
<generationModal ref="generation" @register="registerModal">
</generationModal>
</template>
<script lang="ts" setup>
import { number } from 'echarts';
import { ref, onMounted, defineProps } from 'vue'
import { GetUserListAll, SetTaskOwner, CompleteTask, CancelTask } from '../api'
import { useMessage } from '/@/hooks/web/useMessage'
import { useModal } from '/@/components/Modal'
import generationModal from '../../bookingcabin/generation/index.vue'
const [registerModal, { openModal }] = useModal()
const { createMessage } = useMessage()
const props = defineProps({
id: {
@ -109,7 +114,7 @@ function FnCompleteTask() {
})
}
function OpenModal() {
console.log('OpenUser')
openModal(true, { type: 'task', taskId: props.id })
}
//
function FnCancelTask() {

@ -618,7 +618,7 @@ function handleEdit(data) {
case 'SI_FEEDBACK':
//
go({
path: '/commontaskmanage/TaskmanageDetail',
path: '/commontaskmanage/siFeedback',
query: { taskPKId: data.id }
});
break;

File diff suppressed because it is too large Load Diff

@ -1,6 +1,7 @@
.LeftHead {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.title {
font-size: 12px;
font-weight: 700;
@ -10,6 +11,7 @@
font-size: 12px;
font-weight: 700;
color: black;
margin-bottom: 0px;
}
}
@ -30,7 +32,7 @@
margin-bottom: 16px;
.title {
font-size: 15px;
font-size: 12px;
font-weight: 700;
color: black;
}
@ -46,7 +48,7 @@
display: flex;
.unit {
margin-right: 15px;
margin-right: 1px;
padding: 0 5px;
}
}

@ -1,3 +1,464 @@
<template>
transPlanHasChange
</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>
<div style="width: 33%;">
<div style="font-weight: bold;font-size: 13px;">预计离港日</div>
<div :class="{
gray: taskData.from.dateList.length == 1,
red: taskData.from.dateList.length > 1 && item.isRemoved,
green: taskData.from.dateList.length > 1 && !item.isRemoved
}" v-for="(item, index) in taskData.from.dateList" :key="index">
{{ item.dateVal }}</div>
</div>
<div style="width: 33%;">
<div style="font-weight: bold;font-size: 13px;">船名,航次,船旗</div>
<div :class="{
gray: taskData.from.vesselList.length == 1,
red: taskData.from.vesselList.length > 1 && item.isRemoved,
green: taskData.from.vesselList.length > 1 && !item.isRemoved
}" v-for="(item, index) in taskData.from.vesselList" :key="index">
{{ item.vessel }},{{ item.voyno }},{{ item.flag }}</div>
</div>
</div>
</div>
<div class="box">
<div class="LeftHead">
<div style="font-weight: bold;">到达计划</div>
</div>
<div style="display: flex;margin-top: 15px;">
<div style="width: 33%;">
<div style="font-weight: bold;font-size: 13px;">港口名,国家,码头</div>
<div :class="{
gray: taskData.to.portList.length == 1,
red: taskData.to.portList.length > 1 && item.isRemoved,
green: taskData.to.portList.length > 1 && !item.isRemoved
}" v-for="(item, index) in taskData.to.portList" :key="index">
{{ item.portName }},{{ item.countryCode }},{{ item.terminalName }}</div>
</div>
<div style="width: 33%;">
<div style="font-weight: bold;font-size: 13px;">预计到港日</div>
<div :class="{
gray: taskData.to.dateList.length == 1,
red: taskData.to.dateList.length > 1 && item.isRemoved,
green: taskData.to.dateList.length > 1 && !item.isRemoved
}" v-for="(item, index) in taskData.to.dateList" :key="index">
{{ item.dateVal }}</div>
</div>
<div style="width: 33%;">
<div style="font-weight: bold;font-size: 13px;">船名,航次,船旗</div>
<div :class="{
gray: taskData.to.vesselList.length == 1,
red: taskData.to.vesselList.length > 1 && item.isRemoved,
green: taskData.to.vesselList.length > 1 && !item.isRemoved
}" v-for="(item, index) in taskData.to.vesselList" :key="index">
{{ item.vessel }},{{ item.voyno }},{{ item.flag }}</div>
</div>
</div>
</div>
<taskButton :buttonList="['取消', '完成', '转移', '邮件', '检索']" @loadingStart="loadingStart"
@loadingStop="loadingStop" :id="taskPKId"></taskButton>
</a-spin>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { GetInfoByTaskIdNotice } from '../api'
import taskButton from '../components/taskButton.vue'
import { useMessage } from '../../../hooks/web/useMessage'
const { createMessage } = useMessage()
import { useRoute } from 'vue-router'
const selectedRowKeysTable = ref([])
const route = useRoute()
const spinning = ref(false)
const taskData = ref({
from: {
vesselList: [],
dateList: [],
portList: [],
},
to: {
vesselList: [],
dateList: [],
portList: [],
},
contaNoList: []
}) as any
const taskPKId = ref(route.query.taskPKId)
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
}
]
}
}
})
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 => {
if (res.succeeded) {
taskData.value = res.data
} else {
createMessage.error(res.message)
}
spinning.value = false
})
}
function handleOpenUser() {
}
function handleOpen() {
}
function handleOpenCtn() {
}
function onSelectChange(selectedRowKeys) {
selectedRowKeys.value = selectedRowKeys;
};
function loadingStart() {
spinning.value = true
}
function loadingStop() {
spinning.value = false
}
function handleRefshPage() {
}
function handleRefsh() {
}
function handleSendNotice() {
}
</script>
<style lang="less" scoped>
@import url('./taskStyle.less');
.gray {
color: rgb(157 157 157);
}
.red {
color: red;
text-decoration: line-through;
}
.green {
color: rgb(40, 202, 40);
}
.point {
height: 10px;
width: 10px;
border-radius: 50%;
margin: 0 auto;
background: green;
}
.modaltitle {
border-bottom: 1px solid #000;
width: 5rem;
padding: 0.2rem 0.5rem;
margin-top: 1rem;
}
.icon-chuanfanguanli-chuanfanshenqing {
color: '#02A7F0';
}
</style>

@ -1,3 +1,137 @@
<template>
vgmDetail
</template>
<div class="main">
<a-spin :spinning="spinning">
<div class="box">
<div class="LeftHead">
<p>VGM
<span v-if="type === 'VGM_MISSING'">mission</span>
<span v-if="type === 'VGM_FEEDBACK'">submission</span>
{{ carrier }}
</p>
<p>时间{{ time }}</p>
</div>
<a-table v-if="type === 'VGM_MISSING'" :pagination="false" :columns="columns1" :data-source="tableList">
<span slot="bookingId" slot-scope="text, record">
<div v-if="record.bookingId > 0" class="point"></div>
<div v-if="record.bookingId == 0">-</div>
</span>
</a-table>
<a-table style="margin-bottom: 10px;" v-if="type === 'VGM_FEEDBACK'" :pagination="false" :columns="columns" :data-source="tableList">
<span slot="bookingId" slot-scope="text, record">
<div v-if="record.bookingId > 0" class="point"></div>
<div v-if="record.bookingId == 0">-</div>
</span>
<span slot="vgmWeight" slot-scope="text, record">
{{ record.vgmWeight }} {{ record.vgmWeightUnit }}
</span>
</a-table>
<taskButton :buttonList="['取消', '完成', '转移']" @loadingStart="loadingStart"
@loadingStop="loadingStop" :id="taskPKId" ref="taskButtonRef"></taskButton>
</div>
</a-spin>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { GetInfoByTaskIdNotice } from '../api'
import taskButton from '../components/taskButton.vue'
import { useMessage } from '../../../hooks/web/useMessage'
const { createMessage } = useMessage()
import { useRoute } from 'vue-router'
const route = useRoute()
const spinning = ref(false)
const columns = [
{
dataIndex: 'mBlNo',
title: 'Shipment No',
key: 'mBlNo',
align: 'center'
},
{
title: 'Container number',
dataIndex: 'cntrNo',
key: 'cntrNo',
align: 'center'
},
{
title: 'VGM',
dataIndex: 'vgmWeight',
key: 'vgmWeight',
align: 'center',
scopedSlots: { customRender: 'vgmWeight' }
},
{
title: 'VGM method',
dataIndex: 'vgmWeightMethod',
key: 'vgmWeightMethod',
align: 'center'
},
{
title: 'Booking',
dataIndex: 'bookingId',
key: 'bookingId',
align: 'center',
scopedSlots: { customRender: 'bookingId' }
}
]
const columns1 = [
{
dataIndex: 'mBlNo',
title: 'Shipment No',
key: 'mBlNo',
align: 'center'
},
{
dataIndex: 'cntrNo',
title: 'Equipment No',
key: 'cntrNo',
align: 'center'
},
{
dataIndex: 'bookedByReference',
title: 'Booked By Reference',
key: 'bookedByReference',
align: 'center'
},
{
title: 'Vessel Name',
dataIndex: 'vessel',
key: 'vessel',
align: 'center'
},
{
title: 'Voyage No',
dataIndex: 'voyno',
key: 'voyno',
align: 'center'
},
{
title: 'VGM Submission Deadline',
dataIndex: 'vgmSubmissionDeadLine',
key: 'vgmSubmissionDeadLine',
align: 'center'
},
{
title: 'Booking',
dataIndex: 'bookingId',
key: 'bookingId',
align: 'center',
scopedSlots: { customRender: 'bookingId' }
},
{
title: 'OP',
dataIndex: 'OP',
key: 'OP',
align: 'center'
}
]
const tableList = ref([])
const taskPKId = ref(route.query.taskPKId)
const type = ref(route.query.type)
const carrier = ref('')
const time = ref('')
</script>
<style lang="less" scoped>
@import url('./taskStyle.less');
</style>
Loading…
Cancel
Save