<template> <div class="container" style=" width:100px;/*height:228px;*/color: #333"> <div class="noprint container" style="text-align:right; float: right"> <a-button v-print="'#printContent'" ghost type="primary">打印</a-button> </div> <div class="row" id="printContent"> <table style=" width:100px;/*height:228px;*/" v-for="source in dataSource" :key="source"> <tbody> <tr style=" width:80px;height:60px;"> <td> <barcode :value="source.code" :margin="15" :margin-bottom="20" :margin-top="40" :margin-left="0" :height="120" font-size="30"></barcode> </td> <td> <barcode :value="source.code" :margin="15" :margin-bottom="20" :margin-top="40" :margin-left="0" :height="120" font-size="30"></barcode> </td> </tr> </tbody> </table> </div> </div> </template> <script> import {httpAction, getAction} from '@/api/manage' import {validateDuplicateValue} from '@/utils/util' import {getZoneList, getPrintLocation} from '@/api/api' import {getLocationTypeList} from '@/api/api' import VueBarCode from 'vue-barcode' export default { name: 'LocationPrintForm', components: { 'barcode': VueBarCode, }, props: { //表单禁用 disabled: { type: Boolean, default: false, required: false } }, data() { return { dataSource: [], model: {}, labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, confirmLoading: false, zoneList: [], locationTypeList: [], validatorRules: {}, url: { add: "/config/location/add", edit: "/config/location/edit", queryById: "/config/location/queryById" } } }, computed: { formDisabled() { return this.disabled }, }, created() { //备份model原始值 this.modelDefault = JSON.parse(JSON.stringify(this.model)); this.loadFrom(); }, methods: { add() { this.edit(this.modelDefault); }, edit(record) { getPrintLocation(record).then((res) => { if (res.success) { // var data = res.result; this.dataSource = res.result; console.log("getPrintContent!!:" + this.dataSource.length); this.visible = true; } }); }, loadFrom() { getZoneList().then((res) => { if (res.success) { this.zoneList = res.result } }); getLocationTypeList().then((res) => { if (res.success) { this.locationTypeList = res.result } }) }, submitForm() { const that = this; // 触发表单验证 this.$refs.form.validate(valid => { if (valid) { that.confirmLoading = true; let httpurl = ''; let method = ''; if (!this.model.id) { httpurl += this.url.add; method = 'post'; } else { httpurl += this.url.edit; method = 'put'; } httpAction(httpurl, this.model, method).then((res) => { if (res.success) { that.$message.success(res.message); that.$emit('ok'); } else { that.$message.warning(res.message); } }).finally(() => { that.confirmLoading = false; }) } }) }, } } </script> <style> .vue-barcode-element { rotate: -90deg; } </style>