<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"
|
>
|
<el-checkbox v-model="state.DisableSelection" style="margin-left: 30px;margin-bottom: 10px;font-weight: 600" @change="changeChecked">一键全选</el-checkbox>
|
<div style="display: flex;justify-content: space-between">
|
|
<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="state.allLoading"
|
:data="state.dataList"
|
:border="true"
|
:row-key="getRowKey"
|
@selection-change="handleSelectionChange"
|
v-model="state.selectRowKeys"
|
:header-cell-class-name="cellClass"
|
>
|
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" :selectable="selectable" />
|
<!-- <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" v-if="state.allLoading && state.DisableSelection " disabled>全选加载中</el-button>
|
<el-button type="primary" v-else @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} from "@/api/onlineEducation/questionBank";
|
import {getStudent, getStudentAll} from "@/api/onlineEducation/student";
|
import {batchAddStudent} from "@/api/onlineEducation/batch";
|
|
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: [],
|
isAdmin: false,
|
total: 0,
|
disabled:true,
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: '',
|
duty: ''
|
},
|
dataList: [],
|
totalItems: 0, // 总数据条数，从后端接口获取
|
phaseId: null,
|
chooseStu: [],
|
companyId: null,
|
selectRowKeys: [],
|
DisableSelection:false,
|
allStuList: [],
|
allLoading: false
|
|
})
|
const loading = ref(false);
|
|
const getRowKey = (row) => {
|
return row.id
|
}
|
const openDialog = async (data) => {
|
// state.selectRowKeys = [10,11]
|
state.phaseId = data.queryParams.phaseId
|
title.value = '学员选择';
|
dialogVisible.value = true;
|
await getAllStudent()
|
await getList()
|
|
}
|
|
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 () => {
|
console.log('state.chooseStu',state.chooseStu)
|
const res = await batchAddStudent(state.chooseStu)
|
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 = {
|
id: '',
|
name: '',
|
categoryId: null,
|
companyName: '',
|
companyId: null
|
}
|
|
tableRef.value.clearSelection();
|
state.dataList = []
|
state.allStuList = []
|
state.total = 0
|
state.DisableSelection = false
|
state.queryParams ={
|
pageNum: 1,
|
pageSize: 10,
|
name: '',
|
duty: ''
|
|
}
|
}
|
const handleSelectionChange = (val) => {
|
state.chooseStu = val.map(item => {
|
return {
|
companyId: item.companyId,
|
createId:item.createId,
|
phaseId:state.phaseId,
|
studentId: item.id
|
}
|
})
|
}
|
const resetQuery = () => {
|
state.form = {
|
id: '',
|
name: '',
|
categoryId: null,
|
companyName: '',
|
companyId: null
|
}
|
tableRef.value.clearSelection();
|
state.dataList = []
|
state.allStuList = []
|
state.total = 0
|
state.DisableSelection = false
|
state.queryParams ={
|
pageNum: 1,
|
pageSize: 10,
|
name: '',
|
duty: ''
|
|
}
|
getList()
|
}
|
const selectable = (row,rowIndex) => {
|
if(state.DisableSelection){
|
}else {
|
return true
|
}
|
|
}
|
const cellClass = (row) => {
|
if (state.DisableSelection) {
|
if(row.columnIndex == 0){
|
return "DisableSelection"
|
}
|
|
}
|
}
|
|
const changeChecked = (val) => {
|
tableRef.value.clearSelection();
|
if(val){
|
state.chooseStu= state.allStuList.map(item => {
|
return {
|
companyId: item.companyId,
|
createId:item.createId,
|
phaseId:state.phaseId,
|
studentId: item.id
|
}
|
})
|
}else {
|
state.chooseStu = []
|
}
|
}
|
const getAllStudent = async () => {
|
state.allLoading = true
|
const res = await getStudentAll()
|
if(res.code == 200){
|
state.allStuList = res.data
|
state.allLoading = false
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
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;
|
}
|
|
:deep(.el-table .DisableSelection .cell .el-checkbox__inner){
|
display: none;
|
position: relative;
|
}
|
:deep(.el-table .DisableSelection .cell:before){
|
content: "";
|
position: absolute;
|
}
|
}
|
</style>
|
