<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"> <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="10" :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} from '@/api/api' import {getContainerTypeList, getPrintContainer} from '@/api/api' import VueBarCode from 'vue-barcode' export default { name: 'ContainerPrintForm', components: { 'barcode': VueBarCode, }, props: { //表单禁用 disabled: { type: Boolean, default: false, required: false } }, data() { return { model: {}, dataSource: [], labelCol: { xs: {span: 24}, sm: {span: 5}, }, wrapperCol: { xs: {span: 24}, sm: {span: 16}, }, confirmLoading: false, zoneList: [], containerTypeList: [], url: { add: "/config/container/add", edit: "/config/container/edit", queryById: "/config/container/queryById" } } }, computed: { formDisabled() { return this.disabled }, }, created() { //备份model原始值 this.model.status = "empty"; this.modelDefault = JSON.parse(JSON.stringify(this.model)); this.loadFrom(); }, methods: { add() { this.edit(this.modelDefault); }, edit(record) { // this.model = Object.assign({}, this.modelDefault); getPrintContainer(record).then((res) => { if (res.success) { // var data = res.result; console.log("getPrintContent:" + 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 } }); getContainerTypeList().then((res) => { if (res.success) { this.containerTypeList = 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> /*.qrCode div{*/ /* margin-top: "100";*/ /*}*/ .vue-barcode-element { rotate: -90deg; } </style>