soc_app/src/views/menu/educationStatistics/index.vue

<template>
  <div class="educationStatistics">
    <NavBar />
    <div class="statistics-container">
      <org-tree v-model="query.orgId" @change="getDataList"></org-tree>
      <div class="search-flex-box">
        <select-cell title="教育计划名称" v-model="query.planId" :dataList="planList" :prop="prop" @change="getDataList"/>
        <date-cell title="统计月份"  v-model="query.date" date-type="year-month" @change="getDataList"/>
      </div>
      <div class="card-list">
        <van-empty description="暂无数据" v-if="!dataList || dataList.length === 0" />
<!--          <van-cell-group  v-for="(v,i) in dataList" :key="i">-->
<!--            <van-cell :title="v.orgName" >-->
<!--              <template #extra>-->
<!--                <div class="card-num">-->
<!--                  {{v.finishRate}}-->
<!--                </div>-->
<!--              </template>-->
<!--              <template #label>-->
<!--                <div class="flex-box">-->
<!--                  <div>应培训数：{{v.shouldFinish}}</div>-->
<!--                  <div>已培训数：{{v.finish}}</div>-->
<!--                </div>-->
<!--              </template>-->
<!--            </van-cell>-->
<!--          </van-cell-group>-->
          <ve-table
            v-else
            :border-x="true"
            :border-y="true"
            :border-around="true"
            :columns="columns"
            :fixed-header="true"
            maxHeight="calc(100vh - 240px)"
            :table-data="dataList" />
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import OrgTree from '@/components/orgTree'
import DateCell from '@/components/dateCell'
import SelectCell from '@/components/selectCell'
import Tables from '@/components/table'
import {dataList,planList} from './api'
import {mapGetters} from "vuex";
import {formatDate} from "@/filters/filter";
export default {
  components: {
    NavBar,
    OrgTree,
    DateCell,
    SelectCell,
    Tables
  },
  data() {
    return {
      query:{
        date:null,
        orgId:null,
        planId:null,
      },
      planList:[],
      prop:{
        label:'name',
        value:'id',
      },
      loading:false,
      columns:[
        {
          field: "index",
          key: "index",
          title: "序号",
          width: 50,
          align: "center",
          fixed: "left",
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return ++rowIndex;
          },
        },
        {field:'orgName',key:'2',title:'单位名称',align: "center" },
        {field:'finish',key:'3',title:'应培训数',align: "center" },
        {field:'shouldFinish',key:'4',title:'已培训数',align: "center" },
        {field:'finishRate',key:'5',title:'完成率',align: "center" },
      ],
      dataList:[],
    }
  },
  mounted() {
    this.initData();
  },
  computed:{
    ...mapGetters(['orgId']),
  },
  methods: {
    initData(){
      this.query.orgId = this.orgId;
      this.getPlanList();
    },
    getPlanList(){
      planList(this.query.orgId).then(res=>{
        this.planList = res.data;
        if(res.data.length === 0) return this.$toast('暂无教育计划');
        this.query.planId = res.data[0].id;
        this.query.date = formatDate(new Date(),'YYYY-MM');
        this.getDataList();
      })
    },
    getDataList(){
      let data = {
        ...this.query
      }
      data.date = this.query.date && `${this.query.date}-01`;
      if(!this.query.orgId) return this.$toast('请选择机构');
      dataList(data).then(res=>{
        this.dataList = res.data;
      })
    }
  }
}
</script>
<style lang="scss">
.van-cell-group{
  margin-bottom: 20px;
}
.van-cell-group:last-child{
  margin-bottom: 0;
}
.vue-table-root{
  tr,th,td{
    font-size: 25px!important;
    color:#666!important;
  }
}
</style>
<style lang="scss" scoped>
  .educationStatistics{

  }
  .statistics-container{

  }
  .search-flex-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    >div{
      width: 50%;
      border-right: 1px solid #eaeaea ;
    }
  }
  .card-list{
    padding: 20px;
    -height: calc(100vh - 410px);
    overflow: auto;
  }
  .card-num{
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #009dff;
  }
  .flex-box{
    display: flex;
    align-items: center;
    >div{
      margin-right: 40px;
    }
  }
</style>