Explorar el Código

在线表格请求添加file

dengrui hace 11 meses
padre
commit
3963e2ac76

+ 3 - 0
src/api/prosteps/excel.ts

@@ -12,5 +12,8 @@ export function setExcelData(data: any) {
     url: "/api/v1/ProcessFormData/add",
     method: "post",
     data: data,
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
   });
 }

+ 44 - 2
src/components/ExcelView/export.js

@@ -45,7 +45,49 @@ function exportExcel(luckysheet, name, excelType) {
   });
   return buffer;
 }
-
+function exportBlobExcel(luckysheet, name, excelType) {
+  // 1.创建工作簿,可以为工作簿添加属性
+  const workbook = new Excel.Workbook();
+  // 2.创建表格,第二个参数可以配置创建什么样的工作表
+  luckysheet.forEach(function (table) {
+    // debugger
+    if (table.data.length === 0) return true;
+    const worksheet = workbook.addWorksheet(table.name);
+    const merge = (table.config && table.config.merge) || {}; //合并单元格
+    const borderInfo = (table.config && table.config.borderInfo) || {}; //边框
+    const columnWidth = (table.config && table.config.columnlen) || {}; //列宽
+    const rowHeight = (table.config && table.config.rowlen) || {}; //行高
+    const frozen = table.frozen || {}; //冻结
+    const rowhidden = (table.config && table.config.rowhidden) || {}; //行隐藏
+    const colhidden = (table.config && table.config.colhidden) || {}; //列隐藏
+    const filterSelect = table.filter_select || {}; //筛选
+    const hide = table.hide; //工作表 sheet 1隐藏
+    if (hide === 1) {
+      // 隐藏工作表
+      worksheet.state = "hidden";
+    }
+    setStyleAndValue(table.data, worksheet);
+    setMerge(merge, worksheet);
+    setBorder(borderInfo, worksheet);
+    setImages(table, worksheet, workbook);
+    setColumnWidth(columnWidth, worksheet);
+    //行高设置50导出后在ms-excel中打开显示25,在wps-excel中打开显示50这个bug不会修复
+    setRowHeight(rowHeight, worksheet, excelType);
+    setFrozen(frozen, worksheet);
+    setRowHidden(rowhidden, worksheet);
+    setColHidden(colhidden, worksheet);
+    setFilter(filterSelect, worksheet);
+    return true;
+  });
+  const buffer = workbook.xlsx.writeBuffer().then((data) => {
+    // console.log('data', data)
+    const blob = new Blob([data], {
+      type: "application/vnd.ms-excel;charset=utf-8",
+    });
+    return blob;
+  });
+  return buffer;
+}
 /**
  * 列宽
  * @param columnWidth
@@ -850,4 +892,4 @@ function colorRGBtoHex(color) {
   var b = parseInt(rgb[2]);
   return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
-export { exportExcel };
+export { exportExcel, exportBlobExcel };

+ 8 - 2
src/components/ExcelView/index.vue

@@ -45,7 +45,7 @@
 
 <script setup>
 import { onMounted, ref, watch } from "vue";
-import { exportExcel } from "./export";
+import { exportExcel, exportBlobExcel } from "./export";
 import LuckyExcel from "luckyexcel";
 import resData from "./resetData";
 
@@ -188,6 +188,12 @@ const leadingExcel = (item, fileList) => {
 const downloadExcel = () => {
   exportExcel(luckysheet.getAllSheets(), "导出表格");
 };
+//获取当前表格数据的blob
+const downloadBlobExcel = async () => {
+  const sheets = luckysheet.getAllSheets();
+  const [blob] = await Promise.all([exportBlobExcel(sheets, "导出表格")]);
+  return blob;
+};
 //获取此时表格数据
 const confirm = () => emits("confirm", luckysheet.getAllSheets());
 const getData = () => luckysheet.getAllSheets();
@@ -238,7 +244,7 @@ const setVerification = () => {
     }
   }
 };
-defineExpose({ confirm, reset, saveCellData, getData });
+defineExpose({ confirm, reset, saveCellData, getData, downloadBlobExcel });
 onMounted(() => {
   if (props.data == null) {
     inName.value = "表格模版";

+ 16 - 12
src/views/pro-steps/components/excel.vue

@@ -163,19 +163,23 @@ const useExcelHook = () => {
     excelViewStatus.value = true;
   };
   const submitData = async () => {
-    excelData.value = excelViewRef.value.getData();
-    const { data, code } = await setExcelData({
-      excelData: excelData.value,
-      excelFormId: excelSelectRow.value.excelFormId,
-      formName: excelSelectRow.value.formName,
-      formType: excelSelectRow.value.formType,
-      processId: store.scanInfo.id,
+    const blobPromise = excelViewRef.value.downloadBlobExcel();
+    blobPromise.then(async (blob) => {
+      const formData = new FormData();
+      excelData.value = excelViewRef.value.getData();
+      formData.append("file", blob);
+      formData.append("excelData", JSON.stringify(excelData.value)); // 确保非文件数据被正确格式化
+      formData.append("excelFormId", excelSelectRow.value.excelFormId);
+      formData.append("formName", excelSelectRow.value.formName);
+      formData.append("formType", excelSelectRow.value.formType);
+      formData.append("processId", store.scanInfo.id);
+      const { data, code } = await setExcelData(formData);
+      if (code == "200") {
+        ElMessage.success("操作成功!");
+        resetData();
+        dataList();
+      }
     });
-    if (code == "200") {
-      ElMessage.success("操作成功!");
-      resetData();
-      dataList();
-    }
   };
   return {
     excelViewStatus,