按钮组对接发布，导出功能实现

src/api/formrender/index.ts

@@ -12,8 +12,9 @@ enum Api {
   GETFORMPAGEDATA = '/api/FormScheme/GetFormDataPage?id=', //获取表单分页数据
   SAVEFORMDATA = '/api/FormScheme/SaveForm', //新增编辑自定义表单
   DELFORMSDATA = '/api/FormScheme/DeleteFormData?id=', //删除表单数据
-  GETFORMSDATADETAIL = '/api/FormScheme/GetFormData', //删除表单数据详情
+  GETFORMSDATADETAIL = '/api/FormScheme/GetFormData', //表单数据详情
   getFormData = '/api/FormScheme/GetFormData', //获取单行数据
+  exportForm = '/api/FormModule/Export?id=', //导出
 }
 
 /**
@@ -40,3 +41,9 @@ export const getFormData = (params: getFormsParams) => {
     url: `${Api.getFormData}?id=${params.id}&key=${params.key}&keyValue=${params.keyValue}`,
   });
 };
+export const exportForm = (params: AccountParams) =>
+  defHttp.post<AccountListGetResultModel[]>({
+    url: Api.exportForm + params.id + '&mid=' + params.mid + '&code=' + params.code,
+    responseType: 'blob',
+    params,
+  });

src/utils/http/axios/index.ts

@@ -50,6 +50,9 @@ const transform: AxiosTransform = {
       // return '[HTTP] Request has no return value';
       throw new Error(t('sys.api.apiRequestFailed'));
     }
+    if (!data.code && !data.result) {
+      return data;
+    }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
     const { code, result, message } = data;
     // 这里逻辑可以根据项目进行修改

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

@@ -93,6 +93,7 @@
     getFormsPageData,
     delFormsData,
     getFormData,
+    exportForm,
   } from '@/api/formrender/index';
   import { getOutKeyList } from '@/api/formdesign/index';
   import { getGeom } from '@/api/sys/layerManagement';
@@ -113,12 +114,12 @@
   const mapFormData = ref<Object>({});
   const { createConfirm, createMessage } = useMessage();
   const route = useRoute();
-  const btnArr: any = [
+  const btnArr: any = ref([
     { label: '新增', prop: 'Add', class: 'primary' },
     { label: '编辑', prop: 'Edit', class: 'success' },
     { label: '删除', prop: 'Delete', class: 'error' },
     { label: '详情', prop: 'Details', class: 'default' },
-  ];
+  ]);
   const mapSetData = ref({
     width: 100,
   });
@@ -149,6 +150,7 @@
   const isUpdate = ref(false); //是否是编辑
   const infoUseSubTableData = ref();
   const infoUseMainTableData = ref({});
+  const exportParams: any = ref();
   // 展示的图层列表
   const layers = reactive();
   const geometryForm = ref({});
@@ -289,6 +291,7 @@
         },
         queryJson: JSON.stringify(querys),
       };
+      exportParams.value = temp;
       return temp;
     },
     afterFetch: () => {
@@ -571,6 +574,29 @@
       case 'Import':
         break;
       case 'Export':
+        let params = exportParams.value;
+        params.code = paramsCode;
+        console.log('params', params);
+        exportForm(params).then((res) => {
+          console.log('aaaa', res);
+          const content = res;
+          const blob = new Blob([content]);
+          const fileName = '数据导出' + getToday() + '.xlsx';
+          if ('download' in document.createElement('a')) {
+            // 非IE下载
+            const elink = document.createElement('a');
+            elink.download = fileName;
+            elink.style.display = 'none';
+            elink.href = URL.createObjectURL(blob);
+            document.body.appendChild(elink);
+            elink.click();
+            URL.revokeObjectURL(elink.href); // 释放URL 对象
+            document.body.removeChild(elink);
+          } else {
+            // IE10+下载
+            navigator.msSaveBlob(blob, fileName);
+          }
+        });
         break;
       default:
         break;
@@ -579,6 +605,25 @@
   const chooseLayer = ref<string>('');
   const geomfield = ref<string>('');
 
+  function getToday() {
+    var date = new Date();
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var dates = date.getDate();
+    var time = date.getHours();
+    var minutes = date.getMinutes();
+    var seconds = date.getSeconds();
+
+    if (month >= 1 && month <= 9) {
+      month = '0' + month;
+    }
+    if (dates >= 0 && dates <= 9) {
+      dates = '0' + dates;
+    }
+    let datatime = year + '0' + month + '0' + dates + time + '0' + minutes + '0' + seconds;
+    return datatime;
+  }
+
   function findValue(obj, targetKey) {
     for (var key in obj) {
       if (typeof obj[key] === 'object') {
@@ -597,7 +642,7 @@
   }
 
   async function handlerShowGeomtrys(currentNode, rows) {
-    console.log("currentNode222",currentNode.value);
+    console.log('currentNode222', currentNode.value);
     findValue(currentNode.value.schemas, 'component');
 
     let info = currentNode.value.schemas?.find((item, index) => {
@@ -673,6 +718,7 @@
       let columnObj = JSON.parse(res.entity.scheme);
       let formObj = JSON.parse(res.formScheme.scheme);
       console.log('formObj', formObj);
+      console.log('columnObj', columnObj);
       // 将card嵌套起来
       if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {
         formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
@@ -721,6 +767,7 @@
       codeId.value = res.entity.id;
       paramsId.value = res.formScheme.id;
       btnList.value = columnObj.table.btns;
+      btnArr.value = columnObj.table.btns;
       if (columnObj.table.columns) {
         columnObj.table.columns.forEach((item) => {
           callColumns.push({

src/views/demo/onlineform/formModule/modalDesign.vue

@@ -156,7 +156,7 @@
         prop: 'Import',
         icon: 'ant-design:upload-outlined',
         isRowBtn: false,
-        class: 'primary',
+        class: 'success',
         sort: 1,
       },
       {
@@ -192,7 +192,7 @@
         prop: 'Details',
         icon: 'ant-design:align-center-outlined',
         isRowBtn: true,
-        class: 'primary',
+        class: 'default',
         sort: 5,
       },
     ],