feat(front):生成二维码;

jnpf-java-boot/jnpf-web/src/views/scm/parkequipment/form.vue

@@ -17,8 +17,7 @@
                                     {{ '下一条' }}
                                 </el-dropdown-item>
                             </template>
-                            <el-dropdown-item type="primary" @click.native="dataFormSubmit(2)"
-                                :loading="continueBtnLoading" :disabled='btnLoading'>
+<el-dropdown-item type="primary" @click.native="dataFormSubmit(2)" :loading="continueBtnLoading" :disabled='btnLoading'>
     {{ !dataForm.id ? '确定并新增' : '确定并继续' }}</el-dropdown-item>
 </el-dropdown-menu>
 </el-dropdown> -->
@@ -199,6 +198,17 @@
                                 </JnpfInput>
                             </jnpf-form-tip-item>
                         </el-col>
+
+                        <el-col :span="8">
+                            <el-form label-width="100px">
+                                <jnpf-form-tip-item label="生成二维码">
+                                    <el-button type="primary" @click="getQRimg"> 生成</el-button>
+                                </jnpf-form-tip-item>
+                                <el-form-item label="二维码图像">
+                                    <div id="qrcode" ref="qrCode"></div>
+                                </el-form-item>
+                            </el-form>
+                        </el-col>
                         <!-- 表单结束 -->
                     </template>
                 </el-form>
@@ -219,11 +229,15 @@ import { getDefaultCurrentValueUserId } from '@/api/permission/user'
 import { getDefaultCurrentValueDepartmentId } from '@/api/permission/organize'
 import { getDateDay, getLaterData, getBeforeData, getBeforeTime, getLaterTime } from '@/components/Generator/utils/index.js'
 import { thousandsFormat } from "@/components/Generator/utils/index"
+import QRCode from 'qrcodejs2'
+import JsBarcode from 'jsbarcode'
 export default {
     components: {},
     props: [],
     data() {
         return {
+            qrcode: '',
+            barcode: "",
             dataFormSubmitType: 0,
             continueBtnLoading: false,
             index: 0,
@@ -417,6 +431,46 @@ export default {
     },
     mounted() { },
     methods: {
+        getQRimg() {
+            if (this.dataForm.equipmentCoding == null || this.dataForm.deviceName == null ||
+                this.dataForm.equipmentType == null || this.dataForm.equipmentBrand == null || this.dataForm.spaceId == null) {
+                this.$message.error('请完善设备必填信息');
+                return
+            }
+            let qrCodeJsonString = JSON.stringify(this.dataForm);
+            this.qrcode = qrCodeJsonString;
+            if (!this.qrcode) {
+                return
+            }
+            this.$refs.qrCode.innerHTML = "";
+            let qrcode = new QRCode(this.$refs.qrCode, {
+                width: 265,
+                height: 265, // 高度
+                text: this.qrcode, // 二维码内容
+                // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
+                // background: '#f0f'
+                // foreground: '#ff0'
+                correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
+            })
+        },
+        getBarcode() {
+            let reg = /^[A-Za-z0-9]+$/
+            if (!reg.test(this.barcode)) {
+                this.$message({
+                    message: '请输入数字或者英文字母',
+                    type: 'error',
+                    duration: 1500,
+                })
+                return
+            }
+            JsBarcode("#barcode", this.barcode, {
+                // format: "pharmacode",
+                // lineColor: "#0aa",
+                width: 4,
+                height: 80,
+                displayValue: false
+            });
+        },
         spaceChange(var1, var2) {
             this.dataForm.spaceName = var2.name;
             this.dataForm.regionId = var2.pid;