【托书】列表页，新增、详情、编辑抽屉 + 原始TODO --> 改为todo

src/mixins/JeecgListMixin.js

@@ -130,7 +130,7 @@ export const JeecgListMixin = {
       return filterObj(param)
     },
     getQueryField() {
-      // TODO: 字段权限控制
+      // todo: 字段权限控制
       var str = 'id,'
       this.columns.forEach(function(value) {
         str += ',' + value.dataIndex
@@ -237,7 +237,7 @@ export const JeecgListMixin = {
     },
     handleTableChange(pagination, filters, sorter) {
       // 分页、排序、筛选变化时触发
-      // TODO: 筛选
+      // todo: 筛选
       console.log(pagination)
       if (Object.keys(sorter).length > 0) {
         this.isorter.column = sorter.field

src/views/book/addBookDrawer.vue

@@ -0,0 +1,631 @@
+<template>
+  <!-- 新增托书  -->
+  <div id="addBookDrawer">
+    <a-drawer
+      title="新增托书"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel">
+      <!-- 主表信息 填写 为什么原先图部分回显？？-->
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="addBook" :rules="validatorRules">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书日期" prop="bookDate">
+                  <a-date-picker
+                    placeholder="请选择托书日期"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="addBook.bookDate"
+                  />
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书号" prop="bookNum">
+                  <a-input placeholder="请输入托书号" v-model="addBook.bookNum"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="12" :sm="12">
+                <a-form-model-item label="外销发票号码" prop="exportInvoiceNo">
+                  <a-input placeholder="请输入外销发票号码" v-model="addBook.exportInvoiceNo"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="经营单位" prop="businessUnit">
+                  <a-input placeholder="请输入经营单位" v-model="addBook.businessUnit"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="经营单位地址" prop="businessUnitAdd">
+                  <a-select placeholder="请选择经营单位地址" v-model="addBook.businessUnitAdd">
+                    <a-select-option value="">请选择</a-select-option>
+                    <a-select-option :value="0">客户1</a-select-option>
+                    <a-select-option :value="1">客户2</a-select-option>
+                    <a-select-option :value="2">客户3</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="装运期限" prop="latestShipmentDate">
+                  <a-date-picker
+                    placeholder="请选择装运期限"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="addBook.latestShipmentDate"
+                  />
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="最终船期" prop="finalShipDate">
+                  <a-input placeholder="请输入最终船期" v-model="addBook.finalShipDate"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收货人" prop="consignee">
+                  <a-input placeholder="请输入收货人" v-model="addBook.consignee"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收货人地址" prop="consigneeAdd">
+                  <a-select placeholder="请选择收货人地址" v-model="addBook.consigneeAdd">
+                    <a-select-option value="">请选择</a-select-option>
+                    <a-select-option value="0">收货人1</a-select-option>
+                    <a-select-option value="1">收货人2</a-select-option>
+                    <a-select-option value="2">收货人3</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="通知方" prop="notifying">
+                  <a-input placeholder="请输入通知方" v-model="addBook.notifying"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="通知方地址" prop="notifyingAdd">
+                  <a-input placeholder="请输入通知方地址" v-model="addBook.notifyingAdd"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="贸易国别" prop="tradeCountry">
+                  <a-input placeholder="请输入贸易国别" v-model="addBook.tradeCountry"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="运抵国别" prop="arriveCountry">
+                  <a-input placeholder="请输入运抵国别" v-model="addBook.arriveCountry"></a-input>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="出口口岸" prop="exportPort">
+                  <a-input placeholder="请输入出口口岸" v-model="addBook.exportPort"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="目的港" prop="destinationport">
+                  <a-input placeholder="请输入目的港" v-model="addBook.destinationport"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收汇方式" prop="collectionMethod">
+                  <a-input placeholder="请输入收汇方式" v-model="addBook.collectionMethod"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="成交方式" prop="soldType">
+                  <a-input placeholder="请输入成交方式" v-model="addBook.soldType"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="金额" prop="money">
+                  <a-input placeholder="请输入金额" v-model="addBook.money"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="人民币" prop="RMB">
+                  <a-input placeholder="请输入人民币" v-model="addBook.RMB"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="美元" prop="dollar">
+                  <a-input placeholder="请输入美元" v-model="addBook.dollar"></a-input>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
+
+      <!--操作按钮区域 参照装箱单  増行-->
+      <a-card :bordered="true" style="margin:10px 0  40px 0;">
+        <div class="table-operator">
+          <a-button type="primary" @click="referPackingList" icon="ordered-list">参照装箱单</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
+
+        <!-- 子表-->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              :row-key="record => record.id"
+              :columns="addBookColumns"
+              :data-source="addBookData"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+              :footer="addBookFooterShow"
+            >
+              <!-- 集装箱代号 输入框 -->
+              <template slot="containerCode" slot-scope="text, record, index">
+                <a-form-model-item prop="containerCode" :rules="rules.containerCode" required>
+                  <a-input style="width:100%" type="text" v-model="record.containerCode" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 集装箱号 输入框-->
+              <template slot="containerNo" slot-scope="text, record, index">
+                <a-form-model-item prop="containerNo" :rules="rules.containerNo">
+                  <a-input style="width:100%" type="text" v-model="record.containerNo" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 操作 -->
+              <span slot="operationSlot" slot-scope="text, record">
+                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                  <a href="javascript:void(0);" style="color:red;">删除</a>
+                </a-popconfirm>
+              </span>
+            </a-table>
+          </a-form-model>
+
+          <!-- 人民币、美金 -->
+          <a-row style="margin:60px 0;">
+            <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
+              <h6 class="table-title">人民币</h6>
+              <a-table
+                :row-key="record => record.id"
+                :loading="loading"
+                :columns="CNYColumns"
+                :data-source="CNYData"
+                bordered
+                :pagination="false"
+              >
+                <!-- CNY项目列 -->
+                <template slot="CNYProjectList" slot-scope="text, record, index">
+                  <a-form-model-item prop="CNYProjectList" :rules="rules.CNYProjectList">
+                    <a-select v-model="record.CNYProjectList" style="width:100%">
+                      <a-select-option :value="1">项目列1</a-select-option>
+                      <a-select-option :value="2">项目列2</a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </template>
+              </a-table>
+            </div>
+
+            <div class="purchase-order-table" style="width:48%;float:right;">
+              <h6 class="table-title">美金</h6>
+              <a-table
+                :row-key="record => record.id"
+                :loading="loading"
+                :columns="USDColumns"
+                :data-source="USDData"
+                bordered
+                :pagination="false"
+              >
+                <!-- USD项目列 -->
+                <template slot="USDProjectList" slot-scope="text, record, index">
+                  <a-form-model-item prop="USDProjectList" :rules="rules.USDProjectList">
+                    <a-select v-model="record.USDProjectList" style="width:100%">
+                      <a-select-option :value="1">项目列1</a-select-option>
+                      <a-select-option :value="2">项目列2</a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </template>
+              </a-table>
+            </div>
+          </a-row>
+        </a-spin>
+      </a-card>
+
+      <!-- 页面底部保存取消 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1
+        }"
+      >
+        <a-popconfirm title="确定放弃新增？" @confirm="handleCancel" okText="确定" cancelText="取消">
+          <a-button :style="{ marginRight: '8px' }">取消</a-button>
+        </a-popconfirm>
+        <a-button type="primary" @click="submitAdd">
+          提交
+        </a-button>
+      </div>
+    </a-drawer>
+    <!-- 参照装箱单 -->
+    <packingList-modal ref="packingListModal" :father="aa" @ok="modalFormOk"></packingList-modal>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+import packingListModal from '@views/book/packingListModal.vue'
+
+export default {
+  name: 'AddBookDrawer', // 新增 托书
+  mixins: [JeecgListMixin],
+  components: { packingListModal, JEllipsis, moment }, // 参照装箱单 弹框
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
+    return {
+      // 表头
+      addBookColumns: [
+        {
+          title: '英文名称',
+          dataIndex: 'englishName',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '小po号',
+          dataIndex: 'smallPoNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '箱数',
+          dataIndex: 'boxedNum',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '毛重',
+          dataIndex: 'roughWeigh',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '净重',
+          dataIndex: 'suttle',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '体积',
+          dataIndex: 'volume',
+          width: 160,
+          className: 'replacecolor'
+        },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          customRender: t => ellipsis(t),
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '集装箱代号',
+          dataIndex: 'containerCode',
+          width: 120,
+          scopedSlots: { customRender: 'containerCode' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '集装箱号',
+          dataIndex: 'containerNo',
+          width: 120,
+          scopedSlots: { customRender: 'containerNo' },
+          className: 'replacecolor'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          width: 120,
+          className: 'replacecolor'
+        },
+        //         {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '预发货日期',
+          dataIndex: 'scheduledShipDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '业务部门',
+          dataIndex: 'operatingDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '采购/委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 160,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '采购/委外工厂',
+          dataIndex: 'purchaseAboardFactory',
+          width: 160,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 160,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      addBookData: [{ englishName: 'morningFresh', styleNum: 'MWBBW2068', quantity: '1200', boxedNum: '588' }, {}],
+      CNYColumns: [
+        {
+          title: '货代',
+          dataIndex: 'CNYfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'CNYmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'CNYProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'CNYProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      CNYData: [{ CNYmoney: '487576,87' }],
+      USDColumns: [
+        {
+          title: '货代',
+          dataIndex: 'USDfreighForward',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'USDmoney',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'USDProjectList',
+          width: 90,
+          scopedSlots: { customRender: 'USDProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      USDData: [{}],
+      loading: false, // 表格加载
+      addBook: {},
+      confirmLoading: false,
+      visible: false,
+      dateFormat: 'YYYY-MM-DD',
+      validatorRules: {
+        bookDate: [{ required: true, message: '托书日期不能为空', trigger: 'blur' }]
+        // 确定必填项
+      }
+    }
+  },
+  created() {},
+  methods: {
+    // 参照装箱单
+    referPackingList() {
+      console.log('打开参照装箱单')
+      this.$refs.packingListModal.packingListModVis = true
+    },
+    // 増行
+    handleAddColumn() {
+      console.log('増行')
+
+      const addrow = {
+        englishName: '',
+        styleNum: '',
+        smallPoNum: '',
+        quantity: '',
+        boxedNum: '',
+        roughWeigh: '',
+        suttle: '',
+        volume: '',
+        distributionPoint: '',
+        containerCode: '',
+        containerNo: '',
+        price: '',
+        scheduledShipDate: '',
+        salesman: '',
+        operatingDepartment: '',
+        purchaseAboardOrderNum: '',
+        purchaseAboardFactory: '',
+        operation: ''
+      }
+
+      this.addBookData.push(addrow)
+    },
+
+    // 新增托书 子表合计
+    addBookFooterShow(data) {
+      console.log('新增托书 子表 ----合计行')
+      console.log('data', data)
+      return (
+        <a-table
+          rowKey={Math.random}
+          bordered={false}
+          pagination={false}
+          columns={this.addBookColumns}
+          dataSource={this.addBookFooterDataSource || []}
+          showHeader={false}
+        ></a-table>
+      )
+    },
+
+    // 操作 删除
+    handleDelete(id) {
+      console.log('id:', id)
+    },
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+    // 抽屉 提交
+    submitAdd() {
+      console.log('保存新增、刷新托书')
+      const that = this
+      // 触发表单验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          that.confirmLoading = true
+        }
+      })
+      this.close()
+      // this.getShipmentList() // 刷新托书列表
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+
+    // ------------------------------------------
+    modalFormOk() {},
+    aa() {}
+    // // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   this.getAnnList()
+    // }
+  },
+
+  // 出现滚动条，合计栏跟随 table 滚动
+  watch: {
+    dataSource(val) {
+      console.log(val)
+      // 同步表与footer滚动
+      let dom = this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[0]
+      dom.addEventListener(
+        'scroll',
+        () => {
+          this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[1].scrollLeft = dom.scrollLeft
+          console.log('走到这')
+        },
+        true
+      )
+    }
+  },
+  // 构建合计数据 --合计
+  // TODO:合计行 有滚动待解决
+  computed: {
+    addBookFooterDataSource() {
+      // 新增托书  子表 合计
+      const total = Object.assign({}, this.addBookData[0])
+      for (const attr in total) {
+        total[attr] = '合计'
+        break
+      }
+      return [total]
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
+/deep/ .ant-table-footer .ant-table.body {
+  // overflow: hidden !important;
+}
+/deep/ .ant-table.ant-table-bordered .ant-table-footer {
+  border: none;
+  padding: 0;
+}
+</style>

src/views/book/book-list.vue

@@ -0,0 +1,320 @@
+<template>
+  <!-- 预托书列表 -->
+  <div id="preBookList">
+    <!-- 查询区域 -->
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单号">
+                <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单日期" has-feedback>
+                <a-date-picker style="width: 100%" v-model="queryParam.orderDate"> </a-date-picker>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="客户简称">
+                <a-input placeholder="请输入客户简称" v-model="queryParam.customerShortName"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <template v-if="toggleSearchStatus">
+              <a-col :md="6" :sm="8">
+                <a-form-item label="箱号">
+                  <a-input placeholder="请输入箱号" v-model="queryParam.boxNo"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="小po号">
+                  <a-input placeholder="请输入小po号" v-model="queryParam.smallPo"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="托书号">
+                  <a-input placeholder="请输入托书号" v-model="queryParam.preBookNum"></a-input>
+                </a-form-item>
+              </a-col>
+            </template>
+            <a-col :md="6" :sm="8">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+                </a>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-card>
+
+    <!-- 操作按钮区域 新增-->
+    <a-card :bordered="false" style="marginTop:10px;">
+      <div class="table-operator">
+        <a-button type="primary" @click="addBookDrawer" icon="plus">新增</a-button>
+      </div>
+
+      <!-- 子表 -->
+      <a-table
+        bordered
+        :row-key="record => record.id"
+        :columns="bookListColumns"
+        :data-source="bookListData"
+        :loading="loading"
+        :pagination="ipagination"
+        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        @change="handleTableChange"
+        :scroll="{ x: 1500 }"
+      >
+        <!-- 金额 输入框-->
+        <template slot="money" slot-scope="text, record, index">
+          <a-form-model-item prop="money" :rules="rules.money" required>
+            <a-input style="width:100%" type="text" v-model="record.money" />
+          </a-form-model-item>
+        </template>
+
+        <!-- 单据状态 -->
+        <span slot="documentStateSlot">
+          <a-tag color="#2db7f5">保存</a-tag>
+        </span>
+        <!-- if  已提交 -->
+        <!-- <span slot="documentStateSlot">
+          <a-tag color="#2db7f5">已提交</a-tag>
+        </span> -->
+
+        <!-- 操作 -->
+        <span slot="operationSlot" slot-scope="text, record">
+          <a @click="settlementExinvoicePrint(record)" style="color:green;">结汇发票打印</a>
+          <a-divider type="vertical" />
+
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
+            <a-menu slot="overlay">
+              <a-menu-item><a @click="submit(record)">提交</a></a-menu-item>
+              <a-menu-item><a @click="details(record)">详情</a></a-menu-item>
+              <a-menu-item><a @click="edit(record)">编辑</a></a-menu-item>
+              <a-menu-item><a @click="print(record)">打印</a></a-menu-item>
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                  <a href="javascript:void(0);" style="color:red;">删除</a>
+                </a-popconfirm></a-menu-item
+              >
+            </a-menu>
+          </a-dropdown>
+        </span>
+      </a-table>
+    </a-card>
+
+    <!-- 抽屉 -->
+    <addBook-drawer ref="addBookDrawer" :father="aa" @ok="modalFormOk"></addBook-drawer>
+    <detailsBook-drawer ref="detailsBookDrawer" :father="bb" @ok="modalFormOk"></detailsBook-drawer>
+    <editBook-drawer ref="editBookDrawer" :father="cc" @ok="modalFormOk"></editBook-drawer>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+import addBookDrawer from '@views/book/addBookDrawer.vue'
+import detailsBookDrawer from '@views/book/detailsBookDrawer.vue'
+import editBookDrawer from '@views/book/editBookDrawer.vue'
+
+export default {
+  name: 'BookList', // 托书列表
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment, addBookDrawer, detailsBookDrawer, editBookDrawer },
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
+    return {
+      // 表头
+      bookListColumns: [
+        { title: '托书号', width: 120, dataIndex: 'bookNum', fixed: 'left', className: 'replacecolor' },
+        { title: '订单号', width: 120, dataIndex: 'orderNum', fixed: 'left', className: 'replacecolor' },
+        { title: '外销发票号码', dataIndex: 'exportInvoiceNo', width: 120, className: 'replacecolor' },
+        { title: '客户简称', dataIndex: 'customerShortName', width: 120, className: 'replacecolor' },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          width: 120,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '经营单位',
+          dataIndex: 'unitOperation',
+          width: 150,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        { title: '总箱数', dataIndex: 'totalBoxes', width: 120, className: 'replacecolor' },
+        { title: '总毛重', dataIndex: 'totalRoughWeigh', width: 120, className: 'replacecolor' },
+        { title: '总体积', dataIndex: 'totalVolume', width: 100, className: 'replacecolor' },
+        {
+          title: '金额',
+          dataIndex: 'money',
+          scopedSlots: { customRender: 'money' },
+          width: 140,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '实际船期',
+          dataIndex: 'actualShipDate',
+          width: 120,
+          // customRender: text => { 有问题 显示当日日期
+          //   return moment(text).format('YYYY-MM-DD')
+          // },
+          className: 'replacecolor'
+        },
+        { title: '收汇方式', dataIndex: 'collectionMethod', width: 120, className: 'replacecolor' },
+        {
+          title: '收货人',
+          dataIndex: 'consignee',
+          width: 100,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '提单或承运收据',
+          dataIndex: 'billLadingOrCarriageReceipt',
+          width: 140,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '抬头人',
+          dataIndex: 'headPerson',
+          width: 120,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        { title: '贸易国别', dataIndex: 'tradeCountry', width: 100, className: 'replacecolor' },
+        { title: '运抵国别', dataIndex: 'arriveCountry', width: 100, className: 'replacecolor' },
+        { title: '出口口岸', dataIndex: 'exportPort', width: 100, className: 'replacecolor' },
+        {
+          title: '通知人',
+          dataIndex: 'notifier',
+          width: 100,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        { title: 'NOTIFY', dataIndex: 'NOTIFY', width: 150, className: 'replacecolor' },
+        { title: '目的港', dataIndex: 'destinationPort', width: 100, className: 'replacecolor' },
+        { title: '装运期限', dataIndex: 'latestShipmentDate', width: 100, className: 'replacecolor' },
+        {
+          title: '单据状态',
+          dataIndex: 'documentState',
+          width: 90,
+          scopedSlots: { customRender: 'documentStateSlot' },
+          fixed: 'right',
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 180,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      bookListData: [{ orderNum: 'AA002200001' }, {}, {}],
+      id: '',
+      loading: false, // 表格加载
+
+      // 查询条件
+      queryParam: {
+        orderNum: '',
+        orderDate: '',
+        customerShortName: '',
+        boxNo: '',
+        smallPo: '',
+        bookNum: ''
+      }
+    }
+  },
+
+  created() {
+    // this.getOrderList() // 渲染预托书
+  },
+  methods: {
+    // 查询按钮
+    searchQuery() {
+      // this.getpreBookList() // 渲染渲染预托书
+    },
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getpreBookList()
+    },
+    // 新增
+    addBookDrawer() {
+      console.log('新增托书')
+      this.$refs.addBookDrawer.visible = true
+    },
+
+    // -----------------------------------
+    // 结汇发票打印
+    settlementExinvoicePrint(record) {},
+    // 上传附件
+    accessoryUpload() {},
+    // 操作 提交
+    submit(record) {},
+    // 操作 详情
+    details(record) {
+      this.$refs.detailsBookDrawer.visible = true
+    },
+    // 操作 编辑
+    edit(record) {
+      console.log('edit')
+      this.$refs.editBookDrawer.visible = true
+    },
+    // 操作 打印
+    print(record) {},
+    // 操作 删除
+    handleDelete(id) {
+      console.log('id:', id)
+    },
+
+    // // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   this.getOrderList()
+    // }
+    aa() {},
+    bb() {},
+    cc() {}
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/book/detailsBookDrawer.vue

@@ -0,0 +1,482 @@
+<template>
+  <!-- 详情 回显全部 -->
+  <div id="detailsBookDrawer">
+    <a-drawer
+      title="详情"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel">
+      <!-- 主表信息  -->
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="editBook">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书日期" prop="bookDate">
+                  2022-04-30
+                  <!-- <a-date-picker
+                    placeholder="请选择托书日期"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="editBook.bookDate"
+                  /> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书号" prop="bookNum">
+                  <!-- <a-input placeholder="请输入托书号" v-model="editBook.bookNum"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="12" :sm="12">
+                <a-form-model-item label="外销发票号码" prop="exportInvoiceNo">
+                  <!-- <a-input placeholder="请输入外销发票号码" v-model="editBook.exportInvoiceNo"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="经营单位" prop="businessUnit">
+                  <!-- <a-input placeholder="请输入经营单位" v-model="editBook.businessUnit"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="经营单位地址" prop="businessUnitAdd">
+                  <!-- <a-select placeholder="请选择经营单位地址" v-model="editBook.businessUnitAdd"> -->
+                  <!-- <a-select-option value="">请选择</a-select-option>
+                    <a-select-option :value="0">客户1</a-select-option>
+                    <a-select-option :value="1">客户2</a-select-option>
+                    <a-select-option :value="2">客户3</a-select-option>
+                  </a-select> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="装运期限" prop="latestShipmentDate">
+                  <!-- <a-date-picker
+                    placeholder="请选择装运期限"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="editBook.latestShipmentDate"
+                  /> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="最终船期" prop="finalShipDate">
+                  <!-- <a-input placeholder="请输入最终船期" v-model="editBook.finalShipDate"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收货人" prop="consignee">
+                  <!-- <a-input placeholder="请输入收货人" v-model="editBook.consignee"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收货人地址" prop="consigneeAdd">
+                  <!-- <a-select placeholder="请选择收货人地址" v-model="editBook.consigneeAdd">
+                    <a-select-option value="">请选择</a-select-option>
+                    <a-select-option value="0">收货人1</a-select-option>
+                    <a-select-option value="1">收货人2</a-select-option>
+                    <a-select-option value="2">收货人3</a-select-option>
+                  </a-select> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="通知方" prop="notifying">
+                  <!-- <a-input placeholder="请输入通知方" v-model="editBook.notifying"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="通知方地址" prop="notifyingAdd">
+                  <!-- <a-input placeholder="请输入通知方地址" v-model="editBook.notifyingAdd"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="贸易国别" prop="tradeCountry">
+                  <!-- <a-input placeholder="请输入贸易国别" v-model="editBook.tradeCountry"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="运抵国别" prop="arriveCountry">
+                  <!-- <a-input placeholder="请输入运抵国别" v-model="editBook.arriveCountry"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="出口口岸" prop="exportPort">
+                  <!-- <a-input placeholder="请输入出口口岸" v-model="editBook.exportPort"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="目的港" prop="destinationport">
+                  <!-- <a-input placeholder="请输入目的港" v-model="editBook.destinationport"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收汇方式" prop="collectionMethod">
+                  <!-- <a-input placeholder="请输入收汇方式" v-model="editBook.collectionMethod"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="成交方式" prop="soldType">
+                  <!-- <a-input placeholder="请输入成交方式" v-model="editBook.soldType"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="金额" prop="money">
+                  <!-- <a-input placeholder="请输入金额" v-model="editBook.money"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="人民币" prop="RMB">
+                  <!-- <a-input placeholder="请输入人民币" v-model="editBook.RMB"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="美元" prop="dollar">
+                  <!-- <a-input placeholder="请输入美元" v-model="editBook.dollar"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
+
+      <!-- 子表-->
+      <a-card :bordered="true" style="margin:10px 0 10px 0;">
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef">
+            <a-table
+              bordered
+              :row-key="record => record.id"
+              :columns="bookColumns"
+              :data-source="bookData"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+              :footer="detailsBookFooterShow"
+            >
+            </a-table>
+          </a-form-model>
+
+          <!-- 人民币、美金 -->
+          <a-row style="margin:60px 0;">
+            <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
+              <h6 class="table-title">人民币</h6>
+              <a-table
+                :row-key="record => record.id"
+                :loading="loading"
+                :columns="CNYColumns"
+                :data-source="CNYData"
+                bordered
+                :pagination="false"
+              >
+              </a-table>
+            </div>
+
+            <div class="purchase-order-table" style="width:48%;float:right;">
+              <h6 class="table-title">美金</h6>
+              <a-table
+                :row-key="record => record.id"
+                :loading="loading"
+                :columns="USDColumns"
+                :data-source="USDData"
+                bordered
+                :pagination="false"
+              >
+              </a-table>
+            </div>
+          </a-row>
+        </a-spin>
+      </a-card>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+export default {
+  name: 'AddBookDrawer', // 详情 托书
+
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment },
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
+    return {
+      // 表头
+      bookColumns: [
+        {
+          title: '英文名称',
+          dataIndex: 'englishName',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '小po号',
+          dataIndex: 'smallPoNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '箱数',
+          dataIndex: 'boxedNum',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '毛重',
+          dataIndex: 'roughWeigh',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '净重',
+          dataIndex: 'suttle',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '体积',
+          dataIndex: 'volume',
+          width: 160,
+          className: 'replacecolor'
+        },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          customRender: t => ellipsis(t),
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '集装箱代号',
+          dataIndex: 'containerCode',
+          width: 120,
+          scopedSlots: { customRender: 'containerCode' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '集装箱号',
+          dataIndex: 'containerNo',
+          width: 120,
+          scopedSlots: { customRender: 'containerNo' },
+          className: 'replacecolor'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          width: 120,
+          className: 'replacecolor'
+        },
+        //         {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '预发货日期',
+          dataIndex: 'scheduledShipDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '业务部门',
+          dataIndex: 'operatingDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '采购/委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 160,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '采购/委外工厂',
+          dataIndex: 'purchaseAboardFactory',
+          width: 160,
+          className: 'replacecolor'
+        }
+      ],
+      bookData: [{ englishName: 'morningFresh', styleNum: 'MWBBW2068', quantity: '1200', boxedNum: '588' }, { englishName: 'DHC', styleNum: 'AWBW2068', quantity: '9800', boxedNum: '188' }, {}],
+      CNYColumns: [
+        {
+          title: '货代',
+          dataIndex: 'CNYfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'CNYmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'CNYProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'CNYProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      CNYData: [{ CNYmoney: '487576,87' }],
+
+      USDColumns: [
+        {
+          title: '货代',
+          dataIndex: 'USDfreighForward',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'USDmoney',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'USDProjectList',
+          width: 90,
+          scopedSlots: { customRender: 'USDProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      USDData: [{ USDmoney: '627576,87' }],
+
+      loading: false, // 表格加载
+      editBook: {},
+      confirmLoading: false,
+      visible: false,
+      dateFormat: 'YYYY-MM-DD'
+    }
+  },
+  created() {},
+  methods: {
+    detailsBookFooterShow(data) {
+      console.log(' 详情托书 子表 ----合计行')
+      console.log('data', data)
+      return (
+        <a-table
+          rowKey={Math.random}
+          bordered={false}
+          pagination={false}
+          columns={this.bookColumns}
+          dataSource={this.bookdataSource || []}
+          showHeader={false}
+        ></a-table>
+      )
+    },
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+
+    // ------------------------------------------
+    modalFormOk() {},
+    aa() {}
+    // // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   this.getAnnList()
+    // }
+  },
+  // TODO:合计行 有滚动待解决
+  computed: {
+    bookdataSource() {
+      // 详情托书  子表 合计
+      const total = Object.assign({}, this.bookData[0])
+      for (const attr in total) {
+        total[attr] = '合计'
+        break
+      }
+      return [total]
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
+/deep/ .ant-table-footer .ant-table.body {
+  // overflow: hidden !important;
+}
+/deep/ .ant-table.ant-table-bordered .ant-table-footer {
+  border: none;
+  padding: 0;
+}
+</style>

src/views/book/editBookDrawer.vue

@@ -0,0 +1,613 @@
+<template>
+  <!-- 编辑 托书 回显可编辑输入框 -->
+  <div id="addBookDrawer">
+    <a-drawer
+      title="编辑"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel">
+      <!-- 主表信息 编辑 -->
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="editBook" :rules="validatorRules">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书日期" prop="bookDate">
+                  <a-date-picker
+                    placeholder="请选择托书日期"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="editBook.bookDate"
+                  />
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书号" prop="bookNum">
+                  <a-input placeholder="请输入托书号" v-model="editBook.bookNum"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="12" :sm="12">
+                <a-form-model-item label="外销发票号码" prop="exportInvoiceNo">
+                  <a-input placeholder="请输入外销发票号码" v-model="editBook.exportInvoiceNo"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="经营单位" prop="businessUnit">
+                  <a-input placeholder="请输入经营单位" v-model="editBook.businessUnit"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="经营单位地址" prop="businessUnitAdd">
+                  <a-select placeholder="请选择经营单位地址" v-model="editBook.businessUnitAdd">
+                    <a-select-option value="">请选择</a-select-option>
+                    <a-select-option :value="0">客户1</a-select-option>
+                    <a-select-option :value="1">客户2</a-select-option>
+                    <a-select-option :value="2">客户3</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="装运期限" prop="latestShipmentDate">
+                  <a-date-picker
+                    placeholder="请选择装运期限"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="editBook.latestShipmentDate"
+                  />
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="最终船期" prop="finalShipDate">
+                  <a-input placeholder="请输入最终船期" v-model="editBook.finalShipDate"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收货人" prop="consignee">
+                  <a-input placeholder="请输入收货人" v-model="editBook.consignee"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收货人地址" prop="consigneeAdd">
+                  <a-select placeholder="请选择收货人地址" v-model="editBook.consigneeAdd">
+                    <a-select-option value="">请选择</a-select-option>
+                    <a-select-option value="0">收货人1</a-select-option>
+                    <a-select-option value="1">收货人2</a-select-option>
+                    <a-select-option value="2">收货人3</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="通知方" prop="notifying">
+                  <a-input placeholder="请输入通知方" v-model="editBook.notifying"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="通知方地址" prop="notifyingAdd">
+                  <a-input placeholder="请输入通知方地址" v-model="editBook.notifyingAdd"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="贸易国别" prop="tradeCountry">
+                  <a-input placeholder="请输入贸易国别" v-model="editBook.tradeCountry"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="运抵国别" prop="arriveCountry">
+                  <a-input placeholder="请输入运抵国别" v-model="editBook.arriveCountry"></a-input>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="出口口岸" prop="exportPort">
+                  <a-input placeholder="请输入出口口岸" v-model="editBook.exportPort"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="目的港" prop="destinationport">
+                  <a-input placeholder="请输入目的港" v-model="editBook.destinationport"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="收汇方式" prop="collectionMethod">
+                  <a-input placeholder="请输入收汇方式" v-model="editBook.collectionMethod"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="成交方式" prop="soldType">
+                  <a-input placeholder="请输入成交方式" v-model="editBook.soldType"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="金额" prop="money">
+                  <a-input placeholder="请输入金额" v-model="editBook.money"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="人民币" prop="RMB">
+                  <a-input placeholder="请输入人民币" v-model="editBook.RMB"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="美元" prop="dollar">
+                  <a-input placeholder="请输入美元" v-model="editBook.dollar"></a-input>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
+
+      <!--操作按钮区域 参照装箱单  増行-->
+      <a-card :bordered="true" style="margin:10px 0  40px 0;">
+        <div class="table-operator">
+          <a-button type="primary" @click="packingList" icon="ordered-list">参照装箱单</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
+
+        <!-- 子表-->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              :row-key="record => record.id"
+              :columns="bookColumns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+              :footer="editBookFooterShow"
+            >
+              <!-- 集装箱代号 输入框 -->
+              <template slot="containerCode" slot-scope="text, record, index">
+                <a-form-model-item prop="containerCode" :rules="rules.containerCode" required>
+                  <a-input style="width:100%" type="text" v-model="record.containerCode" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 集装箱号 输入框-->
+              <template slot="containerNo" slot-scope="text, record, index">
+                <a-form-model-item prop="containerNo" :rules="rules.containerNo">
+                  <a-input style="width:100%" type="text" v-model="record.containerNo" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 操作 -->
+              <span slot="operationSlot" slot-scope="text, record">
+                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                  <a href="javascript:void(0);" style="color:red;">删除</a>
+                </a-popconfirm>
+              </span>
+            </a-table>
+          </a-form-model>
+
+          <!-- 人民币、美金 -->
+          <a-row style="margin:60px 0;">
+            <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
+              <h6 class="table-title">人民币</h6>
+              <a-table
+                :row-key="record => record.id"
+                :loading="loading"
+                :columns="CNYColumns"
+                :data-source="CNYData"
+                bordered
+                :pagination="false"
+              >
+                <!-- CNY项目列 -->
+                <template slot="CNYProjectList" slot-scope="text, record, index">
+                  <a-form-model-item prop="CNYProjectList" :rules="rules.CNYProjectList">
+                    <a-select v-model="record.CNYProjectList" style="width:100%">
+                      <a-select-option :value="1">项目列1</a-select-option>
+                      <a-select-option :value="2">项目列2</a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </template>
+              </a-table>
+            </div>
+
+            <div class="purchase-order-table" style="width:48%;float:right;">
+              <h6 class="table-title">美金</h6>
+              <a-table
+                :row-key="record => record.id"
+                :loading="loading"
+                :columns="USDColumns"
+                :data-source="USDData"
+                bordered
+                :pagination="false"
+              >
+                <!-- USD项目列 -->
+                <template slot="USDProjectList" slot-scope="text, record, index">
+                  <a-form-model-item prop="USDProjectList" :rules="rules.USDProjectList">
+                    <a-select v-model="record.USDProjectList" style="width:100%">
+                      <a-select-option :value="1">项目列1</a-select-option>
+                      <a-select-option :value="2">项目列2</a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </template>
+              </a-table>
+            </div>
+          </a-row>
+        </a-spin>
+      </a-card>
+
+      <!-- 页面底部保存取消 -->
+      <div
+        :style="{
+          position: 'absolute',
+          right: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '10px 16px',
+          background: '#fff',
+          textAlign: 'right',
+          zIndex: 1
+        }"
+      >
+        <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
+          <a-button :style="{ marginRight: '8px' }">取消</a-button>
+        </a-popconfirm>
+        <a-button type="primary" @click="submitAdd">
+          提交
+        </a-button>
+      </div>
+    </a-drawer>
+    <!-- 参照装箱单 -->
+    <packingList-modal ref="packingListModal" :father="aa" @ok="modalFormOk"></packingList-modal>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import packingListModal from '@views/book/packingListModal.vue'
+
+export default {
+  name: 'AddBookDrawer', // 新增 托书
+  mixins: [JeecgListMixin],
+  components: { packingListModal, JEllipsis, moment }, // 参照装箱单 弹框
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
+    return {
+      // 表头
+      bookColumns: [
+        {
+          title: '英文名称',
+          dataIndex: 'englishName',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '小po号',
+          dataIndex: 'smallPoNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '箱数',
+          dataIndex: 'boxedNum',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '毛重',
+          dataIndex: 'roughWeigh',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '净重',
+          dataIndex: 'suttle',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '体积',
+          dataIndex: 'volume',
+          width: 160,
+          className: 'replacecolor'
+        },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          customRender: t => ellipsis(t),
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '集装箱代号',
+          dataIndex: 'containerCode',
+          width: 120,
+          scopedSlots: { customRender: 'containerCode' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '集装箱号',
+          dataIndex: 'containerNo',
+          width: 120,
+          scopedSlots: { customRender: 'containerNo' },
+          className: 'replacecolor'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          width: 120,
+          className: 'replacecolor'
+        },
+        //         {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '预发货日期',
+          dataIndex: 'scheduledShipDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '业务部门',
+          dataIndex: 'operatingDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '采购/委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 160,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '采购/委外工厂',
+          dataIndex: 'purchaseAboardFactory',
+          width: 160,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 160,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      data: [{ englishName: 'morningFresh', styleNum: 'MWBBW2068', quantity: '1200', boxedNum: '588' }, {}, {}],
+      CNYColumns: [
+        {
+          title: '货代',
+          dataIndex: 'CNYfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'CNYmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'CNYProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'CNYProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      CNYData: [{ CNYmoney: '487576,87' }],
+
+      USDColumns: [
+        {
+          title: '货代',
+          dataIndex: 'USDfreighForward',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'USDmoney',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'USDProjectList',
+          width: 90,
+          scopedSlots: { customRender: 'USDProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      USDData: [{}],
+
+      loading: false, // 表格加载
+      editBook: {},
+      confirmLoading: false,
+      visible: false,
+      dateFormat: 'YYYY-MM-DD',
+      validatorRules: {
+        bookDate: [{ required: true, message: '托书日期不能为空', trigger: 'blur' }]
+        // 确定必填项
+      }
+    }
+  },
+  created() {},
+  methods: {
+    // 参照装箱单
+    referpackingListModal() {
+      console.log('打开参照装箱单')
+      this.$refs.packingListModal.advancePackingListModVis = true
+    },
+    // 増行
+    handleAddColumn() {
+      console.log('増行')
+
+      const addrow = {
+        englishName: '',
+        styleNum: '',
+        smallPoNum: '',
+        quantity: '',
+        boxedNum: '',
+        roughWeigh: '',
+        suttle: '',
+        volume: '',
+        distributionPoint: '',
+        containerCode: '',
+        containerNo: '',
+        price: '',
+        scheduledShipDate: '',
+        salesman: '',
+        operatingDepartment: '',
+        purchaseAboardOrderNum: '',
+        purchaseAboardFactory: '',
+        operation: ''
+      }
+
+      this.data.push(addrow)
+    },
+
+    // 编辑托书 子表合计
+    editBookFooterShow(data) {
+      console.log('编辑托书 子表 ----合计行')
+      console.log('data', data)
+      return (
+        <a-table
+          rowKey={Math.random}
+          bordered={false}
+          pagination={false}
+          columns={this.bookColumns}
+          dataSource={this.editBookFooterDataSource || []}
+          showHeader={false}
+        ></a-table>
+      )
+    },
+    // 操作 删除
+    handleDelete(id) {
+      console.log('id:', id)
+    },
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+    // 抽屉 提交
+    submitAdd() {
+      console.log('保存新增、刷新预托书')
+      const that = this
+      // 触发表单验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          that.confirmLoading = true
+        }
+      })
+      this.close()
+      // this.getShipmentList() // 刷新发运明细列表
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+
+    // ------------------------------------------
+    modalFormOk() {},
+    aa() {}
+    // // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   this.getAnnList()
+    // }
+  },
+  // TODO:合计行 有滚动待解决
+  computed: {
+    editBookFooterDataSource() {
+      // 编辑托书  子表 合计
+      const total = Object.assign({}, this.data[0])
+      for (const attr in total) {
+        total[attr] = '合计'
+        break
+      }
+      return [total]
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
+/deep/ .ant-table-footer .ant-table.body {
+  // overflow: hidden !important;
+}
+/deep/ .ant-table.ant-table-bordered .ant-table-footer {
+  border: none;
+  padding: 0;
+}
+</style>

src/views/book/packingListModal.vue

@@ -0,0 +1,321 @@
+<template>
+  <a-modal
+    title="参照装箱单"
+    v-model="packingListModVis"
+    :confirmLoading="confirmLoading"
+    @ok="onSubmit"
+    @cancel="handleCancel"
+    width="86%"
+    style="top:330px;left:100px;"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单号">
+                <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="品名">
+                <a-input placeholder="请输入品名" v-model="queryParam.name"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="款号">
+                <a-input placeholder="请输入款号" v-model="queryParam.styleNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+                </a>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+
+      <!-- table , y: 300 -->
+      <div class="anotherTable">
+        <a-table
+          :columns="packingListColumns"
+          :data-source="packingListData"
+          :loading="loading"
+          :pagination="ipagination"
+          :row-key="record => record.id"
+          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          @change="handleTableChange"
+          bordered
+          :scroll="{ x: 1500 }"
+          size="small"
+        >
+        </a-table>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+export default {
+  name: 'PackingListModal', // 参照装箱单 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment },
+  data() {
+    return {
+      // 查询条件
+      queryParam: {
+        orderNum: '',
+        name: '', // 品名
+        styleNum: ''
+      },
+      selectedRowKeys: [], // 勾选航
+      loading: false, // 表格加载
+      // 表头
+      packingListColumns: [
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        //  {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '预发货日期',
+          dataIndex: 'scheduledShipDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '小PO',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '备注',
+          dataIndex: 'note',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '发货日期',
+          dataIndex: 'shipDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户',
+          dataIndex: 'customer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '存货名称',
+          dataIndex: 'inventoryName',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '颜色',
+          dataIndex: 'color',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '采购/委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 140,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单类型',
+          dataIndex: 'orderType',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '工厂单价',
+          dataIndex: 'factoryPeice',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '数量（按合并规则累计）',
+          dataIndex: 'quantity',
+          width: 180,
+          className: 'replacecolor'
+        },
+        {
+          title: '箱数',
+          dataIndex: 'boxesNum',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '总净重',
+          dataIndex: 'totalSuttle',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '总毛重',
+          dataIndex: 'totalRoughWeigh',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '总体积',
+          dataIndex: 'totalVolume',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '总价',
+          dataIndex: 'totalPrices',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '集装箱代号',
+          dataIndex: 'containerCode',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '集装箱号',
+          dataIndex: 'containerNo',
+          width: 120,
+          fixed: 'right',
+          className: 'replacecolor'
+        },
+        {
+          title: '预托书号',
+          dataIndex: 'preBookNum',
+          width: 120,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      packingListData: [{}, {}, {}],
+
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      packingListModVis: false
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    // 弹框确定
+    onSubmit() {},
+
+    close() {
+      this.$emit('close')
+      this.packingListModVis = false
+    },
+    handleCancel() {
+      this.close()
+    },
+    handleTableChange() {},
+    // 选中行
+    onSelectChange(keys, rows) {
+      this.selectedRowKeys = keys
+      this.selectedRows = rows
+    }
+  },
+  computed: {
+    // 选中项
+    rowSelection() {
+      return {
+        onChange: (selectedRowKeys, selectedRows) => {
+          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+        },
+        getCheckboxProps: record => ({
+          props: {
+            disabled: record.title === 'Disabled User',
+            // Column configuration not to be checked
+            title: record.title
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/jeecg/ImagCropper.vue

@@ -37,7 +37,13 @@
         <div class="test-button">
           <button @click="changeImg" class="btn">changeImg</button>
           <label class="btn" for="uploads">upload</label>
-          <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" ref="uploadImg">
+          <input
+            type="file"
+            id="uploads"
+            style="position:absolute; clip:rect(0 0 0 0);"
+            accept="image/png, image/jpeg, image/gif, image/jpg"
+            @change="uploadImg($event, 1)"
+            ref="uploadImg">
           <button @click="startCrop" v-if="!crap" class="btn">start</button>
           <button @click="stopCrop" v-else class="btn">stop</button>
           <button @click="clearCrop" class="btn">clear</button>
@@ -57,8 +63,10 @@
         <div class="pre">
           <section class="pre-item">
             <p>截图框大小</p>
-            <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
-							'margin': '5px'}">
+            <div
+              class="show-preview"
+              :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
+                       'margin': '5px'}">
               <div :style="previews.div">
                 <img :src="previews.url" :style="previews.img">
               </div>
@@ -124,42 +132,42 @@
           <label class="c-item">
             <span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
             <input type="checkbox" v-model="option.original">
-            <span>original: {{ option.original}}</span>
+            <span>original: {{ option.original }}</span>
           </label>
           <label class="c-item">
             <span>是否根据dpr生成适合屏幕的高清图片</span>
             <input type="checkbox" v-model="option.high">
-            <span>high: {{ option.high}}</span>
+            <span>high: {{ option.high }}</span>
           </label>
           <label class="c-item">
             <span>是否输出原图比例的截图</span>
             <input type="checkbox" v-model="option.full">
-            <span>full: {{ option.full}}</span>
+            <span>full: {{ option.full }}</span>
           </label>
           <label class="c-item">
             <span>截图信息展示是否是真实的输出宽高</span>
             <input type="checkbox" v-model="option.infoTrue">
-            <span>infoTrue: {{ option.infoTrue}}</span>
+            <span>infoTrue: {{ option.infoTrue }}</span>
           </label>
           <label class="c-item">
             <span>能否拖动图片</span>
             <input type="checkbox" v-model="option.canMove">
-            <span>canMove: {{ option.canMove}}</span>
+            <span>canMove: {{ option.canMove }}</span>
           </label>
           <label class="c-item">
             <span>能否拖动截图框</span>
             <input type="checkbox" v-model="option.canMoveBox">
-            <span>canMoveBox: {{ option.canMoveBox}}</span>
+            <span>canMoveBox: {{ option.canMoveBox }}</span>
           </label>
           <label class="c-item">
             <span>截图框固定大小</span>
             <input type="checkbox" v-model="option.fixedBox">
-            <span>fixedBox: {{ option.fixedBox}}</span>
+            <span>fixedBox: {{ option.fixedBox }}</span>
           </label>
           <label class="c-item">
             <span>是否自动生成截图框</span>
             <input type="checkbox" v-model="option.autoCrop">
-            <span>autoCrop: {{ option.autoCrop}}</span>
+            <span>autoCrop: {{ option.autoCrop }}</span>
           </label>
           <label class="c-item">
             <span>自动生成截图框的宽高</span>
@@ -169,7 +177,7 @@
           <label class="c-item">
             <span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
             <input type="checkbox" v-model="option.centerBox">
-            <span>centerBox: {{ option.centerBox}}</span>
+            <span>centerBox: {{ option.centerBox }}</span>
           </label>
           <label class="c-item">
             <span>是否按照截图框比例输出 默认为1 </span>
@@ -198,23 +206,23 @@
     data () {
       return {
         model: false,
-        modelSrc: "",
+        modelSrc: '',
         crap: false,
         previews: {},
         lists: [
-          {img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"},
-          {img: "http://cdn.xyxiao.cn/Landscape_1.jpg"},
-          {img: "http://cdn.xyxiao.cn/Landscape_2.jpg"},
-          {img: "http://cdn.xyxiao.cn/Landscape_3.jpg"},
-          {img: "http://cdn.xyxiao.cn/Landscape_4.jpg"},
-          {img: "http://cdn.xyxiao.cn/Portrait_1.jpg"},
-          {img: "http://cdn.xyxiao.cn/Portrait_2.jpg"}
+          { img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4' },
+          { img: 'http://cdn.xyxiao.cn/Landscape_1.jpg' },
+          { img: 'http://cdn.xyxiao.cn/Landscape_2.jpg' },
+          { img: 'http://cdn.xyxiao.cn/Landscape_3.jpg' },
+          { img: 'http://cdn.xyxiao.cn/Landscape_4.jpg' },
+          { img: 'http://cdn.xyxiao.cn/Portrait_1.jpg' },
+          { img: 'http://cdn.xyxiao.cn/Portrait_2.jpg' }
         ],
         option: {
-          img: "",
+          img: '',
           size: 1,
           full: false,
-          outputType: "png",
+          outputType: 'png',
           canMove: true,
           fixedBox: false,
           original: false,
@@ -232,10 +240,10 @@
           limitMinSize: [100, 120]
         },
         example2: {
-          img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
+          img: 'http://cdn.xyxiao.cn/Landscape_2.jpg',
           info: true,
           size: 1,
-          outputType: "jpeg",
+          outputType: 'jpeg',
           canScale: true,
           autoCrop: true,
           // 只有自动截图开启 宽度高度才生效
@@ -247,13 +255,13 @@
           fixedNumber: [4, 3]
         },
         example3: {
-          img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
+          img: 'http://cdn.xyxiao.cn/Landscape_1.jpg',
           autoCrop: true,
           autoCropWidth: 200,
           autoCropHeight: 200,
           fixedBox: true
         },
-        downImg: "#",
+        downImg: '#',
         previewStyle1: {},
         previewStyle2: {},
         previewStyle3: {},
@@ -262,183 +270,183 @@
         code1: '',
         code2: '',
         code3: '',
-        preview3: '',
-      };
+        preview3: ''
+      }
     },
     methods: {
       changeImg() {
-        this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
+        this.option.img = this.lists[~~(Math.random() * this.lists.length)].img
       },
       startCrop() {
         // start
-        this.crap = true;
-        this.$refs.cropper.startCrop();
+        this.crap = true
+        this.$refs.cropper.startCrop()
       },
       stopCrop() {
         //  stop
-        this.crap = false;
-        this.$refs.cropper.stopCrop();
+        this.crap = false
+        this.$refs.cropper.stopCrop()
       },
       clearCrop() {
         // clear
-        this.$refs.cropper.clearCrop();
+        this.$refs.cropper.clearCrop()
       },
       refreshCrop() {
         // clear
-        this.$refs.cropper.refresh();
+        this.$refs.cropper.refresh()
       },
       changeScale(num) {
-        num = num || 1;
-        this.$refs.cropper.changeScale(num);
+        num = num || 1
+        this.$refs.cropper.changeScale(num)
       },
       rotateLeft() {
-        this.$refs.cropper.rotateLeft();
+        this.$refs.cropper.rotateLeft()
       },
       rotateRight() {
-        this.$refs.cropper.rotateRight();
+        this.$refs.cropper.rotateRight()
       },
       finish(type) {
-        if (type === "blob") {
+        if (type === 'blob') {
           this.$refs.cropper.getCropBlob(data => {
-            var img = window.URL.createObjectURL(data);
-            this.model = true;
-            this.modelSrc = img;
-          });
+            var img = window.URL.createObjectURL(data)
+            this.model = true
+            this.modelSrc = img
+          })
         } else {
           this.$refs.cropper.getCropData(data => {
-            this.model = true;
-            this.modelSrc = data;
-          });
+            this.model = true
+            this.modelSrc = data
+          })
         }
       },
       // 实时预览函数
       realTime(data) {
-        var previews = data;
-        var h = 0.5;
-        var w = 0.2;
+        var previews = data
+        var h = 0.5
+        var w = 0.2
 
         this.previewStyle1 = {
-          width: previews.w + "px",
-          height: previews.h + "px",
-          overflow: "hidden",
-          margin: "0",
+          width: previews.w + 'px',
+          height: previews.h + 'px',
+          overflow: 'hidden',
+          margin: '0',
           zoom: h
-        };
+        }
 
         this.previewStyle2 = {
-          width: previews.w + "px",
-          height: previews.h + "px",
-          overflow: "hidden",
-          margin: "0",
+          width: previews.w + 'px',
+          height: previews.h + 'px',
+          overflow: 'hidden',
+          margin: '0',
           zoom: w
-        };
+        }
 
         this.previewStyle3 = {
-          width: previews.w + "px",
-          height: previews.h + "px",
-          overflow: "hidden",
-          margin: "0",
+          width: previews.w + 'px',
+          height: previews.h + 'px',
+          overflow: 'hidden',
+          margin: '0',
           zoom: (100 / previews.w)
-        };
+        }
 
         this.previewStyle4 = {
-          width: previews.w + "px",
-          height: previews.h + "px",
-          overflow: "hidden",
-          margin: "0",
+          width: previews.w + 'px',
+          height: previews.h + 'px',
+          overflow: 'hidden',
+          margin: '0',
           zoom: (100 / previews.h)
-        };
+        }
 
-        this.previews = data;
+        this.previews = data
       },
 
       finish2(type) {
         this.$refs.cropper2.getCropData(data => {
-          this.model = true;
-          this.modelSrc = data;
-        });
+          this.model = true
+          this.modelSrc = data
+        })
       },
       finish3(type) {
         this.$refs.cropper3.getCropData(data => {
-          this.model = true;
-          this.modelSrc = data;
-        });
+          this.model = true
+          this.modelSrc = data
+        })
       },
       down(type) {
         // 输出
-        if (type === "blob") {
+        if (type === 'blob') {
           this.$refs.cropper.getCropBlob(data => {
-            this.downImg = window.URL.createObjectURL(data);
+            this.downImg = window.URL.createObjectURL(data)
             if (window.navigator.msSaveBlob) {
-              var blobObject = new Blob([data]);
-              window.navigator.msSaveBlob(blobObject, "demo.png");
+              var blobObject = new Blob([data])
+              window.navigator.msSaveBlob(blobObject, 'demo.png')
             } else {
               this.$nextTick(() => {
-                this.$refs.downloadDom.click();
-              });
+                this.$refs.downloadDom.click()
+              })
             }
-          });
+          })
         } else {
           this.$refs.cropper.getCropData(data => {
-            this.downImg = data;
+            this.downImg = data
             if (window.navigator.msSaveBlob) {
-              var blobObject = new Blob([data]);
-              window.navigator.msSaveBlob(blobObject, "demo.png");
+              var blobObject = new Blob([data])
+              window.navigator.msSaveBlob(blobObject, 'demo.png')
             } else {
               this.$nextTick(() => {
-                this.$refs.downloadDom.click();
-              });
+                this.$refs.downloadDom.click()
+              })
             }
-          });
+          })
         }
       },
 
       uploadImg(e, num) {
-        //上传图片
+        // 上传图片
         // this.option.img
-        var file = e.target.files[0];
+        var file = e.target.files[0]
         if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
-          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
-          return false;
+          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
+          return false
         }
-        var reader = new FileReader();
+        var reader = new FileReader()
         reader.onload = e => {
-          let data;
-          if (typeof e.target.result === "object") {
+          let data
+          if (typeof e.target.result === 'object') {
             // 把Array Buffer转化为blob 如果是base64不需要
-            data = window.URL.createObjectURL(new Blob([e.target.result]));
+            data = window.URL.createObjectURL(new Blob([e.target.result]))
           } else {
-            data = e.target.result;
+            data = e.target.result
           }
           if (num === 1) {
-            this.option.img = data;
+            this.option.img = data
           } else if (num === 2) {
-            this.example2.img = data;
+            this.example2.img = data
           }
           this.$refs.uploadImg.value = ''
-        };
+        }
         // 转化为blob
-        reader.readAsArrayBuffer(file);
+        reader.readAsArrayBuffer(file)
       },
       imgLoad(msg) {
-        console.log(msg);
+        console.log(msg)
       },
 
       cropMoving(data) {
-        this.option.cropData = data;
+        this.option.cropData = data
       }
     },
     components: {
       VueCropper
     },
     mounted() {
-      this.changeImg();
-      var list = [].slice.call(document.querySelectorAll("pre code"));
+      this.changeImg()
+      var list = [].slice.call(document.querySelectorAll('pre code'))
       list.forEach((val, index) => {
-        hljs.highlightBlock(val);
-      });
+        hljs.highlightBlock(val)
+      })
     }
-  };
+  }
 </script>
 
 <style scoped>
@@ -610,4 +618,4 @@
       height: 400px;
     }
   }
-</style>
+</style>

src/views/pre-book/addPreBookDrawer.vue

@@ -164,12 +164,12 @@
           <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
         </div>
 
-        <!-- table , y: 300-->
+        <!-- table-->
         <a-spin :spinning="confirmLoading">
           <a-form-model ref="formRef" :rules="validatorRules">
             <a-table
               bordered
-              rowKey="id"
+              :row-key="record => record.id"
               :columns="addPerBookColumns"
               :data-source="addPerBookData"
               :loading="loading"
@@ -200,21 +200,55 @@
             </a-table>
           </a-form-model>
         </a-spin>
-      </a-card>
 
-      <!-- 人民币、美金 -->
-      <a-row>
-        <a-col :md="12" :sm="12">
-          <!-- <div style="background:#ECECEC; padding:10px"> -->
-          <a-card title="人民币" :bordered="true" style="width:100%"> </a-card>
-          <!-- </div> -->
-        </a-col>
-        <a-col :md="12" :sm="12">
-          <!-- <div style="background:#ECECEC; padding:10px"> -->
-          <a-card title="美金" :bordered="true" style="width: 100%"> </a-card>
-          <!-- </div> -->
-        </a-col>
-      </a-row>
+        <!-- 人民币、美金 -->
+        <a-row style="marginTop:10px;marginBottom:50px;background:white;padding:10px;">
+          <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
+            <h6 class="table-title">人民币</h6>
+            <a-table
+              :row-key="record => record.id"
+              :loading="loading"
+              :columns="CNYColumns"
+              :data-source="CNYData"
+              bordered
+              :pagination="false"
+            >
+              <!-- CNY项目列 -->
+              <template slot="CNYProjectList" slot-scope="text, record, index">
+                <a-form-model-item prop="CNYProjectList" :rules="rules.CNYProjectList">
+                  <a-select v-model="record.CNYProjectList" style="width:100%">
+                    <a-select-option :value="1">项目列1</a-select-option>
+                    <a-select-option :value="2">项目列2</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </template>
+            </a-table>
+          </div>
+
+          <div class="purchase-order-table" style="width:48%;float:right;">
+            <h6 class="table-title">美金</h6>
+            <a-table
+              :row-key="record => record.id"
+              :loading="loading"
+              :columns="USDColumns"
+              :data-source="USDData"
+              bordered
+              :pagination="false"
+            >
+              <!-- USD项目列  -->
+              <template slot="USDProjectList" slot-scope="text, record, index">
+                <a-form-model-item prop="USDProjectList" :rules="rules.USDProjectList">
+                  <a-select v-model="record.USDProjectList" style="width:100%">
+                    <a-select-option :value="1">项目列1</a-select-option>
+                    <a-select-option :value="2">项目列2</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </template>
+            </a-table>
+          </div>
+        </a-row>
+
+      </a-card>
 
       <!-- 页面底部保存取消 -->
       <div
@@ -404,53 +438,51 @@ export default {
         }
       ],
       addPerBookData: [{}, {}],
-      //  RMBColumns ： [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     }]，
-      //  RMBData ； [{}]，
-
-      //  USDColumns ； [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     }],
-      //  USDData : [{}],
+      CNYColumns: [
+        {
+          title: '货代',
+          dataIndex: 'CNYfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'CNYmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'CNYProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'CNYProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      CNYData: [{ CNYmoney: '487576,87' }],
+
+      USDColumns: [
+        {
+          title: '货代',
+          dataIndex: 'USDfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'USDmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'USDProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'USDProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      USDData: [{}],
 
       loading: false, // 表格加载
       preBook: {},
@@ -467,8 +499,7 @@ export default {
   methods: {
     // 参照预装箱单
     referadvancePackingList() {
-      console.log('打开参照订单数据')
-      // 打开订单数据弹框
+      console.log('打开参照预装箱单')
       this.$refs.advancePackingListModal.advancePackingListModVis = true
     },
     // 増行
@@ -544,6 +575,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
 /deep/ .ant-table-thead > tr > th {
   text-align: center;
   // font-weight: 700;

src/views/pre-book/detailsPreBookDrawer.vue

@@ -8,7 +8,7 @@
       :closable="true"
       :visible="visible"
       @close="handleCancel">
-      <!-- 主表信息 -->
+      <!-- 主表信息 展示-->
       <a-card :bordered="true">
         <div class="table-page-search-wrapper">
           <a-form-model layout="inline" ref="form" :model="preBook">
@@ -27,129 +27,129 @@
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="托书号" prop="bookNum">
-                  <a-input placeholder="请输入托书号" v-model="preBook.bookNum"></a-input>
+                  <!-- <a-input placeholder="请输入托书号" v-model="preBook.bookNum"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="12" :sm="12">
                 <a-form-model-item label="外销发票号码" prop="exportInvoiceNo">
-                  <a-input placeholder="请输入外销发票号码" v-model="preBook.exportInvoiceNo"></a-input>
+                  <!-- <a-input placeholder="请输入外销发票号码" v-model="preBook.exportInvoiceNo"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="经营单位" prop="businessUnit">
-                  <a-input placeholder="请输入经营单位" v-model="preBook.businessUnit"></a-input>
+                  <!-- <a-input placeholder="请输入经营单位" v-model="preBook.businessUnit"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="经营单位地址" prop="businessUnitAdd">
-                  <a-select placeholder="请选择经营单位地址" v-model="preBook.businessUnitAdd">
+                  <!-- <a-select placeholder="请选择经营单位地址" v-model="preBook.businessUnitAdd">
                     <a-select-option value="">请选择</a-select-option>
                     <a-select-option :value="0">客户1</a-select-option>
                     <a-select-option :value="1">客户2</a-select-option>
                     <a-select-option :value="2">客户3</a-select-option>
-                  </a-select>
+                  </a-select> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="进仓/装柜日期" prop="inLoadDate">
-                  <a-date-picker
+                  <!-- <a-date-picker
                     placeholder="请选择进仓/装柜日期"
                     style="width:100%;"
                     :format="dateFormat"
                     v-model="preBook.inLoadDate"
-                  />
+                  /> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="最终船期" prop="finalShipDate">
-                  <a-input placeholder="请输入最终船期" v-model="preBook.finalShipDate"></a-input>
+                  <!-- <a-input placeholder="请输入最终船期" v-model="preBook.finalShipDate"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="收货人" prop="consignee">
-                  <a-input placeholder="请输入收货人" v-model="preBook.consignee"></a-input>
+                  <!-- <a-input placeholder="请输入收货人" v-model="preBook.consignee"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="收货人地址" prop="consigneeAdd">
-                  <a-select placeholder="请选择收货人地址" v-model="preBook.consigneeAdd">
+                  <!-- <a-select placeholder="请选择收货人地址" v-model="preBook.consigneeAdd">
                     <a-select-option value="">请选择</a-select-option>
                     <a-select-option value="0">收货人1</a-select-option>
                     <a-select-option value="1">收货人2</a-select-option>
                     <a-select-option value="2">收货人3</a-select-option>
-                  </a-select>
+                  </a-select> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="通知方" prop="notifying">
-                  <a-input placeholder="请输入通知方" v-model="preBook.notifying"></a-input>
+                  <!-- <a-input placeholder="请输入通知方" v-model="preBook.notifying"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="通知方地址" prop="notifyingAdd">
-                  <a-input placeholder="请输入通知方地址" v-model="preBook.notifyingAdd"></a-input>
+                  <!-- <a-input placeholder="请输入通知方地址" v-model="preBook.notifyingAdd"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="贸易国别" prop="tradeCountry">
-                  <a-input placeholder="请输入贸易国别" v-model="preBook.tradeCountry"></a-input>
+                  <!-- <a-input placeholder="请输入贸易国别" v-model="preBook.tradeCountry"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="运抵国别" prop="arriveCountry">
-                  <a-input placeholder="请输入运抵国别" v-model="preBook.arriveCountry"></a-input>
+                  <!-- <a-input placeholder="请输入运抵国别" v-model="preBook.arriveCountry"></a-input> -->
                 </a-form-model-item>
               </a-col>
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="出口口岸" prop="exportPort">
-                  <a-input placeholder="请输入出口口岸" v-model="preBook.exportPort"></a-input>
+                  <!-- <a-input placeholder="请输入出口口岸" v-model="preBook.exportPort"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="目的港" prop="destinationport">
-                  <a-input placeholder="请输入目的港" v-model="preBook.destinationport"></a-input>
+                  <!-- <a-input placeholder="请输入目的港" v-model="preBook.destinationport"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="收汇方式" prop="collectionMethod">
-                  <a-input placeholder="请输入收汇方式" v-model="preBook.collectionMethod"></a-input>
+                  <!-- <a-input placeholder="请输入收汇方式" v-model="preBook.collectionMethod"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="成交方式" prop="soldType">
-                  <a-input placeholder="请输入成交方式" v-model="preBook.soldType"></a-input>
+                  <!-- <a-input placeholder="请输入成交方式" v-model="preBook.soldType"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="金额" prop="money">
-                  <a-input placeholder="请输入金额" v-model="preBook.money"></a-input>
+                  <!-- <a-input placeholder="请输入金额" v-model="preBook.money"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="人民币" prop="RMB">
-                  <a-input placeholder="请输入人民币" v-model="preBook.RMB"></a-input>
+                  <!-- <a-input placeholder="请输入人民币" v-model="preBook.RMB"></a-input> -->
                 </a-form-model-item>
               </a-col>
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="美元" prop="dollar">
-                  <a-input placeholder="请输入美元" v-model="preBook.dollar"></a-input>
+                  <!-- <a-input placeholder="请输入美元" v-model="preBook.dollar"></a-input> -->
                 </a-form-model-item>
               </a-col>
             </a-row>
@@ -157,9 +157,8 @@
         </div>
       </a-card>
 
-      <!--操作按钮区域 参照预装箱单  増行-->
+      <!--子表 -->
       <a-card :bordered="true" style="marginTop:10px;">
-        <!-- table , y: 300-->
         <a-spin :spinning="confirmLoading">
           <a-form-model ref="formRef">
             <a-table
@@ -172,47 +171,40 @@
               :scroll="{ x: 1500 }"
               @change="handleTableChange"
             >
-              <!-- 集装箱代号 输入框 -->
-              <template slot="containerCode" slot-scope="text, record, index">
-                <a-form-model-item prop="containerCode" :rules="rules.containerCode" required>
-                  <a-input style="width:100%" type="text" v-model="record.containerCode" />
-                </a-form-model-item>
-              </template>
-
-              <!-- 集装箱号 输入框-->
-              <template slot="containerNo" slot-scope="text, record, index">
-                <a-form-model-item prop="containerNo" :rules="rules.containerNo">
-                  <a-input style="width:100%" type="text" v-model="record.containerNo" />
-                </a-form-model-item>
-              </template>
-
-              <!-- 操作 -->
-              <span slot="operationSlot" slot-scope="text, record">
-                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
-                  <a href="javascript:void(0);" style="color:red;">删除</a>
-                </a-popconfirm>
-              </span>
             </a-table>
           </a-form-model>
         </a-spin>
-      </a-card>
 
-      <!-- 人民币、美金 -->
-      <a-row>
-        <a-col :md="12" :sm="12">
-          <!-- <div style="background:#ECECEC; padding:10px"> -->
-          <a-card title="人民币" :bordered="true" style="width:100%"> </a-card>
-          <!-- </div> -->
-        </a-col>
-        <a-col :md="12" :sm="12">
-          <!-- <div style="background:#ECECEC; padding:10px"> -->
-          <a-card title="美金" :bordered="true" style="width: 100%"> </a-card>
-          <!-- </div> -->
-        </a-col>
-      </a-row>
+        <!-- 人民币、美金 -->
+        <a-row style="marginTop:10px;marginBottom:50px;padding:10px;">
+          <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
+            <h6 class="table-title">人民币</h6>
+            <a-table
+              :row-key="record => record.id"
+              :loading="loading"
+              :columns="CNYColumns"
+              :data-source="CNYData"
+              bordered
+              :pagination="false"
+            >
+            </a-table>
+          </div>
+
+          <div class="purchase-order-table" style="width:48%;float:right;">
+            <h6 class="table-title">美金</h6>
+            <a-table
+              :row-key="record => record.id"
+              :loading="loading"
+              :columns="USDColumns"
+              :data-source="USDData"
+              bordered
+              :pagination="false"
+            >
+            </a-table>
+          </div>
+        </a-row>
+      </a-card>
     </a-drawer>
-    <!-- 参照预装箱单 -->
-    <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
   </div>
 </template>
 
@@ -220,13 +212,12 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
-import AdvancePackingListModal from '@views/pre-book/advancePackingListModal.vue'
 
 export default {
   name: 'DetailsPreBookDrawer', //  详情 预托书
   computed: {},
   mixins: [JeecgListMixin],
-  components: { AdvancePackingListModal, JEllipsis, moment }, // 参照预装箱单 弹框
+  components: { JEllipsis, moment },
   data() {
     return {
       // 表头
@@ -363,67 +354,55 @@ export default {
           dataIndex: 'purchaseAboardFactory',
           width: 160,
 
+          className: 'replacecolor'
+        }
+      ],
+      data: [{}, {}],
+      CNYColumns: [
+        {
+          title: '货代',
+          dataIndex: 'CNYfreighForward',
+          width: 20,
           className: 'replacecolor'
         },
-
         {
-          title: '操作',
-          dataIndex: 'operation',
-          scopedSlots: { customRender: 'operationSlot' },
-          width: 160,
+          title: '金额',
+          dataIndex: 'CNYmoney',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'CNYProjectList',
+          width: 90,
+          scopedSlots: { customRender: 'CNYProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      CNYData: [{ CNYmoney: '487576,87', CNYProjectList: '项目列test1' }],
 
-          fixed: 'right',
+      USDColumns: [
+        {
+          title: '货代',
+          dataIndex: 'USDfreighForward',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'USDmoney',
+          width: 20,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'USDProjectList',
+          width: 90,
+          scopedSlots: { customRender: 'USDProjectList' },
           className: 'replacecolor'
         }
       ],
-      data: [{}, {}],
-      //  RMBColumns ： [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     }]，
-      //  RMBData ； [{}]，
-
-      //  USDColumns ； [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     }],
-      //  USDData : [{}],
+      USDData: [{ USDmoney: '7576,17', CNYProjectList: '项目列test2' }],
 
       loading: false, // 表格加载
       preBook: {},
@@ -456,6 +435,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
 /deep/ .ant-table-thead > tr > th {
   text-align: center;
   // font-weight: 700;

src/views/pre-book/editPreBookDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 编辑预托书 -->
+  <!-- 编辑预托书 回显可编辑输入框-->
   <div id="editPreBookDrawer">
     <a-drawer
       title="编辑"
@@ -163,7 +163,7 @@
           <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
         </div>
 
-        <!-- table , y: 300-->
+        <!-- table -->
         <a-spin :spinning="confirmLoading">
           <a-form-model ref="formRef" :rules="validatorRules">
             <a-table
@@ -199,21 +199,54 @@
             </a-table>
           </a-form-model>
         </a-spin>
-      </a-card>
 
-      <!-- 人民币、美金 -->
-      <a-row>
-        <a-col :md="12" :sm="12">
-          <!-- <div style="background:#ECECEC; padding:10px"> -->
-          <a-card title="人民币" :bordered="true" style="width:100%"> </a-card>
-          <!-- </div> -->
-        </a-col>
-        <a-col :md="12" :sm="12">
-          <!-- <div style="background:#ECECEC; padding:10px"> -->
-          <a-card title="美金" :bordered="true" style="width: 100%"> </a-card>
-          <!-- </div> -->
-        </a-col>
-      </a-row>
+        <!-- 人民币、美金 -->
+        <a-row style="marginTop:10px;marginBottom:50px;background:white;padding:10px;">
+          <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
+            <h6 class="table-title">人民币</h6>
+            <a-table
+              :row-key="record => record.id"
+              :loading="loading"
+              :columns="CNYColumns"
+              :data-source="CNYData"
+              bordered
+              :pagination="false"
+            >
+              <!-- CNY项目列 -->
+              <template slot="CNYProjectList" slot-scope="text, record, index">
+                <a-form-model-item prop="CNYProjectList" :rules="rules.CNYProjectList">
+                  <a-select v-model="record.CNYProjectList" style="width:100%">
+                    <a-select-option :value="1">项目列1</a-select-option>
+                    <a-select-option :value="2">项目列2</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </template>
+            </a-table>
+          </div>
+
+          <div class="purchase-order-table" style="width:48%;float:right;">
+            <h6 class="table-title">美金</h6>
+            <a-table
+              :row-key="record => record.id"
+              :loading="loading"
+              :columns="USDColumns"
+              :data-source="USDData"
+              bordered
+              :pagination="false"
+            >
+              <!-- USD项目列  -->
+              <template slot="USDProjectList" slot-scope="text, record, index">
+                <a-form-model-item prop="USDProjectList" :rules="rules.USDProjectList">
+                  <a-select v-model="record.USDProjectList" style="width:100%">
+                    <a-select-option :value="1">项目列1</a-select-option>
+                    <a-select-option :value="2">项目列2</a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </template>
+            </a-table>
+          </div>
+        </a-row>
+      </a-card>
 
       <!-- 页面底部保存取消 -->
       <div
@@ -403,53 +436,51 @@ export default {
         }
       ],
       data: [{}, {}],
-      //  RMBColumns ： [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     }]，
-      //  RMBData ； [{}]，
-
-      //  USDColumns ； [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //
-      //         className: 'replacecolor'
-      //     }],
-      //  USDData : [{}],
+      CNYColumns: [
+        {
+          title: '货代',
+          dataIndex: 'CNYfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'CNYmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'CNYProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'CNYProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      CNYData: [{ CNYmoney: '487576,87' }],
+
+      USDColumns: [
+        {
+          title: '货代',
+          dataIndex: 'USDfreighForward',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'USDmoney',
+          width: 60,
+          className: 'replacecolor'
+        },
+        {
+          title: '项目列',
+          dataIndex: 'USDProjectList',
+          width: 60,
+          scopedSlots: { customRender: 'USDProjectList' },
+          className: 'replacecolor'
+        }
+      ],
+      USDData: [{}],
 
       loading: false, // 表格加载
       preBook: {},

src/views/pre-book/preBookList.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 预托书列表 回显可编辑信息-->
+  <!-- 预托书列表 -->
   <div id="preBookList">
     <!-- 查询区域 -->
     <a-card :bordered="false">

src/views/reportForms/fabric-loss-table.vue

@@ -102,7 +102,7 @@
         <h6 class="table-title">采购订单</h6>
 
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="purchaseOrderColumns"
           :data-source="purchaseOrderData"
@@ -151,7 +151,7 @@
       <div class="outsourceOrder-abroad-table">
         <h6 class="table-title">委外订单国外</h6>
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="outsourceOrderAbroadColumns"
           :data-source="outsourceOrderAbroadData"
@@ -174,7 +174,7 @@
       <div class="cost-invoice-table" style="margin:40px 0">
         <h6 class="table-title">成本发票</h6>
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="costInvoiceColumns"
           :data-source="costInvoiceData"
@@ -187,7 +187,7 @@
       <!-- 开票成本-面料 -->
       <div class="costInvoice-fabric-table">
         <h6 class="table-title">开票成本-面料</h6>
-        <!-- ref=""  rowKey="id" -->
+        <!-- ref="" -->
         <a-table
           :row-key="record => record.id"
           :loading="loading"
@@ -208,7 +208,7 @@
       <div class="costInvoice-clothes-table" style="margin:40px 0">
         <h6 class="table-title">开票成本-成衣</h6>
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="costInvoiceClothesColumns"
           :data-source="costInvoiceClothesData"
@@ -227,7 +227,7 @@
       <div class="costInvoice-ingredient-table">
         <h6 class="table-title">开票成本-辅料</h6>
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="costInvoiceIngredientColumns"
           :data-source="costInvoiceIngredientData"
@@ -245,7 +245,7 @@
       <div class="costPay-table" style="margin:40px 0">
         <h6 class="table-title">费用支出</h6>
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="costPayColumns"
           :data-source="costPayData"
@@ -259,7 +259,7 @@
       <div class="accidentBill-table">
         <h6 class="table-title">事故单</h6>
         <a-table
-          rowKey="id"
+          :row-key="record => record.id"
           :loading="loading"
           :columns="accidentListColumns"
           :data-source="accidentListData"