PurchaseInfo.vue 3.16 KB
<template>
  <div>
    <div>
      <div id="content">
        <a-row type="flex">
          <a-col :span="21">
            <h2 class="center">送货单</h2>
            <span>供应商</span>
          </a-col>
          <a-col :span="3">
            <vue-qr :text="dataSource.toString()" :size="80" :margin="0"></vue-qr>
          </a-col>
        </a-row>
        <a-row>
          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="id"
            :pagination="false"
            :dataSource="dataSource"
            :loading="loading"
            :columns="columns">
            <span slot="flag" slot-scope="text, record">
              <vue-qr :text="qrText(record)" :size="80" :margin="0"></vue-qr>
            </span>
            <span slot="barcode" slot-scope="text, record">
              <barcode  :value="record.materialCode" :height="30" :displayValue="false" width="1"></barcode>
            </span>
          </a-table>
        </a-row>
      </div>


    </div>
<!--    <template slot="footer">-->
<!--      <a-button @click="handleCancel" v-show="false"></a-button>-->
<!--    </template>-->
  </div>

</template>

<script>
import VueQr from 'vue-qr'
import VueBarcode from 'vue-barcode'
import { getPurchaseByIds } from '@api/api'

export default {
  name: 'PurchaseInfo',
  components: {
    VueQr,
    'barcode': VueBarcode
  },
  data() {
    return {
      confirmLoading: false,
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '工作令号',
          dataIndex: 'workNo',
          key: 'workNo'
        },
        {
          title: '物料编码',
          dataIndex: 'materialCode',
          key: 'materialCode'
        }, {
          title: '物料名称',
          dataIndex: 'materialName',
          key: 'materialName'
        }, {
          title: '物料单位',
          dataIndex: 'unit',
          key: 'unit'
        }, {
          title: '规格',
          dataIndex: 'spec',
          key: 'spec'
        }, {
          title: '数量',
          dataIndex: 'qty',
          key: 'qty'
        }, {
          title: '二维码',
          dataIndex: 'qr',
          scopedSlots: { customRender: 'barcode' },
          align: 'center',
        }
      ]
    }
  },
  created() {
    this.open();
  },
  methods: {
    handleCancel(e) {
      this.visible = false
    },
    open() {
      let url = window.location.href;
      console.log(url)
      let cs = url.split('?')[1];
      let cs_arr = cs.split('&');
      this.loading = true
      this.visible = true
      let params = {
        'ids': cs_arr
      }
      getPurchaseByIds(params).then(res => {
        if (res.success) {
          this.dataSource = res.result
          this.loading = false
        } else {
          this.$message.warning('不是同一供应商!')
        }
      })
    },
    print() {
      window.print()
    },
    doPrint() { //方法

    },
    qrText(record) {
      return "物料编码:"+record.materialCode+"\r\n物料名称:"+record.materialName+"\r\n规格:"
        +record.spec+"\r\n工作令号:"+record.workNo+"\r\n数量:"+record.qty
    }
  }
}
</script>

<style scoped>

</style>