dy-admin-manager/src/views/main/baseinfo/index.vue

<template>
  <div class="container">
    <save-form inline :model="search" @submit="FetchDetail" @reset="reset" saveKey="/main/main/baseInfo">
      <el-form-item prop="year">
        <el-date-picker
          v-model="search.year"
          type="year"
          format="yyyy年"
          :picker-options="{
            disabledDate(time) {
              return time.getTime() > Date.now()
            }
          }"
          placeholder="请选择年份">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="organId">
        <el-select
          clearable
          filterable
          placeholder="请选择分部"
          v-model="search.organId"
        >
          <el-option v-for="(item,index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-button native-type="submit" type="primary">搜索</el-button>
      <el-button native-type="reset" type="danger">重置</el-button>
    </save-form>
    <el-alert type="info" :closable="false" style="margin-bottom: 20px;">
      每日0点更新前一日数据
    </el-alert>
    <empty desc="暂无统计数据" v-if="isEmpty"/>
    <el-row v-else class="rows" :gutter="20">
      <el-col :xs="24" :sm="24" :md="12">
        <operate :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12">
        <business :data="dataInfo"/>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="24" :xl="10">
        <management :data="dataInfo"/>
      </el-col> -->
      <el-col :xs="24" :sm="24" :md="12">
        <hrdata :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12">
        <student :data="dataInfo"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24">
        <curriculum :data="dataInfo"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getIndex } from '../api'
import operate from './operate'
import business from './business'
import management from './management'
import hrdata from './hr'
import student from './student'
import curriculum from './curriculum'

import { descs } from '../constant'

export default {
  components: {
    operate,
    business,
    management,
    hrdata,
    student,
    curriculum,
  },
  data () {
    return {
      search: {
        year: '',
        organId: null
      },
      dataInfo: {},
      business: {},
    }
  },
  computed: {
    isEmpty() {
      return !Object.keys(this.dataInfo).length
    }
  },
  mounted () {
    this.reset()
    this.$store.dispatch('setBranchs')
  },
  methods: {
    reset() {
      this.$set(this.search, 'year', this.$helpers.dayjs())
      this.$set(this.search, 'organId', [])
      this.FetchDetail()
    },
    async FetchDetail() {
      const data = {}
      try {
        const res = await getIndex({
          ...this.search,
          year: this.$helpers.dayjs(this.search.year).year() || '',
        })
        for (const item of res.data) {
          data[item.dataType] = {
            ...item,
            desc: descs[item.dataType]
          }
        }
      } catch (error) {
        console.log(error)
      }
      this.dataInfo = data
    },
  }
}
</script>
<style lang="less" scoped>
  .container{
    overflow: hidden;
    .rows{
      >div{
        margin-bottom: 20px;
      }
    }
    /deep/ .el-card__body .statistic {
      margin-bottom: 15px;
      padding: 0;
    }
  }
</style>