From 73b5cf5c72e699be80a9e1af6608494419d49781 Mon Sep 17 00:00:00 2001 From: lijingjia Date: Tue, 10 Sep 2024 15:48:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?9.10=E6=B5=B7=E8=BF=90=E5=87=BA=E5=8F=A3?= =?UTF-8?q?=E7=A6=85=E9=81=93=E8=BF=AD=E4=BB=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/{新建.svg => create.svg} | 0 .../Form/src/components/InputTextArea.vue | 14 +- .../seaexport/detail/components/container.vue | 33 +- .../detail/components/ladingInfo.tsx | 579 ++++++++++-------- .../detail/components/ladingInfo.vue | 360 +++++------ .../operation/seaexport/detail/index.vue | 2 +- .../seaexport/detail/modules/cargoInfo.vue | 63 +- .../seaexport/detail/modules/goodsTable.vue | 104 ++-- .../seaexport/detail/modules/mailingInfo.vue | 7 +- 9 files changed, 619 insertions(+), 543 deletions(-) rename src/assets/icons/{新建.svg => create.svg} (100%) diff --git a/src/assets/icons/新建.svg b/src/assets/icons/create.svg similarity index 100% rename from src/assets/icons/新建.svg rename to src/assets/icons/create.svg diff --git a/src/components/Form/src/components/InputTextArea.vue b/src/components/Form/src/components/InputTextArea.vue index d4368527..13dc5374 100644 --- a/src/components/Form/src/components/InputTextArea.vue +++ b/src/components/Form/src/components/InputTextArea.vue @@ -171,7 +171,7 @@ position: absolute; right: -20px; top: 5px; - font-size: 10px; + font-size: 12px; color: #CED5D9; div { margin-bottom: 4px; @@ -188,25 +188,23 @@ height: 16px; width: 16px; border-radius: 2px; - font-size: 10px; + font-size: 12px; text-align: center; - background: #F5F9FC; color: @primary-color; margin-right: 0; - margin-left: 4px; + margin-left: 15px; margin-bottom: 4px; cursor: pointer; } .ds-cut-btn { display: inline-block; - width: 32px; + width: 16px; height: 16px; line-height: 16px; - margin-left: 4px; + margin-left: 15px; margin-bottom: 4px; - background: #F5F9FC; color: @primary-color; - font-size: 10px; + font-size: 12px; text-align: center; border-radius: 2px; cursor: pointer; diff --git a/src/views/operation/seaexport/detail/components/container.vue b/src/views/operation/seaexport/detail/components/container.vue index ecd54101..8210b113 100644 --- a/src/views/operation/seaexport/detail/components/container.vue +++ b/src/views/operation/seaexport/detail/components/container.vue @@ -219,6 +219,10 @@ tareWeight: '', note: '' } + const init = (data) => { + list.value = data + hotTb.value.hotInstance.loadData(data) + } // 添加行 const addRow = () => { const deepCopyRow = JSON.parse(JSON.stringify(row)) @@ -324,6 +328,31 @@ createMessage.success('更新成功!') } } + // 获取 集装箱信息 + function GetCtnList() { + GetOpCtnList({ + queryCondition: JSON.stringify([ + { + FieldName: 'bsno', + FieldValue: props.id, + ConditionalType: 1, + }, + ]), + pageCondition: { + pageIndex: 1, + pageSize: 999, + sortConditions: [], + }, + }).then((res) => { + const { data } = res + if (data.length == 0) { + list.value = [] + } else { + list.value = data + } + hotTb.value.hotInstance.loadData(list.value) + }) + } onMounted(() => { const hot = hotTb.value.hotInstance hot.addHook('afterOnCellMouseDown', function (event, coords, TD) {}) @@ -340,9 +369,11 @@ } } }) + GetCtnList() }) defineExpose({ - list + list, + init }) diff --git a/src/views/operation/seaexport/detail/components/ladingInfo.tsx b/src/views/operation/seaexport/detail/components/ladingInfo.tsx index f64b7945..52b9daff 100644 --- a/src/views/operation/seaexport/detail/components/ladingInfo.tsx +++ b/src/views/operation/seaexport/detail/components/ladingInfo.tsx @@ -1,6 +1,6 @@ import { FormSchema, BasicColumn } from '/@/components/Table' import { useOptionsStore } from '/@/store/modules/options' -import { GetPackageSelectList } from '/@/views/operation/seaexport/api/BookingLedger' +import { GetPackageSelectList, GetShippingBillTemplateSelectList, GetClientPortSelectList } from '/@/views/operation/seaexport/api/BookingLedger' import { useMessage } from '/@/hooks/web/useMessage' const { createMessage } = useMessage() const optionsStore = useOptionsStore() @@ -21,129 +21,171 @@ export const formSchema1: FormSchema[] = [ }, { label: '', - field: 'shipperContent', + field: 'shipperId', component: 'Input', - defaultValue: '', show: false, }, + { + label: '发货人', + field: 'shipper', + labelSlot: 'shipper', + component: 'ApiSelect', + required: false, + dynamicDisabled: false, + colProps: { span: 24 }, + componentProps: ({ formModel }) => { + return { + api: GetShippingBillTemplateSelectList, + params: { type: 2, id: formModel.wtdwId }, + labelField: 'templateName', + valueField: 'templateName', + immediate: false, + resultField: 'data', + filterOption: (input: string, option: any) => { + return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 + }, + onChange: (e, obj) => { + if (e && obj) { + formModel.shipperId = obj.id + formModel.shipperContent = obj.content + } + if (e === undefined && obj === undefined) { + formModel.shipperId = null + formModel.shipperContent = null + formModel.shipper = '' + } + }, + } + }, + }, + { + label: ' ', + field: 'shipperContent', + component: 'InputTextArea', + colProps: { span: 24 }, + componentProps: { + slice: [30, 35, 40], + }, + }, { label: '', - field: 'shipperId', + field: 'consigneeId', component: 'Input', - defaultValue: '', show: false, }, { - field: 'fhr', - component: 'SelectTextArea', + label: '收货人', + field: 'consignee', + labelSlot: 'consignee', + component: 'ApiSelect', + required: false, + dynamicDisabled: false, colProps: { span: 24 }, - defaultValue: '', componentProps: ({ formModel }) => { return { - label: '发货人', - details: formModel, - field: 'shipper', - onChange: (e) => { - if (e) { - switch (e.type) { - case 'Content': - formModel[`shipper${e.type}`] = e.res - break - case 'Id': - formModel.shipperId = e.res.id - formModel.shipperContent = e.res.content - break - default: - break - } + api: GetShippingBillTemplateSelectList, + params: { type: 1, id: formModel.wtdwId }, + labelField: 'templateName', + valueField: 'templateName', + resultField: 'data', + immediate: false, + filterOption: (input: string, option: any) => { + return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 + }, + onChange: (e, obj) => { + if (e && obj) { + formModel.consigneeId = obj.id + formModel.consigneeContent = obj.content } - } + if (e === undefined && obj === undefined) { + formModel.consigneeId = null + formModel.consignee = null + formModel.consigneeContent = '' + } + }, } - } + }, }, { - label: '', + label: ' ', field: 'consigneeContent', - component: 'Input', - defaultValue: '', - show: false, + component: 'InputTextArea', + colProps: { span: 24 }, + componentProps: { + slice: [30, 35, 40], + }, }, { label: '', - field: 'consigneeId', + field: 'notifyPartyId', component: 'Input', - defaultValue: '', show: false, }, { - field: 'shr', - component: 'SelectTextArea', + label: '通知人', + field: 'notifyParty', + component: 'ApiSelect', + labelSlot: 'notifyParty', + required: false, + dynamicDisabled: false, colProps: { span: 24 }, - defaultValue: '', componentProps: ({ formModel }) => { return { - label: '发货人', - details: formModel, - field: 'consignee', - onChange: (e) => { - if (e) { - switch (e.type) { - case 'Content': - formModel[`consignee${e.type}`] = e.res - break - case 'Id': - formModel.consigneeId = e.res.id - formModel.consigneeContent = e.res.content - break - default: - break - } + api: GetShippingBillTemplateSelectList, + params: { type: 3, id: formModel.wtdwId }, + labelField: 'templateName', + valueField: 'templateName', + resultField: 'data', + immediate: false, + alwaysLoad: false, + filterOption: (input: string, option: any) => { + return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 + }, + onChange: (e, obj) => { + if (e && obj) { + formModel.notifyPartyId = obj.id + formModel.notifyPartyContent = obj.content } - } + if (e === undefined && obj === undefined) { + formModel.notifyPartyId = null + formModel.notifyPartyContent = '' + formModel.notifyParty = '' + } + }, } + }, + }, + { + label: ' ', + field: 'notifyPartyContent', + component: 'InputTextArea', + required: false, + dynamicDisabled: false, + colProps: { span: 24 }, + componentProps: { + slice: [30, 35, 40], } }, { label: '', - field: 'notifyPartyContent', - component: 'Input', + field: 'secondNotifyPartyContent', defaultValue: '', + component: 'Input', show: false, }, { label: '', - field: 'notifyPartyId', - component: 'Input', + field: 'secondNotifyParty', defaultValue: '', + component: 'Input', show: false, }, { - field: 'tzr', - component: 'SelectTextArea', - colProps: { span: 24 }, + label: '', + field: 'secondNotifyPartyId', defaultValue: '', - componentProps: ({ formModel }) => { - return { - label: '通知人', - details: formModel, - field: 'notifyParty', - onChange: (e) => { - if (e) { - switch (e.type) { - case 'Content': - formModel[`notifyParty${e.type}`] = e.res - break - case 'Id': - formModel.notifyPartyId = e.res.id - formModel.notifyPartyContent = e.res.content - break - default: - break - } - } - } - } - } + component: 'Input', + show: false, } ] @@ -153,15 +195,23 @@ export const formSchema2: FormSchema[] = [ field: 'etd', label: '开船日期', component: 'DatePicker', - colProps: { span: 3 }, - defaultValue: '' + colProps: { span: 5 }, + defaultValue: null, + componentProps: { + allowClear: true, + valueFormat: 'YYYY-MM-DD', + } }, { field: 'eta', label: '预抵日期', component: 'DatePicker', - colProps: { span: 3 }, - defaultValue: '' + colProps: { span: 5 }, + defaultValue: null, + componentProps: { + allowClear: true, + valueFormat: 'YYYY-MM-DD' + } }, { label: '船名Name', @@ -176,7 +226,7 @@ export const formSchema2: FormSchema[] = [ required: false, dynamicDisabled: false, // defaultValue: '', - colProps: { span: 3 }, + colProps: { span: 10 }, componentProps: ({ formModel }) => { return { option: optionsStore.getOptionsByCode('GetVesselSelectList'), @@ -196,252 +246,274 @@ export const formSchema2: FormSchema[] = [ } }, { - label: '装货港', - field: 'loadPortId', + label: '海关航次', + field: 'voyno', component: 'ApiSelect', required: false, dynamicDisabled: false, // defaultValue: '', - colProps: { span: 3 }, - componentProps: ({ formModel }) => { + colProps: { span: 5 }, + componentProps: () => { return { - allowClear: true, - showSearch: true, - api: () => { - return new Promise((resolve) => { - const data = JSON.parse( - JSON.stringify(optionsStore.getOptionsByCode('GetClientPortSelectList')), - ) - data.forEach((e) => { - e.ediCode = `${e.portName}/${e.ediCode}` - }) - resolve({ data }) - }) - }, - labelField: 'ediCode', - showName: 'portName', - valueField: 'id', - resultField: 'data', + option: optionsStore.getOptionsByCode('GetVoynoSelectList'), + labelField: 'voyNo', + valueField: 'voyNo', filterOption: (input: string, option: any) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }, - onChange: (e, obj) => { - if (obj) { - formModel.loadPort = obj.portName - } else { - formModel.loadPort = '' - } - } } } }, { - label: ' ', - field: 'loadPort', - component: 'Input', - colProps: { span: 3 } - }, - { - label: '卸货港代码', - field: 'dischargePortId', + label: '装货港', + field: 'loadPortCode', component: 'ApiSelect', required: false, dynamicDisabled: false, // defaultValue: '', - colProps: { span: 3 }, - componentProps: ({ formModel }) => { + colProps: { span: 5 }, + componentProps: ({ formModel, formActionType }) => { return { - allowClear: true, - showSearch: true, - api: () => { - return new Promise((resolve) => { - const data = JSON.parse( - JSON.stringify(optionsStore.getOptionsByCode('GetClientPortSelectList')), - ) - data.forEach((e) => { - e.ediCode = `${e.portName}/${e.ediCode}` - }) - resolve({ data }) - }) - }, - labelField: 'ediCode', - valueField: 'id', + api: GetClientPortSelectList, resultField: 'data', - filterOption: (input: string, option: any) => { - return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }, + labelField: 'pinYinCode', + valueField: 'ediCode', + showName: 'ediCode', + immediate: false, onChange: (e, obj) => { - if (obj) { - formModel.dischargePort = obj.portName - } else { - formModel.dischargePort = '' + if (e && obj) { + formModel.loadPortId = obj.id + formModel.loadPort = obj.portName + } + if (!e && !obj) { + formModel.loadPortId = null + formModel.loadPort = null } }, } }, }, { - label: ' ', - field: 'dischargePort', - component: 'Input', + label: '卸货港', + field: 'dischargePortCode', + component: 'ApiSelect', required: false, - colProps: { span: 3 }, + dynamicDisabled: false, + // defaultValue: '', + colProps: { span: 5 }, + componentProps: ({ formModel, formActionType }) => { + return { + api: GetClientPortSelectList, + resultField: 'data', + labelField: 'pinYinCode', + showName: 'ediCode', + valueField: 'ediCode', + immediate: false, + onChange: (e, obj) => { + if (e && obj) { + formModel.dischargePortId = obj.id + formModel.dischargePort = obj.portName + // 带出交货地 + formModel.deliveryPlaceId = obj.id + formModel.deliveryPlace = obj.portName + formModel.deliveryPlaceCode = e + } + if (!e && !obj) { + formModel.dischargePortId = null + formModel.dischargePort = null + } + }, + } + }, }, { - label: '海关航次', - field: 'voyno', + label: '交货地', + field: 'deliveryPlaceCode', component: 'ApiSelect', required: false, dynamicDisabled: false, // defaultValue: '', - colProps: { span: 3 }, - componentProps: () => { + colProps: { span: 5 }, + componentProps: ({ formModel }) => { return { - option: optionsStore.getOptionsByCode('GetVoynoSelectList'), - labelField: 'voyNo', - valueField: 'voyNo', - filterOption: (input: string, option: any) => { - return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 + api: GetClientPortSelectList, + resultField: 'data', + labelField: 'pinYinCode', + showName: 'ediCode', + valueField: 'ediCode', + immediate: false, + onChange: (e, obj) => { + if (e && obj) { + formModel.deliveryPlaceId = obj.id + formModel.deliveryPlace = obj.portName + } + if (!e && !obj) { + formModel.deliveryPlaceId = null + formModel.deliveryPlace = null + } }, } - } + }, }, { - label: '目的地', - field: 'destinationId', + label: '收货地', + field: 'receiptPlaceCode', component: 'ApiSelect', required: false, dynamicDisabled: false, // defaultValue: '', - colProps: { span: 3 }, + colProps: { span: 5 }, componentProps: ({ formModel }) => { return { - allowClear: true, - showSearch: true, - api: () => { - return new Promise((resolve) => { - const data = JSON.parse( - JSON.stringify(optionsStore.getOptionsByCode('GetClientPortSelectList')), - ) - data.forEach((e) => { - e.ediCode = `${e.portName}/${e.ediCode}` - }) - resolve({ data }) - }) - }, - labelField: 'ediCode', - valueField: 'id', + api: GetClientPortSelectList, resultField: 'data', - filterOption: (input: string, option: any) => { - return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }, + immediate: false, + labelField: 'pinYinCode', + valueField: 'ediCode', + showName: 'ediCode', onChange: (e, obj) => { - if (obj) { - formModel.destination = obj.portName - } else { - formModel.destination = '' + if (e && obj) { + formModel.receiptPlace = obj.portName + formModel.receiptPlaceId = obj.id + } + if (!e && !obj) { + formModel.receiptPlace = null + formModel.receiptPlaceId = null } }, } }, }, { - label: ' ', - field: 'destination', - component: 'Input', - colProps: { span: 3 } - }, - { - label: '交货地', - field: 'deliveryPlaceId', + label: '中转港', + field: 'transPortCode', component: 'ApiSelect', required: false, dynamicDisabled: false, // defaultValue: '', - colProps: { span: 3 }, + colProps: { span: 5 }, componentProps: ({ formModel }) => { return { + api: GetClientPortSelectList, + resultField: 'data', allowClear: true, showSearch: true, - api: () => { - return new Promise((resolve) => { - const data = JSON.parse( - JSON.stringify(optionsStore.getOptionsByCode('GetClientPortSelectList')), - ) - data.forEach((e) => { - e.ediCode = `${e.portName}/${e.ediCode}` - }) - resolve({ data }) - }) - }, - labelField: 'ediCode', - valueField: 'id', - resultField: 'data', - filterOption: (input: string, option: any) => { - return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }, + labelField: 'pinYinCode', + showName: 'ediCode', + valueField: 'ediCode', + immediate: false, onChange: (e, obj) => { - if (obj) { - formModel.deliveryPlace = obj.portName - } else { - formModel.deliveryPlace = '' + if (e && obj) { + formModel.transPortId = obj.id + formModel.transPort = obj.portName + } + if (!e && !obj) { + formModel.transPortId = null + formModel.transPort = null } }, } + }, + }, + { + label: '', + field: 'loadPort', + component: 'Input', + required: false, + colProps: { span: 5 }, + componentProps: ({ formModel }) => { + return { + oninput: () => { + formModel.loadPort = formModel.loadPort.replace(/[\u4e00-\u9fa5]/ig,'') + } + } } }, { - label: ' ', - field: 'deliveryPlace', + label: '', + field: 'loadPortId', + component: 'Input', + show: false, + }, + { + label: '', + field: 'dischargePort', component: 'Input', required: false, - colProps: { span: 3 }, + colProps: { span: 5 }, + componentProps: ({ formModel }) => { + return { + oninput: () => { + formModel.dischargePort = formModel.dischargePort.replace(/[\u4e00-\u9fa5]/ig,'') + } + } + } }, { - label: '收货地', - field: 'receiptPlaceId', - component: 'ApiSelect', + label: '', + field: 'dischargePortId', + component: 'Input', + show: false, + }, + { + label: '', + field: 'deliveryPlace', + component: 'Input', required: false, - dynamicDisabled: false, - // defaultValue: '', - colProps: { span: 3 }, + colProps: { span: 5 }, componentProps: ({ formModel }) => { return { - allowClear: true, - showSearch: true, - api: () => { - return new Promise((resolve) => { - const data = JSON.parse( - JSON.stringify(optionsStore.getOptionsByCode('GetClientPortSelectList')), - ) - data.forEach((item) => { - item.portName = `${item.portName}(${item.ediCode})` - }) - resolve({ data }) - }) - }, - labelField: 'portName', - valueField: 'id', - resultField: 'data', - filterOption: (input: string, option: any) => { - return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }, - onChange: (e, obj) => { - if (obj) { - formModel.receiptPlace = obj.label - } else { - formModel.receiptPlace = '' - } + oninput: () => { + formModel.deliveryPlace = formModel.deliveryPlace.replace(/[\u4e00-\u9fa5]/ig,'') } } - }, + } }, { - label: ' ', + label: '', + field: 'deliveryPlaceId', + component: 'Input', + show: false, + }, + { + label: '', field: 'receiptPlace', component: 'Input', required: false, - colProps: { span: 3 } + colProps: { span: 5 }, + componentProps: ({ formModel }) => { + return { + oninput: () => { + formModel.receiptPlace = formModel.receiptPlace.replace(/[\u4e00-\u9fa5]/ig,'') + } + } + } + }, + { + label: '', + field: 'receiptPlaceId', + component: 'Input', + show: false, + }, + { + label: '', + field: 'transPort', + component: 'Input', + required: false, + colProps: { span: 5 }, + componentProps: ({ formModel }) => { + return { + oninput: () => { + formModel.transPort = formModel.transPort.replace(/[\u4e00-\u9fa5]/ig,'') + } + } + } + }, + { + label: '', + field: 'transPortId', + component: 'Input', + show: false, } ] @@ -889,7 +961,8 @@ export const searchFormSchema: FormSchema[] = [ dynamicDisabled: false, colProps: { span: 6 }, componentProps: { - allowClear: true + allowClear: true, + valueFormat: 'YYYY-MM-DD', } } ] diff --git a/src/views/operation/seaexport/detail/components/ladingInfo.vue b/src/views/operation/seaexport/detail/components/ladingInfo.vue index 104af3f0..d8e61c87 100644 --- a/src/views/operation/seaexport/detail/components/ladingInfo.vue +++ b/src/views/operation/seaexport/detail/components/ladingInfo.vue @@ -7,15 +7,41 @@
-
+
+ + + + + + + + + + + + + - + 调入主单信息 @@ -33,39 +59,19 @@ EDI报文导出 - - - 打印 - -
-
- - - 新建 - - - - 保存 - - - - - 删除 - -
- +

分提单号

+
+ +
暂无数据
+
+ +
+ -
+
-
+
@@ -120,10 +125,11 @@
-
+ +
- + - +
@@ -179,22 +185,23 @@