修改输入框 + 搜索输入防抖

src/views/main/BookingLedger/detail/components/basicItem.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="booking-detail">
-    <!-- 基本信息 -->
-    <basicInfo :type="type"></basicInfo>
-    <!-- 收发通信息 -->
-    <mailingInfo></mailingInfo>
-    <!-- 货物信息 -->
-    <cargoInfo></cargoInfo>
-    <!-- 签单信息 -->
-    <billInfo></billInfo>
-    <!-- 备注信息 -->
-    <remarksInfo></remarksInfo>
-    <!-- 箱型 -->
-    <goodsTable></goodsTable>
-  </div>
-</template>
-  <script>
-import basicInfo from '../modules/basicInfo'
-import mailingInfo from '../modules/mailingInfo'
-import cargoInfo from '../modules/cargoInfo'
-import billInfo from '../modules/billInfo'
-import remarksInfo from '../modules/remarksInfo'
-import goodsTable from '../modules/goodsTable'
-export default {
-  components: {
-    basicInfo,
-    mailingInfo,
-    cargoInfo,
-    billInfo,
-    remarksInfo,
-    goodsTable
-  },
-  props: {
-    type: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  created() {},
-  methods: {
-
-  }
-}
-</script>
-<style lang="less">
-.base-tit {
-  font-size: 14px;
-  font-weight: 600;
-  color: #666;
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    width: 3px;
-    height: 30px;
-    background: #ccc;
-    top: 0;
-    left: 0;
-  }
-  i {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
-</style>

src/views/main/BookingLedger/detail/components/ediMore.vue

@@ -11,7 +11,8 @@
               has-feedback
               prop="bookingEDIExt.sendCode"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.sendCode" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.sendCode" /> -->
+              <inputView type="sendCode" :parentVal="details.sendCode" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -22,20 +23,10 @@
               has-feedback
               prop="bookingEDIExt.receiveCode"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.receiveCode" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.receiveCode" /> -->
+              <inputView type="receiveCode" :parentVal="details.bookingEDIExt.receiveCode" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
-          <!-- <a-col :span="8">
-            <a-form-model-item
-              label="销售EDI代码"
-              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
-              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-              has-feedback
-              prop="bookingEDIExt.salerCode"
-            >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.salerCode" />
-            </a-form-model-item>
-          </a-col> -->
           <a-col :span="8">
             <a-form-model-item
               label="EDI联系人名称"
@@ -44,7 +35,8 @@
               has-feedback
               prop="bookingEDIExt.ediAttn"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttn" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttn" /> -->
+              <inputView type="ediAttn" :parentVal="details.bookingEDIExt.ediAttn" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -55,7 +47,8 @@
               has-feedback
               prop="bookingEDIExt.ediAttnTel"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttnTel" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttnTel" /> -->
+              <inputView type="ediAttnTel" :parentVal="details.bookingEDIExt.ediAttnTel" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -66,7 +59,8 @@
               has-feedback
               prop="bookingEDIExt.ediAttnMail"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttnMail" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttnMail" /> -->
+              <inputView type="ediAttnMail" :parentVal="details.bookingEDIExt.ediAttnMail" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -77,7 +71,8 @@
               has-feedback
               prop="bookingEDIExt.amsConsignee"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.amsConsignee" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.amsConsignee" /> -->
+              <inputView type="amsConsignee" :parentVal="details.bookingEDIExt.amsConsignee" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -88,7 +83,8 @@
               has-feedback
               prop="bookingEDIExt.amsNotifyParty"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.amsNotifyParty" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.amsNotifyParty" /> -->
+              <inputView type="amsNotifyParty" :parentVal="details.bookingEDIExt.amsNotifyParty" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -99,7 +95,8 @@
               has-feedback
               prop="bookingEDIExt.opEName"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.opEName" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.opEName" /> -->
+              <inputView type="opEName" :parentVal="details.bookingEDIExt.opEName" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -110,7 +107,8 @@
               has-feedback
               prop="bookingEDIExt.opTel"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.opTel" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.opTel" /> -->
+              <inputView type="opTel" :parentVal="details.bookingEDIExt.opTel" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -121,7 +119,8 @@
               has-feedback
               prop="bookingEDIExt.opEmail"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.opEmail" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.opEmail" /> -->
+              <inputView type="opEmail" :parentVal="details.bookingEDIExt.opEmail" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -132,7 +131,8 @@
               has-feedback
               prop="bookingEDIExt.goodsName"
             >
-              <a-input :allowClear="true" v-model="details.bookingEDIExt.goodsName" />
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.goodsName" /> -->
+              <inputView type="goodsName" :parentVal="details.bookingEDIExt.goodsName" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -157,7 +157,8 @@
               has-feedback
               prop="scaccode"
             >
-              <a-input :allowClear="true" v-model="details.scaccode" />
+              <!-- <a-input :allowClear="true" v-model="details.scaccode" /> -->
+              <inputView type="scaccode" :parentVal="details.scaccode" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -168,7 +169,8 @@
               has-feedback
               prop="itncode"
             >
-              <a-input :allowClear="true" v-model="details.itncode" />
+              <!-- <a-input :allowClear="true" v-model="details.itncode" /> -->
+              <inputView type="itncode" :parentVal="details.itncode" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="8">
@@ -179,7 +181,8 @@
               has-feedback
               prop="bookingEDIExt.orderRemark"
             >
-              <a-input v-model="details.bookingEDIExt.orderRemark" />
+              <!-- <a-input v-model="details.bookingEDIExt.orderRemark" /> -->
+              <inputView type="orderRemark" :parentVal="details.bookingEDIExt.orderRemark" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="23">
@@ -190,7 +193,8 @@
               has-feedback
               prop="freightpayer"
             >
-              <a-input :allowClear="true" v-model="details.freightpayer" />
+              <!-- <a-input :allowClear="true" v-model="details.freightpayer" /> -->
+              <inputView type="freightpayer" :parentVal="details.bookingEDIExt.freightpayer" @getInputChange="inputChange"/>
             </a-form-model-item>
           </a-col>
           <a-col :span="23">
@@ -273,7 +277,8 @@
                 has-feedback
                 prop="bookingEDIExt.consigneeEdiCode"
               >
-                <a-input :allowClear="true" v-model="details.bookingEDIExt.consigneeEdiCode" />
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.consigneeEdiCode" /> -->
+                <inputView type="consigneeEdiCode" :parentVal="details.bookingEDIExt.consigneeEdiCode" @getInputChange="inputChange"/>
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
@@ -284,7 +289,8 @@
                 has-feedback
                 prop="bookingEDIExt.shipperEdiCode"
               >
-                <a-input :allowClear="true" v-model="details.bookingEDIExt.shipperEdiCode" />
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.shipperEdiCode" /> -->
+                <inputView type="shipperEdiCode" :parentVal="details.bookingEDIExt.shipperEdiCode" @getInputChange="inputChange"/>
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
@@ -295,7 +301,8 @@
                 has-feedback
                 prop="bookingEDIExt.notifyCdoe"
               >
-                <a-input :allowClear="true" v-model="details.bookingEDIExt.notifyCdoe" />
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.notifyCdoe" /> -->
+                <inputView type="notifyCdoe" :parentVal="details.bookingEDIExt.notifyCdoe" @getInputChange="inputChange"/>
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
@@ -321,7 +328,8 @@
                 has-feedback
                 prop="bookingEDIExt.emanifestHbl"
               >
-                <a-input :allowClear="true" v-model="details.bookingEDIExt.emanifestHbl" />
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.emanifestHbl" /> -->
+                <inputView type="emanifestHbl" :parentVal="details.bookingEDIExt.emanifestHbl" @getInputChange="inputChange"/>
               </a-form-model-item>
             </a-col>
             <a-col :span="12">
@@ -395,7 +403,8 @@
                 has-feedback
                 prop="bookingEDIExt.acihbl"
               >
-                <a-input :allowClear="true" v-model="details.bookingEDIExt.acihbl" />
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.acihbl" /> -->
+                <inputView type="acihbl" :parentVal="details.bookingEDIExt.acihbl" @getInputChange="inputChange"/>
               </a-form-model-item>
             </a-col>
           </a-row>
@@ -406,7 +415,12 @@
   </div>
 </template>
 <script>
+import inputView from '../modules/inputView'
+let timer;
 export default {
+  components: {
+    inputView
+  },
   props: {
     details: {
       type: Object,
@@ -474,6 +488,12 @@ export default {
     this.iscontainersoc = this.details.iscontainersoc ? '1' : '0'
   },
   methods: {
+    debounce (func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
     checkbasic () {
       this.$refs.ediFrom.validate(valid => {
         if (valid) {
@@ -490,6 +510,17 @@ export default {
     handleSaleChange (val) {
       this.details.bookingEDIExt.salerCode = val.split('|')[0]
       this.details.bookingEDIExt.salerCodeName = val.split('|')[1]
+    },
+    inputChange ({ type, value }) {
+      const bookingEDIExtArr = ['receiveCode', 'ediAttn', 'ediAttnTel', 'ediAttnMail', 'amsConsignee', 'amsNotifyParty', 'opEName', 'opTel', 'opEmail', 'goodsName', 'orderRemark', 'freightpayer', 'consigneeEdiCode', 'shipperEdiCode', 'notifyCdoe', 'emanifestHbl', 'acihbl']
+      if (bookingEDIExtArr.includes(type)) {
+        this.details.bookingEDIExt[type] = value
+        console.log(this.details.bookingEDIExt[type])
+      } else {
+        this.details[type] = value
+        console.log(this.details[type])
+      }
+      this.$forceUpdate()
     }
   }
 }

src/views/main/BookingLedger/detail/components/sedOrder.vue

@@ -100,7 +100,7 @@ import cargoInfo from '../modules/cargoInfo'
 import billInfo from '../modules/billInfo'
 import remarksInfo from '../modules/remarksInfo'
 import goodsTable from '../modules/goodsTable'
-import basicItem from './basicItem'
+// import basicItem from './basicItem'
 import ediMore from './ediMore'
 
 import { BookingOrderUpdate, BookingOrderAdd } from '@/api/modular/main/BookingLedger'
@@ -142,7 +142,7 @@ export default {
     billInfo,
     remarksInfo,
     goodsTable,
-    basicItem,
+    // basicItem,
     ediMore
   },
   data() {

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

@@ -134,7 +134,7 @@ import billInfo from './modules/billInfo'
 import remarksInfo from './modules/remarksInfo'
 import goodsTable from './modules/goodsTable'
 import rightContent from './modules/rightContent'
-import basicItem from './components/basicItem'
+// import basicItem from './components/basicItem'
 import ediMore from './components/ediMore'
 import sedOrder from './components/sedOrder'
 
@@ -262,7 +262,7 @@ export default {
     remarksInfo,
     goodsTable,
     rightContent,
-    basicItem,
+    // basicItem,
     ediMore,
     sedOrder
   },

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

@@ -22,8 +22,8 @@
                     v-model="details.customername"
                     :data-source="customerDataArr"
                     @select="customerSelect"
-                    @change="customerChange"
                     @focus="customerChange"
+                    @change="debounce(customerChange, 300, $event)"
                   >
                   </auto-complete>
                   <span
@@ -45,6 +45,7 @@
                 has-feedback>
                 <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange"/>
                 <!-- <a-input :allowClear="true" v-model="mblno" :disabled="ishd" @onValuesChange="inputChange('mblno')"/> -->
+                <!-- <input type="text" class="ant-input" v-model="details.mblno" :disabled="ishd"> -->
               </a-form-model-item>
             </a-col>
             <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@@ -64,7 +65,7 @@
                 /> -->
                 <a-select
                   v-model="details.carrierid"
-                  @change="handleCarrierChange"
+                  @change="debounce(handleCarrierChange, 300, $event)"
                   show-search
                   :dropdownMatchSelectWidth="false"
                   :filter-option="filterOption"
@@ -92,7 +93,7 @@
                   v-model="details.forwarder"
                   :data-source="forwarderDataArr"
                   @select="forwarderSelect"
-                  @change="forwarderChange"
+                  @change="debounce(forwarderChange, 300, $event)"
                   @focus="forwarderChange"
                 />
                 <!-- <a-input  :allowClear="true"   v-model="details.forwarder" /> -->
@@ -167,7 +168,7 @@
                       :dropdown-style="{ width: '200px' }"
                       v-model="details.contractno"
                       @select="contractnoSelect"
-                      @change="contractnoChange"
+                      @change="debounce(contractnoChange, 300, $event)"
                       @focus="contractnoChange"
                     >
                       <template slot="dataSource">
@@ -206,7 +207,7 @@
                     :dropdown-style="{ width: '200px' }"
                     option-label-prop="value"
                     @select="vesselSelect"
-                    @change="vesselChange"
+                    @change="debounce(vesselChange, 300, $event)"
                     @focus="vesselChange"
                   >
                     <template slot="dataSource">
@@ -366,7 +367,7 @@
                     :dropdown-match-select-width="false"
                     :dropdown-style="{ width: '200px' }"
                     @select="shipagencySelect"
-                    @change="shipagencyChange"
+                    @change="debounce(shipagencyChange, 300, $event)"
                     @focus="shipagencyChange"
                   />
                 </a-form-model-item>
@@ -406,7 +407,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px' }"
                   @select="saleSelect"
-                  @change="saleChange"
+                  @change="debounce(saleChange, 300, $event)"
                   @focus="saleChange"
                 />
               </a-form-model-item>
@@ -428,7 +429,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px' }"
                   @select="opSelect"
-                  @change="opChange"
+                  @change="debounce(opChange, 300, $event)"
                   @focus="opChange"
                 />
               </a-form-model-item>
@@ -450,7 +451,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px' }"
                   @select="docSelect"
-                  @change="docChange"
+                  @change="debounce(docChange, 300, $event)"
                   @focus="docChange"
                 />
               </a-form-model-item>
@@ -467,13 +468,13 @@
                 <auto-complete
                   :allowClear="true"
                   class="customer-input"
-                  v-model="details.custservice"
-                  :data-source="custserviceUserListArr"
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px' }"
+                  v-model="details.custservice"
+                  :data-source="custserviceUserListArr"
                   @select="custserviceSelect"
-                  @change="custserviceChange"
                   @focus="custserviceChange"
+                  @change="debounce(custserviceChange, 300, $event)"
                 />
               </a-form-model-item>
             </a-col>
@@ -547,6 +548,7 @@ import {
   DjyCustomerContacts
 } from '@/api/modular/main/BookingLedger'
 
+let timer;
 export default {
   name: 'BookingDetail',
   components: {
@@ -928,6 +930,12 @@ export default {
     this.init()
   },
   methods: {
+    debounce (func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
     checkbasic () {
       return new Promise((resolve, reject) => {
         this.$refs.basicFrom.validate(valid => {
@@ -1266,11 +1274,13 @@ export default {
 
     // 销售
     saleSelect(value) {
+      console.log('销售选中', value)
       this.details.sale = value
       const index = this.saleUserListArr.indexOf(value)
       this.details.saleid = this.saleUserList[index].id
     },
     saleChange(value) {
+      console.log('销售搜索内容： ', value)
       if (!value) {
         this.details.sale = this.details.sale ? this.details.sale : ''
       }

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

@@ -27,7 +27,7 @@
                 <a-select
                   class="customer-input"
                   v-model="details.issuetype"
-                  @change="handleIssuetypeChange"
+                  @change="debounce(handleIssuetypeChange, 300, $event)"
                   show-search
                   :filter-option="filterOption"
                   :dropdownMatchSelectWidth="false"
@@ -67,7 +67,7 @@
                   v-model="details.issueplace"
                   :data-source="issueplaceDataArr"
                   @select="issueplaceSelect"
-                  @change="issueplaceChange"
+                  @change="debounce(issueplaceChange, 300, $event)"
                   @focus="issueplaceChange"
                 />
               </a-form-model-item>
@@ -146,7 +146,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px'}"
                   @select="prepardatSelect"
-                  @change="prepardatChange"
+                  @change="debounce(prepardatChange, 300, $event)"
                   @focus="prepardatChange"
                 />
               </a-form-model-item>
@@ -167,7 +167,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px'}"
                   @select="payableatSelect"
-                  @change="payableatChange"
+                  @change="debounce(payableatChange, 300, $event)"
                   @focus="payableatChange"
                 />
               </a-form-model-item>
@@ -188,7 +188,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px'}"
                   @select="blfrtSelect"
-                  @change="blfrtChange"
+                  @change="debounce(blfrtChange, 300, $event)"
                   @focus="blfrtChange"
                 />
               </a-form-model-item>
@@ -221,7 +221,7 @@
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px'}"
                   @select="serviceSelect"
-                  @change="serviceChange"
+                  @change="debounce(serviceChange, 300, $event)"
                   @focus="serviceChange"
                 />
               </a-form-model-item>
@@ -369,6 +369,7 @@
 import { AutoComplete } from 'ant-design-vue'
 import { GetPortloadlist, GetPortlist, GetFrt, GetService, Codeissuetypelist } from '@/api/modular/main/BookingLedger'
 
+let timer;
 export default {
   name: '',
   components: {
@@ -520,6 +521,12 @@ export default {
     this.init()
   },
   methods: {
+    debounce (func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
     checkbasic () {
       this.$refs.billFrom.validate(valid => {
         if (valid) {

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

@@ -45,8 +45,8 @@
                       v-model="details.goodsname"
                       :data-source="goodsnameDataArr"
                       @select="goodsnameSelect"
-                      @change="goodsnameChange"
                       @focus="goodsnameChange"
+                      @change="debounce(goodsnameChange, 300, $event)"
                     />
                   </a-form-model-item>
                 </div>
@@ -97,6 +97,8 @@ import {
   getGoodsname
 } from '@/api/modular/main/BookingLedger'
 import { AutoComplete } from 'ant-design-vue'
+
+let timer;
 export default {
   name: '',
   components: {
@@ -175,6 +177,12 @@ export default {
   },
   created() {},
   methods: {
+    debounce (func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
     checkbasic () {
       this.$refs.cargoFrom.validate(valid => {
         console.log(valid)

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

@@ -1,12 +1,15 @@
 <template>
-  <a-input
-    :type="inputType"
-    :allowClear="true"
-    v-model="value"
-    @blur="inputBlur"
-    :disabled="ishd"
-    @change="inputChange"
-  />
+  <div class="input-content">
+    <input
+      class="ant-input input-box"
+      :type="inputType"
+      v-model="value"
+      :disabled="ishd"
+      @blur="inputBlur"
+      @change="inputChange"
+    />
+    <a-icon type="close-circle" theme="filled" class="ant-input-suffix input-icon" @click="clearInput" v-if="value"/>
+  </div>
 </template>
 <script>
 export default {
@@ -14,25 +17,25 @@ export default {
   props: {
     parentVal: {
       type: [String, Number],
-      default: '',
+      default: ''
     },
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     ishd: {
       type: Boolean,
-      default: false,
+      default: false
     },
     inputType: {
       type: String,
-      default: 'text',
+      default: 'text'
     },
   },
   data() {
     return {
       // value: this.parentVal || '',
-      value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal,
+      value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal
     }
   },
   watch: {
@@ -40,7 +43,8 @@ export default {
       this.value = nval
     },
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
     inputBlur() {
       this.$emit('getInputChange', {
@@ -55,7 +59,44 @@ export default {
           value: this.value
         })
       }
+    },
+    clearInput () {
+      this.value = ''
+      this.$emit('getInputChange', {
+        type: this.type,
+        value: this.value
+      })
     }
   }
 }
 </script>
+<style lang="less">
+.input-content{
+  position: relative;
+  .input-box {
+    width: 100%;
+  }
+  .input-icon{
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.25);
+    line-height: 0;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    opacity: 0;
+    right: 10px;
+  }
+  &:hover{
+    .input-icon{
+      opacity: 1;
+    }
+  }
+}
+</style>

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

@@ -21,9 +21,10 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '200px' }"
                       @select="shipperSelect"
-                      @change="shipperChange"
                       @focus="shipperChange"
+                      @change="debounce(shipperChange, 300, $event)"
                     />
+                    <!-- @change="shipperChange" -->
                     <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('shipper')">
                       保存
                     </a-button>
@@ -66,9 +67,10 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '200px' }"
                       @select="consigneeSelect"
-                      @change="consigneeChange"
                       @focus="consigneeChange"
+                      @change="debounce(consigneeChange, 300, $event)"
                     />
+                    <!-- @change="consigneeChange" -->
                     <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('consignee')">保存</a-button
                     >
                     <div class="right">
@@ -108,9 +110,10 @@
                       class="customer-input"
                       :data-source="notifyDataArr"
                       @select="notifySelect"
-                      @change="notifyChange"
                       @focus="notifyChange"
+                      @change="debounce(notifyChange, 300, $event)"
                     />
+                    <!-- @change="notifyChange" -->
                     <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('notifyparty')">保存</a-button
                     >
                     <div class="right">
@@ -166,7 +169,7 @@
                         class="customer-input"
                         :default-value="details.yard"
                         v-model="details.yard"
-                        @change="handleYardChange"
+                        @change="debounce(handleYardChange, 300, $event)"
                         show-search
                         :filter-option="filterOption"
                         :dropdownMatchSelectWidth="false"
@@ -201,9 +204,10 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '200px' }"
                       @select="customserSelect"
-                      @change="customserChange"
                       @focus="customserChange"
+                      @change="debounce(customserChange, 300, $event)"
                     />
+                    <!-- @change="customserChange" -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -223,8 +227,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '200px' }"
                       @select="truckerSelect"
-                      @change="truckerChange"
                       @focus="truckerChange"
+                      @change="debounce(truckerChange, 300, $event)"
                     />
                   </a-form-model-item>
                 </a-col>
@@ -245,8 +249,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '200px' }"
                       @select="agentidSelect"
-                      @change="agentidChange"
                       @focus="agentidChange"
+                      @change="debounce(agentidChange, 300, $event)"
                     />
                   </a-form-model-item>
                 </a-col>
@@ -341,8 +345,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px' }"
                       @select="placereceiptSelect"
-                      @change="placereceiptChange"
                       @focus="placereceiptChange"
+                      @change="debounce(placereceiptChange, 300, $event)"
                     ></auto-complete>
                   </a-form-model-item>
                 </a-col>
@@ -376,8 +380,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px' }"
                       @select="portloadSelect"
-                      @change="portloadChange"
                       @focus="portloadChange"
+                      @change="debounce(portloadChange, 300, $event)"
                     ></auto-complete>
                   </a-form-model-item>
                 </a-col>
@@ -411,8 +415,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px' }"
                       @select="transportSelect"
-                      @change="transportChange"
                       @focus="transportChange"
+                      @change="debounce(transportChange, 300, $event)"
                     />
                   </a-form-model-item>
                 </a-col>
@@ -446,8 +450,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px' }"
                       @select="portdischargeSelect"
-                      @change="portdischargeChange"
                       @focus="portdischargeChange"
+                      @change="debounce(portdischargeChange, 300, $event)"
                     />
                   </a-form-model-item>
                 </a-col>
@@ -481,8 +485,8 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px' }"
                       @select="destinationSelect"
-                      @change="destinationChange"
                       @focus="destinationChange"
+                      @change="debounce(destinationChange, 300, $event)"
                     />
                   </a-form-model-item>
                 </a-col>
@@ -516,7 +520,7 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px' }"
                       @select="placedeliverySelect"
-                      @change="placedeliveryChange"
+                      @change="debounce(placedeliveryChange, 300, $event)"
                       @focus="placedeliveryChange"
                     />
                   </a-form-model-item>
@@ -567,7 +571,7 @@
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '200px' }"
                       @select="kindpkgsSelect"
-                      @change="kindpkgsChange"
+                      @change="debounce(kindpkgsChange, 300, $event)"
                       @focus="kindpkgsChange"
                     />
                   </a-form-model-item>
@@ -745,6 +749,8 @@ import {
   BookingTemplateAdd,
   DjyCustomerpage
 } from '@/api/modular/main/BookingLedger'
+
+let timer;
 export default {
   components: {
     XCard,
@@ -1083,6 +1089,12 @@ export default {
     }, 2000)
   },
   methods: {
+    debounce (func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
     checkbasic () {
       this.$refs.mailingFrom.validate(valid => {
         console.log(valid)