导入导出功能

src/common/tableFileHandle.js

 import * as XLSX from "xlsx";
 // 导入excel文件显示到前端页面
-const importTableFile = async (file) => {
+const getTableFileData = async (file, tableColumns) => {
     const data = await readFile(file.raw);
     // 使用 xlsx 解析
     let workbook = XLSX.read(data, {
@@ -8,7 +8,24 @@ const importTableFile = async (file) => {
         cellDates: true,
         cellStyles: true
     });
-    console.log(workbook);
+    const sheetName = workbook.SheetNames[0];
+    const sheet = workbook.Sheets[sheetName];
+    const rawData = XLSX.utils.sheet_to_json(sheet, {
+        header: 1,
+        defval: ""
+    });
+    let list = [];
+    const [head, ...fileData] = rawData;
+    fileData && fileData.map(item => {
+        let obj = {};
+        tableColumns.map(column => {
+            let index = head.indexOf(column.label);
+            let def = column.type === "number" ? null : "";
+            obj[column.prop] = index != -1 ? item[index] || def : def;
+        })
+        list.push(obj)
+    })
+    return list;
 };
 const readFile = (file) => {
     return new Promise((resolve, reject) => {
@@ -23,7 +40,7 @@ const exportTableFile = (tableData, tableColumns, title, fileName) => {
     const wb = XLSX.utils.book_new()
         
     // 2. 准备数据
-    let wsData = [[title], []]
+    let wsData = title ? [[title]] : []
     
     // 添加表头
     if (tableColumns && tableColumns.length > 0) {
@@ -64,9 +81,11 @@ const exportTableFile = (tableData, tableColumns, title, fileName) => {
         ws['!cols'] = colWidths
     }
     // 合并标题单元格
+    if (title) {
         ws['!merges'] = [
             XLSX.utils.decode_range('A1:Q1') // 合并第一行的 A-E 列
         ]
+    }
     // 5. 将工作表添加到工作簿
     XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
     
@@ -88,6 +107,6 @@ const formatCellValue = (value, formatter) => {
     return value
 }
 export{
-    importTableFile,
+    getTableFileData,
     exportTableFile
 }
\ No newline at end of file

src/views/investingManage/addRisk.vue

@@ -107,6 +107,23 @@
                                         <el-col :span="24">
                                             <el-form-item label="风险处置情况" :label-width="100"></el-form-item>
                                             <div class="tab-handle">
+                                                <el-button type="primary" size="small"
+                                                    @click="exportTableData" :disabled="!fxczqkData.length"
+                                                >导出</el-button>
+                                                <el-upload
+                                                    ref="uploadRef"
+                                                    class="upload-demo"
+                                                    action=""
+                                                    :auto-upload="false"
+                                                    :on-change="importTableData"
+                                                    :show-file-list="false"
+                                                >
+                                                    <template #trigger>
+                                                        <el-button type="primary" size="small"
+                                                            style="margin: 0 12px;"
+                                                        >导入</el-button>
+                                                    </template>
+                                                </el-upload>
                                                 <el-button type="primary" size="small" @click="addFxczqk">新增</el-button>
                                             </div>
                                             <el-table :data="fxczqkData" style="width: 100%" empty-text="暂无数据" border>
@@ -228,6 +245,7 @@
     import { useRouter, useRoute } from "vue-router";
     import { ElMessage, ElMessageBox } from "element-plus";
     import { useUserStore } from "@/stores/user.js";
+    import { getTableFileData, exportTableFile } from "../../common/tableFileHandle";
     const userStore = useUserStore();
     const router = useRouter();
     const route = useRoute();
@@ -329,6 +347,67 @@
             fxczqkData.value.splice(index, 1);
         })
     }
+    const tableColumns = [
+        {
+            prop: "nd",
+            label: "年度"
+        },
+        {
+            prop: "mbfj",
+            label: "目标分解"
+        },
+        {
+            prop: "jzqk",
+            label: "进展情况"
+        },
+        {
+            prop: "fxdj",
+            label: "风险等级"
+        },
+        {
+            prop: "fxfl",
+            label: "风险分类"
+        },
+        {
+            prop: "fxgk",
+            label: "风险概况"
+        },
+        {
+            prop: "kzcs",
+            label: "控制措施"
+        },
+        {
+            prop: "czjz",
+            label: "处置进展"
+        },
+        {
+            prop: "yjzgwcsj",
+            label: "预计整改完成时间"
+        },
+        {
+            prop: "fxsjje",
+            label: "风险涉及金额",
+            type: "number"
+        },
+        {
+            prop: "cxgl",
+            label: "出险概率"
+        },
+        {
+            prop: "fxfxfs",
+            label: "风险发现方式"
+        }
+    ];
+
+    const importTableData = (file) => {
+        getTableFileData(file, tableColumns).then(res => {
+            fxczqkData.value = fxczqkData.value.concat(res);
+        });
+
+    }
+    const exportTableData = () => {
+        exportTableFile(fxczqkData.value, tableColumns, "", "风险处置情况")
+    };
 
     const backClick = () => {
         router.back(-1)