mt-ck-wms-ui/src/views/orderManage/erpToMesData.vue

<!--
 * @Author: zwq
 * @Date: 2021-06-24 15:21:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-21 16:45:26
 * @Description:
-->
<template>
  <div style="padding:10px">
    <span>{{ $t('module.orderManage.erpToMes.erpToMesMaterial') }}</span>
    <base-table
      :page="listQuery1.current"
      :limit="listQuery1.size"
      :table-config="tableProps1"
      :table-data="list1"
      :is-loading="listLoading1"
    />
    <pagination
      v-show="total1 > 0"
      :total="total1"
      :page.sync="listQuery1.current"
      :limit.sync="listQuery1.size"
      @pagination="getList1()"
    />
    <hr>
    <span>{{ $t('module.orderManage.erpToMes.erpToMesMaterialBom') }}</span>
    <base-table
      :page="listQuery2.current"
      :limit="listQuery2.size"
      :table-config="tableProps2"
      :table-data="list2"
      :is-loading="listLoading2"
    />
    <pagination
      v-show="total2 > 0"
      :total="total2"
      :page.sync="listQuery2.current"
      :limit.sync="listQuery2.size"
      @pagination="getLis2()"
    />
    <hr>
    <span>{{ $t('module.orderManage.erpToMes.erpToMesOrder') }}</span>
    <base-table
      :page="listQuery3.current"
      :limit="listQuery3.size"
      :table-config="tableProps3"
      :table-data="list3"
      :is-loading="listLoading3"
    />
    <pagination
      v-show="total3 > 0"
      :total="total3"
      :page.sync="listQuery3.current"
      :limit.sync="listQuery3.size"
      @pagination="getList3()"
    />
  </div>
</template>

<script>
import { erpToMesMaterialList, erpToMesMaterialBomList, erpToMesOrderList } from '@/api/orderManage/erpToMes'
import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import i18n from '@/lang'

const tableProps1 = [
  {
    prop: 'batchNumber',
    label: i18n.t('module.orderManage.erpToMes.batchNumber'),
    align: 'center'
  },
  {
    prop: 'materialsCode',
    label: i18n.t('module.orderManage.erpToMes.materialsCode'),
    align: 'center'
  },
  {
    prop: 'materialsName',
    label: i18n.t('module.orderManage.erpToMes.materialsName'),
    align: 'center'
  },
  {
    prop: 'quantity',
    label: i18n.t('module.orderManage.erpToMes.quantity'),
    align: 'center'
  },
  {
    prop: 'unit',
    label: i18n.t('module.orderManage.erpToMes.unit'),
    align: 'center'
  }
]
const tableProps2 = [
  {
    prop: 'bomContent',
    label: i18n.t('module.orderManage.erpToMes.bomContent'),
    align: 'center'
  },
  {
    prop: 'craftCode',
    label: i18n.t('module.orderManage.erpToMes.craftCode'),
    align: 'center'
  },
  {
    prop: 'craftName',
    label: i18n.t('module.orderManage.erpToMes.craftName'),
    align: 'center'
  },
  {
    prop: 'materialsBomCode',
    label: i18n.t('module.orderManage.erpToMes.materialsBomCode'),
    align: 'center'
  },
  {
    prop: 'materialsBomName',
    label: i18n.t('module.orderManage.erpToMes.materialsBomName'),
    align: 'center'
  },
  {
    prop: 'substrateBatch',
    label: i18n.t('module.orderManage.erpToMes.substrateBatch'),
    align: 'center'
  }
]
const tableProps3 = [
  {
    prop: 'customerCode',
    label: i18n.t('module.orderManage.erpToMes.customerCode'),
    align: 'center'
  },
  {
    prop: 'customerName',
    label: i18n.t('module.orderManage.erpToMes.customerName'),
    align: 'center'
  },
  {
    prop: 'orderCode',
    label: i18n.t('module.orderManage.erpToMes.orderCode'),
    align: 'center'
  },
  {
    prop: 'orderName',
    label: i18n.t('module.orderManage.erpToMes.orderName'),
    align: 'center'
  },
  {
    prop: 'quantity',
    label: i18n.t('module.orderManage.erpToMes.quantity'),
    align: 'center'
  }
]

export default {
  name: 'ErpToMesData',
  components: { Pagination, BaseTable },
  data() {
    return {
      tableProps1,
      tableProps2,
      tableProps3,
      list1: [],
      list2: [],
      list3: [],
      total1: 0,
      total2: 0,
      total3: 0,
      listLoading1: true,
      listLoading2: true,
      listLoading3: true,
      listQuery1: {
        current: 1,
        size: 10
      },
      listQuery2: {
        current: 1,
        size: 10
      },
      listQuery3: {
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.getList1()
    this.getList2()
    this.getList3()
  },
  methods: {
    getList1() {
      this.listLoading1 = true
      erpToMesMaterialList(this.listQuery1).then(response => {
        if (response.data.records) {
          this.list1 = response.data.records
        } else {
          this.list1.splice(0, this.list1.length)
        }
        this.total1 = response.data.total
        this.listLoading1 = false
      })
    },
    getList2() {
      this.listLoading2 = true
      erpToMesMaterialBomList(this.listQuery2).then(response => {
        if (response.data.records) {
          this.list2 = response.data.records
        } else {
          this.list2.splice(0, this.list2.length)
        }
        this.total2 = response.data.total
        this.listLoading2 = false
      })
    },
    getList3() {
      this.listLoading3 = true
      erpToMesOrderList(this.listQuery3).then(response => {
        if (response.data.records) {
          this.list3 = response.data.records
        } else {
          this.list3.splice(0, this.list3.length)
        }
        this.total3 = response.data.total
        this.listLoading3 = false
      })
    }
  }
}
</script>

<style scoped>
span{
  background-color: #ECF5FF;
  font-size: 20px;
  padding: 5px;
  color: #409EFF;
}
</style>