<template>
|
<div class="app-container">
|
<div>
|
<el-form style="display: flex;flex-wrap: wrap">
|
<el-form-item label="企业:" v-if="state.isAdmin">
|
<el-select
|
v-model="state.queryParams.companyName"
|
filterable
|
remote
|
@change="selectValue"
|
reserve-keyword
|
placeholder="请输入企业名称"
|
remote-show-suffix
|
:remote-method="getCompanyList"
|
:loading="loadingCompany"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in state.companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
/>
|
</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="结束日期"
|
format="YYYY-MM-DD"
|
/>
|
</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="companyName" align="center" />
|
<el-table-column label="企业编号" prop="companyCode" align="center" />
|
<el-table-column label="总批次/人数" prop="sort" align="center" >
|
<template #default="scope">
|
<span>{{scope.row.phaseStudentCount && scope.row.phaseCount ? scope.row.phaseCount + '/' +scope.row.phaseStudentCount:''}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="三级" prop="sort" align="center" >
|
<template #default="scope">
|
<span>{{scope.row.level3StudentCount && scope.row.level3PhaseCount ? scope.row.level3PhaseCount+ '/' +scope.row.level3StudentCount:''}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="二级" prop="sort" align="center" >
|
<template #default="scope">
|
<span>{{scope.row.level2StudentCount && scope.row.level2PhaseCount ? scope.row.level2PhaseCount+ '/' +scope.row.level2StudentCount:''}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="一级" prop="sort" align="center" >
|
<template #default="scope">
|
<span>{{scope.row.level1StudentCount && scope.row.level1PhaseCount ? scope.row.level1PhaseCount+ '/' +scope.row.level1StudentCount:''}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="考试人次" prop="paperStudentCount" align="center" />
|
<el-table-column label="合格人次" prop="passStudentCount" align="center" />
|
<el-table-column label="合格率" prop="passRate" align="center" />
|
</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 moment from "moment";
|
|
import {delClassification, getClassification} from "@/api/onlineEducation/courseClass";
|
import {getCompany} from "@/api/onlineEducation/company";
|
import {getCompanyCount} from "@/api/onlineEducation/count";
|
import Cookies from "js-cookie";
|
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,
|
isAdmin: false
|
});
|
|
//页面加载
|
onMounted(() => {
|
setDate();
|
const userInfo = JSON.parse(Cookies.get('userInfo'))
|
console.log("userInfo",userInfo)
|
state.isAdmin = userInfo.userType === 0;
|
// if(state.isAdmin){
|
// getCompanyList();
|
// }
|
|
getList();
|
|
});
|
const getList = async () => {
|
loading.value = true;
|
const res = await getCompanyCount(state.queryParams);
|
if(res.code === 200){
|
state.dataList = res.data.list.map(item => {
|
return {
|
...item,
|
passRate: item.passStudentCount && item.paperStudentCount ? (item.passStudentCount / item.paperStudentCount).toFixed(2) *100 + '%': item.passStudentCount == 0 && item.paperStudentCount == 0? '0%': ''
|
|
}
|
})
|
state.total = res.data.total
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false;
|
}
|
const selectValue = (val) => {
|
state.companyList.forEach(item => {
|
if(item.name === val){
|
state.queryParams.companyId = item.id
|
}
|
})
|
}
|
|
const finshed = ref(false)
|
const loadingCompany = ref(false)
|
const getCompanyList = async (val)=>{
|
if(val != ""){
|
loadingCompany.value = true;
|
const queryParams = {
|
name: val
|
}
|
const res = await getCompany(queryParams)
|
if (res.code == 200) {
|
loadingCompany.value = false;
|
state.companyList = res.data.list
|
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
//触底函数
|
// const loadMore = () => {
|
// console.log(' 触底了');
|
// // 防抖处理
|
// setTimeout(() => {
|
// if (finshed.value) return //值为true，则代表没有数据了
|
// state.pageNum += 1
|
// // getCompanyList('')
|
// }, 500)
|
// }
|
const setDate = () => {
|
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
const sTime = moment(start).format('YYYY-MM-DD')
|
const eTime = moment(end).format('YYYY-MM-DD')
|
searchTime.value = [sTime,eTime];
|
state.queryParams.startTime = searchTime.value[0]+' 00:00:00'
|
state.queryParams.endTime = searchTime.value[1]+' 00:00:00'
|
}
|
const changeTime=(value)=>{
|
console.log('11',searchTime.value)
|
if(!value){
|
state.queryParams.endTime = ""
|
state.queryParams.startTime = ""
|
}
|
searchTime.value[0]=moment(searchTime.value[0]).format('YYYY-MM-DD')
|
searchTime.value[1]=moment(searchTime.value[1]).format('YYYY-MM-DD')
|
}
|
const searchClick = () => {
|
if(searchTime.value && searchTime.value.length>0){
|
state.queryParams.startTime = searchTime.value[0] + ' 00:00:00'
|
state.queryParams.endTime = searchTime.value[1] + ' 00:00:00'
|
}
|
getList();
|
}
|
|
/** 重置新增的表单以及其他数据 */
|
function reset() {
|
state.queryParams = {
|
companyId: '',
|
type: null,
|
endTime: '',
|
startTime: '',
|
pageNum: 1,
|
pageSize: 10,
|
}
|
searchTime.value = [];
|
state.companyList = [];
|
getList();
|
}
|
|
|
</script>
|
