支持子表单数据内容的导出

src/components/DesignForm/app/index.vue

@@ -144,7 +144,7 @@ const tableDataList = ref([]); // 表格行数据
 const currentAsfTableDataList = ref([]); //当前点击的关联表单数据
 const openTaskDrawer = ref(false); //新增数据
 
-//导出操作父元素
+//导出窗口的父元素
 const dynamicVNode = ref<VNode | null>(null) //组件的父组件
 
 const state = reactive({
@@ -858,6 +858,21 @@ const columnsFilter = computed(() => {
   }
   console.log("获取表格头内容", props.data.columns);
 });
+
+const subTableFieldsFilter=computed(()=>{
+  const arr:{table:string,field:string,label:string}[]=[]
+  const names:string[]=[]
+  props.fieldsDetailList.forEach((item:any) => {
+    if(item.type==="table"){
+      names.push(item.name)
+      item.list.forEach((sub: any) => {
+        arr.push({table:item.name, field: sub.name, label: sub.item.label})
+      })
+    }
+  })
+  return {tables:names,fields:arr}
+})
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-01 14:14:36
@@ -976,7 +991,8 @@ const getPageData = () => {
 
 //表格导出
 function doExportTableData(){
-  function exportFunc(fields:{field:string,label:string}[]){
+  //fields表示主表单的导出字段，subs表示主表单包含的子表格的导出字段
+  function exportFunc(fields:{field:string,label:string}[],subs:{table:string,field:string,label:string}[]){
     let sendData = {
       formId: props.formId,
       page: 1,
@@ -991,14 +1007,60 @@ function doExportTableData(){
       for (let val of fields){
           title.push(val.label)
       }
+      for (let val of subs){
+          title.push(val.label)
+      }
       array.push(title.join(","))
 
       //写入数据行
       datas.list.forEach((item)=>{
         const line=[];
+        let maxline=0;
+        //写主表列
         for (let val of fields){
           line.push((item[val.field] as string).replaceAll(",","，"))
         }
+
+        //写子表列
+        if (subs.length>0){
+          //计算所有子列表的最大行数
+          for (let tab of subTableFieldsFilter.value.tables){
+            if(item[tab] && item[tab].length>maxline) maxline=item[tab].length
+          }
+          //全都是空的
+          if(maxline===0){
+             array.push(line.join(",")+","+Array(subs.length).fill(""))
+             return
+          }
+
+          //除第一行数据包含子表数据外，其他行都省略主表字段数据，用spaceprefix填充，避免重复
+          const spacePrefix=Array(line.length).fill("")
+
+          for(let i=0;i<maxline;i++){
+            const row:any[]=[]
+            subTableFieldsFilter.value.tables.forEach(name => {
+              if(item[name] && item[name].length-1>=i){
+                //添加实际数据
+                subs.filter(v=>v.table===name).forEach(f=>{
+                  row.push(item[name][i][f.field])
+                })
+              }else{
+                //添加字段长度的N个空列
+                row.push(...(Array(subs.filter(v=>v.table===name).length).fill("")))
+              } 
+            })
+            
+            //写入总csv数组
+            if(i===0){
+              array.push(line.join(",")+","+row.join(","))
+            }else{
+              array.push(spacePrefix+","+row.join(","))
+            }
+          }
+
+          return 
+        }
+        //没有子表
         array.push(line.join(","))
       })
 
@@ -1024,6 +1086,7 @@ function doExportTableData(){
 
   dynamicVNode.value=h(exportPanel,{
     fields:columnsFilter.value,
+    subFields:subTableFieldsFilter.value.fields,
     commitFunc:exportFunc,
     closeFunc:()=>dynamicVNode.value=null
   })
@@ -1032,9 +1095,6 @@ function doExportTableData(){
 async function doGainFormPageListCont(sendData:any){
   const data =await gainFormPageListCont(sendData)
   // console.log("获取列表详细信息----------------->",data)
-
-  //liwenxuan 关联表单数据获取 start
-  let dataList = data;
   //console.log(dataList)
   asfDetails = props.data.columns.filter((item: any) => {
     return item.fieldClass == "associatedForms";
@@ -1074,6 +1134,8 @@ async function doGainFormPageListCont(sendData:any){
     }
     //console.log(asfQueryParams)
     if (queryCount > 0) {
+      //liwenxuan 关联表单数据获取 start
+      let dataList = data;
       //-------------------直接return 异步结果----------------------
       return await getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
         //console.log(data)

src/components/DesignForm/exportPanel.vue

@@ -4,11 +4,15 @@ import { ElDialog } from 'element-plus';
 
 const props = withDefaults(defineProps<{
   fields:any[],
-  commitFunc:(fields:{field:string,label:string}[])=>void, 
+  subFields:any[],
+  commitFunc:(fields:{field:string,label:string}[],subs:{table:string,field:string,label:string}[])=>void, 
   closeFunc:()=>void,  //父级只需销毁组件
 }>(),{})
 
-const checkList=ref<string[]>([])
+//主表字段
+const checkList=ref<string[]>([]) 
+//子表字段
+const subCheckList=ref<string[]>([]) 
 
 onMounted(()=>{
   props.fields.forEach((val)=>{
@@ -16,28 +20,48 @@ onMounted(()=>{
       checkList.value.push(val.field)
     }
   })
+  //初始化子表的字段
+  props.subFields.forEach((val)=>{
+      subCheckList.value.push(val.field)
+  })
 })
 
 function handleData(){
   const arr:{field:string,label:string}[]=[]
+  const sub:{table:string,field:string,label:string}[]=[]
   props.fields.forEach((val)=>{
     if(checkList.value.includes(val.field)){
-      arr.push({ field:val.field, label:val.label })
+      arr.push(val)
+    }
+  })
+
+  //收集子表需要导出的字段
+  props.subFields.forEach((val)=>{
+    if(subCheckList.value.includes(val.field)){
+      sub.push(val)
     }
   })
-  props.commitFunc(arr)
+  props.commitFunc(arr,sub)
 }
 </script>
 
 <template>
   <el-dialog :model-value="true" :style="{height: '60%',width:'60%'}" @close="props.closeFunc">
-    <h3>请选择导出的字段</h3>
-    <div style="display: flex;height: 60%;margin: 20px;">
+    <div style="display: flex; flex-direction:column;width: 80%; height: 60%;margin: 20px;">
+      <h3>请选择主表单导出的字段</h3>
       <el-checkbox-group v-model="checkList">
         <template v-for="item in props.fields">
           <el-checkbox v-if="item.attribute===''" :key="item.field" :label="item.label" :value="item.field" />
         </template>
       </el-checkbox-group>
+
+      <div v-if="props.subFields.length>0" style="margin-top: 40px;">
+        <h3>请选择子表导出的字段</h3>
+        <el-checkbox-group v-model="subCheckList">
+            <el-checkbox v-for="item in props.subFields" :key="item.field" :label="item.label" :value="item.field" />
+        </el-checkbox-group>  
+      </div>
+
     </div>
     <el-button type="primary" @click="handleData">导出</el-button>
   </el-dialog>

src/components/DesignForm/tableListPage/index.vue

@@ -539,9 +539,9 @@ const setUpClick = (val: string, id: string) => {
     drawerWith.value = container.value?.clientWidth;
     openTaskDrawer.value = true;
   }else if (val.key === "export"){
-    alert("tableListExport")
+    alert("请在非编辑模式操作")
   }else if (val.key === "import"){
-    alert("tableListImport")
+    alert("请在非编辑模式操作")
   } else if (val.key == "showQrCode") {
     //liwenxuan 20250114 二维码打印弹窗 start
     //在此组装参数,以生成二维码图片