页面布局统一（页面都是不同小card组成）

src/views/advance-packingList/adPaList-clothes.vue

@@ -1,63 +1,64 @@
 <template>
   <!-- 预装箱单-成衣 -->
-  <a-card :bordered="false">
+  <div id="adPaListClothes">
     <!-- 查询 -->
-    <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-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="款号">
-              <a-input placeholder="请输入款号" v-model="queryParam.styleNum"></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">
-            <a-form-item label="品名">
-              <a-input placeholder="请输入品名" v-model="queryParam.name"></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>
+            <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">
+              <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>
     <!-- 操作按钮区域 导出 导入 新增-->
-    <div class="table-operator">
-      <a-button type="primary" icon="download" @click="handleExportXls('预装箱单-成衣')">导出</a-button>
+    <a-card :bordered="false" style="margin:10px 0">
+      <div class="table-operator">
+        <a-button type="primary" icon="download" @click="handleExportXls('预装箱单-成衣')">导出</a-button>
 
-      <a-upload
-        name="file"
-        :showUploadList="false"
-        :multiple="false"
-        :headers="tokenHeader"
-        :action="importExcelUrl"
-        @change="handleImportExcel"
-      >
-        <a-button type="primary" icon="import">导入</a-button>
-      </a-upload>
+        <a-upload
+          name="file"
+          :showUploadList="false"
+          :multiple="false"
+          :headers="tokenHeader"
+          :action="importExcelUrl"
+          @change="handleImportExcel"
+        >
+          <a-button type="primary" icon="import">导入</a-button>
+        </a-upload>
 
-      <a-button type="primary" @click="addAdpackingDrawer" icon="plus">新增</a-button>
-    </div>
+        <a-button type="primary" @click="addAdpackingDrawer" icon="plus">新增</a-button>
+      </div>
 
-    <!-- table rowKey="id" -->
-    <div>
+      <!-- table rowKey="id" -->
       <a-table
         bordered
         :columns="adPaListClothesColumns"
@@ -102,7 +103,7 @@
           </a-dropdown>
         </span>
       </a-table>
-    </div>
+    </a-card>
 
     <!-- 抽屉 -->
     <div>
@@ -110,7 +111,7 @@
       <detailsAdpacking-drawer ref="detailsAdpackingDrawer" :father="bb" @ok="modalFormOk"></detailsAdpacking-drawer>
       <editAdpacking-drawer ref="editAdpackingDrawer" :father="cc" @ok="modalFormOk"></editAdpacking-drawer>
     </div>
-  </a-card>
+  </div>
 </template>
 
 <script>

src/views/advance-packingList/detailsAdpackingDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 详情 预装箱单 回显信息，有文本框-->
-  <a-card :bordered="false">
+  <div id="detailsAdvancePacking">
     <a-drawer
       title="详情"
       width="89%"
@@ -9,99 +9,102 @@
       :visible="visible"
       @close="handleCancel">
       <!-- 主表信息 展示 -->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="addAdpacking">
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="订单号" prop="orderNum">
-                AQ7484
-                <!-- <a-input placeholder="请输入订单号" v-model="addAdpacking.orderNum"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="addAdpacking">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="订单号" prop="orderNum">
+                  AQ7484
+                  <!-- <a-input placeholder="请输入订单号" v-model="addAdpacking.orderNum"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="款号" prop="styleNum">
-                HY273764
-                <!-- <a-input placeholder="请输入款号" v-model="addAdpacking.styleNum"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="款号" prop="styleNum">
+                  HY273764
+                  <!-- <a-input placeholder="请输入款号" v-model="addAdpacking.styleNum"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="品名" prop="name">
-                品名1
-                <!-- <a-input placeholder="请输入品名" v-model="addAdpacking.name"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="品名" prop="name">
+                  品名1
+                  <!-- <a-input placeholder="请输入品名" v-model="addAdpacking.name"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="尺码范围" prop="sizeRange">
-                S-3XL
-                <!-- <a-input placeholder="请输入尺码范围" v-model="addAdpacking.sizeRange"></a-input> -->
-                <!-- <a-select placeholder="请选择尺码范围">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="尺码范围" prop="sizeRange">
+                  S-3XL
+                  <!-- <a-input placeholder="请输入尺码范围" v-model="addAdpacking.sizeRange"></a-input> -->
+                  <!-- <a-select placeholder="请选择尺码范围">
                 <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-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="客户" prop="customer">
-                客户2
-                <!-- <a-input placeholder="请输入客户" v-model="addAdpacking.customer"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="客户" prop="customer">
+                  客户2
+                  <!-- <a-input placeholder="请输入客户" v-model="addAdpacking.customer"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="集装箱代号" prop="containerCode">
-                HY890
-                <!-- <a-input placeholder="请输入集装箱代号" v-model="addAdpacking.containerCode"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="集装箱代号" prop="containerCode">
+                  HY890
+                  <!-- <a-input placeholder="请输入集装箱代号" v-model="addAdpacking.containerCode"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="集装箱号" prop="containerNo">
-                HY890765
-                <!-- <a-input placeholder="请输入集装箱号" v-model="addAdpacking.containerNo"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="集装箱号" prop="containerNo">
+                  HY890765
+                  <!-- <a-input placeholder="请输入集装箱号" v-model="addAdpacking.containerNo"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="备注" prop="note">
-                备注测试
-                <!-- <a-input placeholder="请输入备注" v-model="addAdpacking.note"></a-input> -->
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="成衣工厂" prop="clothesFactory">
-                成衣工厂32
-                <!-- <a-input placeholder="请输入成衣工厂" v-model="addAdpacking.clothesFactory"></a-input> -->
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-        </a-form-model>
-      </div>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="备注" prop="note">
+                  备注测试
+                  <!-- <a-input placeholder="请输入备注" v-model="addAdpacking.note"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="成衣工厂" prop="clothesFactory">
+                  成衣工厂32
+                  <!-- <a-input placeholder="请输入成衣工厂" v-model="addAdpacking.clothesFactory"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
       <!-- 子表 ipagination-->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef">
-          <a-table
-            bordered
-            rowKey="id"
-            :columns="columns"
-            :data-source="data"
-            :loading="loading"
-            :pagination="false"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-          </a-table>
-        </a-form-model>
-      </a-spin>
+      <a-card :bordered="true" style="margin:10px 0">
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef">
+            <a-table
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="false"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+            </a-table>
+          </a-form-model>
+        </a-spin>
+      </a-card>
     </a-drawer>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -114,7 +117,6 @@ export default {
   components: { JEllipsis },
   data() {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
-
     return {
       // 表头
       columns: [
@@ -372,4 +374,12 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
 </style>

src/views/advance-packingList/editAdpackingDrawer.vue

@@ -1,175 +1,177 @@
 <template>
   <!-- 编辑 预装箱单 回显信息，有文本框-->
-  <a-card :bordered="false">
+  <div id="editAdvancePacking">
     <a-drawer
       title="编辑"
       width="89%"
       placement="right"
       :closable="true"
       :visible="visible"
-      @close="handleCancel"
-    >
+      @close="handleCancel">
       <!-- 主表信息 填写 -->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="addAdpacking" :rules="validatorRules">
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="订单号" prop="orderNum">
-                <a-input placeholder="请输入订单号" v-model="addAdpacking.orderNum"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="款号" prop="styleNum">
-                <a-input placeholder="请输入款号" v-model="addAdpacking.styleNum"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="品名" prop="name">
-                <a-input placeholder="请输入品名" v-model="addAdpacking.name"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="尺码范围" prop="sizeRange">
-                <a-input placeholder="请输入尺码范围" v-model="addAdpacking.sizeRange"></a-input>
-                <!-- <a-select placeholder="请选择尺码范围">
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="addAdpacking" :rules="validatorRules">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="订单号" prop="orderNum">
+                  <a-input placeholder="请输入订单号" v-model="addAdpacking.orderNum"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="款号" prop="styleNum">
+                  <a-input placeholder="请输入款号" v-model="addAdpacking.styleNum"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="品名" prop="name">
+                  <a-input placeholder="请输入品名" v-model="addAdpacking.name"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="尺码范围" prop="sizeRange">
+                  <a-input placeholder="请输入尺码范围" v-model="addAdpacking.sizeRange"></a-input>
+                  <!-- <a-select placeholder="请选择尺码范围">
                 <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="customer">
-                <a-input placeholder="请输入客户" v-model="addAdpacking.customer"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="集装箱代号" prop="containerCode">
-                <a-input placeholder="请输入集装箱代号" v-model="addAdpacking.containerCode"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="集装箱号" prop="containerNo">
-                <a-input placeholder="请输入集装箱号" v-model="addAdpacking.containerNo"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="备注" prop="note">
-                <a-input placeholder="请输入备注" v-model="addAdpacking.note"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="成衣工厂" prop="clothesFactory">
-                <a-input placeholder="请输入成衣工厂" v-model="addAdpacking.clothesFactory"></a-input>
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-        </a-form-model>
-      </div>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="客户" prop="customer">
+                  <a-input placeholder="请输入客户" v-model="addAdpacking.customer"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="集装箱代号" prop="containerCode">
+                  <a-input placeholder="请输入集装箱代号" v-model="addAdpacking.containerCode"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="集装箱号" prop="containerNo">
+                  <a-input placeholder="请输入集装箱号" v-model="addAdpacking.containerNo"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="备注" prop="note">
+                  <a-input placeholder="请输入备注" v-model="addAdpacking.note"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="成衣工厂" prop="clothesFactory">
+                  <a-input placeholder="请输入成衣工厂" v-model="addAdpacking.clothesFactory"></a-input>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
 
       <!--操作按钮区域 参照发运明细 増行-->
-      <div class="table-operator">
-        <a-button type="primary" @click="referShipmentDetails" icon="ordered-list">参照发运明细</a-button>
-        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-      </div>
-
-      <!-- 子表 ipagination-->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef" :rules="validatorRules">
-          <a-table
-            bordered
-            rowKey="id"
-            :columns="columns"
-            :data-source="data"
-            :loading="loading"
-            :pagination="false"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-            <!-- 结束箱号 输入框-->
-            <template slot="endBoxNo" slot-scope="text, record, index">
-              <a-form-model-item prop="endBoxNo" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.endBoxNo" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 颜色（中英文） -->
-            <template slot="colorChUsa" slot-scope="text, record, index">
-              <a-form-model-item prop="colorChUsa" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.colorChUsa" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 箱数 -->
-            <template slot="boxes" slot-scope="text, record, index">
-              <a-form-model-item prop="boxes" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.boxes" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 总件数 -->
-            <template slot="totalPackagesNum" slot-scope="text, record, index">
-              <a-form-model-item prop="totalPackagesNum" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.totalPackagesNum" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 总净重 -->
-            <template slot="totalSuttle" slot-scope="text, record, index">
-              <a-form-model-item prop="totalSuttle" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.totalSuttle" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 总毛重 -->
-            <template slot="totalRoughWeigh" slot-scope="text, record, index">
-              <a-form-model-item prop="totalRoughWeigh" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.totalRoughWeigh" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 外箱宽度 -->
-            <template slot="boxWidth" slot-scope="text, record, index">
-              <a-form-model-item prop="boxWidth" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.boxWidth" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 外箱高度 -->
-            <template slot="boxHeight" slot-scope="text, record, index">
-              <a-form-model-item prop="boxHeight" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.boxHeight" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 总体积 -->
-            <template slot="totalVolume" slot-scope="text, record, index">
-              <a-form-model-item prop="totalVolume" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.totalVolume" />
-              </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>
-              <a-divider type="vertical" />
-              <a @click="copy(record)">复制</a>
-            </span>
-          </a-table>
-        </a-form-model>
-      </a-spin>
-
+      <a-card :bordered="true" style="margin:10px 0 60px 0">
+        <div class="table-operator">
+          <a-button type="primary" @click="referShipmentDetails" 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
+              rowKey="id"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+              <!-- 结束箱号 输入框-->
+              <template slot="endBoxNo" slot-scope="text, record, index">
+                <a-form-model-item prop="endBoxNo" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.endBoxNo" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 颜色（中英文） -->
+              <template slot="colorChUsa" slot-scope="text, record, index">
+                <a-form-model-item prop="colorChUsa" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.colorChUsa" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 箱数 -->
+              <template slot="boxes" slot-scope="text, record, index">
+                <a-form-model-item prop="boxes" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.boxes" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 总件数 -->
+              <template slot="totalPackagesNum" slot-scope="text, record, index">
+                <a-form-model-item prop="totalPackagesNum" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.totalPackagesNum" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 总净重 -->
+              <template slot="totalSuttle" slot-scope="text, record, index">
+                <a-form-model-item prop="totalSuttle" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.totalSuttle" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 总毛重 -->
+              <template slot="totalRoughWeigh" slot-scope="text, record, index">
+                <a-form-model-item prop="totalRoughWeigh" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.totalRoughWeigh" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 外箱宽度 -->
+              <template slot="boxWidth" slot-scope="text, record, index">
+                <a-form-model-item prop="boxWidth" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.boxWidth" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 外箱高度 -->
+              <template slot="boxHeight" slot-scope="text, record, index">
+                <a-form-model-item prop="boxHeight" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.boxHeight" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 总体积 -->
+              <template slot="totalVolume" slot-scope="text, record, index">
+                <a-form-model-item prop="totalVolume" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.totalVolume" />
+                </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>
+                <a-divider type="vertical" />
+                <a @click="copy(record)">复制</a>
+              </span>
+            </a-table>
+          </a-form-model>
+        </a-spin>
+      </a-card>
       <!-- 页面底部提交取消 -->
       <div
         :style="{
@@ -199,7 +201,7 @@
       :father="aa"
       @ok="modalFormOk"
     ></referShipmentDetails-modal>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -566,4 +568,12 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
 </style>

src/views/cost-allocation-total/detailsDrawer.vue

@@ -388,19 +388,18 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
-
-/deep/ .ant-card-body {
-  // padding: 0;
+/deep/ .ant-tabs {
+  border: 2px solid rgba(24, 144, 255, 0.3);
+  padding: 10px;
+  border-radius: 10px;
 }
+
+// 抽屉里的card样式
 /deep/ .ant-drawer-content {
   background-color: #f0f2f5;
 }
 /deep/ .ant-drawer-body {
   padding: 10px;
 }
-/deep/ .ant-tabs {
-  border: 2px solid rgba(24, 144, 255, 0.3);
-  padding: 10px;
-  border-radius: 10px;
-}
+
 </style>

src/views/order/orderDetailDrawer.vue

@@ -1,147 +1,150 @@
 <template>
-  <!-- 订单数据明细 -->
+  <!-- 订单数据详情 信息全部回显-->
   <a-drawer
-    title="订单数据明细"
+    title="详情"
     width="89%"
     placement="right"
     :closable="true"
     :visible="visible"
     @close="onClose">
+
     <!--主表信息 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
-            <a-form-item label="订单号">
-              <a-input v-model="orderDetail.orderNum"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="订单日期">
-              <a-input v-model="orderDetail.orderDate"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="业务类型">
-              <a-input v-model="orderDetail.businessType"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="销售类型">
-              <a-input v-model="orderDetail.saleType"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="客户简称">
-              <a-input v-model="orderDetail.customerShortName"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="客户名称">
-              <a-input v-model="orderDetail.customerName"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="汇率">
-              <a-input v-model="orderDetail.exchangeRate"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="销售部门">
-              <a-input v-model="orderDetail.salesDepartment"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="业务员">
-              <a-input v-model="orderDetail.salesman"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="币种">
-              <a-input v-model="orderDetail.currency"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="品牌方">
-              <a-input v-model="orderDetail.brand"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="第三方">
-              <a-input v-model="orderDetail.thirdparty"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="定金比例(%)">
-              <a-input v-model="orderDetail.depositRatio"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="定金">
-              <a-input v-model="orderDetail.deposit"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="协同路线">
-              <a-input v-model="orderDetail.collaborativeRoute"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="订单备注">
-              <a-input v-model="orderDetail.orderNote"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="价格备注">
-              <a-input v-model="orderDetail.priceNote"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="客户订单号">
-              <a-input v-model="orderDetail.customerOrderNum"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="整单合计">
-              <a-input v-model="orderDetail.documentTotal"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="最终客户">
-              <a-input v-model="orderDetail.finalCustomer"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="付款条件">
-              <a-input v-model="orderDetail.paymentClause"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="18" :sm="12">
-            <a-form-item label="订单变更说明">
-              <a-input v-model="orderDetail.orderChangeDesc"></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- table区域  -->
-    <div>
+    <a-card :bordered="true">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单号">
+                <a-input v-model="orderDetail.orderNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单日期">
+                <a-input v-model="orderDetail.orderDate"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="业务类型">
+                <a-input v-model="orderDetail.businessType"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="销售类型">
+                <a-input v-model="orderDetail.saleType"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="客户简称">
+                <a-input v-model="orderDetail.customerShortName"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="客户名称">
+                <a-input v-model="orderDetail.customerName"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="汇率">
+                <a-input v-model="orderDetail.exchangeRate"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="销售部门">
+                <a-input v-model="orderDetail.salesDepartment"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="业务员">
+                <a-input v-model="orderDetail.salesman"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="币种">
+                <a-input v-model="orderDetail.currency"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="品牌方">
+                <a-input v-model="orderDetail.brand"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="第三方">
+                <a-input v-model="orderDetail.thirdparty"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="定金比例(%)">
+                <a-input v-model="orderDetail.depositRatio"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="定金">
+                <a-input v-model="orderDetail.deposit"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="协同路线">
+                <a-input v-model="orderDetail.collaborativeRoute"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单备注">
+                <a-input v-model="orderDetail.orderNote"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="价格备注">
+                <a-input v-model="orderDetail.priceNote"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="客户订单号">
+                <a-input v-model="orderDetail.customerOrderNum"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="整单合计">
+                <a-input v-model="orderDetail.documentTotal"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="最终客户">
+                <a-input v-model="orderDetail.finalCustomer"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="付款条件">
+                <a-input v-model="orderDetail.paymentClause"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="18" :sm="12">
+              <a-form-item label="订单变更说明">
+                <a-input v-model="orderDetail.orderChangeDesc"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-card>
+
+    <!-- 子表  -->
+    <a-card :bordered="true" style="margin:10px 0">
       <a-table
         bordered
         :columns="detailColumns"
@@ -152,7 +155,7 @@
         @change="handleTableChange"
       >
       </a-table>
-    </div>
+    </a-card>
   </a-drawer>
 </template>
 
@@ -166,7 +169,7 @@ export default {
   data() {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
     return {
-      description: '订单销售明细 抽屉',
+      description: '订单数据详情 抽屉',
       visible: false, // 抽屉
 
       // 表头
@@ -239,4 +242,12 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
 </style>

src/views/order/orderList.vue

@@ -1,105 +1,108 @@
 <template>
-  <!-- 订单数据列表 -->
-  <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.orderData"
-                placeholder="请选择订单日期"
-              ></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>
+  <!-- 订单数据 -->
+  <div id="orderList">
+    <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>
 
-          <template v-if="toggleSearchStatus">
             <a-col :md="6" :sm="8">
-              <a-form-item label="账套">
-                <a-select placeholder="请选择账套" v-model="queryParam.accountSet">
-                  <a-select-option :value="''">请选择</a-select-option>
-                  <a-select-option :value="0">香港森语(101)</a-select-option>
-                  <a-select-option :value="1">宁波森语(102)</a-select-option>
-                  <a-select-option :value="2">宁波马菲羊(103)</a-select-option>
-                </a-select>
+              <a-form-item label="订单日期" has-feedback>
+                <a-date-picker
+                  style="width: 100%"
+                  v-model="queryParam.orderData"
+                  placeholder="请选择订单日期"
+                ></a-date-picker>
               </a-form-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="发货状态">
-                <a-select placeholder="请选择发货状态" v-model="queryParam.shippingStatu">
-                  <a-select-option :value="''">请选择</a-select-option>
-                  <a-select-option :value="0">未发货</a-select-option>
-                  <a-select-option :value="1">已发货</a-select-option>
-                </a-select>
+              <a-form-item label="客户简称">
+                <a-input placeholder="请输入客户简称" v-model="queryParam.customerShortName"></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>
+            <template v-if="toggleSearchStatus">
+              <a-col :md="6" :sm="8">
+                <a-form-item label="账套">
+                  <a-select placeholder="请选择账套" v-model="queryParam.accountSet">
+                    <a-select-option :value="''">请选择</a-select-option>
+                    <a-select-option :value="0">香港森语(101)</a-select-option>
+                    <a-select-option :value="1">宁波森语(102)</a-select-option>
+                    <a-select-option :value="2">宁波马菲羊(103)</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
 
-    <!-- 操作按钮区域 -->
-    <div class="table-operator">
-      <a-button type="primary" @click="synchronization" icon="reload">同步</a-button>
-    </div>
+              <a-col :md="6" :sm="8">
+                <a-form-item label="发货状态">
+                  <a-select placeholder="请选择发货状态" v-model="queryParam.shippingStatu">
+                    <a-select-option :value="''">请选择</a-select-option>
+                    <a-select-option :value="0">未发货</a-select-option>
+                    <a-select-option :value="1">已发货</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+            </template>
 
-    <!-- table区域  rowKey="id" -->
-    <div>
-      <a-table
-        bordered
-        :row-key="record => record.id"
-        :columns="orderLIstColumns"
-        :data-source="orderListData"
-        :loading="loading"
-        :pagination="ipagination"
-        :scroll="{ x: 1500 }"
-        @change="handleTableChange"
-      >
-        <!-- 订单号 链接-->
-        <span slot="orderNum" slot-scope="text">
-          <a>{{ text }}</a>
-        </span>
+            <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="synchronization" icon="reload">同步</a-button>
+      </div>
 
-        <!-- 同步状态 -->
-        <!-- slot-scope="text, record" -->
-        <span slot="synchronousStats">
-          <!-- v-if="record.isRelease == '0'" -->
-          <a-tag color="green">同步成功</a-tag>
-          <!-- <a-tag color="red" v-else>同步失败</a-tag> -->
-          <!-- <a-tag color="orange" v-else>未同步</a-tag> -->
-        </span>
-      </a-table>
-    </div>
+      <!-- table区域  rowKey="id" -->
+      <div>
+        <a-table
+          bordered
+          :row-key="record => record.id"
+          :columns="orderLIstColumns"
+          :data-source="orderListData"
+          :loading="loading"
+          :pagination="ipagination"
+          :scroll="{ x: 1500 }"
+          @change="handleTableChange"
+        >
+          <!-- 订单号 链接-->
+          <span slot="orderNum" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
 
+          <!-- 同步状态 -->
+          <!-- slot-scope="text, record" -->
+          <span slot="synchronousStats">
+            <!-- v-if="record.isRelease == '0'" -->
+            <a-tag color="green">同步成功</a-tag>
+            <!-- <a-tag color="red" v-else>同步失败</a-tag> -->
+            <!-- <a-tag color="orange" v-else>未同步</a-tag> -->
+          </span>
+        </a-table>
+      </div>
+    </a-card>
     <!-- 订单数据明细 抽屉 -->
     <orderDetail-drawer ref="orderDetailDrawer" :father="aa" @ok="modalFormOk"></orderDetail-drawer>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -117,7 +120,6 @@ export default {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
 
     return {
-      description: '订单销售列表页面',
       // 表头
       orderLIstColumns: [
         {

src/views/pre-book/addPreBook.vue

@@ -1,497 +0,0 @@
-<template>
-  <!-- 新增预托书 -->
-  <a-card :bordered="false">
-    <!-- 主表信息 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
-            <a-form-item label="托书日期">
-              <a-date-picker
-                @change="bookDateChange"
-                placeholder="请选择托书日期"
-                style="width:100%;"
-                v-model="preBook.bookDate"
-              />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="托书号">
-              <a-input placeholder="请输入托书号" v-model="preBook.bookNum"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="12" :sm="12">
-            <a-form-item label="外销发票号码">
-              <a-input placeholder="请输入外销发票号码" v-model="preBook.exportInvoiceNo"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="经营单位">
-              <a-input placeholder="请输入经营单位" v-model="preBook.businessUnit"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="经营单位地址">
-              <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-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="进仓/装柜日期">
-              <a-date-picker
-                @change="enterInstallDateChange"
-                placeholder="请选择进仓/装柜日期"
-                style="width:100%;"
-                v-model="preBook.inLoadDate"
-              />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="最终船期">
-              <a-input placeholder="请输入最终船期" v-model="preBook.finalShipDate"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="收货人">
-              <a-input placeholder="请输入收货人" v-model="preBook.consignee"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="收货人地址">
-              <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-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="通知方">
-              <a-input placeholder="请输入通知方" v-model="preBook.notifying"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="通知方地址">
-              <a-input placeholder="请输入通知方地址" v-model="preBook.notifyingAdd"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="贸易国别">
-              <a-input placeholder="请输入贸易国别" v-model="preBook.tradeCountry"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="运抵国别">
-              <a-input placeholder="请输入运抵国别" v-model="preBook.arriveCountry"></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
-            <a-form-item label="出口口岸">
-              <a-input placeholder="请输入出口口岸" v-model="preBook.exportPort"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="目的港">
-              <a-input placeholder="请输入目的港" v-model="preBook.destinationport"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="收汇方式">
-              <a-input placeholder="请输入收汇方式" v-model="preBook.collectionMethod"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="成交方式">
-              <a-input placeholder="请输入成交方式" v-model="preBook.soldType"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="金额">
-              <a-input placeholder="请输入金额" v-model="preBook.money"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="人民币">
-              <a-input placeholder="请输入人民币" v-model="preBook.RMB"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="美元">
-              <a-input placeholder="请输入美元" v-model="preBook.dollar"></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!--操作按钮区域 参照预装箱单  増行-->
-    <div class="table-operator">
-      <a-button type="primary" @click="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
-      <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-    </div>
-
-    <!-- table , y: 300-->
-    <div>
-      <a-table
-        bordered
-        rowKey="id"
-        :columns="addPerBookColumns"
-        :data-source="addPerBookData"
-        :loading="loading"
-        :pagination="ipagination"
-        :scroll="{ x: 1500 }"
-        @change="handleTableChange"
-      >
-        <!-- 操作 -->
-        <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>
-    </div>
-
-    <!-- 人民币、美金 -->
-    <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:20px;">
-      <a-col :md="24" :sm="12">
-        <span style="float: right;overflow: hidden;">
-          <a-button type="primary" style="left: 10px" @click="save">保存</a-button>
-          <a-button type="primary" @click="cancel" style="margin-left: 20px">取消</a-button>
-        </span>
-      </a-col>
-    </a-row>
-
-    <!-- 参照预装箱单 -->
-    <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
-  </a-card>
-</template>
-
-<script>
-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: 'AddPreBook', //
-  computed: {},
-  mixins: [JeecgListMixin],
-  components: { AdvancePackingListModal, JEllipsis, moment }, // 参照预装箱单 弹框
-  data() {
-    return {
-      // 表头
-      addPerBookColumns: [
-        {
-          title: '英文名称',
-          dataIndex: 'englishName',
-          width: 120,
-          key: '',
-          fixed: 'left',
-          className: 'replacecolor'
-        },
-        {
-          title: '款号',
-          dataIndex: 'styleNum',
-          width: 120,
-          key: '',
-          fixed: 'left',
-          className: 'replacecolor'
-        },
-        {
-          title: '小po号',
-          dataIndex: 'smallPoNum',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '数量',
-          dataIndex: 'quantity',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '箱数',
-          dataIndex: 'boxedNum',
-          width: 90,
-          key: '',
-          className: 'replacecolor'
-        },
-
-        {
-          title: '毛重',
-          dataIndex: 'roughWeigh',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '净重',
-          dataIndex: 'suttle',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '体积',
-          dataIndex: 'volume',
-          width: 160,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '分销点',
-          dataIndex: 'distributionPoint',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '集装箱代号',
-          dataIndex: 'containerCode',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-
-        {
-          title: '集装箱号',
-          dataIndex: 'containerNo',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '单价',
-          dataIndex: 'price',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        //         {
-        //   title: '创建时间',
-        //   dataIndex: 'createTime',
-        //   align: 'center',
-        //   sorter: true,
-        //   customRender: text => {
-        //     return moment(text).format('YYYY-MM-DD')
-        //   }
-        // },
-        {
-          title: '预发货日期',
-          dataIndex: 'scheduledShipDate',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '业务员',
-          dataIndex: 'salesman',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-
-        {
-          title: '业务部门',
-          dataIndex: 'operatingDepartment',
-          width: 120,
-          key: '',
-          className: 'replacecolor'
-        },
-        {
-          title: '采购/委外订单号',
-          dataIndex: 'purchaseAboardOrderNum',
-          width: 160,
-          key: '',
-          className: 'replacecolor'
-        },
-
-        {
-          title: '采购/委外工厂',
-          dataIndex: 'purchaseAboardFactory',
-          width: 160,
-          key: '',
-          className: 'replacecolor'
-        },
-
-        {
-          title: '操作',
-          dataIndex: 'operation',
-          scopedSlots: { customRender: 'operationSlot' },
-          width: 160,
-          key: '',
-          fixed: 'right',
-          className: 'replacecolor'
-        }
-      ],
-      addPerBookData: [{}, {}, {}, {}, {}],
-      //  RMBColumns ： [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //         key: '',
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //         key: '',
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //         key: '',
-      //         className: 'replacecolor'
-      //     }]，
-      //  RMBData ； [{}]，
-
-      //  USDColumns ； [
-      //     {
-      //         title: '货代',
-      //         dataIndex: '',
-      //         width: 20,
-      //         key: '',
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '金额',
-      //         dataIndex: '',
-      //         width: 20,
-      //         key: '',
-      //         className: 'replacecolor'
-      //     },
-      //     {
-      //         title: '项目列',
-      //         dataIndex: '',
-      //         width: 20,
-      //         key: '',
-      //         className: 'replacecolor'
-      //     }],
-      //  USDData : [{}]
-      loading: false, // 表格加载
-      preBook: []
-    }
-  },
-  created() {},
-  methods: {
-    aa() {}, // father
-    // 保存按钮
-    save() {},
-    // 返回
-    cancel() {
-      this.$router.push('preBookList')
-    },
-    //  操作按钮 删除
-    handleDelete() {},
-    // 操作按钮 复制
-    copy() {},
-
-    // 参照预装箱单
-    referadvancePackingList() {
-      console.log('打开参照订单数据')
-      // 打开订单数据弹框
-      this.$refs.advancePackingListModal.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.addPerBookData.push(addrow)
-    },
-    // 托书 日期
-    bookDateChange() {},
-    // 进仓/装柜子 日期
-    enterInstallDateChange() {},
-    // ==============================================================
-
-    // ??
-    modalFormOk() {}
-    // // 分页、排序、筛选变化时触发
-    // handleTableChange(pagination, filters, sorter) {
-    //   // console.log('当前页信息>>>>',pagination)
-    //   this.queryParam.pageNo = pagination.current
-    //   this.getAnnList()
-    // }
-  },
-
-  mounted() {}
-}
-</script>
-<style lang="less" scoped>
-@import '~@assets/less/common.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/pre-book/addPreBookDrawer.vue

@@ -0,0 +1,565 @@
+<template>
+  <!-- 新增预托书 -->
+  <div id="addPreBookDrawer">
+    <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="preBook" :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="preBook.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="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-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-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-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="inLoadDate">
+                  <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-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-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-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="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-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-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-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-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-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-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-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-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-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-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
+
+      <!--操作按钮区域 参照预装箱单  増行-->
+      <a-card :bordered="true" style="marginTop:10px;">
+        <div class="table-operator">
+          <a-button type="primary" @click="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
+
+        <!-- table , y: 300-->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              rowKey="id"
+              :columns="addPerBookColumns"
+              :data-source="addPerBookData"
+              :loading="loading"
+              :pagination="ipagination"
+              :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>
+
+      <!-- 页面底部保存取消 -->
+      <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>
+    <!-- 参照预装箱单 -->
+    <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
+  </div>
+</template>
+
+<script>
+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: 'AddPreBookDrawer', // 新增预托书
+  computed: {},
+  mixins: [JeecgListMixin],
+  components: { AdvancePackingListModal, JEllipsis, moment }, // 参照预装箱单 弹框
+  data() {
+    return {
+      // 表头
+      addPerBookColumns: [
+        {
+          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',
+          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'
+        }
+      ],
+      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 : [{}],
+
+      loading: false, // 表格加载
+      preBook: {},
+      confirmLoading: false,
+      visible: false,
+      dateFormat: 'YYYY-MM-DD',
+      validatorRules: {
+        bookDate: [{ required: true, message: '托书日期不能为空', trigger: 'blur' }]
+        // 确定必填项
+      }
+    }
+  },
+  created() {},
+  methods: {
+    // 参照预装箱单
+    referadvancePackingList() {
+      console.log('打开参照订单数据')
+      // 打开订单数据弹框
+      this.$refs.advancePackingListModal.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.addPerBookData.push(addrow)
+    },
+
+    // ------------------------------------------
+    // 操作 删除
+    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()
+    // }
+  },
+
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.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;
+}
+</style>

src/views/pre-book/detailsPreBookDrawer.vue

@@ -0,0 +1,477 @@
+<template>
+  <!-- 详情预托书  回显所有信息-->
+  <div id="editPreBookDrawer">
+    <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="preBook">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书日期" prop="bookDate">
+                  2022-03-15
+                  <!-- <a-date-picker
+                    placeholder="请选择托书日期"
+                    style="width:100%;"
+                    :format="dateFormat"
+                    v-model="preBook.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="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-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-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-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="inLoadDate">
+                  <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-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-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-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="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-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-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-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-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-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-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-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-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-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-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
+
+      <!--操作按钮区域 参照预装箱单  増行-->
+      <a-card :bordered="true" style="marginTop:10px;">
+        <!-- table , y: 300-->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef">
+            <a-table
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="ipagination"
+              :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-drawer>
+    <!-- 参照预装箱单 -->
+    <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
+  </div>
+</template>
+
+<script>
+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 }, // 参照预装箱单 弹框
+  data() {
+    return {
+      // 表头
+      columns: [
+        {
+          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',
+          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: [{}, {}],
+      //  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 : [{}],
+
+      loading: false, // 表格加载
+      preBook: {},
+      confirmLoading: false,
+      visible: false,
+      dateFormat: 'YYYY-MM-DD'
+    }
+  },
+  created() {},
+  methods: {
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+
+    // ------------------------------------------
+    modalFormOk() {},
+    aa() {}
+  },
+
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.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;
+}
+</style>

src/views/pre-book/editPreBookDrawer.vue

@@ -0,0 +1,564 @@
+<template>
+  <!-- 编辑预托书 -->
+  <div id="editPreBookDrawer">
+    <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="preBook" :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="preBook.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="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-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-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-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="inLoadDate">
+                  <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-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-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-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="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-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-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-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-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-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-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-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-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-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-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
+
+      <!--操作按钮区域 参照预装箱单  増行-->
+      <a-card :bordered="true" style="marginTop:10px;">
+        <div class="table-operator">
+          <a-button type="primary" @click="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
+
+        <!-- table , y: 300-->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="ipagination"
+              :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>
+
+      <!-- 页面底部保存取消 -->
+      <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>
+    <!-- 参照预装箱单 -->
+    <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
+  </div>
+</template>
+
+<script>
+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: 'EditPreBookDrawer', // 编辑预托书
+  computed: {},
+  mixins: [JeecgListMixin],
+  components: { AdvancePackingListModal, JEllipsis, moment }, // 参照预装箱单 弹框
+  data() {
+    return {
+      // 表头
+      columns: [
+        {
+          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',
+          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: [{}, {}],
+      //  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 : [{}],
+
+      loading: false, // 表格加载
+      preBook: {},
+      confirmLoading: false,
+      visible: false,
+      dateFormat: 'YYYY-MM-DD',
+      validatorRules: {
+        bookDate: [{ required: true, message: '托书日期不能为空', trigger: 'blur' }]
+        // 确定必填项
+      }
+    }
+  },
+  created() {},
+  methods: {
+    // 参照预装箱单
+    referadvancePackingList() {
+      console.log('打开参照订单数据')
+      // 打开订单数据弹框
+      this.$refs.advancePackingListModal.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)
+    },
+
+    // ------------------------------------------
+    // 操作 删除
+    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()
+    // }
+  },
+
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.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;
+}
+</style>

src/views/pre-book/preBookList.vue

@@ -1,71 +1,73 @@
 <template>
-  <!-- 预托书列表 -->
-  <a-card :bordered="false">
+  <!-- 预托书列表 回显可编辑信息-->
+  <div id="preBookList">
     <!-- 查询区域 -->
-    <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-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.boxNo"></a-input>
+              <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="小po号">
-                <a-input placeholder="请输入小po号" v-model="queryParam.smallPo"></a-input>
+              <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.preBookNum"></a-input>
+              <a-form-item label="客户简称">
+                <a-input placeholder="请输入客户简称" v-model="queryParam.customerShortName"></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>
+
+            <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>
 
     <!-- 操作按钮区域 新增-->
-    <div class="table-operator">
-      <a-button type="primary" @click="addPreBook" icon="plus">新增</a-button>
-    </div>
+    <a-card :bordered="false" style="marginTop:10px;">
+      <div class="table-operator">
+        <a-button type="primary" @click="addPreBookDrawer" icon="plus">新增</a-button>
+      </div>
 
-    <!-- table , y: 300 -->
-    <div>
+      <!-- 子表 -->
       <a-table
         bordered
-        rowKey="id"
+        :row-key="record => record.id"
         :columns="preBookListColumns"
         :data-source="preBookListData"
         :loading="loading"
@@ -73,18 +75,13 @@
         @change="handleTableChange"
         :scroll="{ x: 1500 }"
       >
-        <!-- 金额 -->
-        <a-form-model
-          slot="money"
-          slot-scope="text, record"
-          :ref="record.index"
-          :model="record"
-          style="width:100%;height:40px"
-        >
-          <a-form-model-item prop="money">
-            <a-input style="width:100%" v-model="record.money" />
+        <!-- 金额 输入框-->
+
+        <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>
-        </a-form-model>
+        </template>
 
         <!-- 单据状态 -->
         <span slot="documentStateSlot">
@@ -103,8 +100,8 @@
           <a-dropdown>
             <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
             <a-menu slot="overlay">
-              <a-menu-item><a @click="checke(record)">查看</a></a-menu-item>
-              <a-menu-item><a @click="edit(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)">
@@ -115,8 +112,13 @@
           </a-dropdown>
         </span>
       </a-table>
-    </div>
-  </a-card>
+    </a-card>
+
+    <!-- 抽屉 -->
+    <addPreBook-drawer ref="addPreBookDrawer" :father="aa" @ok="modalFormOk"></addPreBook-drawer>
+    <detailsPreBook-drawer ref="detailsPreBookDrawer" :father="bb" @ok="modalFormOk"></detailsPreBook-drawer>
+    <editPreBook-drawer ref="editPreBookDrawer" :father="cc" @ok="modalFormOk"></editPreBook-drawer>
+  </div>
 </template>
 
 <script>
@@ -124,10 +126,14 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
 
+import addPreBookDrawer from '@views/pre-book/addPreBookDrawer.vue'
+import detailsPreBookDrawer from '@views/pre-book/detailsPreBookDrawer.vue'
+import editPreBookDrawer from '@views/pre-book/editPreBookDrawer.vue'
+
 export default {
   name: 'PreBookList', // 预托书列表
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment },
+  components: { JEllipsis, moment, addPreBookDrawer, detailsPreBookDrawer, editPreBookDrawer },
   data() {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
 
@@ -250,25 +256,33 @@ export default {
     },
     // 重置
     searchReset() {
-      // console.log('>>>>重置')
       this.queryParam = {}
       // this.getpreBookList()
     },
+    // -----------------------------------
     // 新增
-    addPreBook() {
-      this.$router.push('addPreBook')
+    addPreBookDrawer() {
+      console.log('新增预托书')
+      this.$refs.addPreBookDrawer.visible = true
     },
 
+    // -----------------------------------
     // 操作 提交
-    submit() {},
-    // 操作 查看
-    checke() {},
-    // 操作 修改
-    edit() {},
+    submit(record) {},
+    // 操作 详情
+    details(record) {
+      this.$refs.detailsPreBookDrawer.visible = true
+    },
+    // 操作 编辑
+    edit(record) {
+      this.$refs.editPreBookDrawer.visible = true
+    },
     // 操作 打印
-    print() {},
+    print(record) {},
     // 操作 删除
-    handleDelete() {}
+    handleDelete(id) {
+      console.log('id:', id)
+    },
 
     // // 分页、排序、筛选变化时触发
     // handleTableChange(pagination, filters, sorter) {
@@ -276,6 +290,9 @@ export default {
     //   this.queryParam.pageNo = pagination.current
     //   this.getOrderList()
     // }
+    aa() {},
+    bb() {},
+    cc() {}
   },
   computed: {},
   mounted() {}

src/views/shipment-details/addShipDetDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 新增发运明细 -->
-  <a-card :bordered="false">
+  <div id="AddShipDetDrawer">
     <a-drawer
       title="新增发运明细"
       width="89%"
@@ -10,125 +10,127 @@
       @close="handleCancel"
     >
       <!-- 主表信息 填写-->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="addShipDet" :rules="validatorRules">
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="单据号" prop="orderNum">
-                <a-input placeholder="请输入单据号" v-model="addShipDet.orderNum"></a-input>
-              </a-form-model-item>
-            </a-col>
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="addShipDet" :rules="validatorRules">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="单据号" prop="orderNum">
+                  <a-input placeholder="请输入单据号" v-model="addShipDet.orderNum"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="单据日期" required prop="billDate">
-                <a-date-picker
-                  placeholder="请选择单据日期"
-                  :format="dateFormat"
-                  style="width:100%;"
-                  v-model="addShipDet.billDate"
-                />
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="单据日期" required prop="billDate">
+                  <a-date-picker
+                    placeholder="请选择单据日期"
+                    :format="dateFormat"
+                    style="width:100%;"
+                    v-model="addShipDet.billDate"
+                  />
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="客户" prop="customer">
-                <a-input placeholder="请输入客户" v-model="addShipDet.customer"></a-input>
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="客户" prop="customer">
+                  <a-input placeholder="请输入客户" v-model="addShipDet.customer"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="预发货日期" required prop="scheduledShipDate">
-                <a-date-picker
-                  placeholder="请选择预发货时间"
-                  :format="dateFormat"
-                  style="width:100%;"
-                  v-model="addShipDet.scheduledShipDate"
-                />
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="预发货日期" required prop="scheduledShipDate">
+                  <a-date-picker
+                    placeholder="请选择预发货时间"
+                    :format="dateFormat"
+                    style="width:100%;"
+                    v-model="addShipDet.scheduledShipDate"
+                  />
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="预完工日期" required prop="scheduledDoneDate">
-                <a-date-picker
-                  placeholder="请选择预完工时间"
-                  :format="dateFormat"
-                  style="width:100%;"
-                  v-model="addShipDet.scheduledDoneDate"
-                />
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="18" :sm="18">
-              <a-form-model-item label="备注" prop="note">
-                <a-input placeholder="请输入备注" v-model="addShipDet.note"></a-input>
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-        </a-form-model>
-      </div>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="预完工日期" required prop="scheduledDoneDate">
+                  <a-date-picker
+                    placeholder="请选择预完工时间"
+                    :format="dateFormat"
+                    style="width:100%;"
+                    v-model="addShipDet.scheduledDoneDate"
+                  />
+                </a-form-model-item>
+              </a-col>
 
+              <a-col :md="18" :sm="18">
+                <a-form-model-item label="备注" prop="note">
+                  <a-input placeholder="请输入备注" v-model="addShipDet.note"></a-input>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
       <!--  参照订单数据 増行-->
-      <div class="table-operator">
-        <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
-        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-      </div>
-
-      <!-- 子表  :model="form" :pagination="ipagination" -->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef" :rules="validatorRules">
-          <a-table
-            bordered
-            :row-key="record => record.id"
-            :columns="columns"
-            :data-source="data"
-            :loading="loading"
-            :pagination="false"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-            <!-- 款号 输入框 -->
-            <template slot="styleNum" slot-scope="text, record, index">
-              <a-form-model-item prop="styleNum" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.styleNum" />
-              </a-form-model-item>
-            </template>
+      <a-card :bordered="true" style="margin:10px 0">
+        <div class="table-operator">
+          <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
 
-            <!-- 发货数量 -->
-            <template slot="shipQuantity" slot-scope="text, record, index">
-              <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
-                <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
-              </a-form-model-item>
-            </template>
+        <!-- 子表  :model="form" :pagination="ipagination" -->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              :row-key="record => record.id"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="false"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+              <!-- 款号 输入框 -->
+              <template slot="styleNum" slot-scope="text, record, index">
+                <a-form-model-item prop="styleNum" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.styleNum" />
+                </a-form-model-item>
+              </template>
 
-            <!-- 是否TC功能 -->
-            <template slot="isTC" slot-scope="text, record, index">
-              <a-form-model-item prop="isEnable" :rules="rules.isTC">
-                <a-select v-model="record.isTC">
-                  <a-select-option :value="1">是</a-select-option>
-                  <a-select-option :value="2">否</a-select-option>
-                </a-select>
-              </a-form-model-item>
-            </template>
+              <!-- 发货数量 -->
+              <template slot="shipQuantity" slot-scope="text, record, index">
+                <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
+                  <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
+                </a-form-model-item>
+              </template>
 
-            <!-- 物料成分 -->
-            <template slot="materialComposition" slot-scope="text, record, index">
-              <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
-                <a-input style="width:100%" type="text" v-model="record.materialComposition" />
-              </a-form-model-item>
-            </template>
+              <!-- 是否TC功能 -->
+              <template slot="isTC" slot-scope="text, record, index">
+                <a-form-model-item prop="isEnable" :rules="rules.isTC">
+                  <a-select v-model="record.isTC">
+                    <a-select-option :value="1">是</a-select-option>
+                    <a-select-option :value="2">否</a-select-option>
+                  </a-select>
+                </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>
-              <a-divider type="vertical" />
-              <a @click="copy(record)">复制</a>
-            </span>
-          </a-table>
-        </a-form-model>
-      </a-spin>
+              <!-- 物料成分 -->
+              <template slot="materialComposition" slot-scope="text, record, index">
+                <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
+                  <a-input style="width:100%" type="text" v-model="record.materialComposition" />
+                </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>
+                <a-divider type="vertical" />
+                <a @click="copy(record)">复制</a>
+              </span>
+            </a-table>
+          </a-form-model>
+        </a-spin>
+      </a-card>
       <!-- 页面底部保存取消 -->
       <div
         :style="{
@@ -154,21 +156,21 @@
 
     <!-- 参照订单数据弹框 -->
     <referOrderData-modal ref="referOrderDataModal" :father="aa" @ok="referOrderDataOk"></referOrderData-modal>
-  </a-card>
+  </div>
 </template>
 
 <script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
 import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
 
 export default {
   name: 'AddShipDetDrawer', // 新增 发运明细 抽屉
-  mixins: [JeecgListMixin], // 分页等
+  mixins: [JeecgListMixin],
   components: { JEllipsis, ReferOrderDataModal, moment }, // 参照订单数据 弹框
   data() {
-    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
     return {
       id: '',
       // 表头
@@ -540,4 +542,12 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
 </style>

src/views/shipment-details/detailsShipDetDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 详情 发运明细 全部回显-->
-  <a-card :bordered="false">
+  <div id="detailsShipDetDrawer">
     <a-drawer
       title="详情"
       width="89%"
@@ -9,74 +9,77 @@
       :visible="visible"
       @close="handleCancel">
       <!-- 主表信息 展示-->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="detailsShipDet">
-          <!-- 主表信息 填写-->
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="单据号" prop="orderNum">
-                <!-- <a-input v-model="detailsShipDet.orderNum"></a-input> -->
-                132fr34
-              </a-form-model-item>
-            </a-col>
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="detailsShipDet">
+            <!-- 主表信息 填写-->
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="单据号" prop="orderNum">
+                  <!-- <a-input v-model="detailsShipDet.orderNum"></a-input> -->
+                  132fr34
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="单据日期" prop="billDate">
-                2022-04-21
-                <!-- <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.billDate" /> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="单据日期" prop="billDate">
+                  2022-04-21
+                  <!-- <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.billDate" /> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="客户" prop="customer">
-                chenc
-                <!-- <a-input v-model="detailsShipDet.customer"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="客户" prop="customer">
+                  chenc
+                  <!-- <a-input v-model="detailsShipDet.customer"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="预发货日期" prop="scheduledShipDate">
-                2022-04-28
-                <!-- <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.scheduledShipDate" /> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="预发货日期" prop="scheduledShipDate">
+                  2022-04-28
+                  <!-- <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.scheduledShipDate" /> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="预完工日期" prop="scheduledDoneDate">
-                2022-04-26
-                <!-- <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.scheduledDoneDate" /> -->
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="18" :sm="18">
-              <a-form-model-item label="备注" prop="note">
-                务必按时发货，紧急
-                <!-- <a-input v-model="detailsShipDet.note"></a-input> -->
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-        </a-form-model>
-      </div>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="预完工日期" prop="scheduledDoneDate">
+                  2022-04-26
+                  <!-- <a-date-picker :format="dateFormat" style="width:100%;" v-model="detailsShipDet.scheduledDoneDate" /> -->
+                </a-form-model-item>
+              </a-col>
 
+              <a-col :md="18" :sm="18">
+                <a-form-model-item label="备注" prop="note">
+                  务必按时发货，紧急
+                  <!-- <a-input v-model="detailsShipDet.note"></a-input> -->
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
       <!-- 子表 :model="form" -->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef">
-          <a-table
-            bordered
-            rowKey="id"
-            size="middle"
-            :columns="columns"
-            :data-source="data"
-            :loading="loading"
-            :pagination="ipagination"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-          </a-table>
-        </a-form-model>
-      </a-spin>
+      <a-card :bordered="true" style="margin:10px 0">
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef">
+            <a-table
+              bordered
+              rowKey="id"
+              size="middle"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+            </a-table>
+          </a-form-model>
+        </a-spin>
+      </a-card>
     </a-drawer>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -89,7 +92,7 @@ export default {
   mixins: [JeecgListMixin],
   components: { JEllipsis, moment },
   data() {
-    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
     return {
       id: '',
       // 表头
@@ -356,4 +359,12 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
 </style>

src/views/shipment-details/editShipDetDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 编辑发运明细 -->
-  <a-card :bordered="false">
+  <div id="editShipDetDrawer">
     <a-drawer
       title="编辑"
       width="89%"
@@ -9,126 +9,129 @@
       :visible="visible"
       @close="handleCancel">
       <!-- 主表信息 编辑-->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="editShipDet" :rules="validatorRules">
-          <!-- 主表信息 填写-->
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="单据号" prop="orderNum">
-                <a-input placeholder="请输入单据号" v-model="editShipDet.orderNum"></a-input>
-              </a-form-model-item>
-            </a-col>
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="editShipDet" :rules="validatorRules">
+            <!-- 主表信息 填写-->
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="单据号" prop="orderNum">
+                  <a-input placeholder="请输入单据号" v-model="editShipDet.orderNum"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="单据日期" required prop="billDate">
-                <a-date-picker
-                  placeholder="请选择单据日期"
-                  :format="dateFormat"
-                  style="width:100%;"
-                  v-model="editShipDet.billDate"
-                />
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="单据日期" required prop="billDate">
+                  <a-date-picker
+                    placeholder="请选择单据日期"
+                    :format="dateFormat"
+                    style="width:100%;"
+                    v-model="editShipDet.billDate"
+                  />
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="客户" prop="customer">
-                <a-input placeholder="请输入客户" v-model="editShipDet.customer"></a-input>
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="客户" prop="customer">
+                  <a-input placeholder="请输入客户" v-model="editShipDet.customer"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="预发货日期" required prop="scheduledShipDate">
-                <a-date-picker
-                  placeholder="请选择预发货时间"
-                  :format="dateFormat"
-                  style="width:100%;"
-                  v-model="editShipDet.scheduledShipDate"
-                />
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="预发货日期" required prop="scheduledShipDate">
+                  <a-date-picker
+                    placeholder="请选择预发货时间"
+                    :format="dateFormat"
+                    style="width:100%;"
+                    v-model="editShipDet.scheduledShipDate"
+                  />
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="预完工日期" required prop="scheduledDoneDate">
-                <a-date-picker
-                  placeholder="请选择预完工时间"
-                  :format="dateFormat"
-                  style="width:100%;"
-                  v-model="editShipDet.scheduledDoneDate"
-                />
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="预完工日期" required prop="scheduledDoneDate">
+                  <a-date-picker
+                    placeholder="请选择预完工时间"
+                    :format="dateFormat"
+                    style="width:100%;"
+                    v-model="editShipDet.scheduledDoneDate"
+                  />
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="18" :sm="18">
-              <a-form-model-item label="备注" prop="note">
-                <a-input placeholder="请输入备注" v-model="editShipDet.note"></a-input>
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-        </a-form-model>
-      </div>
+              <a-col :md="18" :sm="18">
+                <a-form-model-item label="备注" prop="note">
+                  <a-input placeholder="请输入备注" v-model="editShipDet.note"></a-input>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
 
       <!--  参照订单数据 増行-->
-      <div class="table-operator">
-        <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
-        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-      </div>
-
-      <!-- 子表  :model="form" :pagination="ipagination"-->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef" :rules="validatorRules">
-          <a-table
-            bordered
-            rowKey="id"
-            :columns="columns"
-            :data-source="data"
-            :loading="loading"
-            :pagination="false"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-            <!-- 款号 输入框 -->
-            <template slot="styleNum" slot-scope="text, record, index">
-              <a-form-model-item prop="styleNum" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.styleNum" />
-              </a-form-model-item>
-            </template>
+      <a-card :bordered="true" style="margin:10px 0 60px 0">
+        <div class="table-operator">
+          <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
 
-            <!-- 发货数量 -->
-            <template slot="shipQuantity" slot-scope="text, record, index">
-              <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
-                <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
-              </a-form-model-item>
-            </template>
+        <!-- 子表  :model="form" :pagination="ipagination"-->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :data-source="data"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+              <!-- 款号 输入框 -->
+              <template slot="styleNum" slot-scope="text, record, index">
+                <a-form-model-item prop="styleNum" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.styleNum" />
+                </a-form-model-item>
+              </template>
 
-            <!-- 是否TC功能 -->
-            <template slot="isTC" slot-scope="text, record, index">
-              <a-form-model-item prop="isEnable" :rules="rules.isTC">
-                <a-select v-model="record.isTC">
-                  <a-select-option :value="1">是</a-select-option>
-                  <a-select-option :value="2">否</a-select-option>
-                </a-select>
-              </a-form-model-item>
-            </template>
+              <!-- 发货数量 -->
+              <template slot="shipQuantity" slot-scope="text, record, index">
+                <a-form-model-item prop="styleNum" :rules="rules.shipQuantity">
+                  <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
+                </a-form-model-item>
+              </template>
 
-            <!-- 物料成分 -->
-            <template slot="materialComposition" slot-scope="text, record, index">
-              <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
-                <a-input style="width:100%" type="text" v-model="record.materialComposition" />
-              </a-form-model-item>
-            </template>
+              <!-- 是否TC功能 -->
+              <template slot="isTC" slot-scope="text, record, index">
+                <a-form-model-item prop="isEnable" :rules="rules.isTC">
+                  <a-select v-model="record.isTC">
+                    <a-select-option :value="1">是</a-select-option>
+                    <a-select-option :value="2">否</a-select-option>
+                  </a-select>
+                </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>
-              <a-divider type="vertical" />
-              <a @click="copy(record)">复制</a>
-            </span>
-          </a-table>
-        </a-form-model>
-      </a-spin>
+              <!-- 物料成分 -->
+              <template slot="materialComposition" slot-scope="text, record, index">
+                <a-form-model-item prop="styleNum" :rules="rules.materialComposition">
+                  <a-input style="width:100%" type="text" v-model="record.materialComposition" />
+                </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>
+                <a-divider type="vertical" />
+                <a @click="copy(record)">复制</a>
+              </span>
+            </a-table>
+          </a-form-model>
+        </a-spin>
+      </a-card>
       <!-- 页面底部提交取消 -->
       <div
         :style="{
@@ -154,7 +157,7 @@
 
     <!-- 参照订单数据弹框 -->
     <referOrderData-modal ref="referOrderDataModal" :father="aa" @ok="referOrderDataOk"></referOrderData-modal>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -541,4 +544,12 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+// 抽屉里的card样式
+/deep/ .ant-drawer-content {
+  background-color: #f0f2f5;
+}
+/deep/ .ant-drawer-body {
+  padding: 10px;
+}
 </style>

src/views/shipment-details/shipmentList.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- 发运明细列表 -->
   <div id="ShipmentList">
+    <!-- 查询 -->
     <a-card :bordered="false">
-      <!-- 查询 -->
       <div class="table-page-search-wrapper">
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
@@ -90,64 +90,61 @@
         <a-button type="primary" @click="addShipDet" icon="plus">新增</a-button>
       </div>
 
-      <!-- table  y: 300 -->
-      <div>
-        <a-row>
-          <a-table
-            bordered
-            :row-key="record => record.id"
-            :columns="shipmentListColumns"
-            :data-source="shipmentListData"
-            :loading="loading"
-            :pagination="ipagination"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-            <!-- 推送状态 -->
-            <!-- slot-scope="text, record" -->
-            <span slot="pushStateSlot">
-              <!-- v-if="record.isRelease == '0'" -->
-              <a-tag color="#f50">失败</a-tag>
-              <!-- <a-tag color="#87d068" v-else>已发布</a-tag> -->
-            </span>
-
-            <!-- 单据状态 -->
-            <span slot="documentStateSlot">
-              <a-tag color="#2db7f5">已保存</a-tag>
-            </span>
-
-            <!-- 操作 -->
-            <span slot="operationSlot" slot-scope="text, record">
-              <a href="javascript:void(0);" @click="declareElements(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="details(record)">详情</a>
-                  </a-menu-item>
-
-                  <a-menu-item>
-                    <a @click="submit(record)">提交</a>
-                  </a-menu-item>
-                  <a-menu-item>
-                    <a @click="edit(record)">编辑</a>
-                  </a-menu-item>
-                  <a-menu-item>
-                    <a @click="push(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-row>
-      </div>
+      <!-- 子表 -->
+      <a-table
+        bordered
+        :row-key="record => record.id"
+        :columns="shipmentListColumns"
+        :data-source="shipmentListData"
+        :loading="loading"
+        :pagination="ipagination"
+        :scroll="{ x: 1500 }"
+        @change="handleTableChange"
+      >
+        <!-- 推送状态 -->
+        <!-- slot-scope="text, record" -->
+        <span slot="pushStateSlot">
+          <!-- v-if="record.isRelease == '0'" -->
+          <a-tag color="#f50">失败</a-tag>
+          <!-- <a-tag color="#87d068" v-else>已发布</a-tag> -->
+        </span>
+
+        <!-- 单据状态 -->
+        <span slot="documentStateSlot">
+          <a-tag color="#2db7f5">已保存</a-tag>
+        </span>
+
+        <!-- 操作 -->
+        <span slot="operationSlot" slot-scope="text, record">
+          <a href="javascript:void(0);" @click="declareElements(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="details(record)">详情</a>
+              </a-menu-item>
+
+              <a-menu-item>
+                <a @click="submit(record)">提交</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a @click="edit(record)">编辑</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a @click="push(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>
+
     <!-- 新增 详情 修改 抽屉 -->
     <addShipDet-drawer ref="addShipDetDrawer" :father="aa" @ok="modalFormOk"></addShipDet-drawer>
     <detailsShipDet-drawer ref="detailsShipDetDrawer" :father="bb" @ok="modalFormOk"></detailsShipDet-drawer>