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

<template>
  <!-- 单个订单报表 -->
  <a-card :bordered="false">
    <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="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>

      <!-- 子表 采购 -->
      <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, outInDetailDataDrawer },
  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', fixed: 'right', 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('this:', this)
            // console.log('event:', event)
            console.log('点击了【物料编号】--【出入库详细数据】')
            this.$refs.outInDetailDataDrawer.visible = true
          }
        }
      }
    },
    // 查询按钮
    searchQuery() {
      // 渲染订单销售列表
    },
    searchReset() {
      // console.log('>>>>重置')
      this.queryParam = {}
    },
    // 关闭抽屉
    onClose() {
      this.visible = false
    },

    // 出入库详细数据 抽屉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>