Merge branch 'master' of http://60.209.125.238:13080/whm/BookingHeChuanFront

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

@@ -178,6 +178,8 @@ export default {
       data.shipper = ''
       data.consignee = ''
       data.notifyparty = ''
+      data.pid = this.$route.query.id
+      data.id = 0
       if (!data.bookingEDIExt) {
         data.bookingEDIExt = {
           weiTuoFang: '',
@@ -211,7 +213,8 @@ export default {
       // this.init()
     },
     saveFun () {
-      if (this.editDetails.id !== 0) {
+      debugger
+      if (this.editDetails.id !== 0 && Number(this.editDetails.id) !== Number(this.$route.query.id)) {
         this.bookingOrderUpdate()
       } else {
         this.bookingOrderAdd()
@@ -249,12 +252,18 @@ export default {
       }
       let data = JSON.parse(JSON.stringify(this.editDetails))
       delete data.isNoSave
+      data.pid = this.$route.query.id
+      data.id = 0
+      data.ctnInputs.map((item, index) => {
+        item.id = 0
+      })
       BookingOrderAdd(data)
       .then((res) => {
         if (res.success) {
           this.sedOrderList[this.editIndex].isNoSave = false
           this.editDetails.isNoSave = false
           this.sedOrderList[this.editIndex].id = res.data
+          debugger
           this.$message.success('保存成功')
           this.$emit('changeHB', this.sedOrderList)
           this.$forceUpdate()
@@ -288,6 +297,8 @@ export default {
       const _data = JSON.parse(JSON.stringify(this.editDetails))
       _data.isNoSave = true
       _data.hblno = ''
+      _data.pid = this.$route.query.id
+      _data.id = 0
       if (!_data.bookingEDIExt) {
         _data.bookingEDIExt = {
           weiTuoFang: '',

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

@@ -108,6 +108,7 @@ import {
   BookingOrderAddOrUpdate
 } from '@/api/modular/main/BookingLedger'
 import { mapActions, mapGetters } from 'vuex'
+import { string } from 'clipboard'
 const initDetail = {
     id: 0,
     parentId: 0,
@@ -571,7 +572,11 @@ export default {
             // this.init()
             this.$forceUpdate()
           } else {
+            if (typeof (res.message) === 'string') {
               this.$message.error(res.message)
+            } else {
+              this.$message.error('保存失败')
+            }
           }
         })
         .catch(err => {
@@ -598,7 +603,11 @@ export default {
             })
             this.$forceUpdate()
           } else {
+            if (typeof (res.message) === 'string') {
               this.$message.error(res.message)
+            } else {
+              this.$message.error('保存失败')
+            }
           }
         })
         .catch(err => {
@@ -923,7 +932,7 @@ export default {
   // margin-top: 4px !important;
 }
 .ant-form-item-label{
-  line-height: 30px !important;
+  // line-height: 30px !important;
   // border: 1px solid #f00;
 }
 .ant-form-item-control-wrapper{

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

@@ -120,9 +120,8 @@ export default {
           renderBodyCell: ({ row, column, rowIndex }, h) => {
             return (
               <a-select
-                show-search
                 value={row['ctnall']}
-                option-filter-prop="children"
+                allow-clear={true}
                 style="width: 120px"
                 on-change={val => {
                   const data = this.ctnList[val]
@@ -177,8 +176,8 @@ export default {
           renderBodyCell: ({ row, column, rowIndex }, h) => {
             return (
               <a-select
-                show-search
+                allow-clear={true}
-                value={row['kindpkgs']}
+                defaultValue={row['kindpkgs']}
                 option-filter-prop="children"
                 style="width: 120px"
                 on-change={val => {
@@ -413,22 +412,62 @@ export default {
             this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
             setTimeout(() => {
               this.$message.destroy()
+              this.$message.config({
+                top: `100px`,
+                duration: 2,
+                maxCount: 3
+              })
             }, 2000)
             return false
           }
           if (column.field === 'cntrno') {
              const res = this.checkCntrno(changeValue)
              if (res !== '') {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
               this.$message.error(res)
-              row['cntrno'] = ''
+              // row['cntrno'] = ''
               setTimeout(() => {
                 this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
               }, 2000)
-              return false
              }
           }
         },
         afterCellValueChange: ({ row, column, changeValue }) => {
+          if (['kgs', 'cbm', 'tareweight', 'weighkgs'].includes(column.field)) {
+            changeValue = changeValue + ''
+            const valIndex = changeValue.indexOf('.') + 1
+            const valCount = changeValue.length - valIndex
+            console.log(valCount)
+            // 判断是不是大于4位小数
+            if (valCount > 4) {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('仅支持小数点后四位')
+              row[column.field] = changeValue.substr(0, valIndex + 4)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            }
+          }
           if (column.field === 'pkgs') {
             let num = 0
             this.tableData.map((item, index) => {
@@ -460,8 +499,13 @@ export default {
             // this.tableData[nowIndex]['weighkgs'] = Number(this.tableData[nowIndex].kgs) + Number(this.tableData[nowIndex].tareweight)
             // row['weighkgs'] = Number(row['kgs']) + Number(row['tareweight'])
             row['weighkgs'] = this.calc(Number(row['kgs']), Number(row['tareweight']), '+')
+            const kgsVal = row['weighkgs'] + ''
+            const kgsIndex = kgsVal.indexOf('.') + 1
+            const kgsCount = kgsVal.length - kgsIndex
+            if (kgsCount > 4) {
+              row['weighkgs'] = kgsVal.substr(0, kgsIndex + 4)
+            }
           }
-          
         },
         cellValueChange: ({ row, column }) => {
           console.log('编辑', row, column)
@@ -483,6 +527,11 @@ export default {
             row['cntrno'] = ''
             setTimeout(() => {
               this.$message.destroy()
+              this.$message.config({
+                top: `100px`,
+                duration: 2,
+                maxCount: 3
+              })
             }, 2000)
             return false
           }
@@ -769,6 +818,7 @@ export default {
         rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
       }
       this.tableData.push(data)
+      console.log('== 新增 ==', this.tableData)
     },
     removeLine() {
       this.selectArr.map((item, index) => {
@@ -886,13 +936,33 @@ export default {
           if (res.success) {
             const data = JSON.parse(res.data)
             const addTable = []
+            const cntrnoArr = []
             this.tableData.map((item, index) => {
               if (!item.cntrno) {
-                delete this.tableData[index]
+                // delete this.tableData[index]
+                this.tableData.splice(index, 1)
+              } else {
+                cntrnoArr.push(item.cntrno)
               }
             })
             const lastNum = this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
             data.map((item, index) => {
+              if (cntrnoArr.includes(item.CNTRNO)) {
+                this.tableData[cntrnoArr.indexOf(item.CNTRNO)] = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  ctnnum: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnnum,
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  pkgs: item.PKGS,
+                  kindpkgs: item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weightype,
+                  weighkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weighkgs
+                }
+              } else {
                 const _data = {
                   rowKey: lastNum + index,
                   ctnall: item.CTNALL,
@@ -908,6 +978,7 @@ export default {
                   weighkgs: ''
                 }
                 addTable.push(_data)
+              }
             })
 
             this.tableData = [...this.tableData, ...addTable]

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

@@ -34,9 +34,10 @@
               <div class="bottom">
                 <a-textarea
                   id="shipper-scroll"
-                  v-model="details.shipper"
+                  :defaultValue="details.shipper"
                   :auto-size="{ minRows: 2, maxRows: 5 }"
                   style="height: 100px"
+                  @blur="textareaChange($event, 'shipper')"
                 />
                 <div
                   class="line-count"
@@ -72,9 +73,10 @@
               <div class="bottom">
                 <a-textarea
                   id="consignee-scroll"
-                  v-model="details.consignee"
+                  :defaultValue="details.consignee"
                   :auto-size="{ minRows: 2, maxRows: 5 }"
                   style="height: 100px"
+                  @blur="textareaChange($event, 'consignee')"
                 />
                 <div
                   class="line-count"
@@ -108,9 +110,10 @@
               <div class="bottom">
                 <a-textarea
                   id="notifyparty-scroll"
-                  v-model="details.notifyparty"
+                  :defaultValue="details.notifyparty"
                   :auto-size="{ minRows: 2, maxRows: 5 }"
                   style="height: 100px"
+                  @blur="textareaChange($event, 'notifyparty')"
                 />
                 <div
                   class="line-count"
@@ -123,7 +126,7 @@
             </div>
           </a-col>
           <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
-            <a-form>
+            <a-form :selfUpdate="true">
               <a-row :gutter="16">
                 <a-col :span="12">
                   <a-form-item
@@ -298,193 +301,193 @@
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="装货港"
+                    label="收货代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
                     <auto-complete
                       :allowClear="true"
-                      v-model="details.portload"
+                      v-model="details.placereceiptid"
                       class="customer-input"
-                      :data-source="portloadDataArr"
+                      :data-source="placereceiptDataArr"
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px'}"
-                      @select="portloadSelect"
+                      @select="placereceiptSelect"
-                      @change="portloadChange"
+                      @change="placereceiptChange"
-                      @focus="portloadChange"
+                      @focus="placereceiptChange"
                     ></auto-complete>
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="装货港代码"
+                    label="收货地"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.portloadid" />
+                    <a-input :allowClear="true" v-model="details.placereceipt" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="中转港"
+                    label="装货港代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
                     <auto-complete
                       :allowClear="true"
-                      v-model="details.transport"
+                      v-model="details.portloadid"
                       class="customer-input"
-                      :data-source="transportDataArr"
+                      :data-source="portloadDataArr"
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px'}"
-                      @select="transportSelect"
+                      @select="portloadSelect"
-                      @change="transportChange"
+                      @change="portloadChange"
-                      @focus="transportChange"
+                      @focus="portloadChange"
-                    />
+                    ></auto-complete>
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="中转港代码"
+                    label="装货港"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.transportid" />
+                    <a-input :allowClear="true" v-model="details.portload" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="卸货港"
+                    label="中转港代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
                     <auto-complete
                       :allowClear="true"
-                      v-model="details.portdischarge"
+                      v-model="details.transportid"
                       class="customer-input"
-                      :data-source="portdischargeDataArr"
+                      :data-source="transportDataArr"
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px'}"
-                      @select="portdischargeSelect"
+                      @select="transportSelect"
-                      @change="portdischargeChange"
+                      @change="transportChange"
-                      @focus="portdischargeChange"
+                      @focus="transportChange"
                     />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="卸货港代码"
+                    label="中转港"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.portdischargeid" />
+                    <a-input :allowClear="true" v-model="details.transport" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="目的地"
+                    label="卸货港代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
                     <auto-complete
                       :allowClear="true"
-                      v-model="details.destination"
+                      v-model="details.portdischargeid"
                       class="customer-input"
-                      :data-source="destinationDataArr"
+                      :data-source="portdischargeDataArr"
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px'}"
-                      @select="destinationSelect"
+                      @select="portdischargeSelect"
-                      @change="destinationChange"
+                      @change="portdischargeChange"
-                      @focus="destinationChange"
+                      @focus="portdischargeChange"
                     />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="目的代码"
+                    label="卸货港"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.destinationid" />
+                    <a-input :allowClear="true" v-model="details.portdischarge" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="交货地"
+                    label="目的代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
                     <auto-complete
                       :allowClear="true"
-                      v-model="details.placedelivery"
+                      v-model="details.destinationid"
                       class="customer-input"
-                      :data-source="placedeliveryDataArr"
+                      :data-source="destinationDataArr"
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px'}"
-                      @select="placedeliverySelect"
+                      @select="destinationSelect"
-                      @change="placedeliveryChange"
+                      @change="destinationChange"
-                      @focus="placedeliveryChange"
+                      @focus="destinationChange"
                     />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="交货代码"
+                    label="目的地"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.placedeliveryid" />
+                    <a-input :allowClear="true" v-model="details.destination" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="收货地"
+                    label="交货代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
                     <auto-complete
                       :allowClear="true"
-                      v-model="details.placereceipt"
+                      v-model="details.placedeliveryid"
                       class="customer-input"
-                      :data-source="placereceiptDataArr"
+                      :data-source="placedeliveryDataArr"
                       :dropdown-match-select-width="false"
                       :dropdown-style="{ width: '300px'}"
-                      @select="placereceiptSelect"
+                      @select="placedeliverySelect"
-                      @change="placereceiptChange"
+                      @change="placedeliveryChange"
-                      @focus="placereceiptChange"
+                      @focus="placedeliveryChange"
-                    ></auto-complete>
+                    />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-item
                     class="from-label"
-                    label="收货代码"
+                    label="交货地"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.placereceiptid" />
+                    <a-input :allowClear="true" v-model="details.placedelivery" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
@@ -495,7 +498,7 @@
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.pkgs" />
+                    <a-input :allowClear="true" v-model="details.pkgs" type="number"/>
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
@@ -527,7 +530,9 @@
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.kgs" />
+                    <div class="line-box">
+                      <a-input :allowClear="true" v-model="details.kgs" /><span class="unit">KGS</span>
+                    </div>
                   </a-form-item>
                 </a-col>
                 <a-col :span="12">
@@ -538,7 +543,9 @@
                     :wrapperCol="wrapperCol"
                     has-feedback
                   >
-                    <a-input :allowClear="true" v-model="details.cbm" />
+                    <div class="line-box">
+                      <a-input :allowClear="true" v-model="details.cbm" /><span class="unit">CBM</span>
+                    </div>
                   </a-form-item>
                 </a-col>
               </a-row>
@@ -1395,6 +1402,10 @@ export default {
 
       this.details[type] = subValue
       this.$forceUpdate()
+    },
+    textareaChange (e, type) {
+      this.details[type] = e.target.value
+      console.log(type, this.details[type])
     }
   }
 }
@@ -1572,6 +1583,17 @@ export default {
   border-bottom: none;
 }
 
+.line-box{
+  display: flex;
+  span.unit{
+    font-size: 12px;
+    color: #999;
+    display: inline-block;
+    text-align: center;
+    line-height: 28px;
+    padding-left: 5px;
+  }
+}
 @media (max-width: 1700px) {
   .feeself{
     top: 15px !important;

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

@@ -69,7 +69,7 @@
     <!-- 弹窗部分 start -->
     <a-modal
       :title="emnuHeader(modelType)"
-      :width="1200"
+      :width="['bookingSpace', 'cutOff'].includes(modelType) ? 600 : 1200"
       :visible="bookingModelvisible"
       :confirmLoading="bookingModelconfirm"
       :maskClosable="false"
@@ -79,7 +79,7 @@
       <template v-if="['bookingSpace', 'cutOff'].includes(modelType)">
         <a-form>
           <a-row :gutter="16">
-            <a-col :span="11" class="book-model-box">
+            <a-col :span="24" class="book-model-box">
               <a-checkbox class="book-check" @change="bookingCheckChange" />
               <a-form-item
                 label="使用货代代码"
@@ -90,17 +90,17 @@
                 <a-input :allowClear="true" v-model="bookingModelFrom.forwarderCode" />
               </a-form-item>
             </a-col>
-            <a-col :span="12">
+            <a-col :span="24">
               <a-form-item
                 label="货代称呼"
-                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                 :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
                 has-feedback
               >
                 <a-input :allowClear="true" v-model="bookingModelFrom.forwarderName" />
               </a-form-item>
             </a-col>
-            <a-col :span="10">
+            <a-col :span="24">
               <a-form-item
                 label="文件功能"
                 :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
@@ -1449,7 +1449,7 @@ export default {
 /deep/ .ant-form-file {
   .ant-form-item-label {
     margin-top: -5px;
-    margin-left: 12px;
+    margin-right: 12px;
   }
 }
 /*弹窗按钮颜色修改 */

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

@@ -285,7 +285,8 @@ export default {
       bookingAttachType: [],
       attachName: '',
       attachCode: '',
-      locaService: []
+      locaService: [],
+      editRemarkVal: null
     }
   },
   created() {
@@ -373,12 +374,14 @@ export default {
     },
     handleModelSubmit() {
       AddRemark({
+        id: this.editRemarkVal ? this.editRemarkVal.id : 0,
         pId: this.id,
         remark: this.remarkVal
       })
         .then(res => {
           if (res.success) {
             this.$message.info('备注提交成功')
+            this.editRemarkVal = null
             this.handleModelCancel()
             this.getRemark()
           }
@@ -389,10 +392,13 @@ export default {
     },
     editRemark (data) {
       console.log('=== 暂无接口， 需要添加编辑备注 ===')
-      // 需要新增接口
+      this.remarkModelvisible = true
+      this.remarkVal = data.remark
+      this.editRemarkVal = data
     },
     handleModelCancel() {
       this.remarkModelvisible = false
+      this.editRemarkVal = null
     },
     // 备注 - end
 
@@ -589,6 +595,7 @@ export default {
   .no-data {
     text-align: center;
     line-height: 20px;
+    display: block;
     .iconfont {
       font-size: 40px;
       line-height: 70px;
@@ -899,6 +906,7 @@ export default {
     color: #999;
     padding: 20px 0;
     line-height: 30px;
+    display: block;
     .text {
       display: inline-block;
     }

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

@@ -103,6 +103,7 @@
             <vxe-grid
               ref="xGrid"
               v-bind="gridOptions"
+              row-class-name="line-box"
               @page-change="handlePageChange"
               @cell-dblclick="handledbclick"
               @resizable-change="resizableChange"
@@ -139,6 +140,19 @@
                   </div>
                 </div>
               </template>
+              <template #bookremark="{ row }">
+                <div class="bookremark">
+                  <span class="reamrk-label">
+                    <template v-for="remark in row.bookremark">
+                      {{ remark.remark }}
+                    </template>
+                  </span>
+                  <div class="reamrk-list" v-if="row.bookremark.length > 0">
+                    <div class="title">备注内容：</div>
+                    <div class="list" v-for="(remarkItem, rindex) in row.bookremark" :key="rindex"> <i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }} </div>
+                  </div>
+                </div>
+              </template>
             </vxe-grid>
           </div>
         </x-card>
@@ -1011,24 +1025,24 @@ export default {
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 /*列表双列背景色 */
-/deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
+// /deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
-  // background: #f5f9fe;
+//   // background: #f5f9fe;
-  position: relative;
+//   position: relative;
-  background: #fff;
+//   background: #fff;
-  z-index: 1;
+//   z-index: 1;
-  &::after {
+//   &::after {
-    content: '';
+//     content: '';
-    position: absolute;
+//     position: absolute;
-    top: 0;
+//     top: 0;
-    left: 0;
+//     left: 0;
-    width: 100%;
+//     width: 100%;
-    height: 100%;
+//     height: 100%;
-    z-index: 0;
+//     z-index: 0;
-    background: @primary-color;
+//     background: @primary-color;
-    opacity: 0.04;
+//     opacity: 0.04;
-    z-index: -1;
+//     z-index: -1;
-  }
+//   }
-}
+// }
 /*列表操作按钮颜色 */
 /deep/ .operate-btn {
   color: @primary-color;
@@ -1160,6 +1174,12 @@ export default {
   text-align: center;
   // background: #f99;
 }
+.reamrk-btns{
+  overflow: visible;
+}
+
+
+
 @media (min-width: 1200px) and (max-width:1600px){
   .from-label {
     padding-right: 0 !important;
@@ -1180,4 +1200,109 @@ export default {
     }
   }
 }
+
+/deep/ .book-remark-box {
+  >.vxe-cell {
+    overflow: visible !important;
+  }
+  /deep/ .vxe-cell {
+    overflow: visible !important;
+  }
+}
+
+.bookremark{
+  position: relative;
+  .reamrk-label{
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+  }
+  .reamrk-list{
+    position: absolute;
+    top:26px; left: 0;
+    width: 300px;
+    background: #fff;
+    box-shadow: 0 0 10px #eee;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    padding:5px 20px 10px 20px;
+    z-index: 999;
+    white-space: normal;
+    text-align: left;
+    display: none;
+    z-index: 999 !important;
+    .title{
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .list{
+      border-bottom: 1px solid #eee;
+      padding: 6px 0;
+      line-height: 18px;
+      font-size: 12px;
+      color: #666;
+      &:nth-last-of-type(1){
+        border: none;
+      }
+      .icon{
+        margin-right: 4px;
+        color: @primary-color;
+      }
+    }
+  }
+  &:hover{
+    .reamrk-list{
+      display: block;
+    }
+  }
+}
+/deep/ .line-box:nth-last-of-type(-n+5){
+  .book-remark-box{
+    .bookremark{
+      .reamrk-list{
+        top: inherit;
+        bottom: calc(100% + 8px)
+      }
+    }
+  }
+}
+
+// /deep/ .vxe-body--row.row--stripe::nth-of-type(1){
+//   .reamrk-list{
+//     display: block;
+//   }
+// }
+
+/deep/.line-box:nth-of-type(2n){
+  position: relative;
+  background: #fff;
+  >*{
+    z-index: 1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: @primary-color;
+    opacity: 0.04;
+    z-index: 0;
+  }
+  .book-remark-box{
+    .bookremark{
+      .reamrk-list{
+        top: inherit;
+        bottom: calc(100% + 8px)
+      }
+    }
+  }
+}
+
 </style>

src/views/main/BookingLedger/list/modules/initData.js

@@ -57,6 +57,7 @@ export default {
     },
     { field: 'etd', label: 'ETD', width: 110, title: '开船日期', showHeaderOverflow: true, sortable: true, slots: { default: 'etd' } },
     { field: 'voyno', label: 'VOYNO', width: 120, title: '海关航次', showHeaderOverflow: true },
+    { field: 'bookremark', label: 'BOOKREMARK', width: 120, title: '备注', className: 'book-remark-box', showOverflow: false, slots: { default: 'bookremark' } },
     { field: 'bookingStatus', label: 'BOOKINGSTATUS', width: 120, title: '订舱状态', showHeaderOverflow: true },
     { field: 'vgm', label: 'VGM', width: 120, title: 'VGM', showHeaderOverflow: true },
     { field: 'billStatus', label: 'BILLSTATUS', width: 120, title: '提单状态', showHeaderOverflow: true },