表单调用-表单列表：树形选择, 级联选择, 复选框-组显示label

src/views/demo/onlineform/formCall/index.vue

@@ -28,6 +28,11 @@
               }}</a-button>
             </div>
           </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="['树形选择', '级联选择', '复选框-组'].includes(column.title)">
+              {{ dataModification(column, record) }}
+            </template>
+          </template>
         </BasicTable>
 
         <!-- <ShowFormModal
@@ -68,19 +73,19 @@
     </div>
 
     <CallModal @success="submitsuccess" @register="registerModal" />
-    <a-modal 
-      width="80%" 
-      v-model:open="infoCallModalOpen" 
-      title="详情" 
-      :footer="null" 
-      :maskClosable="true" 
+    <a-modal
+      width="80%"
+      v-model:open="infoCallModalOpen"
+      title="详情"
+      :footer="null"
+      :maskClosable="true"
       :destroyOnClose="true"
-      @cancel="closeModal">
+      @cancel="closeModal"
+    >
       <div class="content">
-        <InfoCallModal :data="infoCallModalData"/>
+        <InfoCallModal :data="infoCallModalData" />
       </div>
     </a-modal>
-    
 
     <a-modal
       width="100%"
@@ -120,14 +125,14 @@
   import { useModal } from '@/components/Modal';
   import { useMessage } from '@/hooks/web/useMessage';
   import CallModal from './CallModal.vue';
-  import InfoCallModal from './InfoCallModal/index.vue'
+  import InfoCallModal from './InfoCallModal/index.vue';
   import MapFormModal from './MapForm.vue';
   import CreateFlow from './CreateFlow.vue';
   // import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
   import ShowFormModal from './ShowFormModal/index.vue';
   import { v4 as uuidv4 } from 'uuid';
   import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
-  import { useFormCallStore } from '@/store/modules/formCall.ts'
+  import { useFormCallStore } from '@/store/modules/formCall.ts';
   const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
   const mapFormShow = ref<boolean>(false);
   const mapFormData = ref<Object>({});
@@ -143,8 +148,8 @@
   const mapSetData = ref({
     width: 100,
   });
-  const infoCallModalOpen = ref(false)
-  const infoCallModalData = ref({})
+  const infoCallModalOpen = ref(false);
+  const infoCallModalData = ref({});
   const selectedSubTableDataId = ref('');
   const formData = ref([]);
   const mapgemoList = ref([]);
@@ -591,8 +596,8 @@
           }
         } else {
           // openModal(true, toProps);
-          infoCallModalOpen.value = true
-          infoCallModalData.value = toProps
+          infoCallModalOpen.value = true;
+          infoCallModalData.value = toProps;
         }
         break;
       case 'Import':
@@ -745,13 +750,13 @@
       console.log('columnObj', columnObj);
       if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
         // 为使用字典字段的下拉组件的options赋值
-        formObj.formInfo.tabList.forEach(childTab => {
-          childTab.schemas.forEach(async item => {
-            if(item.component === 'Select' && item.dataType === '2'){
-              item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode)
+        formObj.formInfo.tabList.forEach((childTab) => {
+          childTab.schemas.forEach(async (item) => {
+            if (item.component === 'Select' && item.dataType === '2') {
+              item.componentProps.options = await formCallStore.getDictionaryOptions(item.dataCode);
             }
-          })
-        })
+          });
+        });
         // 将card嵌套起来
         formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
         const arr: any = [];
@@ -828,16 +833,15 @@
           //     colProps: { span: 6 },
           //   });
           // }
-          if (['Transfer'].includes(item.type)) {
-            searchFormSchema.push({
-              field: item.key,
-              component: item.type,
-              label: item.label,
-              colProps: { span: 12 },
-              componentProps: item.componentProps,
-            });
-          }
-        })}
+          searchFormSchema.push({
+            field: item.key,
+            component: item.type,
+            label: item.label,
+            colProps: ['Transfer'].includes(item.type) ? { span: 12 } : { span: 6 },
+            componentProps: item.componentProps || { options: item.options },
+          });
+        });
+      }
       callColumns.forEach((item) => {
         formObj.formInfo.schemas.forEach((val) => {
           if (item.dataIndex == val.field && val.componentProps.options) {
@@ -998,7 +1002,92 @@
     mapFormShow.value = false;
   };
   const closeModal = () => {
-    infoCallModalOpen.value = false
+    infoCallModalOpen.value = false;
+  };
+
+  // 表单列表数据修饰
+  const dataModification = (column, record) => {
+    let res: any = '';
+    if (column.title == '树形选择') {
+      searchFormSchema?.forEach((item: any) => {
+        if (item.component && item.component == 'TreeSelect') {
+          res = getTreeSelectLabel(res, item.componentProps.treeData, record[column.dataIndex]);
+        }
+      });
+    } else if (column.title == '级联选择') {
+      searchFormSchema?.forEach((item: any) => {
+        if (item.component && item.component == 'Cascader') {
+          // 转成数组
+          let CascaderData = JSON.parse(record[column.dataIndex]?.replace(/\r\n/g, '') || '[]');
+          // 返回的结果
+          let CascaderRes = {
+            label: '',
+            children: item.componentProps.options,
+          };
+          CascaderData?.forEach((value, value_index) => {
+            if (value_index == 0) {
+              CascaderRes = getCascaderLabel(value, CascaderRes);
+              res = CascaderRes.label;
+            } else {
+              CascaderRes = getCascaderLabel(value, CascaderRes);
+              res = res + ' / ' + CascaderRes.label;
+            }
+          });
+        }
+      });
+    } else if (column.title == '复选框-组') {
+      searchFormSchema?.forEach((item: any) => {
+        if (item.component && item.component == 'CheckboxGroup') {
+          item.componentProps.options?.forEach((op) => {
+            // 转成数组
+            let CheckboxGroupData = JSON.parse(
+              record[column.dataIndex]?.replace(/\r\n/g, '') || '[]',
+            );
+            CheckboxGroupData?.forEach((CheckboxGroupData_item, index) => {
+              if (op.value == CheckboxGroupData_item) {
+                if (index == 0) {
+                  res = op.label;
+                } else {
+                  res = res + ' | ' + op.label;
+                }
+              }
+            });
+          });
+        }
+      });
+    } else {
+      // console.log(1012);
+      // console.log(column);
+      // console.log(record);
+      // console.log(searchFormSchema);
+      res = record[column.dataIndex];
+    }
+    return res;
+  };
+
+  // 树形选择-表单列表数据修饰
+  function getTreeSelectLabel(res, treeData, value) {
+    treeData?.forEach((element) => {
+      if (element.value == value) {
+        res = element.label;
+      }
+      if (element.children) {
+        res = getTreeSelectLabel(res, element.children, value);
+      }
+    });
+    return res;
+  }
+
+  // 级联选择-表单列表数据修饰
+  function getCascaderLabel(value, CascaderRes) {
+    let res: any = {};
+    CascaderRes.children.forEach((ch) => {
+      if (ch.value == value) {
+        res.label = ch.label;
+        res.children = ch.children;
+      }
+    });
+    return res;
   }
 </script>
 <style lang="less">
@@ -1041,9 +1130,9 @@
     background: #fff;
     z-index: 999;
   }
-  .content{
+  .content {
     padding: 30px;
     height: 750px;
     overflow: auto;
-}
+  }
 </style>