单证页面【订单数据、发运明细、预托书、装箱单】+【面料损耗表、生产进度报表】（生产缺少弹框）

src/assets/less/common.css

@@ -0,0 +1,61 @@
+.fl {
+  float: left;
+}
+/*列表上方操作按钮区域*/
+.ant-card-body .table-operator {
+  margin-bottom: 18px;
+}
+/** Button按钮间距 */
+.table-operator .ant-btn {
+  margin: 8px 8px 0 0;
+}
+/*列表td的padding设置 可以控制列表大小*/
+.ant-table-tbody .ant-table-row td {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+/*列表页面弹出modal*/
+.ant-modal-cust-warp {
+  height: 100%;
+}
+/*弹出modal Y轴滚动条*/
+.ant-modal-cust-warp .ant-modal-body {
+  height: calc(100% - 110px) !important;
+  overflow-y: auto;
+}
+/*弹出modal 先有content后有body 故滚动条控制在body上*/
+.ant-modal-cust-warp .ant-modal-content {
+  height: 90% !important;
+  overflow-y: hidden;
+}
+/*列表中有图片的加这个样式 参考用户管理*/
+.anty-img-wrap {
+  height: 25px;
+  position: relative;
+}
+.anty-img-wrap > img {
+  max-height: 100%;
+}
+/*列表中范围查询样式*/
+.query-group-cust {
+  width: calc(50% - 10px);
+}
+.query-group-split-cust:before {
+  content: '~';
+  width: 20px;
+  display: inline-block;
+  text-align: center;
+}
+/*erp风格子表外框padding设置*/
+.ant-card-wider-padding.cust-erp-sub-tab > .ant-card-body {
+  padding: 5px 12px;
+}
+.delRed {
+  color: red;
+}
+.sendGr {
+  color: green;
+}
+a {
+  text-decoration: none !important;
+}

src/assets/less/dataVTable.css

@@ -0,0 +1,8 @@
+.dv-scroll-board {
+  color: #354f52 !important;
+}
+.board .row-item .ceil:first-child {
+  background-color: yellow !important;
+  display: none;
+  margin-right: 40px;
+}

src/assets/less/dataVTable.less

@@ -0,0 +1,16 @@
+// 首页轮播图 样式覆盖
+.dv-scroll-board {
+  color: #354f52 !important;
+}
+.board {
+  /deep/.ant-tabs-tab:last-child {
+  }
+  .row-item {
+    //隐藏轮播企业公告 的ID 属性 
+    .ceil:first-child {
+      background-color: yellow !important;
+      display: none;
+      margin-right: 40px;
+    }
+  }
+}

src/assets/less/mytodo.css

@@ -0,0 +1,107 @@
+#home .firstLine {
+  margin-bottom: 12px;
+}
+#home .firstLine /deep/ .ant-tabs {
+  border-radius: 2px;
+}
+#home .firstLine .board {
+  height: 258px;
+}
+#home .secondLine .dataStyle {
+  height: 400px;
+}
+#home .secondLine .dataStyle /deep/ .ant-card-body {
+  padding: 30px 10px;
+}
+#home .secondLine .ccfullCalendar {
+  background-image: url('../date03.jpg');
+  opacity: 0.8;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-header-toolbar {
+  display: none !important;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc .fc-scrollgrid-liquid {
+  height: 290px;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-view-harness-active {
+  height: 290px !important;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-scrollgrid-sync-inner {
+  line-height: 30px;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-scrollgrid-sync-inner a {
+  color: white;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-col-header-cell-cushion {
+  color: #333 !important;
+  font-weight: 400 !important;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-day-today {
+  background-color: #70a288;
+  border-radius: 2px;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-day-today a {
+  color: white;
+  font-weight: 700;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc-daygrid-day-bottom {
+  margin-top: -24px !important;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc .fc-button-primary {
+  background-color: #1890ff;
+  margin-top: 4px;
+  border: none;
+}
+#home .secondLine .ccfullCalendar /deep/ .fc .fc-toolbar-title {
+  color: #333;
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+#home .secondLine .oaBig {
+  background-color: #61bea7;
+  text-align: center;
+  justify-content: space-between;
+}
+#home .secondLine .oaBig .oaItem {
+  margin-bottom: 20px;
+  width: calc((100% - 10px) / 3);
+}
+#home .secondLine .oaBig .oaItem h4 {
+  font-size: 12px;
+  margin-top: 4px;
+}
+#home .secondLine .links {
+  flex-flow: row wrap;
+  box-sizing: border-box;
+}
+#home .secondLine .links .itemLink {
+  float: left;
+  border-radius: 2px;
+  border: none;
+  margin-right: 10px;
+  background-color: rgba(102, 155, 188, 0.7);
+  margin-bottom: 20px;
+  width: calc((100% - 40px) / 4);
+  justify-content: center;
+  align-items: center;
+}
+#home .secondLine .links .itemLink a {
+  color: white;
+  font-size: 16px;
+}
+#home .secondLine .links .itemLink a span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#home .secondLine .links button:hover {
+  background-color: #003049;
+  color: white;
+  box-shadow: 1px 1px 3px #333;
+}
+#home /deep/ .ant-card-head-title {
+  color: #1890ff;
+}

src/assets/less/mytodo.less

@@ -0,0 +1,133 @@
+// mytodo页面专用样式
+#home {
+  // 第一行
+  .firstLine {
+    margin-bottom: 12px;
+    // 待办事项
+    /deep/ .ant-tabs {
+      border-radius: 2px;
+    }
+    // 滚动待办等、已发 高度
+    .board {
+      height: 258px;
+    }
+  }
+
+  // 第二行
+  .secondLine {
+    // 日程
+    .dataStyle {
+      height: 400px;
+      /deep/ .ant-card-body {
+        padding: 30px 10px;
+      }
+    }
+    // 小日鲈
+    .ccfullCalendar {
+      background-image: url('../date03.jpg');
+      opacity: 0.8;
+      background-size: cover;
+      background-repeat: no-repeat;
+      // 不需要日历头部选择按钮
+      /deep/ .fc-header-toolbar {
+        display: none !important;
+      }
+      //整个历真实高度
+      /deep/ .fc .fc-scrollgrid-liquid {
+        height: 290px;
+      }
+      //控制日历不要占位
+      /deep/ .fc-view-harness-active {
+        height: 290px !important;
+      }
+
+      // 日历行高字体颜色
+      /deep/ .fc-scrollgrid-sync-inner {
+        line-height: 30px;
+        a {
+          color: white;
+        }
+      }
+      /deep/ .fc-col-header-cell-cushion {
+        color: #333 !important;
+        font-weight: 400 !important;
+      }
+      // 今天日历显示
+      /deep/ .fc-day-today {
+        background-color: #70a288;
+        border-radius: 2px;
+        a {
+          color: white;
+          font-weight: 700;
+        }
+      }
+
+      /deep/ .fc-daygrid-day-bottom {
+        margin-top: -24px !important;
+      }
+      /deep/ .fc .fc-button-primary {
+        background-color: #1890ff;
+        margin-top: 4px;
+        border: none;
+      }
+      /deep/ .fc .fc-toolbar-title {
+        color: #333;
+        font-size: 16px;
+        letter-spacing: 1px;
+      }
+    }
+    // 常用流程 OA按钮
+    .oaBig {
+      background-color: rgb(97, 190, 167);
+      text-align: center;
+      justify-content: space-between;
+      .oaItem {
+        margin-bottom: 20px;
+        width: calc((100% - 10px) / 3);
+        h4 {
+          font-size: 12px;
+          margin-top: 4px;
+        }
+      }
+    }
+    // 友情链接
+    .links {
+      // display: flex;
+      flex-flow: row wrap;
+      // justify-content: space-between;
+      box-sizing: border-box;
+      .itemLink {
+        float: left;
+        border-radius: 2px;
+        border: none;
+        margin-right: 10px;
+        background-color: rgba(102, 155, 188, 0.7);
+        margin-bottom: 20px;
+        width: calc((100% - 40px) / 4);
+        // display: flex;
+        justify-content: center;
+        align-items: center;
+        a {
+          color: white;
+          font-size: 16px;
+          span {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      button:hover {
+        background-color: #003049;
+        color: white;
+        box-shadow: 1px 1px 3px #333;
+      }
+    }
+  }
+
+  // 首页 所有card 标题颜色
+  /deep/ .ant-card-head-title {
+    color: #1890ff;
+  }
+}

src/assets/less/overwriter.css

@@ -0,0 +1,12 @@
+.table-title {
+  margin: 0;
+  border: 1px solid #e8e8e8;
+  background-color: #f2f2f2;
+  border-top-right-radius: 16px;
+  border-bottom: none;
+  font-size: 16px;
+  width: 160px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+}

src/assets/less/overwriter.less

@@ -0,0 +1,26 @@
+// .ant-table-thead > tr > th {
+  // text-align: center;
+  // font-weight: 700;
+// }
+// /deep/ .ant-table-tbody {
+//   text-align: center;
+// }
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+
+// 报表 子表标题 统一样式
+.table-title {
+  margin: 0;
+  border: 1px solid #e8e8e8;
+  background-color: #f2f2f2;
+  border-top-right-radius: 16px;
+  border-bottom: none;
+  font-size: 16px;
+  width: 160px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+}
+// 所有备注文本框 
+

src/views/order/orderDetailDrawer.vue

@@ -0,0 +1,242 @@
+<template>
+  <!-- 订单数据明细 -->
+  <a-drawer
+    title="订单数据明细"
+    width="89%"
+    placement="right"
+    :closable="true"
+    :visible="visible"
+    @close="onClose">
+    <!--主表信息 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单号">
+              <a-input v-model="orderDetail.orderNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单日期">
+              <a-input v-model="orderDetail.orderDate"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="业务类型">
+              <a-input v-model="orderDetail.businessType"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="销售类型">
+              <a-input v-model="orderDetail.saleType"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户简称">
+              <a-input v-model="orderDetail.customerShortName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户名称">
+              <a-input v-model="orderDetail.customerName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="汇率">
+              <a-input v-model="orderDetail.exchangeRate"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="销售部门">
+              <a-input v-model="orderDetail.salesDepartment"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="业务员">
+              <a-input v-model="orderDetail.salesman"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="币种">
+              <a-input v-model="orderDetail.currency"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="品牌方">
+              <a-input v-model="orderDetail.brand"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="第三方">
+              <a-input v-model="orderDetail.thirdparty"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="定金比例(%)">
+              <a-input v-model="orderDetail.depositRatio"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="定金">
+              <a-input v-model="orderDetail.deposit"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="协同路线">
+              <a-input v-model="orderDetail.collaborativeRoute"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单备注">
+              <a-input v-model="orderDetail.orderNote"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="价格备注">
+              <a-input v-model="orderDetail.priceNote"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户订单号">
+              <a-input v-model="orderDetail.customerOrderNum"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="整单合计">
+              <a-input v-model="orderDetail.documentTotal"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="最终客户">
+              <a-input v-model="orderDetail.finalCustomer"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="付款条件">
+              <a-input v-model="orderDetail.paymentClause"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="18" :sm="12">
+            <a-form-item label="订单变更说明">
+              <a-input v-model="orderDetail.orderChangeDesc"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- table区域  -->
+    <div>
+      <a-table
+        bordered
+        :columns="detailColumns"
+        :data-source="orderDetailData"
+        :pagination="ipagination"
+        :loading="loading"
+        :scroll="{ x: 1500 }"
+        @change="handleTableChange"
+      >
+      </a-table>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'OrderList',
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    return {
+      description: '订单销售明细 抽屉',
+      visible: false, // 抽屉
+
+      // 表头
+      detailColumns: [
+        { title: '款号', width: 120, dataIndex: 'styleNum', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '预发货日期',
+          width: 120,
+          dataIndex: 'scheduledShipDate',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        { title: '预完工日期', width: 120, dataIndex: 'scheduledDoneDate', className: 'replacecolor' },
+        { title: 'Pack Id', width: 100, dataIndex: 'packId', className: 'replacecolor' },
+        { title: '小po', width: 100, dataIndex: 'smallPo', className: 'replacecolor' },
+        { title: '分销点', width: 150, dataIndex: 'distributionPoint', className: 'replacecolor' },
+        { title: '存货编码', width: 120, dataIndex: 'cinvcode', className: 'replacecolor' },
+        { title: '存货名称', width: 120, dataIndex: 'inventoryName', className: 'replacecolor' },
+        { title: '规格型号', width: 100, dataIndex: 'specificationModel', className: 'replacecolor' },
+        { title: '颜色', width: 100, dataIndex: 'color', className: 'replacecolor' },
+        { title: '尺码', width: 100, dataIndex: 'size', className: 'replacecolor' },
+        { title: '配码规则', width: 100, dataIndex: 'codeRules', className: 'replacecolor' },
+        { title: '光坯毛门幅CM', width: 140, dataIndex: 'smoothDoorCM', className: 'replacecolor' },
+        { title: '箱数', width: 100, dataIndex: 'boxNum', className: 'replacecolor' },
+        { title: '数量', width: 100, dataIndex: 'quantity', className: 'replacecolor' },
+        { title: '主计量', width: 100, dataIndex: 'mainMeter', className: 'replacecolor' },
+        { title: '含税单价', width: 100, dataIndex: 'priceInTax', className: 'replacecolor' },
+        { title: '价税合计', width: 100, dataIndex: 'totalPriceTax', className: 'replacecolor' },
+        { title: '税率(%)', width: 100, dataIndex: 'taxRate', className: 'replacecolor' },
+        {
+          title: '备注',
+          width: 150,
+          dataIndex: 'note',
+          customRender: t => ellipsis(t),
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'note' }
+        },
+        { title: '行关闭人', width: 100, dataIndex: 'shutDownMan', className: 'replacecolor' }
+      ],
+      orderDetailData: [{}, {}, {}],
+      loading: false, // 表格加载
+      orderDetail: []
+    }
+  },
+  created() {},
+  methods: {
+    backOrderList() {
+      console.log('返回订单销售列表')
+      this.visible = false
+    },
+    onClose() {
+      // 关闭抽屉
+      this.visible = false
+    }
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/order/orderList.vue

@@ -0,0 +1,260 @@
+<template>
+  <!-- 订单数据列表 -->
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单号">
+              <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单日期" has-feedback>
+              <a-date-picker style="width: 100%" v-model="queryParam.orderData"></a-date-picker>
+            </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.customerShortName"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="账套">
+                <a-select placeholder="请选择账套" v-model="queryParam.accountSet">
+                  <a-select-option :value="''">请选择</a-select-option>
+                  <a-select-option :value="0">香港森语(101)</a-select-option>
+                  <a-select-option :value="1">宁波森语(102)</a-select-option>
+                  <a-select-option :value="2">宁波马菲羊(103)</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="发货状态">
+                <a-select placeholder="请选择发货状态" v-model="queryParam.shippingStatu">
+                  <a-select-option :value="''">请选择</a-select-option>
+                  <a-select-option :value="0">未发货</a-select-option>
+                  <a-select-option :value="1">已发货</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+
+          <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>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button type="primary" @click="synchronization" icon="reload">同步</a-button>
+    </div>
+
+    <!-- table区域  -->
+    <div>
+      <a-table
+        bordered
+        rowKey="id"
+        :columns="orderLIstColumns"
+        :data-source="orderListData"
+        :loading="loading"
+        :pagination="ipagination"
+        :scroll="{ x: 1500 }"
+        @change="handleTableChange"
+      >
+        <!-- 订单号 链接-->
+        <span slot="orderNum" slot-scope="text">
+          <a>{{ text }}</a>
+        </span>
+      </a-table>
+    </div>
+
+    <!-- 订单数据明细 抽屉 -->
+    <orderDetail-drawer ref="orderDetailDrawer" :father="aa" @ok="modalFormOk"></orderDetail-drawer>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import OrderDetailDrawer from '@views/order/orderDetailDrawer.vue'
+
+export default {
+  name: 'OrderList',
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment, OrderDetailDrawer },
+
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+
+    return {
+      description: '订单销售列表页面',
+      // 表头
+      orderLIstColumns: [
+        {
+          title: '订单号',
+          width: 140,
+          dataIndex: 'orderNum',
+          fixed: 'left',
+          className: 'replacecolor',
+          customCell: this.showDrawer,
+          scopedSlots: { customRender: 'orderNum' }
+        },
+        //  {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        { title: '订单日期', width: 120, dataIndex: 'orderData', fixed: 'left', className: 'replacecolor' },
+        { title: '业务类型', width: 120, dataIndex: 'businessType', className: 'replacecolor' },
+        { title: '客户订单', width: 120, dataIndex: 'customerorder', className: 'replacecolor' },
+        {
+          title: '销售类型',
+          width: 120,
+          dataIndex: 'saleType',
+
+          className: 'replacecolor',
+          customRender: function(text) {
+            if (text == '1') {
+              return '销售类型1'
+            }
+            if (text == '2') {
+              return '销售类型2'
+            }
+            if (text == '3') {
+              return '销售类型3'
+            }
+            if (text == '4') {
+              return '销售类型4'
+            }
+          }
+        },
+        { title: '客户简称', width: 150, dataIndex: 'customerShortName', className: 'replacecolor' },
+        { title: '客户名称', width: 120, dataIndex: 'customerName', className: 'replacecolor' },
+        { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' },
+        { title: '汇率', width: 90, dataIndex: 'exchangeRate', className: 'replacecolor' },
+        { title: '整单合计', width: 120, dataIndex: 'documentTotal', className: 'replacecolor' },
+        { title: '销售部门', width: 120, dataIndex: 'salesDepartment', className: 'replacecolor' },
+        { title: '业务员', width: 120, dataIndex: 'salesman', className: 'replacecolor' },
+        { title: '币种', width: 120, dataIndex: 'currency', className: 'replacecolor' },
+        { title: '品牌方', width: 120, dataIndex: 'brand', className: 'replacecolor' },
+        { title: '第三方', width: 120, dataIndex: 'thirdparty', className: 'replacecolor' },
+        { title: '定金比例(%)', width: 120, dataIndex: 'depositRatio', className: 'replacecolor' },
+        { title: '定金', width: 120, dataIndex: 'deposit', className: 'replacecolor' },
+        { title: '协同路线', width: 120, dataIndex: 'collaborativeRoute', className: 'replacecolor' },
+        { title: '付款条件', width: 180, dataIndex: 'paymentClause', className: 'replacecolor' },
+        { title: '最终客户', width: 120, dataIndex: 'finalCustomer', className: 'replacecolor' },
+        {
+          title: '订单备注',
+          width: 180,
+          dataIndex: 'orderNote',
+          customRender: t => ellipsis(t),
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'orderNote' }
+        },
+        {
+          title: '价格备注',
+          width: 120,
+          dataIndex: 'priceNote',
+          customRender: t => ellipsis(t),
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'priceNote' }
+        },
+        {
+          title: '订单变更说明',
+          width: 180,
+          dataIndex: 'orderChangeDesc',
+          fixed: 'right',
+          customRender: t => ellipsis(t),
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'orderChangeDesc' }
+        }
+      ],
+      orderListData: [
+        { orderNum: 'AA002200001' },
+        { orderNum: 'AA002204502' },
+        { orderNum: 'AA002206503' },
+        { orderNum: 'AA002200004' }
+      ],
+      loading: false // 表格加载
+    }
+  },
+  created() {
+    // 渲染订单销售列表
+  },
+  methods: {
+    // 同步
+    synchronization() {},
+
+    // 查询按钮
+    searchQuery() {
+      // 渲染订单销售列表
+    },
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
+      // 重新渲染订单销售列表
+    },
+
+    // 【订单号】 抽屉
+    showDrawer(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('点击了单元格')
+            // this.$router.push('orderDetail')
+            this.$refs.orderDetailDrawer.visible = true
+          }
+        }
+      }
+    },
+    // 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/packing-list/packinglist-clothes/clothes-add.vue

@@ -0,0 +1,578 @@
+<template>
+  <!-- 新增成衣 -->
+  <a-card :bordered="false">
+    <!-- 主表信息 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单号">
+              <a-input placeholder="请输入订单号" v-model="clothesAdd.orderNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="款号">
+              <a-input placeholder="请输入款号" v-model="clothesAdd.styleNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="品名">
+              <a-input placeholder="请输入品名" v-model="clothesAdd.name"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="尺码范围">
+              <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-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户">
+              <a-input placeholder="请输入客户" v-model="clothesAdd.customer"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="集装箱代号">
+              <a-input placeholder="请输入集装箱代号" v-model="clothesAdd.containerCode"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="集装箱号">
+              <a-input placeholder="请输入集装箱号" v-model="clothesAdd.containerNo"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="备注">
+              <a-input placeholder="请输入备注" v-model="clothesAdd.note"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="成衣工厂">
+              <a-input placeholder="请输入成衣工厂" v-model="clothesAdd.clothesFactory"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="外销发票号">
+              <a-input placeholder="请输入外销发票号" v-model="clothesAdd.exportInvoiceNo"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="托书号">
+              <a-input placeholder="请输入托书号" v-model="clothesAdd.bookNum"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!--操作按钮区域 参照预装箱单 増行-->
+    <div class="table-operator">
+      <a-button type="primary" @click="referadvancePackingList" icon="ordered-list">参照预装箱单</a-button>
+      <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+    </div>
+
+    <!-- table , y: 300 -->
+    <div>
+      <a-table
+        bordered
+        rowKey="id"
+        :columns="clothesAddColumns"
+        :data-source="clothesAddData"
+        :loading="loading"
+        :pagination="ipagination"
+        :scroll="{ x: 1500 }"
+        @change="handleTableChange"
+      >
+        <!-- 启始箱号 -->
+        <a-form-model
+          slot="inceptionBoxNo"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="inceptionBoxNo">
+            <a-input style="width:100%" v-model="record.inceptionBoxNo" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 结束箱号 -->
+        <a-form-model
+          slot="endBoxNo"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="endBoxNo">
+            <a-input style="width:100%" v-model="record.endBoxNo" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 件数/箱 输入框-->
+        <a-form-model
+          slot="packagesBox"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="packagesBox">
+            <a-input style="width:100%" v-model="record.packagesBox" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!--箱数 输入框-->
+        <a-form-model
+          slot="boxes"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="boxes">
+            <a-input style="width:100%" v-model="record.boxes" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!--净重/箱 输入框-->
+        <a-form-model
+          slot="suttle"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="suttle">
+            <a-input style="width:100%" v-model="record.suttle" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!--毛重/箱 输入框-->
+        <a-form-model
+          slot="roughWeight"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="roughWeight">
+            <a-input style="width:100%" v-model="record.roughWeight" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!--外箱长度 输入框-->
+        <a-form-model
+          slot="boxLength"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="boxLength">
+            <a-input style="width:100%" v-model="record.boxLength" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!--外箱宽度 输入框-->
+        <a-form-model
+          slot="boxWidth"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="boxWidth">
+            <a-input style="width:100%" v-model="record.boxWidth" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!--外箱高度 输入框-->
+        <a-form-model
+          slot="boxHeight"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="boxHeight">
+            <a-input style="width:100%" v-model="record.boxHeight" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 操作 -->
+        <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>
+    </div>
+
+    <!-- 保存 取消 -->
+    <a-row>
+      <a-col :md="24" :sm="12">
+        <span style="float: right;">
+          <a-button type="primary" @click="save" icon="save">保存</a-button>
+          <a-button type="primary" @click="backClothesList" icon="rollback" style="margin:0 10px;">取消</a-button>
+        </span>
+      </a-col>
+    </a-row>
+
+    <!-- 参照预装箱单 -->
+    <advancePackingList-modal ref="advancePackingListModal" :father="aa" @ok="modalFormOk"></advancePackingList-modal>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import AdvancePackingListModal from '@views/pre-book/advancePackingListModal.vue'
+
+export default {
+  name: 'ClothesAdd', // 装箱单- 新增成衣
+  mixins: [JeecgListMixin], // 分页等
+  computed: {},
+  components: { AdvancePackingListModal, JEllipsis }, // 参照预装箱单 弹框
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+
+    return {
+      // 表头
+      clothesAddColumns: [
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 160,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '成衣工厂',
+          dataIndex: 'clothesFactory',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: 'HOD',
+          dataIndex: 'hod',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'STYLE NO.',
+          dataIndex: 'styleNo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'PO NO.',
+          dataIndex: 'poNo',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: 'ITEM NO./SKU NO./UPC NO./PACKS CODE',
+          dataIndex: 'itemNo',
+          width: 340,
+          className: 'replacecolor'
+        },
+        {
+          title: '分销点/DC/LABEL',
+          dataIndex: 'dcLabel',
+          width: 200,
+          className: 'replacecolor'
+        },
+        {
+          title: 'S',
+          dataIndex: 's',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: 'M',
+          dataIndex: 'm',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: 'L',
+          dataIndex: 'l',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: 'XL',
+          dataIndex: 'xl',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: 'XXL',
+          dataIndex: 'xxl',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '3XL',
+          dataIndex: '3xl',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '启始箱号',
+          dataIndex: 'inceptionBoxNo',
+          scopedSlots: { customRender: 'inceptionBoxNo' },
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '结束箱号',
+          dataIndex: 'endBoxNo',
+          width: 120,
+          scopedSlots: { customRender: 'endBoxNo' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '颜色（中英文）',
+          dataIndex: 'colorChUsa',
+          width: 140,
+          className: 'replacecolor'
+        },
+        {
+          title: '配码',
+          dataIndex: 'configCode',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '件数/箱',
+          dataIndex: 'packagesBox',
+          width: 120,
+          scopedSlots: { customRender: 'packagesBox' },
+          className: 'replacecolor'
+        },
+        {
+          title: '箱数',
+          dataIndex: 'boxes',
+          width: 120,
+          scopedSlots: { customRender: 'boxes' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '总件数',
+          dataIndex: 'totalPackagesNum',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '净重/箱',
+          dataIndex: 'suttle',
+          width: 120,
+          scopedSlots: { customRender: 'suttle' },
+          className: 'replacecolor'
+        },
+        {
+          title: '总净重',
+          dataIndex: 'totalSuttle',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '毛重/箱',
+          dataIndex: 'roughWeight',
+          width: 120,
+          scopedSlots: { customRender: 'roughWeight' },
+          className: 'replacecolor'
+        },
+        {
+          title: '总毛重',
+          dataIndex: 'totalRoughWeigh',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '外箱长度',
+          dataIndex: 'boxLength',
+          width: 120,
+          scopedSlots: { customRender: 'boxLength' },
+          className: 'replacecolor'
+        },
+        {
+          title: '外箱宽度',
+          dataIndex: 'boxWidth',
+          width: 120,
+          scopedSlots: { customRender: 'boxWidth' },
+          className: 'replacecolor'
+        },
+        {
+          title: '外箱高度',
+          dataIndex: 'boxHeight',
+          width: 120,
+          scopedSlots: { customRender: 'boxHeight' },
+          className: 'replacecolor'
+        },
+        {
+          title: '总体积',
+          dataIndex: 'totalVolume',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '净净重',
+          dataIndex: 'netNetWeight',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '总价',
+          dataIndex: 'totalPrices',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '备注',
+          dataIndex: 'note',
+          width: 140,
+          customRender: t => ellipsis(t),
+          fixed: 'right',
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 160,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      clothesAddData: [{}, {}, {}],
+      loading: false, // 表格加载
+      clothesAdd: []
+    }
+  },
+  created() {},
+  methods: {
+    // 参照预装箱单
+    referadvancePackingList() {
+      console.log('打开参照订单数据')
+      // 打开订单数据弹框
+      this.$refs.advancePackingListModal.advancePackingListModVis = true
+    },
+    // 増行
+    handleAddColumn() {
+      console.log('増行')
+
+      const addrow = {
+        accountSet: '',
+        clothesFactory: '',
+        hod: '',
+        styleNo: '',
+        poNo: '',
+        itemNo: '',
+        dcLabel: '',
+        s: '',
+        m: '',
+        l: '',
+        xl: '',
+        xxl: '',
+        xxxl: '',
+        inceptionBoxNo: '',
+        endBoxNo: '',
+        colorChUsa: '',
+        configCode: '',
+        packagesBox: '',
+        boxes: '',
+        totalPackagesNum: '',
+        suttle: '',
+        totalSuttle: '',
+        roughWeight: '',
+        totalRoughWeigh: '',
+        boxLength: '',
+        boxWidth: '',
+        boxHeight: '',
+        totalVolume: '',
+        netNetWeight: '',
+        price: '',
+        totalPrices: '',
+        note: '',
+        operation: ''
+      }
+
+      this.clothesAddData.push(addrow)
+    },
+    // -------------------------------------
+    //  操作按钮 删除
+    handleDelete() {},
+    // 操作按钮 复制
+    copy() {},
+
+    // -------------------------------------
+
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   this.getAnnList()
+    // }
+
+    // 保存按钮
+    save() {},
+    // 取消
+    backClothesList() {
+      this.$router.push('clothes-list')
+    },
+    // -------------------------------------
+    aa() {} // father
+  },
+
+  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/packing-list/packinglist-clothes/clothes-list.vue

@@ -0,0 +1,468 @@
+<template>
+  <!-- 装箱单-成衣列表 -->
+  <a-card :bordered="false">
+    <!-- 查询 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单号">
+              <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="款号">
+              <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>
+
+    <!-- 操作按钮区域 推送 导入 新增-->
+    <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  y: 300 -->
+    <div>
+      <a-table
+        bordered
+        rowKey="id"
+        :columns="clothesListColumns"
+        :data-source="clothesListData"
+        :loading="loading"
+        :pagination="ipagination"
+        :row-key="record => record.id"
+        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        @change="handleTableChange"
+        :scroll="{ x: 1500 }"
+      >
+        <!-- 集装箱号 输入框-->
+        <a-form-model
+          slot="containerNo"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="containerNo">
+            <a-input style="width:100%" v-model="record.containerNo" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 预托书号 -->
+        <a-form-model
+          slot="preBookNum"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="preBookNum">
+            <a-input style="width:100%" v-model="record.preBookNum" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 状态 -->
+        <!-- slot-scope="text, record" -->
+        <span slot="stateSlot">
+          <!-- v-if="record.isRelease == '0'" -->
+          <a-tag color="#f50">保存</a-tag>
+          <!-- <a-tag color="#87d068" v-else>已提交</a-tag> -->
+        </span>
+
+        <!-- 推送状态 -->
+        <span slot="pushState">
+          <!-- v-if="record.isRelease == '0'" -->
+          <a-tag color="#f50">保存</a-tag>
+          <!-- <a-tag color="#87d068" v-else>已提交</a-tag> -->
+        </span>
+
+        <!-- 单据状态 -->
+        <span slot="documentState">
+          <!-- 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 @click="accessoryUpload(record)" style="color:green;">附件上传</a>
+          <a-divider type="vertical" />
+
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
+            <a-menu slot="overlay">
+              <a-menu-item><a @click="submit(record)">提交</a></a-menu-item>
+              <a-menu-item><a @click="checke(record)">查看</a></a-menu-item>
+              <a-menu-item><a @click="edit(record)">修改</a></a-menu-item>
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                  <a href="javascript:void(0);" style="color:red;">删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+      </a-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'ClothesList', // 装箱单-成衣列表
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+
+    return {
+      // 表头
+      clothesListColumns: [
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '预发货日期',
+          dataIndex: 'scheduledShipDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '存货名称',
+          dataIndex: 'inventoryName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '颜色',
+          dataIndex: 'color',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '采购/委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 160,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单类型',
+          dataIndex: 'orderType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '工厂单价',
+          dataIndex: 'factoryPeice',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '数量（按合并规则累计）',
+          dataIndex: 'quantity',
+          width: 200,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '箱数',
+          dataIndex: 'boxesNum',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '总净重',
+          dataIndex: 'totalSuttle',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '总毛重',
+          dataIndex: 'totalRoughWeigh',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '总体积',
+          dataIndex: 'totalVolume',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '总价',
+          dataIndex: 'totalPrices',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '集装箱代号',
+          dataIndex: 'containerCode',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '集装箱号',
+          dataIndex: 'containerNo',
+          width: 140,
+          scopedSlots: { customRender: 'containerNo' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '预托书号',
+          dataIndex: 'preBookNum',
+          width: 160,
+          scopedSlots: { customRender: 'preBookNum' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '成衣工厂',
+          dataIndex: 'clothesFactory',
+          width: 140,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '推送状态',
+          dataIndex: 'pushState',
+          width: 90,
+          scopedSlots: { customRender: 'pushState' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '单据状态',
+          dataIndex: 'documentState',
+          width: 90,
+          scopedSlots: { customRender: 'documentState' },
+          className: 'replacecolor'
+        },
+        {
+          title: '原因',
+          dataIndex: 'reason',
+          width: 180,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '是否云工厂推送',
+          dataIndex: 'isPushCloudfactory ',
+          width: 90,
+          // scopedSlots: { customRender: 'isPushCloudfactory' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '托书号',
+          dataIndex: 'bookNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '外销发票号',
+          dataIndex: 'exportInvoiceNo',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '状态',
+          dataIndex: 'state',
+          width: 80,
+          fixed: 'right',
+          scopedSlots: { customRender: 'stateSlot' },
+          className: 'replacecolor'
+        },
+
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 160,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      clothesListData: [{}, {}, {}],
+      selectedRowKeys: [], // 勾选航
+      loading: false, // 表格加载
+
+      // 查询条件
+      queryParam: {
+        orderNum: '',
+        styleNum: '',
+        name: '', // 品名
+        bookNum: '' // 托书号
+      },
+      url: {
+        // syncUser: '/act/process/extActProcess/doSyncUser',
+        list: '/sys/user/list',
+        // delete: '/sys/user/delete',
+        // deleteBatch: '/sys/user/deleteBatch',
+        exportXlsUrl: '/sys/user/exportXls', // 导出
+        importExcelUrl: 'sys/user/importExcel' // 导入
+      }
+    }
+  },
+  created() {
+    // this.getAdPaListClothes()
+  },
+  methods: {
+    // 第一行 推送
+    push() {},
+    // 导入
+    importData() {},
+    // 装箱单-成衣列表 -新增
+    openClothesAdd() {
+      this.$router.push('clothes-add')
+    },
+
+    // 第二行
+    // 查询按钮
+    searchQuery() {
+      // this.getAnnList() // 渲染公告
+    },
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
+      // this.getAnnList()
+    },
+    // 操作 附件上传
+    accessoryUpload() {},
+    // 操作 提交
+    submit() {},
+    // 操作 取消提交
+    cancelSubmit() {},
+    // 操作 查看
+    checke() {},
+    // 操作 修改
+    handleDelete() {},
+    // ============================
+
+    // ??
+    modalFormOk() {},
+    // 选中行
+    onSelectChange(keys, rows) {
+      this.selectedRowKeys = keys
+      this.selectedRows = rows
+    }
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   // this.getAnnList()
+    // }
+  },
+  computed: {
+    // 导入
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    },
+    // 选中项
+    rowSelection() {
+      return {
+        onChange: (selectedRowKeys, selectedRows) => {
+          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+        },
+        getCheckboxProps: record => ({
+          props: {
+            disabled: record.title === 'Disabled User',
+            // Column configuration not to be checked
+            title: record.title
+          }
+        })
+      }
+    }
+  },
+  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/pre-book/addPreBook.vue

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

src/views/pre-book/advancePackingListModal.vue

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

src/views/pre-book/preBookList.vue

@@ -0,0 +1,299 @@
+<template>
+  <!-- 预托书列表 -->
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单号">
+              <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单日期" has-feedback>
+              <a-date-picker style="width: 100%" v-model="queryParam.orderDate"> </a-date-picker>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户简称">
+              <a-input placeholder="请输入客户简称" v-model="queryParam.customerShortName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="箱号">
+                <a-input placeholder="请输入箱号" v-model="queryParam.boxNo"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="小po号">
+                <a-input placeholder="请输入小po号" v-model="queryParam.smallPo"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="预托书号">
+                <a-input placeholder="请输入预托书号" v-model="queryParam.preBookNum"></a-input>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 新增-->
+    <div class="table-operator">
+      <a-button type="primary" @click="addPreBook" icon="plus">新增</a-button>
+    </div>
+
+    <!-- table , y: 300 -->
+    <div>
+      <a-table
+        bordered
+        rowKey="id"
+        :columns="preBookListColumns"
+        :data-source="preBookListData"
+        :loading="loading"
+        :pagination="ipagination"
+        @change="handleTableChange"
+        :scroll="{ x: 1500 }"
+      >
+        <!-- 金额 -->
+        <a-form-model
+          slot="money"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="money">
+            <a-input style="width:100%" v-model="record.money" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 单据状态 -->
+        <span slot="documentStateSlot">
+          <a-tag color="#2db7f5">已保存</a-tag>
+        </span>
+        <!-- if  已提交 -->
+        <!-- <span slot="documentStateSlot">
+          <a-tag color="#2db7f5">已提交</a-tag>
+        </span> -->
+
+        <!-- 操作 -->
+        <span slot="operationSlot" slot-scope="text, record">
+          <a @click="submit(record)" style="color:green;">提交</a>
+          <a-divider type="vertical" />
+
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
+            <a-menu slot="overlay">
+              <a-menu-item><a @click="checke(record)">查看</a></a-menu-item>
+              <a-menu-item><a @click="edit(record)">修改</a></a-menu-item>
+              <a-menu-item><a @click="print(record)">打印</a></a-menu-item>
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                  <a href="javascript:void(0);" style="color:red;">删除</a>
+                </a-popconfirm></a-menu-item
+              >
+            </a-menu>
+          </a-dropdown>
+        </span>
+      </a-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+export default {
+  name: 'PreBookList', // 预托书列表
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment },
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+
+    return {
+      // 表头
+      preBookListColumns: [
+        { title: '预托书号', width: 120, dataIndex: 'preBookNum', fixed: 'left', className: 'replacecolor' },
+        { title: '订单号', width: 120, dataIndex: 'orderNum', fixed: 'left', className: 'replacecolor' },
+        { title: '外销发票号码', dataIndex: 'exportInvoiceNo', width: 120, className: 'replacecolor' },
+        { title: '客户简称', dataIndex: 'customerShortName', width: 120, className: 'replacecolor' },
+        {
+          title: '分销点',
+          dataIndex: 'distributionPoint',
+          width: 120,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '经营单位',
+          dataIndex: 'unitOperation',
+          width: 150,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        { title: '总箱数', dataIndex: 'totalBoxes', width: 120, className: 'replacecolor' },
+        { title: '总毛重', dataIndex: 'totalRoughWeigh', width: 120, className: 'replacecolor' },
+        { title: '总体积', dataIndex: 'totalVolume', width: 100, className: 'replacecolor' },
+        {
+          title: '金额',
+          dataIndex: 'money',
+          scopedSlots: { customRender: 'money' },
+          width: 140,
+          className: 'replacecolor'
+        },
+        //  {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        { title: '实际船期', dataIndex: 'actualShipDate', width: 120, className: 'replacecolor' },
+        { title: '收汇方式', dataIndex: 'collectionMethod', width: 120, className: 'replacecolor' },
+        {
+          title: '收货人',
+          dataIndex: 'consignee',
+          width: 100,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '提单或承运收据',
+          dataIndex: 'billLadingOrCarriageReceipt',
+          width: 140,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '抬头人',
+          dataIndex: 'headPerson',
+          width: 120,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        { title: '贸易国别', dataIndex: 'tradeCountry', width: 100, className: 'replacecolor' },
+        { title: '运抵国别', dataIndex: 'arriveCountry', width: 100, className: 'replacecolor' },
+        { title: '出口口岸', dataIndex: 'exportPort', width: 100, className: 'replacecolor' },
+        {
+          title: '通知人',
+          dataIndex: 'notifier',
+          width: 100,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        { title: 'NOTIFY', dataIndex: 'NOTIFY', width: 150, className: 'replacecolor' },
+        { title: '目的港', dataIndex: 'destinationPort', width: 100, className: 'replacecolor' },
+        { title: '装运期限', dataIndex: 'latestShipmentDate', width: 100, className: 'replacecolor' },
+        {
+          title: '单据状态',
+          dataIndex: 'documentState',
+          width: 90,
+          scopedSlots: { customRender: 'documentStateSlot' },
+          fixed: 'right',
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 160,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      preBookListData: [{ orderNum: 'AA002200001' }, {}, {}],
+      id: '', //
+      loading: false, // 表格加载
+
+      // 查询条件
+      queryParam: {
+        orderNum: '',
+        orderDate: '',
+        customerShortName: '',
+        boxNo: '',
+        smallPo: '',
+        preBookNum: ''
+      }
+    }
+  },
+
+  created() {
+    // this.getOrderList() // 渲染预托书
+  },
+  methods: {
+    // 查询按钮
+    searchQuery() {
+      // this.getpreBookList() // 渲染渲染预托书
+    },
+    // 重置
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
+      // this.getpreBookList()
+    },
+    // 新增
+    addPreBook() {
+      this.$router.push('addPreBook')
+    },
+
+    // 操作 提交
+    submit() {},
+    // 操作 查看
+    checke() {},
+    // 操作 修改
+    edit() {},
+    // 操作 打印
+    print() {},
+    // 操作 删除
+    handleDelete() {}
+
+    // // 分页、排序、筛选变化时触发
+    // 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/fabric-loss-table.vue

@@ -0,0 +1,909 @@
+<template>
+  <!-- 面料损耗表 -->
+  <div id="fabricLossTable">
+    <!-- 主要信息 -->
+    <a-card title="主要信息">
+      <a-row :gutter="24">
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划单号">
+                <a-input v-model="fabricLoss.planNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="款号" has-feedback>
+                <a-input v-model="fabricLoss.styleNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划员">
+                <a-input v-model="fabricLoss.planner"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="成衣合同号">
+                <a-input v-model="fabricLoss.garmentContractNo"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="排单数量">
+                <a-input v-model="fabricLoss.singleRowNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="业务员">
+                <a-input v-model="fabricLoss.salesman"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="实际单件成本">
+                <a-input v-model="fabricLoss.actualUnitCost"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="实际出库数量">
+                <a-input v-model="fabricLoss.actualOutQuantity"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="制单人">
+                <a-input v-model="fabricLoss.preparedBy"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="单件成本">
+                <a-input v-model="fabricLoss.costPerUnit"></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="fabricLoss.queryDate"></a-date-picker>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-button type="primary">附件</a-button>
+            </a-col>
+          </a-form>
+        </div>
+      </a-row>
+    </a-card>
+
+    <!-- 子表 -->
+    <a-card style="margin:10px 0;">
+      <!-- 采购订单 -->
+      <div class="purchase-order-table">
+        <h6 class="table-title">采购订单</h6>
+
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="purchaseOrderColumns"
+          :data-source="purchaseOrderData"
+          bordered
+          :pagination="false"
+        >
+          <!-- 采购数量 -->
+          <span slot="purchaseQuantity" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+
+          <!-- 余纱 -->
+          <span slot="surplusYarn" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+
+          <!--  来源余纱 -->
+          <span slot="fromSurplusYarn" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+
+          <!--  其他入库的纱  -->
+          <span slot="surplusYarn" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 委外订单国内 -->
+      <div class="outsource-orders-table" style="margin:40px 0">
+        <h6 class="table-title">委外订单国内</h6>
+        <a-table :columns="outsourceOrderColumns" :data-source="outsourceOrderData" bordered :pagination="false">
+          <!-- 材料出库数量 -->
+          <span slot="materialsOutQuantity" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+
+          <!-- 采购入库数量 -->
+          <span slot="purchaseInQuantity" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 委外订单国外 -->
+      <div class="outsourceOrder-abroad-table">
+        <h6 class="table-title">委外订单国外</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="outsourceOrderAbroadColumns"
+          :data-source="outsourceOrderAbroadData"
+          bordered
+          :pagination="false"
+        >
+          <!-- 材料出库数量 -->
+          <span slot="materialsOutQuantityAbroad" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+
+          <!-- 采购入库数量 -->
+          <span slot="purchaseInQuantityAbroad" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 成本发票 -->
+      <div class="cost-invoice-table" style="margin:40px 0">
+        <h6 class="table-title">成本发票</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="costInvoiceColumns"
+          :data-source="costInvoiceData"
+          bordered
+          :pagination="false"
+        >
+        </a-table>
+      </div>
+
+      <!-- 开票成本-面料 -->
+      <div class="costInvoice-fabric-table">
+        <h6 class="table-title">开票成本-面料</h6>
+        <!-- ref="" -->
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="costInvoiceFabricColumns"
+          :data-source="costInvoiceFabricData"
+          bordered
+          :pagination="false"
+          :footer="fabricFooterShow"
+        >
+          <!-- 发票号码明细  -->
+          <span slot="invoiceNum" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 开票成本-成衣 -->
+      <div class="costInvoice-clothes-table" style="margin:40px 0">
+        <h6 class="table-title">开票成本-成衣</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="costInvoiceClothesColumns"
+          :data-source="costInvoiceClothesData"
+          bordered
+          :pagination="false"
+          :footer="clothesFooterShow"
+        >
+          <!-- 发票数量 -->
+          <span slot="clInvoiceQuantity" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 开票成本-辅料 -->
+      <div class="costInvoice-ingredient-table">
+        <h6 class="table-title">开票成本-辅料</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="costInvoiceIngredientColumns"
+          :data-source="costInvoiceIngredientData"
+          bordered
+          :pagination="false"
+        >
+          <!-- 发票数量 -->
+          <span slot="ingredientsInvoiceQuantity" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 费用支出 -->
+      <div class="costPay-table" style="margin:40px 0">
+        <h6 class="table-title">费用支出</h6>
+        <a-table
+          rowKey="id"
+          :loading="loading"
+          :columns="costPayColumns"
+          :data-source="costPayData"
+          bordered
+          :pagination="false"
+        >
+        </a-table>
+      </div>
+
+      <!-- 事故单 -->
+      <div class="accidentBill-table">
+        <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>
+
+      <!-- 备注信息 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>
+
+      <!-- 所有弹框 -->
+      <div>
+        <!-- 采购数量弹框  @ok="modalFormOk"-->
+        <purchaseAmount-modal ref="purchaseAmountModal" :father="aa"></purchaseAmount-modal>
+
+        <!-- 余纱 -->
+        <surplusYarn-modal ref="surplusYarnModal" :father="aa"></surplusYarn-modal>
+
+        <!-- 委外订单国内弹框 -->
+        <materialsOutQuantity-modal ref="materialsOutQuantityModal" :father="aa"></materialsOutQuantity-modal>
+
+        <!-- 采购入库数量弹框 -->
+        <purchaseInQuantity-modal ref="purchaseInQuantityModal" :father="aa"></purchaseInQuantity-modal>
+
+        <!-- 发票号码弹框 -->
+        <invoiceNum-modal ref="invoiceNumModal" :father="aa"></invoiceNum-modal>
+
+        <!-- 发票数量弹框 -->
+        <invoiceQuantity-modal ref="invoiceQuantityModal" :father="aa"></invoiceQuantity-modal>
+
+        <!-- 事故单 -->
+        <accidentList-modal ref="accidentListModal" :father="aa"></accidentList-modal>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import PurchaseAmountModal from '@views/reportForms/fabric-loss-table/purchaseAmountModal.vue'
+import materialsOutQuantityModal from '@views/reportForms/fabric-loss-table/materialsOutQuantityModal.vue'
+import purchaseInQuantityModal from '@views/reportForms/fabric-loss-table/purchaseInQuantityModal.vue'
+import invoiceNumModal from '@views/reportForms/fabric-loss-table/invoiceNumModal.vue'
+import invoiceQuantityModal from '@views/reportForms/fabric-loss-table/invoiceQuantityModal.vue'
+import accidentListModal from '@views/reportForms/fabric-loss-table/accidentListModal.vue'
+import surplusYarnModal from '@views/reportForms/fabric-loss-table/surplusYarnModal.vue'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+export default {
+  name: 'FabricLossTable', // 面料损耗表
+  mixins: [JeecgListMixin],
+  components: {
+    // 面料损耗表 所有弹框
+    PurchaseAmountModal,
+    materialsOutQuantityModal,
+    purchaseInQuantityModal,
+    invoiceNumModal,
+    invoiceQuantityModal,
+    accidentListModal,
+    surplusYarnModal,
+    JEllipsis,
+    moment
+  },
+  data() {
+    return {
+      fabricLoss: [], // 主表信息
+      loading: false, // 表格加载
+
+      // 采购订单 表头
+      purchaseOrderColumns: [
+        { title: '货物名称', width: 120, dataIndex: 'goodsName', className: 'replacecolor' },
+        { title: '批号', width: 120, dataIndex: 'batchNum', className: 'replacecolor' },
+        { title: '计划数量', dataIndex: 'planQuantity', width: 120, className: 'replacecolor' },
+        {
+          title: '采购数量',
+          dataIndex: 'purchaseQuantity',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.purchaseQuantityCustomCell,
+          scopedSlots: { customRender: 'purchaseQuantity' }
+        },
+
+        { title: '采购供应商', dataIndex: 'purchaseSupplier', width: 120, className: 'replacecolor' },
+        { title: '分配数量', dataIndex: 'allotQuantity', width: 120, className: 'replacecolor' },
+        { title: '委外供应商', dataIndex: 'outsourceSupplier', width: 120, className: 'replacecolor' },
+        {
+          title: '余纱',
+          dataIndex: 'surplusYarn',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.surplusYarnCustomCell,
+          scopedSlots: { customRender: 'surplusYarn' }
+        },
+        { title: '采购损耗', dataIndex: 'purchaseLoss', width: 100, className: 'replacecolor' }
+      ],
+      purchaseOrderData: [
+        {
+          goodsName: '75D 低弹丝白',
+          batchNum: '123',
+          planQuantity: '1350.512',
+          purchaseQuantity: '1389.1',
+          purchaseSupplier: '腾依',
+          allotQuantity: '1389.1',
+          outsourceSupplier: '飞亚',
+          surplusYarn: '74859.53',
+          purchaseLoss: '0%'
+        },
+        {
+          goodsName: '货物2',
+          batchNum: '234',
+          planQuantity: '345',
+          purchaseQuantity: '355',
+          purchaseSupplier: '供应商2',
+          allotQuantity: '230',
+          outsourceSupplier: '委外供应商2',
+          surplusYarn: '8495.7',
+          purchaseLoss: '10%'
+        },
+        { goodsName: '来源余纱', purchaseQuantity: '2570.4' },
+        { goodsName: '其他入库的纱', purchaseQuantity: '999' }
+      ],
+
+      // 委外订单国内 表头
+      outsourceOrderColumns: [
+        { title: '制造工艺', width: 120, dataIndex: 'makeWorkmanship', key: '', className: 'replacecolor' },
+        { title: '工厂', width: 120, dataIndex: 'factory', key: '', className: 'replacecolor' },
+        {
+          title: '材料出库数量',
+          dataIndex: 'materialsOutQuantityData',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.materialsOutQuantityCustomCell,
+          scopedSlots: { customRender: 'materialsOutQuantity' }
+        },
+        { title: '采购数量', dataIndex: 'purchaseAmount', width: 120, className: 'replacecolor' },
+        { title: '单位(根)', dataIndex: 'companyRoot', width: 90, className: 'replacecolor' },
+        { title: '单位(米)', dataIndex: 'companyMeter', width: 90, className: 'replacecolor' },
+        {
+          title: '采购入库数量',
+          dataIndex: 'purchaseInQuantity',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.purchaseInQuantityCustomCell,
+          scopedSlots: { customRender: 'purchaseInQuantity' }
+        },
+        { title: '物料编码', dataIndex: 'materialCode', width: 120, className: 'replacecolor' },
+        { title: '货物名称', dataIndex: 'goodsName', width: 100, className: 'replacecolor' },
+        { title: '颜色', dataIndex: 'color', width: 120, className: 'replacecolor' },
+        { title: '计划数量', dataIndex: 'planQuantity', width: 120, className: 'replacecolor' },
+        { title: '损耗', dataIndex: 'loss', key: '', wiclassName: 'replacecolor' },
+        { title: '多发少发', dataIndex: 'moreOrLess', width: 100, className: 'replacecolor' }
+      ],
+      outsourceOrderData: [
+        {
+          makeWorkmanship: '织造工厂1',
+          factory: '飞亚',
+          materialsOutQuantityData: '863',
+          purchaseAmount: '**',
+          companyRoot: '**',
+          companyMeter: '**',
+          purchaseInQuantity: '848.9',
+          materialCode: '**',
+          goodsName: '**',
+          color: 'red',
+          planQuantity: '**',
+          loss: '**',
+          moreOrLess: '**'
+        },
+        {
+          makeWorkmanship: '织造工厂2',
+          factory: '的亚',
+          materialsOutQuantityData: '8263',
+          purchaseAmount: '**',
+          companyRoot: '**',
+          companyMeter: '**',
+          purchaseInQuantity: '448.9',
+          materialCode: '**',
+          goodsName: '**',
+          color: 'red',
+          planQuantity: '**',
+          loss: '**',
+          moreOrLess: '**'
+        }
+      ],
+
+      // 委外订单国外 表头
+      outsourceOrderAbroadColumns: [
+        { title: '制造工艺', width: 120, dataIndex: 'makeWorkmanship', className: 'replacecolor' },
+        { title: '工厂', width: 120, dataIndex: 'factory', className: 'replacecolor' },
+        {
+          title: '材料出库数量',
+          dataIndex: 'materialsOutQuantityAbroadData',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.materialsOutQuantityAbroadCustomCell,
+          scopedSlots: { customRender: 'materialsOutQuantityAbroad' }
+        },
+        { title: '采购数量', dataIndex: 'purchaseAmount', width: 120, className: 'replacecolor' },
+        { title: '单位(根)', dataIndex: 'companyRoot', width: 120, className: 'replacecolor' },
+        { title: '单位(米)', dataIndex: 'companyMeter', width: 120, className: 'replacecolor' },
+        {
+          title: '采购入库数量',
+          dataIndex: 'purchaseInQuantityAbroad',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.purchaseInQuantityAbroadCustomCell,
+          scopedSlots: { customRender: 'purchaseInQuantityAbroad' }
+        },
+        { title: '物料编码', dataIndex: 'materialCode', width: 120, className: 'replacecolor' },
+        { title: '货物名称', dataIndex: 'goodsName', width: 100, className: 'replacecolor' },
+        { title: '颜色', dataIndex: 'color', width: 120, className: 'replacecolor' },
+        { title: '计划数量', dataIndex: 'planQuantity', width: 120, className: 'replacecolor' },
+        { title: '损耗', dataIndex: 'loss', width: 90, className: 'replacecolor' },
+        { title: '多发少发', dataIndex: 'moreOrLess', width: 100, className: 'replacecolor' }
+      ],
+      outsourceOrderAbroadData: [
+        {
+          makeWorkmanship: '织造工厂',
+          factory: '飞亚',
+          materialsOutQuantityAbroadData: '163',
+          purchaseAmount: '**',
+          companyRoot: '**',
+          companyMeter: '**',
+          purchaseInQuantityAbroad: '248.9',
+          materialCode: '**',
+          goodsName: '**',
+          color: 'red',
+          planQuantity: '**',
+          loss: '**',
+          moreOrLess: '**'
+        },
+        {
+          makeWorkmanship: '织造工厂3',
+          factory: '飞亚',
+          materialsOutQuantityAbroadData: '563',
+          purchaseAmount: '**',
+          companyRoot: '**',
+          companyMeter: '**',
+          purchaseInQuantityAbroad: '468.9',
+          materialCode: '**',
+          goodsName: '**',
+          color: 'orange',
+          planQuantity: '**',
+          loss: '**',
+          moreOrLess: '**'
+        }
+      ],
+
+      // 成本发票 表头
+      costInvoiceColumns: [
+        { title: '类型', width: 120, dataIndex: 'costInvoiceType', className: 'replacecolor' },
+        { title: '工厂', width: 120, dataIndex: 'factory', className: 'replacecolor' },
+        { title: '成本金额', dataIndex: 'costAmount', width: 120, className: 'replacecolor' }
+      ],
+      costInvoiceData: [
+        { costInvoiceType: '纱款', factory: '17TW-C-17B', costAmount: '5081.72' },
+        { costInvoiceType: '纱款', factory: '17TW-C-17C', costAmount: '127754.31' },
+        { costInvoiceType: '织款', factory: '18TW-C-8', costAmount: '17045.48' },
+        { costInvoiceType: '染款', factory: '福隆', costAmount: '59762.4' },
+        { costInvoiceType: '织款', factory: '江阴美纶', costAmount: '20482.95' }
+      ],
+
+      // 开票成本-面料 表头
+      costInvoiceFabricColumns: [
+        {
+          title: '发票号码',
+          width: 120,
+          dataIndex: 'invoiceNum',
+          key: '',
+          className: 'replacecolor',
+          customCell: this.invoiceNumCustomCell,
+          scopedSlots: { customRender: 'invoiceNum' }
+        },
+        { title: '供应商', width: 120, dataIndex: 'supplier', key: '', className: 'replacecolor' },
+        { title: '采购发票金额', width: 120, dataIndex: 'PurchaseinvoiceCost', key: '', className: 'replacecolor' },
+        { title: '出运日期', width: 120, dataIndex: 'outData', key: '', className: 'replacecolor' }
+      ],
+      costInvoiceFabricData: [
+        { invoiceNum: '18TW-MYA-44', supplier: '供应商1', PurchaseinvoiceCost: '888.88', outData: '2018-05-04' },
+        { invoiceNum: '18TW-MYA-78', supplier: '供应商1', PurchaseinvoiceCost: '888.88', outData: '2018-05-18' },
+        { invoiceNum: '18TW-MYA-34', supplier: '供应商1', PurchaseinvoiceCost: '888.88', outData: '2018-06-1' }
+      ],
+
+      // 开票成本-成衣 表头
+      costInvoiceClothesColumns: [
+        { title: '发票号码', width: 120, dataIndex: 'clInvoiceNum', key: '', className: 'replacecolor' },
+        { title: '委外供应商', width: 120, dataIndex: 'outsourceSupplier', key: '', className: 'replacecolor' },
+        { title: '成衣加工费', width: 120, dataIndex: 'clProcessCost', key: '', className: 'replacecolor' },
+        { title: '出运日期', width: 120, dataIndex: 'outData', key: '', className: 'replacecolor' },
+        { title: '入库数量', width: 120, dataIndex: 'inQuantity', key: '', className: 'replacecolor' },
+        {
+          title: '发票数量',
+          dataIndex: 'clInvoiceQuantity',
+          key: '',
+          width: 120,
+          className: 'replacecolor',
+          customCell: this.clInvoiceQuantityCustomCell,
+          scopedSlots: { customRender: 'clInvoiceQuantity' }
+        }
+      ],
+      costInvoiceClothesData: [
+        {
+          clInvoiceNum: '18TW-PRU-G30C',
+          outsourceSupplier: '委外1',
+          clProcessCost: '19350',
+          outData: '2018-06-07',
+          inQuantity: '34',
+          clInvoiceQuantity: '8000'
+        },
+        {
+          clInvoiceNum: '18TW-PRU-G31',
+          outsourceSupplier: '委外1',
+          clProcessCost: '99000',
+          outData: '2018-03-17',
+          inQuantity: '34',
+          clInvoiceQuantity: '8000'
+        },
+        {
+          clInvoiceNum: '18TW-PRU-G32G',
+          outsourceSupplier: '委外1',
+          clProcessCost: '34650',
+          outData: '2018-06-07',
+          inQuantity: '34',
+          clInvoiceQuantity: '6000'
+        }
+      ],
+
+      // 开票成本-辅料 表头
+      costInvoiceIngredientColumns: [
+        { title: '账套号', width: 120, dataIndex: 'setNo', className: 'replacecolor' },
+        { title: '订单号', width: 120, dataIndex: 'orderNum', className: 'replacecolor' },
+        { title: '工厂', width: 120, dataIndex: 'factory', className: 'replacecolor' },
+        { title: ' 类型', width: 120, dataIndex: 'type', className: 'replacecolor' },
+        {
+          title: '发票数量',
+          width: 120,
+          dataIndex: 'ingredientsInvoiceQuantity',
+          className: 'replacecolor',
+          customCell: this.ingredientsInvoiceQuantityCustomCell,
+          scopedSlots: { customRender: 'ingredientsInvoiceQuantity' }
+        },
+        { title: '开票金额(人民币)', width: 120, dataIndex: 'invoiceAmountCNY', className: 'replacecolor' },
+        { title: '开票金额(美金)', width: 120, dataIndex: 'invoiceAmountUSD', className: 'replacecolor' },
+        { title: '单位', width: 120, dataIndex: 'unit', className: 'replacecolor' },
+        { title: '订单数', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
+        { title: '采购入库数', width: 120, dataIndex: 'purchaseInQuantity', className: 'replacecolor' }
+      ],
+      costInvoiceIngredientData: [
+        { factory: '森加', type: '主标', ingredientsInvoiceQuantity: '45900', invoiceAmountCNY: '259.42' },
+        { factory: '森加', type: '尺码标', ingredientsInvoiceQuantity: '3670', invoiceAmountCNY: '1475.6' }
+      ],
+
+      // 费用支出 表头
+      costPayColumns: [
+        { title: '账套号', width: 120, dataIndex: '', key: '', className: 'replacecolor' },
+        { title: '支出单号', width: 120, dataIndex: '', key: '', className: 'replacecolor' },
+        { title: '费用项目', dataIndex: '', key: '', width: 120, className: 'replacecolor' },
+        { title: ' 支出本币金额', dataIndex: '', key: '', width: 120, className: 'replacecolor' },
+        { title: '支出原币金额', dataIndex: '', key: '', width: 120, className: 'replacecolor' },
+        { title: '发票号', dataIndex: '', key: '', width: 120, className: 'replacecolor' },
+        { title: '制单人', dataIndex: '', key: '', width: 120, className: 'replacecolor' }
+      ],
+      costPayData: [{}],
+
+      // 事故单
+      accidentListColumns: [
+        {
+          title: '单号',
+          width: 120,
+          dataIndex: 'accidentNum',
+          key: '',
+          className: 'replacecolor',
+          customCell: this.accidentListCustomCell,
+          scopedSlots: { customRender: 'accidentNum' }
+        },
+        { title: '事故承担方', width: 120, dataIndex: '', key: '', className: 'replacecolor' },
+        { title: '金额', dataIndex: '', key: '', width: 120, className: 'replacecolor' }
+      ],
+      accidentListData: [{ accidentNum: '1100011' }, { accidentNum: '3540011' }],
+
+      noteOne: '', // 备注 1
+      noteTwo: '' // 备注 2
+    }
+  },
+
+  methods: {
+    // 【采购数量】单元格 弹框
+    purchaseQuantityCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('点击了单元格')
+
+            if (this.purchaseOrderColumns.goodsName == '来源余纱') {
+              console.log('来源余纱this:', this)
+              console.log('来源余纱event:', event)
+              this.$refs.fromsurplusYarnModal.fromsurplusYarnModVis = true
+            }
+            if (this.purchaseOrderColumns.goodsName == '其他入库的纱') {
+              console.log('其他入库的纱this:', this)
+              console.log('其他入库的纱event:', event)
+              this.$refs.otherYarnsInModal.otherYarnsInModVis = true
+            } else {
+              console.log('this:', this)
+              console.log('event:', event)
+              this.$refs.purchaseAmountModal.purchaseAmountModVis = true
+            }
+          }
+        }
+      }
+    },
+
+    // 余纱
+    surplusYarnCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            // console.log('点击了单元格')
+            console.log('this:', this)
+            console.log('event:', event)
+            this.$refs.surplusYarnModal.surplusYarnModVis = true
+          }
+        }
+      }
+    },
+
+    // 【材料出库数量】 弹框
+    materialsOutQuantityCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.materialsOutQuantityModal.materialsOutQuantityModVis = true
+          }
+        }
+      }
+    },
+
+    // 采购入库数量
+    purchaseInQuantityCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.purchaseInQuantityModal.purchaseInQuantityModVis = true
+          }
+        }
+      }
+    },
+
+    // 委外 【材料出库数量】
+    materialsOutQuantityAbroadCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.materialsOutQuantityModal.materialsOutQuantityModVis = true
+          }
+        }
+      }
+    },
+
+    // 委外 【采购入库数量】
+    purchaseInQuantityAbroadCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.purchaseInQuantityModal.purchaseInQuantityModVis = true
+          }
+        }
+      }
+    },
+
+    // 发票号码
+    invoiceNumCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.invoiceNumModal.invoiceNumModVis = true
+          }
+        }
+      }
+    },
+
+    // 开票成本-面料 ----合计行
+    fabricFooterShow(data) {
+      console.log('开票成本-面料 ----合计行')
+      console.log('data', data)
+      return (
+        <a-table
+          rowKey={Math.random}
+          bordered={false}
+          pagination={false}
+          columns={this.costInvoiceFabricColumns}
+          dataSource={this.fabricFooterDataSource || []}
+          showHeader={false}
+        ></a-table>
+      )
+    },
+
+    // 开票成本-成衣 ----合计行
+    clothesFooterShow(data) {
+      console.log('开票成本-成衣 ----合计行')
+      console.log('data', data)
+      return (
+        <a-table
+          rowKey={Math.random}
+          bordered={false}
+          pagination={false}
+          columns={this.costInvoiceClothesColumns}
+          dataSource={this.clothesFooterDataSource || []}
+          showHeader={false}
+        ></a-table>
+      )
+    },
+
+    // 成衣-发票数量
+    clInvoiceQuantityCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.invoiceQuantityModal.invoiceQuantityModVis = true
+          }
+        }
+      }
+    },
+
+    // 辅料-发票数量
+    ingredientsInvoiceQuantityCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('this:', this)
+            this.$refs.invoiceQuantityModal.invoiceQuantityModVis = 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')
+    },
+    aa() {} // father
+  },
+
+  // 出现滚动条，合计栏跟随 table 滚动
+  // watch: {
+  //   dataSource(val) {
+  //     console.log(val)
+  //     // 同步表与footer滚动
+  //     let dom = this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[0]
+  //     dom.addEventListener(
+  //       'scroll',
+  //       () => {
+  //         this.$refs.TableInfo.$el.querySelectorAll('.ant-table-body')[1].scrollLeft = dom.scrollLeft
+  //         console.log('走到这')
+  //       },
+  //       true
+  //     )
+  //   }
+  // },
+  // 构建合计数据 --合计
+  computed: {
+    fabricFooterDataSource() {
+      // 开票成本-面料 合计
+      const total = Object.assign({}, this.costInvoiceFabricData[0])
+      for (const attr in total) {
+        total[attr] = '合计'
+        break
+      }
+      return [total]
+    },
+    clothesFooterDataSource() {
+      // 开票成本-面料 合计
+      const total = Object.assign({}, this.costInvoiceClothesData[0])
+      for (const attr in total) {
+        total[attr] = '合计'
+        break
+      }
+      return [total]
+    }
+  }
+}
+</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;
+// }
+.note-one,
+.note-two {
+  height: 100%;
+  .noteDetail {
+    background-color: #f2f2f2;
+    padding: 10px;
+  }
+  /deep/ .ant-btn-primary {
+    margin-top: 20px;
+  }
+}
+
+/deep/ .ant-table-footer .ant-table.body {
+  // overflow: hidden !important;
+}
+/deep/ .ant-table.ant-table-bordered .ant-table-footer {
+  border: none;
+  padding: 0;
+}
+</style>

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

@@ -0,0 +1,162 @@
+<template>
+  <a-modal
+    title="事故单"
+    v-model="accidentListModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;minHeight:700px"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 回显信息  -->
+      <div class="table-page-search-wrapper" style="marginTop:20px;">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="单号">
+                <!--  -->
+                <a-input v-model="accidentList.oddNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="责任人">
+                <a-input v-model="accidentList.personLiable"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="日期">
+                <a-input v-model="accidentList.date"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="工厂">
+                <a-input v-model="accidentList.factory"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="客户">
+                <a-input v-model="accidentList.customer"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="款号">
+                <a-input v-model="accidentList.styleNum"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划单号">
+                <a-input v-model="accidentList.planNum"> </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划员">
+                <a-input v-model="accidentList.planner"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="业务员">
+                <a-input v-model="accidentList.salesman"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="承担方订单号">
+                <a-input v-model="accidentList.undertakingOrderNo"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="物料">
+                <a-input v-model="accidentList.materiel"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="QC">
+                <a-input v-model="accidentList.qc"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="24" :sm="24">
+              <a-form-item label="备注" class="noteBg">
+                <a-input type="textarea" v-model="accidentList.note" style="minHeight:100px;"></a-input>
+
+                <!-- 导出 打印 返回  -->
+                <a-row style="marginTop:20px;">
+                  <a-col :md="24" :sm="12">
+                    <span style="float: right;" class="table-operator">
+                      <a-button type="primary" icon="download" @click="handleExportXls('采购数量')">导出</a-button>
+                      <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+                      <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+                    </span>
+                  </a-col>
+                </a-row>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'AccidentListModal', // 事故单 弹框
+  components: {},
+  data() {
+    return {
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      accidentListModVis: false,
+      accidentList: []
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.accidentListModVis = false
+      this.close()
+    },
+    close() {
+      this.$emit('close')
+      this.accidentListModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/fromSourceYarn.vue

@@ -0,0 +1,160 @@
+<template>
+  <a-modal
+    title="来源余纱"
+    v-model="fromsurplusYarnModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="纱批" v-model="queryParam.yarnNum">
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="采购单价" v-model="queryParam.purchasePrice">
+                <a-input></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
+          :loading="loading"
+          :columns="fromsurplusYarnColumns"
+          :data-source="fromsurplusYarnData"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('来源余纱')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'FromsurplusYarnModal', // 来源余纱 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      fromsurplusYarnColumns: [
+        {
+          title: '使用数量',
+          dataIndex: 'usageQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '纱批',
+          dataIndex: 'yarnNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '采购单价',
+          dataIndex: 'purchasePrice',
+          width: 120,
+          className: 'replacecolor'
+        }
+      ],
+      fromsurplusYarnData: [{}, {}],
+
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      fromsurplusYarnModVis: false,
+      // 查询条件
+      queryParam: {
+        yarnNum: '', // 纱批
+        purchasePrice: '' // 采购单价
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.surplusYarnModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.fromsurplusYarnModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/invoiceNumModal.vue

@@ -0,0 +1,171 @@
+<template>
+  <a-modal
+    title="发票号码明细"
+    v-model="invoiceNumModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="物料" v-model="queryParam.material">
+                <!--  -->
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="开票单价" v-model="queryParam.invoicingPrice">
+                <a-input></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
+          :loading="loading"
+          :columns="invoiceNumColumns"
+          :data-source="invoiceNumData"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('采购数量')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'InvoiceNumModal', // 发票号明细 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      invoiceNumColumns: [
+        {
+          title: '物料',
+          dataIndex: 'material',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '开票单价',
+          dataIndex: 'invoicingPrice',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '合计金额',
+          dataIndex: 'totalMoney',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      invoiceNumData: [{}, {}, {}],
+
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      invoiceNumModVis: false,
+      // 查询条件
+      queryParam: {
+        material: '', // 物料
+        invoicingPrice: '' // 开票单价
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.invoiceNumModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam.title = ''
+      this.queryParam.isRelease = ''
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.invoiceNumModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/invoiceQuantityModal.vue

@@ -0,0 +1,126 @@
+<template>
+  <a-modal
+    title="发票数量"
+    v-model="invoiceQuantityModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- table -->
+      <div style="marginTop:30px;">
+        <a-table
+          :loading="loading"
+          :columns="invoiceQuantityColumns"
+          :data-source="invoiceQuantityData"
+          :pagination="false"
+          bordered
+        >
+        </a-table>
+
+        <!-- 导出 打印 返回  -->
+        <a-row>
+          <a-col :md="24" :sm="12" style="marginTop:20px;">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('采购数量')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'InvoiceQuantityModal', // 发票数量 弹框
+  components: {},
+  data() {
+    return {
+      // 表头
+      invoiceQuantityColumns: [
+        {
+          title: '开票数',
+          dataIndex: 'invoicedQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '未开票数',
+          dataIndex: 'notInvoicedQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '结算数量',
+          dataIndex: 'isquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '未结算数量',
+          dataIndex: 'notIsquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      invoiceQuantityData: [{}, {}, {}],
+      size: 'small', // 查询按钮变小
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      invoiceQuantityModVis: false
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.invoiceQuantityModVis = false
+      this.close()
+    },
+
+    close() {
+      this.$emit('close')
+      this.invoiceQuantityModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/materialsOutQuantityModal.vue

@@ -0,0 +1,226 @@
+<template>
+  <a-modal
+    title="材料出库数量"
+    v-model="materialsOutQuantityModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="批号">
+                <a-input v-model="queryParam.batchNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="供应商" v-model="queryParam.supplier">
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="物料编码" v-model="queryParam.materialCode">
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+            <template v-if="toggleSearchStatus">
+              <a-col :md="6" :sm="8">
+                <a-form-item label="物料名称" v-model="queryParam.materialName">
+                  <a-input></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>
+
+      <!-- table -->
+      <div>
+        <a-table
+          :loading="loading"
+          bordered
+          :columns="materialsOutQuantityColumns"
+          :data-source="materialsOutQuantityData"
+          :pagination="false"
+        >
+        </a-table>
+
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('材料出库数量')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'MaterialsOutQuantityModal', // 材料出库数量 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      materialsOutQuantityColumns: [
+        {
+          title: '批号',
+          dataIndex: 'batchNum',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '入库单号',
+          dataIndex: 'inOrderNum',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '名称',
+          dataIndex: 'name',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '供应商',
+          dataIndex: 'supplier',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '金额',
+          dataIndex: 'money',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '成本',
+          dataIndex: 'cost',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '物料编码',
+          dataIndex: 'materialCode',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '物料名称',
+          dataIndex: 'materialName',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      materialsOutQuantityData: [{}, {}, {}],
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      materialsOutQuantityModVis: false,
+
+      // 查询条件
+      queryParam: {
+        batchNum: '', // 批号
+        supplier: '', // 供应商
+        materialCode: '', // 物料编码
+        materialName: '' // 物料名称
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.materialsOutQuantityModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.materialsOutQuantityModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/otherYarnsIn.vue

@@ -0,0 +1,165 @@
+<template>
+  <a-modal
+    title="其他入库的纱"
+    v-model="otherYarnsInModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="委外订单号" v-model="queryParam.purchaseAboardOrderNum">
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划号" v-model="queryParam.planNum">
+                <a-input></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
+          :loading="loading"
+          :columns="otherYarnsInColumns"
+          :data-source="otherYarnsInData"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('其他入库的纱')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'OtherYarnsInModal', // 其他入库的纱 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      otherYarnsInColumns: [
+        {
+          title: '使用数量',
+          dataIndex: 'usageQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '计划号',
+          dataIndex: 'planNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '采购单价',
+          dataIndex: 'purchasePrice',
+          width: 120,
+          className: 'replacecolor'
+        }
+      ],
+      otherYarnsInData: [{}, {}],
+
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      otherYarnsInModVis: false,
+      // 查询条件
+      queryParam: {
+        purchaseAboardOrderNum: '', // 委外订单号
+        planNum: '' // 计划号
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.surplusYarnModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.otherYarnsInModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/purchaseAmountModal.vue

@@ -0,0 +1,198 @@
+<template>
+  <a-modal
+    title="采购数量"
+    v-model="purchaseAmountModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="纱批">
+                <a-input v-model="queryParam.yarnNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="采购单价">
+                <a-input v-model="queryParam.purchasePrice"></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
+          :loading="loading"
+          bordered
+          :columns="purchaseAmountColumns"
+          :data-source="purchaseAmountData"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('采购数量')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">取消</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'PurchaseAmountModal', // 采购数量 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      purchaseAmountColumns: [
+        {
+          title: '单据号',
+          dataIndex: 'orderNum',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '单据类型',
+          dataIndex: 'documentType',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '入库单数量',
+          dataIndex: 'inReceiptQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '含税单价',
+          dataIndex: 'priceInTax',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '开票数',
+          dataIndex: 'invoicedQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '未开票数',
+          dataIndex: 'notInvoicedQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '结算数量',
+          dataIndex: 'isquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '未结算数量',
+          dataIndex: 'notIsquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      purchaseAmountData: [{}, {}, {}],
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      purchaseAmountModVis: false,
+
+      // 查询条件
+      queryParam: {
+        yarnNum: '', // 纱批
+        purchasePrice: '' // 采购单价
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.purchaseAmountModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam.title = ''
+      this.queryParam.isRelease = ''
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.purchaseAmountModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/purchaseInQuantityModal.vue

@@ -0,0 +1,212 @@
+<template>
+  <a-modal
+    title="采购入库数量"
+    v-model="purchaseInQuantityModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="下游委外订单号" v-model="queryParam.downAboardorderNum">
+                <!-- -->
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="委外订单号" v-model="queryParam.aboardorderNum">
+                <a-input></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
+          :loading="loading"
+          bordered
+          :columns="purchaseInQuantityColumns"
+          :data-source="purchaseInQuantityData"
+          :pagination="false"
+        >
+        </a-table>
+
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('采购入库数量')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'PurchaseInQuantityModal', // 采购入库数量 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      purchaseInQuantityColumns: [
+        {
+          title: '下游委外订单号',
+          dataIndex: 'DownAboardOrderNo',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '下游供应商',
+          dataIndex: 'downSupplier',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '委外订单号',
+          dataIndex: 'purchaseAboardOrderNum',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '采购入库数量',
+          dataIndex: 'purchaseInQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '使用数量',
+          dataIndex: 'usageQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '单个物料成本',
+          dataIndex: 'costPerMaterial',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '开票数',
+          dataIndex: 'invoicedQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '未开票数',
+          dataIndex: 'notInvoicedQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '结算数量',
+          dataIndex: 'isquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '未结算数量',
+          dataIndex: 'notIsquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      purchaseInQuantityData: [{}, {}, {}],
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      purchaseInQuantityModVis: false,
+      // 查询条件
+      queryParam: {
+        downAboardorderNum: '', // 下游委外订单号
+        aboardorderNum: '' // 委外订单号
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.materialsOutQuantityModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.purchaseInQuantityModVis = false
+    }
+  }
+}
+</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/fabric-loss-table/surplusYarnModal.vue

@@ -0,0 +1,169 @@
+<template>
+  <a-modal
+    title="余纱"
+    v-model="surplusYarnModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    style="top:330px;left:100px;"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="委外订单号" v-model="queryParam.aboardorderNum">
+                <a-input></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划号" v-model="queryParam.planNum">
+                <a-input></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
+          :loading="loading"
+          :columns="surplusYarnColumns"
+          :data-source="surplusYarnData"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" icon="download" @click="handleExportXls('采购数量')">导出</a-button>
+              <a-button type="primary" @click="print" icon="printer" style="margin:0 10px;">打印</a-button>
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">返回</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'SurplusYarnModal', // 余纱 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis },
+  data() {
+    return {
+      // 表头
+      surplusYarnColumns: [
+        {
+          title: '使用数量',
+          dataIndex: 'usageQuantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '委外订单号',
+          dataIndex: 'aboardorderNum',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '计划号',
+          dataIndex: 'planNum',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '采购单价',
+          dataIndex: 'purchasePrice',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      surplusYarnData: [{}, {}, {}],
+
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      surplusYarnModVis: false,
+      // 查询条件
+      queryParam: {
+        aboardorderNum: '', // aboardorderNum
+        planNum: '' // 计划号
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.surplusYarnModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.surplusYarnModVis = false
+    }
+  }
+}
+</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/pro-progress-report.vue

@@ -0,0 +1,292 @@
+<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.salesOrderNo"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <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.materialName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="成衣加工厂">
+                <a-select placeholder="请选择成衣加工厂" v-model="queryParam.garmentFactory">
+                  <a-select-option :value="''">请选择</a-select-option>
+                  <a-select-option :value="0">成衣加工厂1</a-select-option>
+                  <a-select-option :value="1">成衣加工厂2</a-select-option>
+                  <a-select-option :value="2">成衣加工厂3</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="业务员">
+                <a-input placeholder="请输入业务员" v-model="queryParam.salesman"></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="日期" has-feedback>
+                <a-date-picker style="width: 100%" v-model="queryParam.date"></a-date-picker>
+              </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="交期" has-feedback>
+                <a-date-picker style="width: 100%" v-model="queryParam.deliveryDate"></a-date-picker>
+              </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>
+
+    <!-- 操作按钮区域 -->
+    <!-- <div class="table-operator">
+      <a-button type="primary" @click="synchronization" icon="reload">同步</a-button>
+    </div> -->
+
+    <!-- table区域  -->
+    <div>
+      <a-table
+        bordered
+        rowKey="id"
+        :columns="proProgressColumns"
+        :data-source="proProgressData"
+        :loading="loading"
+        :pagination="ipagination"
+        :scroll="{ x: 1500 }"
+        @change="handleTableChange"
+      >
+        <!--字符串超长截取省略号显示 订单备注 -->
+        <span slot="**" slot-scope="text">
+          <j-ellipsis :value="text" :length="25" />
+        </span>
+
+        <!-- 销售订单号  链接-->
+        <span slot="salesOrderNo" slot-scope="text">
+          <a>{{ text }}</a>
+        </span>
+      </a-table>
+    </div>
+
+    <!-- 订单数据明细 抽屉 -->
+    <singleOrderReport-drawer ref="singleOrderReportDrawer" :father="aa" @ok="modalFormOk"></singleOrderReport-drawer>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import singleOrderReportDrawer from '@views/reportForms/pro-progress-report/singleOrderReportDrawer.vue'
+
+export default {
+  name: 'OrderList',
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment, singleOrderReportDrawer },
+
+  data() {
+    return {
+      description: '生产进度报表',
+      // 表头
+      proProgressColumns: [
+        {
+          title: '部门',
+          width: 120,
+          dataIndex: 'department',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售订单号',
+          width: 210,
+          fixed: 'left',
+          dataIndex: 'salesOrderNo',
+          className: 'replacecolor',
+          customCell: this.showDrawer,
+          scopedSlots: { customRender: 'salesOrderNo' }
+        },
+        { title: '业务员', width: 120, dataIndex: 'salesman', className: 'replacecolor' },
+        { title: '计划单号', width: 120, dataIndex: 'planOrderNo', className: 'replacecolor' },
+        {
+          title: '成衣加工厂',
+          width: 120,
+          dataIndex: 'garmentFactory',
+          className: 'replacecolor'
+        },
+        { title: '物料编号（多个分行显示）', width: 210, dataIndex: 'materialNum', className: 'replacecolor' },
+        { title: '物料名称', width: 210, dataIndex: 'materialName', className: 'replacecolor' },
+        { title: '款号', width: 90, dataIndex: 'styleNum', className: 'replacecolor' },
+        { title: '颜色', width: 210, dataIndex: 'color', className: 'replacecolor' },
+        // {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        { title: '交期', width: 120, dataIndex: 'deliveryDate', className: 'replacecolor' },
+        { title: '订单数量', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
+        { title: '单价(原币)', width: 120, dataIndex: 'priceOriginal', className: 'replacecolor' },
+        { title: '总额(原币)', width: 120, dataIndex: 'totalAmountOriginal', className: 'replacecolor' },
+        { title: '单价(本币)', width: 120, dataIndex: 'priceLocal', className: 'replacecolor' },
+        { title: '总额(本币)', width: 120, dataIndex: 'totalAmountLocal', className: 'replacecolor' },
+        { title: '实际发票成本', width: 120, dataIndex: 'actualInvoiceCost', className: 'replacecolor' },
+        { title: '已出库数量', width: 120, dataIndex: 'quantityDelivered', className: 'replacecolor' },
+        { title: '累计开票数量', width: 120, dataIndex: 'invoicesCumulativeNum', className: 'replacecolor' },
+        { title: '图片', width: 120, dataIndex: 'image', fixed: 'right', className: 'replacecolor' },
+        { title: '附件', width: 120, dataIndex: 'accessory', fixed: 'right', className: 'replacecolor' }
+      ],
+      proProgressData: [
+        {
+          department: '业务二部',
+          salesman: '陈',
+          salesOrderNo: 'SS22-71499-PH1-GY SEN',
+          materialNum: '1901000890',
+          materialName: '春夏女装印花袋鼠袋拉毛绒布带帽衫',
+          styleNum: '71499',
+          color: '浅绿green14-0114tcx',
+          deliveryDate: '2021-10-07',
+          orderQuantity: '69270',
+          priceOriginal: '2.53',
+          totalAmountOriginal: '175253.1',
+          priceLocal: '18',
+          totalAmountLocal: '1246860',
+          quantityDelivered: '69270'
+        },
+        {
+          department: '业务一部',
+          salesman: '张',
+          salesOrderNo: 'SS22-51349-PH1-GY SEN',
+          materialNum: '1902300890',
+          materialName: '裙子',
+          styleNum: '71249',
+          color: 'orange',
+          deliveryDate: '2022-04-07',
+          orderQuantity: '624570',
+          priceOriginal: '2.53',
+          totalAmountOriginal: '335253.1',
+          priceLocal: '18',
+          totalAmountLocal: '1346860',
+          quantityDelivered: '624570'
+        },
+        {},
+        {}
+      ],
+      loading: false, // 表格加载
+
+      // 查询条件
+      queryParam: {
+        salesOrderNo: '', // 销售订单号
+        department: '', // 部门
+        materialName: '',
+        garmentFactory: '', // 成衣加工厂
+        salesman: '',
+        planOrderNo: '', // 计划单号
+        date: '',
+        color: '',
+        deliveryDate: '' // 交期
+      }
+    }
+  },
+  created() {
+    // 渲染订单销售列表
+  },
+  methods: {
+    // 同步
+    // synchronization() {},
+
+    // 查询按钮
+    searchQuery() {
+      // 渲染订单销售列表
+    },
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
+      // 重新渲染生产进度表报
+    },
+
+    // 【销售订单号】 抽屉
+    showDrawer(record) {
+      return {
+        on: {
+          click: event => {
+            console.log('点击了生产进度报表--销售订单号')
+            this.$refs.singleOrderReportDrawer.visible = true
+          }
+        }
+      }
+    },
+    // 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/pro-progress-report/singleOrderReportDrawer.vue

@@ -0,0 +1,415 @@
+<template>
+  <!-- 单个订单报表 -->
+  <a-drawer
+    title="单个订单报表"
+    width="100%"
+    placement="right"
+    :closable="true"
+    :visible="visible"
+    @close="onClose">
+    <!--主表信息  -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="部门">
+              <a-input v-model="singleOrder.department"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="业务员">
+              <a-input v-model="singleOrder.salesman"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户">
+              <a-input v-model="singleOrder.customer"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="物料编号">
+              <a-input v-model="singleOrder.materialNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="物料名称">
+              <a-input v-model="singleOrder.materialName"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="款号">
+              <a-input v-model="singleOrder.styleNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="颜色">
+              <a-input v-model="singleOrder.color"></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="queryParam.deliveryDate"></a-date-picker> -->
+              <a-input v-model="singleOrder.deliveryDate"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单数量">
+              <a-input v-model="singleOrder.orderQuantity"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="单价(原币)">
+              <a-input v-model="singleOrder.priceOriginal"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="总额(原币)">
+              <a-input v-model="singleOrder.totalAmountOriginal"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="单价(本币)">
+              <a-input v-model="singleOrder.priceLocal"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="总额(本币)">
+              <a-input v-model="singleOrder.totalAmountLocal"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="单件成本(本币)">
+              <a-input v-model="singleOrder.UnitCostLocal"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="已出库数量">
+              <a-input v-model="singleOrder.quantityDelivered"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="累计开票数量">
+              <a-input v-model="singleOrder.invoicesCumulativeNum"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="计划单号">
+              <a-input v-model="singleOrder.planOrderNo"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="业务填写">
+              <a-input v-model="singleOrder.businessFill"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- table区域  -->
+    <!-- <a-card style="margin:10px 0;"> -->
+
+    <!-- 采购 -->
+    <div>
+      <h6 class="table-title">采购</h6>
+      <a-table
+        bordered
+        rowKey="id"
+        :loading="loading"
+        :columns="purchaseColumns"
+        :data-source="purchaseData"
+        :pagination="false"
+        :scroll="{ x: 1500 }"
+      >
+        <!--字符串超长截取省略号显示 备注 -->
+        <!-- <span slot="note" slot-scope="text">
+            <j-ellipsis :value="text" :length="25" />
+          </span> -->
+
+        <!-- 物料编号 -->
+        <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" style="marginBottom:10px;">物料卡</h6>
+
+      <!-- 查询区域 -->
+      <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%" 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="计划单号">
+                <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-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-drawer>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+export default {
+  name: 'SingleOrderReportDrawer',
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment },
+  data() {
+    return {
+      description: '单个订单报表抽屉 页面',
+      loading: false, // 表格加载
+      visible: false, // 抽屉
+
+      singleOrder: [], // 主表信息
+
+      // 物料卡 查询条件
+      queryParam: {
+        data: '', // 日期
+        material: '', // 物料
+        planOrderNo: '' // 计划单号
+      },
+
+      // 采购 表头
+      purchaseColumns: [
+        { title: '账套信息', width: 120, dataIndex: 'accountSetInfo', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '采购订单号',
+          width: 160,
+          dataIndex: 'purchaseOrderNum',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' },
+        {
+          title: '物料编号',
+          width: 120,
+          dataIndex: 'materialNum',
+          className: 'replacecolor',
+          fixed: 'left',
+          customCell: this.materialNumCustomCell,
+          scopedSlots: { customRender: 'materialNum' }
+        },
+        { title: '单价(本币)', width: 100, dataIndex: 'priceLocal', className: 'replacecolor' },
+        { title: '物料名称', width: 210, dataIndex: 'materialName', className: 'replacecolor' },
+        { title: '计划数量(LRP)', width: 160, dataIndex: 'planQuantity', className: 'replacecolor' },
+        { title: '订单数量', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
+        { title: '累计入库数量', width: 140, dataIndex: 'accumulativeInQuantity', className: 'replacecolor' },
+        { title: '累计开票数量', width: 140, dataIndex: 'invoicesCumulativeNum', className: 'replacecolor' },
+        { title: '累计开票金额', width: 140, dataIndex: 'cumulativeInvoiceAmount', className: 'replacecolor' },
+        { title: '下游订单', width: 160, dataIndex: 'downstreamOrder', className: 'replacecolor' },
+        { title: '使用数量', width: 140, dataIndex: 'usageQuantity', className: 'replacecolor' },
+        { title: '余料', width: 100, dataIndex: 'oddments', className: 'replacecolor' }
+      ],
+      purchaseData: [
+        {
+          accountSetInfo: '宁波森语',
+          purchaseOrderNum: 'SYA525-林辉',
+          supplier: '林辉',
+          materialNum: '0501000315',
+          priceLocal: '0.353',
+          materialName: '4.5CM黑色橡胶丝进口橡筋',
+          planQuantity: '21879.84',
+          orderQuantity: '21879.84',
+          accumulativeInQuantity: '21879'
+        },
+        {},
+        {}
+      ],
+
+      // 委外 表头
+      outsourceColumns: [
+        {
+          title: '委外订单号',
+          width: 120,
+          dataIndex: 'purchaseAboardOrderNum',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        { title: '供应商', width: 120, dataIndex: 'supplier', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '物料编号',
+          width: 120,
+          dataIndex: 'materialNum',
+          fixed: 'left',
+          className: 'replacecolor',
+          customCell: this.materialNumCustomCell,
+          scopedSlots: { customRender: 'materialNum' }
+        },
+        { title: '物料名称', width: 210, dataIndex: 'materialName', className: 'replacecolor' },
+        { title: '颜色', width: 120, dataIndex: 'color', className: 'replacecolor' },
+        { title: '门幅', width: 120, dataIndex: 'larghezza', className: 'replacecolor' },
+        { title: '单价(本币/原币)', width: 140, dataIndex: 'price', className: 'replacecolor' },
+        { title: '计划数量(LRP)', width: 160, dataIndex: 'planQuantity', className: 'replacecolor' },
+        { title: '订单数量', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
+        { title: '累计入库数量', width: 140, dataIndex: 'accumulativeInQuantity', className: 'replacecolor' },
+        { title: '累计开票数量', width: 140, dataIndex: 'invoicesCumulativeNum', className: 'replacecolor' },
+        { title: '累计开票金额', width: 140, dataIndex: 'cumulativeInvoiceAmount', className: 'replacecolor' },
+        { title: '下游订单', width: 160, dataIndex: 'downstreamOrder', className: 'replacecolor' },
+        { title: '使用数量', width: 140, dataIndex: 'usageQuantity', className: 'replacecolor' },
+        { title: '余下库存', width: 100, dataIndex: 'remainingInventory', className: 'replacecolor' },
+        { title: '子件编号', width: 100, dataIndex: 'childNum', className: 'replacecolor' },
+        { title: '子件名称', width: 100, dataIndex: 'childName', className: 'replacecolor' },
+        { title: '子件应领数量', width: 140, dataIndex: 'receivedcdQuantity', className: 'replacecolor' },
+        { title: '子件已领数量', width: 140, dataIndex: 'cdHadQuantity', className: 'replacecolor' },
+        { title: '子件总成本', width: 140, dataIndex: 'cdTotalCost', className: 'replacecolor' },
+        { title: '采购订单号', width: 160, dataIndex: 'purchaseOrderNum', fixed: 'right', className: 'replacecolor' }
+      ],
+      outsourceData: [{ materialNum: 'N0201000666' }, {}],
+
+      // 物料卡 表头
+      materialCardColumns: [
+        {
+          title: '计划单号',
+          width: 140,
+          dataIndex: 'planOrderNo',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        { title: '颜色', width: 120, dataIndex: 'color', className: 'replacecolor' },
+        {
+          title: '供应商',
+          width: 120,
+          dataIndex: 'supplier',
+          className: 'replacecolor'
+        },
+        { title: '物料', width: 120, dataIndex: 'material', className: 'replacecolor' },
+        { title: '订单数', width: 120, dataIndex: 'orderQuantity', className: 'replacecolor' },
+        { title: '用量', width: 120, dataIndex: 'dosage', className: 'replacecolor' },
+        { title: '总数量', width: 140, dataIndex: 'totalQuantity', className: 'replacecolor' },
+        { title: '合计', width: 160, dataIndex: 'total', className: 'replacecolor' },
+        { title: '差异', width: 120, dataIndex: 'diff', className: 'replacecolor' },
+        { title: 'what', width: 140, dataIndex: 'what', className: 'replacecolor' },
+        { title: 'what1', width: 140, dataIndex: 'what1', className: 'replacecolor' },
+        { title: 'what2', width: 140, dataIndex: 'what2', className: 'replacecolor' },
+        { title: 'what3', width: 140, dataIndex: 'what3', className: 'replacecolor' },
+        { title: 'what4', width: 140, dataIndex: 'what4', className: 'replacecolor' },
+        { title: 'what5', width: 140, dataIndex: 'what5', className: 'replacecolor' },
+        { title: '备注', width: 210, dataIndex: 'note', fixed: 'right', className: 'replacecolor' }
+      ],
+      materialCardData: [{}, {}]
+    }
+  },
+  created() {},
+  methods: {
+    // 采购 【物料编号】 弹框
+    materialNumCustomCell(record) {
+      return {
+        on: {
+          click: event => {
+            // console.log('点击了单元格')
+            // console.log('this:', this)
+            // console.log('event:', event)
+            // this.$refs.purchaseAmountModal.purchaseAmountModVis = true
+          }
+        }
+      }
+    },
+    // 查询按钮
+    searchQuery() {
+      // 渲染订单销售列表
+    },
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
+    },
+
+    onClose() {
+      // 关闭抽屉
+      this.visible = false
+    }
+  },
+  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/shipment-details/addShipmentDetails.vue

@@ -0,0 +1,556 @@
+<template>
+  <!-- 新增发运明细 -->
+  <a-card :bordered="false">
+    <!-- 主表填写信息 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery" :model="addShipmentDetails">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="单据号">
+              <a-input placeholder="请输入单据号" v-model="addShipmentDetails.orderNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="单据日期">
+              <a-date-picker
+                @change="billsDateChange"
+                placeholder="请选择单据日期"
+                style="width:100%;"
+                v-model="addShipmentDetails.billDate"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户">
+              <a-input placeholder="请输入客户" v-model="addShipmentDetails.customer"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="预发货日期">
+              <a-date-picker
+                @change="advanceShipmentChange"
+                placeholder="请选择预发货时间"
+                style="width:100%;"
+                v-model="addShipmentDetails.scheduledShipDate"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="预完工日期" style="width:100%;">
+              <a-date-picker
+                @change="advanceCompletedChange"
+                placeholder="请选择预完工时间"
+                style="width:100%;"
+                v-model="addShipmentDetails.scheduledDoneDate"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="18" :sm="18">
+            <a-form-item label="备注">
+              <a-input placeholder="请输入备注" v-model="addShipmentDetails.note"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 参照订单数据 増行-->
+    <div class="table-operator">
+      <a-button type="primary" @click="referOrderDataOpen" icon="ordered-list">参照订单数据</a-button>
+      <a-button type="primary" @click="handleAddColumn" icon="plus" style="margin-left: 20px">増行</a-button>
+    </div>
+
+    <!-- table  y: 300 -->
+    <div>
+      <a-table
+        bordered
+        rowKey="id"
+        size="middle"
+        :columns="shipmentListDetailsColumns"
+        :data-source="shipmentListDetailsData"
+        :loading="loading"
+        :pagination="ipagination"
+        :scroll="{ x: 1500 }"
+        @change="handleTableChange"
+      >
+        <!-- :rules="rules"  -->
+        <!-- 款号 -->
+        <a-form-model
+          slot="styleNum"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="styleNum">
+            <a-input style="width:100%" v-model="record.styleNum" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 发货数量 -->
+        <a-form-model
+          slot="shipQuantity"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="shipQuantity">
+            <a-input style="width:100%" v-model="record.shipQuantity" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 是否TC功能 -->
+        <a-form-model
+          slot="isTC"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="isTC">
+            <a-select v-model="record.isTC">
+              <a-select-option :value="1">是</a-select-option>
+              <a-select-option :value="2">否</a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 物料成分 -->
+        <a-form-model
+          slot="materialComposition"
+          slot-scope="text, record"
+          :ref="record.index"
+          :model="record"
+          style="width:100%;height:40px"
+        >
+          <a-form-model-item prop="materialComposition">
+            <a-input style="width:100%" v-model="record.materialComposition" />
+          </a-form-model-item>
+        </a-form-model>
+
+        <!-- 操作 -->
+        <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="push(record)">推送</a>
+        </span>
+      </a-table>
+    </div>
+
+    <!-- 保存 取消 -->
+    <a-row>
+      <a-col :md="24" :sm="12">
+        <span style="float: right;overflow: hidden;">
+          <a-button type="primary" style="left: 10px" @click="save">保存</a-button>
+          <a-button type="primary" @click="cancel" style="margin-left: 20px">取消</a-button>
+        </span>
+      </a-col>
+    </a-row>
+
+    <!-- 参照订单数据弹框 -->
+    <referOrderData-modal ref="referOrderDataModal" :father="aa" @ok="modalFormOk"></referOrderData-modal>
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin' // 分页等
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+import ReferOrderDataModal from '@views/shipment-details/referOrderDataModal.vue'
+
+export default {
+  name: 'AddShipmentDetails', // 新增发运明细列表
+  mixins: [JeecgListMixin], // 分页等
+  components: { JEllipsis, ReferOrderDataModal, moment }, // 参照订单数据 弹框
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+    return {
+      description: '新增发运明细',
+      id: '',
+      // 表头
+      shipmentListDetailsColumns: [
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '订单号',
+          dataIndex: 'orderNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          scopedSlots: { customRender: 'styleNum' },
+          fixed: 'left',
+          width: 180,
+          className: 'replacecolor'
+        },
+        // {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '订单日期',
+          dataIndex: 'orderDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '客户订单',
+          dataIndex: 'customerOrder',
+          width: 120,
+
+          className: 'replacecolor'
+        },
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'Pack Id',
+          dataIndex: 'packId',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单数据',
+          dataIndex: 'orderData',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单剩余数量',
+          dataIndex: 'orderRemaQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '发货数量',
+          dataIndex: 'shipQuantity',
+          scopedSlots: { customRender: 'shipQuantity' },
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '是否TC功能',
+          dataIndex: 'isTC',
+          width: 90,
+          scopedSlots: { customRender: 'isTC' },
+          className: 'replacecolor'
+        },
+        {
+          title: '物料成分',
+          dataIndex: 'materialComposition',
+          scopedSlots: { customRender: 'materialComposition' },
+          width: 140,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售类型',
+          dataIndex: 'saleType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户名称',
+          dataIndex: 'customerName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '汇率',
+          dataIndex: 'exchangeRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '整单合计',
+          dataIndex: 'wholeSingleCombined',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售部门',
+          dataIndex: 'salesDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '币种',
+          dataIndex: 'currency',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '品牌方',
+          dataIndex: 'brand',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '第三方',
+          dataIndex: 'thirdParty',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金比例(%)',
+          dataIndex: 'depositRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金',
+          dataIndex: 'deposit',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '协同路线',
+          dataIndex: 'collaborativeRoute',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '付款条件',
+          dataIndex: 'paymentClause',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '最终客户',
+          dataIndex: 'finalCustomer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单备注',
+          dataIndex: 'orderNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '价格备注',
+          dataIndex: 'priceNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '订单变更说明',
+          dataIndex: 'orderChangeDesc',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          width: 160,
+          fixed: 'right',
+          className: 'replacecolor'
+        }
+      ],
+      shipmentListDetailsData: [
+        {
+          orderNum: 'AA002200001',
+          smallPo: '008',
+          // shipQuantity: '',
+          // isTC: '',
+          paymentClause: '定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%定金达到50%'
+        },
+        {}
+      ],
+      addShipmentDetails: [] // 新增发运明细
+    }
+  },
+  created() {
+    // this.getShipmentList() // 发运明细列表
+  },
+
+      // const addrow = {
+        // accountSet: '',
+        // clothesFactory: '',
+        // hod: '',
+        // styleNo: '',
+        // poNo: '',
+        // itemNo: '',
+        // dcLabel: '',
+        // s: '',
+        // m: '',
+        // l: '',
+        // xl: '',
+        // xxl: '',
+        // xxxl: '',
+        // inceptionBoxNo: '',
+        // endBoxNo: '',
+        // colorChUsa: '',
+        // configCode: '',
+        // packagesBox: '',
+        // boxes: '',
+        // totalPackagesNum: '',
+        // suttle: '',
+        // totalSuttle: '',
+        // roughWeight: '',
+        // totalRoughWeigh: '',
+        // boxLength: '',
+        // boxWidth: '',
+        // boxHeight: '',
+        // totalVolume: '',
+        // netNetWeight: '',
+        // price: '',
+        // totalPrices: '',
+        // note: '',
+        // operation: ''
+      // }
+
+  methods: {
+    // 单据日期
+    billsDateChange() {},
+    // 预发货日期
+    advanceShipmentChange() {},
+    // 预完工日期
+    advanceCompletedChange() {},
+    // --------------------------------------
+    // 参照订单数据
+    referOrderDataOpen() {
+      console.log('打开参照订单数据')
+      // 打开订单数据弹框
+      this.$refs.referOrderDataModal.referOrderDataModVis = true
+    },
+    // 増行
+    handleAddColumn() {
+      console.log('増行')
+
+      const addrow = {
+        accountSet: '',
+        orderNum: '',
+        styleNum: '',
+        orderDate: '',
+        businessType: '',
+        customerOrder: '',
+        smallPo: '',
+        packId: '',
+        orderData: '',
+        orderRemaQuantity: '',
+        shipQuantity: '',
+        isTC: '',
+        materialComposition: '',
+        saleType: '',
+        customerShortName: '',
+        customerName: '',
+        exchangeRate: '',
+        wholeSingleCombined: '',
+        salesDepartment: '',
+        salesman: '',
+        currency: '',
+        brand: '',
+        thirdParty: '',
+        depositRate: '',
+        deposit: '',
+        collaborativeRoute: '',
+        paymentClause: '',
+        finalCustomer: '',
+        orderNote: '',
+        priceNote: '',
+        orderChangeDesc: '',
+        operation: ''
+      }
+
+      this.shipmentListDetailsData.push(addrow)
+    },
+    // --------------------------------------
+    // 操作 删除
+    handleDelete() {},
+    // 操作 推送
+    push() {},
+
+    // 保存
+    save() {
+      this.$router.push('shipmentList')
+    },
+
+    // 取消
+    cancel() {
+      this.$router.push('shipmentList')
+    },
+    // --------------------------------------
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   // this.getAnnList()
+    // },
+    // 弹框-------------------------------------
+    modalFormOk() {
+      console.log('弹框确定')
+    },
+    // father
+    aa() {}
+  },
+  computed: {},
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>

src/views/shipment-details/referOrderDataModal.vue

@@ -0,0 +1,375 @@
+<template>
+  <a-modal
+    title="参照订单数据"
+    v-model="referOrderDataModVis"
+    :confirmLoading="confirmLoading"
+    @ok="onSubmit"
+    @cancel="handleCancel"
+    width="86%"
+    style="top:330px;left:100px;"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单号">
+                <a-input placeholder="请输入订单号" v-model="queryParam.orderNum"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="账套">
+                <a-select placeholder="请选择账套" v-model="queryParam.accountSet">
+                  <a-select-option value="">请选择</a-select-option>
+                  <a-select-option :value="0">香港森语(101)</a-select-option>
+                  <a-select-option :value="1">宁波森语(102)</a-select-option>
+                  <a-select-option :value="2">宁波马菲羊(103)</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <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>
+
+      <!-- 勾选表    size="small"-->
+      <div>
+        <a-table
+          bordered
+          rowKey="id"
+          :columns="referOerderColumns"
+          :data-source="referOerderData"
+          :loading="loading"
+          :pagination="ipagination"
+          :row-key="record => record.id"
+          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          @change="handleTableChange"
+          :scroll="{ x: 1500, y: 300 }"
+        >
+        </a-table>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+
+export default {
+  name: 'ReferOrderDataModal', // 参照订单数据弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment },
+
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+
+    return {
+      selectedRowKeys: [], // 勾选航
+      loading: false, // 表格加载
+      // 表头
+      referOerderColumns: [
+        {
+          title: '订单号',
+          dataIndex: 'orderNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 120,
+          className: 'replacecolor'
+        },
+        //         {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '订单日期',
+          dataIndex: 'orderDate',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '存货名称',
+          dataIndex: 'inventoryName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '颜色',
+          dataIndex: 'color',
+          width: 120,
+            customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '尺码',
+          dataIndex: 'size',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '配码规格',
+          dataIndex: 'specificationSize',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '数量',
+          dataIndex: 'quantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户订单',
+          dataIndex: 'customerOrder',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '销售类型',
+          dataIndex: 'saleType',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户名称',
+          dataIndex: 'customerName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '供应商',
+          dataIndex: 'supplier',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '汇率',
+          dataIndex: 'exchangeRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '整单合计',
+          dataIndex: 'wholeSingleCombined',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '销售部门',
+          dataIndex: 'salesDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '币种',
+          dataIndex: 'currency',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '品牌方',
+          dataIndex: 'brand',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '第三方',
+          dataIndex: 'thirdParty',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金比例(%)',
+          dataIndex: 'depositRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金',
+          dataIndex: 'deposit',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '协同路线',
+          dataIndex: 'collaborativeRoute',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '付款条件',
+          dataIndex: 'paymentClause',
+          width: 120,
+            customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '最终客户',
+          dataIndex: 'finalCustomer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单备注',
+          dataIndex: 'OrderNote',
+          width: 120,
+            customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '价格备注',
+          dataIndex: 'priceNote',
+          width: 120,
+            customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '订单变更说明',
+          dataIndex: 'OrderChangeDesc',
+          width: 120,
+            customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        }
+      ],
+      referOerderData: [{ orderNum: '26449845' }, {}, {}],
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      referOrderDataModVis: false,
+
+      // 查询条件
+      queryParam: {
+        orderNum: '', // 订单号
+        accountSet: '' // 账套
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  created() {},
+  methods: {
+    // 弹框查询按钮
+    searchQuery() {},
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    // 弹框确定
+    onSubmit() {
+      console.log('弹框确定')
+    },
+
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleCancel() {
+      this.close()
+    },
+    handleTableChange() {},
+    // 选中行
+    onSelectChange(keys, rows) {
+      this.selectedRowKeys = keys
+      this.selectedRows = rows
+    }
+  },
+  computed: {
+    // 选中项
+    rowSelection() {
+      return {
+        onChange: (selectedRowKeys, selectedRows) => {
+          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+        },
+        getCheckboxProps: record => ({
+          props: {
+            disabled: record.title === 'Disabled User',
+            // Column configuration not to be checked
+            title: record.title
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+// th.replacecolor {
+// background-color:  #ccc;
+// }
+</style>

src/views/shipment-details/shipmentList.vue

@@ -0,0 +1,540 @@
+<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.documentNum"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="开始时间">
+              <a-date-picker
+                placeholder="请选择开始时间"
+                @change="startTimeChange"
+                style="width: 100%"
+                v-model="queryParam.startTime"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="结束时间" style="width:100%;">
+              <a-month-picker
+                placeholder="请选择结束时间"
+                @change="endTimeChange"
+                style="width: 100%"
+                v-model="queryParam.endTime"
+              />
+            </a-form-item>
+          </a-col>
+
+          <template v-if="toggleSearchStatus">
+            <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>
+
+            <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-select v-model="queryParam.refer">
+                  <a-select-option value="">请选择</a-select-option>
+                  <a-select-option :value="0">否</a-select-option>
+                  <a-select-option :value="1">是</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+
+          <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>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button type="primary" @click="AddShipmentDetails" icon="plus">新增</a-button>
+    </div>
+
+    <!-- table  y: 300 -->
+    <div>
+      <a-row>
+        <a-table
+          bordered
+          rowKey="id"
+          :columns="shipmentListColumns"
+          :data-source="shipmentListData"
+          :loading="loading"
+          :pagination="ipagination"
+          :scroll="{ x: 1500 }"
+          @change="handleTableChange"
+        >
+          <!-- 推送状态 -->
+          <!-- slot-scope="text, record" -->
+          <span slot="pushStateSlot">
+            <!-- v-if="record.isRelease == '0'" -->
+            <a-tag color="#f50">失败</a-tag>
+            <!-- <a-tag color="#87d068" v-else>已发布</a-tag> -->
+          </span>
+
+          <!-- 单据状态 -->
+          <span slot="documentStateSlot">
+            <a-tag color="#2db7f5">已保存</a-tag>
+          </span>
+
+          <!-- 操作 -->
+          <span slot="operationSlot" slot-scope="text, record">
+            <a href="javascript:void(0);" @click="declareElements(record)" style="color:green">申报要素</a>
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
+              <a-menu slot="overlay">
+                <a-menu-item>
+                  <a @click="checke(record)">查看</a>
+                </a-menu-item>
+
+                <a-menu-item>
+                  <a @click="submit(record)">提交</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a @click="edit(record)">修改</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a @click="push(record)">推送</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a-popconfirm title="确定删除吗?" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
+                    <a href="javascript:void(0);" style="color:red;">删除</a>
+                  </a-popconfirm>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </span>
+        </a-table>
+      </a-row>
+    </div>
+    <!-- 查看、修改 抽屉 -->
+    <!-- <shipmentListDetails-drawer ref="shipmentListDetailsDrawer" :father="aa" @ok="modalFormOk"></shipmentListDetails-drawer> -->
+  </a-card>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import moment from 'moment'
+export default {
+  name: 'ShipmentList', // 发运明细列表
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, moment },
+
+  data() {
+    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+
+    return {
+      loading: false, // 表格加载
+      id: '',
+      // 表头
+      shipmentListColumns: [
+        {
+          title: '单据号',
+          dataIndex: 'documentNum',
+          fixed: 'left',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单号',
+          dataIndex: 'orderNum',
+          fixed: 'left',
+          width: 120,
+          className: 'replacecolor'
+        },
+        //         {
+        //   title: '创建时间',
+        //   dataIndex: 'createTime',
+        //   align: 'center',
+        //   sorter: true,
+        //   customRender: text => {
+        //     return moment(text).format('YYYY-MM-DD')
+        //   }
+        // },
+        {
+          title: '单据日期',
+          dataIndex: 'billDate',
+          width: 140,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户',
+          dataIndex: 'customer',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '小po',
+          dataIndex: 'smallPo',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '款号',
+          dataIndex: 'styleNum',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '报关品名',
+          dataIndex: 'declarationName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: 'hscode',
+          dataIndex: 'hscode',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '英文品名',
+          dataIndex: 'englishProName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '账套',
+          dataIndex: 'accountSet',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '订单日期',
+          dataIndex: 'orderDate',
+          width: 140,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户订单',
+          dataIndex: 'customerOrder',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: 'Pack Id',
+          dataIndex: 'packId',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单数据',
+          dataIndex: 'orderData',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '订单剩余数量',
+          dataIndex: 'orderRemaQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '发货数量',
+          dataIndex: 'shipQuantity',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '是否TC功能',
+          dataIndex: 'isTC',
+          width: 90,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '物料成分',
+          dataIndex: 'materialComposition',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '销售类型',
+          dataIndex: 'saleType',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '客户简称',
+          dataIndex: 'customerShortName',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '客户名称',
+          dataIndex: 'customerName',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '汇率',
+          dataIndex: 'exchangeRate',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '整单合计',
+          dataIndex: 'wholeSingleCombined',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '销售部门',
+          dataIndex: 'salesDepartment',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '业务员',
+          dataIndex: 'salesman',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '币种',
+          dataIndex: 'currency',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '品牌方',
+          dataIndex: 'brand',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '第三方',
+          dataIndex: 'thirdParty',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '定金比例(%)',
+          dataIndex: 'depositRate',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '定金',
+          dataIndex: 'deposit',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '协同路线',
+          dataIndex: 'collaborativeRoute',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '付款条件',
+          dataIndex: 'paymentClause',
+          width: 120,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '最终客户',
+          dataIndex: 'finalCustomer',
+          width: 120,
+          className: 'replacecolor'
+        },
+
+        {
+          title: '订单备注',
+          dataIndex: 'orderNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '价格备注',
+          dataIndex: 'priceNote',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+        {
+          title: '订单变更说明',
+          dataIndex: 'orderChangeDesc',
+          width: 160,
+          customRender: t => ellipsis(t),
+          className: 'replacecolor'
+        },
+
+        {
+          title: '预发货日期',
+          dataIndex: 'scheduledShipDate',
+          width: 140,
+          className: 'replacecolor'
+        },
+        {
+          title: '预完工日期',
+          dataIndex: 'scheduledDoneDate',
+          width: 140,
+          className: 'replacecolor'
+        },
+        {
+          title: '推送状态',
+          dataIndex: 'pushState',
+          scopedSlots: { customRender: 'pushStateSlot' },
+          fixed: 'right',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '单据状态',
+          dataIndex: 'documentState',
+          scopedSlots: { customRender: 'documentStateSlot' },
+          fixed: 'right',
+          width: 90,
+          className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          fixed: 'right',
+          width: 160,
+          className: 'replacecolor'
+        }
+      ],
+      shipmentListData: [{}, {}, {}, {}],
+
+      // 查询条件
+      queryParam: {
+        pageNo: '', // 页码
+        documentNum: '', // 单据号
+        startTime: '',
+        endTime: '',
+        deliveryDate: '',
+        salesman: '',
+        styleNum: '',
+        refer: ''
+      }
+    }
+  },
+  created() {
+    // this.getShipmentList() // 发运明细列表
+  },
+  methods: {
+
+    // --------------------------------------
+    // 开始时间
+    startTimeChange() {},
+    // 结束时间
+    endTimeChange() {},
+    // 发货日期
+    shipDateChange() {},
+
+    // --------------------------------------
+    // 查询按钮
+    searchQuery() {
+      // this.getAnnList() // 渲染公告
+    },
+    // 重置
+    searchReset() {
+      console.log('>>>>重置')
+      this.queryParam = {}
+      // this.getAnnList()
+    },
+    // --------------------------------------
+    // 新增 按钮
+    AddShipmentDetails() {
+      console.log('新增发运明细')
+      this.$router.push('addShipmentDetails')
+    },
+    // --------------------------------------
+    // 操作 申报要素
+    declareElements() {},
+    // 操作 查看
+    checke() {},
+    // 操作 提交
+    submit() {},
+    // 操作 修改
+    edit() {},
+    // 操作 推送
+    push() {},
+    // 操作 删除
+    handleDelete() {},
+
+    // 分页、排序、筛选变化时触发
+    // handleTableChange(pagination, filters, sorter) {
+    //   // console.log('当前页信息>>>>',pagination)
+    //   this.queryParam.pageNo = pagination.current
+    //   // this.getAnnList()
+    // }
+
+    // father方法
+    aa() {}
+  },
+  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>