打印模板： qrcode

src/components/DesignForm/tableListPage/index.vue

@@ -40,7 +40,7 @@ import { echatsViews } from "@/api/DesignForm/types";
 import { formatNumber } from "@/api/DesignForm/utils";
 import { Ref } from "vue";
 import printHtmlRender from './printHtmlRender.vue'
-import {fieldTree,pageConfig} from './printHtmlRender.vue'
+import {fieldTree,PageConfig} from './printHtmlRender.vue'
 import {printElement} from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/printHtmlDom.js"
 //引入组件
 import FormPageCont from "@/components/DesignForm/tableListPage/formPageCont.vue";
@@ -62,6 +62,7 @@ const props = withDefaults(
     searchData?: attrButton[];
     config: FormPageConfig;
     formId?: string;
+    appKey?: string;
     beforeRequest?: (params: any, rout: any) => any;
     afterResponse?: (result: any) => any | string;
     beforeDelete?: (params: any, route: any) => any;
@@ -1350,7 +1351,7 @@ const printRenderMode = ref(false);
 const printRenderTree: Ref<any[]> = ref([]);
 const printPage = async (row: any) => {
   let data:any[]=[]
-  let pageWidth:string="210mm"
+  let _pageConfig:PageConfig
   let title:string="表单";
   await getPrintTemplate({"versionid":props.versionid,"formkey":props.formKey}).then(resp=>{
     title=resp.data.title
@@ -1358,11 +1359,25 @@ const printPage = async (row: any) => {
       data=JSON.parse(resp.data.formtemplatejson)
     }
     if(resp.data.pageconfigjson!=""){
-      let pageConfig:pageConfig=JSON.parse(resp.data.pageconfigjson)
-      pageWidth=pageConfig.width
+      _pageConfig=JSON.parse(resp.data.pageconfigjson)
+      if(_pageConfig.founder!=""){
+        _pageConfig.founder=row[_pageConfig.founder]
+      }
+      if(_pageConfig.founderTime!=""){
+        _pageConfig.founderTime=row[_pageConfig.founderTime]
+      }
+      if(_pageConfig.deptOrg!=""){
+        _pageConfig.deptOrg=row[_pageConfig.deptOrg]
+      }
+      if(_pageConfig.serialNumber!=""){
+        _pageConfig.serialNumber=row[_pageConfig.serialNumber]
+      }
     }
   })
 
+  let qrstr=`https://wab.hxgk.group/#/form_table/taskInfo?id=${props.formId}}&key=${props.appKey}&
+      formid=${props.versionid}&formKey=${props.formKey}&state=2`
+
   data.forEach(node=>{
     deepLoopForm(node,row)
   })
@@ -1377,12 +1392,12 @@ const printPage = async (row: any) => {
           printElement("printContainer")
         }
       },'打印表单'),
-      h('div',{style:{ border: '1px solid black', width: 'fit-content', margin: '5px'}},[
+      h('div',{style:{ border: '1px solid black', width: 'fit-content', margin: '5px','align-self': 'center'}},[
         h(printHtmlRender,{
           name:title,
           fieldTree:printRenderTree.value,
-          width:pageWidth,
-          formData:row
+          pageConfig:_pageConfig,
+          formData:qrstr
         })
       ])
     ]),

src/components/DesignForm/tableListPage/printHtmlRender.vue

@@ -1,43 +1,88 @@
 <script lang="ts" setup>
+import QRCode from 'qrcode';
+import logourl from "@/assets/logo.png";
 
 export interface fieldTree{
   field?:string;
   name?:string;
   type:string;
-  checked:number;
+  checked?:number;
   data?:[];
   child?:fieldTree[]
 }
 
-export interface pageConfig{
-  width:string,
-  height:string,
+export interface PageConfig{
+  width:string;
+  height:string;
   horizontal:string;//横向
   pagesize:string;
-}
 
+  //页脚页眉
+  pagebrow:string[];
+  founder:string;
+  founderTime:string;
+  deptOrg:string;
+  serialNumber:string;
+  qrcode:boolean;
+}
 
 const props = withDefaults(defineProps<{
     name:string,
-    width:string,
+    pageConfig:PageConfig,
     fieldTree:fieldTree[],
-    formData?:any
+    formData?:string
 }>(),{})
 
+const qrdata=ref("")
+
+function parseDataPicker(val:string){
+  if(val==""|| val.match(/[a-z]/) ) return val;
+  let str=new Date(parseInt(val)).toISOString()
+  return str.slice(0,10)+" "+str.slice(11,16)
+}
+
+const generateQrCode= ()=>{
+  var opts = {
+    errorCorrectionLevel: 'M',
+    type: 'image/png',
+    quality: 0.3,
+    margin: 1,
+    color: {
+      dark:"#000",
+      light:"#fff"
+    }
+  }
+
+   QRCode.toDataURL(props.formData, opts, function (err, url) {
+    if (err) throw err
+    qrdata.value=url
+  })
+}
 
 </script>
 
 <template>
-<div id="printContainer" :style="{width:props.width}" >
-  <h3>{{props.name}}</h3>
+<div class="page_brow" >
+  <img height="50px" :src="logourl" />
+  <span v-if="props.pageConfig.pagebrow.includes('serialNumber')">表单编号:{{ props.pageConfig.serialNumber }}</span>
+</div>
+<div id="printContainer" :style="{width: props.pageConfig.width}" >
+  <h3>{{props.name}}</h3> 
+  <div style="display: flex;justify-content: space-between; margin-bottom: 10px;">
+    <span v-if="props.pageConfig.pagebrow.includes('founder')">创建人:{{ props.pageConfig.founder }}</span>
+    <span v-if="props.pageConfig.pagebrow.includes('founderTime')">创建时间:{{ props.pageConfig.founderTime }}</span>
+    <span v-if="props.pageConfig.pagebrow.includes('deptOrg')">所属部门:{{ props.pageConfig.deptOrg }}</span>
+    
+  </div>
   <div v-for="group in props.fieldTree">
-    <div v-if="Array.isArray(group)" class="auto_table">
+    <div v-if="Array.isArray(group) && group.length>0" class="auto_table">
         <template v-for="item in group"  >
           <div v-if="item.checked!=2" class="cell_box">
             <span class="box_name">
               {{item.name}}
             </span>
-            <span class="content">{{item.field}}</span>
+            <span v-if="item.type !=='datePicker'" class="content">{{item.field}}</span>
+            <span v-else class="content">{{parseDataPicker(item.field)}}</span>
           </div>
         </template>
     </div>
@@ -63,9 +108,10 @@ const props = withDefaults(defineProps<{
             <template v-for="item in tabs"  >
               <div v-if="item.checked!=2" class="tabs_cell_box" style="width: auto;">
                 <span class="box_name">
-                  {{item.name}}++
+                  {{item.name}}
                 </span>
-                <span class="content">{{item.field}}</span>
+                <span v-if="item.type !=='datePicker'" class="content">{{item.field}}</span>
+                <span v-else class="content">{{parseDataPicker(item.field)}}</span>
               </div>
             </template>
         </div>
@@ -89,7 +135,8 @@ const props = withDefaults(defineProps<{
           <span class="box_name">
             {{tabs.name}}
           </span>
-          <span class="content">{{tabs.field}}</span>
+          <span v-if="tabs.type !=='datePicker'" class="content">{{tabs.field}}</span>
+          <span v-else class="content">{{parseDataPicker(tabs.field??'')}}</span>
         </div>
 
       </div>
@@ -97,19 +144,31 @@ const props = withDefaults(defineProps<{
     <div v-else v-if="group.checked!=2">{{ group }}</div>
     
   </div>
+  <div v-if="props.pageConfig.qrcode" style="display: flex;flex-direction: row-reverse;">
+    {{ generateQrCode() }}
+    <img id="qrcode"  width="100px" :src="qrdata"/>
+  </div>
 </div>
 </template>
 <style lang="scss" scoped>
 #printContainer{
-  // width: 210mm;
-  // height: 297mm;
-  padding: 57px;
+  padding: 0px 57px 30px 57px;
   text-align: center;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
   scrollbar-width: none;
 }
+//没有元素时，隐藏
+div:empty {
+  display: none;
+}
+.page_brow{
+  padding: 24px 57px 0 57px; 
+  display: flex;
+  justify-content: space-between; 
+  align-items: center;
+}
 
 .auto_table{
   display: grid;

src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue

@@ -539,6 +539,7 @@ defineExpose({
               :search-data="stateList.searchData"
               :config="stateList.config"
               :form-id="stateForm.formId"
+              :app-key="props.menusInfo.appkey"
               :versionid="versionId"
               :form-key="props.formKey"
               :versiontitle="versionTitle"
@@ -583,7 +584,7 @@ defineExpose({
     <el-row v-else>
       <el-col :span="24" class="pageBox">
         <el-card class="tispMsg" shadow="always">
-          欢迎使用+++ {{ props.appCont.appName }}<br />
+          {{ props.appCont.appName }}<br />
           <div class="demo-image__error">
             <el-image :src="props.appCont.appSvg" fit="fit">
               <template #error>

src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue

@@ -776,6 +776,7 @@ const dialogConfirmTree = (val: treeStruct[], types: string) => {
 };
 </script>
 <template>
+  +++++++++++++++++++++++++
   <el-aside class="asideBox leftBox">
     <DragControlApp
       :table-key="state.formData.form.name"

src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue

@@ -1415,6 +1415,7 @@ const delAllPick = () => {
 };
 </script>
 <template>
+  ++++++++++++++++++++++
   <!--自定义发送范围-->
   <el-dialog
     v-model="pickCustomizeIsOpen"

src/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage2.vue

@@ -7,9 +7,7 @@
 import { ref, onMounted,toRaw} from 'vue';
 import {getPrintTemplate,savePrintTemplate} from '@/api/DesignForm/requestapi'
 import printHtmlRender from '@/components/DesignForm/tableListPage/printHtmlRender.vue'
-import {fieldTree,pageConfig} from '@/components/DesignForm/tableListPage/printHtmlRender.vue'
-import { fieldList } from '@/views/sysworkflow/codepage/mathFunction';
-import { extend } from 'dayjs';
+import { fieldTree,PageConfig} from '@/components/DesignForm/tableListPage/printHtmlRender.vue'
 
 interface fieldTreeEx extends fieldTree{
   unitName?:string;
@@ -24,10 +22,13 @@ const htmlRenderData=ref<any[]>([])
 let defaultCheckList:string[]=[]
 const treeLoaded=ref(false) //处理树首次渲染时，数据未加载的情况
 const fieldTreeRef=ref()
-const pageConfig=ref<pageConfig>({width:'210mm',height:'297mm',horizontal:"vtal",pagesize:"A4"})
+const objPageConfig = ref<Record<string, any>>({width:'210mm',height:'297mm',horizontal:"vtal",pagesize:"A4", pagebrow:[],qrcode:false})
 const pageSize=ref('A4')
 const pageDret=ref('vtal')
 
+//定义页眉页脚的数据，取自pageConfig的字段
+const systemType:string[]=["founder","founderTime","deptOrg","serialNumber"]
+
 
 const props = defineProps({
   appCont: {
@@ -71,40 +72,40 @@ function safeStringify(obj, space = 2) {
   }, space);
 }
 
-function updatePageConfig(cmd:string){
+const updatePageConfig=(cmd:string)=>{
   switch(cmd){
     case "A4":
-      pageConfig.value.pagesize="A4"
-      pageConfig.value.width="210mm"
-      pageConfig.value.height="297mm"
+      objPageConfig.value.pagesize="A4"
+      objPageConfig.value.width="210mm"
+      objPageConfig.value.height="297mm"
       break
     case "A5":
-      pageConfig.value.pagesize="A5"
-      pageConfig.value.width="148mm"
-      pageConfig.value.height="210mm"
+      objPageConfig.value.pagesize="A5"
+      objPageConfig.value.width="148mm"
+      objPageConfig.value.height="210mm"
       break
     case "htal":
-      pageConfig.value.horizontal="htal"
+      objPageConfig.value.horizontal="htal"
       break
     default:
-      pageConfig.value.horizontal="vtal"
+      objPageConfig.value.horizontal="vtal"
   }
 
-  if(pageConfig.value.horizontal=="htal"){
-    if(pageConfig.value.width<pageConfig.value.height){
-      let a=pageConfig.value.width
-      pageConfig.value.width=pageConfig.value.height
-      pageConfig.value.height=a
+  if(objPageConfig.value.horizontal=="htal"){
+    if(objPageConfig.value.width<objPageConfig.value.height){
+      let a=objPageConfig.value.width
+      objPageConfig.value.width=objPageConfig.value.height
+      objPageConfig.value.height=a
     }
-  }else if(pageConfig.value.width>pageConfig.value.height){
-    let a=pageConfig.value.width
-    pageConfig.value.width=pageConfig.value.height
-    pageConfig.value.height=a
+  }else if(objPageConfig.value.width>objPageConfig.value.height){
+    let a=objPageConfig.value.width
+    objPageConfig.value.width=objPageConfig.value.height
+    objPageConfig.value.height=a
   }
 }
 
 //保存模板
-function onSaveTreeData(){
+const onSaveTreeData=()=>{
   let str:string=safeStringify(htmlRenderData.value)
   let strtree:string=safeStringify(fieldTreeRef.value.data)
   savePrintTemplate({
@@ -114,7 +115,7 @@ function onSaveTreeData(){
     formkey:props.formKey,
     formtemplatejson:str,
     treedatajson:strtree,
-    pageconfigjson:JSON.stringify(pageConfig.value),
+    pageconfigjson:JSON.stringify(objPageConfig.value),
     nodecheckedlist:JSON.stringify(fieldTreeRef.value.getCheckedKeys()) //包含了半选状态
   }).then(resp=>{
     if (resp.code!=200){
@@ -132,7 +133,7 @@ function onSaveTreeData(){
 }
 
 //递归结构字段
-function deepLoop(item:fieldTreeEx){
+const deepLoop=(item:fieldTreeEx)=>{
   let data:fieldTree
   
   switch(item.type){
@@ -187,7 +188,7 @@ function deepLoop(item:fieldTreeEx){
 }
 
 
-function refreshPrintPage(){
+const refreshPrintPage=()=>{
    //如果上面是htmlmode，且已经存编辑过了，后面就不再重新构造模板数据了
   let section:fieldTree[]=[]
   let keys:string[]=[]
@@ -257,9 +258,9 @@ onMounted(async ()=>{
       defaultCheckList=JSON.parse(resp.data.nodecheckedlist)
     }
     if(resp.data.pageconfigjson!=""){
-      pageConfig.value=JSON.parse(resp.data.pageconfigjson)
-      pageDret.value=pageConfig.value.horizontal??"vtal"
-      pageSize.value=pageConfig.value.pagesize??"A4"
+      objPageConfig.value = JSON.parse(resp.data.pageconfigjson)
+      pageDret.value = objPageConfig.value.horizontal ?? "vtal"
+      pageSize.value = objPageConfig.value.pagesize ?? "A4"
     }
   }).catch((err)=>{
     ElMessage({
@@ -268,11 +269,22 @@ onMounted(async ()=>{
       })
   })
 
-  if(printMode.value!="custom" &&fieldTreeData.value.length==0){ 
-    props.state.formData.list.forEach(item=>{
-      fieldTreeData.value.push(deepLoop(item))
-    })
+  /*********************为解决pageconfig字段的问题**************************/
+  let newForm:boolean;
+  if(fieldTreeData.value.length==0){ 
+    newForm=true;
   }
+  props.state.formData.list.forEach((item:fieldTreeEx)=>{
+    if(systemType.includes(item.type)) {
+      //需要记录这种type的真实字段
+      objPageConfig.value[item.type as keyof PageConfig]=item.name??""
+    }
+    //无论新表单还是已保存过的表单，都要处理objPageConfig字段的问题，但是fieldTreeData只有在新表单的时候需要初始化
+    if(newForm){
+      fieldTreeData.value.push(deepLoop(item))
+    }
+  })
+  /********************************************************************/
   treeLoaded.value=true
   //printMode 没有内容说明是新打印表单，没有定制过模板
   
@@ -285,7 +297,7 @@ onMounted(async ()=>{
  
 })
 
-function updateNodeData(val:fieldTree,val2:boolean,val3:boolean){
+const updateNodeData=(val:fieldTree,val2:boolean,val3:boolean)=>{
   if(val2 && val3){
     val.checked=0
   }else if(val2 || val3){
@@ -303,7 +315,16 @@ function updateNodeData(val:fieldTree,val2:boolean,val3:boolean){
     <el-tab-pane label="默认" name="html">
       <div style="display: grid; grid-template-columns: 1fr 4fr;">
         <div class="hiprintEpContainer" >
-          业务字段 <el-button @click="onSaveTreeData">保存模板</el-button>
+          <el-button type="primary"  @click="onSaveTreeData">保存模板</el-button>
+          <span>系统字段</span>
+          <el-checkbox-group v-model="objPageConfig.pagebrow" class="basic_fields">
+            <el-checkbox label="创建人" value="founder" />
+            <el-checkbox label="创建时间" value="founderTime" />
+            <el-checkbox label="所属部门" value="deptOrg" />
+            <el-checkbox label="表单编号" value="serialNumber" />
+          </el-checkbox-group>
+          <el-checkbox style="margin-left: 22px;" v-model="objPageConfig.qrcode" label="表单二维码" />
+          <span>业务字段</span>
           <el-tree
             v-if="treeLoaded"
             ref="fieldTreeRef"
@@ -333,8 +354,8 @@ function updateNodeData(val:fieldTree,val2:boolean,val3:boolean){
               <el-radio-button label="纵向" value="vtal" />
             </el-radio-group>
           </div>
-          <div style="margin: 5px; border: 1px dashed black;overflow-y: scroll; scrollbar-width: none;" :style="{width: pageConfig.width,height:pageConfig.height}">
-            <printHtmlRender :name="props.state.formOtherData.formName" :width="pageConfig.width" :field-tree="htmlRenderData" />
+          <div style="margin: 5px; border: 1px dashed black;overflow-y: scroll; scrollbar-width: none;" :style="{width: objPageConfig.width,height:objPageConfig.height}">
+            <printHtmlRender :name="props.state.formOtherData.formName" :form-data="htmlRenderData" :pageConfig="objPageConfig" :field-tree="htmlRenderData"/>
           </div>
         </div>
       </div>
@@ -347,7 +368,7 @@ function updateNodeData(val:fieldTree,val2:boolean,val3:boolean){
   </el-tabs>  
 </template>
 <style lang="scss" scoped>
-.hiprintEpContainer,dropTable, .PrintElementOptionSetting{
+.hiprintEpContainer,dropTable{
   border: 1px solid black;
   margin: 5px;
   display: flex;
@@ -355,6 +376,14 @@ function updateNodeData(val:fieldTree,val2:boolean,val3:boolean){
   flex-wrap: wrap;
   align-content: flex-start;
   width: 300px;
+  button{
+    margin-top: 5px;
+    margin-left: 10px;
+  }
+  >span{
+    margin-left: 10px;
+    font-weight: bold;
+  }
 }
 .defaultContainer{
   border: 1px solid black;
@@ -364,7 +393,13 @@ function updateNodeData(val:fieldTree,val2:boolean,val3:boolean){
   flex-direction: column;
   overflow-y: scroll;
 }
-
+.basic_fields{
+  display: flex;
+  flex-direction: column;
+  .el-checkbox{
+    margin-left: 22px;
+  }
+}
 .el-tabs--left .el-tabs__header.is-left {
   margin-right: 0;
 }