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