第十一章数据仓库和商务智能10分

一、安装

在前端项目工程目录，远端执行如下命令

// 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>