线下登记、统计

zhouwx

2024-07-05 c293e8f2c2c8f1eae95b0255a8745456963511d2

 src/views/onlineEducation/count/index.vue

@@ -1,12 +1,174 @@
<template>
<div>数据统计</div>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-form style="display: flex">
        <el-form-item label="企业:">
          <el-select
              v-model="state.queryParams.companyId"
              style="width: 100%"
              v-loadMore="loadMore"
              class="m-2"
              placeholder="请选择所属企业"
              popper-class="more_select_dropdown"
          >
            <el-option
                v-for="item in state.companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围:" style="margin-left: 20px">
          <el-date-picker
              v-model="searchTime"
              type="daterange"
              @change="changeTime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD 00:00:00"
          />
        </el-form-item>
        <el-form-item  style="margin-left: 50px">
          <el-radio-group v-model="state.queryParams.type">
            <el-radio :label="1">线上教育</el-radio>
            <el-radio :label="2">线下教育</el-radio>
            <el-radio :label="null">全部</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 30px" @click="searchClick">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="state.dataList" :border="true" row-key="id">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="企业名称" prop="sort" align="center" />
      <el-table-column label="企业编号" prop="sort" align="center" width="80" />
      <el-table-column label="总批次/人数" prop="sort" align="center" width="80" />
      <el-table-column label="三级" prop="sort" align="center" width="80" />
      <el-table-column label="二级" prop="sort" align="center" width="80" />
      <el-table-column label="一级" prop="sort" align="center" width="80" />
      <el-table-column label="考试人次" prop="sort" align="center" width="80" />
      <el-table-column label="合格人次" prop="sort" align="center" width="80" />
      <el-table-column label="考试合格率" prop="sort" align="center" width="80" />
    </el-table>
    <pagination
        v-show="state.total > 0"
        :total="state.total"
        v-model:page="state.queryParams.pageNum"
        v-model:limit="state.queryParams.pageSize"
        @pagination="getList"
    />

  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

import {delClassification, getClassification} from "@/api/onlineEducation/courseClass";
import {getCompany} from "@/api/onlineEducation/company";
import {getCompanyCount} from "@/api/onlineEducation/count";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const areaRef = ref();
const searchTime = ref([]);
const state = reactive({
  queryParams: {
    companyId: '',
    type: null,
    endTime: '',
    startTime: '',
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [
  ],
  companyList: [],
  pageNum: 1,
  pageSize: 10,
});

//页面加载
onMounted(() => {
  getCompanyList();
  getList();

});
const getList = async () => {
  loading.value = true;
  const res = await getCompanyCount(state.queryParams);
  if(res.code === 200){
    state.dataList = res.data
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false;
}

const finshed = ref(false)
const getCompanyList = async (type)=>{
  if (type === 'open' && state.pageNum !== 1) {
  } else {
    const queryParams = {
      pageNum: state.pageNum,
      pageSize: state.pageSize,
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      if (res.data.pageNum === state.pageNum) {
        finshed.value = false;
        if (state.pageNum == 1) {
          state.companyList = res.data.list
        } else {
          state.companyList = state.companyList.concat(res.data.list)
        }
      } else {
        finshed.value = true;
      }

    } else {
      ElMessage.warning(res.message)
    }
    console.log("state.companyList",state.companyList)
  }
}
//触底函数
const loadMore = () => {
  console.log(' 触底了');
  // 防抖处理
  setTimeout(() => {
    if (finshed.value) return //值为true，则代表没有数据了
    state.pageNum += 1
    getCompanyList('')
  }, 500)
}
const changeTime=(value)=>{
  if(!value){
    state.queryParams.endTime = ""
    state.queryParams.startTime = ""
  }
}
const searchClick = () => {
  if(searchTime.value && searchTime.value.length>0){
    state.queryParams.startTime = searchTime.value[0]
    state.queryParams.endTime = searchTime.value[1]
  }
  getList();
}
/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams.name = '';
  data.queryParams.pageNum = 1;
  getList();
}


</script>



<style scoped lang="scss">

</style>