修改首页

马宇豪

2024-12-18 585d90f0e3194d6b988a424036291921794678ab

 src/views/onlineEducation/classHourBatch/components/chooseStudent.vue

@@ -3,20 +3,49 @@
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="50%"
        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="loading"
          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" />
        <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"  />
@@ -47,7 +76,8 @@
      <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>
           <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>
@@ -58,7 +88,7 @@
import {ElMessage} from "element-plus";
import Cookies from "js-cookie";
import {addQuestionBank, checkQuestionBankName, editQuestionBank} from "@/api/onlineEducation/questionBank";
import {getStudent} from "@/api/onlineEducation/student";
import {getStudent, getStudentAll} from "@/api/onlineEducation/student";
import {batchAddStudent} from "@/api/onlineEducation/batch";

const dialogVisible = ref(false);
@@ -72,16 +102,22 @@
  form: [],
  isAdmin: false,
  total: 0,
  disabled:true,
  queryParams: {
    pageNum: 1,
    pageSize: 10
    pageSize: 10,
    name: '',
    duty: ''
  },
  dataList: [],
  totalItems: 0, // 总数据条数，从后端接口获取
  phaseId: null,
  chooseStu: [],
  companyId: null,
  selectRowKeys: []
  selectRowKeys: [],
  DisableSelection:false,
  allStuList: [],
  allLoading: false

})
const loading = ref(false);
@@ -91,11 +127,12 @@
}
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 () => {
@@ -120,6 +157,7 @@
}

const onSubmit = async () => {
  console.log('state.chooseStu',state.chooseStu)
    const res = await batchAddStudent(state.chooseStu)
    if(res.code === 200){
      ElMessage({
@@ -147,17 +185,21 @@
    companyName: '',
    companyId: null
  }

  tableRef.value.clearSelection();
  state.dataList = []
  state.allStuList = []
  state.total = 0
  state.DisableSelection = false
  state.queryParams ={
    pageNum: 1,
    pageSize: 10
    pageSize: 10,
    name: '',
    duty: ''

  }
}
const handleSelectionChange = (val) => {

  console.log("选中的行", val)
  state.chooseStu = val.map(item => {
    return {
      companyId: item.companyId,
@@ -167,6 +209,70 @@
    }
  })
}
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
});
@@ -183,5 +289,14 @@
    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>