dy-admin-manager/src/views/operationalEarly/operationalList.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      运营预警
    </h2>
    <div class="m-core">
      <el-form :inline="true"
               :model="searchForm">
        <el-form-item>
          <el-select v-model.trim="searchForm.organId"
                     @clear="onClear('organId')"
                     placeholder='请选择分部'
                     clearable
                     filterable>
            <el-option v-for='(item,index) in organList'
                       :key="index"
                       :value="item.id"
                       :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.userId"
                     @clear="onClear('userId')"
                     clearable
                     filterable
                     placeholder="指导老师">
            <el-option v-for="(item,index) in teacherList"
                       :key='index'
                       :value="item.id"
                       :label="item.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model.trim="searchForm.monthStr"
                          @clear="onClear('monthStr')"
                          type="month"
                          value-format="yyyy-MM"
                          placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger"
                     @click="search">搜索</el-button>
          <el-button @click="onReSet"
                     type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tableWrap">
        <el-table :data='tableList'
                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
          <el-table-column align='center'
                           prop="monthStr"
                           label="月份">
          </el-table-column>
          <el-table-column align='center'
                           prop="organName"
                           label="分部">
          </el-table-column>
          <el-table-column align='center'
                           prop="realName"
                           label="老师">
          </el-table-column>
          <el-table-column align='center'
                           prop="subjectListStr"
                           label="专业">
          </el-table-column>
          <el-table-column align='center'
                           prop="musicCourseNum"
                           label="乐团节数">
          </el-table-column>
          <el-table-column align='center'
                           prop="vipCourseNum"
                           label="小课节数">
          </el-table-column>
          <el-table-column align='center'
                           prop="expectMusicCourseSalary"
                           label="预计乐团课酬">
            <template slot-scope="scope">
              <div>
                {{scope.row.expectMusicCourseSalary | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="expectVipCourseSalary"
                           label="预计小课课酬">
            <template slot-scope="scope">
              <div>
                {{scope.row.expectVipCourseSalary | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           label="预计课酬合计"
                           prop="expectTotalSalary">
            <template slot-scope="scope">
              <div>
                {{scope.row.expectTotalSalary | moneyFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column align='center'
                           prop="averageClassMinutes"
                           label="平均上课时长">
          </el-table-column>
        </el-table>
        <pagination :total="pageInfo.total"
                    :page.sync="pageInfo.page"
                    :limit.sync="pageInfo.limit"
                    :page-sizes="pageInfo.page_size"
                    @pagination="getList" />
      </div>
    </div>
  </div>
</template>
<script>
import { getEmployeeOrgan, teacherCourseStatistics, getTeacher } from '@/api/buildTeam'
import pagination from '@/components/Pagination/index'
let nowDate = new Date()
let nowMonth = nowDate.getFullYear() + '-' + ((nowDate.getMonth() + 1) >= 10 ? (nowDate.getMonth() + 1) : '0' + (nowDate.getMonth() + 1))
export default {
  name: 'operationalList',
  components: { pagination },
  data () {
    return {
      searchForm: {
        organId: null,
        monthStr: nowMonth,
        userId: null
      },
      tableList: [{}],
      organList: [],
      teacherList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    }
  },
  mounted () {
    // 获取分部
    getEmployeeOrgan().then(res => {
      if (res.code == 200) {
        this.organList = res.data;
      }
    })
    // 获取老师列表
    getTeacher({ organId: this.organId }).then(res => {
      if (res.code == 200) {
        this.teacherList = res.data;
      }
    })
    this.getList();
  },
  methods: {
    search () {
      this.pageInfo.page = 1
      this.getList()
    },
    onClear (type) {
      if (type == 'organId') {
        this.searchForm.organId = null
      } else if (type == 'monthStr') {
        this.searchForm.monthStr = null
      } else if (type == 'userId') {
        this.searchForm.userId = null
      }
    },
    onReSet () {
      this.searchForm = {
        organId: null,
        monthStr: null,
        userId: null
      }
      this.getList()
    },
    getList () {
      let params = this.searchForm
      teacherCourseStatistics(params).then(res => {
        let result = res.data
        if (res.code == 200) {
          this.tableList = result.rows
          this.pageInfo.total = result.total
        }
      })
    },

  }
}
</script>
<style lang="scss" scoped>
</style>