订舱详情页输入卡顿问题

dev
lilu 2 years ago
parent c1491363cb
commit 0237840b11

@ -25,7 +25,7 @@
<a-tab-pane key="1-1" tab="基础信息">
<div class="pane-box">
<!-- 基本信息 -->
<basicInfo ref="basicInfo" :type="type" :details="bookingDetails" :rules="basicRules" @changeDetail="changeDetailFun"></basicInfo>
<basicInfo ref="basicInfo" :type="type" :details="bookingDetails" :rules="basicRules" :inPageLoading="inPageLoading" @changeDetail="changeDetailFun"></basicInfo>
<!-- 收发通信息 -->
<mailingInfo
ref="mailingInfo"

@ -3,7 +3,7 @@
<x-card>
<div slot="content" style="margin-top: -5px;">
<!-- <a-button type="primary" @click="checkbasic"> </a-button> -->
<a-form-model style="margin-bottom:10px;" ref="basicFrom" :model="details" :rules="rules">
<a-form-model style="margin-bottom:10px;" ref="basicFrom" :selfUpdate="true" :model="details" :rules="rules">
<a-row class="from-box" :gutter="10">
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
<a-form-model-item
@ -43,7 +43,8 @@
:labelCol="labelCol2"
:wrapperCol="wrapperCol2"
has-feedback>
<a-input :allowClear="true" v-model="details.mblno" :disabled="ishd" />
<inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="mblno" :disabled="ishd" @onValuesChange="inputChange('mblno')"/> -->
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@ -105,7 +106,8 @@
:wrapperCol="wrapperCol2"
has-feedback
prop="pono">
<a-input :allowClear="true" v-model="details.pono" />
<inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.pono" /> -->
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@ -117,7 +119,8 @@
has-feedback
prop="hblno"
>
<a-input :allowClear="true" v-model="details.hblno" />
<inputView type="hblno" :parentVal="details.hblno" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.hblno" /> -->
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@ -129,7 +132,8 @@
has-feedback
prop="bookingno"
>
<a-input :allowClear="true" v-model="details.bookingno" />
<inputView type="bookingno" :parentVal="details.bookingno" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.bookingno" /> -->
</a-form-model-item>
</a-col>
<template v-if="details.carrierid === 'ESL'">
@ -141,7 +145,8 @@
:wrapperCol="wrapperCol2"
has-feedback
prop="contractno">
<a-input :allowClear="true" v-model="details.contractno" />
<inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.contractno" /> -->
</a-form-model-item>
</a-col>
</template>
@ -176,7 +181,8 @@
</auto-complete>
</template>
<template v-else>
<a-input :allowClear="true" v-model="details.contractno" />
<inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.contractno" /> -->
</template>
</a-form-model-item>
</a-col>
@ -225,7 +231,8 @@
has-feedback
prop="lanecode"
>
<a-input :allowClear="true" v-model="details.lanecode" />
<inputView type="lanecode" :parentVal="details.lanecode" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.lanecode" /> -->
</a-form-model-item>
</a-col>
</template>
@ -239,7 +246,9 @@
has-feedback
prop="voynoinner"
>
<auto-complete
<!-- 内部航次暂无接口 暂时改为输入框避免卡顿 -->
<inputView type="voynoinner" :parentVal="details.voynoinner" @getInputChange="inputChange"/>
<!-- <auto-complete
:allowClear="true"
class="customer-input"
v-model="details.voynoinner"
@ -249,7 +258,7 @@
@select="voynoinnerSelect"
@change="voynoinnerChange"
@focus="voynoinnerChange"
/>
/> -->
</a-form-model-item>
</a-col>
</template>
@ -262,7 +271,8 @@
has-feedback
prop="voyno"
>
<a-input :allowClear="true" v-model="details.voyno" />
<inputView type="voyno" :parentVal="details.voyno" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.voyno" /> -->
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -278,7 +288,7 @@
<a-date-picker class="date-picker" format="YYYY-MM-DD" v-model="details.etd" @change="changeEtd">
<a-icon slot="suffixIcon" type="time" style="display: none" />
</a-date-picker>
<span class="week" v-if="etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
<span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
</div>
</a-form-model-item>
</a-col>
@ -308,7 +318,9 @@
:wrapperCol="wrapperCol"
has-feedback
prop="lanename">
<auto-complete
<!-- 航线暂无接口 暂时改为输入框避免卡顿 -->
<inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange"/>
<!-- <auto-complete
:allowClear="true"
class="customer-input"
v-model="details.lanename"
@ -318,7 +330,7 @@
@select="lanenameSelect"
@change="lanenameChange"
@focus="lanenameChange"
/>
/> -->
</a-form-model-item>
</a-col>
<a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@ -352,7 +364,8 @@
has-feedback
prop="contractno"
>
<a-input :allowClear="true" v-model="details.contractno" />
<inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.contractno" /> -->
</a-form-model-item>
</a-col>
</template>
@ -478,67 +491,6 @@
</template>
</vxe-toolbar>
<!-- <vxe-table
border
show-overflow
keep-source
ref="xTable"
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: true }"
:height="500"
>
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="name" title="联系人" :edit-render="{}">
<template #edit="{ row }">
<vxe-pulldown ref="xDown2">
<template #default>
<vxe-input
v-model="row.name"
@focus="focusEvent2(row.name)"
@keyup="keyupEvent2(row.name)"
></vxe-input>
</template>
<template #dropdown>
<vxe-list height="200" class="my-dropdown2" :data="customerContactsDataList" auto-resize>
<template #default="{ items }">
<div class="list-item2" v-for="item in items" :key="item.id" @click="selectEvent2(row, item)">
<span>{{ item.name }}</span>
</div>
</template>
</vxe-list>
</template>
</vxe-pulldown>
</template>
</vxe-column>
<vxe-column field="email" title="邮箱" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.email" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="tel" title="电话" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.tel" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="remark" title="备注" :edit-render="{}">
<template #edit="{ row }">
<vxe-input v-model="row.remark" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="roleCode" title="角色" :edit-render="{}">
<template #edit="{ row }">
<vxe-select v-model="row.roleCode" multiple clearable>
<vxe-option
v-for="item in ContactType"
:key="item.id"
:value="item.name"
:label="item.name"
></vxe-option>
</vxe-select>
</template>
</vxe-column>
</vxe-table> -->
<ve-table
borderY
:columns="columns"
@ -562,6 +514,7 @@
<script>
import { XCard } from '@/components'
import { AutoComplete } from 'ant-design-vue'
import inputView from './inputView'
import {
DjyCustomerpage,
DjyCustomerSuggest,
@ -580,7 +533,8 @@ export default {
name: 'BookingDetail',
components: {
XCard,
AutoComplete
AutoComplete,
inputView,
},
props: {
details: {
@ -598,6 +552,10 @@ export default {
default: () => {
return {}
}
},
inPageLoading: {
type: Boolean,
default: false
}
},
data() {
@ -898,6 +856,12 @@ export default {
detail: nval,
type: 'baseInfo'
})
console.log('== 数据更新 ==', nval.etd)
if (nval.etd) {
this.etdWeek = this.getWeek(nval.etd)
} else {
this.etdWeek = ''
}
},
deep: true
},
@ -921,6 +885,7 @@ export default {
resolve(true);
} else {
console.log('验证失败!');
// eslint-disable-next-line prefer-promise-reject-errors
reject(false);
}
});
@ -1022,6 +987,8 @@ export default {
this.getUserList('custservice')
if (this.details.etd) {
this.etdWeek = this.getWeek(this.details.etd)
} else {
this.etdWeek = ''
}
this.ContactType = this.$options.filters['dictData']('booking_contact_type')
},
@ -1046,6 +1013,7 @@ export default {
})
},
customerSelect(value) {
console.log('客户 - 这里点击更新了数据', value)
this.customerData.forEach(item => {
if (item.shortName == value) {
this.details.op = item.op
@ -1365,7 +1333,11 @@ export default {
},
// - end
changeEtd(date, dateString) {
this.details.etd = dateString
if (!dateString) {
this.details.etd = null
} else {
this.details.etd = dateString
}
this.etdWeek = this.getWeek(dateString)
},
getWeek(dateTime) {
@ -1417,8 +1389,13 @@ export default {
this.details.vessel = this.details.vessel ? this.details.vessel : ''
}
this.getContractno(value)
}
},
// - end
inputChange ({ type, value }) {
this.details[type] = value
console.log(this.details[type])
this.$forceUpdate()
}
}
}
</script>

@ -59,9 +59,9 @@
has-feedback
prop="issueplace"
>
<!-- 这里需要改成可输入 -->
<auto-complete
:allowClear="true"
:disabled="true"
:dropdown-match-select-width="false"
:dropdown-style="{ width: '200px'}"
v-model="details.issueplace"

@ -15,7 +15,8 @@
</div>
<a-form-model-item has-feedback prop="marks" class="textarea-label" label="">
<div class="bottom">
<a-textarea class="input-box" v-model="details.marks" @change="valueChange('marks')"/>
<!-- <textareaView id="notifyparty-scroll" :parentVal="details.notifyparty" type="notifyparty" @getTextareaChange="getTextareaChange"/> -->
<a-textarea class="input-box" v-model="details.marks" @blur="valueChange('marks')"/>
<div
class="line-count"
id="shipper-scroll-right"
@ -69,7 +70,7 @@
</div>
<a-form-model-item has-feedback prop="description" class="textarea-label" label="">
<div class="bottom">
<a-textarea class="input-box" v-model="details.description" @change="valueChange('description')"/>
<a-textarea class="input-box" v-model="details.description" @blur="valueChange('description')"/>
<div
class="line-count"
id="shipper-scroll-right"

@ -0,0 +1,60 @@
<template>
<a-input
:type="inputType"
:allowClear="true"
v-model="value"
@blur="inputBlur"
:disabled="ishd"
@change="inputChange"
/>
</template>
<script>
export default {
name: '',
props: {
parentVal: {
type: [String, Number],
default: '',
},
type: {
type: String,
default: '',
},
ishd: {
type: Boolean,
default: false,
},
inputType: {
type: String,
default: 'text',
},
},
data() {
return {
value: this.parentVal || '',
}
},
watch: {
parentVal(nval, oval) {
this.value = nval
},
},
mounted() {},
methods: {
inputBlur() {
this.$emit('getInputChange', {
type: this.type,
value: this.value
})
},
inputChange(e) {
if (e.type === 'click' && !this.value) {
this.$emit('getInputChange', {
type: this.type,
value: this.value
})
}
}
}
}
</script>

@ -35,14 +35,15 @@
</div>
</div>
<div class="bottom">
<a-textarea
<textareaView id="shipper-scroll" :parentVal="details.shipper" type="shipper" @getTextareaChange="getTextareaChange"/>
<!-- <a-textarea
id="shipper-scroll"
:defaultValue="details.shipper"
v-model="showShipper"
:auto-size="{ minRows: 2, maxRows: 5 }"
style="height: 120px"
@blur="textareaChange($event, 'shipper')"
/>
/> -->
<div
class="line-count"
id="shipper-scroll-right"
@ -78,14 +79,15 @@
</div>
</div>
<div class="bottom">
<a-textarea
<textareaView id="consignee-scroll" :parentVal="details.consignee" type="consignee" @getTextareaChange="getTextareaChange"/>
<!-- <a-textarea
id="consignee-scroll"
:defaultValue="details.consignee"
v-model="showConsignee"
:auto-size="{ minRows: 2, maxRows: 5 }"
style="height: 120px"
@blur="textareaChange($event, 'consignee')"
/>
/> -->
<div
class="line-count"
id="consignee-scroll-right"
@ -119,14 +121,15 @@
</div>
</div>
<div class="bottom">
<a-textarea
<textareaView id="notifyparty-scroll" :parentVal="details.notifyparty" type="notifyparty" @getTextareaChange="getTextareaChange"/>
<!-- <a-textarea
id="notifyparty-scroll"
:defaultValue="details.notifyparty"
:auto-size="{ minRows: 2, maxRows: 5 }"
style="height: 120px"
v-model="showNotifier"
@blur="textareaChange($event, 'notifyparty')"
/>
/> -->
<div
class="line-count"
id="notifyparty-scroll-right"
@ -256,7 +259,7 @@
has-feedback
prop="eta"
>
<a-date-picker format="YYYY-MM-DD" v-model="details.eta">
<a-date-picker format="YYYY-MM-DD" v-model="details.eta" @change="etaChange">
<a-icon slot="suffixIcon" type="time" style="display: none" />
</a-date-picker>
</a-form-model-item>
@ -352,7 +355,8 @@
has-feedback
prop="placereceipt"
>
<a-input :allowClear="true" v-model="details.placereceipt" />
<inputView type="placereceipt" :parentVal="details.placereceipt" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.placereceipt" /> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -386,7 +390,8 @@
has-feedback
prop="portload"
>
<a-input :allowClear="true" v-model="details.portload" />
<inputView type="portload" :parentVal="details.portload" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.portload" /> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -420,7 +425,8 @@
has-feedback
prop="transport"
>
<a-input :allowClear="true" v-model="details.transport" />
<inputView type="transport" :parentVal="details.transport" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.transport" /> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -454,7 +460,8 @@
has-feedback
prop="portdischarge"
>
<a-input :allowClear="true" v-model="details.portdischarge" />
<inputView type="portdischarge" :parentVal="details.portdischarge" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.portdischarge" /> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -488,7 +495,8 @@
has-feedback
prop="destination"
>
<a-input :allowClear="true" v-model="details.destination" />
<inputView type="destination" :parentVal="details.destination" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.destination" /> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -522,7 +530,8 @@
has-feedback
prop="placedelivery"
>
<a-input :allowClear="true" v-model="details.placedelivery" />
<inputView type="placedelivery" :parentVal="details.placedelivery" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.placedelivery" /> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -534,7 +543,8 @@
has-feedback
prop="pkgs"
>
<a-input :allowClear="true" v-model="details.pkgs" type="number" @change="changePkgs"/>
<inputView type="pkgs" :parentVal="details.pkgs" inputType="number" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.pkgs" type="number" @change="changePkgs"/> -->
</a-form-model-item>
</a-col>
<a-col :span="12">
@ -569,7 +579,9 @@
prop="kgs"
>
<div class="line-box">
<a-input :allowClear="true" v-model="details.kgs" /><span class="unit">KGS</span>
<inputView type="kgs" :parentVal="details.kgs" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.kgs" /> -->
<span class="unit">KGS</span>
</div>
</a-form-model-item>
</a-col>
@ -583,7 +595,9 @@
prop="cbm"
>
<div class="line-box">
<a-input :allowClear="true" v-model="details.cbm" /><span class="unit">CBM</span>
<inputView type="cbm" :parentVal="details.cbm" @getInputChange="inputChange"/>
<!-- <a-input :allowClear="true" v-model="details.cbm" /> -->
<span class="unit">CBM</span>
</div>
</a-form-model-item>
</a-col>
@ -669,7 +683,8 @@
<script>
import { XCard } from '@/components'
import { AutoComplete } from 'ant-design-vue'
import inputView from './inputView'
import textareaView from './textareaView'
import {
BookingTemplate,
GetYardlist,
@ -682,7 +697,9 @@ import {
export default {
components: {
XCard,
AutoComplete
AutoComplete,
textareaView,
inputView
},
props: {
details: {
@ -701,7 +718,6 @@ export default {
data() {
return {
senderInfo: 'Hope has always been like a young man, clean and pure.',
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
@ -1645,14 +1661,45 @@ export default {
if (a.length == 1 && a.substr(0, 1) != "0") strRet += arr3[a.substr(0, 1)];
return strRet
},
etaChange(date, dateString) {
// if (!dateString) {
// this.details.eta = null
// }
},
closingdateChange (date, dateString) {
this.details.closingdate = dateString
// if (!dateString) {
// this.details.closingdate = null
// } else {
this.details.closingdate = dateString + ':00'
// }
},
closevgmdateChange (date, dateString) {
this.details.closevgmdate = dateString
// if (!dateString) {
// this.details.closevgmdate = null
// } else {
this.details.closevgmdate = dateString + ':00'
// }
},
closedocdateChange (date, dateString) {
this.details.closedocdate = dateString
// if (!dateString) {
// this.details.closedocdate = null
// } else {
this.details.closedocdate = dateString + ':00'
// }
},
getTextareaChange ({ type, value }) {
console.log('== 输入框更新 ==', type, value)
this.details[type] = value
console.log(this.details[type])
this.$forceUpdate()
},
inputChange ({ type, value }) {
this.details[type] = value
console.log(this.details[type])
if (type === 'pkgs') {
this.changePkgs()
}
this.$forceUpdate()
}
}
}

@ -0,0 +1,51 @@
<template>
<a-textarea
v-model="value"
:auto-size="{ minRows: 2, maxRows: 5 }"
style="height: 120px"
@blur="textareaBlur"
@change="textareaChange"
/>
</template>
<script>
export default {
name: '',
props: {
parentVal: {
type: String,
default: ''
},
type: {
type: String,
default: ''
}
},
data() {
return {
value: this.parentVal || ''
}
},
watch: {
parentVal(nval, oval) {
this.value = nval
}
},
mounted() {},
methods: {
textareaBlur() {
this.$emit('getTextareaChange', {
type: this.type,
value: this.value
})
},
textareaChange(e) {
if (e.type === 'click' && !this.value) {
this.$emit('getTextareaChange', {
type: this.type,
value: this.value
})
}
}
}
}
</script>
Loading…
Cancel
Save