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

<template>
  <!-- 销售订单详情 -->
  <div id="salesOrderDetailsDrawer">
    <a-drawer title="销售订单详情" width="89%" placement="right" :closable="true" :visible="visible" @close="onClose">
      <!-- 主表 展示 -->
      <a-card :bordered="true">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="部门">
                  {{ salesOrderMain.cdepName }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="业务员">
                  {{ salesOrderMain.cpersonName }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="客户">
                  {{ salesOrderMain.cCusName }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="物料编号">
                  {{ salesOrderMain.todo }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="物料名称">
                  {{ salesOrderMain.CInvName }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="款号">
                  {{ salesOrderMain.itemNumber }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="颜色">
                  {{ salesOrderMain.color }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="交期">
                  {{ salesOrderMain.dpreDateBT }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="订单数量">
                  {{ salesOrderMain.iquantity }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="单价(原币)">
                  {{ salesOrderMain.icostsum }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="总额(原币)">
                  {{ salesOrderMain.totalSum }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="单价(本币)">
                  {{ salesOrderMain.bbPrice }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="总额(本币)">
                  {{ salesOrderMain.iNatSum }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="单件成本(本币)">
                  {{ salesOrderMain.todo2 }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="已出库数量">
                  {{ salesOrderMain.foutquantity }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="累计开票数量">
                  {{ salesOrderMain.iKPQuantity }}
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="计划单号">
                  {{ salesOrderMain.planCode }}
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="业务填写">
                  {{ salesOrderMain.todo3 }}
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>

      <!-- 展示 子表 采购 -->
      <a-card :bordered="true" style="margin:10px 0;">
        <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-card>
      <!-- 物料卡结束 -->
    </a-drawer>

    <!-- 点击【物料编号】----出入库详细数据 抽屉 -->
    <outInDetailData-drawer ref="outInDetailDataDrawer" @ok="modalFormOk"></outInDetailData-drawer>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

// import { salesOrderAll } from '@api/reportForms/pro-progress-report.js'

import outInDetailDataDrawer from '@views/reportForms/pro-progress-report/outInDetailDataDrawer.vue'

export default {
  name: 'salesOrderDetailsDrawer', // 销售订单详情
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, outInDetailDataDrawer },
  data() {
    return {
      loading: false, // 表格加载
      visible: false, // 单个订单报表 抽屉
      salesOrderMain: [], // 主表信息
      record: {}, //点击的销售订单对象（参数）
      // 物料卡 查询条件
      queryParam: {
        pageNo: '', // 初始页
        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() {
    this.getDetails()
  },
  methods: {
    // 销售订单所有详情
    getDetails() {
      this.$nextTick(() => {
        console.log('销售订单号', this.record.csocode)
        console.log('计划单号', this.record.planCode)
        console.log('款号', this.record.itemNumber)
        // console.log('物料编码', this.record.csocode)
        // salesOrderAll({
        //   csocode: this.record.csocode,
        //   planCode: this.record.planCode,
        //   itemNumber: this.record.itemNumber,
        //   todo: this.record.todo
        // }).then(res => {
        //   if (res.success) {
        //     console.log('销售订单详情返回所有数据', res.result)
        //     this.salesOrderMain = res.result.record //主表信息
        //     // 采购 委外 物料卡 信息在 res 什么地方？？？
        //   }
        // })
      })
    },

    // 采购、委外 【物料编号】 抽屉--打开【出入库详细数据】
    materialNumCustomCell(record) {
      return {
        on: {
          click: event => {
            console.log('传给出入库的对象', record)
            this.$refs.outInDetailDataDrawer.visible = true
            this.$refs.outInDetailDataDrawer.record = record
            this.$refs.outInDetailDataDrawer.getoutInDetailData()
          }
        }
      }
    },

    // 物料卡----查询按钮
    searchQuery() {
      // 物料卡信息
    },
    searchReset() {
      this.queryParam = {}
    },
    // 关闭抽屉
    onClose() {
      this.visible = 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;
// }

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}
</style>