二维码编辑页表格渲染

src/components/DesignForm/formControlPropertiNew.vue

@@ -2156,11 +2156,11 @@ function showQrCodeOutPrintConfig(){
   qrCodeOutPrintConfigFlag.value = true
 } */
 function handleMaxSelect(){
-  console.log(formData.value.qrCodeShowFields.length)
+  //console.log(formData.value.qrCodeShowFields.length)
   if(formData.value.qrCodeShowFields.length>5){
     alert("最多可选择5个字段")
   }
-  while (formData.value.qrCodeShowFields.length > 5) {
+  while (formData.value.qrCodeShowFields.length > 5) {//
     formData.value.qrCodeShowFields.pop();
   }
 }
@@ -2175,7 +2175,7 @@ const treeDefaultProps = {//
   children: "children",
   label: "label",
 };
-//拿到子组件AssociatedFormsTinyace的实例
+//拿到子组件AssociatedFormsTinyace的实例 
 const aft = ref();
 const aftRange = ref();
 
@@ -2406,6 +2406,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[] = [];
@@ -2480,6 +2481,7 @@ function getAssociatedFormsCurrentFieldTree1() {
           treeAttrs: data.treeAttrs,
         },
       ];
+      associatedFormsCurrentFormFieldTreeNoTable1.value = [...resDataNoTable]
 
       let resDataForGlxxsz = ref(data.children.slice(8));
 
@@ -4663,7 +4665,7 @@ const radioChangeSet = (val: any) => {
 
             >
               <el-option
-                v-for="item in associatedFormsCurrentFormFieldTreeNoTable[0].children"
+                v-for="item in associatedFormsCurrentFormFieldTreeNoTable1"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"

src/components/DesignForm/tableListPage/index.vue

@@ -65,6 +65,7 @@ const props = withDefaults(
     versionid?: string;
     versiontitle?: string;
     viewPage?: viewPageType;
+    formBasicConfig?: any;
   }>(),
   {
     showPage: true,
@@ -101,6 +102,9 @@ const props = withDefaults(
     viewPage: () => {
       return [];
     },
+    formBasicConfig: () => {
+      return {};
+    },
   }
 );
 const emits = defineEmits<{
@@ -208,6 +212,36 @@ const resetFields = (formEl: FormInstance | undefined) => {
     });
   }
 };
+const qrCodesPrintDialogFlag = ref(false)
+
+const qrCodesPrintDialogData = 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;
+}
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-01 11:36:07
@@ -219,8 +253,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 = ""
+                
+                
+            }
+            
+        }
+          qrCodesPrintDialogData.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 +1578,52 @@ 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: 70px"
+      width="50%"
+    >
+    <div style="min-height: 50px; max-height: 500px; overflow-y: auto">
+      <div v-for="(tableData, index) in qrCodesPrintDialogData"  :key="index" style="margin-bottom: 30px; width: 95%;">
+        <table >
+          <tr>
+              <th style="font-weight: bold; font-size:medium;" colspan="2">{{tableData.groupName}}-{{qrCodesPrintDialogData[index].appName}}-{{qrCodesPrintDialogData[index].formName}}-{{ index }}</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>
+          <!-- <tr>
+              <th>规格型号</th>
+              <td>V=500m³</td>
+          </tr>
+          <tr>
+              <th>设备类型</th>
+              <td>A</td>
+          </tr>
+          <tr>
+              <th>存放位置</th>
+              <td>空分工序</td>
+          </tr> -->
+      </table>
+    </div>
+  </div>
+    <!-- {{qrCodesPrintDialogData}} -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="qrCodesPrintDialogFlag = false">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
 
     <el-dialog
       v-model="asfShowDetailsFlag"
@@ -1591,4 +1705,16 @@ const diGuiJilian = (val: any, options: any[]) => {
 .demo-image__error .image-slot .el-icon {
   font-size: 30px;
 }
-</style>
+
+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