|
|
@@ -65,25 +65,25 @@ const opts = reactive({
|
|
|
{ field: "sampleStatus", name: "样品状态", visible: true, isSort: false, width: 120 },
|
|
|
{ field: "actions", name: `操作`, width: 150 }
|
|
|
] as any[],
|
|
|
- queryParams: {
|
|
|
- sampleName: undefined,
|
|
|
- batchId: undefined,
|
|
|
- chickenId: undefined,
|
|
|
- electronicId: undefined,
|
|
|
- description: undefined,
|
|
|
- sampleType: undefined,
|
|
|
- sampleStatus: props.status
|
|
|
- },
|
|
|
- searchFormItems: [
|
|
|
- {
|
|
|
- field: "sampleName",
|
|
|
- label: "样本名称",
|
|
|
- class: "w-100",
|
|
|
- required: false,
|
|
|
- placeholder: "请输入样本名称",
|
|
|
- component: "I",
|
|
|
- listeners: {
|
|
|
- keyup: (e: KeyboardEvent) => {
|
|
|
+ queryParams: {
|
|
|
+ sampleName: undefined,
|
|
|
+ batchId: undefined,
|
|
|
+ chickenId: undefined,
|
|
|
+ electronicId: undefined,
|
|
|
+ description: undefined,
|
|
|
+ sampleType: undefined,
|
|
|
+ sampleStatus: props.status
|
|
|
+ },
|
|
|
+ searchFormItems: [
|
|
|
+ {
|
|
|
+ field: "sampleName",
|
|
|
+ label: "样本名称",
|
|
|
+ class: "w-100",
|
|
|
+ required: false,
|
|
|
+ placeholder: "请输入样本名称",
|
|
|
+ component: "I",
|
|
|
+ listeners: {
|
|
|
+ keyup: (e: KeyboardEvent) => {
|
|
|
if (e.code == "Enter") {
|
|
|
handleQuery()
|
|
|
}
|
|
|
@@ -359,12 +359,29 @@ function handleQrCode(row) {
|
|
|
qrModalRef.value.show()
|
|
|
}
|
|
|
function handleDownloadQr(id: string) {
|
|
|
- let myImg = document.querySelector("#" + id) as HTMLImageElement
|
|
|
- let url = myImg?.src
|
|
|
- let a = document.createElement("a")
|
|
|
- a.href = url
|
|
|
- a.download = `${qrModalData.value.taskName}签到二维码`
|
|
|
- a.click()
|
|
|
+ // 获取整个元素，包括标题和二维码
|
|
|
+ const element = document.querySelector("#" + id) as HTMLElement
|
|
|
+ if (!element) return
|
|
|
+
|
|
|
+ // 使用html2canvas将整个元素转换为图片
|
|
|
+ import("html2canvas").then((html2canvas) => {
|
|
|
+ html2canvas.default(element).then((canvas) => {
|
|
|
+ // 将canvas转换为图片blob
|
|
|
+ canvas.toBlob((blob) => {
|
|
|
+ if (!blob) return
|
|
|
+
|
|
|
+ // 创建下载链接
|
|
|
+ const url = URL.createObjectURL(blob)
|
|
|
+ const a = document.createElement("a")
|
|
|
+ a.href = url
|
|
|
+ a.download = `${qrModalData.value.sampleName}样品二维码`
|
|
|
+ document.body.appendChild(a)
|
|
|
+ a.click()
|
|
|
+ document.body.removeChild(a)
|
|
|
+ URL.revokeObjectURL(url)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const detailRef = ref()
|
|
|
@@ -571,19 +588,21 @@ function handlePreviewPdf(file: string) {
|
|
|
:close-btn-class="'btn btn-danger'"
|
|
|
append-to-body>
|
|
|
<template #body>
|
|
|
- <div
|
|
|
- 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>
|
|
|
- <Vue3NextQrcode
|
|
|
- :text="qrCode.text"
|
|
|
- :size="qrCode.size"
|
|
|
- :color-dark="qrCode.colorDark"
|
|
|
- :logo-image="qrCode.logo"
|
|
|
- :logo-scale="0.15"
|
|
|
- :logo-margin="0"
|
|
|
- :logo-corner-radius="20"
|
|
|
- :margin="20" />
|
|
|
+ <div class="w-100 d-flex justify-content-center align-items-center">
|
|
|
+ <div id="qr" class="d-flex flex-column align-items-center">
|
|
|
+ <span class="fs-5 fw-bold mt-5 mb-0 qr-title">
|
|
|
+ {{ qrModalData?.sampleName }} 样品二维码
|
|
|
+ </span>
|
|
|
+ <Vue3NextQrcode
|
|
|
+ :text="qrCode.text"
|
|
|
+ :size="qrCode.size"
|
|
|
+ :color-dark="qrCode.colorDark"
|
|
|
+ :logo-image="qrCode.logo"
|
|
|
+ :logo-scale="0.15"
|
|
|
+ :logo-margin="0"
|
|
|
+ :logo-corner-radius="20"
|
|
|
+ :margin="20" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="text-center">
|
|
|
<el-button type="primary" class="mx-5 w-150px" @click="handleDownloadQr('qr')">
|
