From e75d0e1fb183b8e5383a15d17af07ca87ed018e5 Mon Sep 17 00:00:00 2001
From: lilu <lilu@myshipping.net>
Date: Thu, 10 Nov 2022 12:25:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/main/BookingLedger/detail/index.vue |  22 +-
 .../BookingLedger/detail/modules/billInfo.vue | 285 ++++++++
 .../detail/modules/cargoInfo.vue              | 139 ++++
 .../detail/modules/goodsTable.vue             | 276 ++++++++
 .../detail/modules/mailingInfo.vue            | 610 ++++++++++++++----
 .../detail/modules/remarksInfo.vue            |  47 ++
 .../detail/modules/rightContent.vue           |  17 +
 src/views/tableDemo/index.vue                 |   1 -
 8 files changed, 1285 insertions(+), 112 deletions(-)
 create mode 100644 src/views/main/BookingLedger/detail/modules/billInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modules/cargoInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modules/goodsTable.vue
 create mode 100644 src/views/main/BookingLedger/detail/modules/remarksInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modules/rightContent.vue

diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
index 13e1476..7a6e02e 100644
--- a/src/views/main/BookingLedger/detail/index.vue
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -8,8 +8,18 @@
         <basicInfo></basicInfo>
         <!-- 收发通信息 -->
         <mailingInfo></mailingInfo>
+        <!-- 货物信息 -->
+        <cargoInfo></cargoInfo>
+        <!-- 签单信息 -->
+        <billInfo></billInfo>
+        <!-- 备注信息 -->
+        <remarksInfo></remarksInfo>
+        <!-- 箱型 -->
+        <goodsTable></goodsTable>
+      </a-col>
+      <a-col :span="6">
+        
       </a-col>
-      <a-col :span="6"> </a-col>
     </a-row>
   </div>
 </template>
@@ -17,12 +27,20 @@
 import operationArea from './modules/operationArea'
 import basicInfo from './modules/basicInfo'
 import mailingInfo from './modules/mailingInfo'
+import cargoInfo from './modules/cargoInfo'
+import billInfo from './modules/billInfo'
+import remarksInfo from './modules/remarksInfo'
+import goodsTable from './modules/goodsTable'
 export default {
   name: 'BookingDetail',
   components: {
     operationArea,
     basicInfo,
-    mailingInfo
+    mailingInfo,
+    cargoInfo,
+    billInfo,
+    remarksInfo,
+    goodsTable
   },
   data() {
     return {}
diff --git a/src/views/main/BookingLedger/detail/modules/billInfo.vue b/src/views/main/BookingLedger/detail/modules/billInfo.vue
new file mode 100644
index 0000000..429b290
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/billInfo.vue
@@ -0,0 +1,285 @@
+<template>
+  <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
+    <a-collapse-panel>
+      <template slot="header">
+        <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>签单信息</div>
+      </template>
+      <div class="container bill-info">
+        <a-form :form="form">
+          <a-row :gutter="10">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="签单方式" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入签单方式！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入签单方式"
+                  :filter-option="filterOption"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="签单日期" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-date-picker
+                  format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="签单日期"
+                  v-decorator="['createdTime', { rules: [{ required: false }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="签单地点"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入签单地点！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入签单地点"
+                  :filter-option="filterOption"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="签单代码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-input
+                  placeholder="请输入签单代码！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入签单代码！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="提单份数" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-select default-value="ONE" style="width: 120px" @change="handleChange">
+                  <a-select-option value="ONE">
+                    ONE
+                  </a-select-option>
+                  <a-select-option value="TWO">
+                    TWO
+                  </a-select-option>
+                  <a-select-option value="THREE">
+                    THREE
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="副本份数" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-select default-value="ONE" style="width: 120px" @change="handleChange">
+                  <a-select-option value="ONE">
+                    ONE
+                  </a-select-option>
+                  <a-select-option value="TWO">
+                    TWO
+                  </a-select-option>
+                  <a-select-option value="THREE">
+                    THREE
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="预付地点"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入预付地点！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入预付地点"
+                  :filter-option="filterOption"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="到付地点"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入到付地点！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入到付地点"
+                  :filter-option="filterOption"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="付费方式"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入付费方式！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入付费方式"
+                  :filter-option="filterOption"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="第三付款地"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <a-input
+                  placeholder="请输入第三付款地！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入第三付款地！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="运输条款"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入运输条款！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入运输条款"
+                  :filter-option="filterOption"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item
+                class="from-label"
+                label="冷藏通风量"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+              >
+                <a-input
+                  placeholder="请输入冷藏通风量！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入冷藏通风量！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="设置温度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-input
+                  placeholder="请输入设置温度！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入设置温度！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="温度单位" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-input
+                  placeholder="请输入温度单位！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入温度单位！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="最低温度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-input
+                  placeholder="请输入最低温度！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入最低温度！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="最高温度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-input
+                  placeholder="请输入最高温度！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入最高温度！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-item class="from-label" label="湿度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+                <a-input
+                  placeholder="请输入湿度！"
+                  v-decorator="['code', { rules: [{ required: true, message: '请输入湿度！' }] }]"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+<script>
+import { AutoComplete } from 'ant-design-vue'
+export default {
+  name: '',
+  components: {
+    AutoComplete
+  },
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 13 },
+      },
+      form: this.$form.createForm(this),
+      dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
+    }
+  },
+  created() {},
+  methods: {
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.collapse-box{
+  margin-bottom: 10px;
+  background: #fff;
+}
+.base-tit {
+  font-size: 14px;
+  font-weight: 600;
+  color: #666;
+  position: relative;
+  height: 40px;
+  line-height: 40px;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 30px;
+    background: #1ebcd5;
+    top: 6px;
+    left: -10px;
+  }
+  i {
+    margin-right: 10px;
+    font-weight: 500;
+  }
+}
+
+</style>
diff --git a/src/views/main/BookingLedger/detail/modules/cargoInfo.vue b/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
new file mode 100644
index 0000000..a96bd35
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
@@ -0,0 +1,139 @@
+<template>
+  <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
+    <a-collapse-panel>
+      <template slot="header">
+        <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>货物信息</div>
+      </template>
+      <div class="container cargo-info">
+        <a-row :gutter="20">
+          <a-col :span="8">
+            <div class="tit">
+              <div>Seal No.(封志号)</div>
+              <div>Marks & Nos.(标记与号码)</div>
+            </div>
+            <div class="bottom">
+              <a-textarea class="input-box" placeholder="请输入内容" v-model="sealNo" />
+            </div>
+          </a-col>
+          <a-col :span="16">
+            <div class="line">
+              <div class="left">
+                <div>Description of Goods</div>
+                <div>(包装种类与货名)</div>
+              </div>
+              <div class="input">
+                <div>货物标志</div>
+                <a-select default-value="R" style="width: 120px">
+                  <a-select-option value="S"> S 普通货 </a-select-option>
+                  <a-select-option value="R"> R 冻柜 </a-select-option>
+                  <a-select-option value="D"> D 危险品 </a-select-option>
+                </a-select>
+              </div>
+              <div class="input">
+                <div>HS编码</div>
+                <a-input placeholder="请输入HS编码" v-model="HSinput" />
+              </div>
+            </div>
+            <div class="bottom">
+              <a-textarea class="input-box" placeholder="请输入内容" v-model="sealNo" />
+            </div>
+          </a-col>
+          <a-col class="num-box" :span="24">
+						<span class="label">件数大写: </span>
+						<a-input class="input-val" placeholder="请输入件数大写" v-model="HSinput" />
+          </a-col>
+        </a-row>
+      </div>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+<script>
+export default {
+  name: '',
+  data() {
+    return {
+      sealNo: '',
+      HSinput: '',
+    }
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less" scoped>
+.collapse-box{
+  margin-bottom: 10px;
+  background: #fff;
+}
+.base-tit {
+  font-size: 14px;
+  font-weight: 600;
+  color: #666;
+  position: relative;
+  height: 40px;
+  line-height: 40px;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 30px;
+    background: #1ebcd5;
+    top: 6px;
+    left: -10px;
+  }
+  i {
+    margin-right: 10px;
+    font-weight: 500;
+  }
+}
+.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;
+    display: inline-block;
+    width: 170px;
+  }
+
+  .input {
+    text-align: left;
+    display: inline-block;
+    flex: 1;
+  }
+  .input-box {
+    height: 200px;
+  }
+	.num-box{
+		display: flex;
+		height: 30px;
+		margin-top: 15px;
+	}
+	.label{
+		width: 80px;
+		height: 30px;
+		line-height: 30px;
+		font-size: 14px;
+	}
+	.input-val{
+		flex:1;
+	}
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modules/goodsTable.vue b/src/views/main/BookingLedger/detail/modules/goodsTable.vue
new file mode 100644
index 0000000..6ed45cc
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/goodsTable.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="goods-table">
+    <x-card>
+      <div slot="content">
+        <div class="from-line">
+          <div class="left">
+            <a-button class="btn" type="primary" @click="addboxLine">添加</a-button>
+            <a-button class="btn" type="primary">删除</a-button>
+            <a-button class="btn" type="primary" @click="openDialog">多品名</a-button>
+            <a-button class="btn" type="primary">引入场站数据</a-button>
+            <a-button class="btn" type="primary">引入箱皮重</a-button>
+          </div>
+          <div class="table-right">
+            <span>合计: 123</span>
+            <span>重量: 123</span>
+            <span>件数: 123</span>
+            <span>尺码: 123</span>
+          </div>
+        </div>
+        <div>
+          <ve-table
+            rowKeyFieldName="rowKey"
+            :fixed-header="true"
+            :columns="editColumnsData"
+            :table-data="tableData"
+            :editOption="editOption"
+            :rowStyleOption="rowStyleOption"
+            border-y
+          />
+        </div>
+      </div>
+    </x-card>
+  </div>
+</template>
+  <script>
+import { XCard } from '@/components'
+export default {
+  name: '',
+  components: {
+    XCard,
+  },
+  data() {
+    return {
+      editColumnsData: [
+        // {
+        //   field: '',
+        //   key: 'checkbox',
+        //   type: 'checkbox',
+        //   title: '序号',
+        //   width: 50,
+        //   operationColumn: true,
+        //   align: 'center',
+        // },
+        {
+          field: '',
+          key: 'a',
+          title: '',
+          width: 50,
+          align: 'center',
+          operationColumn: true,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return ++rowIndex
+          },
+        },
+        {
+          field: 'boxType',
+          key: 'boxType',
+          title: '箱型',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'case',
+          key: 'case ',
+          title: '箱量',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'boxNum',
+          key: 'boxNum',
+          title: '箱号',
+          align: 'right',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'title',
+          key: 'title',
+          title: '封号',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'number',
+          key: 'number',
+          title: '件数',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'packing',
+          key: 'packing',
+          title: '包装',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'weight',
+          key: 'weight',
+          title: '重量',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'size',
+          key: 'size',
+          title: '尺码',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'tareWeight',
+          key: 'tareWeight',
+          title: '箱皮重',
+          align: 'left',
+          width: '8%',
+          edit: true,
+        },
+        {
+          field: 'weighType',
+          key: 'weighType',
+          title: '称重方式',
+          align: 'left',
+          edit: true,
+        },
+        {
+          field: 'weighingWeight',
+          key: 'weighingWeight',
+          title: '称重重量',
+          align: 'left',
+          edit: true,
+        },
+      ],
+      tableData: [
+        {
+          boxType: '40GP',
+          case: '40Lp',
+          boxNum: '32',
+          title: '封号',
+          number: 1,
+          packing: '包装',
+          weight: '60KG',
+          size: 'L',
+          tareWeight: '2KG',
+          weighType: '称重方式',
+          weighingWeight: '称重重量',
+        },
+        {
+          boxType: '40GP',
+          case: '40Lp',
+          boxNum: '32',
+          title: '封号',
+          number: 1,
+          packing: '包装',
+          weight: '60KG',
+          size: 'L',
+          tareWeight: '2KG',
+          weighType: '称重方式',
+          weighingWeight: '称重重量',
+        },
+        {
+          boxType: '40GP',
+          case: '40Lp',
+          boxNum: '32',
+          title: '封号',
+          number: 1,
+          packing: '包装',
+          weight: '60KG',
+          size: 'L',
+          tareWeight: '2KG',
+          weighType: '称重方式',
+          weighingWeight: '称重重量',
+        },
+        {
+          boxType: '40GP',
+          case: '40Lp',
+          boxNum: '32',
+          title: '封号',
+          number: 1,
+          packing: '包装',
+          weight: '60KG',
+          size: 'L',
+          tareWeight: '2KG',
+          weighType: '称重方式',
+          weighingWeight: '称重重量',
+        },
+        {
+          boxType: '40GP',
+          case: '40Lp',
+          boxNum: '32',
+          title: '封号',
+          number: 1,
+          packing: '包装',
+          weight: '60KG',
+          size: 'L',
+          tareWeight: '2KG',
+          weighType: '称重方式',
+          weighingWeight: '称重重量',
+        },
+      ],
+      editOption: {
+        beforeCellValueChange: ({ row, column, changeValue }) => {
+          console.log('beforeCellValueChange')
+          console.log('row::', row)
+          console.log('column::', column)
+          console.log('changeValue::', changeValue)
+
+          console.log('---')
+
+          if (column.field === 'number' && !/^\d+$/.test(changeValue)) {
+            alert('请输入数字')
+            return false
+          }
+        },
+        afterCellValueChange: ({ row, column, changeValue }) => {
+          console.log('afterCellValueChange')
+          console.log('row::', row)
+          console.log('column::', column)
+          console.log('changeValue::', changeValue)
+          console.log('---')
+        },
+      },
+      // 可控单元格编辑
+      rowStyleOption: {
+        clickHighlight: false,
+        hoverHighlight: false,
+      },
+    }
+  },
+  created() {},
+  methods: {
+    addboxLine() {},
+    openDialog() {},
+  },
+}
+</script>
+  <style lang="less">
+.from-line {
+  display: flex;
+  margin: 20px 0;
+  .left {
+    flex: 1;
+    text-align: left;
+    .btn {
+      margin-right: 10px;
+    }
+  }
+  .table-right {
+    line-height: 28px;
+    font-size: 14px;
+    span {
+      margin-left: 10px;
+      color: #666;
+      font-weight: 600;
+    }
+  }
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index 772bc98..45841a9 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -1,115 +1,488 @@
 <template>
-  <div>
-    <a-collapse default-active-key="1" :bordered="false" expandIconPosition="right">
-      <a-collapse-panel>
-        <template slot="header">
-          <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
-        </template>
-        <div class="mail-info">
-          <a-row :gutter="10">
-            <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
-              <div class="sender">
-                <div class="top">
-                  <div class="name"><span class="iconfont icon-bianji"></span>发货人 </div>
-                  <auto-complete
-                    v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
-                    :data-source="dataSource"
-                    option-label-prop="title"
-                    placeholder="请输入船名"
-                    :filter-option="filterOption"
-                  />
-                  <a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
-                  <div class="right">
-                    <span class="btn-circle">*</span>
-                    <span class="btn" @click="changeCode(35)">35</span>
-                    <span class="btn" @click="changeCode(40)">40</span>
-                    <span class="btn" @click="changeCode(50)">50</span>
-                  </div>
+  <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right">
+    <a-collapse-panel>
+      <template slot="header">
+        <div class="base-tit"><i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息</div>
+      </template>
+      <div class="mail-info">
+        <a-row :gutter="10">
+          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <div class="sender">
+              <div class="top">
+                <div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入船名"
+                  :filter-option="filterOption"
+                />
+                <a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
+                <div class="right">
+                  <span class="btn-circle">*</span>
+                  <span class="btn" @click="changeCode(35)">35</span>
+                  <span class="btn" @click="changeCode(40)">40</span>
+                  <span class="btn" @click="changeCode(50)">50</span>
                 </div>
-                <div class="bottom">
-                  <a-textarea
-                    v-model="senderInfo"
-                    placeholder="Autosize height with minimum and maximum number of lines"
-                    :auto-size="{ minRows: 2, maxRows: 6 }"
-										style="height:100px;"
-                  />
-                  <div class="line-count">
-                    <template v-for="(num, index) in senderInfo.split('\n')">
-                      <div :key="index">{{ num.length }}</div>
-                    </template>
-                  </div>
+              </div>
+              <div class="bottom">
+                <a-textarea
+                  v-model="senderInfo"
+                  placeholder="Autosize height with minimum and maximum number of lines"
+                  :auto-size="{ minRows: 2, maxRows: 6 }"
+                  style="height: 130px"
+                />
+                <div class="line-count">
+                  <template v-for="(num, index) in senderInfo.split('\n')">
+                    <div :key="index">{{ num.length }}</div>
+                  </template>
                 </div>
               </div>
-							<div class="sender">
-                <div class="top">
-                  <div class="name"><span class="iconfont icon-bianji"></span>发货人 </div>
-                  <auto-complete
-                    v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
-                    :data-source="dataSource"
-                    option-label-prop="title"
-                    placeholder="请输入船名"
-                    :filter-option="filterOption"
-                  />
-                  <a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
-                  <div class="right">
-                    <span class="btn-circle">*</span>
-                    <span class="btn" @click="changeCode(35)">35</span>
-                    <span class="btn" @click="changeCode(40)">40</span>
-                    <span class="btn" @click="changeCode(50)">50</span>
-                  </div>
+            </div>
+            <div class="consignee">
+              <div class="top">
+                <div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入船名"
+                  :filter-option="filterOption"
+                />
+                <a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
+                <div class="right">
+                  <span class="btn-circle">*</span>
+                  <span class="btn" @click="changeCode(35)">35</span>
+                  <span class="btn" @click="changeCode(40)">40</span>
+                  <span class="btn" @click="changeCode(50)">50</span>
                 </div>
-                <div class="bottom">
-                  <a-textarea
-                    v-model="senderInfo"
-                    placeholder="Autosize height with minimum and maximum number of lines"
-                    :auto-size="{ minRows: 2, maxRows: 6 }"
-										style="height:100px;"
-                  />
-                  <div class="line-count">
-                    <template v-for="(num, index) in senderInfo.split('\n')">
-                      <div :key="index">{{ num.length }}</div>
-                    </template>
-                  </div>
+              </div>
+              <div class="bottom">
+                <a-textarea
+                  v-model="senderInfo"
+                  placeholder="Autosize height with minimum and maximum number of lines"
+                  :auto-size="{ minRows: 2, maxRows: 6 }"
+                  style="height: 130px"
+                />
+                <div class="line-count">
+                  <template v-for="(num, index) in senderInfo.split('\n')">
+                    <div :key="index">{{ num.length }}</div>
+                  </template>
                 </div>
               </div>
-							<div class="sender">
-                <div class="top">
-                  <div class="name"><span class="iconfont icon-bianji"></span>发货人 </div>
-                  <auto-complete
-                    v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
-                    :data-source="dataSource"
-                    option-label-prop="title"
-                    placeholder="请输入船名"
-                    :filter-option="filterOption"
-                  />
-                  <a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
-                  <div class="right">
-                    <span class="btn-circle">*</span>
-                    <span class="btn" @click="changeCode(35)">35</span>
-                    <span class="btn" @click="changeCode(40)">40</span>
-                    <span class="btn" @click="changeCode(50)">50</span>
-                  </div>
+            </div>
+            <div class="notifier">
+              <div class="top">
+                <div class="name"><span class="iconfont icon-bianji"></span>发货人</div>
+                <auto-complete
+                  v-decorator="['name', { rules: [{ required: true, message: '请输入船名！' }] }]"
+                  :data-source="dataSource"
+                  option-label-prop="title"
+                  placeholder="请输入船名"
+                  :filter-option="filterOption"
+                />
+                <a-button class="save-btn" type="link" size="small" icon="save">保存</a-button>
+                <div class="right">
+                  <span class="btn-circle">*</span>
+                  <span class="btn" @click="changeCode(35)">35</span>
+                  <span class="btn" @click="changeCode(40)">40</span>
+                  <span class="btn" @click="changeCode(50)">50</span>
                 </div>
-                <div class="bottom">
-                  <a-textarea
-                    v-model="senderInfo"
-                    placeholder="Autosize height with minimum and maximum number of lines"
-                    :auto-size="{ minRows: 2, maxRows: 6 }"
-										style="height:100px;"
-                  />
-                  <div class="line-count">
-                    <template v-for="(num, index) in senderInfo.split('\n')">
-                      <div :key="index">{{ num.length }}</div>
-                    </template>
-                  </div>
+              </div>
+              <div class="bottom">
+                <a-textarea
+                  v-model="senderInfo"
+                  placeholder="Autosize height with minimum and maximum number of lines"
+                  :auto-size="{ minRows: 2, maxRows: 6 }"
+                  style="height: 130px"
+                />
+                <div class="line-count">
+                  <template v-for="(num, index) in senderInfo.split('\n')">
+                    <div :key="index">{{ num.length }}</div>
+                  </template>
                 </div>
               </div>
-            </a-col>
-          </a-row>
-        </div>
-      </a-collapse-panel>
-    </a-collapse>
-  </div>
+            </div>
+          </a-col>
+          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <a-form :form="form">
+              <a-row :gutter="16">
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="场站"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <div style="display: flex">
+                      <auto-complete
+                        style="flex: 1"
+                        v-decorator="['name', { rules: [{ required: true, message: '请输入场站！' }] }]"
+                        :data-source="dataSource"
+                        option-label-prop="title"
+                        placeholder="请输入场站"
+                        :filter-option="filterOption"
+                      />
+                      <i class="iconfont icon-touxiang" style="margin: 0 4px"></i>
+                      <i class="iconfont icon-bianji1"></i>
+                    </div>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="报关行"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入报关行"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入报关行！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="车队"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入车队"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入车队！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="国外代理"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入国外代理"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入国外代理！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="预抵日期"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-date-picker
+                      format="YYYY-MM-DD HH:mm:ss"
+                      placeholder="预抵日期"
+                      v-decorator="['createdTime', { rules: [{ required: false }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="截港时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-date-picker
+                      format="YYYY-MM-DD HH:mm:ss"
+                      placeholder="截港时间"
+                      v-decorator="['createdTime', { rules: [{ required: false }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="截单时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-date-picker
+                      format="YYYY-MM-DD HH:mm:ss"
+                      placeholder="截单时间"
+                      v-decorator="['createdTime', { rules: [{ required: false }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="VGM时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-date-picker
+                      format="YYYY-MM-DD HH:mm:ss"
+                      placeholder="VGM时间"
+                      v-decorator="['createdTime', { rules: [{ required: false }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="装货港"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入装货港！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入装货港"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="装货港代码"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入装货港代码"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入装货港代码！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="中转港"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入中转港！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入中转港"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="中转港代码"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入中转港代码"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入中转港代码！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="卸货港"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入卸货港！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入卸货港"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="卸货港代码"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入卸货港代码"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入卸货港代码！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="目的地"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入目的地！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入目的地"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="目的代码"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入目的代码"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入目的代码！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="交货地"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入交货地！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入交货地"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="交货代码"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入交货代码"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入交货代码！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="收货地"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入收货地！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入收货地"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="收货代码"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入收货代码"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入收货代码！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="件数"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入件数"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入件数！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="包装"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <auto-complete
+                      v-decorator="['name', { rules: [{ required: true, message: '请输入包装！' }] }]"
+                      :data-source="dataSource"
+                      option-label-prop="title"
+                      placeholder="请输入包装"
+                      :filter-option="filterOption"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="毛重"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入毛重"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入毛重！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    class="from-label"
+                    label="尺寸"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                  >
+                    <a-input
+                      placeholder="请输入尺寸"
+                      v-decorator="['paramName', { rules: [{ required: true, message: '请输入尺寸！' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </a-form>
+          </a-col>
+        </a-row>
+      </div>
+    </a-collapse-panel>
+  </a-collapse>
 </template>
   <script>
 import { XCard } from '@/components'
@@ -123,6 +496,17 @@ export default {
     return {
       dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
       senderInfo: 'Hope has always been like a young man, clean and pure.',
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 13 },
+      },
     }
   },
   methods: {
@@ -178,6 +562,10 @@ ${newStr.slice(split)}`
 }
 </script>
 <style lang="less" scoped>
+.collapse-box{
+  margin-bottom: 10px;
+  background: #fff;
+}
 .base-tit {
   font-size: 14px;
   font-weight: 600;
@@ -200,18 +588,19 @@ ${newStr.slice(split)}`
   }
 }
 .sender,
-.consignee {
+.consignee,
+.notifier {
   margin-bottom: 20px;
   .top {
-		margin-bottom: 15px;
+    margin-bottom: 15px;
     .name {
-			display: inline-block;
+      display: inline-block;
       font-size: 13px;
       margin-right: 10px;
-			color: #666;
+      color: #666;
       .iconfont {
         margin-right: 4px;
-				font-weight: 600;
+        font-weight: 600;
       }
     }
     .save-btn {
@@ -245,8 +634,8 @@ ${newStr.slice(split)}`
       font-size: 12px;
       margin-right: 4px;
       cursor: pointer;
-			margin-top: 2px;
-    	vertical-align: top;
+      margin-top: 2px;
+      vertical-align: top;
     }
   }
   .bottom {
@@ -272,4 +661,7 @@ ${newStr.slice(split)}`
     }
   }
 }
+.from-label {
+  margin-bottom: 10px;
+}
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/remarksInfo.vue b/src/views/main/BookingLedger/detail/modules/remarksInfo.vue
new file mode 100644
index 0000000..c04d0b6
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/remarksInfo.vue
@@ -0,0 +1,47 @@
+<template>
+  <x-card class="ramark-box">
+    <div slot="content">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="tit"><span class="iconfont icon-bianji"></span>订舱备注</div>
+          <a-textarea class="input-box" placeholder="请输入内容" v-model="remarks" />
+        </a-col>
+        <a-col :span="12">
+          <div class="tit"><span class="iconfont icon-bianji"></span>截单备注</div>
+          <a-textarea class="input-box" placeholder="请输入内容" v-model="remarks" />
+        </a-col>
+      </a-row>
+    </div>
+  </x-card>
+</template>
+<script>
+import { XCard } from '@/components'
+export default {
+  name: '',
+  components: {
+    XCard,
+  },
+  data() {
+    return {
+      remarks: '',
+    }
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less">
+.tit {
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #666;
+  .iconfont {
+    margin-right: 4px;
+    font-weight: 600;
+  }
+}
+.ramark-box{
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modules/rightContent.vue b/src/views/main/BookingLedger/detail/modules/rightContent.vue
new file mode 100644
index 0000000..aa3c856
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/rightContent.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="right-box">
+    
+  </div>
+</template>
+  <script>
+export default {
+  name: '',
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {},
+}
+</script>
+  <style lang="less">
+</style>
diff --git a/src/views/tableDemo/index.vue b/src/views/tableDemo/index.vue
index 9fd23ab..ec5c5af 100644
--- a/src/views/tableDemo/index.vue
+++ b/src/views/tableDemo/index.vue
@@ -503,7 +503,6 @@ export default {
           edit: true
         }
       ],
-      // table data
       tableData: [
         {
           name: 'John',