sen-yu-new-web/src/views/reportForms/pro-progress-report/outInDetailDataDrawer.vue

<template>
  <!-- 出入库详细数据 -->
  <a-drawer
    title="出入库详细数据"
    width="70%"
    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>