一、安装
在前端项目工程目录,远端执行如下命令
// npm
npm install vue-qr --save
// yarn
yarn add vue-qr
二、引入组件
在main.js文件中增加如下的内容
// vue2.x
import VueQr from 'vue-qr'
//注册组件
Vue.component('VueQr', VueQr)
// vue3.x
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
三、使用方法
功能一:生成二维码
<template>
<div class="dynamic-qrCode-container">
<div class="dynamic-operate">
<el-input
class="common-input input-qrCode"
v-model="text"
></el-input>
<el-button type="primary" class="common-button" @click="handleQrCode(1)">生成普通二维码</el-button>
<el-button type="primary" class="common-button" @click="handleQrCode(2)">生成带logo二维码</el-button>
<el-button type="primary" class="common-button" @click="handleQrCode(3)">生成随机颜色二维码</el-button>
<el-button type="primary" class="common-button" @click="handleQrCode(4)">下载二维码</el-button>
</div>
<vue-qr
ref="qrCode"
:text="text"
:logoSrc="logoSrc"
:color-dark="randomColor"
:callback="qrCodeCallback"
width="100"
height="100"
></vue-qr>
</div>
</template>
<el-table-column label="条码格式" align="center">
<template slot-scope="scope">
<vue-qr ref="qrCode" :text="mytext" width="100" height="100"></vue-qr>
</template>
</el-table-column>
参数说明:
text:二维码的内容,即扫出来的结果。
logoSrc:嵌入二维码中心的logo图片地址。
color-dark:实点的颜色,即有色部分。修改该值可改变实点的颜色,即二维码整体展示的颜色。
callback:生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
import VueQr from 'vue-qr'
import logo from '@/assets/image/logo.png'
import { getColor } from '@/utils/index.js'
export default {
name: 'dynamicQrCode',
components:{
VueQr,
},
data(){
return{
text: 'https://zhuanlan.zhihu.com/p/427065468',
logoSrc: '',
randomColor: 'black',
qrCodeUrl: '', // 存放生成的二维码url
}
},
methods:{
qrCodeCallback(url){
this.qrCodeUrl = url
},
handleQrCode(type){
switch (type){
case 1:
this.randomColor = 'black'
this.logoSrc = ''
break
case 2:
this.logoSrc = logo
break
case 3:
this.randomColor = getColor()
break
case 4:
let name = new Date().getTime();
let a = document.createElement("a");
a.style.display = "none";
a.download = name;
a.href = this.qrCodeUrl;
document.body.appendChild(a);
a.click();
a.remove()
break
}
},
}
}
生成随机颜色
// 生成随机颜色
export function getColor() {
var str = '#'
var arr = ['1', '2', '3', '4', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (var i = 0; i < 6; i++) {
var num = parseInt(Math.random() * 16)
str += arr[num]
}
return str
}
效果图
功能二:打印二维码
该功能需要用到vue-print-nb打印插件,需先安装插件。该插件的安装及使用可以看一下这篇文章(插入链接)。
实现勾选表格的数据,用表格的selection-change事件,当勾选的数据发生变化时,实时获取到已勾选的数据。
<div class="print-qrCode-container">
<div class="button-operate">
<el-button
:type="buttonType"
class="common-button plain-button"
@click="handleLogo"
:class="showLogo ? 'success-button': ''"
>
<i class="iconfont com-icon icon-check-empty"></i>
<span>带logo</span>
</el-button>
<el-button type="primary" class="common-button" v-print="'#printQrCode'">
<i class="iconfont com-icon icon-printer"></i>
<span>打印二维码</span>
</el-button>
</div>
<div class="url-container">
<el-table
:data="tableData"
height="calc(100vh - 280px)"
border
@selection-change="onChange"
<el-table-column type="selection" align="center" width="55">
</el-table-column>
<el-table-column label="文章编号" prop="order"></el-table-column>
<el-table-column label="文章描述" prop="decs"></el-table-column>
<el-table-column label="分栏类型" prop="programSort"></el-table-column>
<el-table-column label="创作类型" prop="produceSort"></el-table-column>
<el-table-column label="可见范围" prop="visibleRange"></el-table-column>
<el-table-column label="文章热度" prop="hot" width="100"></el-table-column>
</el-table>
</div>
</div>
onChange事件,勾选行,赋值给printQrCode
onChange(val){
this.printQrCode = val
},
存放已勾选的数据生成的二维码
<div class="qrCode-container">
<div id="printQrCode">
<div
v-for="item in printQrCode"
class="qrCode-content"
>
<vue-qr
ref="qrCode"
:text="item.url"
:logoSrc="showLogo ? item.logo : ''"
size="400"
></vue-qr>
</div>
</div>
</div>
这里不希望在页面上显示已生成的二维码
.qrCode-container{
width: 0;
height: 0;
overflow: hidden;
}
在打印时希望,一张纸只打印一个二维码,使用样式page-break-after: always
.qrCode-content{
margin-top: 200px;
margin-left: 160px;
page-break-after:always
}
打印二维码不带logo的效果图
打印二维码带logo的效果图
前端(若依-vue2版本)实现生成二维码,并提供下载功能_若依 微信小程序二维码-CSDN博客
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="条码类型" prop="barcodeType">
<el-select v-model="queryParams.barcodeType" placeholder="请选择条码类型">
<el-option v-for="dict in dict.type.mes_barcode_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="业务编码" prop="bussinessCode">
<el-input v-model="queryParams.bussinessCode" placeholder="请输入业务编码" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="业务名称" prop="bussinessName">
<el-input v-model="queryParams.bussinessName" placeholder="请输入业务名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['mes:wm:barcode:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
v-hasPermi="['mes:wm:barcode:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" icon="el-icon-s-tools" size="mini" @click="handleConfig"
v-hasPermi="['mes:wm:barcode:edit']">条码设置</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-printer" size="mini" @click="handleBatchPrint"
v-hasPermi="['mes:wm:barcode:view']">批量打印</el-button>
</el-col>
<Barcodeconfig ref="barcodeconfig"></Barcodeconfig>
<BarcodeBatchPrint ref="barcodebatchprint"></BarcodeBatchPrint>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="barcodeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="条码" align="center">
<template slot-scope="scope">
<el-image @click="handleView(scope.row)" class="barcodeClass" fit="scale-down" :src="scope.row.barcodeUrl">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column label="条码格式" align="center">
<template slot-scope="scope">
<vue-qr ref="qrCode" :text="mytext" width="100" height="100"></vue-qr>
</template>
</el-table-column>
<el-table-column label="条码格式" align="center">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="onItemClick(scope.row)">打开二维码
</el-button>
</template>
</el-table-column>
<el-table-column label="条码格式" align="center" prop="barcodeFormart">
<template slot-scope="scope">
<dict-tag :options="dict.type.mes_barcode_formart" :value="scope.row.barcodeFormart" />
</template>
</el-table-column>
<el-table-column label="条码类型" align="center" prop="barcodeType">
<template slot-scope="scope">
<dict-tag :options="dict.type.mes_barcode_type" :value="scope.row.barcodeType" />
</template>
</el-table-column>
<el-table-column label="条码内容" align="center" prop="barcodeContent" />
<el-table-column label="业务编码" align="center" prop="bussinessCode" />
<el-table-column label="业务名称" align="center" prop="bussinessName" />
<el-table-column label="是否生效" align="center" prop="enableFlag">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['mes:wm:barcode:edit']">编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['mes:wm:barcode:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改条码清单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="条码格式" prop="barcodeFormart">
<el-select v-model="form.barcodeFormart" placeholder="请选择条码格式">
<el-option v-for="dict in dict.type.mes_barcode_formart" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="条码类型" prop="barcodeType">
<el-select v-model="form.barcodeType" placeholder="请选择条码类型">
<el-option v-for="dict in dict.type.mes_barcode_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否启用">
<el-radio-group v-model="form.enableFlag" disabled v-if="optType == 'view'">
<el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio>
</el-radio-group>
<el-radio-group v-model="form.enableFlag" v-else>
<el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label
}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<!--根据不同的条码类型展示不同的业务内容选择 start-->
<!--物料产品-->
<el-row v-if="form.barcodeType == 'ITEM'">
<el-col :span="12">
<el-form-item label="物料编码" prop="bussinessCode">
<el-input v-model="form.bussinessCode" readonly="readonly" placeholder="请选择物料编码">
<el-button slot="append" @click="handleSelectProduct" icon="el-icon-search"></el-button>
</el-input>
</el-form-item>
<ItemSelect ref="itemSelect" @onSelected="onItemSelected"> </ItemSelect>
</el-col>
<el-col :span="12">
<el-form-item label="物料名称" prop="bussinessName">
<el-input v-model="form.bussinessName" readonly="readonly" />
</el-form-item>
</el-col>
</el-row>
<!--仓库-->
<el-row v-if="form.barcodeType == 'WAREHOUSE'">
<el-col :span="24">
<el-form-item label="储位" prop="warehouseId">
<!-- <el-cascader v-model="warehouseInfo"
:options="warehouseOptions"
:props="warehouseProps"
@change="handleWarehouseChanged"
>
</el-cascader> -->
<el-cascader v-model="warehouseInfo" ref="warehouseRef" :options="warehouseOptions" :props="warehouseProps"
@change="handleWarehouseChanged">
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<!--箱条码-->
<el-row v-if="form.barcodeType == 'BOX'">
<el-col :span="12">
<el-form-item label="装箱单号" prop="packageCode">
<el-input v-model="form.bussinessCode" readonly="readonly" placeholder="请选择装箱单">
<el-button slot="append" @click="handleSelectPackage" icon="el-icon-search"></el-button>
</el-input>
</el-form-item>
<PackageSelectSingle ref="packageSelect" :status="'FINISHED'" @onSelected="onPackageSelected">
</PackageSelectSingle>
</el-col>
<el-col :span="12">
<el-form-item label="客户名称" prop="bussinessName">
<el-input v-model="form.bussinessName" readonly="readonly" />
</el-form-item>
</el-col>
</el-row>
<!--供应商-->
<el-row v-else-if="form.barcodeType == 'VENDOR'">
<el-col :span="12">
<el-form-item label="供应商编号" prop="bussinessCode">
<el-input v-model="form.bussinessCode" readonly="readonly" placeholder="请选择供应商">
<el-button slot="append" @click="handleSelectVendor" icon="el-icon-search"></el-button>
</el-input>
<VendorSelect ref="vendorSelect" @onSelected="onVendorSelected" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商名称" prop="bussinessName">
<el-input v-model="form.bussinessName" readonly="readonly">
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 工作站 -->
<el-row v-else-if="form.barcodeType == 'WORKSTATION'">
<el-col :span="12">
<el-form-item label="工作站" prop="bussinessCode">
<el-input v-model="form.bussinessCode" placeholder="请选择工作站">
<el-button slot="append" icon="el-icon-search" @click="handleWorkstationSelect"></el-button>
</el-input>
</el-form-item>
<WorkstationSelect ref="wsSelect" @onSelected="onWorkstationSelected"> </WorkstationSelect>
</el-col>
<el-col :span="12">
<el-form-item label="工作站名称" prop="bussinessName">
<el-input v-model="form.bussinessName" readonly="readonly">
</el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 库存 -->
<el-row v-else-if="form.barcodeType == 'STOCK'">
<el-col :span="8">
<el-form-item label="物资编码" prop="bussinessCode">
<el-input v-model="form.bussinessCode" placeholder="请选择库存记录">
<el-button slot="append" icon="el-icon-search" @click="handleMaterialStockSelect"></el-button>
</el-input>
</el-form-item>
<StockSelect ref="stockSelect" @onSelected="onMaterialStockSelected"> </StockSelect>
</el-col>
<el-col :span="16">
<el-form-item label="物资信息" prop="bussinessName">
<el-input v-model="form.bussinessName" readonly="readonly"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--根据不同的条码类型展示不同的业务内容选择 end-->
<el-row>
<el-col :span="24">
<el-form-item label="条码内容">
<el-input v-model="form.barcodeContent" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="条码" prop="url">
<el-image class="barcodeFormClass" :src="form.barcodeUrl">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel" v-if="optType == 'view'">返回</el-button>
<el-button type="primary" @click="submitForm" v-if="optType != 'view'">保 存</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 二维码弹窗 -->
<el-dialog :title="title" :visible.sync="show" width="500px" append-to-body>
<div style="justify-content: center;align-items: center;display: flex;" >
<vue-qr ref="qrCode" :text="mytext" width="100" height="100"></vue-qr>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" >下 载</el-button>
<el-button >取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listBarcode, getBarcode, delBarcode, addBarcode, updateBarcode } from "@/api/mes/wm/barcode";
import ItemSelect from "@/components/itemSelect/single.vue";
import VendorSelect from "@/components/vendorSelect/single.vue";
import PackageSelectSingle from "@/components/package/single.vue";
import WorkstationSelect from "@/components/workstationSelect/simpletableSingle.vue"
import StockSelect from "@/components/stockSelect/single.vue"
import Barcodeconfig from "./config.vue"
import BarcodeBatchPrint from "./batchprint.vue"
import { getTreeList } from "@/api/mes/wm/warehouse"
import VueQr from 'vue-qr'
export default {
name: "Barcode",
dicts: ['mes_barcode_type', 'mes_barcode_formart', 'sys_yes_no'],
components: {
ItemSelect, VendorSelect, PackageSelectSingle, Barcodeconfig, WorkstationSelect, StockSelect, BarcodeBatchPrint
},
data() {
return {
warehouseInfo: [],
warehouseOptions: [],
warehouseProps: {
multiple: false,
value: 'pId',
label: 'pName',
},
optType: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 条码清单表格数据
barcodeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
mytext: "123",
show:false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
barcodeFormart: null,
barcodeType: null,
barcodeContent: null,
bussinessId: null,
bussinessCode: null,
bussinessName: null,
barcodeUrl: null,
enableFlag: null
},
// 表单参数
form: {},
// 表单校验
rules: {
barcodeFormart: [
{ required: true, message: "条码格式不能为空", trigger: "blur" }
],
barcodeType: [
{ required: true, message: "条码类型不能为空", trigger: "change" }
],
barcodeContent: [
{ required: true, message: "产品物料ID不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getList();
this.getWarehouseList();
},
methods: {
/** 查询条码清单列表 */
getList() {
this.loading = true;
listBarcode(this.queryParams).then(response => {
this.barcodeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
barcodeId: null,
barcodeFormart: null,
barcodeType: null,
barcodeContent: null,
bussinessId: null,
bussinessCode: null,
bussinessName: null,
barcodeUrl: null,
enableFlag: 'Y',
remark: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
//生成二维码
onItemClick(row) {
console.log(row);
this.show = true;
this.title = '二维码';
this.mytext=row.barcodeContent;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.barcodeId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加条码";
this.optType = "add";
},
handleView(row) {
this.reset();
const barcodeId = row.barcodeId
getBarcode(barcodeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "查看条码";
this.optType = "view";
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const barcodeId = row.barcodeId || this.ids
getBarcode(barcodeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改条码";
this.optType = "edit";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.barcodeId != null) {
updateBarcode(this.form).then(response => {
console.log(response);
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addBarcode(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const barcodeIds = row.barcodeId || this.ids;
this.$modal.confirm('是否确认删除条码清单编号为"' + barcodeIds + '"的数据项?').then(function () {
return delBarcode(barcodeIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('wm/barcode/export', {
...this.queryParams
}, `barcode_${new Date().getTime()}.xlsx`)
},
//物料选择
handleSelectProduct() {
this.$refs.itemSelect.showFlag = true;
},
//物料选择弹出框
onItemSelected(obj) {
if (obj != undefined && obj != null) {
this.form.bussinessId = obj.itemId;
this.form.bussinessCode = obj.itemCode;
this.form.bussinessName = obj.itemName;
this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);
}
},
//选择仓库、库区、库位
getWarehouseList() {
getTreeList().then(response => {
if (response.data) {
this.warehouseOptions = response.data.filter((el) => {
return el.warehouseCode.indexOf('VIR') == -1;
});;
}
this.warehouseOptions.map(w => {
debugger;
w.children.map(l => {
let lstr = JSON.stringify(l.children).replace(/locationId/g, 'lId').replace(/areaId/g, 'pId').replace(/areaName/g, 'pName');
l.children = JSON.parse(lstr);
});
let wstr = JSON.stringify(w.children).replace(/warehouseId/g, 'wId').replace(/locationId/g, 'pId').replace(/locationName/g, 'pName');
w.children = JSON.parse(wstr);
});
let ostr = JSON.stringify(this.warehouseOptions).replace(/warehouseId/g, 'pId').replace(/warehouseName/g, 'pName');
this.warehouseOptions = JSON.parse(ostr);
debugger;
});
},
handleWarehouseChanged(obj) {
debugger;
const checkedNode = this.$refs['warehouseRef'].getCheckedNodes();
if (obj != null) {
this.form.bussinessId = checkedNode[0].data.pId;
this.form.bussinessCode = checkedNode[0].data.areaCode;
this.form.bussinessName = checkedNode[0].data.pName;
this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);
}
},
//装箱单选择
handleSelectPackage() {
this.$refs.packageSelect.showFlag = true;
},
/**选择装箱单返回 */
onPackageSelected(obj) {
if (obj != undefined && obj != null) {
this.form.bussinessId = obj.packageId;
this.form.bussinessCode = obj.packageCode;
this.form.bussinessName = obj.clientName;
this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);
}
},
/**选择工作站 */
handleWorkstationSelect() {
this.$refs.wsSelect.showFlag = true;
},
/**工作站选择返回 */
onWorkstationSelected(obj) {
if (obj != undefined && obj != null) {
this.form.bussinessId = obj.workstationId;
this.form.bussinessCode = obj.workstationCode;
this.form.bussinessName = obj.workstationName;
this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessCode);
}
},
/**
* 选择库存
*/
handleMaterialStockSelect() {
this.$refs.stockSelect.showFlag = true;
},
/**库存选择返回 */
onMaterialStockSelected(obj) {
if (obj != undefined && obj != null) {
this.form.bussinessId = obj.materialStockId;
this.form.bussinessCode = obj.itemCode;
this.form.bussinessName = "".concat(obj.itemName, '|', obj.specification, '|', obj.vendorName, '|', obj.batchCode);
this.form.barcodeContent = "".concat(this.form.barcodeType, '-', this.form.bussinessId);
}
},
handleConfig() {
this.$refs.barcodeconfig.showFlag = true;
},
handleBatchPrint() {
this.$refs.barcodebatchprint.showFlag = true;
}
}
};
</script>
<style scoped>
.barcodeClass {
width: 100px;
height: 200px;
}
.barcodeFormClass {
width: 200px;
height: 200px;
}
</style>