diff --git a/package.json b/package.json index 7dc2d75..87ba042 100644 --- a/package.json +++ b/package.json @@ -56,9 +56,11 @@ "echarts": "^5.4.3", "element-plus": "^2.3.4", "font-awesome": "^4.7.0", + "html2canvas": "^1.4.1", "jquery": "^3.7.1", "js-beautify": "^1.14.8", "js-md5": "^0.7.3", + "jszip": "^3.10.1", "mapv-three": "^1.0.18", "md5": "^2.3.0", "nprogress": "^0.2.0", diff --git a/src/api/DesignForm/tableButton.ts b/src/api/DesignForm/tableButton.ts index 1b67385..950c26f 100644 --- a/src/api/DesignForm/tableButton.ts +++ b/src/api/DesignForm/tableButton.ts @@ -41,7 +41,7 @@ export const tableButtonList :attrButton[] = [ icon: "delete" }, { - label: "显示二维码", + label: "生成二维码", key: "showQrCode", type: "primary", size: "small", diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts index 9a5d84a..c3aecee 100644 --- a/src/api/DesignForm/types.ts +++ b/src/api/DesignForm/types.ts @@ -110,6 +110,8 @@ export interface formData{ qrCodeFlag: boolean, qrCodeInside:boolean, qrCodeOutside:boolean, + qrCodePrintStyle:any, + qrCodeShowFields:any, }; config: any; events?:any; diff --git a/src/components/DesignForm/formControlPropertiNew.vue b/src/components/DesignForm/formControlPropertiNew.vue index dc47f58..20e6076 100644 --- a/src/components/DesignForm/formControlPropertiNew.vue +++ b/src/components/DesignForm/formControlPropertiNew.vue @@ -2181,6 +2181,19 @@ function getQrCodeImgInside() { }, }); } +/* const qrCodeOutPrintConfigFlag = ref(false) +function showQrCodeOutPrintConfig(){ + qrCodeOutPrintConfigFlag.value = true +} */ +function handleMaxSelect(){ + //console.log(formData.value.qrCodeShowFields.length) + if(formData.value.qrCodeShowFields.length>5){ + alert("最多可选择5个字段") + } + while (formData.value.qrCodeShowFields.length > 5) {// + formData.value.qrCodeShowFields.pop(); + } +} //liwenxuan20250103 qrCode end //liwenxuan20240403 associatedForms start import AssociatedFormsTinyace from "@/widget/associatedforms/associatedFormsTinyace.vue"; @@ -2192,7 +2205,7 @@ const treeDefaultProps = {// children: "children", label: "label", }; -//拿到子组件AssociatedFormsTinyace的实例 +//拿到子组件AssociatedFormsTinyace的实例 const aft = ref(); const aftRange = ref(); @@ -2423,6 +2436,7 @@ let currentFormChildTableFieldsForFillRole = ref(); let associatedFormsCurrentFormFieldTree = ref(); let associatedFormsCurrentFormFieldTree1 = ref(); let associatedFormsCurrentFormFieldTreeNoTable = ref(); +let associatedFormsCurrentFormFieldTreeNoTable1 = ref<[]>(); let associatedFormsCurrentFormFieldTreeForGlxxsz = ref(); let associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf = ref(); let resDataForGlxxszExceptself: any[] = []; @@ -2497,6 +2511,7 @@ function getAssociatedFormsCurrentFieldTree1() { treeAttrs: data.treeAttrs, }, ]; + associatedFormsCurrentFormFieldTreeNoTable1.value = [...resDataNoTable] let resDataForGlxxsz = ref(data.children.slice(8)); @@ -4839,6 +4854,39 @@ const updataBase = (val: any) => { 查看外部二维码图片 + + + + + + 图片 + 表格卡片 + + + + + + + + 表单整体布局 @@ -5212,6 +5260,29 @@ const updataBase = (val: any) => { + + diff --git a/src/components/DesignForm/tableListPage/index.vue b/src/components/DesignForm/tableListPage/index.vue index b5b232f..b93c3a4 100644 --- a/src/components/DesignForm/tableListPage/index.vue +++ b/src/components/DesignForm/tableListPage/index.vue @@ -31,6 +31,9 @@ import type { FormInstance, FormRules, ElNotification } from "element-plus"; import { gainFormPageListCont } from "@/api/DesignForm/requestapi"; import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue"; 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 { formatNumber } from "@/api/DesignForm/utils"; @@ -65,6 +68,7 @@ const props = withDefaults( versionid?: string; versiontitle?: string; viewPage?: viewPageType; + formBasicConfig?: any; }>(), { showPage: true, @@ -101,6 +105,9 @@ const props = withDefaults( viewPage: () => { return []; }, + formBasicConfig: () => { + return {}; + }, } ); 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 @@ -219,8 +306,42 @@ const setUpClick = (val: string, id: string) => { drawerWith.value = container.value?.clientWidth; openTaskDrawer.value = true; } else if(val.key == "showQrCode"){ - //alert(val) - console.log(idList) + //liwenxuan 20250114 二维码打印弹窗 start + //在此组装参数,以生成二维码图片 + + 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 { if (idList.value.length > 0) { ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", { @@ -1510,6 +1631,46 @@ const diGuiJilian = (val: any, options: any[]) => { :drawerwith="drawerWith" @searchquery="getListData" /> + + +
+
+ + + + + + + + + +
{{ tableData.groupName }}-{{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}-{{ tableKey }}二维码
{{ item.key }}{{ item.value }}
+
+
+ + { .demo-image__error .image-slot .el-icon { font-size: 30px; } - + +table { + border-collapse: collapse; + width: 100%; +} + +td, th { + border: 1px solid black; + padding: 8px; +} + + \ No newline at end of file diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue index dbac92e..7194dcc 100644 --- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue +++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue @@ -483,6 +483,7 @@ defineExpose({ :versiontitle="versionTitle" v-model:look-page-is-show="lookPageIsShow" :viewPage="stateList.view" + :form-basic-config="stateForm.formData.form" @optionsValue5Get5="optionsValue5Get5" />