From 437be020329a4f9ae9701fd913ff2d75994524e3 Mon Sep 17 00:00:00 2001
From: lilu <lilu@myshipping.net>
Date: Thu, 2 Mar 2023 14:28:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BB=E5=8D=95?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98/=20=E6=94=B6=E5=8F=91=E9=80=9A=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=20-=20select=20=E5=B0=81=E8=A3=85=EF=BC=8C=E6=A8=A1?=
 =?UTF-8?q?=E7=B3=8A=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/components/sedOrder.vue            |    2 +-
 src/views/main/BookingLedger/detail/index.vue |   10 +-
 .../detail/modules/autoCompleteView.vue       |   30 +-
 .../detail/modules/basicInfo.vue              |    2 +-
 .../detail/modules/mailingInfo.vue            | 1082 ++---------------
 .../detail/modules/selectView.vue             |  128 ++
 .../detail/style/mailingInfo.less             |  482 ++++++++
 7 files changed, 756 insertions(+), 980 deletions(-)
 create mode 100644 src/views/main/BookingLedger/detail/modules/selectView.vue
 create mode 100644 src/views/main/BookingLedger/detail/style/mailingInfo.less

diff --git a/src/views/main/BookingLedger/detail/components/sedOrder.vue b/src/views/main/BookingLedger/detail/components/sedOrder.vue
index 32d5bd7..358bb5a 100644
--- a/src/views/main/BookingLedger/detail/components/sedOrder.vue
+++ b/src/views/main/BookingLedger/detail/components/sedOrder.vue
@@ -241,7 +241,7 @@ export default {
         yard: [ { required: false, message: '请输入场站', trigger: 'change' } ],
         customser: [ { required: false, message: '请输入报关行', trigger: 'change' } ],
         trucker: [ { required: false, message: '请输入车队', trigger: 'change' } ],
-        agentid: [ { required: false, message: '请输入国外代理', trigger: 'change' } ],
+        agentname: [ { required: false, message: '请输入国外代理', trigger: 'change' } ],
         eta: [ { required: false, message: '请选择预抵日期', trigger: 'change' } ],
         closingdate: [ { required: false, message: '请选择截港时间', trigger: 'change' } ],
         closedocdate: [ { required: false, message: '请选择截单时间', trigger: 'change' } ],
diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
index 0560941..148d7ef 100644
--- a/src/views/main/BookingLedger/detail/index.vue
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -253,7 +253,7 @@ const initDetail = {
   yard: '',
   customser: '',
   trucker: '',
-  agentid: '',
+  agentname: '',
   eta: '',
   closingdate: '',
   closedocdate: '',
@@ -395,7 +395,7 @@ export default {
         yard: [{ required: false, message: '请输入场站', trigger: 'change' }],
         customser: [{ required: false, message: '请输入报关行', trigger: 'change' }],
         trucker: [{ required: false, message: '请输入车队', trigger: 'change' }],
-        agentid: [{ required: false, message: '请输入国外代理', trigger: 'change' }],
+        agentname: [{ required: false, message: '请输入国外代理', trigger: 'change' }],
         eta: [{ required: false, message: '请选择预抵日期', trigger: 'change' }],
         closingdate: [{ required: false, message: '请选择截港时间', trigger: 'change' }],
         closedocdate: [{ required: false, message: '请选择截单时间', trigger: 'change' }],
@@ -1061,6 +1061,7 @@ export default {
         BookingOrderAddOrUpdate(_data)
           .then(res => {
             if (res.success) {
+              this.$message.destroy()
               that.$message.success('保存成功')
               if (that.isAdd) {
                 that.isCopy = false
@@ -1078,7 +1079,7 @@ export default {
                 that.isCopy = false
                 that.isAdd = false
                 console.log('1.1 == 保存成功 - 不切换路由 ==', that.id)
-                // that.init()
+                that.init()
                 that.checkSaveFun({ type: 'hbList', hasChange: false })
                 that.checkSaveFun({ type: 'details', hasChange: false })
               } else {
@@ -1253,6 +1254,7 @@ export default {
         BookingOrderAddOrUpdate(_data)
           .then(res => {
             if (res.success) {
+              this.$message.destroy()
               that.$message.success('保存成功')
               if (that.isAdd) {
                 that.isCopy = false
@@ -1270,7 +1272,7 @@ export default {
                 that.isCopy = false
                 that.isAdd = false
                 console.log('1.1 == 保存成功 - 不切换路由 ==', that.id)
-                // that.init()
+                that.init()
                 that.checkSaveFun({ type: 'hbList', hasChange: false })
                 that.checkSaveFun({ type: 'details', hasChange: false })
               } else {
diff --git a/src/views/main/BookingLedger/detail/modules/autoCompleteView.vue b/src/views/main/BookingLedger/detail/modules/autoCompleteView.vue
index f104fcf..7bbbc76 100644
--- a/src/views/main/BookingLedger/detail/modules/autoCompleteView.vue
+++ b/src/views/main/BookingLedger/detail/modules/autoCompleteView.vue
@@ -12,7 +12,6 @@
       @focus="handleChangeFirst"
     >
       <template slot="dataSource">
-        <!-- :value="item[showLabel[0]]" -->
         <a-select-option v-for="(item, index) in dataSourceList" :key="index" :value="index + ''" >
           <div class="title">
             <template v-for="(label, lindex) in showLabel">
@@ -28,7 +27,9 @@
 <script>
 import {
  GetPortloadlist,
- GetPortlist
+ GetPortlist,
+ BookingTemplate,
+ DjyCustomerpage
 } from '@/api/modular/main/BookingLedger'
 import { AutoComplete } from 'ant-design-vue'
 let timer
@@ -110,12 +111,21 @@ export default {
           return GetPortloadlist
         case 'GetPortlist':
           return GetPortlist
+        case 'BookingTemplate':
+          return BookingTemplate
+        case 'DjyCustomerpage':
+          return DjyCustomerpage
       }
     },
     handleSelect (e) {
       const num = Number(e)
       console.log(num)
       const data = this.dataSourceList[num]
+      // 注意，这里取值为字符串 0 - 9 时会有BUG
+      // if (Number(data[this.showLabel[0]]) < 10) {
+      //   debugger
+      //   this.value = data[this.showLabel[0]]
+      // }
       this.value = data[this.showLabel[0]]
       this.$emit('select', {
         type: this.type,
@@ -133,21 +143,31 @@ export default {
       }, 800)
       // 判断有值得情况下 ，是否需要调接口
       if (e) {
+        /* *
+         * 字段值：
+         * Title 收发通模板
+         * KeyWord 港口信息
+         * SearchValue 报关行，仓库，车队， 国外代理
+         * */
         Object.keys(this.searchQuery).map((item, index) => {
-          if (item === 'KeyWord' || item === 'name') {
+          if (['Title', 'KeyWord', 'SearchValue', 'name'].includes(item)) {
             this.searchQuery[item] = e
           }
         })
       } else {
         Object.keys(this.searchQuery).map((item, index) => {
-          if (item === 'KeyWord' || item === 'name') {
+          if (['Title', 'KeyWord', 'SearchValue', 'name'].includes(item)) {
             this.searchQuery[item] = ''
           }
         })
       }
       this.getFromSelectData(this.emnuCompleteApi(this.searchApi), this.searchQuery).then((data) => {
         console.log(data)
-        this.dataSourceList = data
+        if (data.rows) {
+          this.dataSourceList = data.rows
+        } else {
+          this.dataSourceList = data
+        }
       })
     },
     handleChangeFirst (e) {
diff --git a/src/views/main/BookingLedger/detail/modules/basicInfo.vue b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
index 8c9f212..ec9e1da 100644
--- a/src/views/main/BookingLedger/detail/modules/basicInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
@@ -1658,7 +1658,7 @@ export default {
     // 运费协议号 - end
     inputChange ({ type, value }) {
       this.details[type] = value
-      console.log(this.details[type])
+      console.log(type, this.details[type])
       if (type === 'voyno' && this.details.carrierid === 'ESL') {
         this.details.voynoinner = this.details[type]
       }
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index b2ee74b..c6fbb9d 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -13,19 +13,15 @@
                 <div class="sender">
                   <div class="top" :class="{ required: rules['shipper'] && rules['shipper'][0].required }">
                     <div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
-                    <auto-complete
-                      size="small"
-                      :allowClear="true"
-                      v-model="shippername"
-                      class="customer-input"
-                      :data-source="shipperDataArr"
-                      :dropdown-match-select-width="false"
-                      :dropdown-style="{ width: '200px' }"
-                      @select="shipperSelect"
-                      @change="debounce(shipperChange, 300, $event)"
-                      @focus="shipperChangeFirst"
-                    />
-                    <!-- @change="shipperChange" -->
+                    <autoCompleteView
+                      type="shippername"
+                      :defaultVal="shippername"
+                      :dropdownStyle="{ width: '300px' }"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ Title: '', Type: this.enmuType('shipper') }"
+                      :showLabel="['title']"
+                      @select="getAutoInputChangeSelect"
+                    ></autoCompleteView>
                     <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('shipper')">
                       保存
                     </a-button>
@@ -43,18 +39,10 @@
                       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"
-                      v-if="Object.keys(details).length > 1 && details.shipper.length > 1"
+                      v-if="Object.keys(details).length > 1 && details.shipper.length > 0"
                     >
                       <div v-for="(num, index) in details.shipper.split('\n')" :key="index">{{ num.length }}</div>
                     </div>
@@ -65,22 +53,16 @@
                 <div class="consignee">
                   <div class="top" :class="{ required: rules['consignee'] && rules['consignee'][0].required }">
                     <div class="name"><span class="iconfont icon-bianji"></span>收货人</div>
-                    <auto-complete
-                      size="small"
-                      :allowClear="true"
-                      v-model="consigneename"
-                      class="customer-input"
-                      :data-source="consigneeDataArr"
-                      :dropdown-match-select-width="false"
-                      :dropdown-style="{ width: '200px' }"
-                      @select="consigneeSelect"
-                      @change="debounce(consigneeChange, 300, $event)"
-                      @focus="consigneeChangeFirst"
-                    />
-                    <!-- @change="consigneeChange" -->
-                    <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('consignee')"
-                      >保存</a-button
-                    >
+                    <autoCompleteView
+                      type="consigneename"
+                      :defaultVal="consigneename"
+                      :dropdownStyle="{ width: '300px' }"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ Title: '', Type: this.enmuType('consignee') }"
+                      :showLabel="['title']"
+                      @select="getAutoInputChangeSelect"
+                    ></autoCompleteView>
+                    <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('consignee')">保存</a-button>
                     <div class="right">
                       <span class="btn-circle" @click="spliceMore('consignee')" :style="{ fontSize: '14px' }">*</span>
                       <span class="btn" @click="changeCode(35, 'consignee')">35</span>
@@ -95,18 +77,10 @@
                       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"
-                      v-if="Object.keys(details).length > 1 && details.consignee.length > 1"
+                      v-if="Object.keys(details).length > 1 && details.consignee.length > 0"
                     >
                       <div v-for="(num, index) in details.consignee.split('\n')" :key="index">{{ num.length }}</div>
                     </div>
@@ -117,17 +91,15 @@
                 <div class="notifier">
                   <div class="top" :class="{ required: rules['notifyparty'] && rules['notifyparty'][0].required }">
                     <div class="name"><span class="iconfont icon-bianji"></span>通知人</div>
-                    <auto-complete
-                      size="small"
-                      :allowClear="true"
-                      v-model="notifypartyname"
-                      class="customer-input"
-                      :data-source="notifyDataArr"
-                      @select="notifySelect"
-                      @change="debounce(notifyChange, 300, $event)"
-                      @focus="notifyChangeFirst"
-                    />
-                    <!-- @change="notifyChange" -->
+                    <autoCompleteView
+                      type="notifypartyname"
+                      :defaultVal="notifypartyname"
+                      :dropdownStyle="{ width: '300px' }"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ Title: '', Type: this.enmuType('notifyparty') }"
+                      :showLabel="['title']"
+                      @select="getAutoInputChangeSelect"
+                    ></autoCompleteView>
                     <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('notifyparty')">保存</a-button>
                     <div class="right">
                       <span class="btn-circle" @click="spliceMore('notifyparty')" :style="{ fontSize: '14px' }">*</span>
@@ -143,18 +115,10 @@
                       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"
-                      v-if="Object.keys(details).length > 1 && details.notifyparty.length > 1"
+                      v-if="Object.keys(details).length > 1 && details.notifyparty.length > 0"
                     >
                       <div v-for="(num, index) in details.notifyparty.split('\n')" :key="index">{{ num.length }}</div>
                     </div>
@@ -176,35 +140,17 @@
                       prop="yard"
                     >
                       <div class="yard-box" style="display: flex">
-                        <!-- <auto-complete
-                          :allowClear="true"
-                          v-model="details.yard"
-                          class="customer-input"
-                          :data-source="yardDataArr"
-                          @select="yardSelect"
-                          @change="yardChange"
-                        /> -->
-                        <a-select
-                          size="small"
-                          class="customer-input"
-                          :default-value="details.yard"
-                          v-model="details.yard"
-                          @change="debounce(handleYardChange, 300, $event)"
-                          show-search
-                          :filter-option="filterOption"
-                          :dropdownMatchSelectWidth="false"
-                          style="flex:1;"
-                        >
-                          <a-select-option v-for="(yard, yindex) in yardSelectData" :key="yindex" :value="yindex">
-                            {{ yard.selectShowTab }}
-                          </a-select-option>
-                        </a-select>
+                        <selectView
+                          type="yard"
+                          :defaultVal="details.yard"
+                          searchApi="GetYardlist"
+                          :searchQuery="{ keyword: '' }"
+                          :showLabel="['name', 'showCode']"
+                          @change="getSelectViewRes"
+                          style="flex:1;margin-top:-4px;"
+                        ></selectView>
                         <i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
                         <i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
-                        <!-- <div class="feeself">
-                          <a-button size="small" :type="details.feeself ? 'primary' : ''" @click="changeFeeself">自结</a-button>
-                        </div> -->
-                        <!-- <a-checkbox v-model="details.feeself"> 自结 </a-checkbox> -->
                       </div>
                     </a-form-model-item>
                   </a-col>
@@ -217,7 +163,6 @@
                       has-feedback
                       prop="feeself"
                     >
-                      <!-- {{ details.feeself }} -->
                       <a-radio-group size="small" v-model="details.feeself">
                         <a-radio size="small" :value="true">
                           是
@@ -237,19 +182,15 @@
                       has-feedback
                       prop="customser"
                     >
-                      <auto-complete
-                        size="small"
-                        :allowClear="true"
-                        v-model="details.customser"
-                        class="customer-input"
-                        :data-source="customserDataArr"
-                        :dropdown-match-select-width="false"
-                        :dropdown-style="{ width: '200px' }"
-                        @select="customserSelect"
-                        @change="debounce(customserChange, 300, $event)"
-                        @focus="customserChangeFirst"
-                      />
-                      <!-- @change="customserChange" -->
+                      <autoCompleteView
+                        type="customser"
+                        :defaultVal="details.customser"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'customs_broker' }"
+                        :showLabel="['shortName']"
+                        @select="getAutoInputChangeSelect"
+                      ></autoCompleteView>
                     </a-form-model-item>
                   </a-col>
                   <a-col :span="12">
@@ -261,18 +202,15 @@
                       has-feedback
                       prop="trucker"
                     >
-                      <auto-complete
-                        size="small"
-                        :allowClear="true"
-                        v-model="details.trucker"
-                        class="customer-input"
-                        :data-source="truckerDataArr"
-                        :dropdown-match-select-width="false"
-                        :dropdown-style="{ width: '200px' }"
-                        @select="truckerSelect"
-                        @change="debounce(truckerChange, 300, $event)"
-                        @focus="truckerChangeFirst"
-                      />
+                      <autoCompleteView
+                        type="trucker"
+                        :defaultVal="details.trucker"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'fleet' }"
+                        :showLabel="['shortName']"
+                        @select="getAutoInputChangeSelect"
+                      ></autoCompleteView>
                     </a-form-model-item>
                   </a-col>
                   <a-col :span="12">
@@ -282,20 +220,17 @@
                       :labelCol="labelCol"
                       :wrapperCol="wrapperCol"
                       has-feedback
-                      prop="agentid"
+                      prop="agentname"
                     >
-                      <auto-complete
-                        size="small"
-                        :allowClear="true"
-                        v-model="details.agentid"
-                        class="customer-input"
-                        :data-source="agentidDataArr"
-                        :dropdown-match-select-width="false"
-                        :dropdown-style="{ width: '200px' }"
-                        @select="agentidSelect"
-                        @change="debounce(agentidChange, 300, $event)"
-                        @focus="agentidChangeFirst"
-                      />
+                      <autoCompleteView
+                        type="agentname"
+                        :defaultVal="details.agentname"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'out_agent' }"
+                        :showLabel="['shortName']"
+                        @select="getAutoInputChangeSelect"
+                      ></autoCompleteView>
                     </a-form-model-item>
                   </a-col>
                   <a-col :span="12">
@@ -308,18 +243,15 @@
                       has-feedback
                       prop="warehouse"
                     >
-                      <auto-complete
-                        size="small"
-                        :allowClear="true"
-                        v-model="details.warehouse"
-                        class="customer-input"
-                        :data-source="warehouseDataArr"
-                        :dropdown-match-select-width="false"
-                        :dropdown-style="{ width: '200px' }"
-                        @select="warehouseSelect"
-                        @change="debounce(warehouseChange, 300, $event)"
-                        @focus="warehouseChangeFirst"
-                      />
+                      <autoCompleteView
+                        type="warehouse"
+                        :defaultVal="details.warehouse"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'warehouse' }"
+                        :showLabel="['shortName']"
+                        @select="getAutoInputChangeSelect"
+                      ></autoCompleteView>
                     </a-form-model-item>
                   </a-col>
                 </div>
@@ -796,14 +728,15 @@ import { AutoComplete } from 'ant-design-vue'
 import inputView from './inputView'
 import textareaView from './textareaView'
 import autoCompleteView from './autoCompleteView'
+import selectView from './selectView'
 import {
-  BookingTemplate,
-  GetYardlist,
-  GetPortloadlist,
-  GetPortlist,
+  // BookingTemplate,
+  // GetYardlist,
+  // GetPortloadlist,
+  // GetPortlist,
   GetPackage,
-  BookingTemplateAdd,
-  DjyCustomerpage
+  BookingTemplateAdd
+  // DjyCustomerpage
 } from '@/api/modular/main/BookingLedger'
 
 let timer
@@ -813,7 +746,8 @@ export default {
     AutoComplete,
     textareaView,
     inputView,
-    autoCompleteView
+    autoCompleteView,
+    selectView
   },
   props: {
     details: {
@@ -857,17 +791,7 @@ export default {
         md: { span: 20 }
       },
       showKey: ['1'],
-      // 获取模板
-      shipperData: [], // 发货人
-      consigneeData: [], // 收货人
-      notifyData: [], // 通知人
-      yardData: [], // 场站
-      yardSelectData: [],
       kindpkgsData: [],
-      customserData: [], // 报关行
-      truckerData: [], // 车队
-      agentidData: [], // 国外代理
-      warehouseData: [], // 仓库
       shippername: '',
       consigneename: '',
       notifypartyname: '',
@@ -878,9 +802,6 @@ export default {
       yardType: '',
       yardVisible: false,
       customerModelconfirm: false,
-      showShipper: '',
-      showConsignee: '',
-      showNotifier: '',
       textEntryModalVisible: false,
       textEntryType: '',
       textEntryModalTitle: '',
@@ -899,9 +820,6 @@ export default {
           })
         }
         if (nval) {
-          this.showShipper = this.details.shipper || ''
-          this.showConsignee = this.details.consignee || ''
-          this.showNotifier = this.details.notifyparty || ''
           this.shippername = ''
           this.consigneename = ''
           this.notifypartyname = ''
@@ -913,69 +831,13 @@ export default {
       immediate: true,
       handler(nD, oD) {
         this.id = this.$route.query.id
-        this.showShipper = ''
-        this.showConsignee = ''
-        this.showNotifier = ''
         this.shippername = ''
         this.consigneename = ''
         this.notifypartyname = ''
-        this.init()
       }
     }
   },
   computed: {
-    shipperDataArr() {
-      if (this.shipperData) {
-        const arr = []
-        this.shipperData.map((item, index) => {
-          if (item.title && !arr.includes(item.title)) {
-            arr.push(item.title)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
-    consigneeDataArr() {
-      if (this.consigneeData) {
-        const arr = []
-        this.consigneeData.map((item, index) => {
-          if (item.title && !arr.includes(item.title)) {
-            arr.push(item.title)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
-    notifyDataArr() {
-      if (this.notifyData) {
-        const arr = []
-        this.notifyData.map((item, index) => {
-          if (item.title && !arr.includes(item.title)) {
-            arr.push(item.title)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
-    yardDataArr() {
-      if (this.yardData) {
-        const arr = []
-        this.yardData.map((item, index) => {
-          if (!arr.includes(item.name)) {
-            arr.push(item.name)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
     kindpkgsDataArr() {
       if (this.kindpkgsData) {
         const arr = []
@@ -988,64 +850,9 @@ export default {
       } else {
         return []
       }
-    },
-    customserDataArr() {
-      if (this.customserData) {
-        const arr = []
-        this.customserData.map((item, index) => {
-          if (!arr.includes(item.shortName)) {
-            arr.push(item.shortName)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
-    truckerDataArr() {
-      if (this.truckerData) {
-        const arr = []
-        this.truckerData.map((item, index) => {
-          if (!arr.includes(item.shortName)) {
-            arr.push(item.shortName)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
-    agentidDataArr() {
-      if (this.agentidData) {
-        const arr = []
-        this.agentidData.map((item, index) => {
-          if (!arr.includes(item.shortName)) {
-            arr.push(item.shortName)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
-    },
-    warehouseDataArr() {
-      if (this.warehouseData) {
-        const arr = []
-        this.warehouseData.map((item, index) => {
-          if (!arr.includes(item.shortName)) {
-            arr.push(item.shortName)
-          }
-        })
-        return arr
-      } else {
-        return []
-      }
     }
   },
-  created() {
-    this.init()
-    // this.SetTOTALNO()
-  },
+  created() { },
   mounted() {
     const shipperScroll = document.getElementById('shipper-scroll')
     if (shipperScroll) {
@@ -1061,11 +868,6 @@ export default {
     notifypartyScroll.addEventListener('scroll', () => {
       document.getElementById('notifyparty-scroll-right').scrollTop = notifypartyScroll.scrollTop
     })
-    if (this.details) {
-      this.showShipper = this.details.shipper || ''
-      this.showConsignee = this.details.consignee || ''
-      this.showNotifier = this.details.notifyparty || ''
-    }
     setTimeout(() => {
       this.changePkgs()
     }, 2000)
@@ -1104,121 +906,7 @@ export default {
       this.yardType = ''
     },
     init() {
-      this.getYardlist()
-      // this.getTemplate('', 'shipper')
-      // this.getTemplate('', 'consignee')
-      // this.getTemplate('', 'notify')
-      // this.getPortloadlist('', 'portload')
-      // this.getPortloadlist('', 'placereceipt')
-      // this.getPortlist('', 'transport')
-      // this.getPortlist('', 'portdischarge')
-      // this.getPortlist('', 'destination')
-      // this.getPortlist('', 'placedelivery')
-      // this.getPackage('')
-    },
-    // 订舱模板 - start
-    getTemplate(name = '', type) {
-      BookingTemplate({
-        SearchValue: name,
-        Type: this.enmuType(type)
-      })
-        .then(res => {
-          if (res.code === 200) {
-            this[`${type}Data`] = res.data.rows
-            this.$forceUpdate()
-          }
-        })
-        .catch(err => {
-          console.log(err)
-        })
     },
-
-    shipperSelect(value) {
-      this.shippername = value
-      const index = this.shipperDataArr.indexOf(value)
-      this.details.shipper = this.shipperData[index].content
-      this.showShipper = this.details.shipper
-      this.$forceUpdate()
-    },
-    shipperChange(value) {
-      this.getTemplate(value, 'shipper')
-    },
-    shipperChangeFirst(value) {
-      if (this.shippername) { return false }
-      this.getTemplate(value, 'shipper')
-    },
-
-    consigneeSelect(value) {
-      this.consigneename = value
-      const index = this.consigneeDataArr.indexOf(value)
-      this.details.consignee = this.consigneeData[index].content
-      this.showConsignee = this.details.consignee
-    },
-    consigneeChange(value) {
-      this.getTemplate(value, 'consignee')
-    },
-    consigneeChangeFirst(value) {
-      if (this.consigneename) { return false }
-      this.getTemplate(value, 'consignee')
-    },
-    notifySelect(value) {
-      this.notifypartyname = value
-      const index = this.notifyDataArr.indexOf(value)
-      this.details.notifyparty = this.notifyData[index].content
-      this.showNotifier = this.details.notifyparty
-    },
-    notifyChange(value) {
-      this.getTemplate(value, 'notify')
-    },
-    notifyChangeFirst(value) {
-      if (this.notifypartyname) { return false }
-      this.getTemplate(value, 'notify')
-    },
-
-    // 订舱模板 - end
-
-    // 场站 - start
-    getYardlist(name = '') {
-      GetYardlist({
-        keyword: name
-      })
-        .then(res => {
-          if (res.code === 200) {
-            this.yardData = res.data
-            const arr = []
-            res.data.map((item, index) => {
-              arr.push({
-                ...{ selectShowTab: item.name + ' / ' + item.showCode },
-                ...item
-              })
-            })
-            this.yardSelectData = arr
-            this.$forceUpdate()
-          }
-        })
-        .catch(err => {
-          console.log(err)
-        })
-    },
-
-    yardSelect(value) {
-      this.details.yard = value
-      const index = this.yardDataArr.indexOf(value)
-      this.details.yardid = this.yardData[index].code
-    },
-    yardChange(value) {
-      // this.getYardlist(value)
-    },
-
-    handleYardChange(index) {
-      this.details.yard = this.yardSelectData[index].name
-      this.details.yardid = this.yardSelectData[index].code
-    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
-    // 场站 - end
-
     // 包装 - start
     getPackage(name = '') {
       GetPackage({
@@ -1249,86 +937,6 @@ export default {
     },
     // 包装 - end
 
-    // 报关行 - start
-    getDjyCustomerpage(name = '', type, key) {
-      DjyCustomerpage({
-        SearchValue: name,
-        PropString: key
-      })
-        .then(res => {
-          if (res.code === 200) {
-            this[`${type}Data`] = res.data.rows
-            this.$forceUpdate()
-          }
-        })
-        .catch(err => {
-          console.log(err)
-        })
-    },
-    customserSelect(value) {
-      this.details.customser = value
-    },
-    customserChange(value) {
-      if (!value) {
-        this.details.customser = this.details.customser ? this.details.customser : ''
-      }
-      this.getDjyCustomerpage(value, 'customser', 'customs_broker')
-    },
-    customserChangeFirst(value) {
-      if (this.details.customser) { return false }
-      this.getDjyCustomerpage(value, 'customser', 'customs_broker')
-    },
-    // 报关行 - end
-
-    // 车队 - start
-    truckerSelect(value) {
-      this.details.trucker = value
-    },
-    truckerChange(value) {
-      if (!value) {
-        this.details.trucker = this.details.trucker ? this.details.trucker : ''
-      }
-      this.getDjyCustomerpage(value, 'trucker', 'fleet')
-    },
-    truckerChangeFirst(value) {
-      if (this.details.trucker) { return false }
-      this.getDjyCustomerpage(value, 'trucker', 'fleet')
-    },
-    // 车队 - end
-
-    // 国外代理 - start
-    agentidSelect(value) {
-      this.details.agentid = value
-    },
-    agentidChange(value) {
-      if (!value) {
-        this.details.agentid = this.details.agentid ? this.details.agentid : ''
-      }
-      this.getDjyCustomerpage(value, 'agentid', 'out_agent')
-    },
-    agentidChangeFirst(value) {
-      if (this.details.agentid) { return false }
-      this.getDjyCustomerpage(value, 'agentid', 'out_agent')
-    },
-    // 国外代理 - end
-
-    // 仓库 - start
-    warehouseSelect(value) {
-      this.details.warehouse = value
-      this.details.warehouseID = this.warehouseData[this.warehouseDataArr.indexOf(value)].id
-    },
-    warehouseChange(value) {
-      if (!value) {
-        this.details.warehouse = this.details.warehouse ? this.details.warehouse : ''
-      }
-      this.getDjyCustomerpage(value, 'warehouse', 'warehouse')
-    },
-    warehouseChangeFirst(value) {
-      if (this.details.warehouse) { return false }
-      this.getDjyCustomerpage(value, 'warehouse', 'warehouse')
-    },
-    // 仓库 - end
-
     // 保存模板
     saveModel(type) {
       this.modelVisible = true
@@ -1791,8 +1399,8 @@ export default {
     },
     // 新增 - 封装模糊搜索框
     getAutoInputChangeSelect ({ type, res }) {
-      // 港口公共部分
       if (['placereceiptid', 'portloadid', 'transportid', 'portdischargeid', 'destinationid', 'placedeliveryid'].includes(type)) {
+        // 港口公共部分
         this.details[type] = res['ediCode']
         this.details[type.replace('id', '')] = res['enName']
         if (type === 'portloadid') {
@@ -1801,6 +1409,30 @@ export default {
         } else if (type === 'portdischargeid') {
           this.details.payableat = this.details.payableat ? this.details.payableat : res['enName']
         }
+      } else if (['shippername', 'consigneename', 'notifypartyname'].includes(type)) {
+        // 收发通部分
+        this[type] = res['title']
+        this.details[type.replace('name', '')] = res['content']
+      } else if (['customser', 'trucker', 'agentname', 'warehouse'].includes(type)) {
+        // 报关行，仓库，车队， 国外代理
+        this.details[type] = res['shortName']
+        if (['customser', 'trucker'].includes(type)) {
+          this.details[`${type}id`] = res['codeName']
+        } else if (['agentname'].includes(type)) {
+          this.details['agentid'] = res['codeName']
+        } else if (['warehouse'].includes(type)) {
+          this.details[`${type}ID`] = res['codeName']
+        }
+        console.log('== 获取模板信息 ==', type, this.details)
+      }
+    },
+    // 新增 - 封装下拉框
+    getSelectViewRes ({ type, res }) {
+      console.log(type, res)
+      if (['yard'].includes(type)) {
+        // 场站
+        this.details[type] = res.name
+        this.details[`${type}id`] = res.code
       }
     }
   }
@@ -1808,493 +1440,5 @@ export default {
 </script>
 <style lang="less" scoped>
 @import url('../index.less');
-
-.collapse-box {
-  margin-bottom: 2px;
-  background: #fff;
-}
-.base-tit {
-  font-size: 14px;
-  font-weight: 600;
-  color: #666;
-  position: relative;
-  height: 34px;
-  line-height: 40px;
-  margin-top: -5px;
-  &::before {
-    content: '';
-    position: absolute;
-    width: 4px;
-    height: 20px;
-    background: @primary-color;
-    top: 9px;
-    left: 0px;
-  }
-  i {
-    margin-right: 7px;
-    font-weight: 500;
-    font-size: 18px;
-    color: @primary-color;
-  }
-}
-.left-sender-box{
-  padding-top: 4px;
-}
-.sender,
-.consignee,
-.notifier {
-  // margin-bottom: 10px;
-  .top {
-    margin-bottom: 4px;
-    height: 26px;
-    line-height: 26px;
-    overflow: hidden;
-    display: flex;
-    .name {
-      display: inline-block;
-      font-size: 13px;
-      margin-right: 10px;
-      color: #666;
-      .iconfont {
-        margin-right: 4px;
-        font-weight: 600;
-      }
-    }
-    .save-btn {
-      height: 24px;
-      line-height: 22px;
-      margin-left: 10px;
-      margin-right: 10px;
-      span {
-        margin-left: 4px !important;
-      }
-    }
-    .right {
-      float: right;
-      margin-top: 2px;
-      margin-right: 25px;
-    }
-    .customer-input {
-      flex: 1;
-    }
-    .btn {
-      width: 20px;
-      height: 20px;
-      display: inline-block;
-      // background: #c1e0ff;
-      color: @primary-color;
-      text-align: center;
-      line-height: 20px;
-      font-size: 12px;
-      margin-left: 4px;
-      cursor: pointer;
-      position: relative;
-      vertical-align: top;
-      margin-top: 0;
-      &::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: @primary-color;
-        opacity: 0.2;
-        z-index: 0;
-      }
-    }
-    .btn-circle {
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
-      display: inline-block;
-      // background: #c1e0ff;
-      color: @primary-color;
-      text-align: center;
-      line-height: 24px;
-      font-size: 12px;
-      margin-right: 4px;
-      cursor: pointer;
-      margin-top: 2px;
-      position: relative;
-      vertical-align: top;
-      margin-top: 0;
-      border-radius: 50%;
-      &::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: @primary-color;
-        opacity: 0.2;
-        z-index: 0;
-        border-radius: 50%;
-      }
-    }
-  }
-  .bottom {
-    display: flex;
-    .input-box {
-      margin-top: 10px;
-      flex: 1;
-      font-size: 12px;
-      line-height: 20px;
-    }
-    textarea {
-      line-height: 22px;
-    }
-    .line-count {
-      width: 24px;
-      padding-top: 3px;
-      height: 130px;
-      overflow: auto;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      // max-height: 192px;
-      // overflow-y: auto;
-      div {
-        text-align: right;
-        height: 22px;
-        line-height: 22px;
-        font-size: 12px;
-        color: #999;
-      }
-    }
-  }
-}
-.sender-label {
-  position: relative;
-  margin-bottom: 0px !important;
-  margin-top: 6px;
-  /deep/ .ant-form-item-children-icon{
-    position: absolute;
-    top: calc(100% + 15px);
-    left: 0;
-  }
-  /deep/ .ant-form-explain {
-    display: none;
-    padding-left: 33px;
-    margin-top: -15px;
-    margin-bottom: 10px;
-  }
-}
-.yard-box {
-  position: relative;
-  margin-top: 5px;
-  i {
-    color: @primary-color;
-    margin-top: -5px !important;
-    cursor: pointer;
-  }
-}
-.yarn-label {
-  position: relative;
-  /deep/ .ant-form-item-children-icon {
-    // position: absolute;
-    // top: 13px;
-    // right: 44px;
-    display: none;
-  }
-  .customer-input{
-    margin-right: 4px;
-  }
-}
-/deep/ .ant-form-item-children-icon .anticon-check-circle {
-  display: none;
-}
-.content {
-  .label {
-    margin-bottom: 10px;
-    font-size: 14px;
-  }
-}
-.feeself {
-  position: absolute;
-  transform: scale(0.8);
-  // 原始样式
-  // top: -3px;
-  // right: -63px;
-  // 双层样式
-  top: 8px;
-  // left: 104px;
-  right: -4px;
-  button{
-    line-height: 18px;
-    margin-top: 0px;
-    height: 20px;
-    font-size: 13px;
-  }
-  /deep/ .ant-btn-primary{
-    color: #fff !important;
-  }
-}
-.from-label {
-  margin-bottom: 0;
-}
-/*多余线条去掉 */
-.ant-collapse-item {
-  border-bottom: none;
-}
-
-.line-box {
-  display: flex;
-  margin-top: 6px;
-  overflow: hidden;
-  span.unit {
-    font-size: 12px;
-    color: #999;
-    display: inline-block;
-    text-align: center;
-    line-height: 28px;
-    padding-left: 5px;
-  }
-  .edit-icon {
-    font-size: 14px;
-    line-height: 28px;
-    margin-left: 4px;
-    cursor: pointer;
-  }
-}
-
-.required {
-  padding-left: 10px;
-  position: relative;
-  &::before {
-    display: inline-block;
-    margin-right: 4px;
-    color: #f5222d;
-    font-size: 14px;
-    font-family: SimSun, sans-serif;
-    line-height: 1;
-    content: '*';
-    position: absolute;
-    top: 8px;
-    left: 0;
-  }
-}
-
-/deep/ .right-content .ant-form-explain {
-  display: none !important;
-}
-
-@media (max-width: 1800px) {
-  // .feeself {
-  //   right: -75px !important;
-  // }
-}
-
-@media (max-width: 1700px) {
-  .yard-box {
-    i {
-      margin-top: -11px !important;
-    }
-  }
-  // .feeself {
-  //   top: 6px !important;
-  //   right: -43px !important;
-  //   .ant-checkbox-wrapper{
-  //     span{
-  //       padding: 0 4px;
-  //     }
-  //   }
-  // }
-  .yarn-label {
-    position: relative;
-    /deep/ .ant-form-item-children-icon {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 1622px) {
-  // .feeself {
-  //   top: 6px !important;
-  //   right: -52px !important;
-  // }
-}
-
-@media (max-width: 1495px) {
-  // .feeself {
-  //   top: 6px !important;
-  //   right: -61px !important;
-  // }
-}
-
-.has-error {
-  .ant-input {
-    margin-right: 0 !important;
-  }
-  .ant-input-suffix {
-    padding-right: 0 !important;
-  }
-  .ant-select-selection__rendered {
-    margin-right: 0 !important;
-    line-height: 24px;
-  }
-  .ant-select-arrow {
-    right: 0 !important;
-  }
-}
-
-.has-success {
-  .ant-input {
-    margin-right: 0 !important;
-  }
-  .ant-input-suffix {
-    padding-right: 0 !important;
-  }
-  .ant-select-selection__rendered {
-    margin-right: 0 !important;
-  }
-  .ant-select-arrow {
-    right: 0 !important;
-  }
-}
-
-/deep/ .has-success .ant-select-selection-selected-value {
-  padding-right: 0 !important;
-}
-/deep/ .has-error .ant-select-selection-selected-value {
-  padding-right: 0 !important;
-}
-
-/deep/ .has-success .ant-select-arrow {
-  right: 8px !important;
-}
-/deep/ .has-error .ant-select-arrow {
-  right: 8px !important;
-}
-
-.text-entry-box {
-  .tit {
-    height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-    color: #333;
-    margin-bottom: 6px;
-  }
-  .total {
-    font-weight: 600;
-    padding-left: 10px;
-  }
-  .text-res {
-    margin-top: 20px;
-    .kgs-label {
-      display: flex;
-      .left {
-        line-height: 28px;
-        display: block;
-        width: 68px;
-        text-align: left;
-      }
-      .unit {
-        display: block;
-        width: 60px;
-        margin-left: 10px;
-        text-align: left;
-        line-height: 28px;
-      }
-    }
-  }
-}
-/deep/ .ant-select-selection__clear {
-  right: 10px !important;
-  margin-top: -4px !important;
-}
-
-/deep/ form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-selection__clear {
-  right: 10px !important;
-  margin-top: -4px !important;
-}
-
-/deep/ form .has-feedback .ant-input-affix-wrapper .ant-input-suffix {
-  right: 0px !important;
-  padding-right: 10px;
-}
-/deep/ form .has-feedback .ant-calendar-picker-icon,
-form .has-feedback .ant-time-picker-icon,
-form .has-feedback .ant-calendar-picker-clear,
-form .has-feedback .ant-time-picker-clear {
-  right: 10px !important;
-}
-
-// .has-error.has-feedback{
-.pkgs-line-box {
-  /deep/ .ant-form-item-children-icon {
-    right: 18px !important;
-  }
-}
-.kgs-line-box {
-  /deep/ .ant-form-item-children-icon {
-    right: 44px !important;
-  }
-}
-.cbm-line-box {
-  /deep/ .ant-form-item-children-icon {
-    right: 48px !important;
-  }
-}
-
-.right-content-top {
-  padding-bottom:4px;
-  margin-bottom:4px;
-  overflow:hidden;
-  position: relative;
-  &::before{
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: 10px;
-    width: 92%;
-    height:2px;
-    border-bottom: 1px dashed #ddd;
-  }
-}
-
-/deep/ .ant-input-suffix {
-  color: rgba(0, 0, 0, 0.25);
-  // display: none;
-}
-/deep/ .ant-input-affix-wrapper:hover {
-  .ant-input-suffix {
-    display: block;
-  }
-}
-
-/deep/ .ant-calendar-picker-clear {
-  color: rgba(0, 0, 0, 0.25) !important;
-}
-
-  /deep/ .ant-collapse-header{
-    padding: 4px 10px !important;
-  }
-
-  /deep/ .ant-collapse-content-box{
-    padding-top: 4px !important;
-    padding-block: 0 !important;
-  }
-
-  .right-content{
-    /deep/ .ant-form-item-label {
-      height:36px !important;
-      line-height: 36px !important;
-      // border: 1px solid #f00;
-    }
-    /deep/ .ant-form-item-control{
-      height:36px !important;
-      line-height: 36px !important;
-    }
-  }
-
-  // .sender-label{
-  //   .ant-form-explain{
-  //     display: none !important;
-  //   }
-  // } 
-// }
+@import url('../style/mailingInfo.less');
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/selectView.vue b/src/views/main/BookingLedger/detail/modules/selectView.vue
new file mode 100644
index 0000000..7f56b54
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/selectView.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="select-content">
+    <a-select
+      size="small"
+      class="customer-input"
+      v-model="value"
+      show-search
+      :filter-option="filterOption"
+      :dropdownMatchSelectWidth="false"
+      @change="debounce(handleChange, 0, $event)"
+      @focus="getSelectFirst"
+    >
+      <a-select-option v-for="(item, index) in selectList" :key="index" :value="index">
+        <template v-for="(label, lindex) in showLabel">
+          {{ item[label] }}
+          <template v-if="lindex != showLabel.length - 1"> / </template>
+        </template>
+      </a-select-option>
+    </a-select>
+  </div>
+</template>
+<script>
+import {
+ GetYardlist
+} from '@/api/modular/main/BookingLedger'
+let timer
+export default {
+  name: '',
+  props: {
+    defaultVal: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    searchApi: {
+      type: String,
+      default: ''
+    },
+    searchQuery: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 注意，需要显示的字段放在第一位
+    showLabel: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      value: this.defaultVal || '',
+      selectList: [],
+      inEdit: false
+    }
+  },
+  watch: {
+    defaultVal(nval, oval) {
+      if (this.inEdit) { return false }
+      console.log('select - 默认值发生变化', nval)
+      this.value = nval
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    debounce(func, wait, ...args) {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        func.apply(this, args)
+      }, wait)
+    },
+    getFromSelectData(func, ...args) {
+      return new Promise((resolve, reject) => {
+        func(...args).then((res) => {
+          if (res.code === 200) {
+            resolve(res.data);
+          } else {
+            reject(res)
+          }
+        })
+      });
+    },
+    emnuSelectApi (type) {
+      switch (type) {
+        case 'GetYardlist':
+          return GetYardlist
+      }
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    handleChange (e, index) {
+      this.inEdit = true
+      setTimeout(() => {
+        this.inEdit = false
+      }, 800)
+      this.value = this.selectList[e][this.showLabel[0]]
+      this.$emit('change', {
+        type: this.type,
+        res: this.selectList[e]
+      })
+      console.log(e, this.selectList[e])
+    },
+    getSelectFirst (e) {
+      console.log(' ====  select 首次获取焦点  ====', e)
+      if (!e) {
+        this.getFromSelectData(this.emnuSelectApi(this.searchApi), this.searchQuery).then((data) => {
+          if (data.rows) {
+            this.selectList = data.rows
+          } else {
+            this.selectList = data
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+
+</style>
diff --git a/src/views/main/BookingLedger/detail/style/mailingInfo.less b/src/views/main/BookingLedger/detail/style/mailingInfo.less
new file mode 100644
index 0000000..59d3eea
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/style/mailingInfo.less
@@ -0,0 +1,482 @@
+.collapse-box {
+    margin-bottom: 2px;
+    background: #fff;
+  }
+  .base-tit {
+    font-size: 14px;
+    font-weight: 600;
+    color: #666;
+    position: relative;
+    height: 34px;
+    line-height: 40px;
+    margin-top: -5px;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 20px;
+      background: @primary-color;
+      top: 9px;
+      left: 0px;
+    }
+    i {
+      margin-right: 7px;
+      font-weight: 500;
+      font-size: 18px;
+      color: @primary-color;
+    }
+  }
+  .left-sender-box{
+    padding-top: 4px;
+  }
+  .sender,
+  .consignee,
+  .notifier {
+    // margin-bottom: 10px;
+    .top {
+      margin-bottom: 4px;
+      height: 26px;
+      line-height: 26px;
+      overflow: hidden;
+      display: flex;
+      .name {
+        display: inline-block;
+        font-size: 13px;
+        margin-right: 10px;
+        color: #666;
+        .iconfont {
+          margin-right: 4px;
+          font-weight: 600;
+        }
+      }
+      .save-btn {
+        height: 24px;
+        line-height: 22px;
+        margin-left: 10px;
+        margin-right: 10px;
+        span {
+          margin-left: 4px !important;
+        }
+      }
+      .right {
+        float: right;
+        margin-top: 2px;
+        margin-right: 25px;
+      }
+      .customer-input {
+        flex: 1;
+      }
+      .btn {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        // background: #c1e0ff;
+        color: @primary-color;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        margin-left: 4px;
+        cursor: pointer;
+        position: relative;
+        vertical-align: top;
+        margin-top: 0;
+        &::before {
+          content: '';
+          width: 100%;
+          height: 100%;
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: @primary-color;
+          opacity: 0.2;
+          z-index: 0;
+        }
+      }
+      .btn-circle {
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        // background: #c1e0ff;
+        color: @primary-color;
+        text-align: center;
+        line-height: 24px;
+        font-size: 12px;
+        margin-right: 4px;
+        cursor: pointer;
+        margin-top: 2px;
+        position: relative;
+        vertical-align: top;
+        margin-top: 0;
+        border-radius: 50%;
+        &::before {
+          content: '';
+          width: 100%;
+          height: 100%;
+          display: block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: @primary-color;
+          opacity: 0.2;
+          z-index: 0;
+          border-radius: 50%;
+        }
+      }
+    }
+    .bottom {
+      display: flex;
+      .input-box {
+        margin-top: 10px;
+        flex: 1;
+        font-size: 12px;
+        line-height: 20px;
+      }
+      textarea {
+        line-height: 22px;
+      }
+      .line-count {
+        width: 24px;
+        padding-top: 3px;
+        height: 130px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        // max-height: 192px;
+        // overflow-y: auto;
+        div {
+          text-align: right;
+          height: 22px;
+          line-height: 22px;
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+  }
+  .sender-label {
+    position: relative;
+    margin-bottom: 0px !important;
+    margin-top: 6px;
+    /deep/ .ant-form-item-children-icon{
+      position: absolute;
+      top: calc(100% + 15px);
+      left: 0;
+    }
+    /deep/ .ant-form-explain {
+      display: none;
+      padding-left: 33px;
+      margin-top: -15px;
+      margin-bottom: 10px;
+    }
+  }
+  .yard-box {
+    position: relative;
+    margin-top: 5px;
+    i {
+      color: @primary-color;
+      margin-top: -5px !important;
+      cursor: pointer;
+    }
+  }
+  .yarn-label {
+    position: relative;
+    /deep/ .ant-form-item-children-icon {
+      // position: absolute;
+      // top: 13px;
+      // right: 44px;
+      display: none;
+    }
+    .customer-input{
+      margin-right: 4px;
+    }
+  }
+  /deep/ .ant-form-item-children-icon .anticon-check-circle {
+    display: none;
+  }
+  .content {
+    .label {
+      margin-bottom: 10px;
+      font-size: 14px;
+    }
+  }
+  .feeself {
+    position: absolute;
+    transform: scale(0.8);
+    // 原始样式
+    // top: -3px;
+    // right: -63px;
+    // 双层样式
+    top: 8px;
+    // left: 104px;
+    right: -4px;
+    button{
+      line-height: 18px;
+      margin-top: 0px;
+      height: 20px;
+      font-size: 13px;
+    }
+    /deep/ .ant-btn-primary{
+      color: #fff !important;
+    }
+  }
+  .from-label {
+    margin-bottom: 0;
+  }
+  /*多余线条去掉 */
+  .ant-collapse-item {
+    border-bottom: none;
+  }
+  
+  .line-box {
+    display: flex;
+    margin-top: 6px;
+    overflow: hidden;
+    span.unit {
+      font-size: 12px;
+      color: #999;
+      display: inline-block;
+      text-align: center;
+      line-height: 28px;
+      padding-left: 5px;
+    }
+    .edit-icon {
+      font-size: 14px;
+      line-height: 28px;
+      margin-left: 4px;
+      cursor: pointer;
+    }
+  }
+  
+  .required {
+    padding-left: 10px;
+    position: relative;
+    &::before {
+      display: inline-block;
+      margin-right: 4px;
+      color: #f5222d;
+      font-size: 14px;
+      font-family: SimSun, sans-serif;
+      line-height: 1;
+      content: '*';
+      position: absolute;
+      top: 8px;
+      left: 0;
+    }
+  }
+  
+  /deep/ .right-content .ant-form-explain {
+    display: none !important;
+  }
+  
+  @media (max-width: 1800px) {
+    // .feeself {
+    //   right: -75px !important;
+    // }
+  }
+  
+  @media (max-width: 1700px) {
+    .yard-box {
+      i {
+        margin-top: -11px !important;
+      }
+    }
+    // .feeself {
+    //   top: 6px !important;
+    //   right: -43px !important;
+    //   .ant-checkbox-wrapper{
+    //     span{
+    //       padding: 0 4px;
+    //     }
+    //   }
+    // }
+    .yarn-label {
+      position: relative;
+      /deep/ .ant-form-item-children-icon {
+        display: none;
+      }
+    }
+  }
+  
+  @media (max-width: 1622px) {
+    // .feeself {
+    //   top: 6px !important;
+    //   right: -52px !important;
+    // }
+  }
+  
+  @media (max-width: 1495px) {
+    // .feeself {
+    //   top: 6px !important;
+    //   right: -61px !important;
+    // }
+  }
+  
+  .has-error {
+    .ant-input {
+      margin-right: 0 !important;
+    }
+    .ant-input-suffix {
+      padding-right: 0 !important;
+    }
+    .ant-select-selection__rendered {
+      margin-right: 0 !important;
+      line-height: 24px;
+    }
+    .ant-select-arrow {
+      right: 0 !important;
+    }
+  }
+  
+  .has-success {
+    .ant-input {
+      margin-right: 0 !important;
+    }
+    .ant-input-suffix {
+      padding-right: 0 !important;
+    }
+    .ant-select-selection__rendered {
+      margin-right: 0 !important;
+    }
+    .ant-select-arrow {
+      right: 0 !important;
+    }
+  }
+  
+  /deep/ .has-success .ant-select-selection-selected-value {
+    padding-right: 0 !important;
+  }
+  /deep/ .has-error .ant-select-selection-selected-value {
+    padding-right: 0 !important;
+  }
+  
+  /deep/ .has-success .ant-select-arrow {
+    right: 8px !important;
+  }
+  /deep/ .has-error .ant-select-arrow {
+    right: 8px !important;
+  }
+  
+  .text-entry-box {
+    .tit {
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 6px;
+    }
+    .total {
+      font-weight: 600;
+      padding-left: 10px;
+    }
+    .text-res {
+      margin-top: 20px;
+      .kgs-label {
+        display: flex;
+        .left {
+          line-height: 28px;
+          display: block;
+          width: 68px;
+          text-align: left;
+        }
+        .unit {
+          display: block;
+          width: 60px;
+          margin-left: 10px;
+          text-align: left;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+  /deep/ .ant-select-selection__clear {
+    right: 10px !important;
+    margin-top: -4px !important;
+  }
+  
+  /deep/ form .has-feedback :not(.ant-input-group-addon) > .ant-select .ant-select-selection__clear {
+    right: 10px !important;
+    margin-top: -4px !important;
+  }
+  
+  /deep/ form .has-feedback .ant-input-affix-wrapper .ant-input-suffix {
+    right: 0px !important;
+    padding-right: 10px;
+  }
+  /deep/ form .has-feedback .ant-calendar-picker-icon,
+  form .has-feedback .ant-time-picker-icon,
+  form .has-feedback .ant-calendar-picker-clear,
+  form .has-feedback .ant-time-picker-clear {
+    right: 10px !important;
+  }
+  
+  // .has-error.has-feedback{
+  .pkgs-line-box {
+    /deep/ .ant-form-item-children-icon {
+      right: 18px !important;
+    }
+  }
+  .kgs-line-box {
+    /deep/ .ant-form-item-children-icon {
+      right: 44px !important;
+    }
+  }
+  .cbm-line-box {
+    /deep/ .ant-form-item-children-icon {
+      right: 48px !important;
+    }
+  }
+  
+  .right-content-top {
+    padding-bottom:4px;
+    margin-bottom:4px;
+    overflow:hidden;
+    position: relative;
+    &::before{
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 10px;
+      width: 92%;
+      height:2px;
+      border-bottom: 1px dashed #ddd;
+    }
+  }
+  
+  /deep/ .ant-input-suffix {
+    color: rgba(0, 0, 0, 0.25);
+    // display: none;
+  }
+  /deep/ .ant-input-affix-wrapper:hover {
+    .ant-input-suffix {
+      display: block;
+    }
+  }
+  
+  /deep/ .ant-calendar-picker-clear {
+    color: rgba(0, 0, 0, 0.25) !important;
+  }
+  
+    /deep/ .ant-collapse-header{
+      padding: 4px 10px !important;
+    }
+  
+    /deep/ .ant-collapse-content-box{
+      padding-top: 4px !important;
+      padding-block: 0 !important;
+    }
+  
+    .right-content{
+      /deep/ .ant-form-item-label {
+        height:36px !important;
+        line-height: 36px !important;
+        // border: 1px solid #f00;
+      }
+      /deep/ .ant-form-item-control{
+        height:36px !important;
+        line-height: 36px !important;
+      }
+    }
+  
\ No newline at end of file

From 4b3c6b4a93be6da18b97f1c09d4cc78dd619c654 Mon Sep 17 00:00:00 2001
From: lilu <lilu@myshipping.net>
Date: Thu, 2 Mar 2023 14:42:00 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BB=B6=E6=95=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/main/BookingLedger/detail/modules/mailingInfo.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index c6fbb9d..c0236b0 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -1319,16 +1319,22 @@ export default {
         this.textEntryModalTitle = '件数/包装'
         if (this.details.pkgstotal) {
           this.pkgsTextChange()
+        } else {
+          this.pkgstotalRes = 0
         }
       } else if (type === 'kgs') {
         this.textEntryModalTitle = '毛重'
         if (this.details.kgstotal) {
           this.kgsTextChange()
+        } else {
+          this.kgstotalRes = 0
         }
       } else if (type === 'cbm') {
         this.textEntryModalTitle = '尺码'
         if (this.details.cbmtotal) {
           this.cbmTextChange()
+        } else {
+          this.cbmtotalRes = 0
         }
       }
     },