班级成绩图表分析

luohairen

2024-11-14 80889e7f32480ae76896f3bd042baa82a0fc9e9e

 src/views/class-management/ClassStaff.vue

@@ -1,101 +1,103 @@
<!-- 班级人员管理 -->
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <div class="content">
          <!-- 班级名称 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
            <span>{{title}}</span>
            <el-button @click="handlerAddStudent" type="primary" size="small">新增学员</el-button>
            <el-button @click="open = true" type="primary" size="small">学员调整</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            :header-cell-style="getRowClass"
            :row-style="{height:'38px'}"
            :cell-style="{padding: '0'}"
            :data="tableData"
            border
            style="width: 100%;"
          >
            <el-table-column
              align="center"
              prop="id"
              label="学号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="realName"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="sex"
              :formatter="sexFormatter"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="phone"
              label="电话"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="300px"
            >
              <template slot-scope="scope">
                <el-button @click="handlerEditStudent(scope.row)" type="warning">编辑</el-button>
                <el-button @click="remove(scope.row.id)" type="danger">删除</el-button>
                <el-button type="primary">分配角色</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="block"
            style="display: flex; margin-top: 40px;"
          >
            <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                        @pagination="page"/>
          </div>
        </div>
  <div class="app-container">
    <div style="display: flex; flex-direction: row">
      <div style="padding-bottom:20px">
        <span class="item">{{ this.$route.query.className }}</span>
        <el-button class="item" @click="handlerAddStudent" type="primary" size="small">新增学员</el-button>
        <el-button class="item" @click="openManage" type="primary" size="small">学员调整</el-button>
      </div>

      <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="学员姓名">
            <el-input v-model="searchForm.studentName" size="small" clearable @clear="page" @input="page"
                      placeholder="学员姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="page" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <PopUp
      ref="popUp"
      @children="parentGoods"
    />

    <!-- 表格 -->
    <el-table
      :header-cell-style="getRowClass"
      :row-style="{height:'38px'}"
      :cell-style="{padding: '0'}"
      :data="tableData"
      border
      style="width: 100%;"
    >
      <el-table-column
        align="center"
        prop="id"
        label="学号"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="realName"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sex"
        :formatter="sexFormatter"
        label="性别"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="电话"
      >
      </el-table-column>
    </el-table>
    <div
      class="block"
      style="display: flex; margin-top: 40px;"
    >
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.currentPage"
                  :limit.sync="searchForm.pageSize"
                  @pagination="page"/>
    </div>
    <el-dialog
      :title="studentTitle"
      :visible.sync="addOpen"
      width="700px"
      :before-close="handleAddClose">
      :before-close="handleAddClose"
      :close-on-click-modal="false">
      <el-form :model="studentForm" :rules="studentRules" ref="studentForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="studentForm.realName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="studentForm.sex">
            <el-option label="男" value="N"></el-option>
            <el-option label="女" value="V"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="studentForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="studentForm.account"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="studentForm.password" show-password placeholder="不填写会使用默认202406"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" prop="realName">
        <el-input v-model="studentForm.realName"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        <el-input v-model="studentForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="登录账号：" prop="userName">
        <el-input v-model="studentForm.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item v-if="!studentForm.id" label="登录密码：" prop="password">
        <el-input v-model="studentForm.password" show-password autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄：">
        <el-input v-model="studentForm.age"></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-select v-model="studentForm.sex" placeholder="性别" clearable>
          <el-option v-for="item in sexEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期：">
        <el-date-picker v-model="studentForm.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"/>
      </el-form-item>

      <el-form-item label="状态：">
        <el-select v-model="studentForm.status" placeholder="状态">
          <el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
        </el-select>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddClose">取 消</el-button>
@@ -131,46 +133,81 @@
</template>
<script>
// 引入彈出窗口組件
import PopUp from "../../../components/PopUp/Question.vue";
import UserApi from "@/api/user";
import { updateClassesUser, getClassesUsers, deleteClassesUserById, addClassesUser, edit } from "@/api/classesUser";
import UserApi from '@/api/user'
import { mapGetters, mapState } from 'vuex'
import {
  updateClassesUser,
  getClassesUsers,
  deleteClassesUserById,
  addClassesUser,
  editClassesUser
} from '@/api/classesUser'
import Pagination from '@/components/Pagination'

export default {
  // 注册
  components: {
    PopUp,
  },
  data() {
  components: { Pagination },
  data () {
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'))
      } else if (!/[A-Z]/.test(value)) {
        callback(new Error('密码必须包含至少一个大写字母'))
      } else if (!/[a-z]/.test(value)) {
        callback(new Error('密码必须包含至少一个小写字母'))
      } else if (!/[0-9]/.test(value)) {
        callback(new Error('密码必须包含至少一个数字'))
      } else {
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      // 手机号和座机号验证逻辑
      const phoneRegex = /^1[3-9]\d{9}$/; // 手机号格式
      const landlineRegex = /^\d{3,4}-?\d{7,8}$/; // 座机号格式，可以包含区号和可选的连字符

      if (!value) {
        callback(new Error('请输入手机号或座机号'));
      } else if (!phoneRegex.test(value)) {
        if (!landlineRegex.test(value)){
          callback(new Error('手机号或座机号格式不正确'));
        }
      } else {
        callback();
      }
    }
    return {
      studentForm: {
        realName: "",
        sex: "",
        phone: "",
        id: null,
        realName: '',
        sex: 1,
        phone: '',
        birthDay: '',
        age: null,
        account: "",
        password: ""
        userName: '',
        password: ''
      },
      studentRules: {
        realName: [
          { required: true, message: '请填写学员姓名', trigger: 'blur' },
        userName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择学员性别', trigger: 'change' },
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写学员电话', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请填写学员登录账号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]
      },
      studentTitle: "新增学员",
      studentTitle: '新增学员',
      addOpen: false,
      total: 0,
      studentList: [],
      searchForm: {
        examName: "",
        studentName: '',
        pageSize: 10,
        pageNum: 1,
        currentPage: 1,
        classesId: null
      },
      classes: {
@@ -179,78 +216,86 @@
      },
      open: false,
      // 班级名称
      title: "19级软件四班",
      title: '19级软件四班',
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
        type: '',
        user: '',
        region: ''
      },
      tableData: [
      ],
    };
      tableData: []
    }
  },
  mounted() {
    this.classes.id = this.$route.query.classesId;
  mounted () {
    this.classes.id = this.$route.query.classesId
    this.page()
    this.getClassesCurrentUserList(this.classes.id)
    this.getStudentList()
  },
  methods: {
    handlerEditStudent(row) {
    openManage () {
      this.getClassesCurrentUserList(this.classes.id)
      this.open = true
    },
    handlerEditStudent (row) {
      this.studentForm = row
      this.studentTitle = "编辑学员"
      this.studentTitle = '编辑学员'
      this.addOpen = true
    },
    handlerAddStudent() {
      this.studentTitle = "添加学员"
    handlerAddStudent () {
      this.studentTitle = '添加学员'
      this.addOpen = true
    },
    submitStudentForm() {
    submitStudentForm () {
      this.$refs['studentForm'].validate((valid) => {
        console.log(this.studentForm)
        if (valid) {
          this.studentForm.classes = this.classes.id
          if (this.studentForm.id) {
            edit(this.studentForm).then(res => {
              this.addOpen = false
              this.$message.success(res.data.message)
              this.page()
            })
          }
          this.studentForm.classesId = this.classes.id
          addClassesUser(this.studentForm).then(res => {
            this.addOpen = false
            this.$message.success(res.data.message)
            this.page()
            this.resetStudentForm()
          })
        }
      })
    },
    resetStudentForm() {
    resetStudentForm () {
      this.studentForm = {
        realName: "",
        sex: "",
        phone: "",
        age: null
        id: null,
        realName: '',
        sex: 1,
        phone: '',
        birthDay: '',
        age: null,
        userName: '',
        password: ''
      }
    },
    handleAddClose() {
    handleAddClose () {
      this.addOpen = false
      this.resetStudentForm()
    },
    remove(id) {
      deleteClassesUserById(id).then(res => {
        this.$message.success(res.data.message)
        this.page()
    remove (id) {
      this.$confirm('确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteClassesUserById(id).then(res => {
          this.$message.success(res.data.message)
          this.page()
        })
      })
    },
    sexFormatter(row) {
    sexFormatter (row) {
      if (row.sex === 1) {
        return "男"
        return '男'
      }
      if (row.sex === 2) {
        return "女"
        return '女'
      }
    },
    getClassesCurrentUserList(classesId) {
    getClassesCurrentUserList (classesId) {
      let param = {
        classesId: classesId
      }
@@ -258,75 +303,85 @@
        this.classes.studentList = res.data.map(item => item.id)
      })
    },
    getStudentList() {
    getStudentList () {
      UserApi.studentList().then(res => {
        this.studentList = res.data;
        this.studentList = res.data
      })
    },
    // 获取当前班级学员分页
    page() {
    page () {
      this.searchForm.classesId = this.classes.id
      getClassesUsers(this.searchForm).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
        this.loading = false
      })
    },
    submitForm() {
    submitForm () {
      updateClassesUser(this.classes).then(res => {
        this.$message.success(res.data.message)
        this.page();
        this.page()
        this.open = false
      })
    },
    handleClose() {
    handleClose () {
      this.open = false
    },
    filterMethod(query, item) {
      if (! item.realName) {
    filterMethod (query, item) {
      if (!item.realName) {
        return null
      }
      return item.realName.indexOf(query) > -1;
      return item.realName.indexOf(query) > -1
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    goBack () {
      this.$router.back()
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    getRowClass () {
      return 'background:#d2d3d6'
    },

    // 生成试卷
    getCreate() {
    getCreate () {
      // 跳转到生成页面
      //跳转到对应的管理页面
      // 跳转到对应的管理页面
      this.$router.push({
        path: "/manage/test-paper-generation",
      });
    },

    // 点击后调用弹窗组件的方法,开启弹窗
    getDialogFormVisible() {
      this.$refs.popUp.showDialog();
        path: '/manage/test-paper-generation'
      })
    },
    // 弹窗
    // 接收弹窗组件返回的表单值
    parentGoods(obj) {
      console.log(obj, "弹窗组件的表单值");
    },
    parentGoods (obj) {
      console.log(obj, '弹窗组件的表单值')
    }
  },
};
  computed: {
    ...mapGetters('enumItem', [
      'enumFormat'
    ]),
    ...mapState('enumItem', {
      sexEnum: state => state.user.sexEnum,
      roleEnum: state => state.user.roleEnum,
      statusEnum: state => state.user.statusEnum,
      levelEnum: state => state.user.levelEnum
    })
  }
}
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}

// 内容
.content {
  width: 1262px;
  margin-bottom: 80px;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 10px;
}
.item {
  margin-right: 5px;
}
</style>