szh-new
parent
cce0f86b2d
commit
348d920077
File diff suppressed because it is too large
Load Diff
@ -1,25 +1,655 @@
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||
import { getDictOption } from '/@/utils/dictUtil'
|
||||
import { getOptions } from '/@/hooks/dict'
|
||||
|
||||
import {
|
||||
GetClientCountrySelectList,
|
||||
GetShippingBillTemplateSelectList,
|
||||
GetClientPortSelectList,
|
||||
GetVoynoSelectList,
|
||||
GetVesselSelectList,
|
||||
} from '/@/views/operation/seaexport/api/BookingLedger'
|
||||
import { GetClientListByCode, GetCarrierSelectList } from '/@/api/common'
|
||||
import { pl } from 'element-plus/es/locales.mjs'
|
||||
let countryList = []
|
||||
// 基础信息表单
|
||||
export const formSchema1: FormSchema[] = [
|
||||
export const baseSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
show: false,
|
||||
defaultValue: '0',
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'isHBL',
|
||||
field: 'isPart',
|
||||
show: false,
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '主题单号',
|
||||
field: 'mblno',
|
||||
label: '主提单号',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
required: false,
|
||||
dynamicDisabled: ({ values }) => {
|
||||
return !values.isPart
|
||||
},
|
||||
show: ({ values }) => {
|
||||
return !values.isPart
|
||||
},
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'hblno',
|
||||
label: '分提单号',
|
||||
component: 'Input',
|
||||
required: false,
|
||||
show: ({ values }) => {
|
||||
return values.isPart
|
||||
},
|
||||
componentProps: ({ formActionType }) => {
|
||||
return {
|
||||
onChange: (e, obj) => {
|
||||
if(e){
|
||||
formActionType ? formActionType.linkageForm(e.target.value) : null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'vesselId',
|
||||
show: false,
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
field: 'innerVoyno',
|
||||
show: false,
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '船名',
|
||||
field: 'vessel',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetVesselSelectList,
|
||||
labelField: 'vesselName',
|
||||
valueField: 'vesselName',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.vesselId = obj.id
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.vesselId = null
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '海关航次',
|
||||
field: 'voyno',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: () => {
|
||||
return {
|
||||
api: GetVoynoSelectList,
|
||||
labelField: 'voyNo',
|
||||
valueField: 'voyNo',
|
||||
resultField: 'data',
|
||||
immediate: false
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '船代',
|
||||
field: 'shipAgency',
|
||||
component: 'ApiSelect',
|
||||
labelSlot: 'shipAgencyId',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetClientListByCode,
|
||||
params: { code: 'controller' },
|
||||
labelField: 'pinYinCode',
|
||||
showName: 'shortName',
|
||||
valueField: 'shortName',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.shipAgencyId = obj.id
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.shipAgencyId = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'carrierId',
|
||||
show: false,
|
||||
component: 'Input'
|
||||
},
|
||||
{
|
||||
label: '船公司',
|
||||
field: 'carrier',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetCarrierSelectList,
|
||||
labelField: 'pinYinCode',
|
||||
showName: 'cnName',
|
||||
valueField: 'cnName',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.carrierId = obj.id
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.carrierId = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'etd',
|
||||
label: '开船日期',
|
||||
component: 'DatePicker',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
valueFormat: 'YYYY-MM-DD'
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '装货港代码',
|
||||
field: 'loadPortCode',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetClientPortSelectList,
|
||||
resultField: 'data',
|
||||
labelField: 'pinYinCode',
|
||||
valueField: 'ediCode',
|
||||
showName: 'ediCode',
|
||||
immediate: false,
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.loadPortId = obj.id
|
||||
formModel.loadPort = obj.portName
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.loadPortId = null
|
||||
formModel.loadPort = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'loadPort',
|
||||
label: '装货港',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'loadPortId',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '卸货港代码',
|
||||
field: 'dischargePortCode',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 4 },
|
||||
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
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.dischargePortId = null
|
||||
formModel.dischargePort = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'dischargePort',
|
||||
label: '卸货港',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'dischargePortId',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '收货地代码',
|
||||
field: 'deliveryPlaceCode',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
// defaultValue: '',
|
||||
colProps: { span: 4 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetClientPortSelectList,
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
labelField: 'pinYinCode',
|
||||
valueField: 'ediCode',
|
||||
showName: 'ediCode',
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.deliveryPlace = obj.portName
|
||||
formModel.deliveryPlaceId = obj.id
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.receiptPladeliveryPlacece = null
|
||||
formModel.deliveryPlaceId = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'deliveryPlace',
|
||||
label: '收货地',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'deliveryPlaceId',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: '备注',
|
||||
component: 'Input',
|
||||
colProps: { span: 24 }
|
||||
},
|
||||
]
|
||||
// 收发通
|
||||
export const mailingSchema: FormSchema[] = [
|
||||
{
|
||||
label: '',
|
||||
field: 'shipperId',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '发货人',
|
||||
field: 'shipper',
|
||||
labelSlot: 'shipper',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 8 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetShippingBillTemplateSelectList,
|
||||
params: { type: 2 },
|
||||
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) {
|
||||
console.log(obj)
|
||||
formModel.shipperId = obj.id
|
||||
formModel.shipperContent = obj.content
|
||||
|
||||
formModel.shipperAddress = obj.address
|
||||
formModel.shipperName = obj.name
|
||||
formModel.shipperCountry = obj.country
|
||||
formModel.shipperCountryName = obj.countryName
|
||||
formModel.shipperCountryTel = obj.tel
|
||||
}
|
||||
if (e === undefined && obj === undefined) {
|
||||
formModel.shipperId = null
|
||||
formModel.shipperContent = null
|
||||
formModel.shipper = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
field: 'consigneeId',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '收货人',
|
||||
field: 'consignee',
|
||||
labelSlot: 'consignee',
|
||||
component: 'ApiSelect',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 8 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetShippingBillTemplateSelectList,
|
||||
params: { type: 1 },
|
||||
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
|
||||
|
||||
formModel.consigneeAddress = obj.address
|
||||
formModel.consigneeName = obj.name
|
||||
formModel.consigneeCountry = obj.country
|
||||
formModel.consigneeCountryName = obj.countryName
|
||||
formModel.consigneeCountryTel = obj.tel
|
||||
}
|
||||
if (e === undefined && obj === undefined) {
|
||||
formModel.consigneeId = null
|
||||
formModel.consignee = null
|
||||
formModel.consigneeContent = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
field: 'notifyPartyId',
|
||||
component: 'Input',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
label: '通知人',
|
||||
field: 'notifyParty',
|
||||
component: 'ApiSelect',
|
||||
labelSlot: 'notifyParty',
|
||||
required: false,
|
||||
dynamicDisabled: false,
|
||||
colProps: { span: 8 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetShippingBillTemplateSelectList,
|
||||
params: { type: 3 },
|
||||
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.notifyPartyId = obj.id
|
||||
formModel.notifyPartyContent = obj.content
|
||||
|
||||
formModel.notifyPartyAddress = obj.address
|
||||
formModel.notifyPartyName = obj.name
|
||||
formModel.notifyPartyCountry = obj.country
|
||||
formModel.notifyPartyCountryName = obj.countryName
|
||||
formModel.notifyPartyCountryTel = obj.tel
|
||||
}
|
||||
if (e === undefined && obj === undefined) {
|
||||
formModel.notifyPartyId = null
|
||||
formModel.notifyPartyContent = null
|
||||
formModel.notifyParty = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'shipperName',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'consigneeName',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'notifyPartyName',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'shipperAddress',
|
||||
label: '地址',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'consigneeAddress',
|
||||
label: '地址',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'notifyPartyAddress',
|
||||
label: '地址',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 }
|
||||
},
|
||||
{
|
||||
field: 'shipperCountry',
|
||||
label: '国家',
|
||||
component: 'Select',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
options: countryList,
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
fieldNames: {
|
||||
label: 'showName',
|
||||
value: 'countryCode',
|
||||
},
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.showName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
},
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.shipperCountryName = obj.countryName
|
||||
}
|
||||
if (e === undefined && obj === undefined) {
|
||||
formModel.shipperCountryName = ''
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'shipperCountryName',
|
||||
component: 'Input',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
field: 'shipperCountryTel',
|
||||
label: '电话',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'consigneeCountry',
|
||||
label: '国家',
|
||||
component: 'Select',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
options: countryList,
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
fieldNames: {
|
||||
label: 'showName',
|
||||
value: 'countryCode',
|
||||
},
|
||||
filterOption: (input: string, option: any) => {
|
||||
console.log(input, option)
|
||||
return option.showName.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.consigneeCountryName = obj.countryName
|
||||
}
|
||||
if (e === undefined && obj === undefined) {
|
||||
formModel.consigneeCountryName = ''
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'consigneeCountryName',
|
||||
component: 'Input',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
field: 'consigneeCountryTel',
|
||||
label: '电话',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'notifyPartyCountry',
|
||||
label: '国家',
|
||||
component: 'Select',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
options: countryList,
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
fieldNames: {
|
||||
label: 'showName',
|
||||
value: 'countryCode',
|
||||
},
|
||||
filterOption: (input: string, option: any) => {
|
||||
return option.showName.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.notifyPartyCountryName = obj.countryName
|
||||
}
|
||||
if (e === undefined && obj === undefined) {
|
||||
formModel.notifyPartyCountryName = ''
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
{
|
||||
field: 'notifyPartyCountryName',
|
||||
component: 'Input',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
field: 'notifyPartyCountryTel',
|
||||
label: '电话',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 }
|
||||
},
|
||||
]
|
||||
// 场站
|
||||
export const yardSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'yardId',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'yard',
|
||||
label: '',
|
||||
component: 'ApiSelect',
|
||||
colProps: { span: 12 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: GetClientListByCode,
|
||||
params: { code: 'yard' },
|
||||
labelField: 'pinYinCode',
|
||||
placeholder: '场站',
|
||||
showName: 'shortName',
|
||||
valueField: 'shortName',
|
||||
resultField: 'data',
|
||||
immediate: false,
|
||||
onChange: (e, obj) => {
|
||||
if (e && obj) {
|
||||
formModel.yardId = obj.id
|
||||
}
|
||||
if (!e && !obj) {
|
||||
formModel.yardId = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
function getCountryList() {
|
||||
const arr = localStorage.getItem('ds-country') ? JSON.parse(localStorage.getItem('ds-country')) : []
|
||||
if (arr.length > 0) {
|
||||
countryList = arr
|
||||
} else {
|
||||
GetClientCountrySelectList().then(res => {
|
||||
res.data.forEach(item=>{
|
||||
item.showName = item.countryName + '/' + item.countryCode
|
||||
})
|
||||
countryList = res.data
|
||||
localStorage.setItem('ds-country', JSON.stringify(res.data))
|
||||
})
|
||||
}
|
||||
}
|
||||
getCountryList()
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue