diff --git a/public/index.html b/public/index.html
index f3a404f..c9cb869 100644
--- a/public/index.html
+++ b/public/index.html
@@ -95,7 +95,7 @@
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
     <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
     <% } %>
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_4cwmrpk5p89.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_4vmbyasfc5t.css" />
     <!-- 1.8K仔百度收录 -->
     <meta name="baidu-site-verification" content="code-QVfBYJ5laQ" />
   </head>
diff --git a/src/api/modular/main/TaskmanageList.js b/src/api/modular/main/TaskmanageList.js
index c72fbc5..3e520d7 100644
--- a/src/api/modular/main/TaskmanageList.js
+++ b/src/api/modular/main/TaskmanageList.js
@@ -128,7 +128,7 @@ export function DownloadAttach (parameter) {
 	return axios({
 		url: '/TaskManage/DownloadAttach',
 		method: 'post',
-    data: parameter
+    	data: parameter
 	})
 }
 
@@ -144,12 +144,23 @@ export function GetBookingOrderInfo (parameter) {
 }
 
 /**
- * lara 记录
+ * lara 记录  -- 有问题
  */
 export function LaraPaperRegistPost (parameter) {
 	return axios({
 		url: '/TaskManage/LaraPaperRegistPost',
 		method: 'post',
-    data: parameter
+    	data: parameter
+	})
+}
+
+/**
+ * 发送SI
+ */
+export function SendShippingOrder (parameter) {
+	return axios({
+		url: '/TaskManage/SendShippingOrder',
+		method: 'get',
+		params: parameter
 	})
 }
diff --git a/src/components/message/index.js b/src/components/message/index.js
new file mode 100644
index 0000000..969870a
--- /dev/null
+++ b/src/components/message/index.js
@@ -0,0 +1,34 @@
+// 封装到一个js文件里面，避免使用时代码累赘
+import { message } from 'ant-design-vue';
+/*
+	h: 是content自带的参数，表示createElement
+	content：文本内容
+*/
+const createElementVNode = (h, content) => {
+  // 定义文本内容及样式（这里的样式延用的官方的）
+  const innerText = h('span', { style: { color: '#4a5970', fontSize: '14px' } }, content);
+  // 自定义关闭图标
+  const innerIcon = h('a-icon', {
+    style: { marginLeft: '10px', color: '#ccc', cursor: 'pointer' },
+    attrs: { type: 'close' },
+    on: { click: () => message.destroy() },
+  });
+  // 合到一个 VNode 节点中
+  const container = h('span', {}, [innerText, innerIcon]);
+  // 最终返回
+  return container;
+};
+// 由于 message 有多种状态，这里需要额外处理
+const dtMessage = {};
+// 给 dtMessage 循环赋值不同类型的 message函数
+['error', 'success', 'info', 'warning', 'warn'].forEach((type) => {
+  dtMessage[type] = (content, duration, onClose) => {
+    // 处理 message[type](config) 参数为对象类型
+    if (typeof content === 'object') {
+      return message[type]({ ...content, content: h => createElementVNode(h, content?.content) });
+    }
+    return message[type](h => createElementVNode(h, content), duration, onClose);
+  };
+});
+
+export default dtMessage;
diff --git a/src/router/generator-routers.js b/src/router/generator-routers.js
index bb85583..4cf3bfd 100644
--- a/src/router/generator-routers.js
+++ b/src/router/generator-routers.js
@@ -29,7 +29,9 @@ const constantRouterComponents = {
   BookingDetailNew: () => import('@/views/main/BookingLedgerNew/detail'),
   CustomerInformationManagementAdd: () => import('@/views/main/Customer/addForm'),
   CustomerInformationManagementEdit: () => import('@/views/main/Customer/editForm'),
-  TaskmanageDetail: () => import('@/views/main/Taskmanage/TaskmanageDetail')
+  TaskmanageDetail: () => import('@/views/main/Taskmanage/TaskmanageDetail'),
+  TaskLaraRecord: () => import('@/views/main/Taskmanage/TaskLaraRecord'),
+  TaskLaraRegist: () => import('@/views/main/Taskmanage/TaskLaraRegist')
 }
 
 // 前端未找到页面路由（固定不用改）、原来为 /404
@@ -153,6 +155,28 @@ const userAccount = [
       show: false
     },
     component: 'TaskmanageDetail'
+  },
+  {
+    name: 'TaskLaraRecord',
+    path: '/commontaskmanage/TaskLaraRecord',
+    pid: 0,
+    id: 183184,
+    meta: {
+      title: 'LARA 提单纸登记记录',
+      show: false
+    },
+    component: 'TaskLaraRecord'
+  },
+  {
+    name: 'TaskLaraRegist',
+    path: '/commontaskmanage/TaskLaraRegist',
+    pid: 0,
+    id: 183185,
+    meta: {
+      title: 'LARA提单纸登记',
+      show: false
+    },
+    component: 'TaskLaraRegist'
   }
 ]
 
diff --git a/src/views/main/BookingLedger/detail/modules/basicInfo.vue b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
index 6827d4d..cc607d5 100644
--- a/src/views/main/BookingLedger/detail/modules/basicInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
@@ -1478,7 +1478,7 @@ export default {
 }
 </style>
 
-<style lang="less">
+<style lang="less" scoped>
 @import url('../index.less');
 
 .from-label {
diff --git a/src/views/main/BookingLedger/list/index.vue b/src/views/main/BookingLedger/list/index.vue
index 9c0a219..1dcf874 100644
--- a/src/views/main/BookingLedger/list/index.vue
+++ b/src/views/main/BookingLedger/list/index.vue
@@ -1219,7 +1219,7 @@ export default {
   }
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 /*.ant-layout{
   background: #f4f4f4;
 }*/
diff --git a/src/views/main/BookingLedgerNew/detail/index.vue b/src/views/main/BookingLedgerNew/detail/index.vue
index 664e2a5..7578acb 100644
--- a/src/views/main/BookingLedgerNew/detail/index.vue
+++ b/src/views/main/BookingLedgerNew/detail/index.vue
@@ -1328,7 +1328,7 @@ export default {
   }
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .Showtabs {
   > .ant-tabs-top-bar {
     display: none;
diff --git a/src/views/main/BookingLedgerNew/detail/modules/basicInfo.vue b/src/views/main/BookingLedgerNew/detail/modules/basicInfo.vue
index b9d3e40..0223b96 100644
--- a/src/views/main/BookingLedgerNew/detail/modules/basicInfo.vue
+++ b/src/views/main/BookingLedgerNew/detail/modules/basicInfo.vue
@@ -1433,7 +1433,7 @@ export default {
 }
 </style>
 
-<style lang="less">
+<style lang="less" scoped>
 @import url('../index.less');
 
 .from-label {
diff --git a/src/views/main/BookingLedgerNew/detail/modules/goodsTable.vue b/src/views/main/BookingLedgerNew/detail/modules/goodsTable.vue
index 5312d6d..61ad3c2 100644
--- a/src/views/main/BookingLedgerNew/detail/modules/goodsTable.vue
+++ b/src/views/main/BookingLedgerNew/detail/modules/goodsTable.vue
@@ -1449,7 +1449,7 @@ export default {
   }
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .from-line {
   display: flex;
   margin: 0 0 20px 0;
diff --git a/src/views/main/BookingLedgerNew/list/index.vue b/src/views/main/BookingLedgerNew/list/index.vue
index e6ad591..9b67f1c 100644
--- a/src/views/main/BookingLedgerNew/list/index.vue
+++ b/src/views/main/BookingLedgerNew/list/index.vue
@@ -1219,7 +1219,7 @@ export default {
   }
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 /*.ant-layout{
   background: #f4f4f4;
 }*/
diff --git a/src/views/main/Customer/addForm.vue b/src/views/main/Customer/addForm.vue
index 8245990..aadf94e 100644
--- a/src/views/main/Customer/addForm.vue
+++ b/src/views/main/Customer/addForm.vue
@@ -475,7 +475,7 @@ export default {
   }
 }
 </script>
-<style scoped lang="less">
+<style scoped lang="less" scoped>
 .CsForm {
   background: #fff;
   padding: 25px;
diff --git a/src/views/main/Taskmanage/TaskLaraRecord/index.vue b/src/views/main/Taskmanage/TaskLaraRecord/index.vue
new file mode 100644
index 0000000..3531f37
--- /dev/null
+++ b/src/views/main/Taskmanage/TaskLaraRecord/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="lara-regist">
+    <div class="btn-list">
+      <a-button>导出</a-button>
+    </div>
+    <div class="table-box">
+      <!-- <a-table :columns="boxColumns" :data-source="taskDetail.contaList">
+          <span slot="seq" slot-scope="seq">{{ Number(seq) + 1 }}</span>
+        </a-table> -->
+    </div>
+  </div>
+</template>
+    <script>
+import { XCard } from '@/components'
+export default {
+  components: {
+    XCard,
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+}
+</script>
+  <style lang="less" scoped>
+</style>
+  
\ No newline at end of file
diff --git a/src/views/main/Taskmanage/TaskLaraRegist/index.vue b/src/views/main/Taskmanage/TaskLaraRegist/index.vue
new file mode 100644
index 0000000..1c568c7
--- /dev/null
+++ b/src/views/main/Taskmanage/TaskLaraRegist/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="lara-regist">
+    <div class="btn-list">
+      <a-button type="primary" @click="laraRecordFun">提单登记</a-button>
+    </div>
+    <div class="table-box">
+      <a-table :columns="columns" :data-source="laraData"></a-table>
+    </div>
+  </div>
+</template>
+  <script>
+import { LaraPaperRegist, LaraPaperRegistPost } from '@/api/modular/main/TaskmanageList'
+export default {
+  data() {
+    return {
+      taskPKId: this.$route.query.taskPKId,
+      laraData: [],
+			// columns 根据返回数据修改字段名
+      columns: [
+        {
+          dataIndex: 'seq',
+          key: 'seq',
+          title: '排序',
+          scopedSlots: { customRender: 'seq' },
+        },
+        {
+          dataIndex: 'a',
+          key: 'a',
+          title: '提单号',
+        },
+        {
+          dataIndex: 'b',
+          key: 'b',
+          title: 'Page Numbers',
+        },
+        {
+          dataIndex: 'c',
+          key: 'c',
+          title: 'Page Number From',
+        },
+        {
+          dataIndex: 'd',
+          key: 'd',
+          title: 'Page Number To',
+        },
+        {
+          dataIndex: 's',
+          key: 's',
+          title: 'Sum',
+        },
+      ],
+    }
+  },
+	created() {
+		this.laraPaperRegistFun()
+	},
+  methods: {
+    // LARA登记
+    laraPaperRegistFun() {
+      LaraPaperRegist({
+        PKIds: [this.taskPKId],
+      })
+        .then((res) => {
+          if (res.success) {
+						debugger
+						// 此处未返回 数据列表
+						// this.laraData = res.data
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    // LARA记录
+    laraRecordFun() {
+      LaraPaperRegistPost({
+        taskPKId: this.taskPKId
+      })
+        .then((res) => {
+          debugger
+          if (res.success) {
+            this.$message.success('提单登记成功')
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.table-box {
+  width: 100%;
+  background: #fff;
+  padding: 20px;
+  min-height: 100px;
+	margin-top: 20px;
+}
+</style>
diff --git a/src/views/main/Taskmanage/TaskmanageDetail/goodsTable.vue b/src/views/main/Taskmanage/TaskmanageDetail/goodsTable.vue
new file mode 100644
index 0000000..9b7e15c
--- /dev/null
+++ b/src/views/main/Taskmanage/TaskmanageDetail/goodsTable.vue
@@ -0,0 +1,1151 @@
+<template>
+  <div class="goods-table">
+    <!-- <a-card :bordered="false"> -->
+    <div v-if="tableLoaded">
+      <ve-table
+        :columns="columns"
+        :table-data="tableData"
+        borderY
+        ref="tableRef"
+        style="min-width:970;"
+        :cell-autofill-option="cellAutofillOption"
+        :editOption="editOption"
+        rowKeyFieldName="rowKey"
+        :rowStyleOption="rowStyleOption"
+        :checkbox-option="checkboxOption"
+        :clipboard-option="clipboardOption"
+      />
+      <div class="table-no-data" v-if="tableData.length === 0">暂无数据</div>
+    </div>
+    <div class="loading" v-else>加载中 ...</div>
+    <!-- </a-card> -->
+  </div>
+</template>
+<script>
+import { GetCtn, GetPackage, GetYardData } from '@/api/modular/main/BookingLedger'
+export default {
+  name: '',
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      id: this.$route.query.id,
+      columns: [
+        {
+          field: '',
+          key: 'a',
+          title: '序号',
+          width: 50,
+          align: 'center',
+          operationColumn: true,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return ++rowIndex
+          }
+        },
+        {
+          field: 'ctnall',
+          key: 'ctnall',
+          title: '箱型',
+          align: 'left',
+          width: 120,
+          edit: false,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                value={row['ctnall']}
+                showSearch
+                ref="ctnallView"
+                class="ctnallView"
+                allow-clear={true}
+                style="width: 90px"
+                on-change={val => {
+                  console.log(' change - 修改内容', val)
+                  if (val !== undefined) {
+                    const data = this.ctnList[val]
+                    this.tableData[rowIndex].ctnall = data.name
+                    this.tableData[rowIndex].ctncode = data.code
+                    row['ctnall'] = data.name
+                    this.$forceUpdate()
+                  } else {
+                    row['ctnall'] = ''
+                    this.tableData[rowIndex].ctnall = ''
+                    this.tableData[rowIndex].ctncode = ''
+                  }
+                }}
+                on-focus={val => {
+                  this.ctnallViewIndex = rowIndex
+                  console.log('=获取焦点=', rowIndex, this.ctnallViewIndex)
+                }}
+                on-blur={val => {
+                  this.ctnallViewIndex = null
+                  console.log('=失去焦点=', rowIndex, this.ctnallViewIndex, val)
+                }}
+                on-input={val => {
+                  console.log('== input - 修改内容==', val)
+                }}
+              >
+                {this.ctnList.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+              // <div class="ctnallView">
+              //   <input type="text"
+              //   v-model={row['ctnall']}
+              //   on-focus={val => {
+              //      this.ctnallViewIndex = rowIndex
+              //      console.log('=获取焦点=', rowIndex, this.ctnallViewIndex)
+              //    }}
+              //    on-blur={val => {
+              //      this.ctnallViewIndex = null
+              //      console.log('=失去焦点=', rowIndex, this.ctnallViewIndex)
+              //    }}
+              //    on-input={val => {
+              //      console.log('修改内容', val)
+              //    }}
+              //   />
+              // </div>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.ctnall.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        },
+        {
+          field: 'cntrno',
+          key: 'cntrno',
+          title: '箱号',
+          align: 'left',
+          width: 160,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.cntrno.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        },
+        {
+          field: 'sealno',
+          key: 'sealno',
+          title: '封号',
+          align: 'left',
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.sealno.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        },
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          edit: false,
+          width: 130,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                allow-clear={true}
+                showSearch
+                defaultValue={row['kindpkgs']}
+                option-filter-prop="children"
+                style="width: 120px"
+                class="kindpkgsView"
+                on-change={val => {
+                  console.log('包装修改：', this.packageList[val])
+                  if (val !== undefined) {
+                    const data = this.packageList[val]
+                    this.tableData[rowIndex].kindpkgs = data.name
+                    row['kindpkgs'] = data.name
+                    this.tableData.map((item, index) => {
+                      item.kindpkgs = this.packageList[val].name || ''
+                      if (document.getElementsByClassName('kindpkgsView')[index].getElementsByClassName('ant-select-selection-selected-value')[0]) {
+                       document.getElementsByClassName('kindpkgsView')[index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML = this.packageList[val].name || ''
+                      } else {
+                        document.getElementsByClassName('kindpkgsView')[index].getElementsByTagName('input')[0].val = this.packageList[val].name || ''
+                      }
+                    })
+                    this.$forceUpdate()
+                  } else {
+                    row['kindpkgs'] = ''
+                    this.tableData[rowIndex].kindpkgs = ''
+                    this.tableData.map((item, index) => {
+                      item.kindpkgs = ''
+                      document.getElementsByClassName('kindpkgsView')[index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML = ''
+                    })
+                  }
+                  console.log(this.tableData)
+                }}
+                on-focus={val => {
+                  this.kindpkgsViewIndex = rowIndex
+                  console.log('=获取焦点=', rowIndex, this.kindpkgsViewIndex)
+                }}
+                on-blur={val => {
+                  this.kindpkgsViewIndex = null
+                  console.log('=失去焦点=', rowIndex, this.kindpkgsViewIndex)
+                }}
+                on-input={val => {
+                  console.log('== input - 修改内容==', val)
+                }}
+              >
+                {this.packageList.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.kindpkgs.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        },
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left',
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.pkgs.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        },
+        {
+          field: 'kgs',
+          key: 'kgs',
+          title: '重量',
+          align: 'left',
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.kgs.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        },
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left',
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                  {
+                    this.rules.cbm.required ? <i style="color: #f00">*</i> : ''
+                  }  {column.title}
+              </span>
+            );
+          }
+        }
+      ],
+      tableData: [],
+      editOption: {
+        beforeCellValueChange: ({ row, column, changeValue }) => {
+          if (
+            ['pkgs', 'kgs', 'cbm', 'tareweight'].includes(column.field) &&
+            !new RegExp(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(changeValue)
+          ) {
+            const height = document.body.clientHeight - 100
+            this.$message.config({
+              top: `${height}px`,
+              duration: 2,
+              maxCount: 3
+            })
+            this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
+            setTimeout(() => {
+              this.$message.destroy()
+              this.$message.config({
+                top: `100px`,
+                duration: 2,
+                maxCount: 3
+              })
+            }, 2000)
+            return false
+          }
+          if (column.field === 'cntrno') {
+             const res = this.checkCntrno(changeValue)
+             if (res !== '') {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error(res)
+              // row['cntrno'] = ''
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+             }
+          }
+        },
+        afterCellValueChange: ({ row, column, changeValue }) => {
+          if (['kgs', 'cbm', 'tareweight', 'weighkgs'].includes(column.field)) {
+            changeValue = changeValue + ''
+            const valIndex = changeValue.indexOf('.') + 1
+            const valCount = changeValue.length - valIndex
+            // 判断是不是大于5位小数
+            if (valCount > 5) {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('仅支持小数点后五位')
+              row[column.field] = changeValue.substr(0, valIndex + 5)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            } else {
+              const arrayNum = changeValue.split('.')
+              if (!/\./.test(changeValue)) {
+                row[column.field] = changeValue + '.00'
+              } else if (arrayNum[1].length < 2) {
+                row[column.field] = changeValue + '0'
+              }
+            }
+          }
+          if (column.field === 'pkgs') {
+            if (!(/(^[1-9]\d*$)/.test(changeValue))) {
+              console.log('== 非正整数 ==')
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('件数请输入整数')
+              const cNum = changeValue.indexOf('.')
+              row[column.field] = changeValue.substr(0, cNum)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            }
+            let num = 0
+            this.tableData.map((item, index) => {
+              num += Number(item.pkgs)
+            })
+            this.totalPkgs = num
+          }
+          if (column.field === 'kgs') {
+            let num = 0
+            this.tableData.map((item, index) => {
+              num += Number(item.kgs)
+            })
+            num += ''
+            const pNum = num.split('.')
+            if (!/\./.test(num)) {
+              this.totalKgs = num + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalKgs = num + '0'
+            } else {
+              this.totalKgs = num
+            }
+          }
+          if (column.field === 'cbm') {
+            let num = 0
+            this.tableData.map((item, index) => {
+              num += Number(item.cbm)
+            })
+            num += ''
+            const pNum = num.split('.')
+            if (!/\./.test(num)) {
+              this.totalCbm = num + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalCbm = num + '0'
+            } else {
+              this.totalCbm = num
+            }
+          }
+          if (column.field === 'kgs' || column.field === 'tareweight') {
+            // let nowIndex = 0
+            // this.tableData.map((item, index) => {
+            //   if (item.rowKey === row.rowKey) {
+            //     nowIndex = index
+            //   }
+            // })
+            // this.tableData[nowIndex]['weighkgs'] = Number(this.tableData[nowIndex].kgs) + Number(this.tableData[nowIndex].tareweight)
+            // row['weighkgs'] = Number(row['kgs']) + Number(row['tareweight'])
+            row['weighkgs'] = this.calc(Number(row['kgs']), Number(row['tareweight']), '+')
+            const kgsVal = row['weighkgs'] + ''
+            const kgsIndex = kgsVal.indexOf('.') + 1
+            const kgsCount = kgsVal.length - kgsIndex
+            if (kgsCount > 4) {
+              row['weighkgs'] = kgsVal.substr(0, kgsIndex + 4)
+            } else {
+              const arrayNum = kgsVal.split('.')
+              if (!/\./.test(kgsVal)) {
+                row['weighkgs'] = kgsVal + '.00'
+              } else if (arrayNum[1].length < 2) {
+                row['weighkgs'] = kgsVal + '0'
+              }
+            }
+          }
+        },
+        cellValueChange: ({ row, column }) => {
+          console.log('cellValueChange row::', row);
+          console.log('cellValueChange column::', column);
+        }
+      },
+      // 可控单元格编辑
+      rowStyleOption: {
+        clickHighlight: false,
+        hoverHighlight: false
+      },
+      cellAutofillOption: true,
+      checkboxOption: {
+        hideSelectAll: false,
+        // 行选择改变事件
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          this.selectArr = selectedRowKeys
+        },
+        // 全选改变事件
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          if (isSelected) {
+            this.selectArr = selectedRowKeys
+          } else {
+            this.selectArr = []
+          }
+        }
+      },
+      // 单元格复制
+      clipboardOption: {
+        copy: true,
+        paste: true,
+        cut: true,
+        delete: true,
+        beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforeCopy')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterCopy')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforePaste')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterPaste')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforeCut')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterCut')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforeDelete')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterDelete')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        }
+      },
+      tableLoaded: false,
+      ctnList: [],
+      packageList: [],
+      selectArr: [],
+      totalCtnall: '',
+      totalPkgs: 0,
+      totalKgs: 0,
+      totalCbm: 0,
+      moreVisible: false,
+      moreModelconfirm: false,
+      radioOption: {
+        // 行选择改变事件
+        selectedRowChange: ({ row }) => {
+          this.childModelSelect = row
+          this.tableData.map((item, index) => {
+            if (item.rowKey === row.rowKey) {
+              this.childModelSelectIndex = index
+            }
+          })
+          if (this.tableData[this.childModelSelectIndex].ctnDetailInputs) {
+            this.tableData[this.childModelSelectIndex].ctnDetailInputs.map((item, index) => {
+              item.rowKey = index
+            })
+            this.childTableData = this.tableData[this.childModelSelectIndex].ctnDetailInputs
+          } else {
+            this.childTableData = []
+          }
+        }
+      },
+      childTableData: [],
+      childModelSelect: null,
+      childModelSelectIndex: null,
+      selectChildArr: [],
+      YarnLoading: false,
+      WeightLoading: false,
+      ctnallViewIndex: null,
+      kindpkgsViewIndex: null
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        this.$emit('changeDetail', {
+          detail: nval,
+          type: 'goodsTable'
+        })
+      },
+      deep: true
+    },
+    tableData: {
+      handler(nval, oval) {
+        this.details.contaList = nval
+      },
+      deep: true
+    },
+    // '$route.query': {
+    //   immediate: true,
+    //   handler(nD, oD) {
+    //     this.id = this.$route.query.id
+    //     this.init()
+    //   }
+    // },
+    totalKgs () {
+      this.$emit('changeTotal', {
+        type: 'totalKgs',
+        val: this.totalKgs
+      })
+    },
+    totalPkgs () {
+      this.$emit('changeTotal', {
+        type: 'totalPkgs',
+        val: this.totalPkgs
+      })
+    },
+    totalCbm () {
+      this.$emit('changeTotal', {
+        type: 'totalCbm',
+        val: this.totalCbm
+      })
+    }
+  },
+
+  created() {
+    // this.init()
+    document.onkeydown = (event) => {
+      // console.log("按下:"+event.key+"键:"+event.keyCode, document.activeElement);
+      // console.log(document.activeElement);
+      if (event.key === 'Backspace' && this.ctnallViewIndex !== null) {
+        const val = document.getElementsByClassName('ctnallView')[this.ctnallViewIndex].getElementsByTagName('input')[0].value
+        console.log('内容', val, this.ctnList)
+        document.getElementsByClassName('ctnallView')[this.ctnallViewIndex].getElementsByTagName('input')[0].value = val.substr(0, val.length - 1)
+        // this.tableData[this.ctnallViewIndex].ctnall = val.substr(0, val.length - 1)
+      }
+      if (event.key === 'Backspace' && this.kindpkgsViewIndex !== null) {
+        const val = document.getElementsByClassName('kindpkgsView')[this.kindpkgsViewIndex].getElementsByTagName('input')[0].value
+        console.log('内容', val, this.ctnList)
+        document.getElementsByClassName('kindpkgsView')[this.kindpkgsViewIndex].getElementsByTagName('input')[0].value = val.substr(0, val.length - 1)
+        // this.tableData[this.ctnallViewIndex].ctnall = val.substr(0, val.length - 1)
+      }
+      if (event.key === 'Tab') {
+        const activeDom = document.activeElement
+        if (activeDom.dataset['next'] === 'box-ctnall') {
+           this.startEditingCell('0', 'ctnall')
+        }
+        console.log(this.ctnallViewIndex)
+      }
+    }
+  },
+
+  methods: {
+    startEditingCell(rowKey, colKey, defaultValue) {
+      this.$refs['tableRef'].startEditingCell({ rowKey, colKey, defaultValue });
+    },
+    init() {
+      if (Object.keys(this.details).length > 0) {
+        const arr = []
+        const totalCtnall = {}
+        this.details.contaList.map((item, index) => {
+          arr.push({
+            ...{ rowKey: index },
+            ...item
+          })
+          if (!Object.keys(totalCtnall).includes(item.ctnall)) {
+            const cData = {
+              type: 'ctnall',
+              num: item.ctnnum
+            }
+            this.$set(totalCtnall, item.ctnall, cData)
+          }
+          this.totalPkgs += Number(item.pkgs)
+          this.totalKgs += Number(item.kgs)
+          this.totalCbm += Number(item.cbm)
+        })
+        this.tableData = arr
+        this.tableLoaded = true
+        this.totalCtnall = ''
+      } else {
+        this.tableData = []
+        this.tableLoaded = true
+        this.totalCtnall = ''
+      }
+      this.getCtn()
+      this.getPackage()
+    },
+    getCtn() {
+      GetCtn({
+        KeyWord: ''
+      })
+        .then(res => {
+          this.ctnList = res.data
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    getPackage() {
+      GetPackage({
+        KeyWord: ''
+      })
+        .then(res => {
+          this.packageList = res.data
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    enmuErrorLabel(val) {
+      switch (val) {
+        case 'cntrno':
+          return '箱型'
+        case 'pkgs':
+          return '件数'
+        case 'kgs':
+          return '重量'
+        case 'cbm':
+          return '尺码'
+        case 'tareweight':
+          return '箱皮重'
+        default:
+          return '内容'
+      }
+    },
+    addboxLine() {
+      const data = {
+        ctnall: '',
+        ctnnum: '1',
+        cntrno: '',
+        sealno: '',
+        pkgs: '',
+        kindpkgs: this.tableData.length > 0 ? this.tableData[0].kindpkgs : '',
+        kgs: '',
+        cbm: '',
+        tareweight: '',
+        weightype: '累加',
+        weighkgs: '',
+        rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+      }
+      this.tableData.push(data)
+    },
+    removeLine() {
+      this.selectArr.map((item, index) => {
+        this.tableData.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            this.tableData.splice(oindex, 1)
+          }
+        })
+      })
+      let kgs = 0
+      this.tableData.map((item, index) => {
+        kgs += Number(item.kgs)
+      })
+      this.totalKgs = kgs
+
+      let cbm = 0
+      this.tableData.map((item, index) => {
+        cbm += Number(item.cbm)
+      })
+      this.totalCbm = cbm
+
+      let pkgs = 0
+      this.tableData.map((item, index) => {
+        pkgs += Number(item.pkgs)
+      })
+      this.totalPkgs = pkgs
+    },
+    openDialog() {
+      if (this.tableData.length === 0) {
+        return false
+      }
+      this.moreVisible = true
+    },
+    // 多品名维护保存
+    handleModelSubmit() {},
+    handleModelCancel() {
+      this.moreVisible = false
+    },
+    addChildData() {
+      if (!this.childModelSelect) {
+        this.$message.error('请选择数据')
+        return false
+      }
+      let $pkgs = 0
+      let $kgs = 0
+      let $cbm = 0
+      this.childTableData.map((item, index) => {
+        $pkgs += Number(item.pkgs)
+        $kgs += Number(item.kgs)
+        $cbm += Number(item.cbm)
+      })
+      const data = {
+        rowKey:
+          this.childTableData.length > 0 ? Number(this.childTableData[this.childTableData.length - 1].rowKey) + 1 : 0,
+        pkgs: Number(this.childModelSelect.pkgs) - $pkgs > 0 ? Number(this.childModelSelect.pkgs) - $pkgs : 0,
+        kindpkgs: '',
+        kgs: Number(this.childModelSelect.kgs) - $kgs > 0 ? Number(this.childModelSelect.kgs) - $kgs : 0,
+        cbm: Number(this.childModelSelect.cbm) - $cbm > 0 ? Number(this.childModelSelect.cbm) - $cbm : 0,
+        hscode: this.details.hscode,
+        marks: this.details.marks,
+        description: this.details.description
+      }
+      this.childTableData.push(data)
+    },
+    removeChildData() {
+      this.selectChildArr.map((item, index) => {
+        this.childTableData.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            this.childTableData.splice(oindex, 1)
+          }
+        })
+      })
+    },
+    saveChildData() {
+      if (!this.childModelSelect) {
+        this.$message.error('请选择数据')
+        return false
+      }
+      let $pkgs = 0
+      let $kgs = 0
+      let $cbm = 0
+      this.childTableData.map((item, index) => {
+        $pkgs += Number(item.pkgs)
+        $kgs += Number(item.kgs)
+        $cbm += Number(item.cbm)
+      })
+      if (Number(this.childModelSelect.pkgs) < $pkgs) {
+        this.$message.error('件数输入错误')
+        return false
+      }
+      if (Number(this.childModelSelect.kgs) < $kgs) {
+        this.$message.error('毛重输入错误')
+        return false
+      }
+      if (Number(this.childModelSelect.cbm) < $cbm) {
+        this.$message.error('尺码输入错误')
+        return false
+      }
+      this.details.contaList[this.childModelSelectIndex].ctnDetailInputs = this.childTableData
+      this.$message.success('已保存')
+    },
+
+    // 引入场站数据
+    importYarn() {
+      if (!this.id) {
+        this.$message.error('请先保存订舱信息')
+        return false
+      }
+      this.YarnLoading = true
+      GetYardData({
+        bookingId: this.id,
+        isWeb: false
+      })
+        .then(res => {
+          if (res.success) {
+            const data = JSON.parse(res.data)
+            const addTable = []
+            const cntrnoArr = []
+            this.tableData.map((item, index) => {
+              if (!item.cntrno) {
+                // delete this.tableData[index]
+                this.tableData.splice(index, 1)
+              } else {
+                cntrnoArr.push(item.cntrno)
+              }
+            })
+            const lastNum = this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+            data.map((item, index) => {
+              if (cntrnoArr.includes(item.CNTRNO)) {
+                this.tableData[cntrnoArr.indexOf(item.CNTRNO)] = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  ctnnum: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnnum,
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  pkgs: item.PKGS,
+                  kindpkgs: item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weightype,
+                  weighkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weighkgs
+                }
+              } else {
+                const _data = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  ctnnum: '1',
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  pkgs: item.PKGS,
+                  kindpkgs: item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: '',
+                  weighkgs: ''
+                }
+                addTable.push(_data)
+              }
+            })
+
+            this.tableData = [...this.tableData, ...addTable]
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+          this.YarnLoading = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.YarnLoading = false
+        })
+    },
+
+    importWeight() {
+      if (!this.id) {
+        this.$message.error('请先保存订舱信息')
+        return false
+      }
+      this.WeightLoading = true
+      GetYardData({
+        bookingId: this.id,
+        isWeb: false
+      })
+        .then(res => {
+          if (res.success) {
+            const data = JSON.parse(res.data)
+            const addTable = []
+            const cntrnoArr = []
+            this.tableData.map((item, index) => {
+              if (!item.cntrno) {
+                // delete this.tableData[index]
+                this.tableData.splice(index, 1)
+              } else {
+                cntrnoArr.push(item.cntrno)
+              }
+            })
+            const lastNum = this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+            data.map((item, index) => {
+              if (cntrnoArr.includes(item.CNTRNO)) {
+                const setWeighkgs = this.calc(Number(this.tableData[cntrnoArr.indexOf(item.CNTRNO)].kgs), Number(item.TAREWEIGHT), '+')
+                this.tableData[cntrnoArr.indexOf(item.CNTRNO)] = {
+                  rowKey: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].rowKey,
+                  ctnall: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnall,
+                  ctnnum: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnnum,
+                  cntrno: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].cntrno,
+                  sealno: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].sealno,
+                  pkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].pkgs,
+                  kindpkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].kindpkgs,
+                  kgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].kgs,
+                  cbm: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].cbm,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weightype,
+                  weighkgs: setWeighkgs
+                }
+              } else {
+                const _data = {
+                  rowKey: lastNum + index,
+                  ctnall: '',
+                  ctnnum: '1',
+                  cntrno: '',
+                  sealno: '',
+                  pkgs: '',
+                  kindpkgs: '',
+                  kgs: '',
+                  cbm: '',
+                  tareweight: item.TAREWEIGHT,
+                  weightype: '',
+                  weighkgs: ''
+                }
+                addTable.push(_data)
+              }
+            })
+            this.tableData = [...this.tableData, ...addTable]
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+          this.WeightLoading = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.WeightLoading = false
+        })
+    },
+    log({ data, selectionRangeIndexes, selectionRangeKeys }) {
+      // console.log('data::', data)
+      // console.log('selectionRangeIndexes::', selectionRangeIndexes)
+      // console.log('selectionRangeKeys::', selectionRangeKeys)
+    },
+    calc(num1, num2, calcStr) {
+      var str1; // 转换为字符串的数字
+      var str2;
+      var ws1 = 0; // ws1，ws2 用来存储传入的num的小数点后的数字的位数
+      var ws2 = 0; // 赋默认值，解决当整数和小数运算时倍数计算错误导致的结果误差
+      var bigger; // bigger和smaller用于加，减，除法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题；乘法需要将结果除两个数字的倍数之和
+      var smaller; // 例如：加减除法中1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误；乘法中1.12*1.1会放大为112*11，所以结果需要除以1000才会是正确的结果，112*11/1000=1.232
+      var zeroCount; // 需要补充0的个数
+      var isExistDot1; // 传入的数字是否存在小数点
+      var isExistDot2;
+      var sum;
+      var beishu = 1
+      // 将数字转换为字符串
+      str1 = num1.toString()
+      str2 = num2.toString()
+      // 是否存在小数点（判断需要计算的数字是不是包含小数）
+      isExistDot1 = str1.indexOf('.') != -1 ? true : false
+      isExistDot2 = str2.indexOf('.') != -1 ? true : false
+      // 取小数点后面的位数
+      if (isExistDot1) {
+        ws1 = str1.split('.')[1].length
+      }
+
+      if (isExistDot2) {
+        ws2 = str2.split('.')[1].length
+      }
+      // 如ws1 和 ws2 无默认值，如果num1 或 num2 不是小数的话则 ws1 或 ws2 的值将为 undefined
+      // bigger 和 smaller 的值会和预期不符
+      bigger = ws1 > ws2 ? ws1 : ws2
+      smaller = ws1 < ws2 ? ws1 : ws2
+
+      switch (calcStr) {
+        // 加减法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题
+        // 例如：1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误
+        case '+':
+        case '-':
+        case '/':
+          zeroCount = bigger - smaller
+          for (var i = 0; i < zeroCount; i++) {
+            if (ws1 == smaller) {
+              str1 += '0'
+            } else {
+              str2 += '0'
+            }
+          }
+          break
+        case '*':
+          // 乘法需要将结果除两个数字的倍数之和
+          bigger = bigger + smaller
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+          break
+      }
+
+      // 去除数字中的小数点
+      str1 = str1.replace('.', '')
+      str2 = str2.replace('.', '')
+
+      // 计算倍数，例如：1.001小数点后有三位，则需要乘 1000 变成 1001，变成整数后精度丢失问题则不会存在
+      for (var i = 0; i < bigger; i++) {
+        beishu *= 10 // 等价于beishu = beishu * 10;
+      }
+      num1 = parseInt(str1)
+      num2 = parseInt(str2)
+      // 进行最终计算并除相应倍数
+      switch (calcStr) {
+        case '+':
+          sum = (num1 + num2) / beishu
+          break
+        case '-':
+          sum = (num1 - num2) / beishu
+          break
+        case '*':
+          sum = (num1 * num2) / beishu
+          break
+        case '/':
+          sum = num1 / num2
+          /* 除数与被除数同时放大一定倍数，不影响结果，
+			所以对数字进行放大对应倍数并进行补0操作后不用另对倍数做处理 */
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+      }
+
+      return sum
+    },
+    checkCntrno (val) {
+      let str = ''
+      if (val.length !== 11) {
+        str = '箱号长度不符合规则'
+      } else if (val.split('')[3] !== 'U' && val.split('')[3] !== 'u') {
+        str = '输入的箱号不符合规则'
+      }
+      val.split('').map((item, index) => {
+        if (index < 3 && !new RegExp(/^[a-zA-Z]+$/).test(item)) {
+          str = '输入的箱号不符合规则'
+        } else if (index > 4 && !new RegExp(/^[0-9]+$/).test(item)) {
+          str = '输入的箱号不符合规则'
+        }
+      })
+      return str
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.from-line {
+  display: flex;
+  margin: 0 0 20px 0;
+  .left {
+    flex: 1;
+    text-align: left;
+    .btn {
+      margin-right: 10px;
+    }
+    .btn-delete {
+      border: 1px solid #ff6646;
+      background: #fdf2f0;
+      color: #ff6646;
+      &:hover {
+        border: 1px solid #ff6646 !important;
+        background: #fdf2f0 !important;
+        color: #ff6646 !important;
+        opacity: 0.7;
+      }
+    }
+    .btn-more-name,
+    .btn-import-station,
+    .btn-weight {
+      position: relative;
+      border: 1px solid @primary-color;
+      color: @primary-color;
+      background: none;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        background-color: @primary-color !important;
+        opacity: 0.04;
+      }
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+  .table-right {
+    line-height: 28px;
+    font-size: 14px;
+    span {
+      margin-left: 10px;
+      color: #666;
+      font-weight: 600;
+    }
+  }
+}
+
+.model-content {
+  .model-botton-box {
+    margin: 40px 0 20px;
+    .btn {
+      margin-right: 10px;
+    }
+    .btn-delete {
+      border: 1px solid #ff6646;
+      background: #fdf2f0;
+      color: #ff6646;
+      &:hover {
+        border: 1px solid #ff6646 !important;
+        background: #fdf2f0 !important;
+        color: #ff6646 !important;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+.table-no-data {
+  width: 100%;
+  text-align: center;
+  line-height: 60px;
+}
+.text-bold{
+  text-align: center;
+  width: 100%;
+  display: block;
+}
+.goods-table{
+  background: #fff;
+  padding:0  15px 20px 15px;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/main/Taskmanage/TaskmanageDetail/index.vue b/src/views/main/Taskmanage/TaskmanageDetail/index.vue
index d2305db..36c75c7 100644
--- a/src/views/main/Taskmanage/TaskmanageDetail/index.vue
+++ b/src/views/main/Taskmanage/TaskmanageDetail/index.vue
@@ -1,340 +1,1142 @@
 <template>
   <div class="task-detail">
     <div class="nav-btn-box">
-      <a-button class="nav-btn" type="primary">完成任务</a-button>
       <a-button class="nav-btn" type="primary">保存</a-button>
-      <a-button class="nav-btn" type="primary">发送SI</a-button>
-      <a-button class="nav-btn" type="primary">提单确认</a-button>
-      <a-button class="nav-btn" type="primary">取消完成任务</a-button>
-      <a-button class="nav-btn" type="primary">关闭</a-button>
+      <a-button class="nav-btn" type="primary" @click="cutOffFun">发送SI</a-button>
+      <a-button class="nav-btn" @click="completeTaskFun">完成任务</a-button>
+      <a-button class="nav-btn">提单确认</a-button>
+      <a-button class="nav-btn" @click="cancelTaskFun">取消完成任务</a-button>
+      <!-- <a-button class="nav-btn">对比</a-button> -->
+      <!-- 对比需要请求接口后高亮提示，暂无接口 -->
     </div>
-    <x-card>
-      <div slot="content" style="margin-top: -24px;" class="mail-info">
-        <div class="task-basic-box">
-          <div class="label">
-            <div class="title">提单号</div>
-            <div class="msg">123456</div>
-          </div>
-          <div class="label">
-            <div class="title">开船日期</div>
-            <div class="msg">123456</div>
-          </div>
-          <div class="label">
-            <div class="title">船名/航次</div>
-            <div class="msg">123456</div>
-          </div>
-        </div>
-      </div>
-    </x-card>
 
-    <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey">
-      <a-collapse-panel key="1">
-        <template slot="header">
-          <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
-        </template>
-        <div class="mailing-info">
+    <a-row :gutter="10">
+      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <div class="left-box">
+          <div class="task-title"><i class="iconfont icon-shiyongwendang"></i>原始信息</div>
           <x-card>
             <div slot="content" style="margin-top: -24px;" class="mail-info">
-              <a-form-model :selfUpdate="true" ref="mailingFrom" :model="taskDetail">
-                <a-row :gutter="10">
-                  <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="12">
-                    <a-form-model-item has-feedback prop="shipper" class="sender-label">
-                      <div class="sender">
-                        <div class="top"><div class="name"><span class="iconfont icon-bianji"></span>发货人</div></div>
-                        <div class="bottom">
-                          <a-textarea
-                            id="shipper-scroll"
-                            :defaultValue="taskDetail.shipper"
-                            v-model="showShipper"
-                            :auto-size="{ minRows: 2, maxRows: 5 }"
-                            style="height: 120px"
-                            @blur="textareaChange($event, 'shipper')"
-                          />
-                          <div
-                            class="line-count"
-                            id="shipper-scroll-right"
-                            v-if="Object.keys(taskDetail).length > 1 && taskDetail.shipper.length > 1"
-                          >
-                            <div v-for="(num, index) in taskDetail.shipper.split('\n')" :key="index">{{ num.length }}</div>
+              <div class="task-basic-box">
+                <div class="label">
+                  <div class="title">提单号：</div>
+                  <div class="msg">{{ taskDetail.masterBlNo }}</div>
+                </div>
+                <div class="label">
+                  <div class="title">开船日期：</div>
+                  <div class="msg">{{ taskDetail.etd }}</div>
+                </div>
+                <div class="label">
+                  <div class="title">船名/航次：</div>
+                  <div class="msg">{{ taskDetail.vessel }}/{{ taskDetail.voyno }}</div>
+                </div>
+              </div>
+            </div>
+          </x-card>
+          <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey1">
+            <a-collapse-panel key="1">
+              <template slot="header">
+                <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
+              </template>
+              <div class="mailing-info">
+                <div class="mail-info">
+                  <a-form-model :selfUpdate="true" ref="mailingFrom" :model="taskDetail">
+                    <a-row :gutter="10">
+                      <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
+                        <a-form-model-item has-feedback prop="shipper" class="sender-label">
+                          <div class="sender">
+                            <div class="top"><div class="name"><span class="iconfont icon-bianji"></span>发货人</div></div>
+                            <div class="bottom">
+                              <a-textarea
+                                disabled
+                                id="shipper-scroll"
+                                v-model="taskDetail.shipper"
+                                :auto-size="{ minRows: 2, maxRows: 7 }"
+                                style="height: 140px"
+                                @blur="textareaChange($event, 'shipper')"
+                              />
+                              <!-- <div
+                                class="line-count"
+                                id="shipper-scroll-right"
+                                v-if="Object.keys(taskDetail).length > 1 && taskDetail.shipper.length > 1"
+                              >
+                                <div v-for="(num, index) in taskDetail.shipper.split('\n')" :key="index">{{ num.length }}</div>
+                              </div> -->
+                            </div>
                           </div>
-                        </div>
+                        </a-form-model-item>
+                        <a-form-model-item has-feedback prop="consignee" class="sender-label">
+                          <div class="consignee">
+                            <div class="top"><div class="name"><span class="iconfont icon-bianji"></span>收货人</div></div>
+                            <div class="bottom">
+                              <a-textarea
+                                disabled
+                                id="consignee-scroll"
+                                v-model="taskDetail.consignee"
+                                :auto-size="{ minRows: 2, maxRows: 7 }"
+                                style="height: 140px"
+                                @blur="textareaChange($event, 'consignee')"
+                              />
+                              <!-- <div
+                                class="line-count"
+                                id="consignee-scroll-right"
+                                v-if="Object.keys(taskDetail).length > 1 && taskDetail.consignee.length > 1"
+                              >
+                                <div v-for="(num, index) in taskDetail.consignee.split('\n')" :key="index">{{ num.length }}</div>
+                              </div> -->
+                            </div>
+                          </div>
+                        </a-form-model-item>
+                        <a-form-model-item has-feedback prop="notifyParty" class="sender-label">
+                          <div class="notifier">
+                            <div class="top"><div class="name"><span class="iconfont icon-bianji"></span>通知人</div></div>
+                            <div class="bottom">
+                              <a-textarea
+                                disabled
+                                id="notifyParty-scroll"
+                                :auto-size="{ minRows: 2, maxRows: 7 }"
+                                style="height: 140px"
+                                v-model="taskDetail.notifyParty"
+                                @blur="textareaChange($event, 'notifyParty')"
+                              />
+                              <!-- <div
+                                class="line-count"
+                                id="notifyParty-scroll-right"
+                                v-if="Object.keys(taskDetail).length > 1 && taskDetail.notifyParty.length > 1"
+                              >
+                                <div v-for="(num, index) in taskDetail.notifyParty.split('\n')" :key="index">{{ num.length }}</div>
+                              </div> -->
+                            </div>
+                          </div>
+                        </a-form-model-item>
+                      </a-col>
+                      <a-col class="right-content" :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
+                        <a-row :gutter="16">
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="装货港代码"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portLoadId"
+                            >
+                              <a-input disabled v-model="taskDetail.portLoadId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskDetail.portLoadId"
+                                class="customer-input"
+                                :data-source="portLoadDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="portLoadSelect"
+                                @change="portLoadChange"
+                                @focus="portLoadChange"
+                              ></auto-complete> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="装货港"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portLoad"
+                            >
+                              <a-input disabled :allowClear="true" v-model="taskDetail.portLoad" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="中转港代码"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="transportId"
+                            >
+                              <a-input disabled v-model="taskDetail.transportId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskDetail.transportId"
+                                class="customer-input"
+                                :data-source="transportDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="transportSelect"
+                                @change="transportChange"
+                                @focus="transportChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="中转港"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="transport"
+                            >
+                              <a-input disabled :allowClear="true" v-model="taskDetail.transport" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="卸货港代码"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portDischargeId"
+                            >
+                              <a-input disabled v-model="taskDetail.portDischargeId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskDetail.portDischargeId"
+                                class="customer-input"
+                                :data-source="portdischargeDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="portdischargeSelect"
+                                @change="portdischargeChange"
+                                @focus="portdischargeChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="卸货港"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portDischarge"
+                            >
+                              <a-input disabled :allowClear="true" v-model="taskDetail.portDischarge" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="目的代码"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="destinationId"
+                            >
+                              <a-input disabled v-model="taskDetail.destinationId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskDetail.destinationId"
+                                class="customer-input"
+                                :data-source="destinationDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="destinationSelect"
+                                @change="destinationChange"
+                                @focus="destinationChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="目的地"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="destination"
+                            >
+                              <a-input disabled :allowClear="true" v-model="taskDetail.destination" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="件数"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="pkGs"
+                            >
+                              <a-input disabled :allowClear="true" v-model="taskDetail.pkGs" type="number"/>
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="包装"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="kindPKGs"
+                            >
+                              <a-input disabled v-model="taskDetail.kindPKGs"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskDetail.kindPKGs"
+                                class="customer-input"
+                                :data-source="kindpkgsDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '200px' }"
+                                @select="kindpkgsSelect"
+                                @change="kindpkgsChange"
+                                @focus="kindpkgsChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="毛重"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="kGs"
+                            >
+                              <div class="line-box">
+                                <a-input disabled :allowClear="true" v-model="taskDetail.kGs" /><span class="unit">KGS</span>
+                              </div>
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              label="尺寸"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="cbm"
+                            >
+                              <div class="line-box">
+                                <a-input disabled :allowClear="true" v-model="taskDetail.cbm" /><span class="unit">CBM</span>
+                              </div>
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              prop="siRemark"
+                              label="截单备注"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol">
+                              <!-- <div class="tit"><span class="iconfont icon-bianji"></span>截单备注</div> -->
+                              <a-textarea disabled class="input-box" v-model="taskDetail.siRemark" style="margin-top:6px;height:80px;"/>
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </a-col>
+                    </a-row>
+                  </a-form-model>
+                </div>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+          <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey2">
+            <a-collapse-panel key="1">
+              <template slot="header">
+                <div class="base-tit"><i class="iconfont icon-goods"></i>货物信息</div>
+              </template>
+              <div class="container cargo-info">
+                <a-form-model :selfUpdate="true" ref="cargoFrom" :model="taskDetail">
+                  <a-row :gutter="20">
+                    <a-col :span="8">
+                      <div class="tit">
+                        <div>唛头</div>
                       </div>
-                    </a-form-model-item>
-                    <a-form-model-item has-feedback prop="consignee" class="sender-label">
-                      <div class="consignee">
-                        <div class="top"><div class="name"><span class="iconfont icon-bianji"></span>收货人</div></div>
+                      <a-form-model-item has-feedback prop="marks" class="textarea-label" label="" style="margin-bottom:0;">
                         <div class="bottom">
-                          <a-textarea
-                            id="consignee-scroll"
-                            :defaultValue="taskDetail.consignee"
-                            v-model="showConsignee"
-                            :auto-size="{ minRows: 2, maxRows: 5 }"
-                            style="height: 120px"
-                            @blur="textareaChange($event, 'consignee')"
-                          />
+                          <a-textarea disabled class="input-box" v-model="taskDetail.marks" @change="valueChange('marks')"/>
                           <div
                             class="line-count"
-                            id="consignee-scroll-right"
-                            v-if="Object.keys(taskDetail).length > 1 && taskDetail.consignee.length > 1"
+                            id="shipper-scroll-right"
+                            v-if="Object.keys(taskDetail).length > 1 && taskDetail.marks.length > 1"
                           >
-                            <div v-for="(num, index) in taskDetail.consignee.split('\n')" :key="index">{{ num.length }}</div>
+                            <div v-for="(num, index) in taskDetail.marks.split('\n')" :key="index">{{ num.length }}</div>
                           </div>
                         </div>
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :span="16">
+                      <div class="line">
+                        <div class="left">
+                          <div>货物描述</div>
+                        </div>
                       </div>
-                    </a-form-model-item>
-                    <a-form-model-item has-feedback prop="notifyparty" class="sender-label">
-                      <div class="notifier">
-                        <div class="top"><div class="name"><span class="iconfont icon-bianji"></span>通知人</div></div>
+                      <a-form-model-item has-feedback prop="description" class="textarea-label" label="" style="margin-bottom:0;">
                         <div class="bottom">
-                          <a-textarea
-                            id="notifyparty-scroll"
-                            :defaultValue="taskDetail.notifyparty"
-                            :auto-size="{ minRows: 2, maxRows: 5 }"
-                            style="height: 120px"
-                            v-model="showNotifier"
-                            @blur="textareaChange($event, 'notifyparty')"
-                          />
-                          <div
+                          <a-textarea disabled class="input-box" v-model="taskDetail.description" @change="valueChange('description')"/>
+                          <!-- <div
                             class="line-count"
-                            id="notifyparty-scroll-right"
-                            v-if="Object.keys(taskDetail).length > 1 && taskDetail.notifyparty.length > 1"
+                            id="shipper-scroll-right"
+                            v-if="Object.keys(taskDetail).length > 1 && taskDetail.description.length > 1"
                           >
-                            <div v-for="(num, index) in taskDetail.notifyparty.split('\n')" :key="index">{{ num.length }}</div>
-                          </div>
+                            <div v-for="(num, index) in taskDetail.description.split('\n')" :key="index">{{ num.length }}</div>
+                          </div> -->
                         </div>
-                      </div>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col class="right-content" :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
-                    <a-row :gutter="16">
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="装货港代码"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="portloadid"
-                        >
-                          <auto-complete
-                            :allowClear="true"
-                            v-model="taskDetail.portloadid"
-                            class="customer-input"
-                            :data-source="portloadDataArr"
-                            :dropdown-match-select-width="false"
-                            :dropdown-style="{ width: '300px' }"
-                            @select="portloadSelect"
-                            @change="portloadChange"
-                            @focus="portloadChange"
-                          ></auto-complete>
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="装货港"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="portload"
-                        >
-                          <a-input :allowClear="true" v-model="taskDetail.portload" />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="中转港代码"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="transportid"
-                        >
-                          <auto-complete
-                            :allowClear="true"
-                            v-model="taskDetail.transportid"
-                            class="customer-input"
-                            :data-source="transportDataArr"
-                            :dropdown-match-select-width="false"
-                            :dropdown-style="{ width: '300px' }"
-                            @select="transportSelect"
-                            @change="transportChange"
-                            @focus="transportChange"
-                          />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="中转港"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="transport"
-                        >
-                          <a-input :allowClear="true" v-model="taskDetail.transport" />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="卸货港代码"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="portdischargeid"
+                      </a-form-model-item>
+                    </a-col>
+                  </a-row>
+                </a-form-model>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+          <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey3">
+            <a-collapse-panel key="1">
+              <template slot="header">
+                <div class="base-tit"><i class="iconfont icon-electronic-signature"></i>签单信息</div>
+              </template>
+              <div class="container bill-info">
+                <a-form-model ref="billFrom" :model="taskDetail">
+                  <a-row :gutter="10">
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        label="签单方式"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="issueType"
+                      >
+                        <a-input disabled v-model="taskDetail.issueType"></a-input>
+                        <!-- <a-select
+                          class="customer-input"
+                          :default-value="taskDetail.issueType"
+                          @change="handleIssuetypeChange"
+                          show-search
+                          :filter-option="filterOption"
+                          :dropdownMatchSelectWidth="false"
                         >
-                          <auto-complete
-                            :allowClear="true"
-                            v-model="taskDetail.portdischargeid"
-                            class="customer-input"
-                            :data-source="portdischargeDataArr"
-                            :dropdown-match-select-width="false"
-                            :dropdown-style="{ width: '300px' }"
-                            @select="portdischargeSelect"
-                            @change="portdischargeChange"
-                            @focus="portdischargeChange"
-                          />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="卸货港"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="portdischarge"
-                        >
-                          <a-input :allowClear="true" v-model="taskDetail.portdischarge" />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="目的代码"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="destinationid"
+                          <a-select-option v-for="(issueType, iIndex) in issuetypeSelectData" :key="iIndex" :value="iIndex">
+                            {{ issueType.selectShowTab }}
+                          </a-select-option>
+                        </a-select> -->
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        label="付费方式"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="blfrt"
+                      >
+                        <a-input disabled v-model="taskDetail.issueType"></a-input>
+                        <!-- <auto-complete
+                          :allowClear="true"
+                          v-model="taskDetail.blfrt"
+                          :data-source="blfrtDataArr"
+                          :dropdown-match-select-width="false"
+                          :dropdown-style="{ width: '200px'}"
+                          @select="blfrtSelect"
+                          @change="blfrtChange"
+                          @focus="blfrtChange"
+                        /> -->
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        label="第三付款地"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="thirdPayAddr"
+                      >
+                        <a-input disabled :allowClear="true" v-model="taskDetail.thirdPayAddr" />
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        label="运输条款"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="service"
+                      >
+                        <a-input disabled v-model="taskDetail.service"></a-input>
+                        <!-- <auto-complete
+                          :allowClear="true"
+                          v-model="taskDetail.service"
+                          :data-source="serviceDataArr"
+                          :dropdown-match-select-width="false"
+                          :dropdown-style="{ width: '200px'}"
+                          @select="serviceSelect"
+                          @change="serviceChange"
+                          @focus="serviceChange"
+                        /> -->
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        label="截单时间"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="closeDocDate"
+                      >
+                        <a-input disabled v-model="taskDetail.closeDocDate"></a-input>
+                        <!-- <a-date-picker
+                          show-time
+                          format="YYYY-MM-DD HH"
+                          v-model="taskDetail.closeDocDate"
+                          @change="closedocdateChange"
                         >
-                          <auto-complete
-                            :allowClear="true"
-                            v-model="taskDetail.destinationid"
-                            class="customer-input"
-                            :data-source="destinationDataArr"
-                            :dropdown-match-select-width="false"
-                            :dropdown-style="{ width: '300px' }"
-                            @select="destinationSelect"
-                            @change="destinationChange"
-                            @focus="destinationChange"
-                          />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="目的地"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="destination"
-                        >
-                          <a-input :allowClear="true" v-model="taskDetail.destination" />
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="件数"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="pkgs"
-                        >
-                          <a-input :allowClear="true" v-model="taskDetail.pkgs" type="number"/>
-                        </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="包装"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="kindpkgs"
-                        >
-                          <auto-complete
-                            :allowClear="true"
-                            v-model="taskDetail.kindpkgs"
-                            class="customer-input"
-                            :data-source="kindpkgsDataArr"
-                            :dropdown-match-select-width="false"
-                            :dropdown-style="{ width: '200px' }"
-                            @select="kindpkgsSelect"
-                            @change="kindpkgsChange"
-                            @focus="kindpkgsChange"
-                          />
+                          <a-icon slot="suffixIcon" type="time" style="display: none" />
+                        </a-date-picker> -->
+                      </a-form-model-item>
+                    </a-col>
+                  </a-row>
+                </a-form-model>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+          <div class="base-tit-box">
+            <div class="base-tit"><i class="iconfont icon-electronic-signature"></i>箱信息</div>
+          </div>
+          <div class="box-table">
+            <a-table :columns="boxColumns" :data-source="taskDetail.contaList">
+              <span slot="seq" slot-scope="seq">{{ Number(seq) + 1 }}</span>
+            </a-table>
+          </div>
+        </div>
+      </a-col>
+
+      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <div class="right-box">
+          <div class="task-title">
+            <div class="task-title-left"><i class="iconfont icon-zhcc_tidan"></i>SI确认信息</div>
+            <a-button type="link" class="btn" icon="reload" @click="reloadSiAll">全部更新</a-button>
+          </div>
+          <x-card>
+            <div slot="content" style="margin-top: -24px;" class="mail-info">
+              <div class="task-basic-box">
+                <div class="label">
+                  <div class="title">提单号：</div>
+                  <div class="msg">{{ taskSiDetail.masterBlNo }}</div>
+                </div>
+                <div class="label">
+                  <div class="title">开船日期：</div>
+                  <div class="msg">{{ taskSiDetail.etd }}</div>
+                </div>
+                <div class="label">
+                  <div class="title">船名/航次：</div>
+                  <div class="msg">{{ taskSiDetail.vessel }}/{{ taskSiDetail.voyno }}</div>
+                </div>
+              </div>
+            </div>
+          </x-card>
+          <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey1">
+            <a-collapse-panel key="1">
+              <template slot="header">
+                <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
+              </template>
+              <div class="mailing-info">
+                <div class="mail-info">
+                  <a-form-model :selfUpdate="true" ref="mailingFrom" :model="taskSiDetail">
+                    <a-row :gutter="10">
+                      <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
+                        <a-form-model-item has-feedback prop="shipper" class="sender-label">
+                          <div class="sender">
+                            <div class="top">
+                              <div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
+                              <div class="right-btn" @click="reloadFun('shipper')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                            </div>
+                            <div class="bottom">
+                              <a-textarea
+                                disabled
+                                id="shipper-scroll"
+                                v-model="taskSiDetail.shipper"
+                                :auto-size="{ minRows: 2, maxRows: 7 }"
+                                style="height: 140px"
+                                @blur="textareaChange($event, 'shipper')"
+                              />
+                              <!-- <div
+                                class="line-count"
+                                id="shipper-scroll-right"
+                                v-if="Object.keys(taskSiDetail).length > 1 && taskSiDetail.shipper.length > 1"
+                              >
+                                <div v-for="(num, index) in taskSiDetail.shipper.split('\n')" :key="index">{{ num.length }}</div>
+                              </div> -->
+                            </div>
+                          </div>
                         </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="毛重"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="kgs"
-                        >
-                          <div class="line-box">
-                            <a-input :allowClear="true" v-model="taskDetail.kgs" /><span class="unit">KGS</span>
+                        <a-form-model-item has-feedback prop="consignee" class="sender-label">
+                          <div class="consignee">
+                            <div class="top">
+                              <div class="name"><span class="iconfont icon-bianji"></span>收货人</div>
+                              <div class="right-btn" @click="reloadFun('consigne')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                            </div>
+                            <div class="bottom">
+                              <a-textarea
+                                disabled
+                                id="consignee-scroll"
+                                v-model="taskSiDetail.consigne"
+                                :auto-size="{ minRows: 2, maxRows: 7 }"
+                                style="height: 140px"
+                                @blur="textareaChange($event, 'consignee')"
+                              />
+                              <!-- <div
+                                class="line-count"
+                                id="consignee-scroll-right"
+                                v-if="Object.keys(taskSiDetail).length > 1 && taskSiDetail.consignee.length > 1"
+                              >
+                                <div v-for="(num, index) in taskSiDetail.consignee.split('\n')" :key="index">{{ num.length }}</div>
+                              </div> -->
+                            </div>
                           </div>
                         </a-form-model-item>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-form-model-item
-                          class="from-label"
-                          label="尺寸"
-                          :labelCol="labelCol"
-                          :wrapperCol="wrapperCol"
-                          has-feedback
-                          prop="cbm"
-                        >
-                          <div class="line-box">
-                            <a-input :allowClear="true" v-model="taskDetail.cbm" /><span class="unit">CBM</span>
+                        <a-form-model-item has-feedback prop="notifyParty" class="sender-label">
+                          <div class="notifier">
+                            <div class="top">
+                              <div class="name"><span class="iconfont icon-bianji"></span>通知人</div>
+                              <div class="right-btn" @click="reloadFun('notifyParty')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                            </div>
+                            <div class="bottom">
+                              <a-textarea
+                                disabled
+                                id="notifyParty-scroll"
+                                :auto-size="{ minRows: 2, maxRows: 7 }"
+                                style="height: 140px"
+                                v-model="taskSiDetail.notifyParty"
+                                @blur="textareaChange($event, 'notifyParty')"
+                              />
+                              <!-- <div
+                                class="line-count"
+                                id="notifyParty-scroll-right"
+                                v-if="Object.keys(taskSiDetail).length > 1 && taskSiDetail.notifyParty.length > 1"
+                              >
+                                <div v-for="(num, index) in taskSiDetail.notifyParty.split('\n')" :key="index">{{ num.length }}</div>
+                              </div> -->
+                            </div>
                           </div>
                         </a-form-model-item>
                       </a-col>
+                      <a-col class="right-content" :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
+                        <a-row :gutter="16">
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portLoadId"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">装货港代码</div>
+                                <div class="right-btn" @click="reloadFun('portLoadId')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled v-model="taskSiDetail.portLoadId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskSiDetail.portLoadId"
+                                class="customer-input"
+                                :data-source="portLoadDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="portLoadSelect"
+                                @change="portLoadChange"
+                                @focus="portLoadChange"
+                              ></auto-complete> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portLoad"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">装货港</div>
+                                <div class="right-btn" @click="reloadFun('portLoad')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled :allowClear="true" v-model="taskSiDetail.portLoad" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="transportId"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">中转港代码</div>
+                                <div class="right-btn" @click="reloadFun('transportId')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled v-model="taskSiDetail.transportId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskSiDetail.transportId"
+                                class="customer-input"
+                                :data-source="transportDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="transportSelect"
+                                @change="transportChange"
+                                @focus="transportChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="transport"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">中转港</div>
+                                <div class="right-btn" @click="reloadFun('transport')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled :allowClear="true" v-model="taskSiDetail.transport" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portDischargeId"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">卸货港代码</div>
+                                <div class="right-btn" @click="reloadFun('portDischargeId')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled v-model="taskSiDetail.portDischargeId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskSiDetail.portDischargeId"
+                                class="customer-input"
+                                :data-source="portdischargeDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="portdischargeSelect"
+                                @change="portdischargeChange"
+                                @focus="portdischargeChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="portDischarge"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">卸货港</div>
+                                <div class="right-btn" @click="reloadFun('portDischarge')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled :allowClear="true" v-model="taskSiDetail.portDischarge" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="destinationId"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">目的代码</div>
+                                <div class="right-btn" @click="reloadFun('destinationId')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled v-model="taskSiDetail.destinationId"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskSiDetail.destinationId"
+                                class="customer-input"
+                                :data-source="destinationDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '300px' }"
+                                @select="destinationSelect"
+                                @change="destinationChange"
+                                @focus="destinationChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="destination"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">目的地</div>
+                                <div class="right-btn" @click="reloadFun('destination')"><i class="iconfont icon-zhuanhuan" ></i>更新</div>
+                              </div>
+                              <a-input disabled :allowClear="true" v-model="taskSiDetail.destination" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="pkGs"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">件数</div>
+                                <div class="right-btn" @click="reloadFun('pkGs')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled :allowClear="true" v-model="taskSiDetail.pkGs" type="number"/>
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="kindPKGs"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">包装</div>
+                                <div class="right-btn" @click="reloadFun('kindPKGs')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <a-input disabled v-model="taskSiDetail.kindPKGs"></a-input>
+                              <!-- <auto-complete
+                                :allowClear="true"
+                                v-model="taskSiDetail.kindPKGs"
+                                class="customer-input"
+                                :data-source="kindpkgsDataArr"
+                                :dropdown-match-select-width="false"
+                                :dropdown-style="{ width: '200px' }"
+                                @select="kindpkgsSelect"
+                                @change="kindpkgsChange"
+                                @focus="kindpkgsChange"
+                              /> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="kGs"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">毛重</div>
+                                <div class="right-btn" @click="reloadFun('kGs')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <div class="line-box">
+                                <a-input disabled :allowClear="true" v-model="taskSiDetail.kGs" /><span class="unit">KGS</span>
+                              </div>
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="from-label"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                              prop="cbm"
+                            >
+                              <div slot="label" class="label-tit">
+                                <div class="name">尺寸</div>
+                                <div class="right-btn" @click="reloadFun('cbm')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <div class="line-box">
+                                <a-input disabled :allowClear="true" v-model="taskSiDetail.cbm" /><span class="unit">CBM</span>
+                              </div>
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              prop="siRemark"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol">
+                              <div slot="label" class="label-tit">
+                                <div class="name">截单备注</div>
+                                <div class="right-btn" @click="reloadFun('siRemark')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                              </div>
+                              <!-- <div class="tit"><span class="iconfont icon-bianji"></span>截单备注</div> -->
+                              <a-textarea disabled class="input-box" v-model="taskSiDetail.siRemark" style="margin-top:6px;height:80px;"/>
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </a-col>
                     </a-row>
-                  </a-col>
-                </a-row>
-              </a-form-model>
-            </div>
-          </x-card>
+                  </a-form-model>
+                </div>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+          <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey2">
+            <a-collapse-panel key="1">
+              <template slot="header">
+                <div class="base-tit"><i class="iconfont icon-goods"></i>货物信息</div>
+              </template>
+              <div class="container cargo-info">
+                <a-form-model :selfUpdate="true" ref="cargoFrom" :model="taskSiDetail">
+                  <a-row :gutter="20">
+                    <a-col :span="8">
+                      <div class="tit label-tit">
+                        <div class="name">唛头</div>
+                        <div class="right-btn" @click="reloadFun('marks')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                      </div>
+                      <a-form-model-item has-feedback prop="marks" class="textarea-label" label="" style="margin-bottom:0;">
+                        <div class="bottom">
+                          <a-textarea disabled class="input-box" v-model="taskSiDetail.marks" @change="valueChange('marks')"/>
+                        </div>
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :span="16">
+                      <div class="line">
+                        <div class="left label-tit">
+                          <div class="name">货物描述</div>
+                          <div class="right-btn" @click="reloadFun('description')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                        </div>
+                      </div>
+                      <a-form-model-item has-feedback prop="description" class="textarea-label" label="" style="margin-bottom:0;">
+                        <div class="bottom">
+                          <a-textarea disabled class="input-box" v-model="taskSiDetail.description" @change="valueChange('description')"/>
+                          <!-- <div
+                            class="line-count"
+                            id="shipper-scroll-right"
+                            v-if="Object.keys(taskSiDetail).length > 1 && taskSiDetail.description.length > 1"
+                          >
+                            <div v-for="(num, index) in taskSiDetail.description.split('\n')" :key="index">{{ num.length }}</div>
+                          </div> -->
+                        </div>
+                      </a-form-model-item>
+                    </a-col>
+                  </a-row>
+                </a-form-model>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+          <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey3">
+            <a-collapse-panel key="1">
+              <template slot="header">
+                <div class="base-tit"><i class="iconfont icon-electronic-signature"></i>签单信息</div>
+              </template>
+              <div class="container bill-info">
+                <a-form-model ref="billFrom" :model="taskSiDetail">
+                  <a-row :gutter="10">
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="issueType"
+                      >
+                        <div slot="label" class="label-tit">
+                          <div class="name">签单方式</div>
+                          <div class="right-btn" @click="reloadFun('issueType')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                        </div>
+                        <a-input disabled v-model="taskSiDetail.issueType"></a-input>
+                        <!-- <a-select
+                          class="customer-input"
+                          :default-value="taskSiDetail.issueType"
+                          @change="handleIssuetypeChange"
+                          show-search
+                          :filter-option="filterOption"
+                          :dropdownMatchSelectWidth="false"
+                        >
+                          <a-select-option v-for="(issueType, iIndex) in issuetypeSelectData" :key="iIndex" :value="iIndex">
+                            {{ issueType.selectShowTab }}
+                          </a-select-option>
+                        </a-select> -->
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="blfrt"
+                      >
+                        <div slot="label" class="label-tit">
+                          <div class="name">付费方式</div>
+                          <div class="right-btn" @click="reloadFun('issueType')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                        </div>
+                        <a-input disabled v-model="taskSiDetail.issueType"></a-input>
+                        <!-- <auto-complete
+                          :allowClear="true"
+                          v-model="taskSiDetail.blfrt"
+                          :data-source="blfrtDataArr"
+                          :dropdown-match-select-width="false"
+                          :dropdown-style="{ width: '200px'}"
+                          @select="blfrtSelect"
+                          @change="blfrtChange"
+                          @focus="blfrtChange"
+                        /> -->
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="thirdPayAddr"
+                      >
+                        <div slot="label" class="label-tit">
+                          <div class="name">第三付款地</div>
+                          <div class="right-btn" @click="reloadFun('thirdPayAddr')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                        </div>
+                        <a-input disabled :allowClear="true" v-model="taskSiDetail.thirdPayAddr" />
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="service"
+                      >
+                        <div slot="label" class="label-tit">
+                          <div class="name">运输条款</div>
+                          <div class="right-btn" @click="reloadFun('service')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                        </div>
+                        <a-input disabled v-model="taskSiDetail.service"></a-input>
+                        <!-- <auto-complete
+                          :allowClear="true"
+                          v-model="taskSiDetail.service"
+                          :data-source="serviceDataArr"
+                          :dropdown-match-select-width="false"
+                          :dropdown-style="{ width: '200px'}"
+                          @select="serviceSelect"
+                          @change="serviceChange"
+                          @focus="serviceChange"
+                        /> -->
+                      </a-form-model-item>
+                    </a-col>
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="from-label"
+                        :labelCol="labelCol"
+                        :wrapperCol="wrapperCol"
+                        has-feedback
+                        prop="closeDocDate"
+                      >
+                        <div slot="label" class="label-tit">
+                          <div class="name">截单时间</div>
+                          <div class="right-btn" @click="reloadFun('closeDocDate')"><i class="iconfont icon-zhuanhuan"></i>更新</div>
+                        </div>
+                        <a-input disabled v-model="taskSiDetail.closeDocDate"></a-input>
+                        <!-- <a-date-picker
+                          show-time
+                          format="YYYY-MM-DD HH"
+                          v-model="taskSiDetail.closeDocDate"
+                          @change="closedocdateChange"
+                        >
+                          <a-icon slot="suffixIcon" type="time" style="display: none" />
+                        </a-date-picker> -->
+                      </a-form-model-item>
+                    </a-col>
+                  </a-row>
+                </a-form-model>
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
+          <div class="base-tit-box">
+            <div class="base-tit"><i class="iconfont icon-electronic-signature"></i>箱信息</div>
+          </div>
+          <div class="box-table">
+            <a-table :columns="boxSiColumns" :data-source="taskSiDetail.contaList">
+              <span slot="seq" slot-scope="seq">{{ Number(seq) + 1 }}</span>
+              <div class="right-btn" slot="operate" slot-scope="seq"><i class="iconfont icon-zhuanhuan" @click="reloadboxFun('contaList', seq)"></i>更新</div>
+            </a-table>
+          </div>
         </div>
-      </a-collapse-panel>
-    </a-collapse>
+      </a-col>
+    </a-row>
 
-    <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey">
-      <a-collapse-panel key="1">
-        <template slot="header">
-          <div class="base-tit"><i class="iconfont icon-goods"></i>货物信息</div>
-        </template>
-        <div></div>
-      </a-collapse-panel>
-    </a-collapse>
+    <a-modal
+      title="发送SI"
+      :width="600"
+      :visible="bookingModelvisible"
+      :confirmLoading="bookingModelconfirm"
+      :maskClosable="false"
+      @ok="handleModelSubmit"
+      @cancel="handleModelCancel"
+    >
+      <a-form class="si-model">
+        <a-row :gutter="16">
+          <a-col :span="24" class="book-model-box">
+            <a-checkbox class="book-check" @change="bookingCheckChange" />
+            <a-form-item
+              label="使用货代代码"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+            >
+              <a-input :allowClear="true" v-model="bookingModelFrom.forwarderCode" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item
+              label="货代称呼"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+            >
+              <a-input :allowClear="true" v-model="bookingModelFrom.forwarderName" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item
+              label="文件功能"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              class="ant-form-file"
+            >
+              <a-radio-group v-model="bookingModelFrom.fileRole">
+                <a-radio :style="radioStyle" :value="9"> 原始 </a-radio>
+                <a-radio :style="radioStyle" :value="1"> 更新 </a-radio>
+                <a-radio :style="radioStyle" :value="5"> 退舱 </a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <template slot="footer">
+        <a-button @click="handleModelCancel">关闭</a-button>
+        <a-button type="primary" @click="handleModelSubmit('save')" :loading="EDISloading">保存EDI文件</a-button>
+        <a-button type="primary" @click="handleModelSubmit('send')" :loading="EDIUloading">上传EDI</a-button>
+      </template>
+    </a-modal>
   </div>
 </template>
 <script>
 import { XCard } from '@/components'
 import { AutoComplete } from 'ant-design-vue'
 import {
-  GetBookingOrderInfo
+  GetBookingOrderInfo,
+  CompleteTask,
+  SendShippingOrder,
+  CancelTask
 } from '@/api/modular/main/TaskmanageList'
 import {
-  GetPortloadlist,
+  GetportLoadlist,
   GetPortlist,
-  GetPackage
+  GetPackage,
+  Codeissuetypelist,
+  GetFrt,
+  GetService,
+  DownloadBookingOrClosingEDI,
+  SendBookingOrClosingEDI
 } from '@/api/modular/main/BookingLedger'
 
 export default {
@@ -345,17 +1147,18 @@ export default {
   },
   data() {
     return {
-      taskPKId: this.$route.query.pkId,
+      taskPKId: this.$route.query.taskPKId,
       taskDetail: {},
+      taskSiDetail: {},
       labelCol: {
         xs: { span: 24 },
-        sm: { span: 8 },
-        md: { span: 10 }
+        sm: { span: 24 },
+        md: { span: 24 }
       },
       wrapperCol: {
         xs: { span: 24 },
-        sm: { span: 15 },
-        md: { span: 13 }
+        sm: { span: 24 },
+        md: { span: 24 }
       },
       YardlabelCol: {
         xs: { span: 24 },
@@ -367,22 +1170,147 @@ export default {
         sm: { span: 1 },
         md: { span: 20 }
       },
-      portloadData: [], // 装货港
+      portLoadData: [], // 装货港
       transportData: [], // 中转港
       portdischargeData: [], // 卸货港
       destinationData: [], // 目的地
       kindpkgsData: [],
-      showShipper: '',
-      showConsignee: '',
-      showNotifier: '',
-      showKey: ['1']
+      showKey1: ['1'],
+      showKey2: ['1'],
+      showKey3: ['1'],
+      showKey4: ['1'],
+      issuetypeSelectData: [],
+      tableRules: {
+        ctnall: { required: false, title: '箱型', message: '请选择箱型', trigger: 'change' },
+        ctnnum: { required: false, title: '箱量', message: '请选择箱量', trigger: 'change' },
+        cntrno: { required: false, title: '箱号', message: '请选择箱号', trigger: 'change' },
+        sealno: { required: false, title: '封号', message: '请选择封号', trigger: 'change' },
+        pkgs: { required: false, title: '件数', message: '请选择件数', trigger: 'change' },
+        kindpkgs: { required: false, title: '包装', message: '请选择包装', trigger: 'change' },
+        kgs: { required: false, title: '重量', message: '请选择重量', trigger: 'change' },
+        cbm: { required: false, title: '尺码', message: '请选择尺码', trigger: 'change' },
+        tareweight: { required: false, title: '箱皮重', message: '请选择箱皮重', trigger: 'change' },
+        weightype: { required: false, title: '称重方式', message: '请选择称重方式', trigger: 'change' },
+        weighkgs: { required: false, title: '称重重量', message: '请选择称重重量', trigger: 'change' }
+      },
+      boxSiColumns: [
+        {
+          dataIndex: 'seq',
+          key: 'seq',
+          title: '序号',
+          scopedSlots: { customRender: 'seq' }
+        },
+        {
+          dataIndex: 'contaTypeName',
+          key: 'contaTypeName',
+          title: '箱型'
+        },
+        {
+          dataIndex: 'contaNo',
+          key: 'contaNo',
+          title: '箱号'
+        },
+        {
+          dataIndex: 'sealNo',
+          key: 'sealNo',
+          title: '封号'
+        },
+        {
+          dataIndex: 'kindPKGs',
+          key: 'kindPKGs',
+          title: '包装'
+        },
+        {
+          dataIndex: 'pkGs',
+          key: 'pkGs',
+          title: '件数'
+        },
+        {
+          dataIndex: 'kGs',
+          key: 'kGs',
+          title: '重量'
+        },
+        {
+          dataIndex: 'cbm',
+          key: 'cbm',
+          title: '尺码'
+        },
+        {
+          dataIndex: 'operate',
+          key: 'operate',
+          title: '操作',
+          scopedSlots: { customRender: 'operate' }
+        }
+      ],
+      boxColumns: [
+        {
+          dataIndex: 'seq',
+          key: 'seq',
+          title: '序号',
+          scopedSlots: { customRender: 'seq' }
+        },
+        {
+          dataIndex: 'contaTypeName',
+          key: 'contaTypeName',
+          title: '箱型'
+        },
+        {
+          dataIndex: 'contaNo',
+          key: 'contaNo',
+          title: '箱号'
+        },
+        {
+          dataIndex: 'sealNo',
+          key: 'sealNo',
+          title: '封号'
+        },
+        {
+          dataIndex: 'kindPKGs',
+          key: 'kindPKGs',
+          title: '包装'
+        },
+        {
+          dataIndex: 'pkGs',
+          key: 'pkGs',
+          title: '件数'
+        },
+        {
+          dataIndex: 'kGs',
+          key: 'kGs',
+          title: '重量'
+        },
+        {
+          dataIndex: 'cbm',
+          key: 'cbm',
+          title: '尺码'
+        }
+      ],
+      bookingModelvisible: false,
+      bookingModelconfirm: false,
+      EDISloading: false,
+      EDIUloading: false,
+      bookingModelFrom: {
+        id: this.$route.query.taskPKId,
+        orderNo: '',
+        useForwarderCode: false,
+        forwarderCode: '',
+        forwarderName: '',
+        fileRole: 9,
+        sendType: 'B',
+        send: false
+      },
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px'
+      },
     }
   },
   computed: {
-    portloadDataArr() {
-      if (this.portloadData) {
+    portLoadDataArr() {
+      if (this.portLoadData) {
         const arr = []
-        this.portloadData.map((item, index) => {
+        this.portLoadData.map((item, index) => {
           if (!arr.includes(item.enName)) {
             arr.push(`(${item.ediCode})${item.enName}`)
             // arr.push(item.enName)
@@ -448,8 +1376,35 @@ export default {
         return []
       }
     },
+    blfrtDataArr() {
+      if (this.blfrtData) {
+        const arr = []
+        this.blfrtData.map((item, index) => {
+          if (!arr.includes(item.enName)) {
+            arr.push(item.enName)
+          }
+        })
+        return arr
+      } else {
+        return []
+      }
+    },
+    serviceDataArr() {
+      if (this.serviceData) {
+        const arr = []
+        this.serviceData.map((item, index) => {
+          if (!arr.includes(item.name)) {
+            arr.push(item.name)
+          }
+        })
+        return arr
+      } else {
+        return []
+      }
+    }
   },
   created() {
+    this.getBookingOrderInfo()
   },
   mounted() {
     const shipperScroll = document.getElementById('shipper-scroll')
@@ -462,9 +1417,9 @@ export default {
     consigneeScroll.addEventListener('scroll', () => {
       document.getElementById('consignee-scroll-right').scrollTop = consigneeScroll.scrollTop
     })
-    const notifypartyScroll = document.getElementById('notifyparty-scroll')
-    notifypartyScroll.addEventListener('scroll', () => {
-      document.getElementById('notifyparty-scroll-right').scrollTop = notifypartyScroll.scrollTop
+    const notifyPartyScroll = document.getElementById('notifyParty-scroll')
+    notifyPartyScroll.addEventListener('scroll', () => {
+      document.getElementById('notifyParty-scroll-right').scrollTop = notifyPartyScroll.scrollTop
     })
   },
   methods: {
@@ -472,6 +1427,11 @@ export default {
       GetBookingOrderInfo({
         taskPKId: this.taskPKId
       }).then(res => {
+        res.data.contaList.map((item, index) => {
+          item.seq = index
+        })
+        this.taskDetail = res.data
+        this.taskSiDetail = res.data
         console.log(res)
       }).catch(err => {
         console.log(err)
@@ -479,8 +1439,8 @@ export default {
     },
 
     // 起始港 ( 装货港 / 收货地) - start
-    getPortloadlist(name = '', type) {
-      GetPortloadlist({
+    getportLoadlist(name = '', type) {
+      GetportLoadlist({
         KeyWord: name
       })
         .then(res => {
@@ -493,20 +1453,20 @@ export default {
           console.log(err)
         })
     },
-    portloadSelect(value) {
-      const index = this.portloadDataArr.indexOf(value)
-      this.taskDetail.portloadid = this.portloadData[index].ediCode
-      this.taskDetail.portload = this.portloadData[index].enName
-      this.taskDetail.issueplace = this.portloadData[index].enName
+    portLoadSelect(value) {
+      const index = this.portLoadDataArr.indexOf(value)
+      this.taskDetail.portLoadId = this.portLoadData[index].ediCode
+      this.taskDetail.portLoad = this.portLoadData[index].enName
+      this.taskDetail.issueplace = this.portLoadData[index].enName
       if (!this.taskDetail.prepardat) {
-        this.taskDetail.prepardat = this.portloadData[index].enName
+        this.taskDetail.prepardat = this.portLoadData[index].enName
       }
     },
-    portloadChange(value) {
+    portLoadChange(value) {
       if (!value) {
-        this.taskDetail.portloadid = this.taskDetail.portloadid ? this.taskDetail.portloadid : ''
+        this.taskDetail.portLoadId = this.taskDetail.portLoadId ? this.taskDetail.portLoadId : ''
       }
-      this.getPortloadlist(value, 'portload')
+      this.getportLoadlist(value, 'portLoad')
     },
     // 起始港 ( 装货港 / 收货地) - end
 
@@ -528,39 +1488,39 @@ export default {
     // 卸货港
     portdischargeSelect(value) {
       const index = this.portdischargeDataArr.indexOf(value)
-      this.taskDetail.portdischargeid = this.portdischargeData[index].ediCode
-      this.taskDetail.portdischarge = this.portdischargeData[index].enName
+      this.taskDetail.portDischargeId = this.portdischargeData[index].ediCode
+      this.taskDetail.portDischarge = this.portdischargeData[index].enName
       if (!this.taskDetail.payableat) {
         this.taskDetail.payableat = this.portdischargeData[index].enName
       }
     },
     portdischargeChange(value) {
       if (!value) {
-        this.taskDetail.portdischargeid = this.taskDetail.portdischargeid ? this.taskDetail.portdischargeid : ''
+        this.taskDetail.portDischargeId = this.taskDetail.portDischargeId ? this.taskDetail.portDischargeId : ''
       }
-      this.getPortlist(value, 'portdischarge')
+      this.getPortlist(value, 'portDischarge')
     },
     // 目的地
     destinationSelect(value) {
       const index = this.destinationDataArr.indexOf(value)
-      this.taskDetail.destinationid = this.destinationData[index].ediCode
+      this.taskDetail.destinationId = this.destinationData[index].ediCode
       this.taskDetail.destination = this.destinationData[index].enName
     },
     destinationChange(value) {
       if (!value) {
-        this.taskDetail.destinationid = this.taskDetail.destinationid ? this.taskDetail.destinationid : ''
+        this.taskDetail.destinationId = this.taskDetail.destinationId ? this.taskDetail.destinationId : ''
       }
       this.getPortlist(value, 'destination')
     },
     // 中转港
     transportSelect(value) {
       const index = this.transportDataArr.indexOf(value)
-      this.taskDetail.transportid = this.transportData[index].ediCode
+      this.taskDetail.transportId = this.transportData[index].ediCode
       this.taskDetail.transport = this.transportData[index].enName
     },
     transportChange(value) {
       if (!value) {
-        this.taskDetail.transportid = this.taskDetail.transportid ? this.taskDetail.transportid : ''
+        this.taskDetail.transportId = this.taskDetail.transportId ? this.taskDetail.transportId : ''
       }
       this.getPortlist(value, 'transport')
     },
@@ -582,11 +1542,11 @@ export default {
         })
     },
     kindpkgsSelect(value) {
-      this.taskDetail.kindpkgs = value
+      this.taskDetail.kindPKGs = value
     },
     kindpkgsChange(value) {
       if (!value) {
-        this.taskDetail.kindpkgs = this.taskDetail.kindpkgs ? this.taskDetail.kindpkgs : ''
+        this.taskDetail.kindPKGs = this.taskDetail.kindPKGs ? this.taskDetail.kindPKGs : ''
       }
       this.getPackage(value)
     },
@@ -594,33 +1554,323 @@ export default {
     textareaChange(e, type) {
       this.taskDetail[type] = e.target.value
     },
+    valueChange (type) {
+      if (type === 'marks') {
+        this.taskDetail.marks = this.ToCDB(this.taskDetail.marks).toUpperCase()
+        console.log(this.taskDetail.marks)
+      } else {
+        this.taskDetail.description = this.ToCDB(this.taskDetail.description).toUpperCase()
+        console.log(this.taskDetail.description)
+      }
+    },
+    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));
+        }
+      }
+      return tmp
+    },
+    // 签单方式 - start
+    getIssuetypeList(name = '') {
+      Codeissuetypelist({
+        KeyWord: name
+      })
+        .then(res => {
+          if (res.code === 200) {
+            this.issuetypeData = res.data
+            const arr = []
+            res.data.map((item, index) => {
+              arr.push({
+                ...{ selectShowTab: item.cnName + ' / ' + item.enName },
+                ...item
+              })
+            })
+            this.issuetypeSelectData = arr
+            this.$forceUpdate()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    issuetypeSelect(value) {
+      this.taskDetail.issueType = value
+    },
+    issuetypeChange(value) {
+      this.getIssuetypeList(value)
+    },
+    handleIssuetypeChange(index) {
+      this.taskDetail.issueType = this.issuetypeSelectData[index].enName
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    // 签单方式 - end
+    // 付费方式 - start
+    getFrt(name = '') {
+      GetFrt({
+        KeyWord: name
+      })
+        .then(res => {
+          if (res.code === 200) {
+            this.blfrtData = res.data
+            this.$forceUpdate()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    blfrtSelect(value) {
+      this.taskDetail.blfrt = value
+    },
+    blfrtChange(value) {
+      if (!value) {
+        this.taskDetail.blfrt = this.taskDetail.blfrt ? this.taskDetail.blfrt : ''
+      }
+      this.getFrt(value)
+    },
+    // 付费方式 - end
+
+    // 运输条款 - start
+    getService(name = '') {
+      GetService({
+        KeyWord: name
+      })
+        .then(res => {
+          if (res.code === 200) {
+            this.serviceData = res.data
+            this.$forceUpdate()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    serviceSelect(value) {
+      this.taskDetail.service = value
+    },
+    serviceChange(value) {
+      if (!value) {
+        this.taskDetail.service = this.taskDetail.service ? this.taskDetail.service : ''
+      }
+      this.getService(value)
+    },
+    // 运输条款 - end
+    closedocdateChange (date, dateString) {
+      this.taskDetail.closeDocDate = dateString
+    },
+    changeDetailFun(data) {
+      const { detail, type } = data
+      this.taskDetail = detail
+    },
+    ifCompare(object1, object2) {
+      var o1keys = Object.keys(object1)
+      var o2keys = Object.keys(object2)
+      if (o2keys.length !== o1keys.length) return false
+      for (let i = 0; i <= o1keys.length - 1; i++) {
+        let key = o1keys[i]
+        if (!o2keys.includes(key)) return false
+        if (object2[key] !== object1[key]) return false
+      }
+      return true
+    },
+    changeTotalFun(data) {
+      const { type, val } = data
+      if (type === 'totalKgs') {
+        this.taskDetail.kGs = val || this.taskDetail.kGs
+      } else if (type === 'totalPkgs') {
+        this.taskDetail.pkGs = val || this.taskDetail.pkGs
+      } else if (type === 'totalCbm') {
+        this.taskDetail.cbm = val || this.taskDetail.cbm
+      }
+    },
+    reloadFun (type) {
+      console.log('type = ', type)
+      this.taskDetail[type] = this.taskSiDetail[type]
+      this.$forceUpdate()
+    },
+    reloadboxFun (type, index) {
+      this.taskDetail[type][index] = this.taskSiDetail[type][index]
+    },
+    reloadSiAll () {
+      this.taskDetail = JSON.parse(JSON.stringify(this.taskSiDetail))
+    },
+    // 完成任务
+    completeTaskFun () {
+      CompleteTask({
+        PKIds: [this.taskPKId],
+      }).then((res) => {
+        if (res.success) {
+          this.$message.success('已完成任务')
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    // 取消
+    cancelTaskFun () {
+      CancelTask({
+        PKIds: [this.taskPKId]
+      }).then((res) => {
+        if (res.success) {
+          this.$message.success('取消任务成功')
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    // 发送SI
+    cutOffFun () {
+        this.bookingModelvisible = true
+    },
+    bookingCheckChange(e) {
+      this.bookingModelFrom.useForwarderCode = e.target.checked
+    },
+
+    handleModelCancel() {
+      this.bookingModelvisible = false
+      this.EDISloading = false
+      this.EDIUloading = false
+      this.bookingModelFrom = {
+        id: this.$route.query.id,
+        orderNo: this.taskDetail.mblno,
+        useForwarderCode: false,
+        forwarderCode: '',
+        forwarderName: '',
+        fileRole: 9,
+        sendType: 'B',
+        send: false
+      }
+    },
+
+    handleModelSubmit(type) {
+      this.bookingModelFrom.sendType = 'E'
+      this.bookingModelFrom.send = type === 'send'
+      this.bookingModelFrom.orderNo = this.taskDetail.mblno
+      if (type === 'save') {
+        this.EDISloading = true
+        this.downloadBookingOrEDI(type)
+      } else {
+        this.EDIUloading = true
+        this.sendBookingOrEDI(type)
+      }
+    },
+
+    downloadBookingOrEDI(type) {
+      console.log('== 需要换接口 ==')
+      return false
+      DownloadBookingOrClosingEDI(this.bookingModelFrom)
+      .then(res => {
+        this.EDISloading = false
+        this.EDIUloading = false
+        if (res.message) {
+          // this.$message.error(res.message)
+          const h = this.$createElement
+          this.$message.error({
+            content: () =>
+              h(
+                'p',
+                {
+                  style: {
+                    whiteSpace: 'pre-wrap'
+                  }
+                },
+                res.message
+              )
+          })
+          return false
+        } else {
+          const pdfUrl = window.URL.createObjectURL(new Blob([res], { type: 'text/plain;charset=utf-8' }))
+          const fname = `${this.taskDetail.mblno} - 截单Edi` // 下载文件的名字
+          const link = document.createElement('a')
+          link.href = pdfUrl
+          link.setAttribute('download', fname)
+          document.body.appendChild(link)
+          link.click()
+          this.handleModelCancel()
+        }
+      })
+      .catch(() => {
+        this.EDISloading = false
+        this.EDIUloading = false
+      })
+    },
+    sendBookingOrEDI(type) {
+      console.log('== 需要换接口 ==')
+      return false
+      SendBookingOrClosingEDI(this.bookingModelFrom)
+      .then(res => {
+        this.EDISloading = false
+        this.EDIUloading = false
+        // 未完成
+        if (res.success) {
+          this.$message.success('发送成功')
+          this.handleModelCancel()
+        } else {
+          const h = this.$createElement
+          this.$message.error({
+            content: () =>
+              h(
+                'p',
+                {
+                  style: {
+                    whiteSpace: 'pre-wrap'
+                  }
+                },
+                res.message
+              )
+          })
+          // this.$message.error(res.message)
+        }
+      })
+      .catch(() => {
+        this.EDISloading = false
+        this.EDIUloading = false
+      })
+    },
+
+
   },
 }
 </script>
 <style lang="less" scoped>
 .task-basic-box{
-  display: flex;
-  width: 500px;
   margin-top: 10px;
   padding: 0 10px;
   background: #fff;
   margin-bottom: 10px;
+  display: flex;
   .label{
+    margin-right: 20px;
     flex: 1;
     .title{
-      height: 50px;
+      display: block;
+      height: 46px;
       line-height: 50px;
       font-size: 16px;
       font-weight: 600;
-      border-bottom: 1px solid #eee;
-      color:#333;
+      color:#666;
+      margin-right: 10px;
+      border-bottom: 1px dashed #ccc;
     }
     .msg{
-      height: 40px;
-      line-height: 40px;
       font-size: 14px;
       font-weight:500;
-      color: #666;
+      color: #999;
+      display: block;
+      height: 38px;
+      line-height: 32px;
     }
   }
 }
@@ -654,6 +1904,7 @@ export default {
       font-size: 13px;
       margin-right: 10px;
       color: #666;
+      flex: 1;
       .iconfont {
         margin-right: 4px;
         font-weight: 600;
@@ -771,7 +2022,7 @@ export default {
   background: #fff;
 }
 
-.base-tit {
+.base-tit ,.base-tit-box{
   font-size: 14px;
   font-weight: 600;
   color: #666;
@@ -779,6 +2030,7 @@ export default {
   height: 34px;
   line-height: 40px;
   margin-top: -5px;
+  background: #fff;
   &::before {
     content: '';
     position: absolute;
@@ -796,10 +2048,213 @@ export default {
     margin-left: 10px;
   }
 }
+.base-tit-box {
+  background: #fff;
+  padding: 10px;
+  height:54px;
+  overflow: hidden;
+  &::before {
+    display: none;
+  }
+}
 .nav-btn-box{
   margin-bottom: 20px;
   .nav-btn{
     margin-right: 10px;
   }
 }
+
+.cargo-info {
+  box-shadow: none;
+  font-size: 14px;
+  color: #666;
+  .tit {
+    text-align: left;
+    width: 100%;
+    // margin-bottom: 10px;
+    // height: 54px;
+    // padding-top: 4px;
+    box-sizing: border-box;
+  }
+  .line {
+    text-align: left;
+    width: 100%;
+    display: flex;
+    // margin-bottom: 10px;
+    // height: 54px;
+  }
+
+  .left {
+    text-align: left;
+    // padding-top: 4px;
+    flex: 1;
+    .title{
+      padding-bottom:4px;
+      width: 90%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .goods-name-box{
+      position: relative;
+      padding-left: 15px;
+      i.icon{
+        position: absolute;
+        top: -10px;
+        left: -14px;
+      }
+    }
+  }
+
+  .input {
+    text-align: left;
+    display: inline-block;
+    // flex: 1;
+    width: 170px;
+  }
+  .cargo-mark {
+    // margin-left: 11%;
+    text-align: left;
+    display: inline-block;
+    width: 120px;
+    margin-right: 10px;
+  }
+  .input-box {
+    height: 100px;
+    font-size: 14px;
+  }
+  .num-box {
+    display: flex;
+    height: 30px;
+    margin-top: 15px;
+  }
+  .label {
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+  }
+  .input-val {
+    flex: 1;
+  }
+}
+.bottom {
+    display: flex;
+    .input-box {
+      margin-top: 10px;
+      flex: 1;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .line-count {
+      width: 24px;
+      padding-top: 3px;
+      height: 130px;
+      overflow: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      // max-height: 192px;
+      // overflow-y: auto;
+      div {
+        text-align: right;
+        height: 22px;
+        line-height: 22px;
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+  .from-label {
+    margin-bottom: 0;
+    overflow: hidden;
+  }
+
+  /deep/ .ant-form-item-label{
+    height: 29px;
+    line-height: 35px;
+    text-align: left;
+  }
+
+  .task-title{
+    width: 100%;
+    font-weight: 600;
+    text-align: left;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    color: #666;
+    display: flex;
+    i{
+      font-size: 20px;
+      color: #999;
+      margin-right: 8px;
+      line-height: 52px;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .task-title-left{
+      flex: 1;
+    }
+    .btn{
+      float: right;
+      margin-top: 10px;
+    }
+  }
+
+  .left-box{
+    .task-title i.iconfont{
+      color: @primary-color;
+    }
+  }
+
+  .right-box{
+    .task-title i.iconfont{
+      color: #CC3333;
+    }
+  }
+
+.right-btn{
+  float: right;
+  color: @primary-color;
+  font-size: 12px;
+  cursor: pointer;
+  i{
+    margin-right: 4px;
+    font-size: 12px;
+  }
+}
+.label-tit{
+  display: flex;
+  .name{
+    flex: 1;
+  }
+}
+
+.box-table{
+  background: #fff;
+  padding: 10px;
+  overflow: hidden;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+
+.book-model-box {
+  position: relative;
+  .book-check {
+    position: absolute;
+    width: 50px;
+    height: 40px;
+    line-height: 40px;
+    top: 0;
+    left: 17px;
+  }
+}
+.si-model{
+  /deep/ .ant-form-item-label{
+    text-align: right !important;
+  }
+  
+}
+
 </style>
diff --git a/src/views/main/Taskmanage/TaskmanageList/index.vue b/src/views/main/Taskmanage/TaskmanageList/index.vue
index de78061..cb2aa72 100644
--- a/src/views/main/Taskmanage/TaskmanageList/index.vue
+++ b/src/views/main/Taskmanage/TaskmanageList/index.vue
@@ -248,7 +248,7 @@
                   >
                     <a-button class="list-btn"><i class="iconfont icon-xiazai"></i>正本下载</a-button>
                   </a-popconfirm>
-                  <a-popconfirm
+                  <!-- <a-popconfirm
                     title="确定登记当前选择项？"
                     ok-text="是"
                     cancel-text="否"
@@ -256,8 +256,8 @@
                     @cancel="cancelFun"
                   >
                     <a-button class="list-btn"><i class="iconfont icon-dengjizongshu"></i>LARA登记</a-button>
-                  </a-popconfirm>
-                  <a-popconfirm
+                  </a-popconfirm> -->
+                  <!-- <a-popconfirm
                     title="确定记录当前选择项？"
                     ok-text="是"
                     cancel-text="否"
@@ -265,7 +265,7 @@
                     @cancel="cancelFun"
                   >
                     <a-button class="list-btn"><i class="iconfont icon-touzijilu"></i>LARA记录</a-button>
-                  </a-popconfirm>
+                  </a-popconfirm> -->
                 </template>
               </template>
               <template #tools>
@@ -290,7 +290,27 @@
                 <span class="task-tit" @click="changePage(row)">{{ row.taskTitle }}</span>
               </template>
               <template #operate="{ row }">
-                <a-button type="text" icon="vxe-icon-edit">预览附件</a-button>
+                <!-- <a-button type="text" size="small" icon="vxe-icon-edit"></a-button> -->
+                <a-tooltip>
+                  <template slot="title">
+                    预览
+                  </template>
+                  <span class="operate-btn iconfont icon-yulan"></span>
+                </a-tooltip>
+                <template v-if="taskType === 'ORIGINAL_DOWN'">
+                  <a-tooltip>
+                    <template slot="title">
+                      LARA登记
+                    </template>
+                    <span class="operate-btn iconfont icon-electronic-signature" @click="laraPaperRegistFun(row)"></span>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      LARA记录
+                    </template>
+                    <span class="operate-btn iconfont icon-touzijilu" @click="laraRecordFun(row)"></span>
+                  </a-tooltip>
+                </template>
               </template>
             </vxe-grid>
           </div>
@@ -355,6 +375,7 @@
 <script>
 import { XCard } from '@/components'
 import initData from './modules/initData'
+import message from '@/components/message/index.js'
 
 import {
   GetTaskManagePage,
@@ -474,7 +495,8 @@ export default {
     this.getParaInfo('SOURCE')
     this.getParaInfo('CATEGORY')
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
     onSelect(selectedKeys, info) {
       console.log('selected', selectedKeys, info)
@@ -790,19 +812,27 @@ export default {
         return false
       }
       pkIdArr.map(item => {
-        this.DownloadTaskAttach(item)
+        const name = select[pkIdArr.indexOf(item)].taskTitle
+        this.DownloadTaskAttach(item, name)
       })
     },
-    DownloadTaskAttach (id) {
+    DownloadTaskAttach (id, name) {
       DownloadTaskAttach({
         taskPKId: id
       }).then((res) => {
-        if (res.success) {
-          debugger
-          // 暂时报错
-        } else {
-          this.$message.error(res.message)
+        if (res.message) {
+          message.error(`${name}下载失败：${res.message}`, 0)
+          return false
         }
+        const blob = new Blob([res], { type: `application/pdf;chartset=UTF-8` })
+        const link = document.createElement('a')
+        link.style.display = 'none'
+        link.href = URL.createObjectURL(blob)
+        link.download = name
+        document.body.appendChild(link)
+        link.click()
+        URL.revokeObjectURL(link.href) // 释放URL对象
+        document.body.removeChild(link)
       }).catch((err) => {
         console.log(err)
       })
@@ -868,7 +898,6 @@ export default {
       })
       query = query.substring(0, query.length - 1)
       console.log(query)
-      debugger
       LaraPaperCalc(query).then((res) => {
         if (res.success) {
           this.paperCalcRes = res.data
@@ -966,49 +995,14 @@ export default {
       })
     },
     // LARA登记
-    laraPaperRegistFun () {
-      const select = this.$refs.xGrid.getCheckboxRecords()
-      const pkIdArr = select.map((item, index) => {
-        return item.pkId
-      })
-      if (pkIdArr.length === 0) {
-        this.$message.error('请选择数据')
-        return false
-      }
-      LaraPaperRegist({
-        PKIds: pkIdArr
-      }).then((res) => {
-        if (res.success) {
-          this.$message.success('登记成功')
-        } else {
-          this.$message.error(res.message)
-        }
-      }).catch((err) => {
-        console.log(err)
-      })
+    laraPaperRegistFun (data) {
+      console.log('跳转页面', data)
+      this.$router.push({ name: 'TaskLaraRegist', query: { taskPKId: data.pkId } })
     },
     // LARA记录
-    laraRecordFun () {
-      const select = this.$refs.xGrid.getCheckboxRecords()
-      const pkIdArr = select.map((item, index) => {
-        return item.pkId
-      })
-      if (pkIdArr.length === 0) {
-        this.$message.error('请选择数据')
-        return false
-      }
-      console.log('已选择数据', pkIdArr)
-      LaraPaperRegistPost({
-        taskPKId: pkIdArr[0]
-      }).then((res) => {
-        debugger
-        if (res.success) {
-        } else {
-          this.$message.error(res.message)
-        }
-      }).catch((err) => {
-        console.log(err)
-      })
+    laraRecordFun (data) {
+      console.log('跳转页面', data)
+      this.$router.push({ name: 'TaskLaraRecord', query: { taskPKId: data.pkId } })
     },
   },
 }
@@ -1062,4 +1056,13 @@ export default {
     margin-left: 10px;
   }
 }
+.operate-btn{
+  width: 30px;
+  text-align: center;
+  display: inline-block;
+  &:nth-of-type(1) {
+    color: @primary-color;
+  }
+
+}
 </style>
diff --git a/src/views/main/Taskmanage/TaskmanageList/modules/addFrom.vue b/src/views/main/Taskmanage/TaskmanageList/modules/addFrom.vue
deleted file mode 100644
index fdbca8f..0000000
--- a/src/views/main/Taskmanage/TaskmanageList/modules/addFrom.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <a-modal
-    :title="`品名编辑（${type=='edit' ? '修改' : '新增'}）`"
-    :width="900"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    :maskClosable="false"
-    cancelText="关闭"
-    okText="保存"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
-  >
-    <a-spin :spinning="formLoading">
-      <a-form :form="form">
-        <a-row :gutter="16">
-          <a-col :span="24">
-            <a-form-item
-              label="品名编码"
-              :labelCol="labelCol2"
-              :wrapperCol="wrapperCol2"
-              has-feedback
-            >
-              <a-input placeholder="请输入品名编码" v-decorator="['goodsCode', {rules: [{required: true, message: '请输入品名编码！'}]}]" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item
-              label="品名中文"
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              has-feedback
-            >
-              <a-input placeholder="请输入品名中文" v-decorator="['goodsNameCN']" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item
-              label="品名英文"
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              has-feedback
-            >
-              <a-input :rows="4" placeholder="请输入品名英文" v-decorator="['goodsNameEN']"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item
-              label="品名分类"
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              has-feedback
-            >
-              <auto-complete
-                :allowClear="true"
-                placeholder="请输入品名分类"
-                v-decorator="['goodsCategory']"
-                class="customer-input"
-                :data-source="goodsCategoryArr"
-                :dropdown-match-select-width="false"
-                :dropdown-style="{ width: '200px' }"
-                @select="goodsCategorySelect"
-                @change="goodsCategoryChange"
-                @focus="goodsCategoryChange"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item
-              label="品名分类名称"
-              :labelCol="labelCol"
-              :wrapperCol="wrapperCol"
-              has-feedback
-            >
-              <a-input :rows="4" placeholder="请输入品名分类名称" v-decorator="['goodsCategoryName']"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item
-              label="品名描述"
-              :labelCol="labelCol2"
-              :wrapperCol="wrapperCol2"
-              has-feedback
-            >
-              <a-textarea :rows="4" placeholder="请输入品名描述" v-decorator="['goodsDesp']"></a-textarea>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-spin>
-  </a-modal>
-</template>
-<script>
-import { AutoComplete } from 'ant-design-vue'
-import {
-  QueryParaGoodsCategoryInfo
-} from '@/api/modular/main/ProductNameList'
-  export default {
-    props: {
-      type: {
-        type: String,
-        default: 'add'
-      },
-      fromData: {
-        type: Object,
-        default: null
-      }
-    },
-    components: {
-      AutoComplete
-    },
-    data () {
-      return {
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 6 }
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 }
-        },
-        labelCol2: {
-          xs: { span: 24 },
-          sm: { span: 3 }
-        },
-        wrapperCol2: {
-          xs: { span: 24 },
-          sm: { span: 20 }
-        },
-        visible: false,
-        confirmLoading: false,
-        formLoading: true,
-        form: this.$form.createForm(this),
-        goodsCategory: []
-      }
-    },
-    computed: {
-      goodsCategoryArr () {
-        if (this.goodsCategory) {
-        const arr = []
-        this.goodsCategory.map((item, index) => {
-          arr.push(item.goodsCategory)
-        })
-        return arr
-      } else {
-        return []
-      }
-      }
-    },
-    watch: {
-      fromData: {
-        handler (nval, oval) {
-          if (!this.formLoading) {
-            this.$nextTick(() => {
-              this.form.setFieldsValue(nval)
-            })
-          }
-        },
-        deep: true
-      }
-    },
-    methods: {
-      add () {
-        this.visible = true
-        this.formLoading = false
-      },
-      handleSubmit () {
-        const { form: { validateFields } } = this
-        this.confirmLoading = true
-        validateFields((errors, values) => {
-          if (!errors) {
-            this.$emit('ok', values)
-          } else {
-            this.confirmLoading = false
-          }
-        })
-      },
-      handleCancel () {
-        this.form.resetFields()
-        this.visible = false
-      },
-      getGoodsCategory(name = '') {
-        // console.log('暂无接口', name, this.goodsCategory, this.goodsCategoryArr)
-        QueryParaGoodsCategoryInfo({
-          queryItem: name,
-          top: 50
-        }).then((res) => {
-          this.goodsCategory = res.data
-        })
-      },
-      goodsCategorySelect(value) {
-        const index = this.goodsCategoryArr.indexOf(value)
-        debugger
-        this.form.setFieldsValue({
-          goodsCategory: this.goodsCategory[index].goodsCategory || '',
-          goodsCategoryName: this.goodsCategory[index].goodsCategoryName || ''
-        })
-      },
-      goodsCategoryChange(value) {
-        this.getGoodsCategory(value)
-      }
-    }
-  }
-</script>
-<style lang="less" scoped>
-  .line{
-    height: 30px;
-    line-height:30px;
-    text-align: right;
-    font-size: 14px;
-    span{
-      margin-left: 20px;
-    }
-    span:nth-of-type(2){
-      width: 120px;
-      display: inline-block;
-      text-align: left;
-    }
-  }
-</style>
diff --git a/src/views/main/Taskmanage/TaskmanageList/modules/initData.js b/src/views/main/Taskmanage/TaskmanageList/modules/initData.js
index cb20c56..b5c6280 100644
--- a/src/views/main/Taskmanage/TaskmanageList/modules/initData.js
+++ b/src/views/main/Taskmanage/TaskmanageList/modules/initData.js
@@ -10,6 +10,6 @@ export default {
     { field: 'mBlNo', width: 200, title: '提单号', showHeaderOverflow: true, sortable: true },
     { field: 'etd', width: 180, title: '开船日期', showHeaderOverflow: true, sortable: true },
     { field: 'complateDealName', width: 150, title: '完成方式', showHeaderOverflow: true, sortable: true },
-    { field: 'operate', title: '操作', width: 150, noDraggable: true, slots: { default: 'operate' }, fixed: 'right', resizable: false }
+    { field: 'operate', title: '操作', width: 120, noDraggable: true, slots: { default: 'operate' }, fixed: 'right', resizable: false }
   ]
 }