From 87cbee9b14970d997c1e5c54b5fef4d04369c968 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期四, 05 五月 2022 09:57:52 +0800
Subject: [PATCH] 社会收支总表修改

---
 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue |  215 ++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 162 insertions(+), 53 deletions(-)

diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
index a5c8815..a653ca2 100644
--- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
+++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
@@ -1,28 +1,99 @@
 <template>
   <div class="shebaoChikaRenshu-wrap">
     <h1>鍚勫幙锛堝競銆佸尯锛�2021骞村氨涓氭儏鍐电粺璁¤〃</h1>
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="鎬昏" name="first">
-        <baoxianForm></baoxianForm>
-      </el-tab-pane>
-      <el-tab-pane label="浼佷笟鑱屽伐鍏昏�佷繚闄�" name="second">
-        <baoxianForm></baoxianForm>
-      </el-tab-pane>
-      <el-tab-pane label="鍩庝埂灞呮皯鍏昏�佷繚闄�" name="third">
-        <baoxianForm></baoxianForm>
-      </el-tab-pane>
-      <el-tab-pane label="宸ヤ激淇濋櫓" name="fourth">
-        <baoxianForm></baoxianForm>
-      </el-tab-pane>
-      <el-tab-pane label="澶变笟淇濋櫓" name="five">
-        <baoxianForm></baoxianForm>
-      </el-tab-pane>
-    </el-tabs>
+    <el-table
+      :cell-style="handleCellStyle"
+      :max-height="tableHeight"
+      :data="tableData"
+      stripe
+      border
+      style="width: 100%">
+      <template v-for="(item,index) in headerArry">
+        <el-table-column
+          :key="index"
+          align="center"
+          :prop="item.val"
+          :label="item.time">
+          <template slot-scope="scope">
+              <span>{{scope.row[index].val}}</span>
+          </template>
+        </el-table-column>
+      </template>
+
+      <!--<el-table-column
+        prop="yearFinish"
+        align="center"
+        label="鍘诲勾瀹屾垚"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="january"
+        align="center"
+        label="1鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="february"
+        align="center"
+        label="2鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="march"
+        align="center"
+        label="3鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="april"
+        align="center"
+        label="4鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="may"
+        align="center"
+        label="5鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="june"
+        align="center"
+        label="6鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="july"
+        align="center"
+        label="7鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="august"
+        align="center"
+        label="8鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="september"
+        align="center"
+        label="9鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="october"
+        align="center"
+        label="10鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="november"
+        align="center"
+        label="11鏈�">
+      </el-table-column>
+      <el-table-column
+        prop="december"
+        align="center"
+        label="12鏈�">
+      </el-table-column>-->
+    </el-table>
   </div>
 </template>
 
 <script>
-    import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
+  import {getCardNumsTable} from '@/api/shehuiBaozhang'
+  import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
+  import nowSize from "../../../../libs/nowSize";
     export default {
         name: "shebaoChikaRenshu",
         components: {
@@ -30,8 +101,50 @@
         },
         data() {
             return {
-                activeName: 'first'
+                tableData: [],
+                headerArry: [],
+                tableHeight: window.innerHeight - nowSize(250)
             }
+        },
+        mounted() {
+          this.getCardNumsTable()
+        },
+        methods: {
+            getCardNumsTable(){
+                getCardNumsTable().then(res => {
+                    if(res.code == 1000) {
+                       let result = res.list
+                        let data = []
+                        result.forEach((item,index) => {
+                            let row = item.dataList
+                            row.unshift({
+                                time: '鎸囨爣',
+                                val: item.name
+                            })
+                            data.push(row)
+                            if(index == 0) {
+                                this.headerArry = row
+                            }
+
+                        })
+                        this.tableData = data
+                    }
+                })
+            },
+            getHeight() {
+                this.tableHeight = window.innerHeight - nowSize(250)
+            },
+            handleCellStyle({rowIndex, columnIndex}) {
+                if(columnIndex == 0) {
+                    return { background:'#51D2FF' }
+                }
+            }
+        },
+        created() {
+            window.addEventListener('resize', this.getHeight)
+        },
+        destroy() {
+            window.addEventListener('resize', this.getHeight)
         }
     }
 </script>
@@ -39,45 +152,41 @@
 <style lang="scss">
   @import "../../../../assets/css/base";
   .shebaoChikaRenshu-wrap{
-    .el-tabs__nav-wrap::after{
-      background-color: transparent;
-      height: 0;
+    .el-table tr{
+      background-color: #CEF2FF;
     }
-    .el-tabs__nav-scroll{
-      display: flex;
-      justify-content: center;
+    .el-table th.el-table__cell{
+      background-color: #51D2FF;
     }
-    .el-tabs__item{
-      width: 0.9375rem  /* 240/256 */;
-      height: 0.25rem  /* 64/256 */;
-      background: rgba(81,210,255,0.08);
-      border: 1Px solid #0097cc; /*no*/
-      color: #9CE6FF;
-      font-size: $fontSize-24;
-      margin: 0 0.078125rem  /* 20/256 */  /* 10/10 */;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    .el-table__fixed, .el-table__fixed-right,.el-table__fixed-right::before, .el-table__fixed::before{
+      background-color: #51D2FF;
     }
-    .el-tabs__item.is-active{
-      width: 0.9375rem  /* 240/256 */;
-      height: 0.25rem  /* 64/256 */;
-      background: #00a6e1;
-      border: 1Px solid #51d2ff;
-      box-shadow: 0Px 3Px 10Px 0Px rgba(255,255,255,0.80) inset;
-      color: $color-white;
-      font-size: $fontSize-24;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+      background-color: #A8E9FF;
     }
-    .el-tabs__nav{
-      width: 100%;
-      display: flex;
-      justify-content: center;
+    .el-table thead{
+      color: #111111;
     }
-    .el-tabs__active-bar{
-      height: 0;
+    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+      border-bottom: 1Px solid #8E8E8E;
+    }
+    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
+      border-right: 1Px solid #8E8E8E;
+    }
+    .el-table .el-table__cell{
+      padding: 0.0859375rem  /* 22/256 */ 0;
+    }
+    .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
+      background: transparent;
+    }
+    .el-table .cell{
+      font-size: $fontSize-28;
+      color: $color-darkGrey;
+      font-weight: 300;
+      line-height: 1;
+      span{
+        font-size: $fontSize-28;
+      }
     }
   }
 </style>

--
Gitblit v1.9.1