|
|
|
@ -14,9 +14,9 @@
|
|
|
|
|
></datePickerView>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="labelData.type == 'dateRange'">
|
|
|
|
|
<div class="picker-box" style="display:flex;padding-right: 2px;">
|
|
|
|
|
<div class="picker-box" style="display: flex; padding-right: 2px">
|
|
|
|
|
<a-date-picker
|
|
|
|
|
style="min-width:30px; flex: 1;"
|
|
|
|
|
style="min-width: 30px; flex: 1"
|
|
|
|
|
v-model="startValue"
|
|
|
|
|
:disabled-date="disabledStartDate"
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
@ -24,9 +24,9 @@
|
|
|
|
|
placeholder="开始时间"
|
|
|
|
|
@openChange="handleStartOpenChange"
|
|
|
|
|
/>
|
|
|
|
|
<span style="margin:0 4px;">-</span>
|
|
|
|
|
<span style="margin: 0 4px">-</span>
|
|
|
|
|
<a-date-picker
|
|
|
|
|
style="min-width:30px;flex: 1;"
|
|
|
|
|
style="min-width: 30px; flex: 1"
|
|
|
|
|
v-model="endValue"
|
|
|
|
|
:disabled-date="disabledEndDate"
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
@ -40,7 +40,7 @@
|
|
|
|
|
<template v-else-if="labelData.type == 'select'">
|
|
|
|
|
<a-select
|
|
|
|
|
size="small"
|
|
|
|
|
style="margin-top:7px;"
|
|
|
|
|
style="margin-top: 7px"
|
|
|
|
|
v-model="value"
|
|
|
|
|
show-search
|
|
|
|
|
:dropdownMatchSelectWidth="false"
|
|
|
|
@ -49,12 +49,14 @@
|
|
|
|
|
@focus="getSelectFirst"
|
|
|
|
|
>
|
|
|
|
|
<template v-if="['CARRIER', 'YARDID', 'ISSUETYPE', 'CARGOID'].includes(labelData.label)">
|
|
|
|
|
<a-select-option v-for="(sitem,sindex) in dataList" :key="sindex">
|
|
|
|
|
<a-select-option v-for="(sitem, sindex) in dataList" :key="sindex">
|
|
|
|
|
{{ sitem[labelData.showLabel2] }}/ {{ sitem[labelData.showLabel] }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<a-select-option v-for="(sitem,sindex) in dataList" :key="sindex">{{ sitem[labelData.showLabel] }}</a-select-option>
|
|
|
|
|
<a-select-option v-for="(sitem, sindex) in dataList" :key="sindex">{{
|
|
|
|
|
sitem[labelData.showLabel]
|
|
|
|
|
}}</a-select-option>
|
|
|
|
|
</template>
|
|
|
|
|
</a-select>
|
|
|
|
|
</template>
|
|
|
|
@ -80,9 +82,14 @@
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</template>-->
|
|
|
|
|
<template slot="dataSource">
|
|
|
|
|
<a-select-option v-for="(item, index) in dataSourceList" :key="`${index}-${item[labelData.showLabel]}`" :value="`${index}-${item[labelData.showLabel]}`" :label="item[labelData.showLabel]">
|
|
|
|
|
<a-select-option
|
|
|
|
|
v-for="(item, index) in dataSourceList"
|
|
|
|
|
:key="`${index}-${item[labelData.showLabel]}`"
|
|
|
|
|
:value="`${index}-${item[labelData.showLabel]}`"
|
|
|
|
|
:label="item[labelData.showLabel]"
|
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="title"> {{ item[labelData.showLabel] }} </div>
|
|
|
|
|
<div class="title">{{ item[labelData.showLabel] }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</template>
|
|
|
|
@ -95,7 +102,7 @@ import { AutoComplete } from 'ant-design-vue'
|
|
|
|
|
import inputView from '../components/inputView'
|
|
|
|
|
import datePickerView from '../components/datePickerView'
|
|
|
|
|
import { mapGetters } from 'vuex'
|
|
|
|
|
let timer;
|
|
|
|
|
let timer
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
AutoComplete,
|
|
|
|
@ -127,7 +134,7 @@ export default {
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
resetType (nval, oval) {
|
|
|
|
|
resetType(nval, oval) {
|
|
|
|
|
if (!nval) {
|
|
|
|
|
this.value = ''
|
|
|
|
|
this.dateVal = []
|
|
|
|
@ -141,11 +148,15 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
startValue(val) {
|
|
|
|
|
if (!this.resetType) { return false }
|
|
|
|
|
if (!this.resetType) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
this.getDateRangeRes()
|
|
|
|
|
},
|
|
|
|
|
endValue(val) {
|
|
|
|
|
if (!this.resetType) { return false }
|
|
|
|
|
if (!this.resetType) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
this.getDateRangeRes()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
@ -161,15 +172,24 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapGetters(['carrierList', 'ctnallList', 'yardList', 'packageList', 'issuetypeList', 'blfrtList', 'lineList', 'bookingInitData'])
|
|
|
|
|
...mapGetters([
|
|
|
|
|
'carrierList',
|
|
|
|
|
'ctnallList',
|
|
|
|
|
'yardList',
|
|
|
|
|
'packageList',
|
|
|
|
|
'issuetypeList',
|
|
|
|
|
'blfrtList',
|
|
|
|
|
'lineList',
|
|
|
|
|
'bookingInitData'
|
|
|
|
|
])
|
|
|
|
|
},
|
|
|
|
|
mounted() { },
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
debounce (func, wait, ...args) {
|
|
|
|
|
if (timer) clearTimeout(timer);
|
|
|
|
|
debounce(func, wait, ...args) {
|
|
|
|
|
if (timer) clearTimeout(timer)
|
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
|
func.apply(this, args);
|
|
|
|
|
}, wait);
|
|
|
|
|
func.apply(this, args)
|
|
|
|
|
}, wait)
|
|
|
|
|
},
|
|
|
|
|
changeInput(data) {
|
|
|
|
|
this.$emit('change', {
|
|
|
|
@ -184,28 +204,28 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
disabledStartDate(startValue) {
|
|
|
|
|
const endValue = this.endValue;
|
|
|
|
|
const endValue = this.endValue
|
|
|
|
|
if (!startValue || !endValue) {
|
|
|
|
|
return false;
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
return startValue.valueOf() > endValue.valueOf();
|
|
|
|
|
return startValue.valueOf() > endValue.valueOf()
|
|
|
|
|
},
|
|
|
|
|
disabledEndDate(endValue) {
|
|
|
|
|
const startValue = this.startValue;
|
|
|
|
|
const startValue = this.startValue
|
|
|
|
|
if (!endValue || !startValue) {
|
|
|
|
|
return false;
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
return startValue.valueOf() >= endValue.valueOf();
|
|
|
|
|
return startValue.valueOf() >= endValue.valueOf()
|
|
|
|
|
},
|
|
|
|
|
handleStartOpenChange(open) {
|
|
|
|
|
if (!open) {
|
|
|
|
|
this.endOpen = true;
|
|
|
|
|
this.endOpen = true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleEndOpenChange(open) {
|
|
|
|
|
this.endOpen = open;
|
|
|
|
|
this.endOpen = open
|
|
|
|
|
},
|
|
|
|
|
getDateRangeRes () {
|
|
|
|
|
getDateRangeRes() {
|
|
|
|
|
const start = this.startValue ? this.formatDate(this.startValue._d).substr(0, 10) : ''
|
|
|
|
|
const end = this.endValue ? this.formatDate(this.endValue._d).substr(0, 10) : ''
|
|
|
|
|
const date = [start, end]
|
|
|
|
@ -214,43 +234,55 @@ export default {
|
|
|
|
|
value: date
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
formatDate (now) {
|
|
|
|
|
formatDate(now) {
|
|
|
|
|
var date = new Date(now)
|
|
|
|
|
var y = date.getFullYear()
|
|
|
|
|
var m = date.getMonth() + 1
|
|
|
|
|
if (m < 10) {
|
|
|
|
|
m = '0' + m;
|
|
|
|
|
m = '0' + m
|
|
|
|
|
}
|
|
|
|
|
var d = date.getDate()
|
|
|
|
|
if (d < 10) {
|
|
|
|
|
d = '0' + d;
|
|
|
|
|
d = '0' + d
|
|
|
|
|
}
|
|
|
|
|
var h = date.getHours()
|
|
|
|
|
if (h < 10) {
|
|
|
|
|
h = '0' + h;
|
|
|
|
|
h = '0' + h
|
|
|
|
|
}
|
|
|
|
|
var min = date.getMinutes()
|
|
|
|
|
if (min < 10) {
|
|
|
|
|
min = '0' + min;
|
|
|
|
|
min = '0' + min
|
|
|
|
|
}
|
|
|
|
|
var s = date.getSeconds()
|
|
|
|
|
if (s < 10) {
|
|
|
|
|
s = '0' + s;
|
|
|
|
|
s = '0' + s
|
|
|
|
|
}
|
|
|
|
|
return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
filterOption(input, option) {
|
|
|
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
|
},
|
|
|
|
|
handleSelectChange (e) {
|
|
|
|
|
handleSelectChange(e) {
|
|
|
|
|
this.$emit('change', {
|
|
|
|
|
form: this.labelData,
|
|
|
|
|
value: this.dataList[e][this.labelData.showLabel]
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getSelectFirst (e) {
|
|
|
|
|
getSelectFirst(e) {
|
|
|
|
|
if (!e) {
|
|
|
|
|
if (['LINENAME', 'CNTRTOTAL', 'KINDPKGS', 'ISSUETYPE', 'YARDID', 'CARRIER', 'NOBILL', 'CARGOID'].includes(this.labelData.label)) {
|
|
|
|
|
if (
|
|
|
|
|
[
|
|
|
|
|
'LINENAME',
|
|
|
|
|
'CNTRTOTAL',
|
|
|
|
|
'KINDPKGS',
|
|
|
|
|
'ISSUETYPE',
|
|
|
|
|
'YARDID',
|
|
|
|
|
'CARRIER',
|
|
|
|
|
'NOBILL',
|
|
|
|
|
'CARGOID',
|
|
|
|
|
'zhanCangFlag'
|
|
|
|
|
].includes(this.labelData.label)
|
|
|
|
|
) {
|
|
|
|
|
this.dataList = this.emnuData(this.labelData.label)
|
|
|
|
|
} else {
|
|
|
|
|
this.$emit('selectFirst', {
|
|
|
|
@ -261,7 +293,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
emnuData (type) {
|
|
|
|
|
emnuData(type) {
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'LINENAME':
|
|
|
|
|
return this.lineList
|
|
|
|
@ -279,16 +311,18 @@ export default {
|
|
|
|
|
return this.labelData.data
|
|
|
|
|
case 'CARGOID':
|
|
|
|
|
return this.labelData.data
|
|
|
|
|
case 'zhanCangFlag':
|
|
|
|
|
return this.labelData.data
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
completeSelect (value) {
|
|
|
|
|
completeSelect(value) {
|
|
|
|
|
const val = value.split('-')[1]
|
|
|
|
|
this.$emit('change', {
|
|
|
|
|
form: this.labelData,
|
|
|
|
|
value: val || ''
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
completeChange (value) {
|
|
|
|
|
completeChange(value) {
|
|
|
|
|
const val = value ? value.split('-')[1] : ''
|
|
|
|
|
let res = val || value || ''
|
|
|
|
|
this.$emit('change', {
|
|
|
|
@ -300,13 +334,34 @@ export default {
|
|
|
|
|
value: value.includes('-') ? val || '' : value || ''
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
completeChangeFirst (value) {
|
|
|
|
|
if (this.value) { return false }
|
|
|
|
|
let label, arr;
|
|
|
|
|
if (['CUSTOMERNAME', 'FORWARDER', 'SALE', 'CUSTSERVICE', 'OP', 'DOC', 'ROUTE', 'PAYABLEAT', 'ISSUEPLACE', 'PREPARDAT', 'SERVICE', 'TRUCKER', 'SHIPAGENCY', 'CUSTOMSER'].includes(this.labelData.label)) {
|
|
|
|
|
completeChangeFirst(value) {
|
|
|
|
|
if (this.value) {
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
let label, arr
|
|
|
|
|
if (
|
|
|
|
|
[
|
|
|
|
|
'CUSTOMERNAME',
|
|
|
|
|
'FORWARDER',
|
|
|
|
|
'SALE',
|
|
|
|
|
'CUSTSERVICE',
|
|
|
|
|
'OP',
|
|
|
|
|
'DOC',
|
|
|
|
|
'ROUTE',
|
|
|
|
|
'PAYABLEAT',
|
|
|
|
|
'ISSUEPLACE',
|
|
|
|
|
'PREPARDAT',
|
|
|
|
|
'SERVICE',
|
|
|
|
|
'TRUCKER',
|
|
|
|
|
'SHIPAGENCY',
|
|
|
|
|
'CUSTOMSER'
|
|
|
|
|
].includes(this.labelData.label)
|
|
|
|
|
) {
|
|
|
|
|
label = this.labelData.label.toLowerCase()
|
|
|
|
|
arr = this.bookingInitData[`${label}InitList`]
|
|
|
|
|
} else if (['PORTDISCHARGE', 'PORTLOAD', 'PLACERECEIPT', 'DESTINATION', 'PLACEDELIVERY'].includes(this.labelData.label)) {
|
|
|
|
|
} else if (
|
|
|
|
|
['PORTDISCHARGE', 'PORTLOAD', 'PLACERECEIPT', 'DESTINATION', 'PLACEDELIVERY'].includes(this.labelData.label)
|
|
|
|
|
) {
|
|
|
|
|
label = this.labelData.label.toLowerCase() + 'id'
|
|
|
|
|
arr = this.bookingInitData[`${label}InitList`]
|
|
|
|
|
} else if (['PLACERECEIPT', 'DESTINATION', 'PLACEDELIVERY'].includes(this.labelData.label)) {
|
|
|
|
@ -328,34 +383,35 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
inputChange (data) {
|
|
|
|
|
inputChange(data) {
|
|
|
|
|
this.changeInput(data)
|
|
|
|
|
},
|
|
|
|
|
dateChangeFun (data) {
|
|
|
|
|
dateChangeFun(data) {
|
|
|
|
|
this.changeDate(data)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.aa{
|
|
|
|
|
transform: scaleY(.8);
|
|
|
|
|
.aa {
|
|
|
|
|
transform: scaleY(0.8);
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-select-selection__clear{
|
|
|
|
|
/deep/ .ant-select-selection__clear {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
.vessel-label{
|
|
|
|
|
.vessel-label {
|
|
|
|
|
// border-bottom:1px solid #eee;
|
|
|
|
|
.title{
|
|
|
|
|
.title {
|
|
|
|
|
height: 28px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight:600;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #666;
|
|
|
|
|
border-bottom:1px dashed #ddd;
|
|
|
|
|
border-bottom: 1px dashed #ddd;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
.voyno, .etd {
|
|
|
|
|
.voyno,
|
|
|
|
|
.etd {
|
|
|
|
|
height: 22px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
@ -363,14 +419,14 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.ant-calendar-picker-input{
|
|
|
|
|
/deep/.ant-calendar-picker-input {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-calendar-range-picker-input{
|
|
|
|
|
/deep/.ant-calendar-range-picker-input {
|
|
|
|
|
height: 24px !important;
|
|
|
|
|
line-height: 24px !important;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-input{
|
|
|
|
|
/deep/ .ant-input {
|
|
|
|
|
height: 24px !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|