|
|
@ -31,6 +31,9 @@ import type { FormInstance, FormRules, ElNotification } from "element-plus"; |
|
|
import { gainFormPageListCont } from "@/api/DesignForm/requestapi"; |
|
|
import { gainFormPageListCont } from "@/api/DesignForm/requestapi"; |
|
|
import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue"; |
|
|
import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue"; |
|
|
import request from "@/utils/request"; |
|
|
import request from "@/utils/request"; |
|
|
|
|
|
import html2canvas from 'html2canvas'; |
|
|
|
|
|
import JSZip from 'jszip'; |
|
|
|
|
|
import { ElLoading,ElMessage } from 'element-plus' |
|
|
import { softDeletion, retractRunWorkFlow } from "@/api/taskapi/management"; |
|
|
import { softDeletion, retractRunWorkFlow } from "@/api/taskapi/management"; |
|
|
|
|
|
|
|
|
import { formatNumber } from "@/api/DesignForm/utils"; |
|
|
import { formatNumber } from "@/api/DesignForm/utils"; |
|
|
@ -65,6 +68,7 @@ const props = withDefaults( |
|
|
versionid?: string; |
|
|
versionid?: string; |
|
|
versiontitle?: string; |
|
|
versiontitle?: string; |
|
|
viewPage?: viewPageType; |
|
|
viewPage?: viewPageType; |
|
|
|
|
|
formBasicConfig?: any; |
|
|
}>(), |
|
|
}>(), |
|
|
{ |
|
|
{ |
|
|
showPage: true, |
|
|
showPage: true, |
|
|
@ -101,6 +105,9 @@ const props = withDefaults( |
|
|
viewPage: () => { |
|
|
viewPage: () => { |
|
|
return []; |
|
|
return []; |
|
|
}, |
|
|
}, |
|
|
|
|
|
formBasicConfig: () => { |
|
|
|
|
|
return {}; |
|
|
|
|
|
}, |
|
|
} |
|
|
} |
|
|
); |
|
|
); |
|
|
const emits = defineEmits<{ |
|
|
const emits = defineEmits<{ |
|
|
@ -208,6 +215,86 @@ const resetFields = (formEl: FormInstance | undefined) => { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
//20250117 李文轩 二维码表格 |
|
|
|
|
|
const qrCodesPrintDialogFlag = ref(false) |
|
|
|
|
|
let tableRefs = reactive({}); |
|
|
|
|
|
const tablesData = ref({}) |
|
|
|
|
|
function getDetailQrCodes(val:any) { |
|
|
|
|
|
return request({ |
|
|
|
|
|
url: "/javasys/lowCode/QrCode/getDetailQrCodes", |
|
|
|
|
|
method: "post", |
|
|
|
|
|
data: { |
|
|
|
|
|
cfid: props.formId, |
|
|
|
|
|
idArray:val, |
|
|
|
|
|
settings:props.formBasicConfig, |
|
|
|
|
|
}, |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function modifyFieldsMap4(fieldsMap: any): Array<{ key: string, value: string }> { |
|
|
|
|
|
let result: Array<{ key: string, value: string }> = []; |
|
|
|
|
|
// 使用 Object.entries 获取键值对数组，保留原始顺序 |
|
|
|
|
|
for (const [key, value] of Object.entries(fieldsMap)) { |
|
|
|
|
|
let parts = value.split("!@#@!"); |
|
|
|
|
|
if (parts.length === 2) { |
|
|
|
|
|
result.push({ key: parts[0], value: parts[1] }); |
|
|
|
|
|
} else { |
|
|
|
|
|
// 如果格式不符合，可进行错误处理，这里暂时不做处理，直接使用原属性名和属性值 |
|
|
|
|
|
result.push({ key, value }); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
return result; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function downloadTables() { |
|
|
|
|
|
const loadingInstance = ElLoading.service({ |
|
|
|
|
|
fullscreen: true, |
|
|
|
|
|
text: '正在生成图片，请稍候...' // 添加的文字内容，可根据需要修改 |
|
|
|
|
|
}); |
|
|
|
|
|
//ElMessage('This is a message.') |
|
|
|
|
|
const zip = new JSZip(); |
|
|
|
|
|
console.log(tableRefs) |
|
|
|
|
|
for (const [tableKey, element] of Object.entries(tableRefs)) { |
|
|
|
|
|
try { |
|
|
|
|
|
const canvas = await html2canvas(element); |
|
|
|
|
|
const dataUrl = canvas.toDataURL('image/png'); |
|
|
|
|
|
const byteString = atob(dataUrl.split(',')[1]); |
|
|
|
|
|
const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]; |
|
|
|
|
|
const ab = new ArrayBuffer(byteString.length); |
|
|
|
|
|
const ia = new Uint8Array(ab); |
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < byteString.length; i++) { |
|
|
|
|
|
ia[i] = byteString.charCodeAt(i); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const blob = new Blob([ab], { type: mimeString }); |
|
|
|
|
|
zip.file(`${props.formBasicConfig.formName}-${tableKey}.png`, blob); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error(`Error converting ${tableKey} to image:`, error); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
zip.generateAsync({ type: 'blob' }).then(function(content) { |
|
|
|
|
|
const now = new Date(); |
|
|
|
|
|
const formattedDate = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`; |
|
|
|
|
|
const fileName = `${props.formBasicConfig.formName}-${formattedDate}.zip`; |
|
|
|
|
|
|
|
|
|
|
|
const link = document.createElement('a'); |
|
|
|
|
|
link.href = URL.createObjectURL(content); |
|
|
|
|
|
link.download = fileName; |
|
|
|
|
|
loadingInstance.close() |
|
|
|
|
|
link.click(); |
|
|
|
|
|
tableRefs = {} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
function closeQrDownload(){ |
|
|
|
|
|
qrCodesPrintDialogFlag.value = false |
|
|
|
|
|
tableRefs = {} |
|
|
|
|
|
console.log(tableRefs) |
|
|
|
|
|
} |
|
|
/** |
|
|
/** |
|
|
@ 作者: 秦东 |
|
|
@ 作者: 秦东 |
|
|
@ 时间: 2024-04-01 11:36:07 |
|
|
@ 时间: 2024-04-01 11:36:07 |
|
|
@ -219,8 +306,42 @@ const setUpClick = (val: string, id: string) => { |
|
|
drawerWith.value = container.value?.clientWidth; |
|
|
drawerWith.value = container.value?.clientWidth; |
|
|
openTaskDrawer.value = true; |
|
|
openTaskDrawer.value = true; |
|
|
} else if(val.key == "showQrCode"){ |
|
|
} else if(val.key == "showQrCode"){ |
|
|
//alert(val) |
|
|
//liwenxuan 20250114 二维码打印弹窗 start |
|
|
console.log(idList) |
|
|
//在此组装参数,以生成二维码图片 |
|
|
|
|
|
|
|
|
|
|
|
let idArray = state.selectionChecked.map(item => item.id); |
|
|
|
|
|
if(idArray.length>0){ |
|
|
|
|
|
//console.log(props.formBasicConfig) |
|
|
|
|
|
//请求数据 |
|
|
|
|
|
getDetailQrCodes(idArray).then(({ data }) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(props.formBasicConfig.qrCodePrintStyle&&props.formBasicConfig.qrCodePrintStyle=="2"){ |
|
|
|
|
|
|
|
|
|
|
|
for (let key in data) { |
|
|
|
|
|
if (data.hasOwnProperty(key)) { |
|
|
|
|
|
let currentFieldsMap = data[key].fieldsMap |
|
|
|
|
|
data[key].fieldsMap = modifyFieldsMap4(currentFieldsMap) |
|
|
|
|
|
//data[key].bufferedImage = "" |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
tablesData.value = data |
|
|
|
|
|
//console.log(qrCodesPrintDialogData.value) |
|
|
|
|
|
qrCodesPrintDialogFlag.value = true |
|
|
|
|
|
}else if(props.formBasicConfig.qrCodePrintStyle&&props.formBasicConfig.qrCodePrintStyle=="1"){ |
|
|
|
|
|
//fieldsMap = null |
|
|
|
|
|
qrCodesPrintDialogFlag.value = true |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
}else{ |
|
|
|
|
|
alert("未选中任何一条,请先选择") |
|
|
|
|
|
} |
|
|
|
|
|
//liwenxuan 20250114 二维码打印弹窗 end |
|
|
|
|
|
|
|
|
}else { |
|
|
}else { |
|
|
if (idList.value.length > 0) { |
|
|
if (idList.value.length > 0) { |
|
|
ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", { |
|
|
ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", { |
|
|
@ -1510,6 +1631,46 @@ const diGuiJilian = (val: any, options: any[]) => { |
|
|
:drawerwith="drawerWith" |
|
|
:drawerwith="drawerWith" |
|
|
@searchquery="getListData" |
|
|
@searchquery="getListData" |
|
|
/> |
|
|
/> |
|
|
|
|
|
<!-- 2025 liwenxuan 二维码打印 --> |
|
|
|
|
|
<el-dialog |
|
|
|
|
|
v-model="qrCodesPrintDialogFlag" |
|
|
|
|
|
class="glxxsztc" |
|
|
|
|
|
top="150px" |
|
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
|
title="生成的二维码" |
|
|
|
|
|
:show-close="false" |
|
|
|
|
|
style="margin-top: 10px" |
|
|
|
|
|
width="50%" |
|
|
|
|
|
> |
|
|
|
|
|
<div v-if="formBasicConfig.qrCodePrintStyle == '2'" style="min-height: 50px; max-height: 750px; overflow-y: auto"> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="(tableData, tableKey) in tablesData" |
|
|
|
|
|
:id="tableKey" |
|
|
|
|
|
:key="tableKey" |
|
|
|
|
|
:ref="(el: any) => { if (el) tableRefs[tableKey] = el }" |
|
|
|
|
|
style="margin-bottom: 30px; width: 95%;" |
|
|
|
|
|
> |
|
|
|
|
|
<table> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th style="font-weight: bold; font-size:medium;" colspan="2">{{ tableData.groupName }}-{{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}-{{ tableKey }}</th> |
|
|
|
|
|
<th rowspan="6"><img :src="tableData.bufferedImage" alt="二维码" width="auto" height="100%"></th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
<tr v-for="(item, fIndex) in tableData.fieldsMap" :key="fIndex"> |
|
|
|
|
|
<th>{{ item.key }}</th> |
|
|
|
|
|
<td>{{ item.value }}</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</table> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<template #footer> |
|
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
|
<!-- <el-button type="primary" plain @click="downloadTables">下载</el-button> --> |
|
|
|
|
|
<el-button type="primary" plain @click="closeQrDownload"> |
|
|
|
|
|
确定 |
|
|
|
|
|
</el-button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
<el-dialog |
|
|
<el-dialog |
|
|
v-model="asfShowDetailsFlag" |
|
|
v-model="asfShowDetailsFlag" |
|
|
@ -1591,4 +1752,15 @@ const diGuiJilian = (val: any, options: any[]) => { |
|
|
.demo-image__error .image-slot .el-icon { |
|
|
.demo-image__error .image-slot .el-icon { |
|
|
font-size: 30px; |
|
|
font-size: 30px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
|
|
|
|
|
|
table { |
|
|
|
|
|
border-collapse: collapse; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
td, th { |
|
|
|
|
|
border: 1px solid black; |
|
|
|
|
|
padding: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
hreenshan112
10 months ago