Browse Source

Fix 修复二维码组件导致打包报错的问题,更换为Vue3NextQrcode组件

Yue 4 weeks ago
parent
commit
df9ace1c04

+ 1 - 1
UI/VB.VUE/package.json

@@ -47,8 +47,8 @@
 		"vue-cropper": "1.0.3",
 		"vue-i18n": "^9.12.1",
 		"vue-json-pretty": "2.4.0",
-		"vue-qr": "^4.0.9",
 		"vue-router": "^4.2.4",
+		"vue3-next-qrcode": "^3.1.0",
 		"vue3-treeselect-ts": "^0.0.4",
 		"vxe-table": "4.5.22",
 		"zeebe-bpmn-moddle": "1.0.0"

+ 9 - 8
UI/VB.VUE/src/views/device/inspection/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts" name="InspectionRule">
 import apis from "@a"
 import dayjs from "dayjs"
-import vueQr from "vue-qr/src/packages/vue-qr.vue"
 import CheckinLog from "./_checkinLog.vue"
+import { Vue3NextQrcode } from "vue3-next-qrcode"
+
 const tableRef = ref()
 const modalRef = ref()
 const opts = reactive({
@@ -277,7 +278,8 @@ const qrModalData = ref()
 const qrCode = ref({
 	logo: "/media/logo.png",
 	size: 300,
-	colorDark: "#0e9489",
+	// colorDark: "#0095e8",
+	colorDark: "#000000",
 	text: ""
 })
 function handleQrCode(row) {
@@ -446,14 +448,13 @@ function handleLogs(row: any) {
 					id="qr"
 					class="w-100 w-100 d-flex flex-column justify-content-center align-items-center">
 					<span class="fs-5 fw-bold my-5 qr-title">{{ qrModalData?.taskName }} 签到二维码</span>
-					<vue-qr
+					<Vue3NextQrcode
 						:text="qrCode.text"
-						:size="200"
-						:logoSrc="qrCode.logo"
-						:logoCornerRadius="`50%`"
+						:size="qrCode.size"
 						:color-dark="qrCode.colorDark"
-						:width="qrCode.size"
-						:height="qrCode.size"></vue-qr>
+						:logo-image="qrCode.logo"
+						:logo-scale="0.2"
+						:margin="20" />
 				</div>
 				<div class="text-center">
 					<el-button type="primary" class="mx-5 w-150px" @click="handleDownloadQr('qr')">

+ 7 - 8
UI/VB.VUE/src/views/experiment/sample/_sample.vue

@@ -2,7 +2,6 @@
 import apis from "@a"
 import dayjs from "dayjs"
 import ChickenModal from "@v/common/modal/chickenModal.vue"
-import vueQr from "vue-qr/src/packages/vue-qr.vue"
 import type { ToolBtn } from "@@@/table/models"
 import EDetail from "../experiment/_detail.vue"
 
@@ -349,7 +348,8 @@ const qrModalData = ref()
 const qrCode = ref({
 	logo: "/media/logo.png",
 	size: 300,
-	colorDark: "#0e9489",
+	// colorDark: "#0e9489",
+	colorDark: "#000000",
 	text: ""
 })
 function handleQrCode(row) {
@@ -574,14 +574,13 @@ function handlePreviewPdf(file: string) {
 					id="qr"
 					class="w-100 w-100 d-flex flex-column justify-content-center align-items-center">
 					<span class="fs-5 fw-bold my-5 qr-title">{{ qrModalData?.sampleName }} 样品二维码</span>
-					<vue-qr
+					<Vue3NextQrcode
 						:text="qrCode.text"
-						:size="200"
-						:logoSrc="qrCode.logo"
-						:logoCornerRadius="`50%`"
+						:size="qrCode.size"
 						:color-dark="qrCode.colorDark"
-						:width="qrCode.size"
-						:height="qrCode.size"></vue-qr>
+						:logo-image="qrCode.logo"
+						:logo-scale="0.2"
+						:margin="20" />
 				</div>
 				<div class="text-center">
 					<el-button type="primary" class="mx-5 w-150px" @click="handleDownloadQr('qr')">