From c293e8f2c2c8f1eae95b0255a8745456963511d2 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 05 七月 2024 15:11:44 +0800
Subject: [PATCH] 线下登记、统计
---
src/views/onlineEducation/count/index.vue | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 169 insertions(+), 7 deletions(-)
diff --git a/src/views/onlineEducation/count/index.vue b/src/views/onlineEducation/count/index.vue
index 4c0d406..3146e79 100644
--- a/src/views/onlineEducation/count/index.vue
+++ b/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>
--
Gitblit v1.9.2