企业职工社保

zhangxiaoxu123456

2022-04-12 013df78e71b362f0210d284c65f4692e50ca6f16

企业职工社保

 src/pages/components/qiyezhigongShebao/zhigongShebao.vue

New file
@@ -0,0 +1,155 @@
<template>
  <div class="zhigongShebao-wrap">
    <el-table
      border
      :data="tableData"
      :header-cell-style="handleheader"
      :default-sort = "{prop: 'name', order: 'descending'}"
      style="width: 100%">
      <el-table-column
        prop="shiqu"
        label="县（市、区）"
        align="center"
        width="250">
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="企业职工养老保险参保人数"
        align="center">
      </el-table-column>
      <el-table-column
        sortable
        prop="address"
        label="在职职工"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        sortable
        label="离退休"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
        align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <zhigongshebaoForm ref="zhigongshebaoForm" v-if="zhigongshebaoVisiable"></zhigongshebaoForm>
  </div>
</template>

<script>
  import zhigongshebaoForm from "./zhigongshebaoForm";
    export default {
        name: "chengzhenXinzengJiuye",
        components: {
            zhigongshebaoForm
        },
        data() {
            return {
                zhigongshebaoVisiable: false,  //弹框
                tableData: [{
                    shiqu:'全市',
                    date: '1',
                    name: '1',
                    address: '1'
                }, {
                    shiqu:'长安区',
                    date: '1',
                    name: '2',
                    address: '2'
                }, {
                    shiqu:'桥西区',
                    date: '3',
                    name: '3',
                    address: '4'
                }, {
                    shiqu:'新华区',
                    date: '4',
                    name: '4',
                    address: '1   '
                }]
            }
        },
        methods: {
            handleClick(row) {
                this.zhigongshebaoVisiable = true
                this.$nextTick(() => {
                    this.$refs.zhigongshebaoForm.init()
                })
            },
            handleheader(data) {
                return {
                    lineHeight: '2.5',
                }
            }
        }
    }
</script>

<style lang="scss">
  @import "../../../assets/css/base";
  .zhigongShebao-wrap{
    width: 100%;
    padding-top: 0.078125rem  /* 20/256 */;
    .el-table th.el-table__cell{
      background-color:$color-blue;
    }
    .el-table .el-table__body-wrapper tr{
      height: 0.265625rem  /* 68/256 */;
    }
    .el-table tr:nth-child(odd){
      background-color: #CEF2FF;
    }
    .el-table tr:nth-child(even){
      background-color: #A8E9FF;
    }
    .el-table, .el-table__expanded-cell{
      background-color: transparent;
    }
    .el-table thead{
      color: $color-darkGrey;
    }
    .el-table{
      color: $color-darkGrey;
    }
    .el-table .cell{
      font-size: $fontSize-28;
      color: $color-darkGrey;
      font-weight: 300;
      line-height: 1;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
      border-bottom:1Px solid $color-grey; /*no*/
    }
    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border-right:1Px solid $color-grey; /*no*/
    }
    .el-table .sort-caret{
      border: 0.05rem solid transparent;
    }
    .el-table .sort-caret.descending{
      bottom: -0.04296875rem  /* -11/256 */;
      border-top-color: #cef2ff;
    }
    .el-table .descending .sort-caret.descending{
      border-top-color: #409EFF;
    }
    .el-table .sort-caret.ascending{
      top: -0.04296875rem  /* -11/256 */;
      border-bottom-color: #cef2ff;
    }
    .el-table .ascending .sort-caret.ascending{
      border-bottom-color: #409EFF;
    }

  }
</style>
<style scoped>

</style>

 src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue

New file
@@ -0,0 +1,76 @@
<template>
    <div class="zhigongshebaoForm">
      <el-dialog
        :visible.sync="dialogVisible"
        width="86%"
        :before-close="handleClose">
        <div class="zhigongshebaoEcharts" ref="zhigongshebaoEcharts"></div>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "zhigongshebaoForm",
        data() {
            return {
                dialogVisible: false,
            }
        },
        methods: {
            init() {
                this.dialogVisible = true
            },
            handleClose() {
                this.dialogVisible = false
            }
        }
    }
</script>

<style lang="scss">
  // dialog对话框
  .zhigongshebaoForm {
    .el-dialog__wrapper {
      background: rgba(0, 0, 0, 0.9);
    }
    .el-dialog {
      background: url(../../../assets/images/businessPolicy/dialog@2x.png)
      no-repeat center;
      background-size: 100% 100%;
      height: 4.375rem;
    }
    .el-icon-close:before {
      content: url(../../../assets/images/businessPolicy/dialogClose@2x.png);
      width: 0.1875rem  /* 48/256 */;
      height: 0.1875rem;
      background-size: 100% 100%;
    }
    .el-dialog__headerbtn{
      position: absolute;
      top: 0.3125rem  /* 80/256 */;
      right: 0.3125rem  /* 80/256 */;
    }
    .el-dialog__header {
      padding: 0;
      width: 0;
      height: 0;
    }
    .el-dialog__body {
      text-align: center;
      color: #eeeeee;
      h1 {
        margin-top: 0.4375rem;
        font-size: 0.1563rem;
      }
      span {
        font-size: 0.1094rem;
      }
    }
    .el-divider {
      margin: 0;
      background-color: #eeeeee;
    }
  }
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhang.vue

@@ -12,7 +12,7 @@
            <h1>社保收支总表</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
        <el-menu-item index="/qiyezhigongShebao">
          <div class="menu-left-block">
            <h1>企业职工社保</h1>
          </div>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/qiyezhigongShebao.vue

New file
@@ -0,0 +1,36 @@
<template>
    <div class="qiyezhigongShebao-wrap">
       <div class="danwei-box">单位：人</div>
      <zhigongShebao></zhigongShebao>
    </div>
</template>

<script>
  import zhigongShebao from "../../../components/qiyezhigongShebao/zhigongShebao";
    export default {
        name: "qiyezhigongShebao",
        components: {
            zhigongShebao
        },
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../../assets/css/base";
  .qiyezhigongShebao-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    .danwei-box{
      position: absolute;
      right: 0;
      top: 0;
      color: $color-white;
    }
  }
</style>

 src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue

@@ -3,243 +3,280 @@
    <div class="shebaoShouzhiZongbiao-table">
      <h1>社会保障基金统计表</h1>
      <el-table
        v-fit-columns
        :data="tableData"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="name"
          label="项目"
          :data="tableData"
          fixed>
        </el-table-column>
        <el-table-column
          label="1月">
        <el-table-column label="1月" align="center">
              <el-table-column
                align="center"
                prop="totalMoney"
                label="总收入">
              </el-table-column>
              <el-table-column
                align="center"
                prop="zhengjishouru"
                label="征集收入">
              </el-table-column>
              <el-table-column
                align="center"
                prop="benyuezhichu"
                label="本月支出">
              </el-table-column>
              <el-table-column
                align="center"
                prop="item.benyuejieyu"
                label="本月结余">
              </el-table-column>
            </el-table-column>
        <el-table-column label="2月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="zhengjishouru"
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="benyuezhichu"
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="benyuejieyu"
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="2月">
        <el-table-column label="3月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="4月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="5月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="6月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="7月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="9月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="10月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="11月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="12月" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column label="本年累计" align="center">
          <el-table-column
            align="center"
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="3月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="4月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="5月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="6月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="7月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="9月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="10月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="11月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="12月">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="本年累计">
          <el-table-column
            prop="totalMoney"
            label="总收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="征集收入">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月支出">
          </el-table-column>
          <el-table-column
            prop="totalMoney"
            label="本月结余">
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="累计结余">
        </el-table-column>
@@ -253,13 +290,29 @@
        name: "shebaoShouzhiZongbiao",
        data() {
            return {
                tableData:[{
                    totalMoney: '323332',
                    zhengjishouru: '223333',
                    benyuezhichu: '3t638',
                    benyuejieyu: '76373637'
                }]
                tableHead:[],
                tableData:[
                    {
                        name: '项目1',
                        mouth: '1月',
                        totalMoney: '2222',
                        zhengjishouru: '12333',
                        benyuezhichu:'52667',
                        benyuejieyu:'2332'
                    },
                    {
                        name: '项目2',
                        mouth: '1月',
                        totalMoney: '2222',
                        zhengjishouru: '12333',
                        benyuezhichu:'52667',
                        benyuejieyu:'2332'
                    }
                ]
            }
        },
        mounted() {

        }
    }
</script>
@@ -270,6 +323,12 @@
    width: 100%;
    height: calc(100% - 0.078125rem  /* 20/256 */);
    margin-top: 0.078125rem  /* 20/256 */;
    /*.el-table .cell, el-table th > .cell{*/
    /*  display: inline-block;*/
    /*  white-space: nowrap;*/
    /*  width: auto;*/
    /*  overflow: auto;*/
    /*}*/
    .el-table th.el-table__cell{
      background-color:$color-blue;
      height: 0.3125rem  /* 80/256 */;

 src/router/router.js

@@ -90,6 +90,15 @@
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue"
            )
        },
        {
          path: "/qiyezhigongShebao",
          meta: { title: "企业职工社保" },
          name: "qiyezhigongShebao",
          component: () =>
            import(
              "@/pages/show/shehuiBaozhang/shehuiBaozhangChildren/qiyezhigongShebao.vue"
            )
        }
      ]
    },