Project Init

src/components/common/buttonExportExcel.vue

@@ -0,0 +1,77 @@
+<template>
+  <el-button :plain="props.plain" :type="props.type" :size="props.size" @click="btnClick"></el-button>
+  <el-dialog title="导出表格" width="500px" v-model="showDialog">
+    <el-table border :data="columns" @selection-change="selectRow">
+      <el-table-column type="selection"></el-table-column>
+      <el-table-column prop="label" label="列名"></el-table-column>
+      <el-table-column prop="name" label="数据源"></el-table-column>
+    </el-table>
+    <template #footer>
+      <el-button type="info" @click="showDialog=false">取消</el-button>
+      <el-button type="primary" @click="submit">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { exportExcel } from "/@/utils/excel";
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+let showDialog = ref(false);
+let data = ref([]);
+let columns = ref([]);
+let selectColumns = ref([]);
+
+
+const props = defineProps({
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: "success"
+  },
+  size: {
+    type: String,
+    default: "default"
+  }
+
+});
+
+defineExpose({
+  open
+});
+
+function open(d, c) {
+  showDialog.value = true;
+  data.value = d;
+  columns.value = c;
+  selectColumns.value = [];
+}
+
+function selectRow(e) {
+  selectColumns.value = e;
+}
+
+function submit() {
+  try {
+    exportExcel(data.value, selectColumns.value);
+  } catch (e) {
+    ElMessage({ type: "error", message: e, grouping: true });
+  }
+}
+
+const emit = defineEmits(["click"]);
+
+function btnClick() {
+  emit("click");
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

src/utils/excel.js

@@ -1,50 +1,41 @@
 import * as XLSX from "xlsx";
 
-/**
- *
- * @param json 数据源
- * @param name 表名
- * @param titleArr 列名集合
- * @param sheetName 分页名
- */
-export const exportExcel = (json, name, titleArr, sheetName = "") => {
-  /* convert state to workbook */
-  let data = new Array();
-  let keyArray = new Array();
-  const getLength = function(obj) {
-    let count = 0;
-    for (let i in obj) {
-      if (obj.hasOwnProperty(i)) {
-        count++;
-      }
+
+export const exportExcel = (dataSource, columns, fileName = "excel", sheetName = "") => {
+
+  let excelTitle = [];
+  let dataTitle = [];
+  let data = [];
+  if (columns.length == 0) {
+    throw "输出列为空";
+  } else if (dataSource.length == 0) {
+    throw "数据源为空";
+  } else {
+    for (let i in columns) {
+      excelTitle.push(columns[i].label);
+      dataTitle.push(columns[i].name);
     }
-    return count;
-  };
-  for (const key1 in json) {
-    if (json.hasOwnProperty(key1)) {
-      const element = json[key1];
-      let rowDataArray = new Array();
-      for (const key2 in element) {
-        if (element.hasOwnProperty(key2)) {
-          const element2 = element[key2];
-          rowDataArray.push(element2);
-          if (keyArray.length < getLength(element)) {
-            keyArray.push(key2);
-          }
-        }
+
+    let keys = Object.keys(dataSource[0]);
+    for (let k of dataTitle) {
+      if (keys.indexOf("k") == -1) {
+        throw "数据源中不存在列：" + k;
       }
-      data.push(rowDataArray);
     }
   }
-  // keyArray为英文字段表头
-  data.splice(0, 0, keyArray, titleArr);
+
+  data.push(excelTitle);//第一行为列名
+
+  for (let row of dataSource) {
+    let newRow = [];
+    for (let i in dataTitle) {
+      newRow.push(row[dataTitle[i]] ? row[dataTitle[i]] : "");
+    }
+    data.push(newRow);
+  }
 
   const ws = XLSX.utils.aoa_to_sheet(data);
   const wb = XLSX.utils.book_new();
-  // 此处隐藏英文字段表头
-  let wsrows = [{ hidden: true }];
-  ws["!rows"] = wsrows; // ws - worksheet
   XLSX.utils.book_append_sheet(wb, ws, sheetName);
-  // generate file and send to client
-  XLSX.writeFile(wb, name + ".xlsx");
+  XLSX.writeFile(wb, fileName + ".xlsx");
 };

src/views/backend/enterprise/orderManagement/orderHistory/index.vue

@@ -10,7 +10,7 @@
         <el-date-picker style="margin-right: 20px;width: 250px" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                         v-model="search.endDate" placeholder="截止日期"></el-date-picker>
         <el-button type="primary" @click="getData">搜索</el-button>
-        <el-button type="success" @click="exExcel">生成Excel</el-button>
+        <buttonExportExcel ref="exportExcelRef" @click="exportExcel">生成Excel</buttonExportExcel>
       </div>
       <el-table :data="tableData" border style="margin-top: 20px">
         <el-table-column label="门店"></el-table-column>
@@ -41,13 +41,15 @@
 <script setup>
 import { ref, reactive, onMounted, provide } from "vue";
 import { order, orderExport, store } from "/@/api/controllerUrls";
-import { exportExcel } from "/@/utils/excel.js";
 import request from "/@/api/request";
+import buttonExportExcel from "/@/components/common/buttonExportExcel.vue";
 
 let tableData = ref([]);
 
 let storeList = ref([]);
 
+let exportExcelRef = ref()
+
 let search = reactive({
   storeId: "",
   beginDate: "",
@@ -89,7 +91,10 @@ function getInitData() {
   });
 }
 
-async function exExcel() {
+let columns = [
+  {name:'',label:''},
+]
+async function exportExcel() {
   const titleArr = ["姓名", "年龄"];//表头中文名
   const res = await request.index(orderExport, {
     limit: page.pageSize,
@@ -100,7 +105,7 @@ async function exExcel() {
   }, "");
   if (res.code == 1) {
     let data = res.data;
-    exportExcel(data, "订单列表", titleArr, "sheet1");
+    exportExcelRef.value.open(data, "订单列表", titleArr,);
   }