定时任务
parent
ff0462a515
commit
9d81cccfbe
@ -1,978 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a-modal
|
|
||||||
title="马士基订舱"
|
|
||||||
:visible="showFlag"
|
|
||||||
width="1000px"
|
|
||||||
@ok="handleSubimt"
|
|
||||||
@cancel="showFlag = false"
|
|
||||||
>
|
|
||||||
<div class="main">
|
|
||||||
<div class="title">MSK 订舱</div>
|
|
||||||
<a-form-model
|
|
||||||
ref="form"
|
|
||||||
:rules="rules"
|
|
||||||
:model="form"
|
|
||||||
:label-col="labelCol"
|
|
||||||
:wrapper-col="wrapperCol"
|
|
||||||
>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="订舱产品代码">
|
|
||||||
<a-select
|
|
||||||
v-model="form.productCode"
|
|
||||||
allow-clear
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
@change="handleSelectProduct"
|
|
||||||
>
|
|
||||||
<a-select-option value="MaerskContract">MaerskContract</a-select-option>
|
|
||||||
<a-select-option value="MaerskSpot">MaerskSpot</a-select-option>
|
|
||||||
<a-select-option value="SealandSpot">SealandSpot</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="请求类别">
|
|
||||||
<a-select v-model="form.sender" allow-clear size="small" style="width: 100%">
|
|
||||||
<a-select-option value="MaerskContract">BOOKAPI</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="订舱合同唯一ID">
|
|
||||||
<a-select
|
|
||||||
v-model="form.priceReference"
|
|
||||||
:disabled="nodisabled"
|
|
||||||
allow-clear
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
@select="handleSelectPrice"
|
|
||||||
>
|
|
||||||
<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-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="carrierCode" label="服务船公司">
|
|
||||||
<a-select v-model="form.carrierCode" allow-clear size="small" 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>
|
|
||||||
<a-select-option value="MCPU">MCPU</a-select-option>
|
|
||||||
<a-select-option value="MAEI">MAEI</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="是否持约">
|
|
||||||
<a-switch v-model="form.isBookingPartOwnPrice" @change="handleChangePrice" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col v-if="!form.isBookingPartOwnPrice" :span="12">
|
|
||||||
<a-form-model-item label="持约方合同号">
|
|
||||||
<a-select
|
|
||||||
v-model="form.cyfPrice"
|
|
||||||
allow-clear
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
@select="handleSelectPrice1"
|
|
||||||
>
|
|
||||||
<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-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="订舱公司名称">
|
|
||||||
{{ form.bookedByCompanyName }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="订舱方ID">
|
|
||||||
{{ form.bookedByMaerskPartyCode }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="订舱公司联系人">
|
|
||||||
{{ form.bookedByCompanyContactName }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="订舱公司邮箱">
|
|
||||||
{{ form.bookedByCompanyContactEmail }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="持约方名称">
|
|
||||||
{{ form.cyfCompanyName }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="持约方ID">
|
|
||||||
{{ form.cyfPartyCode }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="持约方联系人">
|
|
||||||
{{ form.cyfContactName }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="持约方邮箱">
|
|
||||||
{{ form.cyfEmail }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<div class="title">地点、船期详情</div>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="sfcarrierGeoID" label="始发地">
|
|
||||||
<a-select
|
|
||||||
v-model="form.sfcarrierGeoID"
|
|
||||||
show-search
|
|
||||||
allow-clear
|
|
||||||
:filter-option="false"
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
@search="getSearchLocations"
|
|
||||||
@select="handleSelect"
|
|
||||||
>
|
|
||||||
<a-spin v-if="fetching" slot="notFoundContent" size="small" />
|
|
||||||
<a-select-option
|
|
||||||
v-for="(item, index) in portloadList"
|
|
||||||
v-else
|
|
||||||
:key="item.carrierGeoID"
|
|
||||||
:value="item.carrierGeoID"
|
|
||||||
>
|
|
||||||
{{ item.cityName }} <span v-if="item.unRegionName">(</span>
|
|
||||||
{{ item.unRegionName }} <span v-if="item.unRegionName">)</span> ,
|
|
||||||
{{ item.countryName }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="mdsfcarrierGeoID" label="目的地">
|
|
||||||
<a-select
|
|
||||||
v-model="form.mdsfcarrierGeoID"
|
|
||||||
show-search
|
|
||||||
allow-clear
|
|
||||||
:filter-option="false"
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
@select="handleSelect1"
|
|
||||||
@search="getSearchLocations1"
|
|
||||||
>
|
|
||||||
<a-spin v-if="fetching" slot="notFoundContent" size="small" />
|
|
||||||
<a-select-option
|
|
||||||
v-for="(item, index) in portdischargeList"
|
|
||||||
v-else
|
|
||||||
:key="item.carrierGeoID"
|
|
||||||
:value="item.carrierGeoID"
|
|
||||||
>
|
|
||||||
{{ item.cityName }} <span v-if="item.unRegionName">(</span>
|
|
||||||
{{ item.unRegionName }} <span v-if="item.unRegionName">)</span> ,
|
|
||||||
{{ item.countryName }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="exportServiceMode" label="始发地服务模式">
|
|
||||||
<a-select
|
|
||||||
v-model="form.exportServiceMode"
|
|
||||||
allow-clear
|
|
||||||
size="small"
|
|
||||||
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-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="importServiceMode" label="目的地运输条款">
|
|
||||||
<a-select
|
|
||||||
v-model="form.importServiceMode"
|
|
||||||
allow-clear
|
|
||||||
size="small"
|
|
||||||
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-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="预计离港日期">
|
|
||||||
<a-date-picker
|
|
||||||
v-model="form.earliestDepartureDate"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
style="width: 72%"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style="color: #02a7f0; cursor: pointer; margin-left: 15px"
|
|
||||||
@click="handleOpenCQ"
|
|
||||||
>检索船期</span
|
|
||||||
>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<div v-for="(item, index) in shipData" :key="index" class="box">
|
|
||||||
<div class="left" style="width: 100%">
|
|
||||||
<div class="top">
|
|
||||||
<span class="top-text">{{ item.orignCityName }} </span>
|
|
||||||
<img style="margin: 0 15px" src="../../assets/icons/u92.svg" alt="" />
|
|
||||||
<span class="top-text">{{ item.deliveryCityName }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u90.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>离港</div>
|
|
||||||
<div>{{ item.etd }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u90.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>到港</div>
|
|
||||||
<div>{{ item.atd }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u102.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>运输时间</div>
|
|
||||||
<div>{{ item.days }}天数</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u98.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>船名/航次</div>
|
|
||||||
<div>{{ item.vesselName }} / {{ item.carrierDepartureVoyageNumber }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="title">货物详情</div>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="goodsName" label="商品名称">
|
|
||||||
<a-input v-model="form.goodsName" disabled style="width: 75%" size="small" />
|
|
||||||
<span
|
|
||||||
style="color: #02a7f0; cursor: pointer; margin-left: 15px"
|
|
||||||
@click="handleOpenSP"
|
|
||||||
>检索商品</span
|
|
||||||
>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="commodityCodeType" label="商品编码类型">
|
|
||||||
<a-select
|
|
||||||
v-model="form.commodityCodeType"
|
|
||||||
allow-clear
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<a-select-option value="MaerskCode">MaerskCode</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="totalCargoWeight" label="总重">
|
|
||||||
<a-input-number
|
|
||||||
v-model="form.totalCargoWeight"
|
|
||||||
style="width: 90%"
|
|
||||||
size="small"
|
|
||||||
/>KGS
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item prop="cargoType" label="货物标志">
|
|
||||||
<a-select v-model="form.cargoType" allow-clear size="small" 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-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="是否冷冻处理">
|
|
||||||
<a-switch v-model="form.isReefer" @change="handleChagneType" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="温度">
|
|
||||||
<a-input-number
|
|
||||||
v-model="form.temperature"
|
|
||||||
:disabled="disabled"
|
|
||||||
style="width: 100%"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="货物探测器数量">
|
|
||||||
<a-input-number
|
|
||||||
v-model="form.noOfProbes"
|
|
||||||
:disabled="disabled"
|
|
||||||
style="width: 100%"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="通风">
|
|
||||||
<a-input-number
|
|
||||||
v-model="form.ventilation"
|
|
||||||
:disabled="disabled"
|
|
||||||
style="width: 74%"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
m³/hour
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-model-item label="湿度">
|
|
||||||
<a-input-number
|
|
||||||
v-model="form.humidity"
|
|
||||||
:disabled="disabled"
|
|
||||||
style="width: 84%"
|
|
||||||
size="small"
|
|
||||||
/>%
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<div class="title">
|
|
||||||
箱型箱量
|
|
||||||
<span
|
|
||||||
style="color: #34d8fd; cursor: pointer; margin-left: 30px; font-size: 15px"
|
|
||||||
@click="handleAdd"
|
|
||||||
>
|
|
||||||
添加
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<a-table size="small" bordered :data-source="form.ctns" :columns="columns">
|
|
||||||
<span slot="ctnCode" slot-scope="text, record">
|
|
||||||
<a-select
|
|
||||||
v-model="record.columnName"
|
|
||||||
show-search
|
|
||||||
:filter-option="filterOption"
|
|
||||||
size="small"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<a-select-option
|
|
||||||
v-for="(item, index) in ctnallList"
|
|
||||||
:key="index"
|
|
||||||
:value="item.code"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</span>
|
|
||||||
<span slot="ctnNum" slot-scope="text, record">
|
|
||||||
<a-input-number
|
|
||||||
v-model="record.ctnNum"
|
|
||||||
style="width: 70%"
|
|
||||||
:min="1"
|
|
||||||
:precision="0"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span slot="ctnSufferWeight" slot-scope="text, record">
|
|
||||||
<a-input-number
|
|
||||||
v-model="record.ctnSufferWeight"
|
|
||||||
style="width: 70%"
|
|
||||||
:precision="0"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span slot="operation" slot-scope="text, record, index">
|
|
||||||
<a-icon type="delete" style="color: red" @click="handleDeleteCtn(index)" />
|
|
||||||
</span>
|
|
||||||
</a-table>
|
|
||||||
</a-form-model>
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
<a-modal title="检索船期" :visible="visible" width="1200px" @cancel="visible = false">
|
|
||||||
<div style="display: flex; align-items: center">
|
|
||||||
<a-row style="width: 90%">
|
|
||||||
<a-form-model :model="searchForm" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
|
|
||||||
<a-col :span="6">
|
|
||||||
<a-form-model-item label="始发地">
|
|
||||||
{{ form.placeOfReceiptCityName }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="6">
|
|
||||||
<a-form-model-item label="目的地">
|
|
||||||
{{ form.placeOfDeliveryCityName }}
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="6">
|
|
||||||
<a-form-model-item label="船名">
|
|
||||||
<a-input v-model="searchForm.vesselName" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="6">
|
|
||||||
<a-form-model-item label="航次号">
|
|
||||||
<a-input v-model="searchForm.carrierDepartureVoyageNumber" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-form-model>
|
|
||||||
</a-row>
|
|
||||||
<a-button style="margin-left: 20px" type="primary" @click="handleOpenCQ">检索</a-button>
|
|
||||||
</div>
|
|
||||||
<a-spin :spinning="cqLoading">
|
|
||||||
<div v-for="(item, index) in shipList" :key="index" class="box">
|
|
||||||
<div class="left">
|
|
||||||
<div class="top">
|
|
||||||
<span class="top-text">{{ item.orignCityName }} </span>
|
|
||||||
<img style="margin: 0 15px" src="../../assets/icons/u92.svg" alt="" />
|
|
||||||
<span class="top-text">{{ item.deliveryCityName }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u90.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>离港</div>
|
|
||||||
<div>{{ item.etd }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u90.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>到港</div>
|
|
||||||
<div>{{ item.atd }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u102.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>运输时间</div>
|
|
||||||
<div>{{ item.days }}天数</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-left"> <img src="../../assets/icons/u98.svg" alt="" /> </div>
|
|
||||||
<div class="item-right">
|
|
||||||
<div>船名/航次</div>
|
|
||||||
<div>{{ item.vesselName }} / {{ item.carrierDepartureVoyageNumber }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<a-button type="primary" @click="handleSelectCQ(item)">选择</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
<p>共计 {{ shipList.length }} 条船期记录</p>
|
|
||||||
</a-modal>
|
|
||||||
<a-modal title="检索商品" :visible="goodsFlag" width="1200px" @cancel="goodsFlag = false">
|
|
||||||
<div style="display: flex; align-items: center">
|
|
||||||
<a-row style="width: 50%">
|
|
||||||
<a-form-model :model="searchForm" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
|
|
||||||
<a-col :span="24">
|
|
||||||
<a-form-model-item label="商品名称">
|
|
||||||
<a-input v-model="goodsName" />
|
|
||||||
</a-form-model-item>
|
|
||||||
</a-col>
|
|
||||||
</a-form-model>
|
|
||||||
</a-row>
|
|
||||||
<a-button style="margin-left: 20px" type="primary" @click="getGoodsList">检索</a-button>
|
|
||||||
</div>
|
|
||||||
<a-spin :spinning="loading">
|
|
||||||
<div v-for="(item, index) in goodsList" :key="index" class="box">
|
|
||||||
<div class="left">
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="goods-item" style="width: 10%">
|
|
||||||
<div>商品代码</div>
|
|
||||||
<div>{{ item.commodityCode }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-item" style="width: 30%">
|
|
||||||
<div>商品名称</div>
|
|
||||||
<div>{{ item.commodityName }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-item" style="width: 50%">
|
|
||||||
<div>货物类型</div>
|
|
||||||
<div style="display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px">
|
|
||||||
<div v-for="(ite, index1) in item.cargoTypes" :key="index1" class="goodsType">{{
|
|
||||||
ite
|
|
||||||
}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<a-button type="primary" @click="handleSelectGoods(item)">选择</a-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</a-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
getContractno,
|
|
||||||
SearchCommodities,
|
|
||||||
SearchShipSailingSchedule,
|
|
||||||
SearchLocations,
|
|
||||||
SendMSKBooking,
|
|
||||||
} from '/@/views/operation/seaexport/api/BookingLedger'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
ctns: [],
|
|
||||||
isReefer: false,
|
|
||||||
productCode: 'MaerskContract',
|
|
||||||
carrierCode: 'MAEU',
|
|
||||||
isBookingPartOwnPrice: true,
|
|
||||||
importServiceMode: 'CY',
|
|
||||||
exportServiceMode: 'CY',
|
|
||||||
cargoType: 'DRY',
|
|
||||||
commodityCodeType: 'MaerskCode',
|
|
||||||
},
|
|
||||||
searchForm: {},
|
|
||||||
shipData: [],
|
|
||||||
contractnoList: [],
|
|
||||||
shipList: [],
|
|
||||||
rules: {
|
|
||||||
cargoType: [{ required: true, message: '请选择货物标志', trigger: 'blur' }],
|
|
||||||
totalCargoWeight: [{ required: true, message: '请填写总重', trigger: 'blur' }],
|
|
||||||
commodityCodeType: [{ required: true, message: '请选择商品编码类型', trigger: 'blur' }],
|
|
||||||
goodsName: [{ required: true, message: '请选择商品', trigger: 'blur' }],
|
|
||||||
importServiceMode: [{ required: true, message: '请选择目的地运输条款', trigger: 'blur' }],
|
|
||||||
exportServiceMode: [{ required: true, message: '请选择始发地服务模式', trigger: 'blur' }],
|
|
||||||
sfcarrierGeoID: [{ required: true, message: '请选择始发地', trigger: 'blur' }],
|
|
||||||
mdsfcarrierGeoID: [{ required: true, message: '请选择目的地', trigger: 'blur' }],
|
|
||||||
carrierCode: [{ required: true, message: '请选择服务船公司', trigger: 'blur' }],
|
|
||||||
},
|
|
||||||
portloadList: [],
|
|
||||||
loading: false,
|
|
||||||
disabled: false,
|
|
||||||
fetching: false,
|
|
||||||
nodisabled: false,
|
|
||||||
goodsList: [],
|
|
||||||
goodsName: '',
|
|
||||||
portdischargeList: [],
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '箱型',
|
|
||||||
dataIndex: 'ctnCode',
|
|
||||||
width: '30%',
|
|
||||||
scopedSlots: { customRender: 'ctnCode' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '箱量',
|
|
||||||
dataIndex: 'ctnNum',
|
|
||||||
scopedSlots: { customRender: 'ctnNum' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '重量(KGS)',
|
|
||||||
dataIndex: 'ctnSufferWeight',
|
|
||||||
scopedSlots: { customRender: 'ctnSufferWeight' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'operation',
|
|
||||||
scopedSlots: { customRender: 'operation' },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
visible: false,
|
|
||||||
labelCol: { span: 6 },
|
|
||||||
cqLoading: false,
|
|
||||||
goodsFlag: false,
|
|
||||||
showFlag: false,
|
|
||||||
wrapperCol: { span: 18 },
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters(['bookingInitData', 'ctnallList']),
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
showFlag: {
|
|
||||||
deep: true,
|
|
||||||
handler(nVal, oVal) {
|
|
||||||
if (nVal) {
|
|
||||||
this.getContractnoList()
|
|
||||||
this.form = {
|
|
||||||
ctns: [],
|
|
||||||
isReefer: false,
|
|
||||||
productCode: 'MaerskContract',
|
|
||||||
carrierCode: 'MAEU',
|
|
||||||
isBookingPartOwnPrice: true,
|
|
||||||
importServiceMode: 'CY',
|
|
||||||
exportServiceMode: 'CY',
|
|
||||||
cargoType: 'DRY',
|
|
||||||
commodityCodeType: 'MaerskCode',
|
|
||||||
}
|
|
||||||
this.$forceUpdate()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'form.ctns': {
|
|
||||||
deep: true,
|
|
||||||
handler(nVal, oVal) {
|
|
||||||
let total = 0
|
|
||||||
nVal.forEach((item) => {
|
|
||||||
total += Number(item.ctnSufferWeight)
|
|
||||||
})
|
|
||||||
this.form.totalCargoWeight = total.toFixed(2)
|
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
|
||||||
handleOpenCQ() {
|
|
||||||
if (!this.form.earliestDepartureDate) {
|
|
||||||
this.$message.warning('请先选择预计离港日期')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (!this.form.sfcarrierGeoID || !this.form.mdsfcarrierGeoID) {
|
|
||||||
this.$message.warning('请先选择始发地和目的地')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
this.visible = true
|
|
||||||
this.cqLoading = true
|
|
||||||
const data = {
|
|
||||||
carrierId: 'MSK',
|
|
||||||
collectionOriginCityName: this.form.placeOfReceiptCityName,
|
|
||||||
collectionOriginCountryCode: this.form.sfcountryCode,
|
|
||||||
deliveryDestinationCityName: this.form.placeOfDeliveryCityName,
|
|
||||||
deliveryDestinationCountryCode: this.form.mdcountryCode,
|
|
||||||
cargoType: this.form.cargoType,
|
|
||||||
exportServiceMode: this.form.exportServiceMode,
|
|
||||||
importServiceMode: this.form.importServiceMode,
|
|
||||||
vesselOperatorCarrierCode: this.form.carrierCode,
|
|
||||||
startDate: this.form.earliestDepartureDate,
|
|
||||||
...this.searchForm,
|
|
||||||
}
|
|
||||||
SearchShipSailingSchedule(data).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
this.shipList = res.data
|
|
||||||
} else {
|
|
||||||
this.$message.error(res.message)
|
|
||||||
this.shipList = []
|
|
||||||
}
|
|
||||||
this.cqLoading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleChangePrice(val) {
|
|
||||||
if (val) {
|
|
||||||
this.form.cyfEmail = this.form.bookedByCompanyContactEmail
|
|
||||||
this.form.cyfContactName = this.form.bookedByCompanyContactName
|
|
||||||
this.form.cyfPartyCode = this.form.bookedByMaerskPartyCode
|
|
||||||
this.form.cyfCompanyName = this.form.bookedByCompanyName
|
|
||||||
} else {
|
|
||||||
this.form.cyfEmail = ''
|
|
||||||
this.form.cyfContactName = ''
|
|
||||||
this.form.cyfPartyCode = ''
|
|
||||||
this.form.cyfCompanyName = ''
|
|
||||||
}
|
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
|
||||||
handleSelectPrice(val) {
|
|
||||||
this.contractnoList.forEach((item) => {
|
|
||||||
if (item.id === val) {
|
|
||||||
this.form.bookedByCompanyContactEmail = item.contractLinkEmail
|
|
||||||
this.form.bookedByCompanyContactName = item.contractLinkName
|
|
||||||
this.form.bookedByMaerskPartyCode = item.contractPartyCode
|
|
||||||
this.form.bookedByCompanyName = item.contractPartyName
|
|
||||||
if (this.form.isBookingPartOwnPrice) {
|
|
||||||
this.form.cyfEmail = item.contractLinkEmail
|
|
||||||
this.form.cyfContactName = item.contractLinkName
|
|
||||||
this.form.cyfPartyCode = item.contractPartyCode
|
|
||||||
this.form.cyfCompanyName = item.contractPartyName
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
|
||||||
handleSelectPrice1(val) {
|
|
||||||
this.contractnoList.forEach((item) => {
|
|
||||||
if (item.id === val) {
|
|
||||||
this.form.cyfEmail = item.contractLinkEmail
|
|
||||||
this.form.cyfContactName = item.contractLinkName
|
|
||||||
this.form.cyfPartyCode = item.contractPartyCode
|
|
||||||
this.form.cyfCompanyName = item.contractPartyName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
|
||||||
handleSelectCQ(item) {
|
|
||||||
this.shipData = []
|
|
||||||
this.form.originDepartureDateTimeLocal = item.etd
|
|
||||||
this.form.destinationArrivalDateTimeLocal = item.atd
|
|
||||||
this.form.placeOfReceiptUnLocCode = item.orignUNLocationCode
|
|
||||||
this.form.placeOfDeliveryUnLocCode = item.deliveryUNLocationCode
|
|
||||||
this.shipData.push(item)
|
|
||||||
this.visible = false
|
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
|
||||||
handleSubimt() {
|
|
||||||
console.log(this.form)
|
|
||||||
this.$refs.form.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.form.carrierId = 'MSK'
|
|
||||||
if (!this.form.isBookingPartOwnPrice) {
|
|
||||||
if (!this.form.cyfPrice) {
|
|
||||||
this.$message.warning('请选择持约方合同')
|
|
||||||
return false
|
|
||||||
} else {
|
|
||||||
this.form.priceReference = this.form.cyfPrice
|
|
||||||
}
|
|
||||||
}
|
|
||||||
SendMSKBooking(this.form).then((res) => {})
|
|
||||||
} else {
|
|
||||||
console.log('error submit!!')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleSelect(val) {
|
|
||||||
this.portloadList.forEach((item) => {
|
|
||||||
if (item.carrierGeoID === val) {
|
|
||||||
this.form.sfcountryCode = item.countryCode
|
|
||||||
this.form.placeOfReceiptCityName = item.cityName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleSelect1(val) {
|
|
||||||
this.portdischargeList.forEach((item) => {
|
|
||||||
if (item.carrierGeoID === val) {
|
|
||||||
this.form.mdcountryCode = item.countryCode
|
|
||||||
this.form.placeOfDeliveryCityName = item.cityName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getSearchLocations(val) {
|
|
||||||
if (val.length >= 3) {
|
|
||||||
this.fetching = true
|
|
||||||
const data = {
|
|
||||||
cityName: val,
|
|
||||||
carrierId: 'MSK',
|
|
||||||
carrierCode: this.form.carrierCode,
|
|
||||||
}
|
|
||||||
SearchLocations(data).then((res) => {
|
|
||||||
this.portloadList = res.data
|
|
||||||
this.fetching = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getSearchLocations1(val) {
|
|
||||||
if (val.length >= 3) {
|
|
||||||
this.fetching = true
|
|
||||||
const data = {
|
|
||||||
cityName: val,
|
|
||||||
carrierId: 'MSK',
|
|
||||||
carrierCode: this.form.carrierCode,
|
|
||||||
}
|
|
||||||
SearchLocations(data).then((res) => {
|
|
||||||
this.portdischargeList = res.data
|
|
||||||
this.fetching = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSelectProduct() {
|
|
||||||
if (this.form.productCode === 'MaerskContract') {
|
|
||||||
this.nodisabled = false
|
|
||||||
} else {
|
|
||||||
this.nodisabled = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleChagneType() {
|
|
||||||
if (this.form.isReefer) {
|
|
||||||
this.disabled = false
|
|
||||||
} else {
|
|
||||||
this.disabled = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSelectGoods(item) {
|
|
||||||
this.goodsFlag = false
|
|
||||||
this.form.commodityCode = item.commodityCode
|
|
||||||
this.form.goodsName = item.commodityName
|
|
||||||
},
|
|
||||||
handleDeleteCtn(index) {
|
|
||||||
this.form.ctns.splice(index, 1)
|
|
||||||
},
|
|
||||||
handleAdd() {
|
|
||||||
const data = {
|
|
||||||
ctnCode: '',
|
|
||||||
ctnNum: 1,
|
|
||||||
ctnSufferWeight: 0,
|
|
||||||
}
|
|
||||||
this.form.ctns.push(data)
|
|
||||||
},
|
|
||||||
filterOption(input, option) {
|
|
||||||
return (
|
|
||||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
||||||
)
|
|
||||||
},
|
|
||||||
handleClick(val, index) {
|
|
||||||
this.goodsList[index].goodsType = val
|
|
||||||
this.$forceUpdate()
|
|
||||||
},
|
|
||||||
handleOpenSP() {
|
|
||||||
this.goodsFlag = true
|
|
||||||
},
|
|
||||||
getGoodsList() {
|
|
||||||
const data = {
|
|
||||||
carrierId: 'MSK',
|
|
||||||
commodityName: this.goodsName,
|
|
||||||
}
|
|
||||||
this.loading = true
|
|
||||||
SearchCommodities(data).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
if (this.form.cargoType) {
|
|
||||||
const arr = []
|
|
||||||
res.data.forEach((item) => {
|
|
||||||
if (item.cargoTypes.includes(this.form.cargoType)) {
|
|
||||||
arr.push(item)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
console.log(arr)
|
|
||||||
this.goodsList = arr
|
|
||||||
this.$forceUpdate()
|
|
||||||
} else {
|
|
||||||
this.goodsList = res.data
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.$message.error(res.message)
|
|
||||||
}
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getContractnoList() {
|
|
||||||
getContractno({ carrier: 'MSK' }).then((res) => {
|
|
||||||
this.contractnoList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getAutoViewRes({ type, res }) {
|
|
||||||
if (type === 'contractno') {
|
|
||||||
this.form.contractno = res.contractNo || ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
/deep/ .ant-form-item {
|
|
||||||
margin-bottom: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
color: black;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
border-bottom: 1px solid black;
|
|
||||||
padding-left: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
border: 1px black dashed;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 10px 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goodsType {
|
|
||||||
border: 1px black dashed;
|
|
||||||
padding: 3px;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border: 1px #23bb6e solid;
|
|
||||||
color: #23bb6e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-text {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-item {
|
|
||||||
border-right: 3px black solid;
|
|
||||||
margin-right: 25px;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
display: flex;
|
|
||||||
width: 20%;
|
|
||||||
margin-right: 15px;
|
|
||||||
|
|
||||||
.item-left {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue