班级成绩图表分析

luohairen

2024-11-14 80889e7f32480ae76896f3bd042baa82a0fc9e9e

 src/views/class-management/ClassStaff.vue

@@ -3,18 +3,18 @@
  <div class="app-container">
    <div style="display: flex; flex-direction: row">
      <div style="padding-bottom:20px">
        <span class="item">{{ title }}</span>
        <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="open = true" 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"
            <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">查询</el-button>
            <el-button type="primary" @click="page" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -53,16 +53,6 @@
        label="电话"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <el-button @click="handlerEditStudent(scope.row)" type="warning" size="small">编辑</el-button>
          <el-button @click="remove(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="block"
@@ -79,25 +69,35 @@
      :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="id" v-show="false"/>
        <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="1"></el-option>
            <el-option label="女" :value="2"></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>
@@ -134,12 +134,12 @@
<script>
// 引入彈出窗口組件
import UserApi from '@/api/user'
import { mapGetters, mapState } from 'vuex'
import {
  updateClassesUser,
  getClassesUsers,
  deleteClassesUserById,
  addClassesUser,
  edit,
  editClassesUser
} from '@/api/classesUser'
import Pagination from '@/components/Pagination'
@@ -147,28 +147,57 @@
export default {
  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: {
        id: null,
        realName: '',
        sex: 1,
        phone: '',
        birthDay: '',
        age: null,
        account: '',
        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: '新增学员',
@@ -191,9 +220,9 @@
      formLabelAlign: {
        type: '',
        user: '',
        region: '',
        region: ''
      },
      tableData: [],
      tableData: []
    }
  },
  mounted () {
@@ -203,6 +232,10 @@
    this.getStudentList()
  },
  methods: {
    openManage () {
      this.getClassesCurrentUserList(this.classes.id)
      this.open = true
    },
    handlerEditStudent (row) {
      this.studentForm = row
      this.studentTitle = '编辑学员'
@@ -217,30 +250,25 @@
        console.log(this.studentForm)
        if (valid) {
          this.studentForm.classesId = this.classes.id
          if (this.studentForm.id) {
            editClassesUser(this.studentForm).then(res => {
              this.addOpen = false
              this.$message.success(res.data.message)
              this.page()
              this.resetStudentForm()
            })
          }else {
            addClassesUser(this.studentForm).then(res => {
              this.addOpen = false
              this.$message.success(res.data.message)
              this.page()
              this.resetStudentForm()
            })
          }
          addClassesUser(this.studentForm).then(res => {
            this.addOpen = false
            this.$message.success(res.data.message)
            this.page()
            this.resetStudentForm()
          })
        }
      })
    },
    resetStudentForm () {
      this.studentForm = {
        id: null,
        realName: '',
        sex: '',
        sex: 1,
        phone: '',
        age: null
        birthDay: '',
        age: null,
        userName: '',
        password: ''
      }
    },
    handleAddClose () {
@@ -248,9 +276,15 @@
      this.resetStudentForm()
    },
    remove (id) {
      deleteClassesUserById(id).then(res => {
        this.$message.success(res.data.message)
        this.page()
      this.$confirm('确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteClassesUserById(id).then(res => {
          this.$message.success(res.data.message)
          this.page()
        })
      })
    },
    sexFormatter (row) {
@@ -311,17 +345,28 @@
    // 生成试卷
    getCreate () {
      // 跳转到生成页面
      //跳转到对应的管理页面
      // 跳转到对应的管理页面
      this.$router.push({
        path: '/manage/test-paper-generation',
        path: '/manage/test-paper-generation'
      })
    },
    // 弹窗
    // 接收弹窗组件返回的表单值
    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">
@@ -340,4 +385,3 @@
  margin-right: 5px;
}
</style>