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,8 +955,82 @@ const getPageData = () => {
       break;
     default:
       state.loading = true;
-      gainFormPageListCont(sendData)
+      //by han2015, 抽成独立部分，方便其他功能调用
-        .then((data) => {
+      doGainFormPageListCont(sendData).then(datas=>{
+        tableDataList.value = datas.list
+        state.total=datas.total
+      }).finally(()=>{
+        //原 finally的处理内容
+        state.loading = false;
+        asfs = [];
+        radios = [];
+        checkboxs = [];
+        switchs = [];
+        selects = [];
+        tables = [];
+        dofs = [];
+        getAsfs();
+      })
+  }
+};
+
+//表格导出
+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(","))
+
+      //写入数据行
+      datas.list.forEach((item)=>{
+        const line=[];
+        for (let val of fields){
+          line.push((item[val.field] as string).replaceAll(",","，"))
+        }
+        array.push(line.join(","))
+      })
+
+      //去掉标题行的统计
+      if((array.length-1)!==datas.total) alert(`实际数据总量：${datas.total}, 导出数据总量：${array.length}`)
+      
+      const filename= props.pickAppMenu.label+".csv"
+      const csvString = array.join('\n');
+      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
+      const link = document.createElement("a");
+      if (link.download !== undefined) { // feature detection
+          // Browsers that support HTML5 download attribute
+          const url = URL.createObjectURL(blob);
+          link.setAttribute("href", url);
+          link.setAttribute("download", filename);
+          link.style.visibility = "hidden";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+      }
+    }).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
@@ -992,7 +1074,8 @@ const getPageData = () => {
     }
     //console.log(asfQueryParams)
     if (queryCount > 0) {
-              getAsfDataTitlesByIds(asfQueryParams).then(({ data }) => {
+      //-------------------直接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])
@@ -1006,12 +1089,13 @@ const getPageData = () => {
             }
           }
         }
-                tableDataList.value = dataList.data.list;
+        return dataList.data;
       });
-            } else {
-              tableDataList.value = data.data.list;
     } 
-          } else {
+    
+    return data.data;
+  } 
+
   //console.log(data.data.list)
   transferDetails.forEach(element => {
     //console.log(element)
@@ -1038,32 +1122,13 @@ const getPageData = () => {
         }
     }
     });
-              
   });
-            //console.log(transferDetails)
+  
-            //convertIdsToLabels(data.data.list.)
+  return data.data;
-            tableDataList.value = data.data.list;
-          }
   
   //tableDataList.value = data.data.list
   //liwenxuan 关联表单数据获取 end
-          state.total = data.data.total;
+}
-          state.loading = false;
-        })
-        .finally(() => {
-          state.loading = false;
-          asfs = [];
-          radios = [];
-          checkboxs = [];
-          switchs = [];
-          selects = [];
-          tables = [];
-          dofs = [];
-          getAsfs();
-        });
-  }
-};
-
 
 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
     //在此组装参数,以生成二维码图片