【生产进度报表】-【单个订单报表】-【 出入库详细数据】抽屉 基本完成

src/views/order/orderList.vue

@@ -13,7 +13,11 @@
 
           <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-date-picker
+                style="width: 100%"
+                v-model="queryParam.orderData"
+                placeholder="请选择订单日期"
+              ></a-date-picker>
             </a-form-item>
           </a-col>
 

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

@@ -155,7 +155,7 @@ export default {
   created() {},
   methods: {
     // 第一行 导出
-    handleExportXls() {},
+    // handleExportXls() {},
     // 打印
     print() {},
     // 返回

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

@@ -254,7 +254,7 @@ export default {
       return {
         on: {
           click: event => {
-            console.log('点击了生产进度报表--销售订单号')
+            console.log('点击了【销售订单号】--【单个订单报表】')
             this.$refs.singleOrderReportDrawer.visible = true
           }
         }

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

@@ -0,0 +1,279 @@
+<template>
+  <!-- 出入库详细数据 -->
+  <a-drawer
+    title="出入库详细数据"
+    width="89%"
+    placement="right"
+    :closable="true"
+    :visible="visible"
+    @close="onClose">
+    <!-- 查询  -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="订单日期">
+              <a-date-picker
+                style="width: 100%"
+                v-model="queryParam.orderData"
+                placeholder="请选择订单日期"
+              ></a-date-picker>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <a-form-item label="客户简称">
+              <a-input v-model="queryParam.customerShortName" placeholder="请输入客户简称"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <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 style="marginTop:30px;">
+      <h6 class="table-title" style="float:left">入库单</h6>
+      <!-- 导出 -->
+      <a-row style="float:right">
+        <a-col :md="24" :sm="12">
+          <span style="float: right;" class="table-operator">
+            <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 入库单')">导出</a-button>
+          </span>
+        </a-col>
+      </a-row>
+      <a-table
+        bordered
+        rowKey="id"
+        :loading="loading"
+        :columns="inOrderColumns"
+        :data-source="inOrderData"
+        :pagination="false"
+        :scroll="{ x: 1500 }"
+      >
+      </a-table>
+    </div>
+
+    <!-- 子表 出库单 -->
+    <div style="margin:80px 0;">
+      <h6 class="table-title" style="float:left">出库单</h6>
+      <!-- 导出 -->
+      <a-row style="float:right">
+        <a-col :md="24" :sm="12">
+          <span style="float: right;" class="table-operator">
+            <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 出库单')">导出</a-button>
+          </span>
+        </a-col>
+      </a-row>
+      <a-table
+        bordered
+        rowKey="id"
+        :loading="loading"
+        :columns="outOrderColumns"
+        :data-source="outOrderData"
+        :pagination="false"
+        :scroll="{ x: 1500 }"
+      >
+      </a-table>
+    </div>
+
+    <!-- 子表 材料出库单-->
+    <div>
+      <h6 class="table-title" style="float:left">材料出库单</h6>
+      <!-- 导出 -->
+      <a-row style="float:right">
+        <a-col :md="24" :sm="12">
+          <span style="float: right;" class="table-operator">
+            <a-button type="primary" icon="download" @click="handleExportXls('出入库详细数据 - 材料出库单')">
+              导出
+            </a-button>
+          </span>
+        </a-col>
+      </a-row>
+      <a-table
+        bordered
+        rowKey="id"
+        :loading="loading"
+        :columns="materialsOutOrderColumns"
+        :data-source="materialsOutOrderData"
+        :pagination="false"
+        :scroll="{ x: 1500 }"
+      >
+      </a-table>
+    </div>
+  </a-drawer>
+</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, // 抽屉
+
+      //  查询条件
+      queryParam: {
+        orderData: '', // 订单日期
+        customerShortName: '' // 客户简称
+      },
+
+      // 入库单 表头
+      inOrderColumns: [
+        { title: '订单号', width: 140, dataIndex: 'orderNum', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '供应商',
+          width: 120,
+          dataIndex: 'supplier',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        { title: '出入库类型', width: 140, dataIndex: 'outInType', fixed: 'left', className: 'replacecolor' },
+
+        {
+          title: '物料编号',
+          width: 140,
+          dataIndex: 'materialNum',
+          className: 'replacecolor',
+          fixed: 'left'
+        },
+        { title: '物料名称', width: 200, dataIndex: 'materialName', className: 'replacecolor' },
+        { title: '入库数量', width: 160, dataIndex: 'inQuantity', className: 'replacecolor' },
+        { title: '批号', width: 120, dataIndex: 'batchNum', className: 'replacecolor' },
+        { title: '颜色', width: 140, dataIndex: 'color', className: 'replacecolor' },
+        { title: '入库单号', width: 140, dataIndex: 'inOrderNum', className: 'replacecolor' },
+        { title: '仓库名称', width: 140, dataIndex: 'warehouseName', className: 'replacecolor' },
+        { title: '仓库编码', width: 160, dataIndex: 'warehouseNum', className: 'replacecolor' },
+        { title: '门幅', width: 140, dataIndex: 'larghezza', className: 'replacecolor' },
+        { title: '入库时间', width: 100, dataIndex: 'inDate', className: 'replacecolor' },
+        { title: '小po', width: 100, dataIndex: 'smallPo', className: 'replacecolor' },
+        { title: '港口', width: 100, dataIndex: 'port', fixed: 'right', className: 'replacecolor' }
+      ],
+      inOrderData: [{}],
+
+      // 出库单 表头
+      outOrderColumns: [
+        { title: '订单号', width: 140, dataIndex: 'orderNum', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '客户',
+          width: 140,
+          dataIndex: 'customer',
+          fixed: 'left',
+          className: 'replacecolor'
+        },
+        { title: '出入库类型', width: 140, dataIndex: 'outInType', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '物料编号',
+          width: 140,
+          dataIndex: 'materialNum',
+          className: 'replacecolor',
+          fixed: 'left'
+        },
+        { title: '物料名称', width: 200, dataIndex: 'materialName', className: 'replacecolor' },
+        { title: '出库数量', width: 160, dataIndex: 'outQuantity', className: 'replacecolor' },
+        { title: '批号', width: 140, dataIndex: 'batchNum', className: 'replacecolor' },
+        { title: '颜色', width: 140, dataIndex: 'color', className: 'replacecolor' },
+        { title: '入库单号', width: 140, dataIndex: 'inOrderNum', className: 'replacecolor' },
+        { title: '仓库名称', width: 140, dataIndex: 'warehouseName', className: 'replacecolor' },
+        { title: '仓库编码', width: 160, dataIndex: 'warehouseNum', className: 'replacecolor' },
+        { title: '门幅', width: 140, dataIndex: 'larghezza', className: 'replacecolor' },
+        { title: '入库时间', width: 160, dataIndex: 'inDate', className: 'replacecolor' },
+        { title: '小po', width: 140, dataIndex: 'smallPo', className: 'replacecolor' },
+        { title: '港口', width: 160, dataIndex: 'port', fixed: 'right', className: 'replacecolor' }
+      ],
+      outOrderData: [{}],
+
+      // 材料出库单 表头
+      materialsOutOrderColumns: [
+        { title: '订单号', width: 140, dataIndex: 'orderNum', fixed: 'left', className: 'replacecolor' },
+        {
+          title: '物料编号',
+          width: 140,
+          dataIndex: 'materialNum',
+          className: 'replacecolor',
+          fixed: 'left'
+        },
+        {
+          title: '物料名称',
+          width: 200,
+          dataIndex: 'materialName',
+          className: 'replacecolor'
+        },
+        {
+          title: '出库数量',
+          width: 140,
+          dataIndex: 'outQuantity',
+          className: 'replacecolor'
+        },
+
+        { title: '批号', width: 140, dataIndex: 'batchNum', className: 'replacecolor' },
+        { title: '颜色', width: 160, dataIndex: 'color', className: 'replacecolor' },
+        { title: '入库单号', width: 160, dataIndex: 'inOrderNum', className: 'replacecolor' },
+        { title: '仓库名称', width: 160, dataIndex: 'warehouseName', className: 'replacecolor' },
+        { title: '仓库编码', width: 160, dataIndex: 'warehouseNum', className: 'replacecolor' },
+        { title: '门幅', width: 150, dataIndex: 'larghezza', className: 'replacecolor' },
+        { title: '入库时间', width: 160, dataIndex: 'inDate', fixed: 'right', className: 'replacecolor' }
+      ],
+      materialsOutOrderData: [{}]
+    }
+  },
+  created() {},
+  methods: {
+    // 查询按钮
+    searchQuery() {
+      // 渲染订单销售列表
+    },
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
+    },
+    // 入库单 导出
+    // inOrderExportXls() {},
+
+    // // 出库单 导出
+    // outOrderExportXls() {
+    //   console.log(' 出入库详细数据-出库单 导出')
+    // },
+
+    // // 材料出库单 导出
+    // materialsOutOrderExportXls() {},
+
+    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/reportForms/pro-progress-report/singleOrderReportDrawer.vue

@@ -1,241 +1,241 @@
 <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-card :bordered="false">
+    <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.UnitCostLocal"></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.quantityDelivered"></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.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.materialName"></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>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="款号">
+                <a-input v-model="singleOrder.styleNum"></a-input>
+              </a-form-item>
+            </a-col>
 
-    <!-- table区域  -->
-    <!-- <a-card style="margin:10px 0;"> -->
+            <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>
 
-    <!-- 采购 -->
-    <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> -->
+            <a-col :md="6" :sm="8">
+              <a-form-item label="订单数量">
+                <a-input v-model="singleOrder.orderQuantity"></a-input>
+              </a-form-item>
+            </a-col>
 
-        <!-- 物料编号 -->
-        <span slot="materialNum" slot-scope="text">
-          <a>{{ text }}</a>
-        </span>
-      </a-table>
-    </div>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="单价(原币)">
+                <a-input v-model="singleOrder.priceOriginal"></a-input>
+              </a-form-item>
+            </a-col>
 
-    <!-- 委外 -->
-    <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>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="总额(原币)">
+                <a-input v-model="singleOrder.totalAmountOriginal"></a-input>
+              </a-form-item>
+            </a-col>
 
-    <!-- 物料卡 -->
-    <div>
-      <h6 class="table-title" style="marginBottom:10px;">物料卡</h6>
+            <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>
 
-      <!-- 查询区域 -->
-      <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 label="单件成本(本币)">
+                <a-input v-model="singleOrder.UnitCostLocal"></a-input>
               </a-form-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
-              <a-form-item label="物料" has-feedback>
-                <a-input placeholder="请输入物料" v-model="queryParam.material"></a-input>
+              <a-form-item 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 placeholder="请输入计划单号" v-model="queryParam.planOrderNo"></a-input>
+                <a-input v-model="singleOrder.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-form-item label="业务填写">
+                <a-input v-model="singleOrder.businessFill"></a-input>
+              </a-form-item>
             </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>
+      <!-- 子表 采购 -->
+      <div style="marginTop:30px;">
+        <h6 class="table-title">采购</h6>
+        <a-table
+          bordered
+          rowKey="id"
+          :loading="loading"
+          :columns="purchaseColumns"
+          :data-source="purchaseData"
+          :pagination="false"
+          :scroll="{ x: 1500 }"
+        >
+          <!-- 物料编号 -->
+          <span slot="materialNum" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 子表 委外 -->
+      <div style="margin:60px 0;">
+        <h6 class="table-title">委外</h6>
+        <a-table
+          bordered
+          rowKey="id"
+          :loading="loading"
+          :columns="outsourceColumns"
+          :data-source="outsourceData"
+          :pagination="false"
+          :scroll="{ x: 1500 }"
+        >
+          <!-- 物料编号 弹框-->
+          <span slot="materialNum" slot-scope="text">
+            <a>{{ text }}</a>
+          </span>
+        </a-table>
+      </div>
+
+      <!-- 子表 物料卡开始 -->
+      <div>
+        <h6 class="table-title">物料卡</h6>
+        <!-- 查询区域 -->
+        <div class="table-page-search-wrapper" style="background:#f2f2f2;padding:30px 10px 0 10px;">
+          <a-form layout="inline" @keyup.enter.native="searchQuery">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <a-form-item label="日期">
+                  <a-date-picker style="width: 100%" placeholder="请选择日期" v-model="queryParam.data"></a-date-picker>
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="物料" has-feedback>
+                  <a-input placeholder="请输入物料" v-model="queryParam.material"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :md="6" :sm="8">
+                <a-form-item label="计划单号">
+                  <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>
+
+    <!-- 出入库详细数据 抽屉 -->
+    <outInDetailData-drawer ref="outInDetailDataDrawer" :father="aa" @ok="modalFormOk"></outInDetailData-drawer>
+  </a-card>
 </template>
 
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
+
+import outInDetailDataDrawer from '@views/reportForms/pro-progress-report/outInDetailDataDrawer.vue'
+
 export default {
   name: 'SingleOrderReportDrawer',
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment },
+  components: { JEllipsis, moment, outInDetailDataDrawer },
   data() {
     return {
       description: '单个订单报表抽屉 页面',
       loading: false, // 表格加载
-      visible: false, // 抽屉
+      visible: false, // 单个订单报表 抽屉
 
       singleOrder: [], // 主表信息
 
@@ -275,7 +275,7 @@ export default {
         { 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' }
+        { title: '余料', width: 100, dataIndex: 'oddments', fixed: 'right', className: 'replacecolor' }
       ],
       purchaseData: [
         {
@@ -368,15 +368,15 @@ export default {
   },
   created() {},
   methods: {
-    // 采购 【物料编号】 弹框
+    // 采购、委外 【物料编号】 抽屉--打开【出入库详细数据】
     materialNumCustomCell(record) {
       return {
         on: {
           click: event => {
-            // console.log('点击了单元格')
             // console.log('this:', this)
             // console.log('event:', event)
-            // this.$refs.purchaseAmountModal.purchaseAmountModVis = true
+            console.log('点击了【物料编号】--【出入库详细数据】')
+            this.$refs.outInDetailDataDrawer.visible = true
           }
         }
       }
@@ -393,7 +393,10 @@ export default {
     onClose() {
       // 关闭抽屉
       this.visible = false
-    }
+    },
+
+    // 出入库详细数据 抽屉father
+    aa() {}
   },
   computed: {},
   mounted() {}