app页面的导出功能

src/api/DesignForm/tableButton.ts

@@ -33,6 +33,20 @@ export const tableButtonList :attrButton[] = [
 		size: "small",
   		icon: "editPen"
 	},
+	{
+		label: "导入",
+		key:"import",
+		type:"danger",
+		size: "small",
+  		icon: "upload"
+	},
+	{
+		label: "导出",
+		key:"export",
+		type:"primary",
+		size: "small",
+  		icon: "download"
+	},
 	{
 		label: "批量删除",
 		key: "del",

src/components/DesignForm/app/index.vue

@@ -52,6 +52,7 @@ import MapPage from "@/components/DesignForm/app/mapPage.vue";
 import CalendarPage from "@/components/DesignForm/app/calendar/calendar1/calendarPage.vue";
 import SearchSelect from "@/components/DesignForm/app/calendar/selectSearch.vue";
 import AKSelect from "@/components/DesignForm/public/form/select.vue";
+import exportPanel from '../exportPanel.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -143,6 +144,9 @@ const tableDataList = ref([]); // 表格行数据
 const currentAsfTableDataList = ref([]); //当前点击的关联表单数据
 const openTaskDrawer = ref(false); //新增数据
 
+//导出操作父元素
+const dynamicVNode = ref<VNode | null>(null) //组件的父组件
+
 const state = reactive({
   loading: false,
   currentPage: 1,
@@ -537,6 +541,10 @@ const setUpClick = (val: string, id: string) => {
   if (val.key == "newAdd") {
     drawerWith.value = container.value?.clientWidth;
     openTaskDrawer.value = true;
+  }else if (val.key === "export"){
+    doExportTableData()
+  }else if (val.key === "import"){
+    alert("appPageImport")
   } else if (val.key == "showQrCode") {
     //liwenxuan 20250114 二维码打印弹窗 start
     //在此组装参数,以生成二维码图片
@@ -947,123 +955,180 @@ const getPageData = () => {
       break;
     default:
       state.loading = true;
-      gainFormPageListCont(sendData)
+      //by han2015, 抽成独立部分，方便其他功能调用
-        .then((data) => {
+      doGainFormPageListCont(sendData).then(datas=>{
-          // console.log("获取列表详细信息----------------->",data)
+        tableDataList.value = datas.list
-
+        state.total=datas.total
-          //liwenxuan 关联表单数据获取 start
+      }).finally(()=>{
-          let dataList = data;
+        //原 finally的处理内容
-          //console.log(dataList)
+        state.loading = false;
-          asfDetails = props.data.columns.filter((item: any) => {
+        asfs = [];
-            return item.fieldClass == "associatedForms";
+        radios = [];
-          });
+        checkboxs = [];
+        switchs = [];
+        selects = [];
+        tables = [];
+        dofs = [];
+        getAsfs();
+      })
+  }
+};
 
-          transferDetails = props.data.columns.filter((item: any) => {
+//表格导出
-            return item.fieldClass == "lowcodeTransfer";
+function doExportTableData(){
-          });
+  function exportFunc(fields:{field:string,label:string}[]){
+    let sendData = {
+      formId: props.formId,
+      page: 1,
+      pagesize: 10000,
+      searchData: json2string(props.searchData),
+    };
+    //全量获取页面的数据
+    doGainFormPageListCont(sendData).then(datas=>{
+      const array: string[] = [];
+      //写入表头行
+      const title:string[] = [];
+      for (let val of fields){
+          title.push(val.label)
+      }
+      array.push(title.join(","))
 
-          if (asfDetails.length > 0 && data.data.list != null) {
+      //写入数据行
-            //console.log(data.data.list)
+      datas.list.forEach((item)=>{
-            //拼装参数,asf值对象数组
+        const line=[];
-            asfQueryParams = [];
+        for (let val of fields){
-            for (let j = 0; j < asfDetails.length; j++) {
+          line.push((item[val.field] as string).replaceAll(",","，"))
-              let asfQueryParamsItem: any = {};
+        }
-              //console.log(asfDetails[j])
+        array.push(line.join(","))
-              asfQueryParamsItem.formId = asfDetails[j].control.formid;
+      })
-              asfQueryParamsItem.field = asfDetails[j].field;
+
-
+      //去掉标题行的统计
-              let asfToSelectIds = [];
+      if((array.length-1)!==datas.total) alert(`实际数据总量：${datas.total}, 导出数据总量：${array.length}`)
-              // console.log(data.data.list)
+      
-              for (let i = 0; i < data.data.list.length; i++) {
+      const filename= props.pickAppMenu.label+".csv"
-                let asfMasterAndAsfId: any = {};
+      const csvString = array.join('\n');
-                asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
+      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
-                asfMasterAndAsfId.asfMasterId = data.data.list[i].id;
+      const link = document.createElement("a");
-
+      if (link.download !== undefined) { // feature detection
-                asfToSelectIds.push(asfMasterAndAsfId);
+          // Browsers that support HTML5 download attribute
-              }
+          const url = URL.createObjectURL(blob);
-              asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
+          link.setAttribute("href", url);
-              asfQueryParams.push(asfQueryParamsItem);
+          link.setAttribute("download", filename);
-            }
+          link.style.visibility = "hidden";
-            let queryCount = 0;
+          document.body.appendChild(link);
-            for (let i = 0; i < asfQueryParams[0].asfToSelectIds.length; i++) {
+          link.click();
-              if (asfQueryParams[0].asfToSelectIds[i].asfId != "") {
+          document.body.removeChild(link);
-                queryCount++;
+      }
+    }).finally(()=>dynamicVNode.value=null)
+  }
+
+  dynamicVNode.value=h(exportPanel,{
+    fields:columnsFilter.value,
+    commitFunc:exportFunc,
+    closeFunc:()=>dynamicVNode.value=null
+  })
+}
+
+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";
+  });
+
+  transferDetails = props.data.columns.filter((item: any) => {
+    return item.fieldClass == "lowcodeTransfer";
+  });
+
+  if (asfDetails.length > 0 && data.data.list != null) {
+    //console.log(data.data.list)
+    //拼装参数,asf值对象数组
+    asfQueryParams = [];
+    for (let j = 0; j < asfDetails.length; j++) {
+      let asfQueryParamsItem: any = {};
+      //console.log(asfDetails[j])
+      asfQueryParamsItem.formId = asfDetails[j].control.formid;
+      asfQueryParamsItem.field = asfDetails[j].field;
+
+      let asfToSelectIds = [];
+      // console.log(data.data.list)
+      for (let i = 0; i < data.data.list.length; i++) {
+        let asfMasterAndAsfId: any = {};
+        asfMasterAndAsfId.asfId = data.data.list[i][asfDetails[j].field];
+        asfMasterAndAsfId.asfMasterId = data.data.list[i].id;
+
+        asfToSelectIds.push(asfMasterAndAsfId);
+      }
+      asfQueryParamsItem.asfToSelectIds = asfToSelectIds;
+      asfQueryParams.push(asfQueryParamsItem);
+    }
+    let queryCount = 0;
+    for (let i = 0; i < asfQueryParams[0].asfToSelectIds.length; i++) {
+      if (asfQueryParams[0].asfToSelectIds[i].asfId != "") {
+        queryCount++;
+      }
+    }
+    //console.log(asfQueryParams)
+    if (queryCount > 0) {
+      //-------------------直接return 异步结果----------------------
+      return await getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
+        //console.log(data)
+        for (let i = 0; i < dataList.data.list.length; i++) {
+          //console.log(dataList.data.list[i])
+          for (let j = 0; j < data.length; j++) {
+            //console.log(data[j])
+            for (let n = 0; n < data[j].list.length; n++) {
+              if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
+                dataList.data.list[i][data[j].field] = data[j].list[n].label;
               }
+              //console.log(data[j].list[n])
             }
-            //console.log(asfQueryParams)
-            if (queryCount > 0) {
-              getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
-                //console.log(data)
-                for (let i = 0; i < dataList.data.list.length; i++) {
-                  //console.log(dataList.data.list[i])
-                  for (let j = 0; j < data.length; j++) {
-                    //console.log(data[j])
-                    for (let n = 0; n < data[j].list.length; n++) {
-                      if (dataList.data.list[i].id == data[j].list[n].asfMasterId) {
-                        dataList.data.list[i][data[j].field] = data[j].list[n].label;
-                      }
-                      //console.log(data[j].list[n])
-                    }
-                  }
-                }
-                tableDataList.value = dataList.data.list;
-              });
-            } else {
-              tableDataList.value = data.data.list;
-            }
-          } else {
-            //console.log(data.data.list)
-            transferDetails.forEach(element => {
-              //console.log(element)
-              data.data.list.forEach((obj: any) => {
-                //console.log(obj)
-                for (const key in obj) {
-                  // 确保只处理对象自身的属性（不包括原型链上的）
-                  if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                      const value = obj[key];
-                      
-                      // 特殊处理数组/嵌套对象（使用JSON格式化）
-                      const formattedValue = 
-                          (Array.isArray(value) || (typeof value === 'object' && value !== null)) 
-                          ? JSON.stringify(value, null, 2) 
-                          : value;
-                      
-                      //console.log(`${key}: ${formattedValue}`);
-                      if(key==element.field){
-                        //console.log(key)
-                        /* console.log(element.control.fixedOptions)
-                        console.log(obj[key]) */
-                        obj[key] = mapIdsToLabels(element.control.fixedOptions,obj[key])
-                      }
-                  }
-              }
-              });
-              
-            });
-            //console.log(transferDetails)
-            //convertIdsToLabels(data.data.list.)
-            tableDataList.value = data.data.list;
           }
+        }
+        return dataList.data;
+      });
+    } 
     
-          //tableDataList.value = data.data.list
+    return data.data;
-          //liwenxuan 关联表单数据获取 end
-          state.total = data.data.total;
-          state.loading = false;
-        })
-        .finally(() => {
-          state.loading = false;
-          asfs = [];
-          radios = [];
-          checkboxs = [];
-          switchs = [];
-          selects = [];
-          tables = [];
-          dofs = [];
-          getAsfs();
-        });
   } 
-};
 
+  //console.log(data.data.list)
+  transferDetails.forEach(element => {
+    //console.log(element)
+    data.data.list.forEach((obj: any) => {
+      //console.log(obj)
+      for (const key in obj) {
+        // 确保只处理对象自身的属性（不包括原型链上的）
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const value = obj[key];
+            
+            // 特殊处理数组/嵌套对象（使用JSON格式化）
+            const formattedValue = 
+                (Array.isArray(value) || (typeof value === 'object' && value !== null)) 
+                ? JSON.stringify(value, null, 2) 
+                : value;
+            
+            //console.log(`${key}: ${formattedValue}`);
+            if(key==element.field){
+              //console.log(key)
+              /* console.log(element.control.fixedOptions)
+              console.log(obj[key]) */
+              obj[key] = mapIdsToLabels(element.control.fixedOptions,obj[key])
+            }
+        }
+    }
+    });
+  });
+  
+  return data.data;
+  
+  //tableDataList.value = data.data.list
+  //liwenxuan 关联表单数据获取 end
+}
 
 interface TreeNode {
     id: string;
@@ -2078,9 +2143,10 @@ const readerColumnSun = (column: any) => {
                   type="primary"
                   @click="showAsfDetailDialog(item, scope, asfQueryParams)"
                 >
-                  {{ scope.row[scope.column.property] }}
+                  {{ scope.row[scope.column.property] }}==
                 </el-link>
               </template>
+              
             </el-table-column>
           </template>
         </el-table>
@@ -2213,6 +2279,10 @@ const readerColumnSun = (column: any) => {
       @searchquery="getListData"
     />
   </div>
+
+  <div v-if="dynamicVNode">
+    <component :is="dynamicVNode" />
+  </div>
   <!-- 2025 liwenxuan 二维码打印 -->
   <el-dialog
     v-model="qrCodesPrintDialogFlag"

src/components/DesignForm/app/nginx.ini

@@ -1,68 +0,0 @@
-location /systemapi {   
-			  #host修改为真实的域名和端口
-			  proxy_set_header   Host             $http_host;
-			  #客户真实ip
-			  proxy_set_header   X-Real-IP        $remote_addr;
-			  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
-			  #客户端真实协议
-			  proxy_set_header   X-Forwarded-Proto  $scheme;
-			  rewrite ^/systemapi/(.*)$ /$1 break;
-			  proxy_pass  http://36.133.126.182:39250;   #设置代理服务器的协义和地址
-			  #proxy_pass  http://120.224.6.6:60001;
-		}
-    location /kpiapi {   
-			  #host修改为真实的域名和端口
-			  proxy_set_header   Host             $http_host;
-			  #客户真实ip
-			  proxy_set_header   X-Real-IP        $remote_addr;
-			  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
-			  #客户端真实协议
-			  proxy_set_header   X-Forwarded-Proto  $scheme;
-			  rewrite ^/kpiapi/(.*)$ /$1 break;
-			  proxy_pass  http://36.133.126.182:6666;   #设置代理服务器的协义和地址
-			 #proxy_pass  http://120.224.6.6:60002;
-		}
-		location /hrapi {   
-			  #host修改为真实的域名和端口
-			  proxy_set_header   Host             $http_host;
-			  #客户真实ip
-			  proxy_set_header   X-Real-IP        $remote_addr;
-			  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
-			  #客户端真实协议
-			  proxy_set_header   X-Forwarded-Proto  $scheme;
-			  rewrite ^/hrapi/(.*)$ /$1 break;
-			  proxy_pass  http://120.224.6.6:39168;   #设置代理服务器的协义和地址
-		}
-		location /api {   
-			  #host修改为真实的域名和端口
-			  proxy_set_header   Host             $http_host;
-			  #客户真实ip
-			  proxy_set_header   X-Real-IP        $remote_addr;
-			  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
-			  #客户端真实协议
-			  proxy_set_header   X-Forwarded-Proto  $scheme;
-			  rewrite ^/api/(.*)$ /$1 break;
-			  proxy_pass  http://36.133.126.182:8888;   #设置代理服务器的协义和地址
-		}
-		location /javasys {   
-			  #host修改为真实的域名和端口
-			  proxy_set_header   Host             $http_host;
-			  #客户真实ip
-			  proxy_set_header   X-Real-IP        $remote_addr;
-			  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
-			  #客户端真实协议
-			  proxy_set_header   X-Forwarded-Proto  $scheme;
-			  rewrite ^/javasys/(.*)$ /$1 break;
-			  proxy_pass  http://36.133.126.182:8111;   #设置代理服务器的协义和地址
-		}
-		location /javasys/lowCode {   
-			  #host修改为真实的域名和端口
-			  proxy_set_header   Host             $http_host;
-			  #客户真实ip
-			  proxy_set_header   X-Real-IP        $remote_addr;
-			  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
-			  #客户端真实协议
-			  proxy_set_header   X-Forwarded-Proto  $scheme;
-			  rewrite ^/javasys/(.*)$ /$1 break;
-			  proxy_pass  http://36.133.126.182:39999;   #设置代理服务器的协义和地址
-		}

src/components/DesignForm/exportPanel.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+
+import { ElDialog } from 'element-plus';
+
+const props = withDefaults(defineProps<{
+  fields:any[],
+  commitFunc:(fields:{field:string,label:string}[])=>void, 
+  closeFunc:()=>void,  //父级只需销毁组件
+}>(),{})
+
+const checkList=ref<string[]>([])
+
+onMounted(()=>{
+  props.fields.forEach((val)=>{
+    if (val.attribute===''){
+      checkList.value.push(val.field)
+    }
+  })
+})
+
+function handleData(){
+  const arr:{field:string,label:string}[]=[]
+  props.fields.forEach((val)=>{
+    if(checkList.value.includes(val.field)){
+      arr.push({ field:val.field, label:val.label })
+    }
+  })
+  props.commitFunc(arr)
+}
+</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;">
+      <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>
+    <el-button type="primary" @click="handleData">导出</el-button>
+  </el-dialog>
+</template>
+<style>
+    /* dialog的body内容样式设置*/
+    .el-dialog__body{
+        height: 96%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .el-dialog{
+      /* 让整个弹出窗口位置更高一些*/
+      --el-dialog-margin-top:7vh; 
+    }
+    
+</style>

src/components/DesignForm/tableListPage/index.vue

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