|
|
@@ -8,6 +8,7 @@ import NotShipment from './images/default_no_shipment@2x.png'
|
|
|
import submitsucessful from './images/icon_success_big@2x.png'
|
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const router = useRouter()
|
|
|
@@ -26,6 +27,7 @@ const VesselName = ref([])
|
|
|
const VesselNametest = ref('')
|
|
|
const ShipperValue = ref('')
|
|
|
const ConsigneeValue = ref('')
|
|
|
+const DeliveryReference = ref('')
|
|
|
const getAddressListData = ref({})
|
|
|
// const isFocused = ref(false)
|
|
|
const isFocused = ref({
|
|
|
@@ -221,48 +223,39 @@ const Countryloading = ref(false)
|
|
|
const city = ref<CountryItem[]>([])
|
|
|
const Cityoptions = ref<CountryItem[]>([])
|
|
|
const cityloading = ref(false)
|
|
|
-const getAddressCountryCityData = (type: any) => {
|
|
|
- $api
|
|
|
+const querySearchCountry = (query: string) => {
|
|
|
+ Countryloading.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ $api
|
|
|
.getAddressCountryCityData({
|
|
|
- term: '',
|
|
|
- term_type: type,
|
|
|
- limit: type == 'country' ? CityCode.value : CountryCode.value
|
|
|
+ term: query,
|
|
|
+ term_type: 'country',
|
|
|
+ limit: CityCode.value != '' ? CityCode.value : ''
|
|
|
})
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 200) {
|
|
|
- if (type == 'country') {
|
|
|
- countrys.value = res.data
|
|
|
- } else {
|
|
|
- city.value = res.data
|
|
|
- }
|
|
|
+ Countryoptions.value = res.data
|
|
|
+ Countryloading.value = false
|
|
|
}
|
|
|
})
|
|
|
-}
|
|
|
-const querySearchCountry = (query: string) => {
|
|
|
- if (query) {
|
|
|
- Countryloading.value = true
|
|
|
- setTimeout(() => {
|
|
|
- Countryloading.value = false
|
|
|
- Countryoptions.value = countrys.value.filter((item) => {
|
|
|
- return item.label.toLowerCase().includes(query.toLowerCase())
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- } else {
|
|
|
- Countryoptions.value = []
|
|
|
- }
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
const querySearchCity = (query: string) => {
|
|
|
- if (query) {
|
|
|
- cityloading.value = true
|
|
|
- setTimeout(() => {
|
|
|
- cityloading.value = false
|
|
|
- Cityoptions.value = city.value.filter((item) => {
|
|
|
- return item.label.toLowerCase().includes(query.toLowerCase())
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- } else {
|
|
|
- Cityoptions.value = []
|
|
|
- }
|
|
|
+ cityloading.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ $api
|
|
|
+ .getAddressCountryCityData({
|
|
|
+ term: query,
|
|
|
+ term_type: 'city',
|
|
|
+ limit: CountryCode.value != '' ? CountryCode.value : ''
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ Cityoptions.value = res.data
|
|
|
+ cityloading.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 1000)
|
|
|
}
|
|
|
// 特殊日期样式
|
|
|
const getCurrentStyle = (current: any) => {
|
|
|
@@ -317,15 +310,15 @@ const AddNewAddressDelivery = () => {
|
|
|
// 保存新地址
|
|
|
const SaveNewAddress = () => {
|
|
|
if (
|
|
|
+ CountryCode.value != '' &&
|
|
|
+ CityCode.value != '' &&
|
|
|
+ PostalCode.value != '' &&
|
|
|
+ ContactPerson.value != '' &&
|
|
|
+ ContactNumber.value != '' &&
|
|
|
AddressLine1.value != '' ||
|
|
|
AddressLine2.value != '' ||
|
|
|
AddressLine3.value != '' ||
|
|
|
- (AddressLine4.value != '' &&
|
|
|
- CountryCode.value != '' &&
|
|
|
- CityCode.value != '' &&
|
|
|
- PostalCode.value != '' &&
|
|
|
- ContactPerson.value != '' &&
|
|
|
- ContactNumber.value != '')
|
|
|
+ AddressLine4.value != ''
|
|
|
) {
|
|
|
const addressData = {
|
|
|
address_1: AddressLine1.value,
|
|
|
@@ -368,6 +361,11 @@ const SaveNewAddress = () => {
|
|
|
}
|
|
|
AddNewAddressVisible.value = false
|
|
|
currentEditAddress.value = null
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ message: 'Required fields not entered.',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
// 点击按钮
|
|
|
@@ -379,9 +377,9 @@ const changeAddressRadio = () => {
|
|
|
ManageVisible.value = false
|
|
|
if (Addressradio.value != undefined) {
|
|
|
isselectedAddress.value = Addressradio.value
|
|
|
+ selectedAddressList.value = ManageAddressList.value[Addressradio.value]
|
|
|
+ delivery_address = `${selectedAddressList.value.contact_person}(${selectedAddressList.value.contact_number})\n${selectedAddressList.value.address_1}\n${selectedAddressList.value.address_2}\n${selectedAddressList.value.address_3}\n${selectedAddressList.value.address_4},${selectedAddressList.value.country},${selectedAddressList.value.city},${selectedAddressList.value.postal_code}`
|
|
|
}
|
|
|
- selectedAddressList.value = ManageAddressList.value[Addressradio.value]
|
|
|
- delivery_address = `${selectedAddressList.value.contact_person}(${selectedAddressList.value.contact_number})\n${selectedAddressList.value.address_1}\n${selectedAddressList.value.address_2}\n${selectedAddressList.value.address_3}\n${selectedAddressList.value.address_4},${selectedAddressList.value.country},${selectedAddressList.value.city},${selectedAddressList.value.postal_code}`
|
|
|
}
|
|
|
// 页面初始化
|
|
|
let checkShipments = []
|
|
|
@@ -411,6 +409,7 @@ const getInitBookingData = () => {
|
|
|
DeliveryTime.value = res.data.data.delivery_time
|
|
|
Modification.value = res.data.data.modify_reason
|
|
|
selectedAddressList.value = res.data.data.delivery_address_detail
|
|
|
+ DeliveryReference.value = res.data.data.delivery_reference
|
|
|
isselectedAddress.value = ''
|
|
|
const sync_key = res.data.data.delivery_address_detail.sync_key
|
|
|
checkShipments = res.data.data.tableData.map((item) => ({
|
|
|
@@ -522,6 +521,7 @@ const getDateRangeArray = (startDateStr, endDateStr) => {
|
|
|
}
|
|
|
}
|
|
|
const selectChangeEvent = (val: any, date: any, submitInfo: any) => {
|
|
|
+ ManageAddressList.value = []
|
|
|
getAddressListData.value = { ...val }
|
|
|
checkShipmentsSubmitInfo.value = { ...submitInfo }
|
|
|
if (date.length != 0) {
|
|
|
@@ -670,6 +670,7 @@ const SubmitBooking = () => {
|
|
|
...checkShipmentsSubmitInfoData,
|
|
|
delivery_time: DeliveryTime.value,
|
|
|
delivery_mode: modetypeValue.value,
|
|
|
+ delivery_reference: DeliveryReference.value,
|
|
|
delivery_date: datetwo,
|
|
|
delivery_address: delivery_address,
|
|
|
special_requirements: Requirements.value,
|
|
|
@@ -936,6 +937,12 @@ onMounted(() => {
|
|
|
placeholder="Please Select Time"
|
|
|
></el-time-select>
|
|
|
</div>
|
|
|
+ <div style="margin-left: 12px;">
|
|
|
+ <div class="delivery_type_title">Delivery Reference</div>
|
|
|
+ <el-tooltip class="item" effect="dark" content="Reference to be quoted on arrival at the Warehouse/DC" placement="bottom">
|
|
|
+ <el-input v-model="DeliveryReference" class="delivery_reference"></el-input>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="delivery_type_title">Special Requirements</div>
|
|
|
<div class="flex" style="margin-top: 8px">
|
|
|
@@ -1148,7 +1155,6 @@ onMounted(() => {
|
|
|
v-model="CountryCode"
|
|
|
filterable
|
|
|
remote
|
|
|
- @focus="getAddressCountryCityData('country')"
|
|
|
placeholder="Select Country"
|
|
|
:remote-method="querySearchCountry"
|
|
|
:loading="Countryloading"
|
|
|
@@ -1168,7 +1174,6 @@ onMounted(() => {
|
|
|
v-model="CityCode"
|
|
|
filterable
|
|
|
remote
|
|
|
- @focus="getAddressCountryCityData('city')"
|
|
|
placeholder="Select City"
|
|
|
:remote-method="querySearchCity"
|
|
|
:loading="cityloading"
|
|
|
@@ -1599,6 +1604,12 @@ onMounted(() => {
|
|
|
:deep(.el-input__wrapper) {
|
|
|
height: 40px;
|
|
|
}
|
|
|
+.delivery_reference {
|
|
|
+ width: 240px;
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
.inputmargin {
|
|
|
margin: 4px 0 16px 0;
|
|
|
}
|
