exchange/resources/assets/js/pages/booking/uploadPo.vue

<template>
  <el-main>
    <progress-track v-model="status"/>

    <div align="center">
      <h4 style="margin-top:5%;">Transfer Completed</h4>
      <h5> Please upload your purchase order </h5>
      <br>
    </div>

    <!-- upload card -->
    <br>
    <el-row :gutter="12" justify="center" align="center">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Upload PO</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
          </div>

          <!-- upload image -->
          <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     class="upload-demo"
                     drag
                     multiple>
            <i class="el-icon-upload"/>
            <div class="el-upload__text">Drop file here or
              <em>click to upload</em>
            </div>
            <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
          </el-upload>

          <br>

          <div class="bottom clearfix" style="text-align:right;">
            <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
          </div>
          <!-- upload image end -->

        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>China Bank Slip</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
          </div>
          <el-row :gutter="12" type="flex">
            <el-col :span="12">
              <a href="https://placeholder.com">
                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
              </a>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <br>

    <!-- order details -->
    <el-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Order Details</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <br>

    <el-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Order Bankin Slip</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
            <img src="http://via.placeholder.com/600x400" class="image">
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </el-main>
</template>
<style>
    .booking-details {
        font-weight: bold;
    }
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
import axios from 'axios'

export default {
  components: {
    'progress-track': ProgressTrack
  },
  data () {
    return {
      booking_id: this.$route.params.id,
      status: 5,
      loading_btn: false,
      bookingConfirmTable: [{
        data1: 'Order Number :',
        data2: '001'
      }, {
        data1: 'Date :',
        data2: '25/5/2018'
      }, {
        data1: 'Customer Marking :',
        data2: 'CIEF/150ECE'
      }, {
        data1: '',
        data2: ''
      }, {
        data1: 'Payment Method :',
        data2: 'Cash/Bank Transfer'
      }, {
        data1: '',
        data2: ''
      }],
      bookingConfirmTable2: [{
        data1: 'CNY/RMB :',
        data2: 'CNY 120,500.00'
      }, {
        data1: '+ Service Charge :',
        data2: 'CNY 20.00'
      }, {
        data1: '/ RATE :',
        data2: '1.63'
      }, {
        data1: '',
        data2: 'MYR 73,848.04'
      }, {
        data1: '+ GST 6% :',
        data2: 'MYR 4,430.88'
      }, {
        data1: '',
        data2: 'MYR 78,278.92'
      }, {
        data1: '',
        data2: ''
      }]
    }
  },
  methods: {
    uploadPo () {
      this.loading_btn = true
      axios
        .post('/api/booking/' + this.$route.params.id + '/confirm-po')
        .then((response) => {
          console.log(response)
          this.$message({
            showClose: true,
            message: 'Your PO has been uploaded. We are processing the Invoice.',
            type: 'success',
            duration: 5000
          })
          this.$router.push({
            name: 'home'
          })
          this.loading_btn = false
        }).catch((error) => {
            this.$message({
              showClose: true,
              message: 'Please upload purchase order',
              type: 'error',
              duration: 30000
            })
          this.loading_btn = false
        })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>