使用页二维码功能开发

src/components/DesignForm/app/index.vue

@@ -27,7 +27,10 @@ import {
   checkboxUnit,
   orgDeptUnit,
 } from "@/api/DesignForm/fieldUnit";
-import type { FormInstance, FormRules, ElNotification } from "element-plus";
+import type { FormInstance, FormRules } from "element-plus";
+import { ElLoading,ElMessage,ElNotification  } from 'element-plus'
+import html2canvas from 'html2canvas';
+import JSZip, { forEach } from 'jszip';
 import { gainFormPageListCont } from "@/api/DesignForm/requestapi";
 import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue";
 import request from "@/utils/request";
@@ -69,6 +72,8 @@ const props = withDefaults(
     pickAppMenu?: any;
     versiontitle?: string;
     viewPage?: viewPageType;
+    formBasicConfig?: any;
+    fieldsDetailList?:any;
   }>(),
   {
     showPage: true,
@@ -108,6 +113,12 @@ const props = withDefaults(
     viewPage: () => {
       return [];
     },
+    formBasicConfig: () => {
+      return {};
+    },
+    fieldsDetailList: () => {
+      return {};
+    },
   }
 );
 const emits = defineEmits<{
@@ -214,6 +225,235 @@ 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;
+}
+
+// 定义两个响应式的布尔值来控制按钮的禁用状态
+const isButton1Disabled = ref(false);
+const isButton2Disabled = ref(false);
+
+async function downloadTables() {
+  isButton1Disabled.value = true;
+  isButton2Disabled.value = true;
+  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 = {}
+    // 不管成功与否，最后都要恢复按钮的状态
+    isButton1Disabled.value = false;
+    isButton2Disabled.value = false;
+  });
+}
+function closeQrDownload(){
+  qrCodesPrintDialogFlag.value = false
+  tableRefs = {}
+  //console.log(tableRefs)
+  
+}
+
+let asfs: any[] = [];
+let radios: any[] = [];
+let checkboxs: any[] = [];
+let switchs: any[] = [];
+let selects: any[] = [];
+let tables: any[] = [];
+function getAsfs() {
+  //setTimeout(() => {
+    let dataList = ref({});
+    dataList.value = props.fieldsDetailList
+    if (dataList && Array.isArray(dataList.value) && dataList.value.length > 0) {
+      for (let i = 0; i < dataList.value.length; i++) {
+        if (dataList.value[i].type == "associatedForms") {
+          asfs.push(dataList.value[i]);
+        }else if(dataList.value[i].type == "radio"){
+          radios.push(dataList.value[i])
+        } else if(dataList.value[i].type == "checkbox"){
+          checkboxs.push(dataList.value[i])
+        } else if(dataList.value[i].type == "switch"){
+          switchs.push(dataList.value[i])
+        } else if(dataList.value[i].type == "select"){
+          selects.push(dataList.value[i])
+        } else if (
+          dataList.value[i].type == "card" ||
+          dataList.value[i].type == "flex" ||
+          dataList.value[i].type == "div" ||
+          dataList.value[i].type == "table"
+        ) {
+          if (dataList.value[i].type == "table") {
+            tables.push(dataList.value[i]);
+          }
+
+          dataList.value[i].list.forEach((element: any) => {
+            if (element.type == "associatedForms") {
+              asfs.push(element);
+            }else if(element.type == "radio"){
+              radios.push(element)
+            }else if(element.type == "checkbox"){
+              checkboxs.push(element)
+            }else if(element.type == "switch"){
+              switchs.push(element)
+            }else if(element.type == "select"){
+              selects.push(element)
+            }
+          });
+        } else if (dataList.value[i].type == "grid") {
+          let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
+
+          if (columns.length > 0) {
+            for (let z = 0; z < columns.length; z++) {
+              for (let x = 0; x < columns[z].list.length; x++) {
+                let a = JSON.parse(JSON.stringify(columns[z].list[x]));
+
+                if (a.type == "associatedForms") {
+                  asfs.push(a);
+                }else if(a.type == "radio"){
+                  radios.push(a)
+                }else if(a.type == "checkbox"){
+                  checkboxs.push(a)
+                }else if(a.type == "switch"){
+                  switchs.push(a)
+                }else if(a.type == "select"){
+                  selects.push(a)
+                }
+              }
+            }
+          }
+        } else if (dataList.value[i].type == "tabs") {
+          //tabs标签页有可能再嵌套一层flex或者table
+          let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
+          if (columns.length > 0) {
+            for (let z = 0; z < columns.length; z++) {
+              for (let x = 0; x < columns[z].list.length; x++) {
+                let a = JSON.parse(JSON.stringify(columns[z].list[x]));
+
+                if (a.type == "associatedForms") {
+                  asfs.push(a);
+                }else if(a.type == "radio"){
+                  radios.push(a)
+                }else if(a.type == "checkbox"){
+                  checkboxs.push(a)
+                }else if(a.type == "switch"){
+                  switchs.push(a)
+                }else if(a.type == "select"){
+                  selects.push(a)
+                }else if (a.type == "flex" || a.type == "table") {
+                  if (a.type == "table") {
+                    tables.push(dataList.value[i]);
+                  }
+
+                  if (a.list.length > 0) {
+                    for (let m = 0; m < a.list.length; m++) {
+                      let q = JSON.parse(JSON.stringify(a.list[m]));
+
+                      if (q.type == "associatedForms") {
+                        asfs.push(q);
+                      }else if(q.type == "radio"){
+                        radios.push(q)
+                      }else if(q.type == "checkbox"){
+                        checkboxs.push(q)
+                      }else if(q.type == "switch"){
+                        switchs.push(q)
+                      }else if(q.type == "select"){
+                        selects.push(q)
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  //}, 500);
+}
+
+
+function convertStringToArray(str: string) {
+    if (typeof str!== 'string') {
+        throw new Error('Input must be a string.');
+    }
+    if (str === '') {
+        return [];
+    }
+    // 去除首尾的中括号
+    str = str.slice(1, -1);
+    if (str === '') {
+        return [];
+    }
+    let parts = str.split(',');
+    return parts.map(part => parseFloat(part));
+}
+
+
+//liwenxuan 20250120 二维码 end
+
+
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-01 11:36:07
@@ -226,8 +466,192 @@ 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){
+      const loadingInstance1 = ElLoading.service({
+        fullscreen: true,
+        text: '正在生成二维码，请稍候...' // 添加的文字内容，可根据需要修改
+      });
+      //console.log(props.formBasicConfig)
+      //请求数据
+      let getDetailQrCodesData: any = {}
+      let currentFieldsMapArrObj: any = {}
+      getDetailQrCodes(idArray).then(({ data }) => {
+        getDetailQrCodesData = JSON.parse(JSON.stringify(data));
+        if(props.formBasicConfig.qrCodePrintStyle&&props.formBasicConfig.qrCodePrintStyle=="2"){
+          let asfQueryParams1: any[] = [];
+          for (let key in getDetailQrCodesData) {
+            currentFieldsMapArrObj[key] = getDetailQrCodesData[key]
+            if (getDetailQrCodesData.hasOwnProperty(key)) {
+                let currentFieldsMap = getDetailQrCodesData[key].fieldsMap
+                //console.log(currentFieldsMap)
+                // 遍历对象的属性
+                for (let attr_name in currentFieldsMap) {
+                    if (currentFieldsMap.hasOwnProperty(attr_name)) {
+                        //console.log("attr_name------"+attr_name)
+                        //console.log(`属性名: ${attr_name}, 属性值: ${currentFieldsMap[attr_name]}`);
+                        radios.forEach(function(element) {
+                            if(attr_name==element.name){
+                                //表格属性中存在此单选,将其value根据options替换为可读值
+                                let toConvertValue = currentFieldsMap[attr_name].split("!@#@!")[1]
+                                let optionsHasCurrentValue = false
+                                element.options.forEach((element1: any) => {
+                                    if(toConvertValue==element1.value){
+                                      currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+element1.label
+                                      optionsHasCurrentValue = true
+                                    }
+                                });
+                                if(optionsHasCurrentValue==false){
+                                  currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+""
+                                }
+                            }
+                        });
+                        selects.forEach(function(element) {
+                          if(attr_name==element.name){
+                                //表格属性中存在此单选,将其value根据options替换为可读值
+                                let toConvertValue = currentFieldsMap[attr_name].split("!@#@!")[1]
+                                let optionsHasCurrentValue = false
+                                element.options.forEach((element1: any) => {
+                                    if(toConvertValue==element1.value){
+                                      currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+element1.label
+                                      optionsHasCurrentValue = true
+                                    }
+                                });
+                                if(optionsHasCurrentValue==false){
+                                  currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+""
+                                }
+                            }
+                        });
+                        switchs.forEach(function(element) {
+                          if(attr_name==element.name){
+                                //表格属性中存在此单选,将其value根据options替换为可读值
+                                let toConvertValue = currentFieldsMap[attr_name].split("!@#@!")[1]
+                                if(toConvertValue=="0"){
+                                      currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+"禁用"
+                                }else{
+                                      currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+"启用"
+                                }
+                            }
+                        });
+                        checkboxs.forEach(function(element) {
+                            if(attr_name==element.name){
+                                //表格属性中存在此单选,将其value根据options替换为可读值
+                                let toConvertValue = currentFieldsMap[attr_name].split("!@#@!")[1]
+                                let toConvertArr = convertStringToArray(toConvertValue);
+                                let toAddStr = ""
+                                if(toConvertArr.length>0){
+                                  toConvertArr.forEach((element1: any) => {
+                                    element.options.forEach((element2: any) => {
+                                        if(element1==element2.value){
+                                          toAddStr = toAddStr+element2.label+","
+                                        }
+                                    });
+                                  });
+                                  toAddStr = toAddStr.slice(0, -1)
+                                  currentFieldsMap[attr_name] = currentFieldsMap[attr_name].split("!@#@!")[0]+"!@#@!"+toAddStr
+                                }
+                            }
+                        });
+                        asfs.forEach(function(element) {
+                          if(attr_name==element.name){
+                            //表格属性中存在此关联表单,将其value根据options替换为可读值
+                            let toConvertValue = currentFieldsMap[attr_name].split("!@#@!")[1]
+                            if(toConvertValue.length>0){
+                              //console.log(element)
+                              let fieldCount = 0;//如果>0则有此field名
+                              asfQueryParams1.forEach((item1: any) => {
+                                //如果参数数组中已存在同field的     关联表单asfQueryParamsItem1,则往已存在的如果参数数组中已存在同field的关联表单asfQueryParamsItem1.asfToSelectIds1中新增asfMasterAndAsfId1
+                                //              不存在则push一个新的关联表单asfQueryParamsItem1
+                                if(item1.field==element.name){
+                                  fieldCount++
+                                }
+                              });
+                              if(fieldCount>0){
+                                //已存在
+                                //得到已存在的相关field参数对象
+                                asfQueryParams1.forEach((item1: any) => {
+                                  if(item1.field==element.name){
+                                    let asfMasterAndAsfId1: any = {};
+                                    asfMasterAndAsfId1.asfId = toConvertValue+"";
+                                    asfMasterAndAsfId1.asfMasterId = key+"";
+                                    item1.asfToSelectIds.push(asfMasterAndAsfId1)
+                                  }
+                                });
+                              }else{
+                                //不存在
+                                let asfQueryParamsItem1: any = {};
+                                asfQueryParamsItem1.formId = element.control.formid;
+                                asfQueryParamsItem1.field = element.name;
+                                let asfToSelectIds1: any[] = [];
+                                asfQueryParamsItem1.asfToSelectIds = asfToSelectIds1;
+                                let asfMasterAndAsfId1: any = {};
+                                asfMasterAndAsfId1.asfId = toConvertValue+"";
+                                asfMasterAndAsfId1.asfMasterId = key+"";
+                                asfToSelectIds1.push(asfMasterAndAsfId1)
+                                asfQueryParams1.push(asfQueryParamsItem1)
+                              }
+                            }
+                          }
+                        })
+                    }
+                }
+                setTimeout(()=>{
+                  getDetailQrCodesData[key].fieldsMap = modifyFieldsMap4(currentFieldsMap)
+                },800)
+            }
+          }
+
+          getAsfDataTitlesByIds(asfQueryParams1).then(({ data }) => {
+            let getAsfDataTitlesByIdsData = JSON.parse(JSON.stringify(data));
+            for (let key in currentFieldsMapArrObj) {
+              if (getDetailQrCodesData.hasOwnProperty(key)) {
+                let currentFieldsMap = getDetailQrCodesData[key].fieldsMap
+                getAsfDataTitlesByIdsData.forEach((element1: any) => {
+                  element1.list.forEach((element2: any) => {
+                    if(key==element2.asfMasterId){
+                      currentFieldsMap[element1.field] = currentFieldsMap[element1.field].split("!@#@!")[0]+"!@#@!"+element2.label
+                    }
+                  })
+                })
+              }
+            }
+          })
+
+                
+
+        setTimeout(()=>{
+          tablesData.value = getDetailQrCodesData
+        },810)  
+        
+        
+          
+          setTimeout(()=>{
+            loadingInstance1.close()
+            qrCodesPrintDialogFlag.value = true
+          },820) 
+          
+        }else if(props.formBasicConfig.qrCodePrintStyle&&props.formBasicConfig.qrCodePrintStyle=="1"){
+          //fieldsMap = null
+          tablesData.value = getDetailQrCodesData
+          qrCodesPrintDialogFlag.value = true
+          loadingInstance1.close()
+        }
+        
+      })/* .finally(()=>{
+        loadingInstance1.close()
+        qrCodesPrintDialogFlag.value = true
+      }) */
+    }else{
+      alert("未选中任何一条,请先选择")
+      
+    }
+    //liwenxuan 20250114 二维码打印弹窗 end
+
+
   }else {
     if (idList.value.length > 0) {
       ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
@@ -459,6 +883,13 @@ const getPageData = () => {
         })
         .finally(() => {
           state.loading = false;
+          asfs = [];
+          radios = [];
+          checkboxs = [];
+          switchs = [];
+          selects = [];
+          tables = [];
+          getAsfs()
         });
   }
 };
@@ -623,6 +1054,7 @@ onMounted(() => {
   nextTick(() => {
     drawerWith.value = container.value?.clientWidth;
   });
+  getAsfs()
 });
 /**
 @ 作者: 秦东
@@ -1499,6 +1931,65 @@ const transformOption = (val: string | number, type?: string) => {
       @searchquery="getListData"
     />
   </div>
+  <!-- 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">{{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}</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>
+      <div v-if="formBasicConfig.qrCodePrintStyle == '1'" style="display: flex; flex-direction: column; align-items: center; 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: 400px;"
+        >
+          <table >
+            <tr>
+              <th style="font-weight: bold; font-size:medium;" colspan="1">{{ tablesData[tableKey].appName }}-{{ tablesData[tableKey].formName }}-{{ tablesData[tableKey].dataTitle }}</th>
+            </tr>
+            <tr>
+              <th ><img :src="tableData.bufferedImage" alt="二维码" width="auto" height="100%"></th>
+            </tr>
+          </table>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :disabled="isButton1Disabled" type="primary" plain @click="downloadTables">下载</el-button>
+          <el-button :disabled="isButton2Disabled" type="primary" plain @click="closeQrDownload">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
 </template>
 <style lang="scss" scoped>
 .rowBox {
@@ -1571,4 +2062,13 @@ const transformOption = (val: string | number, type?: string) => {
 .demo-image__error .image-slot .el-icon {
   font-size: 30px;
 }
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+td, th {
+    border: 1px solid black;
+    padding: 8px;
+}
 </style>

src/components/DesignForm/tableListPage/index.vue

@@ -27,13 +27,13 @@ import {
   checkboxUnit,
   orgDeptUnit,
 } from "@/api/DesignForm/fieldUnit";
-import type { FormInstance, FormRules, ElNotification } from "element-plus";
+import type { FormInstance, FormRules } 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, { forEach } from 'jszip';
-import { ElLoading,ElMessage  } from 'element-plus'
+import { ElLoading,ElMessage,ElNotification  } from 'element-plus'
 import { softDeletion, retractRunWorkFlow } from "@/api/taskapi/management";
 
 import { formatNumber } from "@/api/DesignForm/utils";

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

@@ -355,6 +355,8 @@ function optionsValue3Get3(data: any, fieldName: string) {
             :sign-code="appInitData.signCode"
             :pickAppMenu="props.pickAppMenu"
             :viewPage="stateList.view"
+            :form-basic-config="stateForm.formData.form"
+						:fields-detail-list="stateForm.formData.list"
           />
           <!-- <AppFormPage
 						v-else