|
|
|
|
@ -1,44 +1,81 @@
|
|
|
|
|
<template>
|
|
|
|
|
<BasicModal width="1300px" v-bind="$attrs" :use-wrapper="true" title="马士基订舱" @register="registerModal">
|
|
|
|
|
<a-spin :spinning="formLoading">
|
|
|
|
|
<div class="main">
|
|
|
|
|
<a-spin :spinning="formLoading">
|
|
|
|
|
<div>
|
|
|
|
|
<div style="margin-bottom: 14px;display: flex;align-items: center;">
|
|
|
|
|
<span class="title-text">马士基订舱</span>
|
|
|
|
|
<span class="icon-box" @click="handleSave">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
|
|
|
|
|
viewBox="0 0 16 16" fill="none">
|
|
|
|
|
<path
|
|
|
|
|
d="M13.7 16L2.3 16C1 16 0 15 0 13.8L0 2.2C0 1 1 0 2.3 0L12.1 0C12.3 0 12.5 0.1 12.6 0.2L15.8 3.2C15.9 3.3 16 3.5 16 3.7L16 13.8C16 15 15 16 13.7 16Z"
|
|
|
|
|
fill="#FFB636">
|
|
|
|
|
</path>
|
|
|
|
|
<path
|
|
|
|
|
d="M9.89961 6.9L5.59961 6.9C4.49961 6.9 3.59961 6 3.59961 5L3.59961 0L11.8996 0L11.8996 5C11.8996 6 10.9996 6.9 9.89961 6.9Z"
|
|
|
|
|
fill="#FF7C0E">
|
|
|
|
|
</path>
|
|
|
|
|
<path
|
|
|
|
|
d="M9.5998 5.4999L7.1998 5.4999C6.6998 5.4999 6.2998 5.0999 6.2998 4.6999C6.2998 4.2999 6.6998 3.8999 7.1998 3.8999L9.5998 3.8999C10.0998 3.8999 10.4998 4.2999 10.4998 4.6999C10.4998 5.0999 10.0998 5.4999 9.5998 5.4999Z"
|
|
|
|
|
fill="#FFFFFF">
|
|
|
|
|
</path>
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
<span class="icon-box" v-if="mskType === 'add'" @click="handleSubimt" type="success">
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.01025390625"
|
|
|
|
|
height="15.9814453125" viewBox="0 0 16.01025390625 15.9814453125" fill="none">
|
|
|
|
|
<path
|
|
|
|
|
d="M7.07846 12.1814L4.17846 10.6814C3.27846 10.2814 2.77846 10.5814 3.17846 11.6814C3.17846 11.6814 4.87846 15.7814 4.87846 15.9814L7.47846 14.2814C7.77846 13.9814 7.97846 13.4814 7.87846 13.0814C7.77846 12.6814 7.47846 12.3814 7.07846 12.1814Z"
|
|
|
|
|
fill="#5097FF">
|
|
|
|
|
</path>
|
|
|
|
|
<path
|
|
|
|
|
d="M14.5788 0.18125L0.478775 7.28125C-0.121225 7.58125 -0.121225 8.08125 0.278775 8.38125C0.378775 8.48125 0.478775 8.48125 0.578775 8.48125L3.37878 9.58125C4.17878 9.88125 4.87878 9.68125 5.57878 9.08125L11.8788 4.08125C12.0788 3.88125 12.1788 4.08125 12.0788 4.28125L6.47878 9.68125C6.27878 9.88125 6.17878 10.2812 6.17878 10.5813C6.27878 10.8812 6.47878 11.0813 6.77878 11.2812L7.07878 11.3812L12.1788 13.7812L12.2788 13.7812C12.8788 14.0813 13.5788 13.7812 13.7788 13.1812C13.7788 13.0813 13.7788 13.0813 13.8788 12.9812L13.8788 12.8812L15.9788 1.18125C16.1788 0.28125 15.3788 -0.31875 14.5788 0.18125Z"
|
|
|
|
|
fill="#1B65DD">
|
|
|
|
|
</path>
|
|
|
|
|
</svg>
|
|
|
|
|
</span>
|
|
|
|
|
<span v-if="mskType === 'copy'">复制数量:</span>
|
|
|
|
|
<a-input-number style="margin:0 10px;width: 120px !important;" v-if="mskType === 'copy'" :precision="0"
|
|
|
|
|
v-model:value="mskNumber" :min="1" :max="50" />
|
|
|
|
|
</div>
|
|
|
|
|
<a-form :rules="rules" ref="mskform" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
|
|
|
<div class="title">MSK 订舱</div>
|
|
|
|
|
<div class="backgroud">
|
|
|
|
|
<div class="title">MSK 订舱</div>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<div>订舱产品代码</div>
|
|
|
|
|
<a-select allowClear @change="handleSelectProduct" size="small" disabled
|
|
|
|
|
v-model:value="form.productCode" style="width: 100%">
|
|
|
|
|
<a-select allowClear @change="handleSelectProduct" disabled v-model:value="form.productCode"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<a-select-option value="MaerskContract">MaerskContract</a-select-option>
|
|
|
|
|
<a-select-option value="MaerskSpot">MaerskSpot</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>请求类别</div>
|
|
|
|
|
<a-select allowClear v-model:value="form.sender" size="small" style="width: 100%">
|
|
|
|
|
<a-select allowClear v-model:value="form.sender" style="width: 100%">
|
|
|
|
|
<a-select-option value="BOOKAPI">BOOKAPI</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6" v-if="mskBookType == 'api'">
|
|
|
|
|
<a-col :span="4" v-if="mskBookType == 'api'">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>订舱合同唯一ID</div>
|
|
|
|
|
<a-select :disabled="nodisabled" allowClear @select="handleSelectPrice"
|
|
|
|
|
v-model:value="form.priceReferenceId" size="small" style="width: 100%">
|
|
|
|
|
v-model:value="form.priceReferenceId" style="width: 100%">
|
|
|
|
|
<a-select-option v-for="(item, index) in contractnoList" :key="index" :value="item.id">
|
|
|
|
|
{{ item.contractName }} - {{ item.contractNo }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="vesselCarrierCode" label="">
|
|
|
|
|
<div>服务船公司</div>
|
|
|
|
|
<a-select allowClear v-model:value="form.vesselCarrierCode" size="small" style="width: 100%">
|
|
|
|
|
<a-select allowClear v-model:value="form.vesselCarrierCode" style="width: 100%">
|
|
|
|
|
<a-select-option value="MAEU">MAEU</a-select-option>
|
|
|
|
|
<a-select-option value="SEAU">SEAU</a-select-option>
|
|
|
|
|
<a-select-option value="SEJJ">SEJJ</a-select-option>
|
|
|
|
|
@ -47,9 +84,7 @@
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row v-if="mskBookType == 'api'">
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<a-col :span="4" v-if="mskBookType == 'api'">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>是否持约</div>
|
|
|
|
|
<a-switch @change="handleChangePrice" v-model:checked="form.isBookingPartOwnPrice" />
|
|
|
|
|
@ -112,16 +147,16 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="title">地点、船期详情</div>
|
|
|
|
|
<div class="backgroud">
|
|
|
|
|
<div class="title">地点、船期详情</div>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="sfcarrierGeoID" label="">
|
|
|
|
|
<div class="must">始发地</div>
|
|
|
|
|
<a-select v-model:value="form.sfcarrierGeoID" show-search allowClear @search="getSearchLocations"
|
|
|
|
|
@select="handleSelect" :filter-option="false" size="small" style="width: 100%">
|
|
|
|
|
@select="handleSelect" :filter-option="false" style="width: 100%">
|
|
|
|
|
<template v-if="fetching" #notFoundContent>
|
|
|
|
|
<a-spin size="small" />
|
|
|
|
|
<a-spin />
|
|
|
|
|
</template>
|
|
|
|
|
<a-select-option v-for="(item, index) in portloadList" :key="item.carrierGeoID"
|
|
|
|
|
:value="item.carrierGeoID">
|
|
|
|
|
@ -131,13 +166,13 @@
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="mdsfcarrierGeoID" label="">
|
|
|
|
|
<div class="must">目的地</div>
|
|
|
|
|
<a-select v-model:value="form.mdsfcarrierGeoID" show-search allowClear @select="handleSelect1"
|
|
|
|
|
@search="getSearchLocations1" :filter-option="false" size="small" style="width: 100%">
|
|
|
|
|
@search="getSearchLocations1" :filter-option="false" style="width: 100%">
|
|
|
|
|
<template v-if="fetching" #notFoundContent>
|
|
|
|
|
<a-spin size="small" />
|
|
|
|
|
<a-spin />
|
|
|
|
|
</template>
|
|
|
|
|
<a-select-option v-for="(item, index) in portdischargeList" :key="item.carrierGeoID"
|
|
|
|
|
:value="item.carrierGeoID">
|
|
|
|
|
@ -148,29 +183,27 @@
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="exportServiceMode" label="">
|
|
|
|
|
<div class="must">始发地服务模式</div>
|
|
|
|
|
<a-select allowClear v-model:value="form.exportServiceMode" size="small" style="width: 100%">
|
|
|
|
|
<a-select allowClear v-model:value="form.exportServiceMode" style="width: 100%">
|
|
|
|
|
<a-select-option value="CY">CY</a-select-option>
|
|
|
|
|
<a-select-option value="SD">SD</a-select-option>
|
|
|
|
|
<a-select-option value="CFS">CFS</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="importServiceMode" label="">
|
|
|
|
|
<div class="must">目的地运输条款</div>
|
|
|
|
|
<a-select allowClear v-model:value="form.importServiceMode" size="small" style="width: 100%">
|
|
|
|
|
<a-select allowClear v-model:value="form.importServiceMode" style="width: 100%">
|
|
|
|
|
<a-select-option value="CY">CY</a-select-option>
|
|
|
|
|
<a-select-option value="SD">SD</a-select-option>
|
|
|
|
|
<a-select-option value="CFS">CFS</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>预计离港日期</div>
|
|
|
|
|
<a-date-picker valueFormat="YYYY-MM-DD" style="width: 70%;"
|
|
|
|
|
@ -179,7 +212,7 @@
|
|
|
|
|
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>强制不使用船期表订舱</div>
|
|
|
|
|
<a-switch v-model:checked="form.isSendNoSchedule">强制不使用船期表订舱</a-switch>
|
|
|
|
|
@ -189,6 +222,7 @@
|
|
|
|
|
<div class="box" v-for="(item, index) in shipData" :key="index">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<span class="top-text">
|
|
|
|
|
<i class="iconfont icon-PC_gangkou"></i>
|
|
|
|
|
{{ item.orignCityName }}<span v-if="item.originRegionName">,</span>
|
|
|
|
|
{{ item.originRegionName }}<span v-if="item.originCountryName">,</span>
|
|
|
|
|
{{ item.originCountryName }}</span>
|
|
|
|
|
@ -201,63 +235,63 @@
|
|
|
|
|
item.totalCurrency }}</span>
|
|
|
|
|
<span style="color: black;font-weight: bold">{{ item.totalAmountShow }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;align-items: flex-end;">
|
|
|
|
|
<div class="box-bottom">
|
|
|
|
|
<div class="left" style="width: 100% !important;padding-right: 10px">
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<i class="iconfont icon-dingwei top-icon"></i>
|
|
|
|
|
<i class="iconfont icon-rili-xianxing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>离港</div>
|
|
|
|
|
<div class="right-text">{{ item.etd }}</div>
|
|
|
|
|
<div>离港:{{ item.etd }}</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<i class="iconfont icon-dingwei top-icon"></i>
|
|
|
|
|
<i class="iconfont icon-rili-xianxing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>到港</div>
|
|
|
|
|
<div class="right-text">{{ item.eta }}</div>
|
|
|
|
|
<div>到港:{{ item.eta }}</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<i class="iconfont icon-shijian1 top-icon"></i>
|
|
|
|
|
<i class="iconfont icon-naozhong-xianxing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>运输时间</div>
|
|
|
|
|
<div class="right-text">{{ item.days }}天数</div>
|
|
|
|
|
<div>运输时间:{{ item.days }}天数</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left"> <i class="iconfont icon-chuanfanguanli-chuanfanshenqing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>船名/航次</div>
|
|
|
|
|
<div class="right-text">{{ item.vesselName }} / {{ item.carrierDepartureVoyageNumber }}</div>
|
|
|
|
|
<div>船名/航次:{{ item.vesselName }} / {{ item.carrierDepartureVoyageNumber }}</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="item.legs" style="margin-top: 15px;">
|
|
|
|
|
<div v-for="(ite, index1) in item.legs" :key="index1" class="leg-item">
|
|
|
|
|
<span style="color: rgba(37, 122, 250, 1);font-weight: 700;" v-if="index1 < 9">0{{ index1 + 1
|
|
|
|
|
<span style="color: rgba(39, 94, 204, 1);font-weight: 400;" v-if="index1 < 9">0{{ index1 + 1
|
|
|
|
|
}}</span>
|
|
|
|
|
<span style="color: rgba(37, 122, 250, 1);font-weight: 700;" v-else>{{ index1 + 1 }}</span>
|
|
|
|
|
<i style="margin: 0 15px;" class="iconfont icon-chuanbo top-icon"></i>
|
|
|
|
|
<span style="color: rgba(39, 94, 204, 1);font-weight: 400;" v-else>{{ index1 + 1 }}</span>
|
|
|
|
|
<i style="margin: 0 15px;" class="iconfont icon-chuan-danse top-icon"></i>
|
|
|
|
|
<span style="margin-right: 5px;display: inline-block;width:220px">
|
|
|
|
|
{{ ite.from.cityName }}<span v-if="ite.from.regionName">,</span>
|
|
|
|
|
{{ ite.from.regionName }}<span v-if="ite.from.countryName">,</span>
|
|
|
|
|
{{ ite.from.countryName }}</span>
|
|
|
|
|
<span><span style="font-weight: bold;color: black">ETD</span>：{{ ite.etd }}</span>
|
|
|
|
|
<span style="color: rgba(122, 137, 150, 1)"><span>ETD</span>：{{ ite.etd }}</span>
|
|
|
|
|
<span style="margin: 0 10px;">--------</span>
|
|
|
|
|
<i style="margin: 0 15px;" class="iconfont icon-chuanbo top-icon"></i>
|
|
|
|
|
<i style="margin-right: 15px;" class="iconfont icon-PC_gangkou top-icon"></i>
|
|
|
|
|
<span style="margin-right: 10px;display: inline-block;min-width: 240px">
|
|
|
|
|
{{ ite.to.cityName }}<span v-if="ite.to.regionName">,</span>
|
|
|
|
|
{{ ite.to.regionName }}<span v-if="ite.to.countryName">,</span>
|
|
|
|
|
{{ ite.to.countryName }}</span>
|
|
|
|
|
<span><span style="font-weight: bold;color: black">ETA</span>：{{ ite.eta }}</span>
|
|
|
|
|
<span style="color: rgba(122, 137, 150, 1)"><span>ETA</span>：{{ ite.eta }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -265,95 +299,95 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="title">货物详情</div>
|
|
|
|
|
<div class="backgroud">
|
|
|
|
|
<div class="title">货物详情</div>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="commodityName" label="">
|
|
|
|
|
<div class="must">商品名称</div>
|
|
|
|
|
<a-input disabled size="small" ref="commodityName" v-model:value="form.commodityName"
|
|
|
|
|
style="width: 70%;" />
|
|
|
|
|
<span @click="handleOpenSP" style="height: 20.8px;line-height: 20.8px;" class="open-btn">检索商品</span>
|
|
|
|
|
<a-input disabled ref="commodityName" v-model:value="form.commodityName" style="width: 70%;" />
|
|
|
|
|
<span @click="handleOpenSP" class="open-btn">检索商品</span>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="commodityCodeType" label="">
|
|
|
|
|
<div class="must">商品编码类型</div>
|
|
|
|
|
<a-select allowClear v-model:value="form.commodityCodeType" size="small" style="width: 100%">
|
|
|
|
|
<a-select allowClear v-model:value="form.commodityCodeType" style="width: 100%">
|
|
|
|
|
<a-select-option value="MaerskCode">MaerskCode</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="totalCargoWeight" label="">
|
|
|
|
|
<div class="must">总重(KGS)</div>
|
|
|
|
|
<a-input-number style="width: 90%" size="small" v-model:value="form.totalCargoWeight" />
|
|
|
|
|
<a-input-number style="width: 90%" v-model:value="form.totalCargoWeight" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item name="cargoType" label="">
|
|
|
|
|
<div class="must">货物标志</div>
|
|
|
|
|
<a-select allowClear v-model:value="form.cargoType" size="small" style="width: 100%">
|
|
|
|
|
<a-select allowClear v-model:value="form.cargoType" style="width: 100%">
|
|
|
|
|
<a-select-option value="DRY">DRY</a-select-option>
|
|
|
|
|
<a-select-option value="REEFER">REEFER</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>是否冷冻处理</div>
|
|
|
|
|
<a-switch @change="handleChagneType" v-model:checked="form.isReefer" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>温度</div>
|
|
|
|
|
<a-input-number :disabled="disabled" style="width: 100%" size="small"
|
|
|
|
|
v-model:value="form.temperature" />
|
|
|
|
|
<a-input-number :disabled="disabled" style="width: 100%" v-model:value="form.temperature" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>货物探测器数量</div>
|
|
|
|
|
<a-input-number :min="0" :disabled="disabled" :precision="0" style="width: 100%" size="small"
|
|
|
|
|
<a-input-number :min="0" :disabled="disabled" :precision="0" style="width: 100%"
|
|
|
|
|
v-model:value="form.noOfProbes" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>通风(m³/hour)</div>
|
|
|
|
|
<a-input-number :disabled="disabled" style="width: 74%" size="small"
|
|
|
|
|
v-model:value="form.ventilation" />
|
|
|
|
|
<a-input-number :disabled="disabled" style="width: 74%" v-model:value="form.ventilation" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<a-col :span="4">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>湿度(%)</div>
|
|
|
|
|
<a-input-number :min="0" :precision="0" :disabled="disabled" style="width: 84%" size="small"
|
|
|
|
|
<a-input-number :min="0" :precision="0" :disabled="disabled" style="width: 84%"
|
|
|
|
|
v-model:value="form.humidity" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a-row>
|
|
|
|
|
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="backgroud">
|
|
|
|
|
<div class="title">箱型箱量
|
|
|
|
|
<span @click="handleAdd" style="cursor: pointer;font-size: 15px;margin-left: 30px"><i
|
|
|
|
|
class="iconfont icon-zengjiatianjiajiajian"></i>添加</span>
|
|
|
|
|
<span @click="handleAdd" class="ctn-btn">
|
|
|
|
|
<i class="iconfont icon-xinzeng-danse"></i>新增
|
|
|
|
|
</span>
|
|
|
|
|
<span @click="handleDeleteCtn" class="ctn-btn">
|
|
|
|
|
<i class="iconfont icon-shanchu-danse"></i>删除
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<a-table :pagination="false" size="small" bordered :data-source="form.ctns" :columns="columns">
|
|
|
|
|
<a-table :rowKey="(record, index) => { return index }"
|
|
|
|
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: changeSelect }" style="margin-top: 10px"
|
|
|
|
|
size="small" :pagination="false" bordered :data-source="form.ctns" :columns="columns">
|
|
|
|
|
<template #bodyCell="{ column, record, index }">
|
|
|
|
|
<template v-if="column.dataIndex === 'ctnCode'">
|
|
|
|
|
<a-select show-search @search="handleSearchCtn" v-model:value="record.ctnCode" @change="handleCtnChange(record)"
|
|
|
|
|
:filter-option="false" size="small" style="width: 100%">
|
|
|
|
|
<a-select show-search @search="handleSearchCtn" v-model:value="record.ctnCode"
|
|
|
|
|
@change="handleCtnChange(record)" :filter-option="false" style="width: 100%">
|
|
|
|
|
<a-select-option v-for="(item, index) in ctnallList" :key="index" :value="item.ediCode">
|
|
|
|
|
{{ item.ctnName }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
@ -361,42 +395,25 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="column.dataIndex === 'ctnNum'">
|
|
|
|
|
<a-input-number style="width: 70%" :min="1" :precision="0" size="small" v-model:value="record.ctnNum" />
|
|
|
|
|
<a-input-number style="width: 70%" :min="1" :precision="0" v-model:value="record.ctnNum" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="column.dataIndex === 'ctnSufferWeight'">
|
|
|
|
|
<a-input-number style="width: 70%" :precision="0" size="small" v-model:value="record.ctnSufferWeight" />
|
|
|
|
|
<a-input-number style="width: 70%" :precision="0" v-model:value="record.ctnSufferWeight" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<template v-if="column.dataIndex === 'operation'">
|
|
|
|
|
<DeleteOutlined style="color: red;" @click="handleDeleteCtn(index)" />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
</a-table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<a-checkbox v-model:checked="form.isShipperOwned">我希望使用托运人自己的集装箱</a-checkbox>
|
|
|
|
|
<a-checkbox v-model:checked="form.isImportReturned">我想使用进口退货集装箱或者其他三角集运选项</a-checkbox>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</a-form>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span v-if="mskType === 'copy'">复制数量:</span>
|
|
|
|
|
<a-input-number style="margin:0 10px;width: 120px !important;" v-if="mskType === 'copy'" :precision="0"
|
|
|
|
|
size="small" v-model:value="mskNumber" :min="1" :max="50" />
|
|
|
|
|
<a-button pre-icon="ant-design:close-outlined" type="warning" :loading="loading" ghost
|
|
|
|
|
style="margin-right: 0.8rem" @click="closeModal">取消</a-button>
|
|
|
|
|
<a-popconfirm title="确定发送吗?" ok-text="是" cancel-text="否" @confirm="handleSubimt">
|
|
|
|
|
<a-button pre-icon="ant-design:check-outlined" style="margin-right: 0.8rem" v-if="mskType === 'add'"
|
|
|
|
|
type="success">发送</a-button>
|
|
|
|
|
</a-popconfirm>
|
|
|
|
|
<a-button pre-icon="ant-design:check-circle-outlined" type="primary" :loading="loading"
|
|
|
|
|
@click="handleSave">保存</a-button>
|
|
|
|
|
</template>
|
|
|
|
|
</BasicModal>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a-modal title="检索船期" :footer="null" :visible="visible" width="1300px" @cancel="visible = false">
|
|
|
|
|
<div class="backgroud">
|
|
|
|
|
@ -419,7 +436,7 @@
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>箱型</div>
|
|
|
|
|
<a-select show-search v-model:value="searchForm.isoEquipmentCode" :filter-option="filterOption"
|
|
|
|
|
size="small" style="width: 100%">
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<a-select-option v-for="(item, index) in ctnallList" :key="index" :value="item.ediCode">
|
|
|
|
|
{{ item.ctnName }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
@ -429,13 +446,13 @@
|
|
|
|
|
<a-col :span="5">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>船名</div>
|
|
|
|
|
<a-input size="small" v-model:value="searchForm.vesselName" />
|
|
|
|
|
<a-input v-model:value="searchForm.vesselName" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="5">
|
|
|
|
|
<a-form-item label="">
|
|
|
|
|
<div>航次号</div>
|
|
|
|
|
<a-input size="small" v-model:value="searchForm.carrierDepartureVoyageNumber" />
|
|
|
|
|
<a-input v-model:value="searchForm.carrierDepartureVoyageNumber" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
@ -446,6 +463,7 @@
|
|
|
|
|
<div class="box" v-for="(item, index) in shipList" :key="index">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<span class="top-text">
|
|
|
|
|
<i class="iconfont icon-PC_gangkou"></i>
|
|
|
|
|
{{ item.orignCityName }}<span v-if="item.originRegionName">,</span>
|
|
|
|
|
{{ item.originRegionName }}<span v-if="item.originCountryName">,</span>
|
|
|
|
|
{{ item.originCountryName }}</span>
|
|
|
|
|
@ -463,57 +481,58 @@
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<i class="iconfont icon-dingwei top-icon"></i>
|
|
|
|
|
<i class="iconfont icon-rili-xianxing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>离港</div>
|
|
|
|
|
<div class="right-text">{{ item.etd }}</div>
|
|
|
|
|
<div>离港:{{ item.etd }}</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<i class="iconfont icon-dingwei top-icon"></i>
|
|
|
|
|
<i class="iconfont icon-rili-xianxing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>到港</div>
|
|
|
|
|
<div class="right-text">{{ item.eta }}</div>
|
|
|
|
|
<div>到港:{{ item.eta }}</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left">
|
|
|
|
|
<i class="iconfont icon-shijian1 top-icon"></i>
|
|
|
|
|
<i class="iconfont icon-naozhong-xianxing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>运输时间</div>
|
|
|
|
|
<div class="right-text">{{ item.days }}天数</div>
|
|
|
|
|
<div>运输时间:{{ item.days }}天数</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item-left"> <i class="iconfont icon-chuanfanguanli-chuanfanshenqing top-icon"></i> </div>
|
|
|
|
|
<div class="item-left"> <i class="iconfont icon-chuanfanguanli-chuanfanshenqing top-icon"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item-right">
|
|
|
|
|
<div>船名/航次</div>
|
|
|
|
|
<div class="right-text">{{ item.vesselName }} / {{ item.carrierDepartureVoyageNumber }}</div>
|
|
|
|
|
<div>船名/航次:{{ item.vesselName }} / {{ item.carrierDepartureVoyageNumber }}</div>
|
|
|
|
|
<div class="right-text"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="item.legs" style="margin-top: 15px;">
|
|
|
|
|
<div v-for="(ite, index1) in item.legs" :key="index1" class="leg-item">
|
|
|
|
|
<span style="color: rgba(37, 122, 250, 1);font-weight: 700;" v-if="index1 < 9">0{{ index1 + 1
|
|
|
|
|
<span style="color: rgba(39, 94, 204, 1);font-weight: 400;" v-if="index1 < 9">0{{ index1 + 1
|
|
|
|
|
}}</span>
|
|
|
|
|
<span style="color: rgba(37, 122, 250, 1);font-weight: 700;" v-else>{{ index1 + 1 }}</span>
|
|
|
|
|
<i style="margin: 0 15px;" class="iconfont icon-chuanbo top-icon"></i>
|
|
|
|
|
<span style="color: rgba(39, 94, 204, 1);font-weight: 400;" v-else>{{ index1 + 1 }}</span>
|
|
|
|
|
<i style="margin: 0 15px;" class="iconfont icon-chuan-danse top-icon"></i>
|
|
|
|
|
<span style="margin-right: 5px;display: inline-block;width:220px">
|
|
|
|
|
{{ ite.from.cityName }}<span v-if="ite.from.regionName">,</span>
|
|
|
|
|
{{ ite.from.regionName }}<span v-if="ite.from.countryName">,</span>
|
|
|
|
|
{{ ite.from.countryName }}</span>
|
|
|
|
|
<span><span style="font-weight: bold;color: black">ETD</span>：{{ ite.etd }}</span>
|
|
|
|
|
<span style="margin: 0 10px;">----------</span>
|
|
|
|
|
<i style="margin: 0 15px;" class="iconfont icon-chuanbo top-icon"></i>
|
|
|
|
|
<span style="color: rgba(122, 137, 150, 1)"><span>ETD</span>：{{ ite.etd }}</span>
|
|
|
|
|
<span style="margin: 0 10px;">--------</span>
|
|
|
|
|
<i style="margin-right: 15px;" class="iconfont icon-PC_gangkou top-icon"></i>
|
|
|
|
|
<span style="margin-right: 10px;display: inline-block;min-width: 240px">
|
|
|
|
|
{{ ite.to.cityName }}<span v-if="ite.to.regionName">,</span>
|
|
|
|
|
{{ ite.to.regionName }}<span v-if="ite.to.countryName">,</span>
|
|
|
|
|
{{ ite.to.countryName }}</span>
|
|
|
|
|
<span><span style="font-weight: bold;color: black">ETA</span>：{{ ite.eta }}</span>
|
|
|
|
|
<span style="color: rgba(122, 137, 150, 1)"><span>ETA</span>：{{ ite.eta }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -526,7 +545,6 @@
|
|
|
|
|
<p>共计 {{ shipList.length }} 条船期记录</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a-modal>
|
|
|
|
|
|
|
|
|
|
<a-modal title="检索商品" :visible="goodsFlag" width="1200px" @cancel="goodsFlag = false">
|
|
|
|
|
<div style="display: flex;background-color: rgba(245, 249, 252, 1);padding: 10px;">
|
|
|
|
|
<a-row style="width:90%">
|
|
|
|
|
@ -569,35 +587,28 @@
|
|
|
|
|
</a-spin>
|
|
|
|
|
|
|
|
|
|
</a-modal>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { onMounted, ref, reactive, h } from 'vue'
|
|
|
|
|
import { Modal } from 'ant-design-vue';
|
|
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal'
|
|
|
|
|
import { useMultipleTabStore } from '/@/store/modules/multipleTab'
|
|
|
|
|
const tabStore = useMultipleTabStore()
|
|
|
|
|
import { GetCtnSelectList } from '/@/views/operation/seaexport/api/BookingLedger'
|
|
|
|
|
import {
|
|
|
|
|
getContractno, SearchCommodities, SearchShipSailingSchedule, mskGetGetInfoSpot, mskGetSaveSpot,
|
|
|
|
|
SearchLocations, SendMSKBooking, mskGetSave, mskGetGetInfo, GetInitInfoMsk, SendMSKBookingSpot, GetInitInfoMskApi,
|
|
|
|
|
CheckWarningBatchCopy, maskCopy, SearchLocationsSpot, SearchShipSailingScheduleSpot, maskCopySPOT, SearchCommoditiesSpot
|
|
|
|
|
} from './api'
|
|
|
|
|
import { DeleteOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
|
import { useGo } from '/@/hooks/web/usePage'
|
|
|
|
|
const go = useGo()
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const form = ref({}) as any
|
|
|
|
|
|
|
|
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
|
|
|
|
|
const id = data.id ? data.id : null
|
|
|
|
|
const type = data.type ? data.type : null
|
|
|
|
|
const number = data.number ? data.number : null
|
|
|
|
|
const copyId = data.copyId ? data.copyId : null
|
|
|
|
|
if (data.mskBookType === 'api') {
|
|
|
|
|
init(id, type, number, copyId)
|
|
|
|
|
}
|
|
|
|
|
if (data.mskBookType === 'spot') {
|
|
|
|
|
spotInit(id, type, number, copyId)
|
|
|
|
|
}
|
|
|
|
|
setModalProps({ loading: false })
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
|
|
|
|
|
@ -765,8 +776,22 @@ onMounted(() => {
|
|
|
|
|
GetCtnSelectList().then(res => {
|
|
|
|
|
ctnallList.value = res.data
|
|
|
|
|
})
|
|
|
|
|
start()
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function start() {
|
|
|
|
|
const id = route.query.id ? route.query.id : null
|
|
|
|
|
const type = route.query.type ? route.query.type : null
|
|
|
|
|
const number = route.query.number ? route.query.number : null
|
|
|
|
|
const copyId = route.query.copyId ? route.query.copyId : null
|
|
|
|
|
if (route.query.mskBookType === 'api') {
|
|
|
|
|
init(id, type, number, copyId)
|
|
|
|
|
}
|
|
|
|
|
if (route.query.mskBookType === 'spot') {
|
|
|
|
|
spotInit(id, type, number, copyId)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//获取订舱人初始值
|
|
|
|
|
function getinitInfoMsk() {
|
|
|
|
|
// GetInitInfoMsk().then(res => {
|
|
|
|
|
@ -776,8 +801,8 @@ function getinitInfoMsk() {
|
|
|
|
|
mskApiInfo.value = res.data
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
function handleSearchCtn(val){
|
|
|
|
|
GetCtnSelectList({queryKey:val}).then(res => {
|
|
|
|
|
function handleSearchCtn(val) {
|
|
|
|
|
GetCtnSelectList({ queryKey: val }).then(res => {
|
|
|
|
|
ctnallList.value = res.data
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
@ -801,7 +826,7 @@ function init(id, type, number, copyId) {
|
|
|
|
|
if (!id) {
|
|
|
|
|
form.value = {
|
|
|
|
|
ctns: [
|
|
|
|
|
{ ctnSufferWeight: 15000, ctnNum: 1, ctnCode: '20G0', ctnName: '20GP' },
|
|
|
|
|
{ ctnSufferWeight: 15000, ctnNum: 1, ctnCode: '22G0', ctnName: '20GP' },
|
|
|
|
|
{ ctnSufferWeight: 15000, ctnNum: 1, ctnCode: '45G0', ctnName: '40HC' }
|
|
|
|
|
],
|
|
|
|
|
isReefer: false,
|
|
|
|
|
@ -854,6 +879,10 @@ function init(id, type, number, copyId) {
|
|
|
|
|
}
|
|
|
|
|
// showFlag.value = true
|
|
|
|
|
}
|
|
|
|
|
const selectedRowKeys = ref([])
|
|
|
|
|
function changeSelect(v) {
|
|
|
|
|
selectedRowKeys.value = v
|
|
|
|
|
}
|
|
|
|
|
//spot初始化弹窗
|
|
|
|
|
function spotInit(id, type, number, copyId) {
|
|
|
|
|
mskType.value = type || 'add'
|
|
|
|
|
@ -1015,7 +1044,6 @@ function handleSubimt() {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
showFlag.value = false
|
|
|
|
|
createMessage.success('发送成功')
|
|
|
|
|
emit('handleSuccess')
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
@ -1027,7 +1055,6 @@ function handleSubimt() {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
showFlag.value = false
|
|
|
|
|
createMessage.success('发送成功')
|
|
|
|
|
emit('handleSuccess')
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
@ -1055,24 +1082,40 @@ function handleSave() {
|
|
|
|
|
mskGetSaveSpot(form.value).then(res => {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
showFlag.value = false
|
|
|
|
|
emit('handleSuccess')
|
|
|
|
|
closeModal()
|
|
|
|
|
createMessage.success('保存成功')
|
|
|
|
|
if (!form.value.id) {
|
|
|
|
|
const { fullPath } = route //获取当前路径
|
|
|
|
|
tabStore.closeTabByKey(fullPath, router)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
go(`/cabinBookingDetail?id=${res.data}&mskBookType=api`)
|
|
|
|
|
}, 50)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if (mskBookType.value === 'api') {
|
|
|
|
|
mskGetSave(form.value).then(res => {
|
|
|
|
|
if (res.succeeded) {
|
|
|
|
|
showFlag.value = false
|
|
|
|
|
emit('handleSuccess')
|
|
|
|
|
closeModal()
|
|
|
|
|
createMessage.success('保存成功')
|
|
|
|
|
if (!form.value.id) {
|
|
|
|
|
const { fullPath } = route //获取当前路径
|
|
|
|
|
tabStore.closeTabByKey(fullPath, router)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
go(`/cabinBookingDetail?id=${res.data}&mskBookType=api`)
|
|
|
|
|
}, 50)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
@ -1126,6 +1169,8 @@ function handleCopyMore() {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if (mskBookType.value === 'spot') {
|
|
|
|
|
@ -1138,6 +1183,8 @@ function handleCopyMore() {
|
|
|
|
|
createMessage.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
formLoading.value = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -1146,7 +1193,7 @@ function handleSelect(val) {
|
|
|
|
|
if (item.carrierGeoID === val) {
|
|
|
|
|
form.value.placeOfReceiptCityName = item.cityName
|
|
|
|
|
form.value.carrierCollectionOriginGeoID = item.carrierGeoID
|
|
|
|
|
// form.value.placeOfReceiptCountryCode = item.countryCode
|
|
|
|
|
form.value.placeOfReceiptCountryCode = item.countryCode
|
|
|
|
|
form.value.userPlaceOfReceiptUnLocCode = item.unLocationCode
|
|
|
|
|
form.value.userPlaceOfReceiptCityName = item.cityName
|
|
|
|
|
form.value.userPlaceOfReceiptCountryCode = item.countryCode
|
|
|
|
|
@ -1159,7 +1206,7 @@ function handleSelect1(val) {
|
|
|
|
|
portdischargeList.value.forEach(item => {
|
|
|
|
|
if (item.carrierGeoID === val) {
|
|
|
|
|
form.value.placeOfDeliveryCityName = item.cityName
|
|
|
|
|
// form.value.placeOfDeliveryCountryCode = item.countryCode
|
|
|
|
|
form.value.placeOfDeliveryCountryCode = item.countryCode
|
|
|
|
|
form.value.carrierDeliveryDestinationGeoID = item.carrierGeoID
|
|
|
|
|
form.value.userPlaceOfDeliveryUnLocCode = item.unLocationCode
|
|
|
|
|
form.value.userPlaceOfDeliveryCityName = item.cityName
|
|
|
|
|
@ -1250,8 +1297,15 @@ function handleSelectGoods(item) {
|
|
|
|
|
form.value.commodityCode = item.commodityCode
|
|
|
|
|
form.value.commodityName = item.commodityName
|
|
|
|
|
}
|
|
|
|
|
function handleDeleteCtn(index) {
|
|
|
|
|
form.value.ctns.splice(index, 1)
|
|
|
|
|
function handleDeleteCtn() {
|
|
|
|
|
|
|
|
|
|
for (let i = selectedRowKeys.value.length - 1; i >= 0; i--) {
|
|
|
|
|
const index = selectedRowKeys.value[i];
|
|
|
|
|
if (index >= 0 && index < form.value.ctns.length) {
|
|
|
|
|
form.value.ctns.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
selectedRowKeys.value = []
|
|
|
|
|
}
|
|
|
|
|
function handleAdd() {
|
|
|
|
|
const data = {
|
|
|
|
|
@ -1259,7 +1313,6 @@ function handleAdd() {
|
|
|
|
|
ctnNum: 1,
|
|
|
|
|
ctnSufferWeight: 0
|
|
|
|
|
}
|
|
|
|
|
console.log(form.value.ctns)
|
|
|
|
|
form.value.ctns.push(data)
|
|
|
|
|
}
|
|
|
|
|
function filterOption(input, option) {
|
|
|
|
|
@ -1345,6 +1398,11 @@ function getContractnoList() {
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.main {
|
|
|
|
|
background-color: #f0f2f5;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-form-item) {
|
|
|
|
|
margin-bottom: 10px !important;
|
|
|
|
|
}
|
|
|
|
|
@ -1352,28 +1410,32 @@ function getContractnoList() {
|
|
|
|
|
:deep(.ant-form-item-label>label) {
|
|
|
|
|
height: 25px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-form-item-control-input-content) {
|
|
|
|
|
div{
|
|
|
|
|
div {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leg-item {
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
background: rgba(245, 249, 252, 1);
|
|
|
|
|
border-left: 1px solid rgba(37, 122, 250, 1);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: white;
|
|
|
|
|
border-left: 1px solid rgba(39, 94, 204, 1);
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 12px 15px;
|
|
|
|
|
padding: 6px 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.backgroud {
|
|
|
|
|
background-color: rgba(245, 249, 252, 1);
|
|
|
|
|
padding: 15px 20px 5px 20px;
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
border: 1px solid rgba(204, 214, 223, 1);
|
|
|
|
|
margin-bottom: 15px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1381,8 +1443,8 @@ function getContractnoList() {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
color: rgba(37, 122, 250, 1);
|
|
|
|
|
height: 28px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
border: 1px solid rgba(37, 122, 250, 1);
|
|
|
|
|
@ -1390,6 +1452,29 @@ function getContractnoList() {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[data-theme='blue'] .open-btn {
|
|
|
|
|
border: 1px solid rgba(37, 122, 250, 1);
|
|
|
|
|
color: rgba(37, 122, 250, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[data-theme='white'] .open-btn {
|
|
|
|
|
border: 1px solid rgba(37, 122, 250, 1);
|
|
|
|
|
color: rgba(37, 122, 250, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html[data-theme='black'] .open-btn {
|
|
|
|
|
border: 1px solid rgba(255, 102, 0, 1);
|
|
|
|
|
color: rgba(255, 102, 0, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-bottom {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
background-color: rgba(245, 249, 252, 1);
|
|
|
|
|
padding-top: 15px;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.good-top {
|
|
|
|
|
height: 36px;
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
@ -1421,11 +1506,11 @@ function getContractnoList() {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: black;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-icon {
|
|
|
|
|
font-size: 17px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: rgba(37, 122, 250, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -1443,8 +1528,6 @@ function getContractnoList() {
|
|
|
|
|
.box {
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
background: white;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
width: 90%;
|
|
|
|
|
@ -1458,10 +1541,9 @@ function getContractnoList() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top {
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: rgba(37, 122, 250, 1);
|
|
|
|
|
background: rgba(39, 94, 204, 1);
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -1489,6 +1571,7 @@ function getContractnoList() {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 21%;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.item-left {
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
@ -1501,5 +1584,67 @@ function getContractnoList() {
|
|
|
|
|
color: red;
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 18px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title-text {
|
|
|
|
|
color: rgba(18, 24, 38, 1);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-box {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 26px;
|
|
|
|
|
width: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-right {
|
|
|
|
|
font-size: 12px
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-select-selector) {
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-select-selection-item) {
|
|
|
|
|
line-height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-select-selector) {
|
|
|
|
|
line-height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-input-number-input) {
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-input) {
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-picker) {
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ctn-btn {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: rgba(240, 242, 245, 1);
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
padding: 5px 7px;
|
|
|
|
|
|
|
|
|
|
.iconfont {
|
|
|
|
|
font-size: 14px
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
张同海
2 weeks ago
