表单发布后导入功能添加

src/api/formrender/index.ts

@@ -15,6 +15,9 @@ enum Api {
   GETFORMSDATADETAIL = '/api/FormScheme/GetFormData', //表单数据详情
   getFormData = '/api/FormScheme/GetFormData', //获取单行数据
   exportForm = '/api/FormModule/Export?id=', //导出
+  DownloadTemplate = '/api/FormScheme/DownTemplateFile?id=', //下载模板
+  UploadFile = '/api/Files/Upload', //上传文件
+  UploadData = '/api/FormScheme/ImportExcel', //导入
 }
 
 /**
@@ -47,3 +50,20 @@ export const exportForm = (params: AccountParams) =>
     responseType: 'blob',
     params,
   });
+export const DownloadTemplate = (id: string) => 
+  defHttp.get<AccountListGetResultModel[]>({
+    url: Api.DownloadTemplate + id,
+    responseType: 'blob',
+  })
+export const uploadFile = (params) => 
+  defHttp.post<AccountListGetResultModel[]>({
+    url: Api.UploadFile,
+    params,
+    headers: {
+      'Content-type': 'multipart/form-data',
+    },
+  })
+export const uploadData = (params) => 
+  defHttp.post<AccountListGetResultModel[]>({
+    url: `${Api.UploadData}?id=${params.id}&pkey=${params.pkey}&path=${params.path}`,
+  })

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

@@ -0,0 +1,44 @@
+<template>
+  <a-modal width="80%" v-model:open="props.open" title="错误信息" :footer="null" @cancel="emits('update:open', false)" :destroyOnClose="true">
+    <div class="content">
+      <a-table :dataSource="props.data" :columns="columns" :pagination="false" :scroll="{ y: 630 }"/>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch } from "vue"
+const props = defineProps(["open", "data"])
+const emits = defineEmits(["update:open"])
+interface columnsType {
+  title: string,
+  dataIndex: string,
+  key: string,
+  width?: number,
+}
+const columns = ref<columnsType[]>([])
+watch(() => props.data, ()=> {
+  columns.value = []
+  Object.keys(props.data[0]).forEach(key => {
+    if(key !== '导入错误'){
+      columns.value.push({
+        title: key,
+        dataIndex: key,
+        key: key,
+        width: 120,
+      })
+    }
+  })
+  columns.value.push({
+    title: '导入错误',
+    dataIndex: '导入错误',
+    key: '导入错误',
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.content{
+  padding: 10px;
+}
+</style>

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

@@ -0,0 +1,124 @@
+<template>
+  <div class="content">
+    <a-upload
+      v-model:file-list="fileList"
+      :customRequest="handleCustomRequest"
+      @change="handleChange"
+    >
+      <a-button type="primary">点击上传</a-button>
+      <template #itemRender="{ file }">
+        <div class="upload-file-item">
+          <div style="display: flex; justify-content: space-between;">
+            <div>
+              <FileTextOutlined  style="margin-right: 5px"/>
+              {{  file.name }}
+            </div>
+            <div>
+              <span style="color: #52c41a;">{{ file.success? file.success: 0 }}</span>
+              / 
+              <span style="color: #f52222;">{{ file.fail? file.fail: 0}}</span>
+              <span style="color: #f52222;margin: 0 5px" v-if="file.fail" @click="showErrorFunction(file.failData)">查看错误</span>
+            </div>
+          </div>
+          <a-progress :percent="file.percent" />
+        </div>
+      </template>
+    </a-upload>
+    <a-button class="downloadTemplateButton" @click="downloadTemplate">下载模板</a-button>
+  </div>
+  <ShowErrorList v-model:open="showError" :data="showErrorList"/>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, ref } from "vue"
+import { DownloadTemplate, uploadFile, uploadData } from '@/api/formrender/index';
+import { FileTextOutlined } from '@ant-design/icons-vue';
+import ShowErrorList from './ShowErrorList/index.vue'
+
+const props = defineProps(["open", "paramsId", "pkey"])
+const emits = defineEmits(["update:open"])
+const fileList = ref([])
+const showError = ref(false)
+const showErrorList = ref([])
+const handleChange = ({ file, fileList }) => {
+  if (file.status !== 'uploading') {
+    console.log(file, fileList);
+  }
+};
+
+const downloadTemplate = () => {
+  DownloadTemplate(props.paramsId).then(res => {
+    console.log(res)
+    const content = res;
+    const blob = new Blob([content]);
+    const fileName = '数据模板导出.xls';
+    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);
+    }
+  })
+}
+const handleCustomRequest = (file) => {
+  const formData = new FormData();
+  formData.append('files', file.file);
+  uploadFile(formData).then(res => {
+    console.log(res)
+    let params = {
+      id: props.paramsId,
+      pkey: props.pkey,
+      path: res[0].filePath
+    }
+    file.onSuccess(res, file); 
+    uploadData(params).then(response => {
+      console.log('response',response)
+      fileList.value.forEach(item => {
+        if(item.uid === file.file.uid){
+          item.success = response.success,
+          item.fail = response.fail,
+          item.failData = response.data
+        }
+      })
+    })
+  }).catch(err => {
+    file.onError(err); 
+  })
+}
+const showErrorFunction = (list) => {
+  showError.value = true
+  showErrorList.value = list
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  padding: 10px;
+  height: 261px;
+  position: relative;
+  .button-box{
+    display: flex;
+    justify-content: space-between;
+  }
+  .downloadTemplateButton{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+  .upload-file-item{
+    cursor: pointer;
+  }
+  .upload-file-item:hover{
+    background-color: #f5f5f5;
+    color: #1890ff;
+  }
+}
+</style>

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

@@ -86,6 +86,9 @@
         <InfoCallModal :data="infoCallModalData" />
       </div>
     </a-modal>
+    <a-modal v-model:open="importOpen" title="导入" :footer="null" @cancel="importOpen = false" :destroyOnClose="true">
+      <ImportModal v-model:open="importOpen" :paramsId="paramsId" :pkey="pkey" />
+    </a-modal>
 
     <a-modal
       width="100%"
@@ -133,6 +136,7 @@
   import { v4 as uuidv4 } from 'uuid';
   import { changeCardStructure, cardNestStructure } from '@/views/demo/onlineform/util.ts';
   import { useFormCallStore } from '@/store/modules/formCall.ts';
+  import ImportModal from './ImportModal/index.vue'
   const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
   const mapFormShow = ref<boolean>(false);
   const mapFormData = ref<Object>({});
@@ -148,6 +152,8 @@
   const mapSetData = ref({
     width: 100,
   });
+  const importOpen = ref (false)
+  const pkey = ref("")
   const infoCallModalOpen = ref(false);
   const infoCallModalData = ref({});
   const selectedSubTableDataId = ref('');
@@ -601,6 +607,7 @@
         }
         break;
       case 'Import':
+      importOpen.value = true
         break;
       case 'Export':
         let params = exportParams.value;
@@ -746,6 +753,7 @@
     getFormsDesignData(params).then((res: Recordable) => {
       let columnObj = JSON.parse(res.entity.scheme);
       let formObj = JSON.parse(res.formScheme.scheme);
+      pkey.value = formObj.primaryKey
       console.log('formObj', formObj);
       console.log('columnObj', columnObj);
       if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 0) {