打印：发布1.0

src/components/DesignForm/app/index.vue

@@ -43,7 +43,10 @@ import {
 } from "@/api/taskapi/management";
 
 import { formatNumber } from "@/api/DesignForm/utils";
-
+import printHtmlRender from '../printHtmlRender.vue'
+import {fieldTree,PageConfig} from '../printHtmlRender.vue'
+import {printElement} from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/printHtmlDom.js"
+import {getPrintTemplate} from '@/api/DesignForm/requestapi'
 //引入组件
 import FormPageCont from "@/components/DesignForm/tableListPage/formPageCont.vue";
 import TableFlow from "@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue";
@@ -70,6 +73,7 @@ const props = withDefaults(
     searchData?: attrButton[];
     config?: FormPageConfig|any;
     formId?: string;
+    appKey?: string;
     beforeRequest?: (params: any, rout: any) => any;
     afterResponse?: (result: any) => any | string;
     beforeDelete?: (params: any, route: any) => any;
@@ -83,6 +87,7 @@ const props = withDefaults(
     delKey?: string; // 删除标识
     lookPageIsShow?: boolean;
     versionid?: string;
+    formKey?:string;
     signCode?: string;
     pickAppMenu?: any;
     versiontitle?: string;
@@ -1550,6 +1555,91 @@ const lookPageInfo = (val: any) => {
   drawerWith.value = container.value?.clientWidth;
   lookPageInfoIsShow.value = true;
 };
+
+
+/****************表单打印功能************************/
+const printRenderMode = ref(false);
+const printRenderTree: Ref<any[]> = ref([]);
+const printPage = async (row: any) => {
+  let data:any[]=[]
+  let _pageConfig:PageConfig
+  let title:string="表单";
+  await getPrintTemplate({"versionid":props.versionid,"formkey":props.appKey}).then(resp=>{
+    title=resp.data.title
+    if(resp.data.formtemplatejson!=""){
+      data=JSON.parse(resp.data.formtemplatejson)
+    }else{
+      alert("请先创建打印模板！")
+      return
+    }
+
+    if(resp.data.pageconfigjson!=""){
+      _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)
+  })
+  printRenderTree.value=data
+  printRenderMode.value = true;
+  ElMessageBox({
+    message: () => h('div',{style:{ width:'1200px',display:'flex','flex-direction':'column'}},[
+      h(ElButton, {
+        type:"primary",
+        style: "margin:10px 10px 5px auto;",
+        onClick: () => {
+          printElement("printContainer")
+        }
+      },'打印表单'),
+      h('div',{style:{ border: '1px solid black', width: 'fit-content', margin: '5px','align-self': 'center'}},[
+        h(printHtmlRender,{
+          name:title,
+          fieldTree:printRenderTree.value,
+          pageConfig:_pageConfig,
+          qrcode:qrstr,
+        })
+      ])
+    ]),
+    showConfirmButton:false,
+    customStyle: { '--el-messagebox-width':'1300px',padding:'10px'},
+  }).then(() => {
+  })
+};
+
+
+const deepLoopForm=(node:fieldTree, row: Record<string, any>)=>{
+    if(Array.isArray(node)){
+      node.forEach(item=>{deepLoopForm(item,row)})
+      return
+    }
+
+    if(node.field!=""){
+      let rnode:Object;
+      if (row.hasOwnProperty(node.field!)){// 有这个字段
+        if (node.type=="table" || node.type=="tabs"){
+          node.data=row[node.field!]
+        }else{
+          node.field=row[node.field!]
+        }
+      }
+    }
+  }
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-05 11:29:50
@@ -2202,6 +2292,21 @@ const isObject = (obj) => {
                       class="fa fa-edit"
                     />
                   </el-tooltip>
+
+                  <el-tooltip
+                    class="box-item"
+                    effect="dark"
+                    content="打印表单"
+                    placement="top-end"
+                  >
+                    <el-button
+                      @click="printPage(scope.row)"
+                      type="primary"
+                      size="small"
+                      class="fa fa-print"
+                    />
+                  </el-tooltip>
+
                   <el-popconfirm
                     v-if="scope.row.taskStatus == 2 || scope.row.taskStatus == 1"
                     confirm-button-text="确定"

src/components/DesignForm/tableListPage/printHtmlRender.vue → src/components/DesignForm/printHtmlRender.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import QRCode from 'qrcode';
-import logourl from "@/assets/logo.png";
+import logourl from "@/assets/logo_text.png";
+import { useUserStore } from '@/store/modules/user';
 
 export interface fieldTree{
   field?:string;
@@ -30,10 +31,11 @@ const props = withDefaults(defineProps<{
     name:string,
     pageConfig:PageConfig,
     fieldTree:fieldTree[],
-    formData?:string
+    qrcode?:string,
 }>(),{})
 
 const qrdata=ref("")
+const userName=useUserStore().nickname;
 
 function parseDataPicker(val:string){
   if(val==""|| val.match(/[a-z]/) ) return val;
@@ -53,7 +55,7 @@ const generateQrCode= ()=>{
     }
   }
 
-   QRCode.toDataURL(props.formData, opts, function (err, url) {
+   QRCode.toDataURL(props.qrcode, opts, function (err, url) {
     if (err) throw err
     qrdata.value=url
   })
@@ -72,7 +74,6 @@ const generateQrCode= ()=>{
     <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) && group.length>0" class="auto_table">
@@ -144,9 +145,16 @@ const generateQrCode= ()=>{
     <div v-else v-if="group.checked!=2">{{ group }}</div>
     
   </div>
-  <div v-if="props.pageConfig.qrcode" style="display: flex;flex-direction: row-reverse;">
+  <div v-if="props.pageConfig.qrcode" style="display: flex; justify-content: space-between; ">
     {{ generateQrCode() }}
-    <img id="qrcode"  width="100px" :src="qrdata"/>
+    <div style="display: inherit; align-items: center;">
+      <img id="qrcode"  width="100px" :src="qrdata"/>
+      <div style="text-align: left;padding-left: 5px;">使用手机企业微信<br>扫一扫</div>
+    </div>
+    <div style="display: flex;flex-direction: column;text-align: left;justify-content: center;">
+      <p>打印日期：{{ new Date().toLocaleString() }}</p>
+      <p>打印人： {{userName}}</p>
+    </div>
   </div>
 </div>
 </template>
@@ -312,4 +320,4 @@ h5{
       border: 1px solid rgb(182, 181, 181);
     }
  
-</style>
+</style>

src/components/DesignForm/tableListPage/index.vue

@@ -39,8 +39,8 @@ import { softDeletion, retractRunWorkFlow, recalSendMsg } from "@/api/taskapi/ma
 import { echatsViews } from "@/api/DesignForm/types";
 import { formatNumber } from "@/api/DesignForm/utils";
 import { Ref } from "vue";
-import printHtmlRender from './printHtmlRender.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";
@@ -1344,16 +1344,15 @@ const lookPageInfo = (val: any) => {
   lookPageInfoIsShow.value = true;
 };
 
-
+/****************表单打印功能************************/
 const printRenderMode = ref(false);
-// Explicitly type as Ref<any[]>
-
 const printRenderTree: Ref<any[]> = ref([]);
 const printPage = async (row: any) => {
   let data:any[]=[]
   let _pageConfig:PageConfig
   let title:string="表单";
-  await getPrintTemplate({"versionid":props.versionid,"formkey":props.formKey}).then(resp=>{
+  //这里appkey和formkey 有些乱，由于历史遗留问题，不好区分。。。
+  await getPrintTemplate({"versionid":props.versionid,"formkey":props.appKey}).then(resp=>{
     title=resp.data.title
     if(resp.data.formtemplatejson!=""){
       data=JSON.parse(resp.data.formtemplatejson)
@@ -1375,7 +1374,7 @@ const printPage = async (row: any) => {
     }
   })
 
-  let qrstr=`https://wab.hxgk.group/#/form_table/taskInfo?id=${props.formId}}&key=${props.appKey}&
+  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=>{
@@ -1397,7 +1396,7 @@ const printPage = async (row: any) => {
           name:title,
           fieldTree:printRenderTree.value,
           pageConfig:_pageConfig,
-          formData:qrstr
+          qrcode:qrstr
         })
       ])
     ]),
@@ -1408,26 +1407,25 @@ const printPage = async (row: any) => {
 
 };
 
-function deepLoopForm(node:fieldTree, row: Record<string, any>){
-  if(Array.isArray(node)){
-    node.forEach(item=>{deepLoopForm(item,row)})
-    return
-  }
 
-  if(node.field!=""){
+const deepLoopForm=(node:fieldTree, row: Record<string, any>)=>{
-    let rnode:Object;
+    if(Array.isArray(node)){
-    if (row.hasOwnProperty(node.field!)){// 有这个字段
+      node.forEach(item=>{deepLoopForm(item,row)})
-      if (node.type=="table" || node.type=="tabs"){
+      return
-        node.data=row[node.field!]
+    }
-      }else{
+
-        node.field=row[node.field!]
+    if(node.field!=""){
+      let rnode:Object;
+      if (row.hasOwnProperty(node.field!)){// 有这个字段
+        if (node.type=="table" || node.type=="tabs"){
+          node.data=row[node.field!]
+        }else{
+          node.field=row[node.field!]
+        }
       }
     }
   }
 
-}
-
-
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-05 11:29:50

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

@@ -541,7 +541,7 @@ defineExpose({
               :form-id="stateForm.formId"
               :app-key="props.menusInfo.appkey"
               :versionid="versionId"
-              :form-key="props.formKey"
+              :form-key="props.menusInfo.id"
               :versiontitle="versionTitle"
               v-model:look-page-is-show="lookPageIsShow"
               :viewPage="stateList.view"

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

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

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

@@ -6,8 +6,8 @@
 <script lang="ts" setup>
 import { ref, onMounted,toRaw} from 'vue';
 import {getPrintTemplate,savePrintTemplate} from '@/api/DesignForm/requestapi'
-import printHtmlRender from '@/components/DesignForm/tableListPage/printHtmlRender.vue'
+import printHtmlRender from '@/components/DesignForm/printHtmlRender.vue'
-import { fieldTree,PageConfig} from '@/components/DesignForm/tableListPage/printHtmlRender.vue'
+import { fieldTree,PageConfig} from '@/components/DesignForm/printHtmlRender.vue'
 
 interface fieldTreeEx extends fieldTree{
   unitName?:string;
@@ -355,7 +355,7 @@ const updateNodeData=(val:fieldTree,val2:boolean,val3:boolean)=>{
             </el-radio-group>
           </div>
           <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"/>
+            <printHtmlRender :name="props.state.formOtherData.formName" :qrcode="'test'" :pageConfig="objPageConfig" :field-tree="htmlRenderData"/>
           </div>
         </div>
       </div>

src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue

@@ -401,6 +401,8 @@ function optionsValue3Get3(data: any, fieldName: string) {
             :search-data="stateList.searchData"
             :config="stateList.config"
             :form-id="appInitData.appForm.cfid.toString()"
+            :app-key="props.pickAppMenu.appkey"
+            :form-key="props.pickAppMenu.id"
             :versionid="appInitData.versionId"
             :versiontitle="versionTitle"
             :sign-code="appInitData.signCode"