【装箱单】【预托书】新增、编辑、详情

src/views/packing-list/packinglist-clothes/clothes-list.vue → src/views/packing-list/clothes-list.vue

@@ -1,68 +1,70 @@
 <template>
   <!-- 装箱单-成衣列表 -->
-  <a-card :bordered="false">
+  <div id="clothesList">
     <!-- 查询 -->
-    <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.name"></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.bookNum"></a-input>
+              <a-form-item label="订单号">
+                <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></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-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>
+
+            <template v-if="toggleSearchStatus">
+              <a-col :md="6" :sm="8">
+                <a-form-item label="托书号">
+                  <a-input placeholder="请输入托书号" v-model="queryParam.bookNum"></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="push" icon="export">推送</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-button type="primary" @click="openClothesAdd" icon="plus">新增</a-button>
-    </div>
+    <a-card :bordered="false" style="marginTop:10px;">
+      <div class="table-operator">
+        <a-button type="primary" @click="push" icon="export">推送</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-button type="primary" @click="openClothesAdd" icon="plus">新增</a-button>
+      </div>
 
-    <!-- table  rowKey="id"-->
-    <div>
+      <!-- table  rowKey="id"-->
       <a-table
         bordered
         :columns="clothesListColumns"
@@ -142,14 +144,15 @@
           </a-dropdown>
         </span>
       </a-table>
-    </div>
+    </a-card>
+
     <!-- 抽屉 -->
     <div>
       <clothesAdd-drawer ref="clothesAddDrawer" :father="aa" @ok="modalFormOk"></clothesAdd-drawer>
       <detailsClothes-drawer ref="detailsClothesDrawer" :father="bb" @ok="modalFormOk"></detailsClothes-drawer>
       <editClothes-drawer ref="editClothesDrawer" :father="cc" @ok="modalFormOk"></editClothes-drawer>
     </div>
-  </a-card>
+  </div>
 </template>
 
 <script>

src/views/packing-list/packinglist-clothes/clothesAddDrawer.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 新增成衣 -->
-  <a-card :bordered="false">
+  <div id="clothesAddDrawer">
     <a-drawer
       title="新增成衣"
       width="89%"
@@ -9,180 +9,183 @@
       :visible="visible"
       @close="handleCancel">
       <!-- 主表信息 填写-->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="clothesAdd" :rules="validatorRules">
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="订单号" prop="orderNum">
-                <a-input placeholder="请输入订单号" v-model="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.sizeRange"></a-input>
-                <!-- <a-select placeholder="请选择尺码范围">
+      <a-card :bordered="true">
+        <div class="table-page-search-wrapper">
+          <a-form-model layout="inline" ref="form" :model="clothesAdd" :rules="validatorRules">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="订单号" prop="orderNum">
+                  <a-input placeholder="请输入订单号" v-model="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.clothesFactory"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
-                <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="托书号" prop="bookNum">
-                <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum"></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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.clothesFactory"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
+                  <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书号" prop="bookNum">
+                  <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum"></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="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
-        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-      </div>
-
-      <!-- 子表 :pagination="ipagination"  -->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef" :rules="validatorRules">
-          <a-table
-            bordered
-            :row-key="record => record.id"
-            :columns="clothesAddColumns"
-            :data-source="clothesAddData"
-            :loading="loading"
-            :pagination="false"
-            :scroll="{ x: 1500 }"
-            @change="handleTableChange"
-          >
-            <!-- 启始箱号 输入框-->
-            <template slot="inceptionBoxNo" slot-scope="text, record, index">
-              <a-form-model-item prop="inceptionBoxNo" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.inceptionBoxNo" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 结束箱号 输入框-->
-            <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="packagesBox" slot-scope="text, record, index">
-              <a-form-model-item prop="packagesBox" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.packagesBox" />
-              </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="suttle" slot-scope="text, record, index">
-              <a-form-model-item prop="suttle" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.suttle" />
-              </a-form-model-item>
-            </template>
-
-            <!--毛重/箱 输入框-->
-            <template slot="roughWeight" slot-scope="text, record, index">
-              <a-form-model-item prop="roughWeight" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.roughWeight" />
-              </a-form-model-item>
-            </template>
-
-            <!--外箱长度 输入框-->
-            <template slot="boxLength" slot-scope="text, record, index">
-              <a-form-model-item prop="boxLength" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.boxLength" />
-              </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>
-
-            <!-- 操作 -->
-            <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="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
+
+        <!-- 子表 :pagination="ipagination"  -->
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef" :rules="validatorRules">
+            <a-table
+              bordered
+              :row-key="record => record.id"
+              :columns="clothesAddColumns"
+              :data-source="clothesAddData"
+              :loading="loading"
+              :pagination="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+              <!-- 启始箱号 输入框-->
+              <template slot="inceptionBoxNo" slot-scope="text, record, index">
+                <a-form-model-item prop="inceptionBoxNo" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.inceptionBoxNo" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 结束箱号 输入框-->
+              <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="packagesBox" slot-scope="text, record, index">
+                <a-form-model-item prop="packagesBox" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.packagesBox" />
+                </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="suttle" slot-scope="text, record, index">
+                <a-form-model-item prop="suttle" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.suttle" />
+                </a-form-model-item>
+              </template>
+
+              <!--毛重/箱 输入框-->
+              <template slot="roughWeight" slot-scope="text, record, index">
+                <a-form-model-item prop="roughWeight" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.roughWeight" />
+                </a-form-model-item>
+              </template>
+
+              <!--外箱长度 输入框-->
+              <template slot="boxLength" slot-scope="text, record, index">
+                <a-form-model-item prop="boxLength" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.boxLength" />
+                </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>
+
+              <!-- 操作 -->
+              <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="{
@@ -208,7 +211,7 @@
 
     <!-- 参照预装箱单 -->
     <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -574,4 +577,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/packing-list/packinglist-clothes/detailsClothesDrawer.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- 详情 装箱单-成衣 全部回显  -->
-  <a-card :bordered="false">
+  <!-- 详情成衣 回显全部-->
+  <div id="clothesAddDrawer">
     <a-drawer
       title="详情"
       width="89%"
@@ -8,121 +8,122 @@
       :closable="true"
       :visible="visible"
       @close="handleCancel">
-      <!-- 主表信息 展示-->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="clothesAdd">
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="订单号" prop="orderNum">
-                7394jhg
-                <!-- <a-input v-model="clothesAdd.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="clothesAdd">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="订单号" prop="orderNum">
+                  SL9854443332
+                  <!-- <a-input placeholder="请输入订单号" v-model="clothesAdd.orderNum"></a-input> -->
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="款号" prop="styleNum">
-                736485
-                <!-- <a-input v-model="clothesAdd.styleNum"></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="clothesAdd.styleNum"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="品名" prop="name">
-                品种6253
-                <!-- <a-input v-model="clothesAdd.name"></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="clothesAdd.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 v-model="clothesAdd.sizeRange"></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="clothesAdd.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">
-                客户2
-                <!-- <a-input v-model="clothesAdd.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="clothesAdd.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 v-model="clothesAdd.containerCode"></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="clothesAdd.containerCode"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="集装箱号" prop="containerNo">
-                HY89087
-                <!-- <a-input v-model="clothesAdd.containerNo"></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="clothesAdd.containerNo"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="备注" prop="note">
-                务必按时发货，紧急
-                <!-- <a-input v-model="clothesAdd.note"></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="clothesAdd.note"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="成衣工厂" prop="clothesFactory">
-                成衣工厂1
-                <!-- <a-input v-model="clothesAdd.clothesFactory"></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="clothesAdd.clothesFactory"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
-                12034
-                <!-- <a-input v-model="clothesAdd.exportInvoiceNo"></a-input> -->
-              </a-form-model-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
+                  <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input>
+                </a-form-model-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="托书号" prop="bookNum">
-                jdkd3
-                <!-- <a-input v-model="clothesAdd.bookNum"></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="bookNum">
+                  <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum"></a-input>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-card>
 
       <!-- 子表 :pagination="ipagination"  -->
-      <a-spin :spinning="confirmLoading">
-        <a-form-model ref="formRef">
-          <a-table
-            bordered
-            :row-key="record => record.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 60px 0;">
+        <a-spin :spinning="confirmLoading">
+          <a-form-model ref="formRef">
+            <a-table
+              bordered
+              :row-key="record => record.id"
+              :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>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
+import AdvancePackingListModal from '@views/pre-book/advancePackingListModal.vue'
 
 export default {
-  name: 'DetailsClothesDrawer', //  详情 ---装箱单 -成衣
+  name: 'DetailsClothesDrawer', //  详情-装箱单 -成衣
   mixins: [JeecgListMixin],
-
-  components: { JEllipsis },
+  computed: {},
+  components: { AdvancePackingListModal, JEllipsis }, // 参照预装箱单 弹框
   data() {
-    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
 
     return {
       // 表头
@@ -340,28 +341,39 @@ export default {
         }
       ],
       data: [{}, {}, {}],
-      loading: false,
+      loading: false, // 表格加载
       clothesAdd: {},
       visible: false,
-      confirmLoading: false
-      // dateFormat: 'YYYY-MM-DD'
+      confirmLoading: false,
+      dateFormat: 'YYYY-MM-DD'
     }
   },
   created() {},
+  mounted() {},
   methods: {
     // 抽屉 取消
     handleCancel() {
-      console.log('抽屉取消')
+      console.log('点击抽屉取消')
       this.close()
     },
 
+    // -------------------------------------
     close() {
       this.$emit('close')
       this.visible = false
-    }
-  },
-  computed: {},
-  mounted() {}
+      this.$refs.form.resetFields()
+    },
+    // - father------------------------------------
+    aa() {},
+    modalFormOk() {}
+
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   this.getAnnList()
+    // }'
+  }
 }
 </script>
 
@@ -380,4 +392,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/packing-list/packinglist-clothes/editClothesDrawer.vue

@@ -1,188 +1,185 @@
 <template>
-  <!-- 编辑成衣 回显信息，有文本框  通过是否有id判断-->
-  <a-card :bordered="false">
-    <a-drawer
-      title="编辑"
-      width="89%"
-      placement="right"
-      :closable="true"
-      :visible="visible"
-      @close="handleCancel">
-      <!-- 主表信息 编辑-->
-      <div class="table-page-search-wrapper">
-        <a-form-model layout="inline" ref="form" :model="clothesAdd" :rules="validatorRules">
-          <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="订单号" prop="orderNum">
-                <a-input placeholder="请输入订单号" v-model="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.sizeRange"></a-input>
-                <!-- <a-select placeholder="请选择尺码范围">
+  <!-- 编辑成衣 回显可输入-->
+  <div id="clothesAddDrawer">
+    <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="clothesAdd" :rules="validatorRules">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="订单号" prop="orderNum">
+                  <a-input placeholder="请输入订单号" v-model="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.clothesFactory"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
-                <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input>
-              </a-form-model-item>
-            </a-col>
-
-            <a-col :md="6" :sm="8">
-              <a-form-model-item label="托书号" prop="bookNum">
-                <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum"></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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.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="clothesAdd.clothesFactory"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="外销发票号" prop="exportInvoiceNo">
+                  <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-model-item label="托书号" prop="bookNum">
+                  <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum"></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="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
-        <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
-      </div>
-
-      <!-- 子表 :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="inceptionBoxNo" slot-scope="text, record, index">
-              <a-form-model-item prop="inceptionBoxNo" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.inceptionBoxNo" />
-              </a-form-model-item>
-            </template>
-
-            <!-- 结束箱号 输入框-->
-            <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="packagesBox" slot-scope="text, record, index">
-              <a-form-model-item prop="packagesBox" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.packagesBox" />
-              </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="suttle" slot-scope="text, record, index">
-              <a-form-model-item prop="suttle" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.suttle" />
-              </a-form-model-item>
-            </template>
-
-            <!--毛重/箱 输入框-->
-            <template slot="roughWeight" slot-scope="text, record, index">
-              <a-form-model-item prop="roughWeight" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.roughWeight" />
-              </a-form-model-item>
-            </template>
-
-            <!--外箱长度 输入框-->
-            <template slot="boxLength" slot-scope="text, record, index">
-              <a-form-model-item prop="boxLength" :rules="rules.styleNum" required>
-                <a-input style="width:100%" type="text" v-model="record.boxLength" />
-              </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>
-
-            <!-- 操作 -->
-            <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="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
+          <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+        </div>
+
+        <!-- 子表 :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="ipagination"
+              :scroll="{ x: 1500 }"
+              @change="handleTableChange"
+            >
+              <!-- 启始箱号 输入框-->
+              <template slot="inceptionBoxNo" slot-scope="text, record, index">
+                <a-form-model-item prop="inceptionBoxNo" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.inceptionBoxNo" />
+                </a-form-model-item>
+              </template>
+
+              <!-- 结束箱号 输入框-->
+              <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="packagesBox" slot-scope="text, record, index">
+                <a-form-model-item prop="packagesBox" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.packagesBox" />
+                </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="suttle" slot-scope="text, record, index">
+                <a-form-model-item prop="suttle" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.suttle" />
+                </a-form-model-item>
+              </template>
+
+              <!--毛重/箱 输入框-->
+              <template slot="roughWeight" slot-scope="text, record, index">
+                <a-form-model-item prop="roughWeight" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.roughWeight" />
+                </a-form-model-item>
+              </template>
+
+              <!--外箱长度 输入框-->
+              <template slot="boxLength" slot-scope="text, record, index">
+                <a-form-model-item prop="boxLength" :rules="rules.styleNum" required>
+                  <a-input style="width:100%" type="text" v-model="record.boxLength" />
+                </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>
+
+              <!-- 操作 -->
+              <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
@@ -198,10 +195,10 @@
           zIndex: 1
         }"
       >
-        <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
+        <a-popconfirm title="确定放弃新增？" @confirm="handleCancel" okText="确定" cancelText="取消">
           <a-button :style="{ marginRight: '8px' }">取消</a-button>
         </a-popconfirm>
-        <a-button type="primary" @click="submitEdit">
+        <a-button type="primary" @click="submitAdd">
           提交
         </a-button>
       </div>
@@ -209,7 +206,7 @@
 
     <!-- 参照预装箱单 -->
     <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -218,7 +215,7 @@ import JEllipsis from '@/components/jeecg/JEllipsis'
 import AdvancePackingListModal from '@views/pre-book/advancePackingListModal.vue'
 
 export default {
-  name: 'EditClothesDrawer', //  编辑-- 装箱单 -成衣
+  name: 'EditClothesDrawer', //  编辑-装箱单 -成衣
   mixins: [JeecgListMixin],
   computed: {},
   components: { AdvancePackingListModal, JEllipsis }, // 参照预装箱单 弹框
@@ -463,6 +460,7 @@ export default {
     }
   },
   created() {},
+  mounted() {},
   methods: {
     // 参照预装箱单
     referadvancePackingList() {
@@ -470,7 +468,6 @@ export default {
       // 打开订单数据弹框
       this.$refs.advancePackingListModal.advancePackingListModVis = true
     },
-
     // 増行
     handleAddColumn() {
       console.log('増行')
@@ -519,16 +516,16 @@ export default {
     },
     // 操作按钮 复制
     copy(record) {},
-
     // -------------------------------------
+
     // 抽屉 取消
     handleCancel() {
-      console.log('抽屉取消')
+      console.log('点击抽屉取消')
       this.close()
     },
     // 抽屉 提交
-    submitEdit() {
-      console.log('保存编辑、刷新装箱单-成衣列表')
+    submitAdd() {
+      console.log('保存新增、刷新发运明细列表')
       const that = this
       // 触发表单验证
       this.$refs.form.validate(valid => {
@@ -537,16 +534,18 @@ export default {
         }
       })
       this.close()
-      // this.getShipmentList() // 刷新 装箱单-成衣
+      // this.getShipmentList() // 刷新 装箱单-成衣列表
     },
 
+    // -------------------------------------
     close() {
       this.$emit('close')
       this.visible = false
       this.$refs.form.resetFields()
     },
-
-    // -------------------------------------
+    // - father------------------------------------
+    aa() {},
+    modalFormOk() {}
 
     // 分页、排序、筛选变化时触发
     // handleTableChange(pagination, filters, sorter) {
@@ -554,12 +553,7 @@ export default {
     //   this.queryParam.pageNo = pagination.current
     //   this.getAnnList()
     // }'
-
-    // - father------------------------------------
-    aa() {}
-  },
-
-  mounted() {}
+  }
 }
 </script>
 
@@ -578,4 +572,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/reportForms/cost-allocation-add.vue

@@ -0,0 +1,474 @@
+<template>
+  <!-- 成本分配 新增（新增后数据到单证的成本分配汇总内）-->
+  <div id="costAllocationAdd">
+    <!-- <a-drawer
+      title="新增"
+      width="89%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="handleCancel"> -->
+
+    <a-card :bordered="false">
+      <!-- 主表信息 填写-->
+      <div class="table-page-search-wrapper">
+        <a-form-model layout="inline" ref="form" :model="costAllocationAdd" :rules="validatorRules">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="计划单号" prop="planNum">
+                <a-input placeholder="请输入计划单号" v-model="costAllocationAdd.planNum"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="产品款号" prop="poStyleNum">
+                <a-input placeholder="请输入外销员" v-model="costAllocationAdd.poStyleNum"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="外销员" prop="exportSales">
+                <a-input placeholder="请输入外销员" v-model="costAllocationAdd.exportSales"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="成衣合同号" prop="garmentContractNo">
+                <a-input placeholder="请输入成衣合同号" v-model="costAllocationAdd.garmentContractNo"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="部门" prop="department">
+                <a-input placeholder="请输入部门" v-model="costAllocationAdd.department"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="客户简称" prop="customerShortName">
+                <a-input placeholder="请输入客户简称" v-model="costAllocationAdd.customerShortName"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="加工单位" prop="processUnit">
+                <a-input placeholder="请输入加工单位" v-model="costAllocationAdd.processUnit"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="出运日期" prop="outData">
+                <a-date-picker
+                  placeholder="请输入出运日期"
+                  style="width: 100%"
+                  :format="dateFormat"
+                  v-model="costAllocationAdd.outData"
+                ></a-date-picker>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="计划数量" prop="planQuantity">
+                <a-input placeholder="请输入计划数量" v-model="costAllocationAdd.planQuantity"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="美元外销总价" prop="USDTotalExportPrice">
+                <a-input placeholder="请输入美元外销总价" v-model="costAllocationAdd.USDTotalExportPrice"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="人民币费用支出" prop="RMBExpense">
+                <a-input
+                  v-model="costAllocationAdd.RMBExpense"
+                  placeholder="请输入人民币费用支出"
+                  style="color:#027db4;"
+                  @click="mainTableExpenseCNY"
+                ></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="税率%" prop="taxRate">
+                <a-input placeholder="请输入税率" v-model="costAllocationAdd.taxRate"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="实际出货数量" prop="actualShipQuantity">
+                <a-input placeholder="请输入实际出货数量" v-model="costAllocationAdd.actualShipQuantity"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="人民币外销金额" prop="RMBExportAmount">
+                <a-input placeholder="请输入人民币外销金额" v-model="costAllocationAdd.RMBExportAmount"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="美元费用支出" prop="USDExpense">
+                <a-input
+                  v-model="costAllocationAdd.USDExpense"
+                  placeholder="请输入美元费用支出"
+                  style="color:#027db4;"
+                  @click="mainTableExpenseUSD"
+                ></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="加工费" prop="processCost">
+                <a-input placeholder="请输入加工费" v-model="costAllocationAdd.processCost"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="短出数" prop="shortSeveral">
+                <a-input placeholder="请输入短出数" v-model="costAllocationAdd.shortSeveral"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="短出货值" prop="shortValue">
+                <a-input placeholder="请输入短出货值" v-model="costAllocationAdd.shortValue"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="短出面料成本" prop="fabricShortCost">
+                <a-input placeholder="请输入短出面料成本" v-model="costAllocationAdd.fabricShortCost"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="事故单美金金额" prop="accidentUSDAmount">
+                <a-input placeholder="请输入事故单美金金额" v-model="costAllocationAdd.accidentUSDAmount"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="面料含税成本" prop="fabricCostIncludesTax">
+                <a-input placeholder="请输入面料含税成本" v-model="costAllocationAdd.fabricCostIncludesTax"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="辅料含税成本" prop="excipienCostIncludesTax">
+                <a-input placeholder="请输入辅料含税成本" v-model="costAllocationAdd.excipienCostIncludesTax"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="销售订单本币总额" prop="salesOrdersLocalTotal">
+                <a-input
+                  placeholder="请输入销售订单本币总额"
+                  v-model="costAllocationAdd.salesOrdersLocalTotal"
+                ></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="事故单人民币金额" prop="accidentCNYAmount">
+                <a-input placeholder="请输入事故单人民币金额" v-model="costAllocationAdd.accidentCNYAmount"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="面料不含税成本" prop="fabricCostNotIncludesTax">
+                <a-input
+                  placeholder="请输入面料不含税成本"
+                  v-model="costAllocationAdd.fabricCostNotIncludesTax"
+                ></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="辅料不含税成本" prop="excipienCostNotIncludesTax">
+                <a-input
+                  placeholder="请输入辅料不含税成本"
+                  v-model="costAllocationAdd.excipienCostNotIncludesTax"
+                ></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="销售订单原币总额" prop="salesOrdersOriginalTotal">
+                <a-input
+                  placeholder="请输入销售订单原币总额"
+                  v-model="costAllocationAdd.salesOrdersOriginalTotal"
+                ></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-model-item label="制单人" prop="preparedBy">
+                <a-input placeholder="请输入制单人" v-model="costAllocationAdd.preparedBy"></a-input>
+              </a-form-model-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <h4 style="color:red;">
+                标记
+                <span>（计算结果是负值时，该标记是红色）</span>
+              </h4>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+      <!-- </a-card> -->
+
+      <!-- 子表 -->
+      <!-- <a-card :bordered="false" style="marginTop:10px;"> -->
+      <!--tabs 组件引入  -->
+      <tabs />
+
+      <!-- 事故单 -->
+      <div style="margin:40px 0">
+        <h6 class="table-title">事故单</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="accidentListColumns"
+          :data-source="accidentListData"
+          bordered
+          :pagination="false"
+        >
+          <!-- 事故单 -->
+          <span slot="accidentNum" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 费用支出 -->
+      <div>
+        <h6 class="table-title">费用支出</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="costPayColumns"
+          :data-source="costPayData"
+          bordered
+          :pagination="false"
+        >
+        </a-table>
+      </div>
+
+      <!-- 备注信息 1 根据角色权限控制【填写】、【查看】-->
+      <div class="note-one" style="marginTop:40px;">
+        <h6 class="table-title">备注信息 1</h6>
+        <div class="noteDetail">
+          <a-input type="textarea" v-model="noteOne" placeholder="请输入备注 1" style="minHeight:100px;" />
+          <a-button type="primary" @click="savenoteOne">保存</a-button>
+        </div>
+      </div>
+
+      <!-- 备注信息 2 根据角色权限控制【填写】、【查看】-->
+      <div class="note-two" style="margin:40px 0 40px 0;">
+        <h6 class="table-title">备注信息 2</h6>
+        <div class="noteDetail">
+          <a-input type="textarea" v-model="noteTwo" placeholder="请输入备注 2" style="minHeight:100px;" />
+          <a-button type="primary" @click="savenoteTwo">保存</a-button>
+        </div>
+      </div>
+
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="12">
+
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <!-- 页面底部保存取消 -->
+    <!-- <div
+      :style="{
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        borderTop: '1px solid #e9e9e9',
+        padding: '10px 16px',
+        background: '#fff',
+        textAlign: 'right',
+        zIndex: 1
+      }"
+    >
+      <a-popconfirm title="确定放弃新增？" @confirm="handleCancel" okText="确定" cancelText="取消">
+        <a-button :style="{ marginRight: '8px' }">取消</a-button>
+      </a-popconfirm>
+      <a-button type="primary" @click="submitAdd">
+        提交
+      </a-button>
+    </div> -->
+
+    <!-- 弹框 -->
+    <div>
+      <!-- 主表 人民币费用支出  弹框 -->
+      <mainTableExpenseCNY-modal ref="mainTableExpenseCNYModal" :father="aa"></mainTableExpenseCNY-modal>
+      <!-- 主表 美元费用支出  弹框 -->
+      <mainTableExpenseUSD-modal ref="mainTableExpenseUSDModal" :father="bb"></mainTableExpenseUSD-modal>
+      <!-- 事故单 -->
+      <accidentList-modal ref="accidentListModal" :father="cc"></accidentList-modal>
+    </div>
+    <!-- </a-drawer> -->
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import tabs from '@views/reportForms/cost-allocation-table/tabs.vue' // tabs组件
+import mainTableExpenseCNYModal from '@views/reportForms/cost-allocation-table/mainTableExpenseCNYModal.vue'
+import mainTableExpenseUSDModal from '@views/reportForms/cost-allocation-table/mainTableExpenseUSDModal.vue'
+import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue' // 事故单
+
+export default {
+  name: 'CostAllocationAdd', // 成本分配 (新增)
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },
+
+  data() {
+    return {
+      loading: false, // 表格加载
+      costAllocationAdd: [], // 成本分配统计
+      dateFormat: 'YYYY-MM-DD',
+      noteOne: '', // 备注 1
+      noteTwo: '', // 备注 2
+
+      // 事故单 表头
+      accidentListColumns: [
+        {
+          title: '单号',
+          width: 120,
+          dataIndex: 'accidentNum',
+          className: 'replacecolor',
+          customCell: this.accidentListCustomCell,
+          scopedSlots: { customRender: 'accidentNum' }
+        },
+        { title: '事故承担方', width: 120, dataIndex: 'accidentUndertaker', className: 'replacecolor' },
+        { title: '金额', dataIndex: 'amount', width: 120, className: 'replacecolor' }
+      ],
+      accidentListData: [{ accidentNum: '1100011' }, {}],
+      // 费用支出 表头
+      costPayColumns: [
+        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
+        { title: '支出单号', width: 120, dataIndex: 'disbursementSlipNo', className: 'replacecolor' },
+        { title: '费用项目', dataIndex: 'expenseItem', width: 120, className: 'replacecolor' },
+        { title: ' 支出本币金额', dataIndex: 'disbursedLocalMoney', width: 120, className: 'replacecolor' },
+        { title: '支出原币金额', dataIndex: 'disbursedOriginalMoney', width: 120, className: 'replacecolor' },
+        { title: '发票号', dataIndex: 'invoiceNum', width: 120, className: 'replacecolor' },
+        { title: '制单人', dataIndex: 'preparedBy', width: 120, className: 'replacecolor' }
+      ],
+      costPayData: [{}],
+      visible: true, // 成本分配  新增
+
+      validatorRules: {
+        planNum: [{ required: true, message: '计划单号不能为空', trigger: 'blur' }],
+        poStyleNum: [{ required: true, message: '产品款号不能为空', trigger: 'blur' }],
+        exportSales: [{ required: true, message: '外销员不能为空', trigger: 'blur' }]
+        // 确定必填项
+      }
+    }
+  },
+  created() {},
+  methods: {
+    //  主表：人民币费用支出  弹框
+    mainTableExpenseCNY() {
+      console.log('点击:主表人民币费用支出')
+      this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYModVis = true
+    },
+    // 主表：美元费用支出  弹框
+    mainTableExpenseUSD() {
+      console.log('点击:主表美元费用支出')
+      this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDModVis = true
+    },
+
+    // 事故单 单号 弹框
+    accidentListCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            // 调用【面料损耗表】中的【事故单】弹框
+            this.$refs.accidentListModal.accidentListModVis = true
+          }
+        }
+      }
+    },
+    // ---------------------------------------
+    // 保存备注 1
+    savenoteOne() {
+      console.log('保存 备注 1')
+    },
+    // 保存备注 2
+    savenoteTwo() {
+      console.log('保存 备注 2')
+    },
+
+    // --------------------------------------
+    // 抽屉 取消
+    handleCancel() {
+      console.log('点击抽屉取消')
+      this.close()
+    },
+    // 抽屉 提交
+    submitAdd() {
+      console.log('保存新增、刷新单证【成本分配汇总】数据')
+      const that = this
+      // 触发表单验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          that.confirmLoading = true
+        }
+      })
+      // 验证通过后，
+      // this.getShipmentList() // 刷新 成本分配汇总
+
+      this.$router.push('/cost-allocation-total/list') // 暂定跳转页面，客户未确定
+      this.close()
+    },
+    // --------------------------------------
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+
+    // --------------------------------------------------
+    // father 方法
+    aa() {},
+    bb() {},
+    cc() {}
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+
+// 抽屉里的card样式
+// /deep/ .ant-drawer-content {
+//   background-color: #f0f2f5;
+// }
+// /deep/ .ant-drawer-body {
+//   padding: 10px;
+// }
+</style>

src/views/reportForms/cost-allocation-table.vue

@@ -1,224 +0,0 @@
-<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.index"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="计划单号" has-feedback>
-              <a-input placeholder="请输入计划单号" v-model="queryParam.planNum"></a-input>
-            </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>
-
-          <a-col :md="6" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-              <a @click="handleToggleSearch" style="margin-left: 8px">
-                {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <!-- table区域  -->
-    <div>
-      <a-table
-        bordered
-        rowKey="id"
-        :columns="costAllocationColumns"
-        :data-source="costAllocationData"
-        :loading="loading"
-        :pagination="ipagination"
-        :scroll="{ x: 1500 }"
-        @change="handleTableChange"
-      >
-        <!-- 状态 -->
-        <!-- slot-scope="text, record" -->
-        <span slot="state">
-          <!-- v-if="record.isRelease == '0'" -->
-          <a-tag color="#f50">审核通过</a-tag>
-          <!-- <a-tag color="#87d068" v-else>已发布</a-tag> -->
-        </span>
-
-        <!-- 操作 -->
-        <span slot="operationSlot" slot-scope="text, record">
-          <a href="javascript:void(0);" @click="detail(record)">详情</a>
-          <a-divider type="vertical" />
-          <a href="javascript:void(0);" @click="check(record)" style="color:green">审核</a>
-        </span>
-      </a-table>
-    </div>
-
-    <!-- 详情 大抽屉 -->
-    <costAllocation-drawer ref="costAllocationDrawer" :father="aa" @ok="modalFormOk"></costAllocation-drawer>
-  </a-card>
-</template>
-
-<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import JEllipsis from '@/components/jeecg/JEllipsis'
-import moment from 'moment'
-import costAllocationDrawer from '@views/reportForms/cost-allocation-table/costAllocationDrawer.vue'
-
-export default {
-  name: 'CostAllocationTable', // 成本分配汇总
-  mixins: [JeecgListMixin],
-  components: { JEllipsis, moment, costAllocationDrawer },
-
-  data() {
-    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
-
-    return {
-      description: '成本分配汇总页面',
-
-      // 查询条件
-      queryParam: {
-        index: '',
-        planNum: '',
-        customerShortName: ''
-      },
-      // 成本分配汇总 表头
-      costAllocationColumns: [
-        {
-          title: '序号',
-          width: 90,
-          dataIndex: 'index',
-          customRender: (text, record, index) => `${index + 1}`,
-          fixed: 'left',
-          className: 'replacecolor'
-        },
-        { title: '计划单号', width: 120, dataIndex: 'planNum', fixed: 'left', className: 'replacecolor' },
-        { title: '款号', width: 120, dataIndex: 'styleNum', className: 'replacecolor' },
-        { title: '业务员', width: 120, dataIndex: 'salesman', className: 'replacecolor' },
-        {
-          title: '部门',
-          width: 120,
-          dataIndex: 'department',
-          className: 'replacecolor'
-        },
-        { title: '客户简称', width: 150, dataIndex: 'customerShortName', className: 'replacecolor' },
-        { title: '加工单位', width: 120, dataIndex: 'processUnit', className: 'replacecolor' },
-        //  {
-        //   title: '创建时间',
-        //   dataIndex: 'createTime',
-        //   align: 'center',
-        //   sorter: true,
-        //   customRender: text => {
-        //     return moment(text).format('YYYY-MM-DD')
-        //   }
-        // },
-        { title: '出运日期', width: 120, dataIndex: 'outData', className: 'replacecolor' },
-        { title: '成衣件数', width: 90, dataIndex: 'clothesQuantity', className: 'replacecolor' },
-        { title: '销售美元', width: 120, dataIndex: 'SalesUSD', className: 'replacecolor' },
-        { title: '销售人民币', width: 120, dataIndex: 'SalesCNY', className: 'replacecolor' },
-        { title: '面料(不含税)', width: 120, dataIndex: 'FabricExcludedTax', className: 'replacecolor' },
-        { title: '辅料(不含税)', width: 120, dataIndex: 'ingredientsExcludedTax', className: 'replacecolor' },
-        { title: '加工费(CNY)', width: 120, dataIndex: 'processCostCNY', className: 'replacecolor' },
-        { title: '加工费(USD)', width: 120, dataIndex: 'processCostUSD', className: 'replacecolor' },
-        { title: '费用支出(汇总CNY)', width: 160, dataIndex: 'costPayTotalCNY', className: 'replacecolor' },
-        { title: '费用支出(汇总USD)', width: 160, dataIndex: 'costPayTotalUSD', className: 'replacecolor' },
-        { title: '事故单人民币金额', width: 160, dataIndex: 'accidentCNYAmount', className: 'replacecolor' },
-        {
-          title: '备注',
-          width: 180,
-          dataIndex: 'note',
-          customRender: t => ellipsis(t),
-          className: 'replacecolor',
-          scopedSlots: { customRender: 'note' }
-        },
-        {
-          title: '状态',
-          width: 120,
-          dataIndex: 'state',
-          className: 'replacecolor',
-          scopedSlots: { customRender: 'state' }
-        },
-        {
-          title: '操作',
-          dataIndex: 'operation',
-          scopedSlots: { customRender: 'operationSlot' },
-          fixed: 'right',
-          width: 160,
-          className: 'replacecolor'
-        }
-      ],
-      costAllocationData: [
-        {
-          orderNum: 'AA002200001',
-          note: '跟Jeecg-Boot官网统一,单元格内容较多时，多出内容以“……”替代,鼠标移入显示全部内容（此处原型图上是弹框，）'
-        }
-      ],
-      loading: false // 表格加载
-    }
-  },
-  created() {
-    // 渲染订单销售列表
-  },
-  methods: {
-    // 同步 synchronization() {},
-
-    // 查询按钮
-    searchQuery() {
-      // 渲染成本分配统计表
-    },
-    searchReset() {
-      // console.log('>>>>重置')
-      this.queryParam = {}
-      // 重新成本分配统计表
-    },
-
-    // 操作 详情
-    detail(record) {
-      // 点击了详情
-      this.$refs.costAllocationDrawer.visible = true
-    },
-    // 操作 审核
-    check() {},
-
-    // father 抽屉方法
-    aa() {}
-
-    // 分页、排序、筛选变化时触发
-    // handleTableChange(pagination, filters, sorter) {
-    //   // console.log('当前页信息>>>>',pagination)
-    //   this.queryParam.pageNo = pagination.current
-    //   // this.getOrderList()
-    // }
-  },
-  computed: {},
-  mounted() {}
-}
-</script>
-<style lang="less" scoped>
-@import '~@assets/less/common.less';
-@import '~@assets/less/overwriter.less';
-/deep/ .ant-table-thead > tr > th {
-  text-align: center;
-  // font-weight: 700;
-}
-
-/deep/ .ant-table-tbody {
-  text-align: center;
-}
-
-// /deep/ th.replacecolor {
-//   background-color: #ccc;
-// }
-</style>

src/views/reportForms/cost-allocation-table/costAllocationDrawer.vue

@@ -1,404 +0,0 @@
-<template>
-  <!-- 成本分配详情-->
-  <div id="costAllocationDrawer">
-    <a-drawer
-      title="详情"
-      width="89%"
-      placement="right"
-      :closable="true"
-      :visible="visible"
-      @close="onClose"
-    >
-      <!-- 主表信息 -->
-      <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-input v-model="costAllocation.planNum"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="产品款号" has-feedback>
-                  <a-input v-model="costAllocation.poStyleNum"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="外销员">
-                  <a-input v-model="costAllocation.exportSales"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="成衣合同号">
-                  <a-input v-model="costAllocation.garmentContractNo"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="部门">
-                  <a-input v-model="costAllocation.department"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="客户简称">
-                  <a-input v-model="costAllocation.customerShortName"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="加工单位">
-                  <a-input v-model="costAllocation.processUnit"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="出运日期">
-                  <a-date-picker style="width: 100%" v-model="costAllocation.outData"></a-date-picker>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="计划数量">
-                  <a-input v-model="costAllocation.planQuantity"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="美元外销总价">
-                  <a-input v-model="costAllocation.USDTotalExportPrice"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="人民币费用支出">
-                  <a-input
-                    v-model="costAllocation.RMBExpense"
-                    style="color:#027db4;"
-                    @click="mainTableExpenseCNY"
-                  ></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="税率%">
-                  <a-input v-model="costAllocation.taxRate"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="实际出货数量">
-                  <a-input v-model="costAllocation.actualShipQuantity"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="人民币外销金额">
-                  <a-input v-model="costAllocation.RMBExportAmount"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="美元费用支出">
-                  <a-input
-                    v-model="costAllocation.USDExpense"
-                    style="color:#027db4;"
-                    @click="mainTableExpenseUSD"
-                  ></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="加工费">
-                  <a-input v-model="costAllocation.processCost"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="短出数">
-                  <a-input v-model="costAllocation.shortSeveral"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="短出货值">
-                  <a-input v-model="costAllocation.shortValue"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="短出面料成本">
-                  <a-input v-model="costAllocation.fabricShortCost"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="事故单美金金额">
-                  <a-input v-model="costAllocation.accidentUSDAmount"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="面料含税成本">
-                  <a-input v-model="costAllocation.fabricCostIncludesTax"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="辅料含税成本">
-                  <a-input v-model="costAllocation.excipienCostIncludesTax"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="销售订单本币总额">
-                  <a-input v-model="costAllocation.salesOrdersLocalTotal"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="事故单人民币金额">
-                  <a-input v-model="costAllocation.accidentCNYAmount"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="面料不含税成本">
-                  <a-input v-model="costAllocation.fabricCostNotIncludesTax"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="辅料不含税成本">
-                  <a-input v-model="costAllocation.excipienCostNotIncludesTax"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="销售订单原币总额">
-                  <a-input v-model="costAllocation.salesOrdersOriginalTotal"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <a-form-item label="制单人">
-                  <a-input v-model="costAllocation.preparedBy"></a-input>
-                </a-form-item>
-              </a-col>
-
-              <a-col :md="6" :sm="8">
-                <h4 style="color:red;">
-                  标记
-                  <span>（计算结果是负值时，该标记是红色）</span>
-                </h4>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-      </a-card>
-
-      <!-- 子表 -->
-      <a-card :bordered="false">
-
-        <!--tabs 组件引入  -->
-        <div style="marginTop:60px;">
-          <tabs />
-        </div>
-
-        <!-- 事故单 -->
-        <div style="margin:60px 0 40px 0">
-          <h6 class="table-title">事故单</h6>
-          <a-table
-            rowKey="id"
-            :loading="loading"
-            :columns="accidentListColumns"
-            :data-source="accidentListData"
-            bordered
-            :pagination="false"
-          >
-            <!-- 事故单 -->
-            <span slot="accidentNum" slot-scope="text">
-              <a>{{ text }}</a>
-            </span>
-          </a-table>
-        </div>
-
-        <!-- 费用支出 -->
-        <div>
-          <h6 class="table-title">费用支出</h6>
-          <a-table
-            rowKey="id"
-            :loading="loading"
-            :columns="costPayColumns"
-            :data-source="costPayData"
-            bordered
-            :pagination="false"
-          >
-          </a-table>
-        </div>
-
-        <!-- 备注信息 1 根据角色权限控制【填写】、【查看】-->
-        <div class="note-one" style="marginTop:40px;">
-          <h6 class="table-title">备注信息 1</h6>
-          <div class="noteDetail">
-            <a-input type="textarea" v-model="noteOne" placeholder="请输入备注 1" style="minHeight:100px;" />
-            <a-button type="primary" @click="savenoteOne">保存</a-button>
-          </div>
-        </div>
-
-        <!-- 备注信息 2 根据角色权限控制【填写】、【查看】-->
-        <div class="note-two" style="marginTop:40px;">
-          <h6 class="table-title">备注信息 2</h6>
-          <div class="noteDetail">
-            <a-input type="textarea" v-model="noteTwo" placeholder="请输入备注 2" style="minHeight:100px;" />
-            <a-button type="primary" @click="savenoteTwo">保存</a-button>
-          </div>
-        </div>
-      </a-card>
-    </a-drawer>
-
-    <!-- 所有弹框 -->
-    <div>
-      <!-- 主表 人民币费用支出  弹框 -->
-      <mainTableExpenseCNY-modal ref="mainTableExpenseCNYModal" :father="aa"></mainTableExpenseCNY-modal>
-      <!-- 主表 美元费用支出  弹框 -->
-      <mainTableExpenseUSD-modal ref="mainTableExpenseUSDModal" :father="bb"></mainTableExpenseUSD-modal>
-      <!-- 事故单 -->
-      <accidentList-modal ref="accidentListModal" :father="cc"></accidentList-modal>
-    </div>
-  </div>
-</template>
-
-<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import JEllipsis from '@/components/jeecg/JEllipsis'
-import moment from 'moment'
-import tabs from '@views/reportForms/cost-allocation-table/tabs.vue' // tabs组件
-import mainTableExpenseCNYModal from '@views/reportForms/cost-allocation-table/mainTableExpenseCNYModal.vue'
-import mainTableExpenseUSDModal from '@views/reportForms/cost-allocation-table/mainTableExpenseUSDModal.vue'
-
-import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue' // 事故单
-
-export default {
-  name: 'CostAllocationTable', // 成本分配统计表
-  mixins: [JeecgListMixin],
-  components: { JEllipsis, moment, tabs, mainTableExpenseCNYModal, mainTableExpenseUSDModal, accidentListModal },
-
-  data() {
-    return {
-      description: '成本分配统计表详情 ',
-      loading: false, // 表格加载
-      costAllocation: [], // 成本分配统计
-
-      noteOne: '', // 备注 1
-      noteTwo: '', // 备注 2
-
-      // 事故单 表头
-      accidentListColumns: [
-        {
-          title: '单号',
-          width: 120,
-          dataIndex: 'accidentNum',
-          className: 'replacecolor',
-          customCell: this.accidentListCustomCell,
-          scopedSlots: { customRender: 'accidentNum' }
-        },
-        { title: '事故承担方', width: 120, dataIndex: 'accidentUndertaker', className: 'replacecolor' },
-        { title: '金额', dataIndex: 'amount', width: 120, className: 'replacecolor' }
-      ],
-      accidentListData: [{ accidentNum: '1100011' }, {}],
-      // 费用支出 表头
-      costPayColumns: [
-        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
-        { title: '支出单号', width: 120, dataIndex: 'disbursementSlipNo', className: 'replacecolor' },
-        { title: '费用项目', dataIndex: 'expenseItem', width: 120, className: 'replacecolor' },
-        { title: ' 支出本币金额', dataIndex: 'disbursedLocalMoney', width: 120, className: 'replacecolor' },
-        { title: '支出原币金额', dataIndex: 'disbursedOriginalMoney', width: 120, className: 'replacecolor' },
-        { title: '发票号', dataIndex: 'invoiceNum', width: 120, className: 'replacecolor' },
-        { title: '制单人', dataIndex: 'preparedBy', width: 120, className: 'replacecolor' }
-      ],
-      costPayData: [{}],
-      visible: false // 成本分配统计表详情  抽屉
-    }
-  },
-  created() {},
-  methods: {
-    // 同步按钮  synchronization() {},
-
-    //  主表：人民币费用支出  弹框
-    mainTableExpenseCNY() {
-      console.log('点击:主表人民币费用支出')
-      this.$refs.mainTableExpenseCNYModal.mainTableExpenseCNYModVis = true
-    },
-    // 主表：美元费用支出  弹框
-    mainTableExpenseUSD() {
-      console.log('点击:主表美元费用支出')
-      this.$refs.mainTableExpenseUSDModal.mainTableExpenseUSDModVis = true
-    },
-
-    // 事故单 单号 弹框
-    accidentListCustomCell(record) {
-      return {
-        on: {
-          click: event => {
-            console.log('this:', this)
-            // 调用【面料损耗表】中的【事故单】弹框
-            this.$refs.accidentListModal.accidentListModVis = true
-          }
-        }
-      }
-    },
-    // ---------------------------------------
-    // 保存备注 1
-    savenoteOne() {
-      console.log('保存 备注 1')
-    },
-    // 保存备注 2
-    savenoteTwo() {
-      console.log('保存 备注 2')
-    },
-
-    onClose() {
-      // 关闭抽屉
-      this.visible = false
-    },
-
-    // --------------------------------------------------
-    // father 方法
-    aa() {},
-    bb() {},
-    cc() {}
-  },
-  computed: {},
-  mounted() {}
-}
-</script>
-<style lang="less" scoped>
-@import '~@assets/less/common.less';
-@import '~@assets/less/overwriter.less';
-/deep/ .ant-table-thead > tr > th {
-  text-align: center;
-  // font-weight: 700;
-}
-
-/deep/ .ant-table-tbody {
-  text-align: center;
-}
-
-// /deep/ th.replacecolor {
-//   background-color: #ccc;
-// }
-
-/deep/ .ant-card-body {
-  padding: 0;
-}
-/deep/ .ant-tabs {
-  border: 6px solid rgba(24, 144, 255,.3);
-  padding: 12px;
-  border-radius: 12px;
-}
-</style>

src/views/reportForms/cost-allocation-table/tabs.vue

@@ -12,6 +12,7 @@
             :columns="fabricColumns"
             :data-source="fabricData"
             bordered
+            :scroll="{ x: 1000 }"
             :pagination="false"
           >
             <!-- 面料 -转入数量 弹框-->
@@ -35,6 +36,7 @@
             :columns="ingredientsColumns"
             :data-source="ingredientsData"
             bordered
+            :scroll="{ x: 1000 }"
             :pagination="false"
           >
             <!--辅料-转入数量 弹框-->
@@ -57,6 +59,7 @@
             :columns="shipDetailsColumns"
             :data-source="shipDetailsData"
             bordered
+            :scroll="{ x: 1000 }"
             :pagination="false"
           >
           </a-table>
@@ -928,7 +931,7 @@ export default {
 //   background-color: #ccc;
 // }
 
-//tbas内 小标签
+//tabs内 小标签
 .table-title {
   font-weight: 700;
 }
@@ -939,4 +942,11 @@ export default {
 /deep/ .ant-tabs-nav .ant-tabs-tab {
   font-size: 18px;
 }
+
+/deep/ .ant-tabs {
+  margin:40px 0;
+  border: 1px dashed gray;//rgba(24, 144, 255, 0.3);
+  padding: 12px;
+  border-radius: 12px;
+}
 </style>

src/views/reportForms/full-rate-table.vue

@@ -1,113 +1,125 @@
 <template>
   <!-- 齐套率统计表 -->
-  <a-card :bordered="false">
+  <div id="fullratetable">
     <!-- 查询 -->
-    <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="开始年月">
-              <!--  :disabled-date="disabledDate" 不可选择的日期 -->
-              <a-month-picker placeholder="请选择开始年月" style="width:100%;" v-model="queryParam.startYearMonth" />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="结束年月">
-              <a-month-picker placeholder="请选择结束年月" style="width:100%;" v-model="queryParam.endYearMonth" />
-            </a-form-item>
-          </a-col>
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="区间(天)">
-              <a-input placeholder="请输入区间" v-model="queryParam.sectionData"></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.department"></a-input>
+              <a-form-item label="开始年月">
+                <!--  :disabled-date="disabledDate" 不可选择的日期 -->
+                <a-month-picker
+                  placeholder="请选择开始年月"
+                  format="YYYY-MM"
+                  style="width:100%;"
+                  v-model="queryParam.startYearMonth"
+                />
               </a-form-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="出库齐套">
-                <a-input placeholder="请输入出库齐套" v-model="queryParam.outboundSet"></a-input>
+              <a-form-item label="结束年月">
+                <a-month-picker
+                  placeholder="请选择结束年月"
+                  format="YYYY-MM"
+                  style="width:100%;"
+                  v-model="queryParam.endYearMonth"
+                />
               </a-form-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="来源订单号">
-                <a-input placeholder="请输入出库齐套" v-model="queryParam.sourceOrderNo"></a-input>
+              <a-form-item label="区间(天)">
+                <a-input placeholder="请输入区间" v-model="queryParam.sectionData"></a-input>
               </a-form-item>
             </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-item label="销售订单数量">
-                <a-input placeholder="请输入出库齐套" v-model="queryParam.salesOrderQuantity"></a-input>
-              </a-form-item>
-            </a-col>
+            <template v-if="toggleSearchStatus">
+              <a-col :md="6" :sm="8">
+                <a-form-item label="部门">
+                  <a-input placeholder="请输入部门" v-model="queryParam.department"></a-input>
+                </a-form-item>
+              </a-col>
 
-            <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.outboundSet"></a-input>
+                </a-form-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-item label="订单数量">
-                <a-input placeholder="请输入订单数量" v-model="queryParam.orderQuantity"></a-input>
-              </a-form-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-item label="来源订单号">
+                  <a-input placeholder="请输入出库齐套" v-model="queryParam.sourceOrderNo"></a-input>
+                </a-form-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-item label="颜色">
-                <a-input placeholder="请输入颜色" v-model="queryParam.color"></a-input>
-              </a-form-item>
-            </a-col>
+              <a-col :md="6" :sm="8">
+                <a-form-item label="销售订单数量">
+                  <a-input placeholder="请输入出库齐套" v-model="queryParam.salesOrderQuantity"></a-input>
+                </a-form-item>
+              </a-col>
 
-            <a-col :md="6" :sm="8">
-              <a-form-item label="交期">
-                <a-date-picker
-                  placeholder="请选择交期"
-                  @change="shipDateChange"
-                  style="width: 100%"
-                  v-model="queryParam.deliveryDate"
-                />
-              </a-form-item>
-            </a-col>
+              <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.orderQuantity"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="颜色">
+                  <a-input placeholder="请输入颜色" v-model="queryParam.color"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="交期">
+                  <a-date-picker
+                    placeholder="请选择交期"
+                    @change="shipDateChange"
+                    style="width: 100%"
+                    v-model="queryParam.deliveryDate"
+                  />
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="业务员">
+                  <a-input placeholder="请输入业务员" v-model="queryParam.salesman"></a-input>
+                </a-form-item>
+              </a-col>
+            </template>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="业务员">
-                <a-input placeholder="请输入业务员" v-model="queryParam.salesman"></a-input>
-              </a-form-item>
+              <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>
-          </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-row>
+        </a-form>
+      </div>
+    </a-card>
 
     <!-- 操作按钮区域 邮件 分析图-->
-    <div class="table-operator">
-      <a-button type="primary" icon="bell" @click="emailMsgMod">维护邮件发送通知</a-button>
-      <a-button type="primary" @click="checkMonth" icon="line-chart">查看分析图-月份</a-button>
-      <a-button type="primary" @click="checkdepartment" icon="bar-chart">查看分析图-部门</a-button>
-    </div>
+    <a-card :bordered="false" style="marginTop:10px;">
+      <div class="table-operator">
+        <a-button type="primary" icon="bell" @click="emailMsgMod">维护邮件发送通知</a-button>
+        <a-button type="primary" @click="checkMonth" icon="line-chart">查看分析图-月份</a-button>
+        <a-button type="primary" @click="checkdepartment" icon="bar-chart">查看分析图-部门</a-button>
+      </div>
 
-    <!-- table rowKey="id" -->
-    <div>
+      <!-- table rowKey="id" -->
       <a-table
         bordered
         :columns="fullrateColumns"
@@ -117,10 +129,10 @@
         :scroll="{ x: 1500 }"
       >
       </a-table>
-    </div>
+    </a-card>
     <!-- 维护邮件发送通知 -->
     <emailMsg-modal ref="emailMsgModal" :father="aa"></emailMsg-modal>
-  </a-card>
+  </div>
 </template>
 
 <script>
@@ -367,7 +379,7 @@ export default {
   methods: {
     // 邮件通知
     emailMsgMod() {
-          this.$refs.emailMsgModal.emailMsgModVis = true
+      this.$refs.emailMsgModal.emailMsgModVis = true
     },
     // 分析图- 月份
     checkMonth() {},

src/views/reportForms/order-statistics/external-statistics.vue

@@ -8,13 +8,23 @@
           <a-col :md="6" :sm="8">
             <a-form-item label="开始年月">
               <!--  :disabled-date="disabledDate" 不可选择的日期 -->
-              <a-month-picker placeholder="请选择开始年月" style="width:100%;" v-model="queryParam.startYearMonth" />
+              <a-month-picker
+                placeholder="请选择开始年月"
+                format="YYYY-MM"
+                style="width:100%;"
+                v-model="queryParam.startYearMonth"
+              />
             </a-form-item>
           </a-col>
 
           <a-col :md="6" :sm="8">
             <a-form-item label="结束年月">
-              <a-month-picker placeholder="请选择结束年月" style="width:100%;" v-model="queryParam.endYearMonth" />
+              <a-month-picker
+                placeholder="请选择结束年月"
+                format="YYYY-MM"
+                style="width:100%;"
+                v-model="queryParam.endYearMonth"
+              />
             </a-form-item>
           </a-col>
 

src/views/reportForms/order-statistics/interior-statistics.vue

@@ -8,13 +8,23 @@
           <a-col :md="6" :sm="8">
             <a-form-item label="开始年月">
               <!--  :disabled-date="disabledDate" 不可选择的日期 -->
-              <a-month-picker placeholder="请选择开始年月" style="width:100%;" v-model="queryParam.startYearMonth" />
+              <a-month-picker
+                placeholder="请选择开始年月"
+                format="YYYY-MM"
+                style="width:100%;"
+                v-model="queryParam.startYearMonth"
+              />
             </a-form-item>
           </a-col>
 
           <a-col :md="6" :sm="8">
             <a-form-item label="结束年月">
-              <a-month-picker placeholder="请选择结束年月" style="width:100%;" v-model="queryParam.endYearMonth" />
+              <a-month-picker
+                placeholder="请选择结束年月"
+                format="YYYY-MM"
+                style="width:100%;"
+                v-model="queryParam.endYearMonth"
+              />
             </a-form-item>
           </a-col>
 

src/views/reportForms/pro-progress-report/outInDetailDataDrawer.vue

@@ -1,118 +1,133 @@
 <template>
-  <!--点击【物料编号】 出入库详细数据 -->
-  <a-drawer
-    title="出入库详细数据"
-    width="67%"
-    placement="right"
-    :closable="true"
-    :visible="visible"
-    @close="onClose">
+  <!--点击【物料编号】 出入库详细数据 抽屉 -->
+  <div id="outInDetailDataDrawer">
+    <a-drawer
+      title="出入库详细数据"
+      width="67%"
+      placement="right"
+      :closable="true"
+      :visible="visible"
+      @close="onClose">
+      <!-- 查询  -->
+      <a-card :bordered="true">
+        <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-date-picker
+                    style="width: 100%"
+                    v-model="queryParam.orderData"
+                    placeholder="请选择订单日期"
+                  ></a-date-picker>
+                </a-form-item>
+              </a-col>
 
-    <!-- 查询  -->
-    <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-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 v-model="queryParam.customerShortName" placeholder="请输入客户简称"></a-input>
+                </a-form-item>
+              </a-col>
 
-          <a-col :md="6" :sm="8">
-            <a-form-item label="客户简称">
-              <a-input v-model="queryParam.customerShortName" placeholder="请输入客户简称"></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>
 
-          <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 :bordered="true" style="margin:10px 0;">
+        <div style="marginTop:30px;">
+          <h6 class="table-title" style="float:left">入库单</h6>
+          <!-- 导出 -->
+          <a-row style="float:right">
+            <a-col :md="24" :sm="12">
+              <span style="float: right;" class="table-operator">
+                <a-button
+                  type="primary"
+                  icon="download"
+                  @click="handleExportXls('出入库详细数据 - 入库单')"
+                >导出</a-button
+                >
+              </span>
+            </a-col>
+          </a-row>
+          <a-table
+            bordered
+            rowKey="id"
+            :loading="loading"
+            :columns="inOrderColumns"
+            :data-source="inOrderData"
+            :pagination="false"
+            :scroll="{ x: 1500 }"
+          >
+          </a-table>
+        </div>
 
-    <!-- 子表 入库单 -->
-    <div style="marginTop:30px;">
-      <h6 class="table-title" style="float:left">入库单</h6>
-      <!-- 导出 -->
-      <a-row style="float:right">
-        <a-col :md="24" :sm="12">
-          <span style="float: right;" class="table-operator">
-            <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 入库单')">导出</a-button>
-          </span>
-        </a-col>
-      </a-row>
-      <a-table
-        bordered
-        rowKey="id"
-        :loading="loading"
-        :columns="inOrderColumns"
-        :data-source="inOrderData"
-        :pagination="false"
-        :scroll="{ x: 1500 }"
-      >
-      </a-table>
-    </div>
+        <!-- 子表 出库单 -->
+        <div style="margin:80px 0;">
+          <h6 class="table-title" style="float:left">出库单</h6>
+          <!-- 导出 -->
+          <a-row style="float:right">
+            <a-col :md="24" :sm="12">
+              <span style="float: right;" class="table-operator">
+                <a-button
+                  type="primary"
+                  icon="download"
+                  @click="handleExportXls('出入库详细数据 - 出库单')"
+                >导出</a-button
+                >
+              </span>
+            </a-col>
+          </a-row>
+          <a-table
+            bordered
+            rowKey="id"
+            :loading="loading"
+            :columns="outOrderColumns"
+            :data-source="outOrderData"
+            :pagination="false"
+            :scroll="{ x: 1500 }"
+          >
+          </a-table>
+        </div>
 
-    <!-- 子表 出库单 -->
-    <div style="margin:80px 0;">
-      <h6 class="table-title" style="float:left">出库单</h6>
-      <!-- 导出 -->
-      <a-row style="float:right">
-        <a-col :md="24" :sm="12">
-          <span style="float: right;" class="table-operator">
-            <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 出库单')">导出</a-button>
-          </span>
-        </a-col>
-      </a-row>
-      <a-table
-        bordered
-        rowKey="id"
-        :loading="loading"
-        :columns="outOrderColumns"
-        :data-source="outOrderData"
-        :pagination="false"
-        :scroll="{ x: 1500 }"
-      >
-      </a-table>
-    </div>
-
-    <!-- 子表 材料出库单-->
-    <div>
-      <h6 class="table-title" style="float:left">材料出库单</h6>
-      <!-- 导出 -->
-      <a-row style="float:right">
-        <a-col :md="24" :sm="12">
-          <span style="float: right;" class="table-operator">
-            <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 材料出库单')">
-              导出
-            </a-button>
-          </span>
-        </a-col>
-      </a-row>
-      <a-table
-        bordered
-        rowKey="id"
-        :loading="loading"
-        :columns="materialsOutOrderColumns"
-        :data-source="materialsOutOrderData"
-        :pagination="false"
-        :scroll="{ x: 1500 }"
-      >
-      </a-table>
-    </div>
-  </a-drawer>
+        <!-- 子表 材料出库单-->
+        <div>
+          <h6 class="table-title" style="float:left">材料出库单</h6>
+          <!-- 导出 -->
+          <a-row style="float:right">
+            <a-col :md="24" :sm="12">
+              <span style="float: right;" class="table-operator">
+                <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 材料出库单')">
+                  导出
+                </a-button>
+              </span>
+            </a-col>
+          </a-row>
+          <a-table
+            bordered
+            rowKey="id"
+            :loading="loading"
+            :columns="materialsOutOrderColumns"
+            :data-source="materialsOutOrderData"
+            :pagination="false"
+            :scroll="{ x: 1500 }"
+          >
+          </a-table>
+        </div>
+      </a-card>
+    </a-drawer>
+  </div>
 </template>
 
 <script>
@@ -120,12 +135,11 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
 export default {
-  name: 'SingleOrderReportDrawer',
+  name: 'OutInDetailDataDrawer', // 出入库详细数据 抽屉
   mixins: [JeecgListMixin],
   components: { JEllipsis, moment },
   data() {
     return {
-      description: '出入库详细数据 抽屉',
       loading: false, // 表格加载
       visible: false, // 抽屉
 
@@ -277,4 +291,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/reportForms/pro-progress-report/singleOrderReportDrawer.vue

@@ -9,7 +9,7 @@
       :visible="visible"
       @close="onClose">
       <!-- 主表 展示 -->
-      <a-card :bordered="true" style="marginBottom:10px;">
+      <a-card :bordered="true">
         <div class="table-page-search-wrapper">
           <a-form layout="inline">
             <a-row :gutter="24">
@@ -141,101 +141,103 @@
       </a-card>
 
       <!-- 展示 子表 采购 -->
-      <div style="marginTop:30px;">
-        <h6 class="table-title">采购</h6>
-        <a-table
-          bordered
-          rowKey="id"
-          :loading="loading"
-          :columns="purchaseColumns"
-          :data-source="purchaseData"
-          :pagination="false"
-          :scroll="{ x: 1500 }"
-        >
-          <!-- 物料编号 -->
-          <span slot="materialNum" slot-scope="text">
-            <a>{{ text }}</a>
-          </span>
-        </a-table>
-      </div>
+      <a-card :bordered="true" style="margin:10px 0;">
+        <div style="marginTop:30px;">
+          <h6 class="table-title">采购</h6>
+          <a-table
+            bordered
+            rowKey="id"
+            :loading="loading"
+            :columns="purchaseColumns"
+            :data-source="purchaseData"
+            :pagination="false"
+            :scroll="{ x: 1500 }"
+          >
+            <!-- 物料编号 -->
+            <span slot="materialNum" slot-scope="text">
+              <a>{{ text }}</a>
+            </span>
+          </a-table>
+        </div>
 
-      <!-- 委外 -->
-      <div style="margin:60px 0;">
-        <h6 class="table-title">委外</h6>
-        <a-table
-          bordered
-          rowKey="id"
-          :loading="loading"
-          :columns="outsourceColumns"
-          :data-source="outsourceData"
-          :pagination="false"
-          :scroll="{ x: 1500 }"
-        >
-          <!-- 物料编号 弹框-->
-          <span slot="materialNum" slot-scope="text">
-            <a>{{ text }}</a>
-          </span>
-        </a-table>
-      </div>
+        <!-- 委外 -->
+        <div style="margin:60px 0;">
+          <h6 class="table-title">委外</h6>
+          <a-table
+            bordered
+            rowKey="id"
+            :loading="loading"
+            :columns="outsourceColumns"
+            :data-source="outsourceData"
+            :pagination="false"
+            :scroll="{ x: 1500 }"
+          >
+            <!-- 物料编号 弹框-->
+            <span slot="materialNum" slot-scope="text">
+              <a>{{ text }}</a>
+            </span>
+          </a-table>
+        </div>
 
-      <!-- 物料卡开始 -->
-      <div>
-        <h6 class="table-title">物料卡</h6>
-        <!-- 查询区域 -->
-        <div class="table-page-search-wrapper" style="background:#f2f2f2;padding:30px 10px 0 10px;">
-          <a-form layout="inline" @keyup.enter.native="searchQuery">
-            <a-row :gutter="24">
-              <a-col :md="6" :sm="8">
-                <a-form-item label="日期">
-                  <a-date-picker
-                    style="width: 100%"
-                    placeholder="请选择日期"
-                    v-model="queryParam.data"
-                  ></a-date-picker>
-                </a-form-item>
-              </a-col>
+        <!-- 物料卡开始 -->
+        <div>
+          <h6 class="table-title">物料卡</h6>
+          <!-- 查询区域 -->
+          <div class="table-page-search-wrapper" style="background:#f2f2f2;padding:30px 10px 0 10px;">
+            <a-form layout="inline" @keyup.enter.native="searchQuery">
+              <a-row :gutter="24">
+                <a-col :md="6" :sm="8">
+                  <a-form-item label="日期">
+                    <a-date-picker
+                      style="width: 100%"
+                      placeholder="请选择日期"
+                      v-model="queryParam.data"
+                    ></a-date-picker>
+                  </a-form-item>
+                </a-col>
 
-              <a-col :md="6" :sm="8">
-                <a-form-item label="物料" has-feedback>
-                  <a-input placeholder="请输入物料" v-model="queryParam.material"></a-input>
-                </a-form-item>
-              </a-col>
+                <a-col :md="6" :sm="8">
+                  <a-form-item label="物料" has-feedback>
+                    <a-input placeholder="请输入物料" v-model="queryParam.material"></a-input>
+                  </a-form-item>
+                </a-col>
 
-              <a-col :md="6" :sm="8">
-                <a-form-item label="计划单号">
-                  <a-input placeholder="请输入计划单号" v-model="queryParam.planOrderNo"></a-input>
-                </a-form-item>
-              </a-col>
+                <a-col :md="6" :sm="8">
+                  <a-form-item label="计划单号">
+                    <a-input placeholder="请输入计划单号" v-model="queryParam.planOrderNo"></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">
+                  <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-table
-          bordered
-          rowKey="id"
-          :loading="loading"
-          :columns="materialCardColumns"
-          :data-source="materialCardData"
-          :pagination="false"
-          :scroll="{ x: 1500 }"
-        >
-          <!-- ？？？？ 弹框-->
-          <span slot="???" slot-scope="text">
-            <a>{{ text }}</a>
-          </span>
-        </a-table>
-      </div>
+          <a-table
+            bordered
+            rowKey="id"
+            :loading="loading"
+            :columns="materialCardColumns"
+            :data-source="materialCardData"
+            :pagination="false"
+            :scroll="{ x: 1500 }"
+          >
+            <!-- ？？？？ 弹框-->
+            <span slot="???" slot-scope="text">
+              <a>{{ text }}</a>
+            </span>
+          </a-table>
+        </div>
+      </a-card>
       <!-- 物料卡结束 -->
     </a-drawer>
 
@@ -438,4 +440,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/reportForms/supply-capacity-table.vue

@@ -16,6 +16,7 @@
               <a-date-picker
                 placeholder="请选择开始日期"
                 style="width: 100%"
+                format="YYYY-MM"
                 v-model="queryParam.startDate"
               ></a-date-picker>
             </a-form-item>
@@ -26,6 +27,7 @@
               <a-date-picker
                 placeholder="请选择结束日期"
                 style="width: 100%"
+                format="YYYY-MM"
                 v-model="queryParam.endDate"
               ></a-date-picker>
             </a-form-item>