<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
:title="title"
|
width="800px"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<div style="margin-bottom: 10px;margin-left: 30px">
|
<el-checkbox v-model="state.bindBatchStu" @change="changeBind">绑定批次人员</el-checkbox>
|
<el-select
|
v-if="state.bindBatchStu"
|
multiple
|
collapse-tags
|
collapse-tags-tooltip
|
v-model="state.form.phaseIds"
|
style="width: 160px;margin: 0 20px"
|
v-loadMoreNew:[reselectExam]="handleScroll"
|
:popper-class="reselectExam.name"
|
class="item-width"
|
placeholder="请选择批次"
|
>
|
<el-option
|
v-for="item in state.batchList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
<div>
|
<el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
|
<el-form-item >
|
<!-- <el-checkbox v-model="state.DisableSelection">一键全选</el-checkbox>-->
|
</el-form-item>
|
<el-form-item label="姓名：" >
|
<el-input v-model="state.queryParams.name" placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="职务：" >
|
<el-input v-model="state.queryParams.duty" placeholder="请输入职务"></el-input>
|
</el-form-item>
|
<el-form-item >
|
<el-button
|
type="primary"
|
@click="getList"
|
>查询</el-button>
|
<el-button
|
type="primary"
|
plain
|
@click="resetQuery"
|
>重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 表格数据 -->
|
<el-table
|
ref="tableRef"
|
v-loading="loading"
|
:data="state.dataList"
|
:border="true"
|
:row-key="getRowKey"
|
@selection-change="handleSelectionChange"
|
v-model="state.selectRowKeys"
|
>
|
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
|
<!-- <el-table-column label="序号" type="index" align="center" width="80" />-->
|
<el-table-column label="工号" prop="empno" align="center" width="60" />
|
<el-table-column label="姓名" prop="name" align="center" />
|
<el-table-column label="性别" prop="sex" align="center" >
|
<template #default="scope">
|
<span>{{scope.row.sex == 0 ? '男':'女'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="手机号" prop="phone" align="center" width="130"/>
|
<el-table-column label="身份证" prop="idNo" align="center" width="200" :show-overflow-tooltip="true"/>
|
<!-- <el-table-column label="创建人" prop="createBy" align="center"/>-->
|
<el-table-column label="工作岗位" prop="post" align="center"/>
|
<el-table-column label="职务" prop="duty" align="center"/>
|
<!-- <el-table-column label="一人一档" prop="duty" align="center" width="120">-->
|
<!-- <template #default="scope">-->
|
<!-- <el-button link type="primary">培训考试记录</el-button>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
</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"
|
/>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {nextTick, reactive, ref, toRefs} from 'vue'
|
import {ElMessage} from "element-plus";
|
import Cookies from "js-cookie";
|
import {
|
addQuestionBank,
|
checkQuestionBankName,
|
editQuestionBank,
|
getQuestionBank
|
} from "@/api/onlineEducation/questionBank";
|
import {getStudent} from "@/api/onlineEducation/student";
|
import {batchAddStudent, getBatch} from "@/api/onlineEducation/batch";
|
import {examAddStudent} from "@/api/onlineEducation/exam";
|
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const tableRef = ref();
|
const length = ref()
|
const emit = defineEmits(["getList"]);
|
const startUsername = ref('');
|
const classifyRef = ref(null)
|
const state = reactive({
|
form: {
|
paperId: null,
|
phaseIds: [],
|
studentIds: []
|
},
|
isAdmin: false,
|
total: 0,
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: '',
|
duty: ''
|
},
|
dataList: [],
|
totalItems: 0, // 总数据条数，从后端接口获取
|
phaseId: null,
|
chooseStu: [],
|
companyId: null,
|
selectRowKeys: [],
|
batchList: [],
|
batchPageNum: 1, // 当前页码
|
batchPageSize: 10, // 每页显示的数量
|
hasMoreItemsBatch: null, // 是否还有更多选项
|
bindBatchStu: false
|
|
})
|
const loading = ref(false);
|
|
const reselectExam = reactive({
|
name: 'ExamBatch'
|
})
|
const getRowKey = (row) => {
|
return row.id
|
}
|
const openDialog = async (data) => {
|
// state.selectRowKeys = [10,11]
|
|
state.form.paperId = data.queryParams.paperId
|
title.value = '学员选择';
|
dialogVisible.value = true;
|
await getList()
|
await loadMoreBatchData()
|
}
|
|
const getList = async () => {
|
loading.value = true
|
const res = await getStudent(state.queryParams)
|
if(res.code == 200){
|
state.dataList = res.data.list
|
state.total = res.data.total
|
// await nextTick(() => {
|
// const currentIds = state.dataList.map(row => row.id)
|
// const selectIds = state.selectRowKeys.filter(id => currentIds.includes(id))
|
// state.dataList.forEach(row => {
|
// if (selectIds.includes(row.id)) {
|
// tableRef.value.toggleRowSelection(row, true);
|
// }
|
// })
|
// });
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
}
|
|
const onSubmit = async () => {
|
const res = await examAddStudent(state.form)
|
if(res.code === 200){
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
});
|
}else{
|
ElMessage.warning(res.message)
|
}
|
emit("getList")
|
reset();
|
dialogVisible.value = false;
|
}
|
|
const handleClose = () => {
|
reset();
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
const reset = () => {
|
state.form = {
|
paperId: null,
|
phaseIds: [],
|
studentIds: []
|
}
|
state.bindBatchStu = false;
|
state.batchList = [];
|
state.batchPageNum = 1;
|
state.batchPageSize = 10;
|
state.hasMoreItemsBatch = null;
|
tableRef.value.clearSelection();
|
state.dataList = []
|
state.total = 0
|
state.queryParams ={
|
pageNum: 1,
|
pageSize: 10
|
}
|
}
|
const handleSelectionChange = (val) => {
|
state.form.studentIds = val.map(item => item.id)
|
console.log("选中的行", state.form.studentIds)
|
}
|
|
const handleScroll = () => {
|
if(state.batchPageNum >= state.hasMoreItemsBatch) return
|
state.batchPageNum++;
|
loadMoreBatchData()
|
}
|
const loadMoreBatchData = async () => {
|
console.log(' Bank');
|
const queryParams = {
|
pageNum: state.batchPageNum,
|
pageSize: state.batchPageSize,
|
}
|
const res = await getBatch(queryParams)
|
if (res.code == 200) {
|
state.hasMoreItemsBatch = res.data.totalPage
|
const data = res.data
|
state.batchList = state.batchList.concat(data.list)
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
const changeBind = (val) => {
|
console.log('vv',val)
|
}
|
const resetQuery = () => {
|
state.queryParams ={
|
pageNum: 1,
|
pageSize: 10,
|
name: '',
|
duty: ''
|
}
|
getList()
|
}
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
</style>
|
