订舱详情页输入卡顿问题

src/views/main/BookingLedger/detail/index.vue

@@ -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"

src/views/main/BookingLedger/detail/modules/basicInfo.vue

@@ -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>

src/views/main/BookingLedger/detail/modules/billInfo.vue

@@ -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"

src/views/main/BookingLedger/detail/modules/cargoInfo.vue

@@ -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"

src/views/main/BookingLedger/detail/modules/inputView.vue

@@ -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>

src/views/main/BookingLedger/detail/modules/mailingInfo.vue

@@ -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()
     }
   }
 }

src/views/main/BookingLedger/detail/modules/textareaView.vue

@@ -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>