From 62b0df03132889fe53b8a89c4317a5a6dcb4e2df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Tue, 31 Oct 2023 17:26:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E5=87=BAexcel=E5=B0=81=E8=A3=85?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AgTable/index.vue          |   7 +
 .../src/components/exportExcel/index.vue      | 157 ++++++++++--------
 .../src/components/reportPageHeader/index.vue |  37 ++---
 .../src/views/inventoryAndAge.vue             |   1 +
 4 files changed, 113 insertions(+), 89 deletions(-)

diff --git a/PC/UI.WinIn.FasterZ.AgGridReport/src/components/AgTable/index.vue b/PC/UI.WinIn.FasterZ.AgGridReport/src/components/AgTable/index.vue
index 6e0be39..771a46c 100644
--- a/PC/UI.WinIn.FasterZ.AgGridReport/src/components/AgTable/index.vue
+++ b/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
diff --git a/PC/UI.WinIn.FasterZ.AgGridReport/src/components/exportExcel/index.vue b/PC/UI.WinIn.FasterZ.AgGridReport/src/components/exportExcel/index.vue
index 004298c..37f2d0a 100644
--- a/PC/UI.WinIn.FasterZ.AgGridReport/src/components/exportExcel/index.vue
+++ b/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 = [
-                ["幼儿园课表", null, null, null], // 标题
-                ["序号", "课程名称", "教师名称", "上课地点"], // 表头
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
-                ["11.1234", "11,211.1234", "11.1234", "操场"],
-            ];
+            this.excelData.forEach((item,key)=>{
+                let _row = []
+                _head.forEach(head_item=>{
+                    _row.push(item[head_item])
+                })
+                excelAllData.push(_row)
+            })
 
             // 导出的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"] = [
-                {
-                wpx: 40,
-                },
-                {
-                wpx: 100,
-                },
-                {
-                wpx: 100,
-                },
-                {
-                wpx: 100,
-                },
-            ];
-
-            /*
-                设置单元格其他样式
-                这里列举一部分,其他样式大同小异,自行网上搜索
-            */
+            // ws["!cols"] = [
+            //     {wpx: 40,},
+            //     {wpx: 100,},
+            //     {wpx: 100,},
+            //     {wpx: 100,},
+            // ];
 
-            // 可以遍历全部单元格,进行样式设置
-            console.log(91,ws)
+            // 设置单元格其他样式 可以遍历全部单元格,进行样式设置
             for (let i in ws) {
-                if (i === "B2") {
-                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 == "A1"){
+                    ws[i].s = {
+                        alignment: {
+                            horizontal: "center",
+                            vertical: "center",
+                            wrapText: true,
+                        },
+                    };
                 }
+                // 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对象
diff --git a/PC/UI.WinIn.FasterZ.AgGridReport/src/components/reportPageHeader/index.vue b/PC/UI.WinIn.FasterZ.AgGridReport/src/components/reportPageHeader/index.vue
index 14157fa..e0a2c79 100644
--- a/PC/UI.WinIn.FasterZ.AgGridReport/src/components/reportPageHeader/index.vue
+++ b/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
-                    :data="downloadData"
-                    :fields="downloadFields"
-                    :name="reportName" 
-                    :title="downloadExcelTitle"
+                <exportExcel
+                    v-if="downloadData && downloadData.length > 0"
                     class="output-excel"
-                    type="xls"
-                >
-                    <el-button size="small" type="warning">导出数据</el-button>
-                </downloadExcel>
-                <exportExcel></exportExcel>
+                    :reportName="reportName" 
+                    :excelData="downloadData"
+                    :title="downloadExcelTitle()"
+                ></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>
\ No newline at end of file
diff --git a/PC/UI.WinIn.FasterZ.AgGridReport/src/views/inventoryAndAge.vue b/PC/UI.WinIn.FasterZ.AgGridReport/src/views/inventoryAndAge.vue
index 94fa2c2..21302b6 100644
--- a/PC/UI.WinIn.FasterZ.AgGridReport/src/views/inventoryAndAge.vue
+++ b/PC/UI.WinIn.FasterZ.AgGridReport/src/views/inventoryAndAge.vue
@@ -6,6 +6,7 @@
     :reportName="'库存库龄报表'"
     :BottomFixedItem="BottomFixedItem"
     :procName="'Proc_Zheng_库存库龄'"
+    :showReportTitle="false"
   ></reportPage>
 </template>