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

<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>