dy-admin-manager/src/views/teamDetail/components/modals/course-time-detail.vue

<template>
  <div>
    <el-form ref="search" :model="search" inline @submit.stop.native="submit" @reset.stop.native="reset">
      <el-form-item prop="keyword">
        <el-input v-model.trim="search.keyword" clearable placeholder="学生姓名(手机、编号)"/>
      </el-form-item>
      <el-form-item prop="hastimer">
        <el-select v-model.trim="search.hastimer" clearable placeholder="是否存在剩余时长">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">搜索</el-button>
        <el-button type="danger" native-type="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="filterlist"
      :header-cell-style="{background:'#EDEEF0',color:'#444'}"
    >
      <!-- <el-table-column
        prop="type"
        label="课程类型"
        align="center"
      >
        <template slot-scope="scope">
          {{courseType[scope.row.type]}}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="userId"
        label="学生编号"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <copy-text>{{scope.row.userId}}</copy-text>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="学生姓名"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <copy-text>{{scope.row.username}}</copy-text>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="学生手机号"
        width="140"
        align="center"
      >
        <template slot-scope="scope">
          <copy-text>{{scope.row.phone}}</copy-text>
        </template>
      </el-table-column>
      <el-table-column
        label="课程时长"
      >
        <template slot-scope="scope">
          <el-tag
            style="margin-right: 5px;margin-bottom: 5px;"
            v-for="item in scope.row.mapDtos"
            :key="item.key"
            type="info"
            size="small"
          >{{courseType[item.key]}}: {{item.value}}分钟</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="time"
        label="剩余时长(分)"
        align="center"
      /> -->
    </el-table>
  </div>
</template>

<script>
import { queryStudentSubTotalCourseTimes } from '../../api'
import { courseType } from '@/constant'
export default {
  props: ['detail'],
  data() {
    return {
      courseType,
      list: [],
      filterlist: [],
      extra: [],
      search: {
        keyword: '',
        hastimer: ''
      }
    }
  },
  mounted() {
    this.FetchDetail()
  },
  methods: {
    array2object(list = []) {
      const data = {}
      for (const item of list) {
        data[item.key] = item.value
      }
      return data
    },
    filter() {
      const { keyword, hastimer } = this.search
      this.filterlist = this.list.filter(item => {
        const user = !keyword || (
          ('' + item.userId).indexOf(keyword) > -1 ||
          ('' + item.phone).indexOf(keyword) > -1 ||
          ('' + item.username).indexOf(keyword) > -1
        )
        const couse = !hastimer || (hastimer == '1' && item.mapDtos.filter(dto => dto.value > 0).length)
        return user && couse
      })
    },
    submit(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      this.filter()
    },
    reset(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      this.search = {
        keyword: '',
        hastimer: ''
      }
      this.filter()
    },
    async FetchDetail() {
      try {
        const res = await queryStudentSubTotalCourseTimes({
          musicGroupId: this.$route.query.id,
        })
        this.list = res.data
        this.filter()
        if (res.data[0]) {
          this.extra = res.data[0].mapDtos
        }
        // this.list = Object.keys(res.data).map(item => ({type: item, time: res.data[item]}))
      } catch (error) {}
    }
  }
}
</script>