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

<template>
  <div class="educationStatistics">
    <NavBar />
    <div class="statistics-container">
      <div class="org-line van-hairline--bottom">
        <org-tree v-model="query.orgId" @change="getDataList"></org-tree>
      </div>
      <div class="search-flex">
        <select-cell
          style="border-right:1px solid #f5f5f5;"
          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">
        <empty v-if="!dataList || dataList.length === 0" />
        <ve-table
          v-else
          maxHeight="calc(100vh - 252px)"
          fixedHeader
          borderX
          borderY
          borderAround
          :columns="columns"
          :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 { dataList, planList } from './api'
import { mapGetters } from 'vuex'
import { formatDate } from '@/filters/filter'
export default {
  components: {
    NavBar,
    OrgTree,
    dateCell,
    selectCell
  },
  data() {
    return {
      query: {
        date: `${formatDate(new Date(),'YYYY-MM')}`,
        orgId: null,
        planId: null
      },
      planList: [],
      prop: {
        label: 'name',
        value: 'id'
      },
      loading: false,
      columns: [
        {
          field: 'index',
          key: 'index',
          title: '序号',
          width: 50,
          align: 'center',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return ++rowIndex
          }
        },
        { field: 'orgName', key: 'a', title: '单位名称', align: 'center' },
        { field: 'shouldFinish', key: 'b', title: '应完成数', align: 'center' },
        { field: 'finish', key: 'c', title: '已完成数', align: 'center' },
        { field: 'finishRate', key: 'd', 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,
  td,
  th {
    font-size: 25px !important;
    color: #666 !important;
  }
}
</style>
<style lang="scss" scoped>
.educationStatistics {
}
.statistics-container {
}
.card-list {
  padding: 20px;
  height: calc(100vh - 420px);
  overflow: hidden;
}
.org-line{
  padding:0 10px;
  background-color: #fff;
}
.card-num {
  display: flex;
  align-items: center;
  font-size: 28px;
  color: #009dff;
}
.flex-box {
  display: flex;
  align-items: center;
  > div {
    margin-right: 40px;
  }
}
.search-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    width: 50%;
  }
}
</style>