Merge branch 'lwx_16'

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",

src/api/DesignForm/tableButton.ts

@@ -41,7 +41,7 @@ export const tableButtonList :attrButton[] = [
 		icon: "delete"
 	},
 	{
-		label: "显示二维码",
+		label: "生成二维码",
 		key: "showQrCode",
 		type: "primary",
 		size: "small",

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;

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";
@@ -2423,6 +2436,7 @@ let currentFormChildTableFieldsForFillRole = ref<Tree[]>();
 let associatedFormsCurrentFormFieldTree = ref<Tree[]>();
 let associatedFormsCurrentFormFieldTree1 = ref<Tree[]>();
 let associatedFormsCurrentFormFieldTreeNoTable = ref<Tree[]>();
+let associatedFormsCurrentFormFieldTreeNoTable1 = ref<[]>();
 let associatedFormsCurrentFormFieldTreeForGlxxsz = ref<Tree[]>();
 let associatedFormsCurrentFormFieldTreeForGlxxszExceptSelf = ref<Tree[]>();
 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) => {
               查看外部二维码图片
             </el-button>
           </el-form-item>
+          <el-form-item v-if="formData.qrCodeFlag" class="form_cont"  label="二维码打印样式">
+            
+            <!-- <el-button
+              type="primary"
+              text
+              @click="showQrCodeOutPrintConfig"
+            >
+              样式设置
+            </el-button> -->
+
+            <el-radio-group v-model="formData.qrCodePrintStyle">
+              <el-radio value="1">图片</el-radio>
+              <el-radio value="2">表格卡片</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item v-if="formData.qrCodeFlag&&formData.qrCodePrintStyle==2" class="form_cont"  label="表格卡片显示字段">
+            <el-select
+              v-model="formData.qrCodeShowFields"
+              multiple
+              placeholder="请选择"
+              style="width: 240px"
+              @change="handleMaxSelect"
+
+            >
+              <el-option
+                v-for="item in associatedFormsCurrentFormFieldTreeNoTable1"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
 
           <el-divider content-position="left">表单整体布局</el-divider>
           <el-form-item label="组件尺寸" class="form_cont">
@@ -5212,6 +5260,29 @@ const updataBase = (val: any) => {
     </template>
   </el-dialog>
 
+  <!-- <el-dialog
+    v-model="qrCodeOutPrintConfigFlag"
+    class="glxxsztc"
+    top="150px"
+    :close-on-click-modal="false"
+    title="详情二维码样式设置"
+    :show-close="false"
+    style="margin-top: 70px"
+    width="50%"
+  >
+    <el-radio-group v-model="formData.qrCodePrintStyle">
+      <el-radio value="1" size="large">图片</el-radio>
+      <el-radio value="2" size="large">表格卡片</el-radio>
+    </el-radio-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="qrCodeOutPrintConfigFlag = false">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog> -->
+
   <!-- 二维码展示弹窗 liwenxuan 20250103 end -->
   <!-- 关联表单设置弹窗 liwenxuan 20240402 start -->
   <!--  -->

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)
+    //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 {
     if (idList.value.length > 0) {
       ElMessageBox.confirm("确认删除此数据项?删除后不可恢复！", "警告", {
@@ -1510,6 +1631,46 @@ const diGuiJilian = (val: any, options: any[]) => {
       :drawerwith="drawerWith"
       @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
       v-model="asfShowDetailsFlag"
@@ -1591,4 +1752,15 @@ const diGuiJilian = (val: any, options: any[]) => {
 .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/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"
 						/>
 						<ak-form