supply-front/src/components/Common/check-order.vue

<template>
  <div class="detail-container">
    <el-page-header @back="goBack" content="联查单据"></el-page-header>

    <div class="table" style="margin-top: 20px">
      <el-table
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        stripe
        show-summary
        :summary-method="$getSummaries">
        <el-table-column align="center" label="发货单" prop="id" min-width="180" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="订单类别" prop="inOrderType" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.inOrderType | orderTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="价税合计" prop="payAmount" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.payAmount | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="折扣后金额" prop="payAmount" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.payAmount | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="发货日期" prop="orderTime" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="仓库" prop="correspondName" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="客户名称" prop="customerName" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="产品编码" prop="materialCode" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="物料代码" prop="materialOldNumber" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="规格型号" prop="specification" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="right" label="无税金额" prop="noTotalAmount" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.noTotalAmount | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="单价" prop="afterTaxPrice" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.afterTaxPrice | numToFixed }}
          </template>
        </el-table-column>
        <el-table-column align="right" label="数量" prop="refundableQty" min-width="100" show-overflow-tooltip></el-table-column>

      </el-table>
    </div>

    <div class="page-footer">
      <div class="footer">
        <el-button @click="goBack">关 闭</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { checkOrder } from "@/api/common";

export default {
  name: 'RetailReturn',
  componentName: 'RetailReturn',
  props: ['checkOrderId'],
  filters: {
    orderTypeFilter(val) {
      const MAP = {
        1: '发货单',
        2: '退货单'
      }
      return MAP[val];
    }
  },
  data() {
    return {
      dataList: [],
    }
  },

  created() {
    this.getDetail();
  },

  methods: {
    // 返回详情
    goBack() {
      this.$emit('backDetail');
    },

    // 获取详情
    getDetail() {
      checkOrder({mainOrderId: this.checkOrderId}).then(res => {
        if(res.data) {
          res.data.forEach(item => {
            item.sums1 = ['refundableQty'];
            item.sums2 = ['payAmount', 'afterTaxPrice', 'noTotalAmount'];
          })
        }
        this.dataList = res.data;
      })
    },

  }
}
</script>

<style scoped lang="scss">
  .detail-container {
    width: 100%;
    height: 100%;
  }
</style>