dy-admin-manager/src/views/smallCourseConsumption/modals/preDetail.vue

<template>
  <div>
    <el-dialog title="预计课耗详情" width="1000px" :visible.sync="courseVisible" @close="cancelHandel">
      <el-form
      :inline="true"
      @submit="getList"
      ref="searchForm"
      :model="searchForm"
    >
      <el-form-item prop="search">
        <el-input
          class="search"
          type="text"
          clearable
          v-model="searchForm.search"
          placeholder="学员名称/编号/手机号"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="getList">搜索</el-button>
        <el-button native-type="reset" type="primary" @click="onReSet"
          >重置</el-button
        >
        <ExportChiose
          v-permission="'export/EXPORT_PRE_COURSE_CONSUMER_DETAIL'"
          style="margin-bottom: 20px;margin-right:10px; margin-left:10px;display:inline-block"
          name="导出"
          ExportEnum="EXPORT_PRE_COURSE_CONSUMER_DETAIL"
          :exportData="onExport"
          fileName="预计课耗详情导出"
          errorMsg="请选择时间"
          :isDownList="true"
        />
      </el-form-item>
    </el-form>
      <el-table
        :data="tableList"
        ref="tableList"

        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
        <el-table-column prop="username" label="学生姓名"></el-table-column>
        <el-table-column prop="userId" label="学生编号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="preConsumerNum" label="应耗课时">
        <template slot-scope="scope">
          <div>
            {{scope.row.preConsumerNum}}节
          </div>
        </template></el-table-column>
        <el-table-column prop="courseNum" label="已排课时">
          <template slot-scope="scope">
          <div>
            {{scope.row.courseNum}}节
          </div>
        </template></el-table-column>
      </el-table>
      <pagination

        :total.sync="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"

          @click="courseVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { getPreCourseConsumerDetail } from '../api'
import { getTimes } from "@/utils";
import ExportChiose from "@/components/Export-chiose";
export default {
  data(){
    return {
      tableList:[],
      courseVisible:false,
      searchForm:{search:'',timer:[],organId:''},
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    }
  },
  components:{
    pagination,
    ExportChiose
  },
  mounted() {

  },methods: {
   async openDialog(row,month){
    try{
      this.searchForm.timer = month
      this.searchForm.organId = row.organId
      this.getList()
      this.courseVisible = true
    }catch(e){
      console.log(e)
    }
   },
  async getList(){
    const { timer, ...rest } = this.searchForm;
        let obj = {
          ...rest,
          ...getTimes(timer, ["startDate", "endDate"]),
          page:this.pageInfo.page,rows:this.pageInfo.limit
        }
    const res  = await getPreCourseConsumerDetail(obj)
      this.tableList = res.data.rows;
      this.pageInfo.total = res.data.total;
  },
   onReSet(){
    this.searchForm.search='';
    this.pageInfo.page = 1;
    this.getList()
   },
   cancelHandel(){
    this.searchForm.search='';
    this.pageInfo.page = 1;
   }
  },
  computed:{
    onExport(){
      const { timer, ...rest } = this.searchForm;
      let obj = {
          ...rest,
          ...getTimes(timer, ["startDate", "endDate"]),

        }
      return obj
    }
  }
}
</script>
<style scoped></style>