From 87d16b4f1f86d51323c43bb37775a0fa616d3462 Mon Sep 17 00:00:00 2001
From: jiangkuan <jiangkuan@myshipping.net>
Date: Sun, 23 Apr 2023 16:59:25 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/index.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index dd96cb2..0c5a7f9 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -68,6 +68,12 @@
             </a-upload>
             <a-button v-if="hasPerm('sysUser:export')" icon="down-circle" @click="sysUserExport()">导出 </a-button>
           </template>
+
+          <span slot="sysEmpInfo" slot-scope="text">
+            {{ departmentFilter(text) }}
+          </span>
+
+
           <span slot="sex" slot-scope="text">
             {{ sexFilter(text) }}
           </span>
@@ -169,6 +175,13 @@ export default {
           title: '姓名',
           dataIndex: 'name'
         },
+        {
+          title: '部门',
+          dataIndex: 'sysEmpInfo',
+          scopedSlots: {
+            customRender: 'sysEmpInfo'
+          }
+        },
         {
           title: '性别',
           dataIndex: 'sex',
@@ -243,6 +256,10 @@ export default {
     }
   },
   methods: {
+    departmentFilter(sysEmpInfo) {
+    //  console.log('sysEmpInfo===>>',sysEmpInfo)
+     return sysEmpInfo.orgName
+    },
     sexFilter(sex) {
       // eslint-disable-next-line eqeqeq
       const values = this.sexDictTypeDropDown.filter(item => item.code == sex)

From fa8d173430c05c67c1618763093046ccc4c56261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?= <963808678@qq.com>
Date: Mon, 24 Apr 2023 14:53:20 +0800
Subject: [PATCH 2/4] 4/24

---
 src/api/modular/main/SendCar.js  | 24 ++++++++++++++++++++
 src/views/main/SendCar/index.vue | 39 +++++++++++++++++++++++++++++---
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/api/modular/main/SendCar.js b/src/api/modular/main/SendCar.js
index ba347bc..23f7b69 100644
--- a/src/api/modular/main/SendCar.js
+++ b/src/api/modular/main/SendCar.js
@@ -72,6 +72,18 @@ export function BookingTruckCancel(parameter) {
     params: parameter
   })
 }
+/**
+ * 批量撤销派车
+ *
+ * @author Myshipping
+ */
+export function BookingTruckCancelBatch(parameter) {
+  return axios({
+    url: '/BookingTruck/CancelBatch',
+    method: 'post',
+    data: parameter
+  })
+}
 /**
  * 提交派车
  *
@@ -84,6 +96,18 @@ export function BookingTruckSubmit(parameter) {
     data: parameter
   })
 }
+/**
+ * 批量提交派车
+ *
+ * @author Myshipping
+ */
+export function BookingTruckSubmitBatch(parameter) {
+  return axios({
+    url: '/BookingTruck/SubmitBatch',
+    method: 'post',
+    data: parameter
+  })
+}
 /**
  * 删除派车
  *
diff --git a/src/views/main/SendCar/index.vue b/src/views/main/SendCar/index.vue
index caacc6c..98c71ff 100644
--- a/src/views/main/SendCar/index.vue
+++ b/src/views/main/SendCar/index.vue
@@ -105,8 +105,9 @@
       <vxe-toolbar>
         <template #buttons>
           <div class="nav-box">
-            <div class="nav" @click="TabsAdd"><i class="iconfont icon-jiahao2fill"></i>新增派车</div>
-            <!-- <div class="nav" @click="TabsAdd"><i class="iconfont icon-jiahao2fill"></i>撤销派车</div> -->
+            <!-- <div class="nav" @click="TabsAdd"><i class="iconfont icon-jiahao2fill"></i>新增派车</div> -->
+            <div class="nav" @click="FnSubmit"><i class="iconfont icon-jiahao2fill"></i>提交派车</div>
+            <div class="nav" @click="FnCancel"><i class="iconfont icon-jiahao2fill"></i>撤销派车</div>
           </div>
         </template>
         <template #tools>
@@ -121,6 +122,7 @@
         </template>
       </vxe-toolbar>
       <vxe-table
+        ref="XTable"
         :column-config="{ resizable: true }"
         @cell-dblclick="cellDBLClickEvent"
         :data="loadData"
@@ -132,6 +134,7 @@
         empty-text="没有更多数据了！"
         v-if="!TableType"
       >
+        <vxe-column type="checkbox" width="60"></vxe-column>
         <vxe-column type="seq" width="40" fixed="left"></vxe-column>
         <vxe-column
           v-for="item in TableColumns"
@@ -198,7 +201,9 @@ import {
   DjyCustomerGet,
   DjyUserConfigAdd,
   BookingTruckDelete,
-  DjyCustomerQuerytDjyCustomerInfo
+  DjyCustomerQuerytDjyCustomerInfo,
+  BookingTruckSubmitBatch,
+  BookingTruckCancelBatch
 } from '@/api/modular/main/SendCar'
 import columnSetting from '@/components/tableColumnSetting'
 const columns = [
@@ -461,6 +466,34 @@ export default {
         }
       })
     },
+    FnCancel() {
+      let ApiArr = []
+      let select = this.$refs.XTable.getCheckboxRecords()
+      select.forEach(item => {
+        ApiArr.push(item.id)
+      })
+      BookingTruckCancelBatch(ApiArr).then(res => {
+        if (res.data.succ) {
+          this.$message.success('撤销成功')
+        } else {
+          this.$message.error(`撤销失败,${res.data.msg}`)
+        }
+      })
+    },
+    FnSubmit() {
+      let ApiArr = []
+      let select = this.$refs.XTable.getCheckboxRecords()
+      select.forEach(item => {
+        ApiArr.push(item.id)
+      })
+      BookingTruckSubmitBatch(ApiArr).then(res => {
+        if (res.data.succ) {
+          this.$message.success('提交成功')
+        } else {
+          this.$message.error(`提交失败,${res.data.msg}`)
+        }
+      })
+    },
     TabsAdd() {
       this.$router.push({
         name: 'SendCarAdd',

From e6e3725f3aea2d1e0a49d7e93e7fe6a9dfddd05d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?= <963808678@qq.com>
Date: Mon, 24 Apr 2023 15:46:00 +0800
Subject: [PATCH 3/4] 4/24

---
 src/views/main/SendCar/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/main/SendCar/index.vue b/src/views/main/SendCar/index.vue
index 98c71ff..4ede639 100644
--- a/src/views/main/SendCar/index.vue
+++ b/src/views/main/SendCar/index.vue
@@ -217,7 +217,7 @@ const columns = [
     title: '任务流水号',
     align: 'center',
     width: '120',
-    dataIndex: 'TaskNo'
+    dataIndex: 'taskNo'
   },
   {
     title: '状态',

From 0b54827ef305061ed3699e63ab5fdaec0c0a4c68 Mon Sep 17 00:00:00 2001
From: jiangkuan <jiangkuan@myshipping.net>
Date: Mon, 24 Apr 2023 16:41:59 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=9E=E6=94=B6?=
 =?UTF-8?q?=E7=AB=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modular/main/BookingLedger.js         |    9 +
 .../main/ViewDeletedList/ViewDeletedList.vue  | 2497 +++++++++++++++++
 .../ViewDeletedList/components/autoView.vue   |  200 ++
 .../components/datePickerView.vue             |   86 +
 .../ViewDeletedList/components/inputView.vue  |  114 +
 .../ViewDeletedList/components/selectView.vue |  592 ++++
 .../components/textareaView.vue               |  113 +
 .../ViewDeletedList/modules/formLabel.vue     |  376 +++
 .../main/ViewDeletedList/modules/initData.js  |  597 ++++
 9 files changed, 4584 insertions(+)
 create mode 100644 src/views/main/ViewDeletedList/ViewDeletedList.vue
 create mode 100644 src/views/main/ViewDeletedList/components/autoView.vue
 create mode 100644 src/views/main/ViewDeletedList/components/datePickerView.vue
 create mode 100644 src/views/main/ViewDeletedList/components/inputView.vue
 create mode 100644 src/views/main/ViewDeletedList/components/selectView.vue
 create mode 100644 src/views/main/ViewDeletedList/components/textareaView.vue
 create mode 100644 src/views/main/ViewDeletedList/modules/formLabel.vue
 create mode 100644 src/views/main/ViewDeletedList/modules/initData.js

diff --git a/src/api/modular/main/BookingLedger.js b/src/api/modular/main/BookingLedger.js
index 6684fde..fe4893e 100644
--- a/src/api/modular/main/BookingLedger.js
+++ b/src/api/modular/main/BookingLedger.js
@@ -772,6 +772,15 @@ export function DeleteBookingOrder(parameter) {
     method: 'post'
   })
 }
+
+//恢复删除
+export function RecoverDeleteOrder(parameter) {
+  return axios({
+    url: '/BookingOrder/RecoverDelete?Ids=' + parameter,
+    method: 'post'
+  })
+}
+
 // 获取货物状态
 export function BookingOrderGetGoodsStatusList(parameter) {
   return axios({
diff --git a/src/views/main/ViewDeletedList/ViewDeletedList.vue b/src/views/main/ViewDeletedList/ViewDeletedList.vue
new file mode 100644
index 0000000..4c32ade
--- /dev/null
+++ b/src/views/main/ViewDeletedList/ViewDeletedList.vue
@@ -0,0 +1,2497 @@
+<template>
+    <div>
+        <vxe-toolbar>
+                <template #buttons>
+                  <div class="nav-box">
+                    <a-popconfirm
+                      title="确定恢复当前选中订舱？"
+                      ok-text="是"
+                      cancel-text="否"
+                      @confirm="removeMoreFun"
+                      @cancel="cancelRemove"
+                    >
+                      <div class="nav"><i class="iconfont icon-zhuanhuan"></i>批量恢复</div>
+                    </a-popconfirm>
+                  </div>
+                </template>
+               
+              </vxe-toolbar>
+        <vxe-grid
+                ref="xGrid"
+                v-bind="gridOptions"
+                row-class-name="line-box"
+                :height="tableHeight"
+                :checkbox_config="{ checkField: 'checked' }"
+                :scroll-x="{ gt: 10, oSize: 10, enabled: false }"
+                :scroll-y="{ gt: 20, oSize: 20, enabled: true }"
+                @page-change="handlePageChange"
+                @resizable-change="resizableChange"
+                @sort-change="tableSortChange"
+                @scroll="pageClick"
+                @checkbox-change="checkboxChangeEvent"
+              >
+                <template #mblno="{ row }">
+                  <div class="mblno">
+                    <span>{{ row.mblno }}</span>
+                    <a-icon class="CSMblnoCopy" type="copy" @click="FnCopy(row.mblno)" />
+                  </div>
+                </template>
+                <template #pono="{ row }">
+                  <div class="pono">
+                    {{ row.pono }}
+                  </div>
+                </template>
+                <template #vessel="{ row }">
+                  <div class="vessel">{{ row.vessel }}</div>
+                </template>
+                <template #remarks="{ row }">
+                  <a-popover title="备注消息">
+                    <template slot="content">
+                      <p>订舱备注： {{ row.soremark }}</p>
+                      <p>截单备注： {{ row.siremark }}</p>
+                    </template>
+                    <div class="remarks">{{ row.soremark }} / {{ row.siremark }}</div>
+                  </a-popover>
+                </template>
+                <template #etd="{ row }">
+                  <div class="etd" v-if="row.etd">{{ row.etd.substring(0, 10) }}</div>
+                </template>
+                <template #atd="{ row }">
+                  <div class="atd" v-if="row.atd">{{ row.atd.substring(0, 10) }}</div>
+                </template>
+                <template #issuedate="{ row }">
+                  <div class="atd" v-if="row.issuedate">{{ row.issuedate.substring(0, 10) }}</div>
+                </template>
+                <template #closingdate="{ row }">
+                  <div class="closingdate" v-if="row.closingdate">{{ row.closingdate.substring(0, 13) }}</div>
+                </template>
+                <template #operate="{ row }">
+                  <!-- <vxe-button
+                    class="operate-btn"
+                    type="text"
+                    icon="vxe-icon-edit"
+                    @click="editColumns(row)"
+                  ></vxe-button> -->
+                  <a-popconfirm
+                    title="确定恢复当前订舱？"
+                    ok-text="是"
+                    cancel-text="否"
+                    @confirm="removeFun(row)"
+                    @cancel="cancelRemove"
+                  >
+                    <vxe-button class="operate-btn" type="text" icon="vxe-icon-arrow-left"></vxe-button>
+                  </a-popconfirm>
+                </template>
+                <!-- <template #bookstatus="{ row }">
+                <span class="book-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex"> {{ enmuBookingBtn(btn.staCode) }}<i>/</i></span>
+              </template> -->
+                <template #bookstatus="{ row, column }">
+                  <div class="billtrace-box" :class="column.resizeWidth > 240 ? 'normal-box' : 'flex-box'">
+                    <div
+                      class="billtrace-btn"
+                      v-for="(btn, bindex) in row.bookstatus"
+                      :class="btn.staCode"
+                      :key="bindex"
+                    >
+                      <a-popover placement="topLeft" v-if="btn.staTime">
+                        <div slot="content">{{ btn.staTime }}</div>
+                        <span :class="{ active: btn.isChecked }">{{ enmuBookingBtn(btn.staCode) }}</span>
+                      </a-popover>
+                      <span :class="{ active: btn.isChecked }" v-else>{{ enmuBookingBtn(btn.staCode) }}</span>
+                      <i
+                        class="iconfont icon-xiaoyoujiantou"
+                        :class="{ hide: bindex === row.bookstatus.length - 1 }"
+                      ></i>
+                    </div>
+                  </div>
+                </template>
+                <template #bookremark="{ row }">
+                  <!-- @mouseover="remarkhover($event, row)" -->
+                  <div class="bookremark" @mouseover="remarkhover($event, row)" @mouseleave="remarkLeave($event, row)">
+                    <span class="reamrk-label">
+                      <template v-for="remark in row.bookremark">
+                        {{ remark.remark }}
+                      </template>
+                    </span>
+                  </div>
+                </template>
+                <template #lstShipOrderCompareRlt="{ row }">
+                  <div class="goods-status">
+                    <a-popover>
+                      <template slot="content">
+                        <p>
+                          比对方式:
+                          <span>{{
+                            row.lstShipOrderCompareMode
+                              ? row.lstShipOrderCompareMode == 'MANUAL'
+                                ? '手动'
+                                : '自动'
+                              : ''
+                          }}</span>
+                        </p>
+                        <p>
+                          比对时间: <span>{{ row.lstShipOrderCompareDate }}</span>
+                        </p>
+                      </template>
+                      <div v-if="row.lstShipOrderCompareRlt">
+                        <div v-if="row.lstShipOrderCompareRlt == 'DIFF'">
+                          <a-icon type="close-circle" :style="{ color: 'red' }" />
+                        </div>
+                        <div v-else-if="row.lstShipOrderCompareRlt == 'NO_DIFF'">
+                          <a-icon type="check-circle" :style="{ color: '#54bc25' }" />
+                        </div>
+                        <!-- <div v-else>
+                        {{ row.lstShipOrderCompareRltName }}
+                      </div> -->
+                      </div>
+                    </a-popover>
+
+                    <a-icon
+                      class="TablelstShipOrderCompareRltRedo"
+                      @click="excuteShippingOrderCompareBatch(row)"
+                      type="redo"
+                    />
+                  </div>
+                </template>
+                <template #goodsStatusList="{ row }">
+                  <div class="goods-status">
+                    <div class="goods-status-left">
+                      <template v-for="(status, sindex) in row.goodsStatusList">
+                        <a-popover placement="top" :key="sindex" v-show="status.finishTime || status.remark">
+                          <div slot="content">
+                            <div v-if="status.finishTime">时间：{{ status.finishTime }}</div>
+                            <div v-if="status.remark">备注：{{ status.remark }}</div>
+                            <div v-if="status.extData">显示天数：{{ status.extData }}</div>
+                          </div>
+                          <span class="goods-tip">{{ status.statusName }}</span>
+                        </a-popover>
+                      </template>
+                    </div>
+                    <!-- @mouseover="goodStatusHover($event, row)" @mouseleave="goodStatusLeave($event, row)" -->
+                    <div class="goods-status-right" @click.stop="goodStatusclick($event, row)" v-if="row.hasGoods > 0">
+                      <i class="iconfont icon-zhankai2"></i>
+                    </div>
+                  </div>
+                </template>
+
+                <template #dzRemark="{ row }">
+                  <div v-if="row.dzRemark">
+                    <a-popover placement="topLeft" :content="row.dzRemark">
+                      <span class="dzRemark">{{ row.dzRemark }}</span>
+                    </a-popover>
+                  </div>
+                </template>
+
+                <template #czRemark="{ row }">
+                  <div v-if="row.czRemark">
+                    <a-popover placement="topLeft" :content="row.czRemark">
+                      <span class="czRemark">{{ row.czRemark }}</span>
+                    </a-popover>
+                  </div>
+                </template>
+
+                <template #empty>
+                  <span class="no-data">
+                    <i class="iconfont icon-queshengye_zanwushuju"></i>
+                    <p>没有更多数据了！</p>
+                  </span>
+                </template>
+              </vxe-grid>
+              
+    </div>
+  </template>
+<script>
+import { XCard, setFormModel } from '@/components'
+import columnSetting from '@/components/tableColumnSetting'
+import formLabel from './modules/formLabel'
+import {
+  BookingOrderPage,
+  SendTrace,
+  GetVessellist,
+  GetPortlist,
+  GetPortloadlist,
+  BookingOrderBachUpdate,
+  GetCarrierlist,
+  DjyCustomerSuggest,
+  GetYardlist,
+  GetSysUserPage,
+  DjyCustomerpage,
+  GetCtn,
+  GetPackage,
+  Codeissuetypelist,
+  GetFrt,
+  GetService,
+  GetForwarderlist,
+  DjyUserConfigMulti,
+  DeleteBookingOrder,
+  RecoverDeleteOrder,
+  ExcuteShippingOrderCompareBatch,
+  GetTenantLineList
+} from '@/api/modular/main/BookingLedger'
+
+import initData from './modules/initData'
+import { DjyUserConfigGet, DjyUserConfigAdd } from '@/api/modular/main/DjyUserConfig'
+import { mapGetters, mapActions } from 'vuex'
+const formInitData = [
+  { title: '主提单号', align: 'center', width: '90', label: 'MBLNO', type: 'input' },
+  { title: '分提单号', align: 'center', width: '90', label: 'HBLNO', type: 'input' },
+  { title: '订舱编号', align: 'center', width: '90', label: 'CUSTNO', type: 'input' },
+  { title: '开船日期', align: 'center', width: 160, label: 'ETD', type: 'dateRange', resLabel: ['BETD', 'EETD'] },
+  { title: '实际开船日期', align: 'center', width: 160, label: 'ATD', type: 'dateRange', resLabel: ['BATD', 'EATD'] },
+  { title: '船名', align: 'center', width: '90', label: 'VESSEL', type: 'input' }
+]
+export default {
+  name: 'BookingLedger',
+  inject: ['reload'],
+  components: {
+    XCard,
+    columnSetting,
+    setFormModel,
+    formLabel
+  },
+  data() {
+    return {
+      spinning: false,
+      TaskShippingOrderCompareVisible: false,
+      TaskShippingOrderCompareData: {
+        showDetailList: ''
+      },
+      ResetType: true,
+      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
+      advanced: false,
+      formData: formInitData,
+      formRes: {},
+      searchData: {},
+      formAllData: null,
+      formMoreData: null,
+      formBtnCol: 8,
+      formBtnLoading: false,
+      setVisible: false,
+      showColumns: null,
+      gridOptions: {
+        border: false,
+        resizable: true,
+        showOverflow: true,
+        loading: true,
+        stripe: true,
+        round: true,
+        autoResize: true,
+        align: 'left',
+        scrollY: { enabled: true },
+        columnConfig: { resizable: true },
+        importConfig: {},
+        exportConfig: {},
+        pagerConfig: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 20,
+          pageSizes: [10, 20, 50, 100, 200, 500]
+        },
+        columns: JSON.parse(JSON.stringify(initData.columns)),
+        data: []
+        // treeConfig: {
+        //   transform: true,
+        //   rowField: 'index',
+        //   parentField: 'parentId',
+        // },
+      },
+      formTableData: JSON.parse(JSON.stringify(initData.columns)),
+      fromTableAllData: null,
+      formMoreTableData: null,
+      addVisible: false,
+      carrierRadio: 'CMA',
+      radioStyle: {
+        display: 'block',
+        height: '50px',
+        lineHeight: '50px'
+      },
+      moreNumVisible: false,
+      moreNumVal: '',
+      tableOrderLabel: '',
+      tableOrderType: '',
+      screenWidth: document.body.clientWidth,
+      remarkShow: false,
+      remarkScreenX: 0,
+      remarkScreenY: 0,
+      remarkData: null,
+      traceModalVisible: false,
+      editingModalVisible: false,
+      traceOptions: [
+        { label: '起运港', value: '1' },
+        { label: '目的港', value: '2' }
+      ],
+      traceValue: [],
+      addNum: 0,
+      tableHeight: 0,
+      goodStatusShow: false,
+      goodStatusScreenX: 0,
+      goodStatusScreenY: 0,
+      goodStatusData: null,
+      goodStatusSeat: 'bottom',
+      editingForm: this.$form.createForm(this),
+      vesselData: [],
+      WebVessel: '',
+      portDischargeData: [],
+      destinationData: [],
+      RcarrierData: [],
+      RecentlyCarrierData: []
+    }
+  },
+  computed: {
+    ...mapGetters(['bookingList', 'bookingGridOptions'])
+  },
+  beforeRouteLeave(to, from, next) {
+    // const copyArr = JSON.parse(JSON.stringify(this.gridOptions.data))
+    // const first = copyArr.splice(0, 20)
+    this.setBookingGridOptions(this.gridOptions)
+    // this.gridOptions = {
+    //   border: false,
+    //   resizable: true,
+    //   showOverflow: true,
+    //   loading: false,
+    //   stripe: true,
+    //   round: true,
+    //   autoResize: true,
+    //   align: 'left',
+    //   columnConfig: { resizable: true },
+    //   importConfig: {},
+    //   exportConfig: {},
+    //   pagerConfig: {
+    //     total: 0,
+    //     currentPage: 1,
+    //     pageSize: 10,
+    //     pageSizes: [10, 20, 50, 100, 200, 500]
+    //   },
+    //   columns: this.gridOptions.columns,
+    //   data: first
+    // }
+    next()
+  },
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.upDate()
+    })
+  },
+  created() {
+    this.createdInit()
+  },
+  mounted() {
+    this.onresize()
+  },
+  methods: {
+    ...mapActions(['setBookingList', 'setBookingGridOptions']),
+    createdInit() {
+      this.showColumns = JSON.parse(JSON.stringify(initData.columns))
+      this.formAllData = JSON.parse(JSON.stringify(initData.condAllData))
+      this.fromTableAllData = JSON.parse(JSON.stringify(initData.columnsAllData))
+      this.tableHeight = document.body.clientHeight - 230
+      // this.getList({}, true)
+      this.getConfigUser(true)
+      this.getCarrier()
+    },
+    onresize() {
+      window.onresize = () => {
+        this.screenWidth = document.body.clientWidth
+      }
+    },
+    upDate() {
+      if (Object.keys(this.gridOptions).length > 0) {
+        if (Object.keys(this.bookingGridOptions).length === 0) {
+          return false
+        }
+        const newData = JSON.parse(JSON.stringify(this.bookingGridOptions))
+        if (newData && newData.data.length > this.gridOptions.data.length) {
+          console.log('这里插入最新舱单', newData.data.length, this.gridOptions.data.length)
+        }
+      }
+    },
+    upDate1() {
+      if (Object.keys(this.gridOptions).length > 0) {
+        if (Object.keys(this.bookingGridOptions).length === 0) {
+          return false
+        }
+        const newData = JSON.parse(JSON.stringify(this.bookingGridOptions))
+        if (this.bookingGridOptions.data && this.bookingGridOptions.data.length > 0) {
+          setTimeout(() => {
+            const copyArr = JSON.parse(JSON.stringify(this.bookingGridOptions.data))
+            const first = copyArr.splice(0, 20)
+            const more = this.bookingGridOptions.data.splice(20, this.bookingGridOptions.data.length)
+            newData.data = first
+            this.gridOptions = { ...this.gridOptions, ...newData }
+            setTimeout(() => {
+              this.gridOptions.data = [...this.gridOptions.data, ...more]
+              console.log(this.gridOptions.data.length)
+            }, 600)
+          }, 10)
+        }
+        // if (this.bookingGridOptions.data && this.bookingGridOptions.data.length > 0) {
+        //   console.log(this.gridOptions.loading)
+        //   const copyArr = JSON.parse(JSON.stringify(this.bookingGridOptions.data))
+        //   console.log('== 获取到了历史数据 ==', copyArr)
+        //   newData.data = copyArr
+        //   setTimeout(() => {
+        //     this.gridOptions = { ...this.gridOptions, ...newData }
+        //   }, 200)
+        // }
+      }
+    },
+    // 批量编辑
+    editingHandleOk() {
+      const {
+        editingForm: { validateFields }
+      } = this
+      validateFields((errors, values) => {
+        if (!errors) {
+          values.id = []
+          const select = this.$refs.xGrid.getCheckboxRecords()
+          select.forEach(item => {
+            values.id.push(item.id)
+          })
+          BookingOrderBachUpdate(values).then(res => {
+            if (res.success) {
+              this.$message.success('编辑成功')
+              this.editingHandleCancel()
+            } else {
+              this.$message.error(`编辑失败,${res.message}`)
+            }
+          })
+        } else {
+          // this.editingModalVisible = false
+        }
+      })
+    },
+    editingHandleCancel() {
+      this.editingForm.resetFields()
+      this.editingModalVisible = false
+    },
+    TaskShippingOrderCompareHandleCancel() {
+      this.TaskShippingOrderCompareVisible = false
+    },
+    vesselSearch(data) {
+      if (data) {
+        this.WebVessel = data
+      } else if (data === undefined) {
+        this.WebVessel = data
+      }
+
+      GetVessellist({ KeyWord: data }).then(res => {
+        this.vesselData = res.data
+      })
+    },
+    vesselBlur() {
+      if (this.WebVessel !== undefined) {
+        setTimeout(() => {
+          this.editingForm.setFieldsValue({
+            ...this.editingForm.getFieldsValue(),
+            vessel: this.WebVessel
+          })
+        }, 100)
+      }
+    },
+    portDischargeSearch(data) {
+      GetPortlist({ KeyWord: data }).then(res => {
+        this.portDischargeData = res.data
+      })
+    },
+    portDischargeChange(value) {
+      this.portDischargeData.forEach(item => {
+        if (item.enName == value) {
+          setTimeout(() => {
+            this.editingForm.setFieldsValue({
+              ...this.editingForm.getFieldsValue(),
+              portDischargeId: item.ediCode
+            })
+          }, 100)
+        }
+      })
+    },
+    destinationSearch(data) {
+      GetPortlist({ KeyWord: data }).then(res => {
+        this.destinationData = res.data
+      })
+    },
+    destinationChange(value) {
+      this.destinationData.forEach(item => {
+        if (item.enName == value) {
+          setTimeout(() => {
+            this.editingForm.setFieldsValue({
+              ...this.editingForm.getFieldsValue(),
+              destinationid: item.ediCode
+            })
+          }, 100)
+        }
+      })
+    },
+    FnCopy(data) {
+      const el = document.createElement('input')
+      el.setAttribute('value', data)
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+      this.$message.success('复制成功!')
+    },
+    init(queryParam = {}) {
+      this.gridOptions.pagerConfig = {
+        total: 0,
+        currentPage: 1,
+        pageSize: this.gridOptions.pagerConfig.pageSize,
+        pageSizes: [10, 20, 50, 100, 200, 500]
+      }
+      this.gridOptions.data = []
+      this.getList(queryParam)
+    },
+    getConfigUser(isInit = false) {
+      const query = {
+        typeArr: ['booking_list_cond', 'booking_list_column', 'booking_list_page']
+      }
+      DjyUserConfigMulti(this.$qs.stringify(query, { arrayFormat: 'repeat' })).then(res => {
+        const $data = {}
+        res.data.map((item, index) => {
+          switch (item.type) {
+            case 'booking_list_cond':
+              this.$set($data, 'booking_list_cond', item)
+              // this.setFormData(item, false, true)
+              break
+            case 'booking_list_column':
+              this.$set($data, 'booking_list_column', item)
+              // this.setTableList(item)
+              break
+            case 'booking_list_page':
+              this.setPageSize(item)
+              break
+          }
+        })
+
+        if (Object.keys($data).includes('booking_list_cond')) {
+          this.setFormData($data.booking_list_cond, false, true)
+        } else {
+          this.setFormData({}, false, true)
+        }
+        if (Object.keys($data).includes('booking_list_column')) {
+          this.setTableList($data.booking_list_column)
+        } else {
+          this.setTableList({})
+        }
+      })
+    },
+    // 船公司 - start
+    getCarrier() {
+      const Rdata = data => {
+        let RData = {}
+        for (var i = 0; i < 26; i++) {
+          RData[String.fromCharCode(65 + i)] = []
+          data.forEach(item => {
+            if (String.fromCharCode(65 + i) == item.enName[0].toUpperCase()) {
+              RData[String.fromCharCode(65 + i)].push(item)
+            }
+          })
+        }
+        let Obj = {
+          'A-D': ['A', 'B', 'C', 'D'],
+          'E-L': ['E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
+          'M-R': ['M', 'N', 'O', 'P', 'Q', 'R'],
+          'S-U': ['S', 'T', 'U'],
+          'V-Z': ['V', 'W', 'X', 'Y', 'Z']
+        }
+        let Data = {
+          'A-D': [],
+          'E-L': [],
+          'M-R': [],
+          'S-U': [],
+          'V-Z': []
+        }
+        Object.keys(Obj).forEach(e => {
+          Obj[e].forEach(item => {
+            RData[item].forEach((Ai, AiIndex) => {
+              let imgSrc = ''
+              try {
+                imgSrc = require(`@/assets/logo/${Ai.code}.png`)
+              } catch (error) {
+                imgSrc = require('@/assets/logo/default.png')
+              }
+              RData[item][AiIndex].ImgSrc = imgSrc
+            })
+            Data[e].push(...RData[item])
+          })
+        })
+        this.RcarrierData = Data
+      }
+      GetCarrierlist()
+        .then(res => {
+          if (res.code === 200) {
+            Rdata(res.data)
+            DjyUserConfigGet({ type: 'booking_memory' })
+              .then(e => {
+                if (e.data) {
+                  let data = []
+                  JSON.parse(e.data.configJson).forEach(item => {
+                    res.data.forEach(item2 => {
+                      if (item == item2.code) {
+                        data.push(item2)
+                      }
+                    })
+                  })
+                  this.RecentlyCarrierData = data
+                }
+              })
+              .catch(() => {
+                Rdata(res.data)
+              })
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    setFormData(data, isReset = false, isInit = false) {
+      if (Object.keys(data).length > 0 && JSON.parse(data.configJson).length) {
+        const arr = JSON.parse(data.configJson)
+        const nowData = []
+        const moreData = []
+        arr.map((item, index) => {
+          this.formAllData.map((fitem, findex) => {
+            if (fitem.label === item) {
+              nowData.push(fitem)
+            }
+          })
+        })
+        this.formAllData.map((item, index) => {
+          if (!arr.includes(item.label)) {
+            moreData.push(item)
+          }
+        })
+        this.formData = nowData
+        this.formMoreData = moreData
+      } else {
+        const nowData = this.formData.map((item, index) => {
+          return item.label
+        })
+        const moreData = []
+        this.formAllData.map((item, index) => {
+          if (!nowData.includes(item.label)) {
+            moreData.push(item)
+          }
+        })
+        this.formMoreData = moreData
+      }
+      this.formData.map((item, index) => {
+        this.$set(this.formRes, item.label, this.formRes[item.label] || '')
+        // select 船公司 等获取下拉列表
+        if (item.type === 'select') {
+          if (['NOBILL', 'CARGOID'].includes(item.label)) {
+            item.dataList = item.data
+            setTimeout(() => {
+              this.$refs[`fromlabel-${item.label}`][0].$data.dataList = item.data
+            }, 300)
+          }
+        }
+      })
+      // if (!isReset && !isInit) {
+      //   this.getList(this.formRes)
+      // }
+      if (!isReset) {
+        this.getList(this.formRes)
+      }
+      const len = this.formData.length % 4
+      if (this.formData.length === 4 || this.formData.length > 4) {
+        this.formBtnCol = 8
+      } else {
+        this.formBtnCol = 24 - len * 4
+      }
+      this.$forceUpdate()
+    },
+    setTableList(data) {
+      if (Object.keys(data).length > 0 && JSON.parse(data.configJson).length) {
+        this.formTableData = JSON.parse(data.configJson)
+        const nowTableArr = this.formTableData.map((item, index) => {
+          if (item.field === 'operate') {
+            item.width = 110
+          }
+          return item.field
+        })
+        this.gridOptions.columns = JSON.parse(JSON.stringify(this.formTableData))
+        const moreTableArr = []
+        this.fromTableAllData.map((item, index) => {
+          if (!nowTableArr.includes(item.field)) {
+            moreTableArr.push(item)
+          }
+        })
+        this.formMoreTableData = moreTableArr
+        this.$forceUpdate()
+      } else {
+        const nowTableArr = this.formTableData.map((item, index) => {
+          return item.field
+        })
+        const moreTableArr = []
+        this.fromTableAllData.map((item, index) => {
+          if (!nowTableArr.includes(item.field)) {
+            moreTableArr.push(item)
+          }
+        })
+        this.formMoreTableData = moreTableArr
+        this.$forceUpdate()
+      }
+    },
+    setPageSize(data) {
+      if (data && JSON.parse(data.configJson)) {
+        this.gridOptions.pagerConfig.pageSize = JSON.parse(data.configJson).pageSize
+        this.getList({}, true, 'add')
+        this.$forceUpdate()
+      } else {
+        this.getList({}, true)
+      }
+    },
+
+    getFormData(isReset = false) {
+      DjyUserConfigGet({ type: 'booking_list_cond' }).then(res => {
+        this.setFormData(res.data)
+      })
+    },
+    emnuSelectApi(type) {
+      switch (type) {
+        case 'CARRIER':
+          return GetCarrierlist
+        case 'YARDID':
+          return GetYardlist
+        case 'CNTRTOTAL':
+          return GetCtn
+        case 'KINDPKGS':
+          return GetPackage
+        case 'ISSUETYPE':
+          return Codeissuetypelist
+        case 'lineName':
+          return GetTenantLineList
+      }
+    },
+    getFromSelectData(func, ...args) {
+      return new Promise((resolve, reject) => {
+        func(...args).then(res => {
+          if (res.code === 200) {
+            resolve(res.data)
+          } else {
+            reject(res)
+          }
+        })
+      })
+    },
+    handlePageChange({ currentPage, pageSize }) {
+      if (this.gridOptions.pagerConfig.pageSize !== pageSize) {
+        this.editPageSizeSave(pageSize)
+      }
+      this.gridOptions.pagerConfig.currentPage = currentPage
+      this.gridOptions.pagerConfig.pageSize = pageSize
+      this.getList(this.searchData)
+    },
+
+    editPageSizeSave(pageSize = 10) {
+      const data = {
+        pageSize: pageSize
+      }
+      DjyUserConfigAdd({
+        type: 'booking_list_page',
+        configJson: JSON.stringify(data)
+      }).then(res => {
+        console.log('页码设置成功')
+      })
+    },
+
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+      this.$forceUpdate()
+      let start = new Date().getTime()
+      console.log('== 点击展开 ==', start)
+      if (!this.advanced) {
+        const len = this.formData.length % 4
+        if (this.formData.length === 4 || this.formData.length > 4) {
+          this.formBtnCol = 8
+        } else {
+          this.formBtnCol = 24 - len * 4
+        }
+      } else {
+        const len = this.formData.length % 6
+        // this.formBtnCol = 24 - len * 4
+        this.formBtnCol = 24 - len * 4 === 4 ? 24 : 24 - len * 4
+      }
+      console.log('== 展开结束 ==', new Date().getTime() - start)
+    },
+    tableRefresh() {
+      const data = { ...this.formRes }
+      this.searchData = JSON.parse(JSON.stringify(data))
+      this.init(this.searchData)
+      this.formRes = data
+    },
+    tableMoreRefresh() {
+      const arr = this.formRes.MBLNO.split(/，|,/)
+      let val = ``
+      arr.map((item, index) => {
+        val += `${item}
+` // 这里不要格式化
+      })
+      this.moreNumVal = val
+      this.moreNumVisible = !this.moreNumVisible
+    },
+
+    dateFtt(fmt, date) {
+      const o = {
+        'Y+': date.getFullYear(),
+        'M+': date.getMonth() + 1,
+        'D+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds()
+      }
+      for (const k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+          const str = o[k] + ''
+          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padZero(str))
+        }
+      }
+      return fmt
+    },
+
+    padZero(num) {
+      return new RegExp(/^\d$/g).test(num) ? `0${num}` : num
+    },
+
+    tableReset() {
+      this.ResetType = false
+      Object.keys(this.formRes).map((item, index) => {
+        this.formRes[item] = ''
+      })
+      this.searchData = JSON.parse(JSON.stringify(this.formRes))
+      Object.keys(this.$refs).map((label, index) => {
+        if (label.includes('fromlabel-') && this.$refs[label].length > 0) {
+          this.$refs[label][0].$data.value = ''
+        }
+      })
+      this.tableOrderLabel = ''
+      this.tableOrderType = ''
+      this.$refs.xGrid.clearSort()
+      setTimeout(() => {
+        this.ResetType = true
+      }, 100)
+    },
+
+    submitForm(data) {
+      this.formData = data
+      const arr = data.map((item, index) => {
+        return item.label
+      })
+
+      this.formRes = {}
+      this.searchData = {}
+      DjyUserConfigAdd({
+        type: 'booking_list_cond',
+        configJson: JSON.stringify(arr)
+      }).then(res => {
+        this.$message.success('保存成功')
+        this.$refs.setForm.handleCancel()
+        Object.keys(this.$refs).map((label, index) => {
+          if (label.includes('fromlabel-') && this.$refs[label].length > 0) {
+            this.$refs[label][0].$data.value = ''
+          }
+        })
+        this.getFormData()
+        this.init()
+      })
+    },
+
+    formChange(data) {
+      const { form, value } = data
+      if (form.type === 'input') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'date') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'dateRange') {
+        this.formRes[form.resLabel[0]] = value[0] || ''
+        this.formRes[form.resLabel[1]] = value[1] || ''
+      } else if (form.type === 'select') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'complete') {
+        this.formRes[form.label] = value
+      }
+      this.$forceUpdate()
+    },
+
+    // table
+
+    /// 表格编辑
+    tableHeaderEdit() {
+      this.$refs.setTableForm.open()
+    },
+    submitTableForm(data) {
+      this.gridOptions.columns = JSON.parse(JSON.stringify(data))
+      this.$refs.setTableForm.handleCancel()
+      this.editColumnsSave(this.gridOptions.columns)
+    },
+
+    resizableChange(e) {
+      this.gridOptions.columns[e.columnIndex].width = e.resizeWidth
+      this.editColumnsSave(this.gridOptions.columns)
+    },
+    editColumnsSave(data = {}) {
+      DjyUserConfigAdd({
+        type: 'booking_list_column',
+        configJson: JSON.stringify(data)
+      }).then(res => {
+        this.$refs.setForm.handleCancel()
+      })
+    },
+
+    columnChange(data) {
+      const arr = []
+      data.map((item, index) => {
+        if (item.checked) {
+          arr.push(item)
+        }
+      })
+      this.showColumns = []
+      this.showColumns = arr
+      this.gridOptions.columns = arr
+      this.$forceUpdate()
+    },
+    // handledbclick({ row }) {
+    //   this.editColumns(row)
+    // },
+    // editColumns(row) {
+    //   this.$router.push({ name: 'BookingDetail', query: { id: row.id, type: row.carrierid, mblno: row.mblno } })
+    // },
+    getList(queryParam = {}, isInit = false, isAdd = 'normal') {
+      this.$set(this.gridOptions, 'loading', true)
+      const { currentPage, pageSize } = this.gridOptions.pagerConfig
+      const query = {
+        ...queryParam,
+        ...{
+          PageNo: currentPage,
+          PageSize: pageSize,
+          ISDel:true
+        },
+        ...{
+          SortField: this.tableOrderLabel
+        }
+      }
+      Object.keys(query).map((item, index) => {
+        if (!query[item]) {
+          delete query[item]
+        }
+      })
+      if (this.tableOrderType !== '') {
+        query.DescSort = this.tableOrderType === 'desc'
+      }
+      if (query.MBLNO && query.MBLNO.split(/，|,/).length > 0) {
+        const arr = this.searchData.MBLNO.split(/，|,/)
+        query.MBLNO = arr.toString()
+      }
+      if (isInit) {
+        query.firstFlag = true
+      }
+      BookingOrderPage(query)
+        .then(res => {
+           console.log('BookingOrderPage==>>',query)
+          if (res.success) {
+            let newBookingList = {}
+            if (query.PageNo !== 1) {
+              newBookingList = this.bookingList
+            }
+            const _data = res.data.items.map((item, index) => {
+              this.$set(newBookingList, item.id, item)
+              item.index = (currentPage - 1) * pageSize + index
+              const bookstatus = [
+                { staCode: 'sta_cangdan', isChecked: false },
+                { staCode: 'sta_haifang', isChecked: false },
+                { staCode: 'sta_zhuangzai', isChecked: false },
+                { staCode: 'sta_mafang', isChecked: false },
+                { staCode: 'sta_zhuangchuan', isChecked: false },
+                { staCode: 'sta_atd', isChecked: false }
+              ]
+              if (item.bookstatus.length > 0) {
+                bookstatus.map((book, bindex) => {
+                  item.bookstatus.map((item, index) => {
+                    if (item.staCode === book.staCode) {
+                      bookstatus[bindex] = item
+                      bookstatus[bindex].isChecked = true
+                    }
+                  })
+                })
+              }
+              item.bookstatus = bookstatus
+              let hasGoods = 0
+              item.goodsStatusList.map((gitem, gindex) => {
+                if (gitem.finishTime || gitem.remark) {
+                  hasGoods++
+                }
+              })
+              item.hasGoods = hasGoods
+              return item
+            })
+            this.$set(this.gridOptions.pagerConfig, 'columns', JSON.parse(JSON.stringify(initData.columns)))
+            this.$set(this.gridOptions, 'data', [..._data])
+
+            this.$refs.xGrid.reloadData(_data).then(() => {
+              this.$set(this.gridOptions, 'loading', false)
+            })
+            this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalCount)
+            this.setBookingList(newBookingList)
+            this.$forceUpdate()
+          } else {
+            this.$set(this.gridOptions, 'data', [...[]])
+            this.$set(this.gridOptions, 'loading', false)
+            this.$forceUpdate()
+          }
+          this.ResetType = true
+          console.log(this.gridOptions)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    addBooking() {
+      this.addVisible = !this.addVisible
+    },
+    copyBooking() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      if (pkIdArr.length > 1) {
+        this.$message.error('请选择一条数据')
+        return false
+      } else if (pkIdArr.length === 0) {
+        this.$message.error('请至少选择一条数据')
+        return false
+      }
+      this.$router.push({ name: 'BookingDetail', query: { id: pkIdArr[0], isCopy: true } })
+    },
+    copyBookingMore() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      if (pkIdArr.length === 0) {
+        this.$message.error('请至少选择一条数据')
+        return false
+      }
+    },
+    addSubmit() {
+      let data = []
+      data.push(this.carrierRadio)
+      if (this.RecentlyCarrierData.length) {
+        this.RecentlyCarrierData.forEach(item => {
+          if (item.code != this.carrierRadio && data.length < 10) {
+            data.push(item.code)
+          }
+        })
+      }
+
+      DjyUserConfigAdd({
+        type: 'booking_memory',
+        configJson: JSON.stringify(data)
+      }).then(res => {
+        this.getCarrier()
+        this.addVisible = false
+        this.addNum = Math.round(Math.random() * 1000)
+        this.$router.push({ name: 'BookingDetail', query: { type: this.carrierRadio, addNum: this.addNum } })
+      })
+    },
+    addCancel() {
+      this.addVisible = false
+    },
+
+    // 表单编辑
+    formSetting() {
+      this.$refs.setForm.open()
+    },
+
+    // 多表单
+    moreNumSubmit() {
+      let data = ''
+      this.moreNumVal
+        .replace(/\n|\r/g, ',')
+        .split(',')
+        .forEach(item => {
+          if (item.replace(/\s*/g, '')) {
+            if (data) {
+              data = `${data},${item}`
+            } else {
+              data = item
+            }
+          }
+        })
+
+      this.formRes.MBLNO = data
+      this.$refs['fromlabel-MBLNO'][0].$data.value = this.formRes.MBLNO
+      this.$forceUpdate()
+      this.moreNumCancel()
+    },
+    moreNumCancel() {
+      this.moreNumVisible = false
+    },
+    tableSortChange(e) {
+      const { property, order } = e
+      this.tableOrderLabel = property || ''
+      this.tableOrderType = order || ''
+      console.log('== 当前搜索内容 ==', this.searchData)
+      this.getList(this.searchData)
+    },
+    enmuBookingBtn(val) {
+      switch (val) {
+        case 'sta_cangdan':
+          return '舱单'
+        case 'sta_haifang':
+          return '海放'
+        case 'sta_zhuangzai':
+          return '装载'
+        case 'sta_mafang':
+          return '码放'
+        case 'sta_zhuangchuan':
+          return '装船'
+        case 'sta_atd':
+          return '离港'
+        case 'sta_so':
+          return '已订舱'
+        case 'sta_bc':
+          return '订舱确认'
+        case 'sta_letter_yard':
+          return '放舱'
+        case 'sta_xhz':
+          return '下货纸'
+        default:
+          return '--'
+      }
+    },
+    pressEnterFun() {
+      this.tableRefresh()
+    },
+    remarkhover(e, data) {
+      if (data.bookremark.length > 0) {
+        const maxWidth = window.innerWidth
+        if (maxWidth - e.pageX > 230) {
+          this.remarkScreenX = e.pageX + 20
+        } else {
+          this.remarkScreenX = e.pageX - 300
+        }
+        this.remarkScreenY = e.pageY + 20
+        this.remarkData = data.bookremark
+        this.remarkShow = true
+      }
+    },
+    remarkLeave(e, data) {
+      this.remarkShow = false
+      this.remarkData = null
+    },
+    goodStatusclick(e, data) {
+      console.log('是否已展示', this.goodStatusShow)
+      if (!this.goodStatusShow) {
+        this.goodStatusHover(e, data)
+      } else {
+        this.goodStatusLeave(e, data)
+      }
+    },
+    goodStatusHover(e, data) {
+      const maxWidth = window.innerWidth
+      if (maxWidth - e.pageX > 230) {
+        // this.goodStatusScreenX = e.pageX + 20
+        this.goodStatusScreenX = e.pageX - 139
+      } else {
+        // this.goodStatusScreenX = e.pageX - 300
+        this.goodStatusScreenX = e.pageX - 139
+      }
+      console.log('== 距离 ==', e.pageY, window.innerHeight - 350)
+      if (e.pageY > window.innerHeight - 340) {
+        this.goodStatusScreenY = e.pageY - 370 - 10
+        this.goodStatusSeat = 'top'
+      } else {
+        this.goodStatusScreenY = e.pageY + 25
+        this.goodStatusSeat = 'bottom'
+      }
+      // this.goodStatusScreenY = e.pageY + 20
+      this.goodStatusData = data.goodsStatusList
+      this.goodStatusShow = true
+    },
+    goodStatusLeave(e, data) {
+      this.goodStatusShow = false
+      this.goodStatusData = null
+    },
+    openTraceModel() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      this.traceModalVisible = !this.traceModalVisible
+    },
+    batchEditing() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      this.editingModalVisible = !this.editingModalVisible
+    },
+    onTraceChange(values) {
+      console.log(this.traceValue)
+    },
+    traceSend() {
+      if (!this.traceValue) {
+        this.$message.error('请选择订阅内容')
+        return false
+      }
+      const arr = []
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      let errorTip = ''
+      select.map((item, index) => {
+        if (this.traceValue.includes('1') && (!item.yard || !item.yardid)) {
+          errorTip = `单号${item.mblno}未选择场站`
+        }
+        if (this.traceValue.includes('2') && (!item.carrierid || !item.carrier)) {
+          errorTip = `单号${item.mblno}未选择船公司`
+        }
+        const query = {
+          businessId: item.id,
+          mblno: item.mblno,
+          yard: this.traceValue.includes('1') ? item.yard : '',
+          yardCode: this.traceValue.includes('1') ? item.yardid : '',
+          carrierid: this.traceValue.includes('2') ? item.carrierid : '',
+          carrier: this.traceValue.includes('2') ? item.carrier : '',
+          isBook: !!this.traceValue.includes('2')
+        }
+        arr.push(query)
+      })
+
+      if (errorTip !== '') {
+        this.$message.error(errorTip)
+        return false
+      }
+
+      SendTrace(arr)
+        .then(res => {
+          if (res.success) {
+            const tip = `订阅成功`
+            this.$message.success(tip)
+            this.traceModalVisible = false
+            this.traceValue = []
+          } else {
+            this.$message.error(res.message)
+            this.traceModalVisible = false
+            this.traceValue = []
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    getCompleteListFun({ form, value }) {
+      let query = {}
+      if (
+        [
+          'VESSEL',
+          'PORTDISCHARGE',
+          'PORTLOAD',
+          'PLACERECEIPT',
+          'DESTINATION',
+          'PLACEDELIVERY',
+          'PAYABLEAT',
+          'BLFRT',
+          'ISSUEPLACE',
+          'PREPARDAT',
+          'SERVICE',
+          'SHIPAGENCY'
+        ].includes(form.label)
+      ) {
+        // 船公司  卸货港
+        query = {
+          KeyWord: value
+        }
+      } else if (form.label === 'CUSTOMERNAME') {
+        // 客户/ 委托单位
+        query = {
+          KeyWord: value,
+          type: 'consignor'
+        }
+      } else if (form.label === 'FORWARDER') {
+        // 订舱代理
+        query = {
+          KeyWord: value,
+          type: 'booking_agent'
+        }
+      } else if (['SALE', 'CUSTSERVICE', 'DOC', 'ROUTE', 'OP'].includes(form.label)) {
+        // 销售 、 揽货人, 航线操作
+        query = {
+          name: value
+        }
+      } else if (form.label === 'CUSTOMSER') {
+        // 报关行
+        query = {
+          SearchValue: value,
+          PropString: 'customs_broker'
+        }
+      } else if (form.label === 'AGENTID') {
+        query = {
+          SearchValue: value,
+          PropString: 'out_agent'
+        }
+      } else if (form.label === 'TRUCKER') {
+        query = {
+          SearchValue: value,
+          PropString: 'fleet'
+        }
+      }
+      const fun = this.emnuCompleteApi(form.label)
+      if (fun) {
+        this.getFromSelectData(this.emnuCompleteApi(form.label), query).then(data => {
+          if (['CUSTOMERNAME', 'FORWARDER', 'CUSTOMSER', 'AGENTID', 'TRUCKER'].includes(form.label)) {
+            this.$refs[`fromlabel-${form.label}`][0].$data.dataSourceList = data.rows
+          } else {
+            this.$refs[`fromlabel-${form.label}`][0].$data.dataSourceList = data
+          }
+        })
+      }
+    },
+
+    emnuCompleteApi(type) {
+      switch (type) {
+        case 'VESSEL':
+          return GetVessellist
+        case 'CUSTOMERNAME':
+          return DjyCustomerSuggest
+        case 'FORWARDER':
+          return DjyCustomerSuggest
+        case 'PORTDISCHARGE': // 卸货港
+          return GetPortlist
+        case 'PORTLOAD': // 装货港
+          return GetPortloadlist
+        case 'PLACERECEIPT': // 收货地
+          return GetPortloadlist
+        case 'DESTINATION': // 目的地
+          return GetPortlist
+        case 'PLACEDELIVERY': // 交货地
+          return GetPortlist
+        case 'SALE':
+          return GetSysUserPage
+        case 'CUSTSERVICE':
+          return GetSysUserPage
+        case 'ROUTE':
+          return GetSysUserPage
+        case 'OP':
+          return GetSysUserPage
+        case 'DOC':
+          return GetSysUserPage
+        case 'CUSTOMSER':
+          return DjyCustomerpage
+        case 'PAYABLEAT':
+          return GetPortlist
+        case 'BLFRT':
+          return GetFrt
+        case 'ISSUEPLACE':
+          return GetPortloadlist
+        case 'PREPARDAT':
+          return GetPortloadlist
+        case 'SERVICE':
+          return GetService
+        case 'AGENTID':
+          return DjyCustomerpage
+        case 'TRUCKER':
+          return DjyCustomerpage
+        case 'SHIPAGENCY':
+          return GetForwarderlist
+      }
+    },
+
+    getSelectFirst({ form, index, value }) {
+      const fun = this.emnuSelectApi(form.label)
+      if (fun) {
+        this.getFromSelectData(fun).then(data => {
+          this.formData[index].dataList = data
+          this.$refs[`fromlabel-${form.label}`][0].$data.dataList = data
+        })
+      }
+    },
+
+    removeMoreFun() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      const removeArr = select.map((item, index) => {
+        return item.id
+      })
+      this.deleteBookingOrder(removeArr)
+    },
+    removeFun(data) {
+
+      this.deleteBookingOrder([data.id])
+    },
+    deleteBookingOrder(arr) {
+        RecoverDeleteOrder(arr.toString())
+        .then(res => {
+          if (res.success) {
+            this.$message.success('恢复成功')
+            const _data = this.gridOptions.data.filter(item => !arr.includes(item.id))
+            this.$refs.xGrid.reloadData(_data).then(() => {
+              this.gridOptions.pagerConfig.total = this.gridOptions.pagerConfig.total - arr.length
+            })
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    cancelRemove() {
+      console.log('== 取消 ==')
+    },
+    pageClick() {
+      this.goodStatusShow = false
+      this.goodStatusData = null
+    },
+    checkboxChangeEvent() {
+      console.log('== 选中，取消选中 ==', this.$refs.xGrid.getCheckboxRecords())
+    },
+    excuteShippingOrderCompareBatch(data) {
+      let arr = []
+      if (data) {
+        arr.push(data.id.toString())
+      } else {
+        const select = this.$refs.xGrid.getCheckboxRecords()
+        arr = select.map((item, index) => {
+          return item.id.toString()
+        })
+        if (arr.length === 0) {
+          this.$message.error('请选择操作订单')
+          return false
+        }
+      }
+      this.spinning = true
+      ExcuteShippingOrderCompareBatch(arr)
+        .then(res => {
+          if (res.success) {
+            this.spinning = false
+            if (!res.data.succ) {
+              this.$message.success(res.data.msg)
+            } else {
+              if (res.data.extra) {
+                this.TaskShippingOrderCompareData = res.data.extra
+                this.TaskShippingOrderCompareData.total = res.data.total
+                this.TaskShippingOrderCompareVisible = true
+              } else {
+                this.$message.success(res.data.msg)
+              }
+            }
+          } else {
+            this.spinning = false
+            this.$message.error(res.data.msg)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+          this.spinning = false
+        })
+    }
+  }
+}
+</script>
+  <style lang="less">
+  /*.ant-layout{
+  background: #f4f4f4;
+}*/
+/*列表排序按钮 */
+.vxe-cell--sort {
+  margin-top: -6px;
+  i {
+    font-size: 10px;
+  }
+  .vxe-sort--asc-btn {
+    margin-top: 6px;
+  }
+}
+/*列表表头 */
+.vxe-header--row {
+  position: relative;
+  background: #fff !important;
+  .vxe-cell--sort {
+    position: absolute;
+    z-index: 3;
+    right: 0;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: @primary-color;
+    opacity: 0.04;
+  }
+}
+/*列表分页 */
+.vxe-pager {
+  margin: 8px 0;
+}
+</style>
+<style lang="less" scoped>
+/*订舱表格内字体颜色 */
+.mblno {
+  text-align: left;
+  color: @primary-color;
+  span {
+    margin-right: 0.5rem;
+    cursor: pointer;
+  }
+  .CSMblnoCopy {
+    cursor: pointer;
+  }
+}
+// .vessel {
+//   color: #77c950;
+// }
+.nav-box {
+  padding: 0 10px;
+
+  .nav {
+    display: inline-block;
+    margin-right: 8px;
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0);
+    padding: 0 10px;
+    height: 28px;
+    line-height: 26px;
+
+    .iconfont {
+      margin-right: 6px;
+    }
+
+    &:hover {
+      border: 1px solid rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+
+    &:nth-of-type(1) {
+      .iconfont {
+        color: #1d8aff;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(2) {
+      .iconfont {
+        color: #865ef8;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(3) {
+      .iconfont {
+        color: #ff9702;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(4) {
+      .iconfont {
+        color: #1d8aff;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(5) {
+      .iconfont {
+        color: #ff1062;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(6) {
+      .iconfont {
+        color: #1ebeca;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(7) {
+      .iconfont {
+        color: #82c93d;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(8) {
+      .iconfont {
+        color: #1d8aff;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+    &:nth-of-type(9) {
+      .iconfont {
+        color: #f6826b;
+      }
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+  }
+}
+
+  </style>
+  <style lang="less" scoped>
+  /*订舱表格内字体颜色 */
+  .mblno {
+    text-align: left;
+    color: @primary-color;
+    span {
+      margin-right: 0.5rem;
+      cursor: pointer;
+    }
+    .CSMblnoCopy {
+      cursor: pointer;
+    }
+  }
+  // .vessel {
+  //   color: #77c950;
+  // }
+  .nav-box {
+    padding: 0 10px;
+  
+    .nav {
+      display: inline-block;
+      margin-right: 8px;
+      cursor: pointer;
+      border: 1px solid rgba(255, 255, 255, 0);
+      padding: 0 10px;
+      height: 28px;
+      line-height: 26px;
+  
+      .iconfont {
+        margin-right: 6px;
+      }
+  
+      &:hover {
+        border: 1px solid rgba(255, 255, 255, 0);
+        border-radius: 4px;
+      }
+  
+      &:nth-of-type(1) {
+        .iconfont {
+          color: #1d8aff;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(2) {
+        .iconfont {
+          color: #865ef8;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(3) {
+        .iconfont {
+          color: #ff9702;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(4) {
+        .iconfont {
+          color: #1d8aff;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(5) {
+        .iconfont {
+          color: #ff1062;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(6) {
+        .iconfont {
+          color: #1ebeca;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(7) {
+        .iconfont {
+          color: #82c93d;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+  
+      &:nth-of-type(8) {
+        .iconfont {
+          color: #1d8aff;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+      &:nth-of-type(9) {
+        .iconfont {
+          color: #f6826b;
+        }
+        &:hover {
+          background: #fff;
+          box-shadow: 0 0 10px #eee;
+        }
+      }
+    }
+  }
+  
+  .right {
+    float: right;
+    cursor: pointer;
+    padding-top: 6px;
+  }
+  .BookTopButton {
+    height: 33px;
+    .tab-btn {
+      padding: 6px 9px;
+      border: 1px solid #c7c7c9;
+      background: #f9fafe;
+      border-radius: 2px;
+      margin-right: 10px;
+      cursor: pointer;
+      -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+      -webkit-user-select: 0 2px 0 rgba(0, 0, 0, 0.02);
+    }
+  }
+  .table-page-search-submitButtons {
+    text-align: right;
+    padding-top: 6px;
+    .reset {
+      margin-left: 8px;
+      margin-right: 8px;
+    }
+    .more-search {
+      margin-left: 8px;
+      margin-right: 20px;
+      padding-right: 20px;
+      border: none;
+      position: relative;
+      box-shadow: none !important;
+    }
+    /*.tab-btn{
+      margin-left:8px;
+      margin-right: 10px;
+      padding:6px 9px;
+      padding-top:5px;
+      border: 1px solid #c7c7c9;
+      border-radius: 3px;
+      cursor: pointer;
+    }*/
+    .tab-btn {
+      cursor: pointer;
+      position: relative;
+      i {
+        font-size: 14px;
+        margin-left: 8px;
+      }
+    }
+    .tab-btn::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 17px;
+      background: #ccc;
+      top: 2px;
+      left: -20px;
+    }
+    .senior-search {
+      margin-left: 36px;
+      color: rgba(0, 0, 0, 0.65);
+      position: relative;
+      i {
+        margin-left: 3px;
+        font-size: 15px;
+      }
+    }
+    .senior-search::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 17px;
+      background: #ccc;
+      top: 2px;
+      left: -16px;
+    }
+    .senior-search:hover {
+      color: @primary-color;
+      i {
+        color: @primary-color;
+      }
+    }
+  }
+  .ant-btn {
+    margin-right: 8px;
+  }
+  .table {
+    margin: 8px auto 20px;
+  }
+  
+  .radio-logo {
+    width: 50px;
+    // height: 40px;
+    display: inline-block;
+  }
+  .group-label-box {
+    width: 100%;
+    .group-label {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .ant-radio-wrapper {
+        height: 45px !important;
+        line-height: 45px !important;
+        width: 10%;
+        margin: 0;
+      }
+      // .label-flex {
+      //   flex: 1;
+      // }
+    }
+  }
+  .Awrapper {
+    width: 100% !important;
+    display: flex !important;
+    height: 45px !important;
+    line-height: 45px !important;
+    width: 10%;
+    margin: 0;
+    .line {
+      margin-left: 10px;
+      margin-right: 40px;
+      height: 24px;
+      flex: 1;
+      border-bottom: 1px solid #c9c9c9;
+    }
+  }
+  /*查询区日期默认颜色 */
+  /deep/ .ant-calendar-today {
+    .ant-calendar-date {
+      color: @primary-color !important;
+      border-color: @primary-color !important;
+    }
+  }
+  /*方块边框按钮 */
+  .tab-btn:hover {
+    border-color: @primary-color;
+    color: @primary-color;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  /*列表双列背景色 */
+  // /deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
+  //   // background: #f5f9fe;
+  //   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: -1;
+  //   }
+  // }
+  /*列表操作按钮颜色 */
+  /deep/ .operate-btn {
+    color: @primary-color;
+  }
+  /deep/ .operate-btn:hover {
+    color: @primary-color !important;
+    opacity: 0.7;
+  }
+  .book-btn {
+    display: inline-block;
+    padding: 0 10px;
+    height: 24px;
+    margin-right: 8px;
+    border: 1px solid #eee;
+    color: #999;
+    font-size: 12px;
+    line-height: 24px;
+    i {
+      display: none;
+    }
+    &.sta_so {
+      color: #8bc34a;
+      border: 1px solid #8bc34a;
+    }
+    &.sta_bc {
+      color: #fbc02d;
+      border: 1px solid #fbc02d;
+    }
+    &.sta_letter_yard {
+      color: #00bcd4;
+      border: 1px solid #00bcd4;
+    }
+    &.sta_xhz {
+      color: #e64a19;
+      border: 1px solid #e64a19;
+    }
+  }
+  .billtrace-box {
+    width: 100%;
+    // display: flex;
+    // height: 48px;
+    // flex-wrap:wrap;
+    // padding:3px 0;
+    // text-align: center;
+    .billtrace-btn {
+      display: inline-block;
+      font-size: 12px;
+      height: 16px;
+      // width:30%;
+      // display: flex;
+      span {
+        // flex: 1;
+        text-align: right;
+        color: #999;
+      }
+      i {
+        font-size: 12px;
+        color: #ccc;
+        // flex: 1;
+        text-align: center;
+        &.hide {
+          opacity: 0;
+        }
+      }
+      .active {
+        cursor: pointer;
+        // color: @primary-color;
+        color: #336600;
+      }
+    }
+  }
+  .normal-box {
+    .billtrace-btn {
+      display: inline-block;
+    }
+  }
+  .flex-box {
+    display: flex;
+    height: 48px;
+    flex-wrap: wrap;
+    padding: 3px 0;
+    text-align: center;
+    justify-content: center;
+    .billtrace-btn {
+      font-size: 12px;
+      height: 16px;
+      width: 30%;
+      display: flex;
+      span {
+        flex: 1;
+        text-align: right;
+        color: #999;
+      }
+      i {
+        font-size: 12px;
+        color: #ccc;
+        flex: 1;
+        text-align: center;
+        &.hide {
+          opacity: 0;
+        }
+      }
+      .active {
+        cursor: pointer;
+        // color: @primary-color;
+        color: #336600;
+      }
+      &:nth-of-type(3) {
+        i {
+          opacity: 0;
+        }
+      }
+    }
+  }
+  /deep/ .ant-form-item {
+    margin-bottom: 10px !important;
+  }
+  /deep/ .table-page-search-submitButtons {
+    margin-bottom: 10px !important;
+  }
+  /deep/ .ant-input {
+    height: 28px;
+    margin-top: 4px;
+    // transform: scaleY(.8);
+  }
+  /deep/ .ant-card-body {
+    padding-top: 10px;
+  }
+  /deep/ .ant-calendar-picker-input {
+    padding: 0 4px;
+  }
+  /deep/ .ant-calendar-range-picker-input {
+    height: 28px;
+    font-size: 12px;
+    vertical-align: top;
+    text-align: center;
+    // background: #f99;
+  }
+  .reamrk-btns {
+    overflow: visible;
+  }
+  /deep/ .from-label {
+    padding: 0 !important;
+  }
+  
+  .booking-from-box {
+    padding: 0 10px;
+  }
+  
+  @media (min-width: 1200px) and (max-width: 1600px) {
+    .from-label {
+      padding-right: 0 !important;
+    }
+  }
+  
+  @media (min-width: 1200px) and (max-width: 1438px) {
+    .table-page-search-submitButtons {
+      .ant-btn {
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+    }
+    .table-page-search-submitButtons .senior-search {
+      margin-left: 20px;
+      &::before {
+        left: -7px;
+      }
+    }
+  }
+  
+  /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;
+      cursor: pointer;
+    }
+  }
+  
+  // 货物状态
+  .goods-status {
+    width: 100%;
+    display: flex;
+    height: 48px;
+    align-items: center;
+    .goods-status-left {
+      flex: 1;
+      overflow: hidden;
+      height: 48px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      .goods-tip {
+        font-size: 12px;
+        margin: 0 4px;
+        cursor: pointer;
+        height: 48px;
+        line-height: 48px;
+        display: inline-block;
+        color: @primary-color;
+      }
+    }
+    .goods-status-right {
+      width: 30px;
+      text-align: center;
+      height: 48px;
+      i {
+        color: @primary-color;
+        cursor: pointer;
+        height: 48px;
+        line-height: 48px;
+      }
+    }
+    .TablelstShipOrderCompareRltRedo {
+      cursor: pointer;
+      margin-left: 0.5rem;
+      color: #13c2c2;
+    }
+  }
+  
+  .dzRemark,
+  .czRemark {
+    display: block;
+    text-align: left;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  /deep/ .line-box:nth-last-of-type(-n + 5) {
+    .book-remark-box {
+      .bookremark {
+        .reamrk-list {
+          top: inherit;
+          bottom: calc(100% + 8px);
+        }
+      }
+    }
+  }
+  
+  /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;
+    }
+    .book-remark-box {
+      .bookremark {
+        .reamrk-list {
+          top: inherit;
+          bottom: calc(100% + 8px);
+        }
+      }
+    }
+  }
+  
+  .hovers-list {
+    max-height: 400px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 300px;
+    background: #fff;
+    box-shadow: 0 0 10px #eee;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    padding: 5px 20px 10px 20px;
+    white-space: normal;
+    text-align: left;
+    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;
+      word-break: break-all;
+      &:nth-last-of-type(1) {
+        border: none;
+      }
+      .icon {
+        margin-right: 4px;
+        color: @primary-color;
+      }
+    }
+  }
+  .goods-hovers-list {
+    max-height: 400px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 300px;
+    background: #fff;
+    box-shadow: 0 0 50px #eee;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    padding: 5px 20px 10px 20px;
+    white-space: normal;
+    text-align: left;
+    z-index: 999 !important;
+    transition: 0.5s all;
+    display: block;
+    opacity: 1;
+    &.seat-top {
+      &::before {
+        display: none;
+        // content: '';
+        // bottom: -15px;
+        // left: 50%;
+      }
+    }
+    &.hide-goods-hover {
+      display: none;
+      opacity: 0;
+    }
+    // overflow: auto;
+    &::before {
+      content: '';
+      float: left;
+      width: 0;
+      height: 0;
+      border-width: 8px;
+      border-style: solid;
+      border-color: transparent #fff transparent transparent;
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+      position: absolute;
+      top: -15px;
+      left: 50%;
+      margin-left: -16px;
+    }
+  
+    .title {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+    .goods-btn {
+      display: inline-block;
+      font-size: 12px;
+      color: #666;
+      word-break: break-all;
+      width: 82px;
+      height: 28px;
+      line-height: 28px;
+      border-radius: 4px;
+      border: 1px solid #eee;
+      margin-bottom: 6px;
+      text-align: center;
+      margin: 0 2px 8px;
+      cursor: pointer;
+      &.active {
+        color: @primary-color;
+        border: 1px solid @primary-color;
+      }
+      .icon {
+        margin-right: 4px;
+        color: @primary-color;
+      }
+    }
+  }
+  
+  @media (min-width: 1192px) and (max-width: 1591px) {
+    .booking-from-box {
+      padding-right: 24px;
+      /deep/ .ant-calendar-picker-icon {
+        display: none;
+      }
+    }
+  }
+  
+  .booking-from-box {
+    /deep/ .ant-calendar-picker-icon {
+      margin-top: -4px !important;
+    }
+  }
+  /deep/ .ant-form-item-control-wrapper {
+    overflow: hidden !important;
+  }
+  
+  .no-data {
+    display: block;
+    color: #aaa;
+    font-size: 14px;
+    i {
+      line-height: 120px;
+      font-size: 100px;
+    }
+  }
+  .pono {
+    text-align: left;
+  }
+  /deep/ .vxe-header--row th {
+    text-align: left !important;
+  }
+  /deep/ .vxe-cell--title {
+    width: 100%;
+    text-align: left;
+  }
+  .TaskShippingOrderCompareP {
+    border-bottom: 1px solid #000;
+    padding: 5px;
+    background: #0000000e;
+    .TaskShippingOrderCompareSpan {
+      font-weight: bolder;
+      color: red;
+    }
+  }
+  .TaskShippingOrderCompareMainBox {
+    height: 55vh;
+    overflow-y: auto;
+    .TaskShippingOrderCompareMain {
+      p {
+        margin-bottom: 0;
+      }
+      .TaskShippingOrderCompareMainHeader {
+        display: flex;
+        > div {
+          &:nth-child(1) {
+            flex: 3;
+          }
+          &:nth-child(2) {
+            width: 46px;
+          }
+          &:nth-child(3) {
+            flex: 3;
+          }
+  
+          > p {
+            &:first-child {
+              font-weight: bolder;
+            }
+          }
+        }
+        &.Box {
+          border-top: 1px solid #000;
+          // border-bottom: 1px solid #000;
+          padding: 0.5rem 0 0 0;
+          margin-bottom: 0.5rem;
+        }
+      }
+      .TaskShippingOrderCompareMainList {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        > p {
+          flex: 2;
+          &:nth-child(1) {
+            flex: 1;
+          }
+          &:nth-child(3) {
+            flex: 0;
+            margin: 0 1rem;
+          }
+          &:nth-child(4) {
+            flex: 1;
+          }
+          // &:nth-child(3) {
+          //   flex: 2;
+          //   margin: 0 1rem;
+          //   padding-left: 0.5rem;
+          //   &.TaskShippingOrderCompareMainThird {
+          //     background: #facd91;
+          //     border: 1px solid red;
+          //   }
+          // }
+          // &.TaskShippingOrderCompareMainThird {
+          //   flex: 2;
+          //   background: #facd91;
+          //   border: 1px solid red;
+          //   margin: 0 1rem;
+          //   padding-left: 0.5rem;
+          // }
+        }
+        &.BoxNo {
+          padding-top: 0.5rem;
+          border-top: 1px solid #000;
+          &:nth-child(1) {
+            padding-top: 0;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+  // .form-box{
+  //   .form-main{
+  //     float: left;
+  //     margin-right: 10px;
+  //     display: flex;
+  //     width: 16%;
+  //     overflow: hidden;
+  //     .form-label{
+  //       display: inline-block;
+  //       margin-right: 10px;
+  //     }
+  //     .form-content{
+  //       flex: 1;
+  //     }
+  //   }
+  //   .more-btn{
+  //   }
+  // }
+  </style>
+  
+  
\ No newline at end of file
diff --git a/src/views/main/ViewDeletedList/components/autoView.vue b/src/views/main/ViewDeletedList/components/autoView.vue
new file mode 100644
index 0000000..c787b83
--- /dev/null
+++ b/src/views/main/ViewDeletedList/components/autoView.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="auto-input-content">
+    <auto-complete
+      class="auto-input"
+      size="small"
+      :allowClear="true"
+      v-model="value"
+      optionLabelProp="label"
+      :dropdown-match-select-width="false"
+      :defaultActiveFirstOption="false"
+      :dropdown-style="dropdownStyle"
+      :backfill="false"
+      @select="handleSelect"
+      @change="debounce(handleChange, 0, $event)"
+      @focus="handleChangeFirst"
+      @blur="getSelectBlur"
+    >
+      <template slot="dataSource">
+        <a-select-option v-for="(item, index) in dataSourceList" :key="index" :value="index + '-' + item[showLabel[0]]" :label="item[showLabel[0]]">
+          <div class="contractno-label" v-if="type === 'contractno'">
+            <div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
+            <div class="note"><span>{{ item.contractNote || '--' }}</span></div>
+          </div>
+          <div class="title" v-else>
+            <template v-for="(label, lindex) in showLabel">
+              {{ item[label] }}
+              <template v-if="lindex != showLabel.length - 1"> / </template>
+            </template>
+          </div>
+        </a-select-option>
+      </template>
+    </auto-complete>
+  </div>
+</template>
+<script>
+import {
+ getContractno
+} from '@/api/modular/main/BookingLedger'
+import { AutoComplete } from 'ant-design-vue'
+import { mapGetters } from 'vuex'
+let timer
+export default {
+  name: '',
+  components: {
+    AutoComplete
+  },
+  props: {
+    defaultVal: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    dropdownStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    searchApi: {
+      type: String,
+      default: ''
+    },
+    searchQuery: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 注意，需要显示的字段放在第一位
+    showLabel: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      value: this.defaultVal || '',
+      dataSourceList: [],
+      inEdit: false
+    }
+  },
+	computed: {
+    ...mapGetters(['bookingInitData'])
+  },
+  watch: {
+    defaultVal(nval, oval) {
+      if (this.inEdit) { return false }
+      this.value = nval
+    }
+  },
+  mounted() {
+    this.value = this.defaultVal
+  },
+  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)
+          }
+        })
+      });
+    },
+    emnuCompleteApi (type) {
+      switch (type) {
+        case 'getContractno':
+          return getContractno
+      }
+    },
+    handleSelect (e) {
+      const num = Number(e.split('-')[0])
+      const data = this.dataSourceList[num]
+      this.value = data[this.showLabel[0]]
+      this.$emit('select', {
+        type: this.type,
+        res: data
+      })
+      setTimeout(() => {
+        this.handleChange(this.value)
+      }, 600)
+    },
+    handleChange (e) {
+      this.inEdit = true
+      setTimeout(() => {
+        this.inEdit = false
+      }, 800)
+      if (e) {
+        Object.keys(this.searchQuery).map((item, index) => {
+					if (['queryItem'].includes(item)) {
+            this.searchQuery[item] = e
+          }
+        })
+      } else {
+        Object.keys(this.searchQuery).map((item, index) => {
+					if (['queryItem'].includes(item)) {
+          	this.searchQuery[item] = ''
+          }
+        })
+      }
+      this.getFromSelectData(this.emnuCompleteApi(this.searchApi), this.searchQuery).then((data) => {
+        if (data.rows) {
+          this.dataSourceList = data.rows
+        } else {
+          this.dataSourceList = data
+        }
+      })
+    },
+    handleChangeFirst (e) {
+      if (this.value && this.dataSourceList.length !== 0) {
+        return false
+      }
+			if (this.bookingInitData[`${this.type}InitList`].length > 0) {
+				this.dataSourceList = this.bookingInitData[`${this.type}InitList`]
+				return false
+			}
+      this.handleChange(e)
+    },
+		getSelectBlur (e) {
+			if (this.type === 'contractno') {
+				this.$emit('select', {
+					type: this.type,
+					res: {
+						contractNo: this.value
+					}
+				})
+			}
+		}
+  }
+}
+</script>
+<style lang="less">
+.contractno-label{
+  .title{
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    font-weight:600;
+    color: #666;
+  }
+  .note{
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>
diff --git a/src/views/main/ViewDeletedList/components/datePickerView.vue b/src/views/main/ViewDeletedList/components/datePickerView.vue
new file mode 100644
index 0000000..1e1b4c1
--- /dev/null
+++ b/src/views/main/ViewDeletedList/components/datePickerView.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="date-content">
+    <a-date-picker
+      size="small"
+      ref="dateInput"
+      style="min-width:100px"
+      :class="`date-picker-${type}`"
+      :format="format"
+      v-model="value"
+      :open="open"
+      :show-time="showTime"
+      @change="changeDate"
+      @openChange="handleOpenChange"
+      @focus="onFocus">
+      <a-icon slot="suffixIcon" type="time" style="display: none" />
+    </a-date-picker>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    parentVal: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+		format: {
+			type: String,
+      default: 'YYYY-MM-DD'
+		},
+		showTime: {
+			type: Boolean,
+      default: false
+		}
+  },
+  data() {
+    return {
+      value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal,
+			open: false,
+			over: false
+    }
+  },
+  watch: {
+    parentVal(nval, oval) {
+      this.value = nval
+    }
+  },
+  mounted() {
+  },
+  methods: {
+		changeDate (date, dateString) {
+			if (!dateString) {
+        this.value = null
+      } else {
+        this.value = dateString
+      }
+			this.$emit('dateChange', {
+				type: this.type,
+				value: this.value
+			})
+		},
+		handleOpenChange (open) {
+			this.open = open;
+			if (!this.open) {
+				this.over = true
+				this.$refs.dateInput.$refs.picker.$refs.input.focus()
+				setTimeout(() => {
+					this.over = false
+				}, 1200)
+			}
+		},
+		onFocus () {
+			if (!this.open && !this.over) {
+				this.open = true
+			}
+		}
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/main/ViewDeletedList/components/inputView.vue b/src/views/main/ViewDeletedList/components/inputView.vue
new file mode 100644
index 0000000..4369cbe
--- /dev/null
+++ b/src/views/main/ViewDeletedList/components/inputView.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="input-content">
+    <input
+      class="ant-input input-box"
+      :class="`input-${type}`"
+      size="small"
+      :type="inputType"
+      v-model="value"
+      :disabled="ishd"
+      :placeholder="placeholder"
+      @blur="inputBlur"
+      @change="inputChange"
+    />
+    <a-icon type="close-circle" theme="filled" class="ant-input-suffix input-icon" @click="clearInput" v-if="value"/>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    parentVal: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    ishd: {
+      type: Boolean,
+      default: false
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // value: this.parentVal || '',
+      value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal
+    }
+  },
+  watch: {
+    parentVal(nval, oval) {
+      this.value = nval
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    inputBlur() {
+      this.$emit('getInputChange', {
+        type: this.type,
+        value: this.value
+      })
+    },
+    inputChange(e) {
+      if (e.type === 'click' && !this.value) {
+        this.$emit('getInputChange', {
+          type: this.type,
+          value: this.value
+        })
+      }
+    },
+    clearInput () {
+      this.value = ''
+      this.$emit('getInputChange', {
+        type: this.type,
+        value: this.value
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.input-content{
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  .input-box {
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+  }
+  .input-icon{
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.25);
+    line-height: 0;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    opacity: 0;
+    right: 10px;
+  }
+  &:hover{
+    .input-icon{
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/src/views/main/ViewDeletedList/components/selectView.vue b/src/views/main/ViewDeletedList/components/selectView.vue
new file mode 100644
index 0000000..805eab1
--- /dev/null
+++ b/src/views/main/ViewDeletedList/components/selectView.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="select-content">
+    <div class="select-input">
+      <a-select
+        size="small"
+        ref="selectView"
+        :class="`select-input-${type}`"
+        v-model="value"
+        show-search
+        :allowClear="true"
+        :filter-option="!this.openSearch ? filterOption : false"
+        :dropdownMatchSelectWidth="false"
+        :showArrow="!this.openSearch ? true : true"
+        :open="open"
+        optionLabelProp="label"
+        :notFoundContent="inLoading ? '加载中...' : '暂无数据'"
+        @focus="getSelectFirst"
+        @blur="getSelectBlur"
+        @select="selectOption"
+        @change="(value,option)=> debounce(this.handleChange, 200, option)"
+        @search="debounce(handleSearch, 300, $event)"
+      >
+        <!-- v-clickDown="{ clickFun: () => {} , dblclickFun: this.dblclickFun }" -->
+        <a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]">
+          <template v-if="type === 'contractno'">
+            <div class="contractno-label">
+              <div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
+              <div class="note"><span>{{ item.contractNote || '--' }}</span></div>
+            </div>
+          </template>
+          <template v-if="type === 'vessel'">
+            <div class="vessel-label">
+              <div class="title"> {{ item.vessel }} </div>
+              <div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div>
+              <div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div>
+            </div>
+          </template>
+          <template v-else>
+            <template v-for="(label, lindex) in showLabel">
+              {{ item[label] }}
+              <template v-if="lindex != showLabel.length - 1"> / </template>
+            </template>
+          </template>
+        </a-select-option>
+      </a-select>
+      <div v-show="!open" class="select_overlap" @mouseup="openSelect"></div>
+    </div>
+    <div class="copy-btn iconfont icon-fuzhi11" @click="dblclickFun"></div>
+    <!-- <div
+      v-show="!open"
+      class="select_overlap"
+      v-clickDown="{ clickFun: this.openSelect, dblclickFun: this.dblclickFun }"
+    >
+    </div> -->
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import {
+ GetPortloadlist,
+ GetPortlist,
+ BookingTemplate,
+ DjyCustomerpage,
+ DjyCustomerSuggest,
+ getContractno,
+ getVesselInfoService,
+ GetForwarderlist,
+ GetSysUserPage,
+ GetService,
+ getGoodsname
+} from '@/api/modular/main/BookingLedger'
+import { mapGetters, mapActions } from 'vuex'
+let timer
+Vue.directive('clickDown', {
+	inserted(el, binding, vnode) {
+		let clickTimer = null
+		el.addEventListener('click', () => {
+			if (clickTimer) {
+				window.clearTimeout(clickTimer);
+				clickTimer = null;
+			}
+			clickTimer = setTimeout(() => {
+        binding.value.clickFun()
+			}, 300);
+		})
+		el.addEventListener('dblclick', () => {
+			if (clickTimer) {
+				window.clearTimeout(clickTimer);
+				clickTimer = null;
+			}
+      binding.value.dblclickFun()
+		})
+	}
+});
+export default {
+  name: '',
+  props: {
+    defaultVal: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    searchApi: {
+      type: String,
+      default: ''
+    },
+    searchQuery: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    openSearch: {
+      type: Boolean,
+      default: false
+    },
+    showLabel: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      value: this.defaultVal || '',
+      selectList: [],
+      inEdit: false,
+      inLoading: false,
+      init: false,
+      open: false,
+      clickHandle: null,
+      inInit: false
+    }
+  },
+  computed: {
+    ...mapGetters(['carrierList', 'yardList', 'packageList', 'issuetypeList', 'blfrtList', 'lineList', 'bookingInitData'])
+  },
+  watch: {
+    defaultVal(nval, oval) {
+      if (this.inEdit) { return false }
+      this.value = nval
+    },
+    value (nval, oval) {
+      if (nval !== oval) {
+        this.handleValueChange(nval)
+      }
+    }
+  },
+  created() {
+    this.inInit = true
+    setTimeout(() => {
+      this.inInit = false
+    }, 800)
+  },
+  mounted() {
+    this.clickHandle = (e) => {
+      if (e.target && 'className' in e.target && this.open) {
+        const className = e.target.className;
+        if (className.indexOf('select_overlap') === -1) {
+            this.open = false
+        }
+      } else {
+        this.open = false
+      }
+    }
+    document.body.addEventListener('click', this.clickHandle)
+  },
+  beforeDestroy() {
+    if (this.clickHandle) {
+      document.body.removeEventListener('click', this.clickHandle)
+      this.clickHandle = null
+    }
+  },
+  methods: {
+    ...mapActions(['setLineList']),
+    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 'GetPortloadlist':
+          return GetPortloadlist
+        case 'GetPortlist':
+          return GetPortlist
+        case 'BookingTemplate':
+          return BookingTemplate
+        case 'DjyCustomerpage':
+          return DjyCustomerpage
+        case 'DjyCustomerSuggest':
+          return DjyCustomerSuggest
+        case 'getContractno':
+          return getContractno
+        case 'getVesselInfoService':
+          // 船名
+          return getVesselInfoService
+        case 'GetForwarderlist':
+          return GetForwarderlist
+        case 'GetSysUserPage':
+          return GetSysUserPage
+        case 'GetService':
+          return GetService
+        case 'getGoodsname':
+          return getGoodsname
+      }
+    },
+    emnuData (type) {
+      switch (type) {
+        case 'cargoid':
+          return [
+            {
+              name: 'S 普通货',
+              code: 'S'
+            },
+            {
+              name: 'R 冻柜',
+              code: 'R'
+            },
+            {
+              name: 'D 危险品',
+              code: 'D'
+            },
+            {
+              name: 'O 超限箱',
+              code: 'O'
+            }
+          ]
+        case 'nobill':
+          return [
+            {
+              name: 'ONE',
+              code: 'ONE'
+            },
+            {
+              name: 'TWO',
+              code: 'TWO'
+            },
+            {
+              name: 'THREE',
+              code: 'THREE'
+            },
+            {
+              name: 'FOUR',
+              code: 'FOUR'
+            },
+            {
+              name: 'FIVE',
+              code: 'FIVE'
+            },
+            {
+              name: 'SIX',
+              code: 'SIX'
+            },
+            {
+              name: 'SEVEN',
+              code: 'SEVEN'
+            },
+            {
+              name: 'EIGHT',
+              code: 'EIGHT'
+            },
+            {
+              name: 'NINE',
+              code: 'NINE'
+            },
+            {
+              name: 'TEN',
+              code: 'TEN'
+            }
+          ]
+        case 'copynobill':
+          return [
+            {
+              name: 'ONE',
+              code: 'ONE'
+            },
+            {
+              name: 'TWO',
+              code: 'TWO'
+            },
+            {
+              name: 'THREE',
+              code: 'THREE'
+            },
+            {
+              name: 'FOUR',
+              code: 'FOUR'
+            },
+            {
+              name: 'FIVE',
+              code: 'FIVE'
+            },
+            {
+              name: 'SIX',
+              code: 'SIX'
+            },
+            {
+              name: 'SEVEN',
+              code: 'SEVEN'
+            },
+            {
+              name: 'EIGHT',
+              code: 'EIGHT'
+            },
+            {
+              name: 'NINE',
+              code: 'NINE'
+            },
+            {
+              name: 'TEN',
+              code: 'TEN'
+            }
+          ]
+        case 'masterBolIndicator':
+          return [
+            { ID: '1', NAME: 'Carrier filing HBL | 船公司发HBL' },
+            { ID: '2', NAME: 'Self filing HBL | 自己发' },
+            { ID: '3', NAME: 'Not Applicable/Straight bl | 无HBL' }
+          ]
+        case 'salerCode':
+          return [
+            { ID: 'CN087', NAME: 'CN087 | GRACE SUN' },
+            { ID: 'CN096', NAME: 'CN096 | LEON LIANG' },
+            { ID: 'CN097', NAME: 'CN097 | CHARLES GAO' },
+            { ID: 'CN098', NAME: 'CN098 | TERESA LIU SHAN' },
+            { ID: 'CN106', NAME: 'CN106 | HOKI YU' },
+            { ID: 'CN107', NAME: 'CN107 | WILLIAM YANG JING YU' },
+            { ID: 'CN099', NAME: 'CN099 | HELEN ZHANG' },
+            { ID: 'CN100', NAME: 'CN100 | LEOREN' }
+          ]
+        case 'yard':
+          return this.yardList
+        case 'kindpkgs':
+          return this.packageList
+        case 'carrierid':
+          return this.carrierList
+        case 'issuetype':
+          return this.issuetypeList
+        case 'blfrt':
+          return this.blfrtList
+        case 'lineName':
+          return this.lineList
+        case 'shippingMethod':
+          const arr = this.$options.filters['dictData']('ShippingMethod') || []
+          return arr
+      }
+    },
+    filterOption(input, option) {
+      if (this.openSearch) {
+        return true
+       } else {
+        return option.componentOptions.children[1].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+       }
+    },
+    handleValueChange(val) {
+      if (this.inInit) { return false }
+      this.inEdit = true
+      setTimeout(() => {
+        this.inEdit = false
+      }, 300)
+      this.selectList.map((item, index) => {
+        if (`${item[this.showLabel[0]]}${index}` === val) {
+          this.value = item[this.showLabel[0]]
+          this.$emit('change', {
+            type: this.type,
+            res: this.selectList[index]
+          })
+        }
+      })
+    },
+
+    handleChange (op) {
+      // this.selectOpen = !this.selectOpen
+      this.inEdit = true
+      setTimeout(() => {
+        this.inEdit = false
+      }, 800)
+      if (!op) {
+        this.$emit('change', {
+          type: this.type,
+          res: {}
+        })
+      } else {
+        const num = op.data.key
+        this.value = this.selectList[num][this.showLabel[0]]
+        this.$emit('change', {
+          type: this.type,
+          res: this.selectList[num]
+        })
+      }
+    },
+    getSelectFirst (e, canClick = true) {
+      if (canClick) {
+        this.$refs.selectView.$refs.vcSelect.$refs.arrow.click()
+      } else {
+        this.$refs.selectView.$refs.vcSelect.focus()
+      }
+      this.open = true
+      if (['cargoid', 'nobill', 'copynobill', 'carrierid', 'yard', 'kindpkgs', 'issuetype', 'blfrt', 'masterBolIndicator', 'salerCode', 'shippingMethod'].includes(this.type)) {
+        this.selectList = this.emnuData(this.type)
+        this.inLoading = false
+        return false
+      }
+      // 注意，航线（lineName）, 为管理员更新，需要单独处理
+      if (['lineName'].includes(this.type)) {
+        this.selectList = this.emnuData(this.type)
+        this.inLoading = false
+        this.setLineList()
+        return false
+      }
+      if (!e) {
+        if (!['vessel', 'lineName'].includes(this.type) && this.bookingInitData[`${this.type}InitList`].length > 0) {
+          console.log(this.bookingInitData[`${this.type}InitList`])
+          this.selectList = this.bookingInitData[`${this.type}InitList`]
+          return false
+        }
+        if (this.openSearch && this.value && this.selectList.length > 0) {
+          return false
+        } else if (this.openSearch && this.value && this.selectList.length === 0) {
+          // 这里需要确认 - 加载全部数据，或者加载已选中数据  - 建议加载全部
+          // Object.keys(this.searchQuery).map((item, index) => {
+          //   if (['Title', 'KeyWord', 'SearchValue', 'name', 'keyword'].includes(item)) {
+          //     this.searchQuery[item] = this.value
+          //   }
+          // })
+        }
+        this.inLoading = true
+        this.getFromSelectData(this.emnuSelectApi(this.searchApi), this.searchQuery).then((data) => {
+          if (data.rows) {
+            this.selectList = data.rows
+          } else {
+            this.selectList = data
+          }
+          this.inLoading = false
+        })
+      }
+    },
+
+    handleSearch (e) {
+      if (this.openSearch) {
+        this.inEdit = true
+        setTimeout(() => {
+          this.inEdit = false
+        }, 800)
+        if (e) {
+          /* *
+           * 字段值：
+           * Title 收发通模板
+           * KeyWord 港口信息
+           * SearchValue 报关行，仓库，车队， 国外代理
+           * name 包装
+           * */
+          Object.keys(this.searchQuery).map((item, index) => {
+            if (['Title', 'KeyWord', 'SearchValue', 'name', 'keyword', 'queryItem'].includes(item)) {
+              this.searchQuery[item] = e
+            }
+          })
+        } else {
+          Object.keys(this.searchQuery).map((item, index) => {
+            if (['Title', 'KeyWord', 'SearchValue', 'name', 'keyword', 'queryItem'].includes(item)) {
+              this.searchQuery[item] = ''
+            }
+          })
+        }
+        this.getFromSelectData(this.emnuSelectApi(this.searchApi), this.searchQuery).then((data) => {
+          if (data.rows) {
+            this.selectList = data.rows
+          } else {
+            this.selectList = data
+          }
+        })
+      }
+    },
+
+    openSelect(open) {
+      if (!this.open) {
+        this.getSelectFirst('', false)
+      } else {
+        this.open = !this.open
+      }
+    },
+    selectOption() {
+      this.open = false
+    },
+    getSelectBlur (e) {
+      this.open = false
+    },
+    dblclickFun () {
+      if (!this.value) {
+        this.$message.error('暂无可复制内容')
+        return false
+      }
+      this.copy(this.value)
+    },
+    copy(textValue) {
+      const textarea = document.createElement('textarea')
+      textarea.readOnly = 'readonly'
+      textarea.style.position = 'absolute'
+      textarea.style.left = '-9999px'
+      textarea.value = textValue
+      document.body.appendChild(textarea)
+      textarea.select()
+      const result = document.execCommand('Copy')
+      if (result) {
+        this.$message.success('复制成功')
+      }
+      document.body.removeChild(textarea)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.contractno-label{
+  .title{
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    font-weight:600;
+    color: #666;
+  }
+  .note{
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.vessel-label{
+  .title{
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    font-weight:600;
+    color: #666;
+    border-bottom:1px dashed #ddd;
+    margin-bottom: 4px;
+  }
+  .voyno, .etd {
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+.select-content {
+  display: flex;
+  .select-input{
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    .select_overlap {
+      cursor: pointer;
+      height: 32px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      opacity: 0;
+    }
+  }
+  .copy-btn{
+    width: 24px;
+    text-align: center;
+    color: #bbb;
+    font-size: 13px;
+    &:hover{
+      color: @primary-color;
+    }
+  }
+}
+</style>
diff --git a/src/views/main/ViewDeletedList/components/textareaView.vue b/src/views/main/ViewDeletedList/components/textareaView.vue
new file mode 100644
index 0000000..8868ddd
--- /dev/null
+++ b/src/views/main/ViewDeletedList/components/textareaView.vue
@@ -0,0 +1,113 @@
+<template>
+  <textarea
+    class="ant-input"
+    v-model="value"
+    :style="`width:100%;display:inline-block;height: ${height}px`"
+    @input="debounce(textareaChange, 300, $event)"
+    @blur="textareaBlur"
+  ></textarea>
+  <!--  -->
+</template>
+<script>
+let timer
+export default {
+  name: '',
+  props: {
+    parentVal: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 120
+    },
+    openToCDB: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      value: this.parentVal || '',
+      inEdit: false
+    }
+  },
+  watch: {
+    parentVal(nval, oval) {
+      if (this.inEdit) {
+        return false
+      }
+      this.value = nval
+    }
+  },
+  mounted() {},
+  methods: {
+    debounce(func, wait, ...args) {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        func.apply(this, args)
+      }, wait)
+    },
+    textareaBlur() {
+      if (this.openToCDB) {
+        this.value = this.ToCDB(this.value).toUpperCase()
+        this.$emit('getTextareaChange', {
+          type: this.type,
+          value: this.value
+        })
+      }
+    },
+    textareaChange(e) {
+      this.inEdit = true
+      setTimeout(() => {
+        this.inEdit = false
+      }, 800)
+      this.$emit('getTextareaChange', {
+        type: this.type,
+        value: this.value
+      })
+    },
+    ToCDB(str) {
+      var tmp = ''
+      for (var i = 0; i < str.length; i++) {
+        if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
+          tmp += String.fromCharCode(str.charCodeAt(i) - 65248)
+        } else {
+          tmp += String.fromCharCode(str.charCodeAt(i))
+        }
+      }
+      tmp = tmp.replace(/，/gi, ',')
+      tmp = tmp.replace(/。/gi, '.')
+      tmp = tmp.replace(/；/gi, ';')
+      tmp = tmp.replace(/：/gi, ':')
+      tmp = tmp.replace(/？/gi, '?')
+      tmp = tmp.replace(/！/gi, '!')
+      tmp = tmp.replace(/《/gi, '<<')
+      tmp = tmp.replace(/》/gi, '>>')
+      tmp = tmp.replace(/‘/gi, "'")
+      tmp = tmp.replace(/’/gi, "'")
+      tmp = tmp.replace(/、/gi, ',')
+      // tab键转换暂时屏蔽，看后台转换的效果，再放开
+      tmp = tmp.replace(/\t/gi, ' ')
+      // 中文字符，看后台转换效果，后修改
+      if (/[\u4E00-\u9FA5]+/g.test(tmp) && ['description', 'marks'].includes(this.type)) {
+        tmp = tmp.replace(/[\u4E00-\u9FA5]+/g, '')
+        this.$message.error(`${this.getTypeName(this.type)}中，不支持中文字符`)
+      }
+      return tmp
+    },
+    getTypeName(type) {
+      switch (type) {
+        case 'marks':
+          return '封志号 / 标记与号码'
+        case 'description':
+          return '包装种类与货名'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/main/ViewDeletedList/modules/formLabel.vue b/src/views/main/ViewDeletedList/modules/formLabel.vue
new file mode 100644
index 0000000..fe78cb0
--- /dev/null
+++ b/src/views/main/ViewDeletedList/modules/formLabel.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="from-label">
+    <template v-if="labelData.type == 'input'">
+      <inputView ref="inputView" :type="labelData.label" :parentVal="value" @getInputChange="inputChange" />
+    </template>
+    <template v-else-if="labelData.type == 'date'">
+      <datePickerView
+        ref="datePickerView"
+        class="date-picker"
+        :parentVal="value"
+        type="etd"
+        format="YYYY-MM-DD"
+        @dateChange="dateChangeFun"
+      ></datePickerView>
+    </template>
+    <template v-else-if="labelData.type == 'dateRange'">
+      <div class="picker-box" style="display:flex;padding-right: 2px;">
+        <a-date-picker
+          style="min-width:30px; flex: 1;"
+          v-model="startValue"
+          :disabled-date="disabledStartDate"
+          format="YYYY-MM-DD"
+          suffixIcon=" "
+          placeholder="开始时间"
+          @openChange="handleStartOpenChange"
+        />
+        <span style="margin:0 4px;">-</span>
+        <a-date-picker
+          style="min-width:30px;flex: 1;"
+          v-model="endValue"
+          :disabled-date="disabledEndDate"
+          format="YYYY-MM-DD"
+          placeholder="结束时间"
+          suffixIcon=" "
+          :open="endOpen"
+          @openChange="handleEndOpenChange"
+        />
+      </div>
+    </template>
+    <template v-else-if="labelData.type == 'select'">
+      <a-select
+        size="small"
+        style="margin-top:7px;"
+        v-model="value"
+        show-search
+        :dropdownMatchSelectWidth="false"
+        :filter-option="filterOption"
+        @change="debounce(handleSelectChange, 300, $event)"
+        @focus="getSelectFirst"
+      >
+        <template v-if="['CARRIER', 'YARDID', 'ISSUETYPE', 'CARGOID'].includes(labelData.label)">
+          <a-select-option v-for="(sitem,sindex) in dataList" :key="sindex">
+            {{ sitem[labelData.showLabel2] }}/ {{ sitem[labelData.showLabel] }}
+          </a-select-option>
+        </template>
+        <template v-else>
+          <a-select-option v-for="(sitem,sindex) in dataList" :key="sindex">{{ sitem[labelData.showLabel] }}</a-select-option>
+        </template>
+      </a-select>
+    </template>
+    <template v-else-if="labelData.type == 'complete'">
+      <auto-complete
+        size="small"
+        :allowClear="true"
+        class="customer-input"
+        :dropdown-match-select-width="false"
+        :dropdown-style="{ width: '200px' }"
+        v-model="value"
+        option-label-prop="label"
+        @select="completeSelect"
+        @focus="completeChangeFirst"
+        @change="debounce(completeChange, 300, $event)"
+      >
+        <!-- <template slot="dataSource" v-if="labelData.label === 'VESSEL'">
+          <a-select-option v-for="(item, index) in dataSourceList" :key="index" :value="item[labelData.showLabel]">
+            <div class="vessel-label">
+              <div class="title"> 船名：{{ item[labelData.showLabel] }} </div>
+              <div class="msg"> 航次：{{ item[labelData.showLabel2] || '--' }} </div>
+            </div>
+          </a-select-option>
+        </template>-->
+        <template slot="dataSource">
+          <a-select-option v-for="(item, index) in dataSourceList" :key="`${index}-${item[labelData.showLabel]}`" :value="`${index}-${item[labelData.showLabel]}`" :label="item[labelData.showLabel]">
+            <div>
+              <div class="title"> {{ item[labelData.showLabel] }} </div>
+            </div>
+          </a-select-option>
+        </template>
+      </auto-complete>
+    </template>
+  </div>
+</template>
+<script>
+import { AutoComplete } from 'ant-design-vue'
+import inputView from '../components/inputView'
+import datePickerView from '../components/datePickerView'
+import { mapGetters } from 'vuex'
+let timer;
+export default {
+  components: {
+    AutoComplete,
+    inputView,
+    datePickerView
+  },
+  props: {
+    labelData: {
+      type: Object,
+      required: true
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    formRes: {
+      type: Object,
+      required: false
+    },
+    resetType: {
+      type: Boolean,
+      default: true
+    },
+    formIndex: {
+      type: Number,
+      default: null
+    }
+    // eslint-disable-next-line vue/require-default-prop
+    // dataSourceList: {
+    //   type: Array,
+    //   required: false
+    // }
+  },
+  watch: {
+    resetType (nval, oval) {
+      if (!nval) {
+        this.value = ''
+        this.dateVal = []
+        this.startValue = ''
+        this.endValue = ''
+        if (this.labelData.type === 'input') {
+          this.$refs.inputView.$data.value = ''
+        } else if (this.labelData.type === 'date') {
+          this.$refs.datePickerView.$data.value = ''
+        }
+      }
+    },
+    startValue(val) {
+      if (!this.resetType) { return false }
+      this.getDateRangeRes()
+    },
+    endValue(val) {
+      if (!this.resetType) { return false }
+      this.getDateRangeRes()
+    }
+  },
+  data() {
+    return {
+      value: '',
+      dateVal: [],
+      startValue: null,
+      endValue: null,
+      endOpen: false,
+      dataList: this.labelData.dataList || [],
+      dataSourceList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['carrierList', 'ctnallList', 'yardList', 'packageList', 'issuetypeList', 'blfrtList', 'lineList', 'bookingInitData'])
+  },
+  mounted() { },
+  methods: {
+    debounce (func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
+    changeInput(data) {
+      this.$emit('change', {
+        form: this.labelData,
+        value: data.value
+      })
+    },
+    changeDate(data) {
+      this.$emit('change', {
+        form: this.labelData,
+        value: data.value
+      })
+    },
+    disabledStartDate(startValue) {
+      const endValue = this.endValue;
+      if (!startValue || !endValue) {
+        return false;
+      }
+      return startValue.valueOf() > endValue.valueOf();
+    },
+    disabledEndDate(endValue) {
+      const startValue = this.startValue;
+      if (!endValue || !startValue) {
+        return false;
+      }
+      return startValue.valueOf() >= endValue.valueOf();
+    },
+    handleStartOpenChange(open) {
+      if (!open) {
+        this.endOpen = true;
+      }
+    },
+    handleEndOpenChange(open) {
+      this.endOpen = open;
+    },
+    getDateRangeRes () {
+      const start = this.startValue ? this.formatDate(this.startValue._d).substr(0, 10) : ''
+      const end = this.endValue ? this.formatDate(this.endValue._d).substr(0, 10) : ''
+      const date = [start, end]
+      this.$emit('change', {
+        form: this.labelData,
+        value: date
+      })
+    },
+    formatDate (now) {
+      var date = new Date(now)
+      var y = date.getFullYear()
+      var m = date.getMonth() + 1
+      if (m < 10) {
+        m = '0' + m;
+      }
+      var d = date.getDate()
+      if (d < 10) {
+        d = '0' + d;
+      }
+      var h = date.getHours()
+      if (h < 10) {
+        h = '0' + h;
+      }
+      var min = date.getMinutes()
+      if (min < 10) {
+        min = '0' + min;
+      }
+      var s = date.getSeconds()
+      if (s < 10) {
+        s = '0' + s;
+      }
+      return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s
+		},
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    handleSelectChange (e) {
+      this.$emit('change', {
+        form: this.labelData,
+        value: this.dataList[e][this.labelData.showLabel]
+      })
+    },
+    getSelectFirst (e) {
+      if (!e) {
+        if (['LINENAME', 'CNTRTOTAL', 'KINDPKGS', 'ISSUETYPE', 'YARDID', 'CARRIER', 'NOBILL', 'CARGOID'].includes(this.labelData.label)) {
+          this.dataList = this.emnuData(this.labelData.label)
+        } else {
+          this.$emit('selectFirst', {
+            form: this.labelData,
+            index: this.formIndex,
+            value: ''
+          })
+        }
+      }
+    },
+    emnuData (type) {
+      switch (type) {
+        case 'LINENAME':
+          return this.lineList
+        case 'CNTRTOTAL':
+          return this.ctnallList
+        case 'KINDPKGS':
+          return this.packageList
+        case 'ISSUETYPE':
+          return this.issuetypeList
+        case 'YARDID':
+          return this.yardList
+        case 'CARRIER':
+          return this.carrierList
+        case 'NOBILL':
+          return this.labelData.data
+        case 'CARGOID':
+          return this.labelData.data
+      }
+    },
+    completeSelect (value) {
+      const val = value.split('-')[1]
+      this.$emit('change', {
+        form: this.labelData,
+        value: val || ''
+      })
+    },
+    completeChange (value) {
+      const val = value ? value.split('-')[1] : ''
+      let res = val || value || ''
+      this.$emit('change', {
+        form: this.labelData,
+        value: val || value || ''
+      })
+      this.$emit('getCompleteList', {
+        form: this.labelData,
+        value: value.includes('-') ? val || '' : value || ''
+      })
+    },
+    completeChangeFirst (value) {
+      if (this.value) { return false }
+      let label, arr;
+      if (['CUSTOMERNAME', 'FORWARDER', 'SALE', 'CUSTSERVICE', 'OP', 'DOC', 'ROUTE', 'PAYABLEAT', 'ISSUEPLACE', 'PREPARDAT', 'SERVICE', 'TRUCKER', 'SHIPAGENCY', 'CUSTOMSER'].includes(this.labelData.label)) {
+        label = this.labelData.label.toLowerCase()
+        arr = this.bookingInitData[`${label}InitList`]
+      } else if (['PORTDISCHARGE', 'PORTLOAD', 'PLACERECEIPT', 'DESTINATION', 'PLACEDELIVERY'].includes(this.labelData.label)) {
+        label = this.labelData.label.toLowerCase() + 'id'
+        arr = this.bookingInitData[`${label}InitList`]
+      } else if (['PLACERECEIPT', 'DESTINATION', 'PLACEDELIVERY'].includes(this.labelData.label)) {
+        label = this.labelData.label.toLowerCase() + 'name'
+        arr = this.bookingInitData[`${label}InitList`]
+      } else if (this.labelData.label === 'AGENTID') {
+        label = 'agentname'
+        arr = this.bookingInitData[`${label}InitList`]
+      } else {
+        label = ''
+        arr = []
+      }
+      if (arr.length > 0) {
+        this.dataSourceList = arr
+      } else {
+        this.$emit('getCompleteList', {
+          form: this.labelData,
+          value: value || ''
+        })
+      }
+    },
+    inputChange (data) {
+      this.changeInput(data)
+    },
+    dateChangeFun (data) {
+      this.changeDate(data)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.aa{
+  transform: scaleY(.8);
+}
+/deep/ .ant-select-selection__clear{
+  margin-top: 0;
+}
+.vessel-label{
+  // border-bottom:1px solid #eee;
+  .title{
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    font-weight:600;
+    color: #666;
+    border-bottom:1px dashed #ddd;
+    margin-bottom: 4px;
+  }
+  .voyno, .etd {
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    color: #999;
+  }
+}
+
+/deep/.ant-calendar-picker-input{
+  overflow: hidden;
+}
+/deep/.ant-calendar-range-picker-input{
+  height: 24px !important;
+  line-height: 24px !important;
+}
+/deep/ .ant-input{
+  height: 24px !important;
+}
+</style>
diff --git a/src/views/main/ViewDeletedList/modules/initData.js b/src/views/main/ViewDeletedList/modules/initData.js
new file mode 100644
index 0000000..8442172
--- /dev/null
+++ b/src/views/main/ViewDeletedList/modules/initData.js
@@ -0,0 +1,597 @@
+export default {
+  // ==== 表格部分 ====
+  columns: [
+    { type: 'checkbox', width: 60, noDraggable: true },
+    { field: 'carrier', width: 120, title: '船公司', showHeaderOverflow: true, sortable: true },
+    { field: 'yard', label: 'YARD', width: 120, title: '场站', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'mblno',
+      label: 'MBLNO',
+      width: 160,
+      title: '主提单号',
+      showHeaderOverflow: true,
+      showOverflow: false,
+      sortable: true,
+      slots: { default: 'mblno' }
+    },
+    { field: 'vessel', label: 'VESSEL', width: 120, title: '船名', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'etd',
+      label: 'ETD',
+      width: 110,
+      title: '开船日期',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'etd' }
+    },
+    { field: 'voyno', label: 'VOYNO', width: 120, title: '海关航次', showHeaderOverflow: true },
+    // { 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 },
+    {
+      field: 'portdischarge',
+      label: 'PORTDISCHARGE',
+      width: 120,
+      title: '卸货港',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'createdUserName',
+      label: 'CREATEDUSERNAME',
+      width: 120,
+      title: '创建人',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'createdTime',
+      label: 'CREATEDTIME',
+      width: 160,
+      title: '创建日期',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'cntrtotal',
+      label: 'CNTRTOTAL',
+      width: 120,
+      title: '箱型*箱量',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'operate',
+      title: '操作',
+      width: 110,
+      noDraggable: true,
+      slots: { default: 'operate' },
+      fixed: 'right',
+      resizable: false
+    }
+  ],
+  columnsAllData: [
+    {
+      field: 'mblno',
+      label: 'MBLNO',
+      width: 160,
+      title: '主提单号',
+      showHeaderOverflow: true,
+      showOverflow: false,
+      sortable: true,
+      slots: { default: 'mblno' }
+    },
+    { field: 'hblno', label: 'HBLNO', width: 120, title: '分提单号', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'customername',
+      label: 'CUSTOMERNAME',
+      width: 120,
+      title: '委托单位',
+      showHeaderOverflow: true,
+      sortable: true
+    }, // 客户
+    { field: 'consignee', label: 'CONSIGNEE', width: 120, title: '收货人', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'notifyparty',
+      label: 'NOTIFYPARTY',
+      width: 120,
+      title: '通知人',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    { field: 'yard', label: 'YARD', width: 120, title: '场站', showHeaderOverflow: true, sortable: true },
+    { field: 'vessel', label: 'VESSEL', width: 120, title: '船名', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'voynoinner',
+      label: 'VOYNOINNER',
+      width: 120,
+      title: '内部航次',
+      showHeaderOverflow: true,
+      sortable: true
+    }, // 内部航次 / 海关航次 ？ 暂时放内部航次
+    {
+      field: 'etd',
+      label: 'ETD',
+      width: 110,
+      title: '开船日期',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'etd' }
+    },
+    {
+      field: 'atd',
+      label: 'ATD',
+      width: 160,
+      title: '实际开船日期',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'atd' }
+    },
+    { field: 'blfrt', label: 'BLFRT', width: 120, title: '付费方式', showHeaderOverflow: true, sortable: true },
+    { field: 'payableat', label: 'PAYABLEAT', width: 120, title: '到付地点', showHeaderOverflow: true, sortable: true },
+    { field: 'pkgs', label: 'PKGS', width: 120, title: '件数', showHeaderOverflow: true, sortable: true },
+    { field: 'kindpkgs', label: 'KINDPKGS', width: 120, title: '包装', showHeaderOverflow: true, sortable: true },
+    { field: 'kgs', label: 'KGS', width: 120, title: '重量', showHeaderOverflow: true, sortable: true },
+    { field: 'cbm', label: 'CBM', width: 90, title: '尺码', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'cntrtotal',
+      label: 'CNTRTOTAL',
+      width: 120,
+      title: '箱型*箱量',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'custservice',
+      label: 'CUSTSERVICE',
+      width: 120,
+      title: '客服员',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'createdUserName',
+      label: 'CREATEDUSERNAME',
+      width: 120,
+      title: '创建人',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'createdTime',
+      label: 'CREATEDTIME',
+      width: 160,
+      title: '创建日期',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    { field: 'op', label: 'OP', width: 120, title: '操作员', showHeaderOverflow: true, sortable: true },
+    { field: 'doc', label: 'DOC', width: 120, title: '单证员', showHeaderOverflow: true, sortable: true },
+    { field: 'carrier', width: 120, title: '船公司', showHeaderOverflow: true, sortable: true },
+    { field: 'customser', label: 'CUSTOMSER', width: 120, title: '报关行', showHeaderOverflow: true, sortable: true },
+    { field: 'hscode', label: 'HSCODE', width: 120, title: 'HS编码', showHeaderOverflow: true, sortable: true },
+    { field: 'issuetype', label: 'ISSUETYPE', width: 120, title: '签单方式', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'issueplace',
+      label: 'ISSUEPLACE',
+      width: 120,
+      title: '签单地点',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'placedelivery',
+      label: 'PLACEDELIVERY',
+      width: 120,
+      title: '交货地点',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    { field: 'nobill', label: 'NOBILL', width: 120, title: '提单份数', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'portdischarge',
+      label: 'PORTDISCHARGE',
+      width: 120,
+      title: '卸货港',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'bookremark',
+      label: 'BOOKREMARK',
+      width: 120,
+      title: '备注',
+      className: 'book-remark-box',
+      showOverflow: false,
+      slots: { default: 'bookremark' }
+    }, // 标题 合同号备注 改为 备注
+    // { field: 'remarks', label: 'REMARKS', width: 120, title: '其他备注', showHeaderOverflow: true, showOverflow: false, sortable: true, slots: { default: 'remarks' } }, // 暂时写为so备注 + si备注  数据量太大，不要了
+    {
+      field: 'bookstatus',
+      label: 'BOOKSTATUS',
+      minWidth: 140,
+      title: '运踪',
+      showHeaderOverflow: true,
+      slots: { default: 'bookstatus' }
+    },
+    {
+      field: 'closingdate',
+      label: 'CLOSINGDATE',
+      width: 160,
+      title: '截港日期',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'closingdate' }
+    },
+    { field: 'eta', label: 'ETA', width: 160, title: '预计到港日期', showHeaderOverflow: true, sortable: true },
+    { field: 'portload', label: 'PORTLOAD', width: 160, title: '装货港', showHeaderOverflow: true, sortable: true },
+    { field: 'shipper', label: 'SHIPPER', width: 160, title: '发货人', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'destination',
+      label: 'DESTINATION',
+      width: 160,
+      title: '目的地',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'issuedate',
+      label: 'ISSUEDATE',
+      width: 160,
+      title: '签单日期',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'issuedate' }
+    },
+    { field: 'prepardat', label: 'PREPARDAT', width: 160, title: '预付地点', showHeaderOverflow: true, sortable: true },
+    { field: 'service', label: 'SERVICE', width: 160, title: '运输条款', showHeaderOverflow: true, sortable: true },
+    { field: 'sale', label: 'SALE', width: 160, title: '揽货人', showHeaderOverflow: true, sortable: true }, // 销售
+    { field: 'lanename', label: 'LANENAME', width: 160, title: '船司航线', showHeaderOverflow: true, sortable: true },
+    // { field: 'servicecontractno', label: 'SERVICECONTRACTNO', width: 160, title: '客户合同号', showHeaderOverflow: true, sortable: true }, // 没有设置该字段的地方 - 暂时去掉
+    {
+      field: 'bsstatusname',
+      label: 'BSSTATUSNAME',
+      width: 160,
+      title: '业务状态',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    { field: 'bookingno', label: 'BOOKINGNO', width: 160, title: '业务编号', showHeaderOverflow: true, sortable: true },
+    { field: 'agentid', label: 'AGENTID', width: 160, title: '国外代理', showHeaderOverflow: true, sortable: true },
+    { field: 'trucker', label: 'TRUCKER', width: 160, title: '车队', showHeaderOverflow: true, sortable: true },
+    { field: 'tempset', label: 'TEMPSET', width: 160, title: '设置温度', showHeaderOverflow: true, sortable: true },
+    { field: 'reeferf', label: 'REEFERF', width: 160, title: '通风度', showHeaderOverflow: true, sortable: true },
+    { field: 'shipagency', label: 'SHIPAGENCY', width: 160, title: '船代', showHeaderOverflow: true, sortable: true },
+    { field: 'custno', label: 'CUSTNO', width: 160, title: '订舱编号', showHeaderOverflow: true, sortable: true },
+    // { field: 'vgm', label: 'VGM', width: 120, title: 'VGM', showHeaderOverflow: true },
+    { field: 'forwarder', label: 'FORWARDER', width: 120, title: '订舱代理', showHeaderOverflow: true, sortable: true },
+    // { field: 'bookingStatus', label: 'BOOKINGSTATUS', width: 120, title: '订舱状态', showHeaderOverflow: true },
+    {
+      field: 'freightpayer',
+      label: 'FREIGHTPAYER',
+      width: 120,
+      title: '付款方',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    { field: 'voyno', label: 'VOYNO', width: 120, title: '海关航次', showHeaderOverflow: true },
+    { field: 'cargoid', label: 'CARGOID', width: 120, title: '货物标识', showHeaderOverflow: true, sortable: true },
+    { field: 'marks', label: 'MARKS', width: 120, title: '唛头', showHeaderOverflow: true, sortable: true },
+    // { field: 'billStatus', label: 'BILLSTATUS', width: 120, title: '提单状态', showHeaderOverflow: true },
+    { field: 'dunno', label: 'DUNNO', width: 120, title: '危险品编号', showHeaderOverflow: true, sortable: true },
+    { field: 'contractno', label: 'CONTRACTNO', width: 120, title: '合约号', showHeaderOverflow: true, sortable: true },
+    { field: 'route', label: 'ROUTE', width: 120, title: '航线操作', showHeaderOverflow: true, sortable: true },
+    // { field: 'lanecode', label: 'LANECODE', width: 120, title: '航线代码', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'shipperid',
+      label: 'SHIPPERID',
+      width: 120,
+      title: '发货人代码',
+      showHeaderOverflow: true,
+      sortable: true
+    }, // 台账无字段
+    {
+      field: 'notifypartyid',
+      label: 'NOTIFYPARTYID',
+      width: 120,
+      title: '通知人代码',
+      showHeaderOverflow: true,
+      sortable: true
+    }, // 台账无字段
+    {
+      field: 'notifypartY2',
+      label: 'NOTIFYPARTY2',
+      width: 120,
+      title: '第二通知人',
+      showHeaderOverflow: true,
+      sortable: true
+    }, // 台账无，详情有
+    {
+      field: 'consigneeid',
+      label: 'CONSIGNEEID',
+      width: 120,
+      title: '收货人代码',
+      showHeaderOverflow: true,
+      sortable: true
+    }, // 台账无字段
+    {
+      field: 'closedocdate',
+      label: 'CLOSEDOCDATE',
+      width: 120,
+      title: '截单日期',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    { field: 'bsdate', label: 'BSDATE', width: 120, title: '业务日期', showHeaderOverflow: true, sortable: true }, // 台账无字段
+    { field: 'vesselid', label: 'VESSELID', width: 120, title: '船舶呼号', showHeaderOverflow: true, sortable: true }, // 台账无字段
+    {
+      field: 'closevgmdate',
+      label: 'CLOSEVGMDATE',
+      width: 120,
+      title: '截VGM时间',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'placereceipt',
+      label: 'PLACERECEIPT',
+      width: 120,
+      title: '收货地',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'placereceiptid',
+      label: 'PLACERECEIPTID',
+      width: 120,
+      title: '收货地代码',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'destinationid',
+      label: 'DESTINATIONID',
+      width: 120,
+      title: '目的地代码',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'placedeliveryid',
+      label: 'PLACEDELIVERYID',
+      width: 120,
+      title: '交货地代码',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'portloadid',
+      label: 'PORTLOADID',
+      width: 120,
+      title: '装货港代码',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'portdischargeid',
+      label: 'PORTDISCHARGEID',
+      width: 120,
+      title: '卸货港代码',
+      showHeaderOverflow: true,
+      sortable: true
+    },
+    {
+      field: 'pono',
+      label: 'PONO',
+      width: 120,
+      title: 'PO NO',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'pono' }
+    },
+    // 以下为新增字段
+    {
+      field: 'dzRemark',
+      label: 'DZREMARK',
+      width: 160,
+      title: '单证备注',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'dzRemark' }
+    },
+    {
+      field: 'czRemark',
+      label: 'CZREMARK',
+      width: 160,
+      title: '操作备注',
+      showHeaderOverflow: true,
+      sortable: true,
+      slots: { default: 'czRemark' }
+    },
+    {
+      field: 'goodsStatusList',
+      label: 'GOODSSTATUSLIST',
+      minWidth: 160,
+      title: '货物状态',
+      showHeaderOverflow: true,
+      slots: { default: 'goodsStatusList' }
+    },
+    { field: 'tmblno', label: 'TMBLNO', width: 120, title: '真提单号', showHeaderOverflow: true, sortable: true },
+    { field: 'linename', label: 'LINENAME', width: 120, title: '航线', showHeaderOverflow: true, sortable: true },
+    {
+      field: 'lstShipOrderCompareRlt',
+      label: 'LSTSHIPORDERCOMPARERLT',
+      minWidth: 92,
+      title: '下货纸比对',
+      showHeaderOverflow: true,
+      slots: { default: 'lstShipOrderCompareRlt' }
+    }
+  ],
+  // ==== 表单部分 ====
+  condAllData: [
+    { title: '委托单位', align: 'center', width: 160, label: 'CUSTOMERNAME', type: 'complete', showLabel: 'shortName' }, // 客户
+    { title: '主提单号', align: 'center', width: 160, label: 'MBLNO', type: 'input' },
+    { title: '分提单号', align: 'center', width: 160, label: 'HBLNO', type: 'input' },
+    {
+      title: '船公司',
+      align: 'center',
+      width: 120,
+      label: 'CARRIER',
+      type: 'select',
+      showLabel: 'enName',
+      showLabel2: 'cnName'
+    },
+    { title: '订舱代理', align: 'center', width: 120, label: 'FORWARDER', type: 'complete', showLabel: 'shortName' },
+    {
+      title: '场站',
+      align: 'center',
+      width: 120,
+      label: 'YARDID',
+      type: 'select',
+      showLabel: 'code',
+      showLabel2: 'name'
+    }, // 场站显示 name , yardid 取字段 code
+    // { title: '船名/航次', align: 'center', width: 120, label: 'VESSEL', type: 'complete', showLabel: 'vessel', showLabel2: 'voyno' }, // 船名航次换接口 船名 vessel 航次 voyno
+    { title: '船名', align: 'center', width: 120, label: 'VESSEL', type: 'complete', showLabel: 'name' }, // 船名航次换接口 船名 vessel 航次 voyno
+    { title: '开船日期', align: 'center', width: 160, label: 'ETD', type: 'dateRange', resLabel: ['BETD', 'EETD'] },
+    { title: '实际开船日期', align: 'center', width: 160, label: 'ATD', type: 'dateRange', resLabel: ['BATD', 'EATD'] },
+    { title: '预计到港日期', align: 'center', width: 160, label: 'ETA', type: 'dateRange', resLabel: ['BETA', 'EETA'] },
+    { title: '卸货港', align: 'center', width: 120, label: 'PORTDISCHARGE', type: 'complete', showLabel: 'enName' },
+    { title: '装货港', align: 'center', width: 120, label: 'PORTLOAD', type: 'complete', showLabel: 'enName' },
+    { title: '揽货人', align: 'center', width: 120, label: 'SALE', type: 'complete', showLabel: 'name' }, // 销售
+    { title: '客服员', align: 'center', width: 120, label: 'CUSTSERVICE', type: 'complete', showLabel: 'name' },
+    { title: '操作员', align: 'center', width: 120, label: 'OP', type: 'complete', showLabel: 'name' },
+    { title: '单证员', align: 'center', width: 120, label: 'DOC', type: 'complete', showLabel: 'name' },
+    { title: '报关行', align: 'center', width: 120, label: 'CUSTOMSER', type: 'complete', showLabel: 'shortName' },
+    { title: '订舱编号', align: 'center', width: 120, label: 'CUSTNO', type: 'input' },
+    { title: '业务编号', align: 'center', width: 120, label: 'BOOKINGNO', type: 'input' },
+    { title: '业务状态', align: 'center', width: 120, label: 'BSSTATUS', type: 'input' },
+    // { title: '客户合同号', align: 'center', width: 120, label: 'SERVICECONTRACTNO', type: 'input' }, // 暂时去掉
+    // { title: '航线代码', align: 'center', width: 120, label: 'LANECODE', type: 'input' },
+    { title: '内部航次', align: 'center', width: 120, label: 'VOYNOINNER', type: 'input' },
+    { title: '海关航次', align: 'center', width: 120, label: 'VOYNO', type: 'input' },
+    { title: '发货人', align: 'center', width: 120, label: 'SHIPPER', type: 'input' },
+    { title: '发货人代码', align: 'center', width: 120, label: 'SHIPPERID', type: 'input' },
+    { title: '通知人', align: 'center', width: 120, label: 'NOTIFYPARTY', type: 'input' },
+    { title: '通知人代码', align: 'center', width: 120, label: 'NOTIFYPARTYID', type: 'input' },
+    { title: '第二通知人', align: 'center', width: 120, label: 'NOTIFYPARTY2', type: 'input' },
+    { title: '收货人', align: 'center', width: 120, label: 'CONSIGNEE', type: 'input' },
+    { title: '收货人代码', align: 'center', width: 120, label: 'CONSIGNEEID', type: 'input' },
+    {
+      title: '截单日期',
+      align: 'center',
+      width: 160,
+      label: 'CLOSEDOCDATE',
+      type: 'dateRange',
+      resLabel: ['BCLOSEDOCDATE', 'ECLOSEDOCDATE']
+    },
+    { title: '业务日期', align: 'center', width: 120, label: 'BSDATE', type: 'date' },
+    { title: '合约号', align: 'center', width: 120, label: 'CONTRACTNO', type: 'input' },
+    { title: '船舶呼号', align: 'center', width: 120, label: 'VESSELID', type: 'input' },
+    {
+      title: '截港日期',
+      align: 'center',
+      width: 160,
+      label: 'CLOSINGDATE',
+      type: 'dateRange',
+      resLabel: ['BCLOSINGDATE', 'ECLOSINGDATE']
+    },
+    {
+      title: '截VGM时间',
+      align: 'center',
+      width: 160,
+      label: 'CLOSEVGMDATE',
+      type: 'dateRange',
+      resLabel: ['BCLOSEVGMDATE', 'ECLOSEVGMDATE']
+    },
+    { title: '收货地', align: 'center', width: 120, label: 'PLACERECEIPT', type: 'complete', showLabel: 'enName' },
+    { title: '目的地', align: 'center', width: 120, label: 'DESTINATION', type: 'complete', showLabel: 'enName' },
+    { title: '交货地', align: 'center', width: 120, label: 'PLACEDELIVERY', type: 'complete', showLabel: 'enName' },
+    { title: '收货地代码', align: 'center', width: 120, label: 'PLACERECEIPTID', type: 'input' },
+    { title: '目的地代码', align: 'center', width: 120, label: 'DESTINATIONID', type: 'input' },
+    { title: '交货地代码', align: 'center', width: 120, label: 'PLACEDELIVERYID', type: 'input' },
+    { title: '装货港代码', align: 'center', width: 120, label: 'PORTLOADID', type: 'input' },
+    { title: '卸货港代码', align: 'center', width: 120, label: 'PORTDISCHARGEID', type: 'input' },
+    { title: '航线操作', align: 'center', width: 120, label: 'ROUTE', type: 'complete', showLabel: 'name' },
+    { title: 'PO NO', align: 'center', width: 120, label: 'PONO', type: 'input' },
+    { title: '件数', align: 'center', width: 160, label: 'PKGS', type: 'input' },
+    { title: '重量', align: 'center', width: 160, label: 'KGS', type: 'input' },
+    { title: '尺码', align: 'center', width: 160, label: 'CBM', type: 'input' },
+    { title: 'HS编码', align: 'center', width: 160, label: 'HSCODE', type: 'input' },
+    { title: '船司航线', align: 'center', width: 160, label: 'LANENAME', type: 'input' },
+    { title: '设置温度', align: 'center', width: 160, label: 'TEMPSET', type: 'input' },
+    { title: '通风度', align: 'center', width: 160, label: 'REEFERF', type: 'input' },
+    { title: '付款方', align: 'center', width: 160, label: 'FREIGHTPAYER', type: 'input' },
+    { title: '唛头', align: 'center', width: 160, label: 'MARKS', type: 'input' },
+    { title: '危险品编号', align: 'center', width: 160, label: 'DUNNO', type: 'input' },
+    { title: '箱号', align: 'center', width: 160, label: 'CNTRNO', type: 'input' },
+    { title: '封号', align: 'center', width: 160, label: 'SEALNO', type: 'input' },
+    { title: '创建人', align: 'center', width: 160, label: 'CreatedUserName', type: 'input' },
+    { title: '单证备注', align: 'center', width: 160, label: 'DZREMARK', type: 'input' },
+    { title: '操作备注', align: 'center', width: 160, label: 'CZREMARK', type: 'input' },
+    { title: '到付地点', align: 'center', width: 160, label: 'PAYABLEAT', type: 'complete', showLabel: 'enName' },
+    { title: '付费方式', align: 'center', width: 160, label: 'BLFRT', type: 'complete', showLabel: 'enName' },
+    { title: '签单地点', align: 'center', width: 160, label: 'ISSUEPLACE', type: 'complete', showLabel: 'enName' },
+    { title: '预付地点', align: 'center', width: 160, label: 'PREPARDAT', type: 'complete', showLabel: 'enName' },
+    { title: '运输条款', align: 'center', width: 160, label: 'SERVICE', type: 'complete', showLabel: 'name' },
+    { title: '国外代理', align: 'center', width: 160, label: 'AGENTID', type: 'complete', showLabel: 'shortName' },
+    { title: '车队', align: 'center', width: 160, label: 'TRUCKER', type: 'complete', showLabel: 'shortName' },
+    { title: '船代', align: 'center', width: 160, label: 'SHIPAGENCY', type: 'complete', showLabel: 'name' },
+    { title: '箱型', align: 'center', width: 120, label: 'CNTRTOTAL', type: 'select', showLabel: 'name' },
+    { title: '包装', align: 'center', width: 120, label: 'KINDPKGS', type: 'select', showLabel: 'name' },
+    {
+      title: '签单方式',
+      align: 'center',
+      width: 160,
+      label: 'ISSUETYPE',
+      type: 'select',
+      showLabel: 'enName',
+      showLabel2: 'cnName'
+    },
+    { title: '航线', align: 'center', width: 160, label: 'LINENAME', type: 'select', showLabel: 'name' },
+    {
+      title: '提单份数',
+      align: 'center',
+      width: 160,
+      label: 'NOBILL',
+      type: 'select',
+      showLabel: 'name',
+      data: [
+        { name: 'ONE' },
+        { name: 'TWO' },
+        { name: 'THREE' },
+        { name: 'FOUR' },
+        { name: 'FIVE' },
+        { name: 'SIX' },
+        { name: 'SEVEN' },
+        { name: 'EIGHT' },
+        { name: 'NINE' },
+        { name: 'TEN' }
+      ]
+    },
+    {
+      title: '货物标识',
+      align: 'center',
+      width: 160,
+      label: 'CARGOID',
+      type: 'select',
+      showLabel: 'code',
+      showLabel2: 'name',
+      data: [
+        { code: 'S', name: '普通货' },
+        { code: 'R', name: '冻柜' },
+        { code: 'D', name: '危险品' },
+        { code: 'O', name: '超限箱' }
+      ]
+    },
+    {
+      title: '签单日期',
+      align: 'center',
+      width: 160,
+      label: 'ISSUEDATE',
+      type: 'dateRange',
+      resLabel: ['BISSUEDATE', 'EISSUEDATE']
+    },
+    { title: '真提单号', align: 'center', width: 160, label: 'TMBLNO', type: 'input' }
+  ]
+}