导出excel封装更改

PC/UI.WinIn.FasterZ.AgGridReport/src/components/AgTable/index.vue

@@ -105,10 +105,17 @@ export default {
 </script>
 <style lang="less">
 .ag-theme-alpine{
+    // --ag-header-foreground-color: white;
+    // --ag-header-background-color: #5a81b7;
+    // --ag-header-cell-hover-background-color: #5a81b7;
+    // --ag-header-cell-moving-background-color: #5a81b7;
+    // --ag-border-color:#4d709f;
+
     --ag-header-foreground-color: white;
     --ag-header-background-color: #5a81b7;
     --ag-header-cell-hover-background-color: #5a81b7;
     --ag-header-cell-moving-background-color: #5a81b7;
+    --ag-border-color:#4d709f;
 
     .ag-floating-filter-input .ag-input-field-input{
       color:#333 !important

PC/UI.WinIn.FasterZ.AgGridReport/src/components/exportExcel/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div><el-button @click="exportExcel" size="small" type="warning">导出数据2</el-button></div>
+    <div><el-button @click="exportExcel" size="small" type="warning">导出数据</el-button></div>
 </template>
 <script>
 import XLSX from "xlsx";
@@ -7,6 +7,23 @@ import XLSXS from "xlsx-style";
 import FileSaver from "file-saver";
 export default {
     name: "exportExcel",
+    props:{
+        // 报表标题
+        title:{
+            type: String,
+            default: null
+        },
+        // 报表名称
+        reportName:{
+            type: String,
+            default: '导出'
+        },
+        // 导出数据
+        excelData:{
+            type: Array,
+            default: null
+        },
+    },
     data () {
         return {
             
@@ -20,89 +37,95 @@ export default {
             return buf;
         },
         exportExcel(){
+            // 设置表头
+            let _head = []
+            for(let item in this.excelData[0]){
+                _head.push(item)
+            }
+
+            // 设置标题
+            let _title = [this.title]
+            for(let i =0;i<_head.length - 1;i++){
+                _title.push(null)
+            }
+
+            // 设置内容
+            let excelAllData = [
+                _title,// 标题
+                _head, // 表头
+            ]
+
             // 需要导出的数据
-            let excelData = [
+            this.excelData.forEach((item,key)=>{
-                ["幼儿园课表", null, null, null], // 标题
+                let _row = []
-                ["序号", "课程名称", "教师名称", "上课地点"], // 表头
+                _head.forEach(head_item=>{
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
+                    _row.push(item[head_item])
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
+                })
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
+                excelAllData.push(_row)
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
+            })
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
-            ];
 
             // 导出的excel文件名
-            const filename = "幼儿园课程表.xlsx";
+            const filename = this.reportName+".xlsx";
 
             // Excel第一个sheet的名称
             const ws_name = "Sheet1";
             const wb = XLSX.utils.book_new();
-            const ws = XLSX.utils.aoa_to_sheet(excelData);
+            const ws = XLSX.utils.aoa_to_sheet(excelAllData);
             XLSX.utils.book_append_sheet(wb, ws, ws_name); // 将数据添加到工作薄
 
             // 设置标题行单元格合并
             // s即start, e即end, r即row, c即column
             // 合并从--0行0列开始,到0行3列
-            ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }];
+            ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: _head.length - 1 } }];
 
             // 设置单元格宽度
-            ws["!cols"] = [
+            // ws["!cols"] = [
-                {
+            //     {wpx: 40,},
-                wpx: 40,
+            //     {wpx: 100,},
-                },
+            //     {wpx: 100,},
-                {
+            //     {wpx: 100,},
-                wpx: 100,
+            // ];
-                },
-                {
-                wpx: 100,
-                },
-                {
-                wpx: 100,
-                },
-            ];
-
-            /*
-                设置单元格其他样式
-                这里列举一部分,其他样式大同小异,自行网上搜索
-            */
 
-            // 可以遍历全部单元格,进行样式设置
+            // 设置单元格其他样式 可以遍历全部单元格,进行样式设置
-            console.log(91,ws)
             for (let i in ws) {
-                if (i === "B2") {
+                // 标题居中
+                if(i == "A1"){
                     ws[i].s = {
-                    // 居中
                         alignment: {
                             horizontal: "center",
                             vertical: "center",
                             wrapText: true,
                         },
-                    // 字体
-                    font: {
-                        name: "仿宋",
-                        sz: 14,
-                        bold: true,
-                    },
-                };
-                } else if (i === "B3") {
-                ws[i].s = {
-                    // 单元格边框
-                    border: {
-                    top: {
-                        style: "thin",
-                    },
-                    bottom: {
-                        style: "thin",
-                    },
-                    left: {
-                        style: "thin",
-                    },
-                    right: {
-                        style: "thin",
-                    },
-                    },
                     };
                 }
+                // if (i === "B2") {
+                // ws[i].s = {
+                //     // 字体
+                //     font: {
+                //         name: "仿宋",
+                //         sz: 14,
+                //         bold: true,
+                //     },
+                // };
+                // } else if (i === "B3") {
+                // ws[i].s = {
+                //     // 单元格边框
+                //     border: {
+                //     top: {
+                //         style: "thin",
+                //     },
+                //     bottom: {
+                //         style: "thin",
+                //     },
+                //     left: {
+                //         style: "thin",
+                //     },
+                //     right: {
+                //         style: "thin",
+                //     },
+                //     },
+                // };
+                // }
             }
 
             // 导出Excel, 注意这里用到的是XLSXS对象

PC/UI.WinIn.FasterZ.AgGridReport/src/components/reportPageHeader/index.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="reportPageHeader">
+        <!-- 报表名称 -->
+        <div class="reportTitle" v-if="showReportTitle">{{reportName}}</div>
         <!-- 搜索条件及按钮 -->
         <div class="FormHeader">
             <!-- 左侧查询 -->
@@ -55,25 +57,19 @@
             </div>
             <!-- 右侧按钮 -->
             <div class="headerRightBtn">
-                <downloadExcel
+                <exportExcel
-                    :data="downloadData"
+                    v-if="downloadData && downloadData.length > 0"
-                    :fields="downloadFields"
-                    :name="reportName" 
-                    :title="downloadExcelTitle"
                     class="output-excel"
-                    type="xls"
+                    :reportName="reportName" 
-                >
+                    :excelData="downloadData"
-                    <el-button size="small" type="warning">导出数据</el-button>
+                    :title="downloadExcelTitle()"
-                </downloadExcel>
+                ></exportExcel>
-                <exportExcel></exportExcel>
                 <columnFilter 
                     :columnList="columnList" 
                     @columnFliterCallback="columnFliterCallback"
                 ></columnFilter>
             </div>
         </div>
-        <!-- 报表名称 -->
-        <div class="reportTitle" v-if="showReportTitle">{{reportName}}</div>
     </div>
 </template>
 <script>
@@ -129,11 +125,9 @@ export default {
     },
     data () {
         return {
-            downloadFields:{},//导出列
         };
     },
     mounted(){
-        this.initDownloadFields()
         this.initSearchConfig()
     },
     methods: {
@@ -168,12 +162,6 @@ export default {
                 }
             })
         },
-        // 初始化导出列
-        initDownloadFields(){
-            this.columnList.forEach(item=>{
-                this.downloadFields[item.field] = item.headerName || item.field
-            })
-        },
         // 字段设置点击事件
         columnFliterCallback(data){
             this.$emit("columnFliterCallback",data)
@@ -196,6 +184,7 @@ export default {
 </script>
 <style scope lang="less">
 .reportPageHeader{
+    background:#2d568e;
 
     .FormHeader{
         padding:20px 20px 0;
@@ -210,16 +199,20 @@ export default {
                 margin-right:10px
             }
         }
+
+        .el-form-item__label{
+            color:#fff
+        }
     }
 
     .reportTitle{
-        background:#2d568e;
         color:#fff;
         line-height:40px;
         text-align:center;
         font-size:16px;
         font-weight:bold;
-        letter-spacing:2px
+        letter-spacing:2px;
+        border-bottom: #4d709f solid 1px;
     }
 }
 </style>

PC/UI.WinIn.FasterZ.AgGridReport/src/views/inventoryAndAge.vue

@@ -6,6 +6,7 @@
     :reportName="'库存库龄报表'"
     :BottomFixedItem="BottomFixedItem"
     :procName="'Proc_Zheng_库存库龄'"
+    :showReportTitle="false"
   ></reportPage>
 </template>