班级学员新增、修改

xiangpei

2024-06-06 0f823d771d6a876c8990ad5b7dd80c835c38c53f

 src/views/Manage/ClassManagement/ClassStaff.vue

@@ -3,12 +3,12 @@
  <div class="c">
    <div class="bg">
      <div class="main">
        <TitleIndex title="班级人员管理" />
        <div class="content">
          <!-- 班级名称 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
            <span>{{title}}</span>
            <el-button @click="open = true" type="primary" size="small">新增学员</el-button>
            <el-button @click="handlerAddStudent" type="primary" size="small">新增学员</el-button>
            <el-button @click="open = true" type="primary" size="small">学员调整</el-button>
          </div>
          <!-- 表格 -->
          <el-table
@@ -27,13 +27,14 @@
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              prop="realName"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="sex"
              :formatter="sexFormatter"
              label="性别"
            >
            </el-table-column>
@@ -44,19 +45,15 @@
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="condition"
              label="上线情况"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="300px"
            >
              <el-button type="warning">编辑</el-button>
              <el-button type="danger">删除</el-button>
              <el-button type="primary">分配角色</el-button>
              <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
@@ -76,7 +73,38 @@
    />

    <el-dialog
      title="学员管理"
      :title="studentTitle"
      :visible.sync="addOpen"
      width="700px"
      :before-close="handleAddClose">
      <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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddClose">取 消</el-button>
        <el-button type="primary" @click="submitStudentForm">添 加</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="学员调整"
      :visible.sync="open"
      width="900px"
      :before-close="handleClose">
@@ -105,7 +133,7 @@
// 引入彈出窗口組件
import PopUp from "../../../components/PopUp/Question.vue";
import UserApi from "@/api/user";
import { updateClassesUser, getClassesUsers } from "@/api/classesUser";
import { updateClassesUser, getClassesUsers, deleteClassesUserById, addClassesUser, edit } from "@/api/classesUser";
export default {
  // 注册
  components: {
@@ -113,6 +141,30 @@
  },
  data() {
    return {
      studentForm: {
        realName: "",
        sex: "",
        phone: "",
        age: null,
        account: "",
        password: ""
      },
      studentRules: {
        realName: [
          { required: true, message: '请填写学员姓名', trigger: 'blur' },
        ],
        sex: [
          { required: true, message: '请选择学员性别', trigger: 'change' },
        ],
        phone: [
          { required: true, message: '请填写学员电话', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请填写学员登录账号', trigger: 'blur' },
        ]
      },
      studentTitle: "新增学员",
      addOpen: false,
      total: 0,
      studentList: [],
      searchForm: {
@@ -134,14 +186,6 @@
        region: "",
      },
      tableData: [
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
      ],
    };
  },
@@ -152,6 +196,60 @@
    this.getStudentList()
  },
  methods: {
    handlerEditStudent(row) {
      this.studentForm = row
      this.studentTitle = "编辑学员"
      this.addOpen = true
    },
    handlerAddStudent() {
      this.studentTitle = "添加学员"
      this.addOpen = true
    },
    submitStudentForm() {
      this.$refs['studentForm'].validate((valid) => {
        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()
            })
          }
          addClassesUser(this.studentForm).then(res => {
            this.addOpen = false
            this.$message.success(res.data.message)
            this.page()
          })
        }
      })
    },
    resetStudentForm() {
      this.studentForm = {
        realName: "",
        sex: "",
        phone: "",
        age: null
      }
    },
    handleAddClose() {
      this.addOpen = false
      this.resetStudentForm()
    },
    remove(id) {
      deleteClassesUserById(id).then(res => {
        this.$message.success(res.data.message)
        this.page()
      })
    },
    sexFormatter(row) {
      if (row.sex === 1) {
        return "男"
      }
      if (row.sex === 2) {
        return "女"
      }
    },
    getClassesCurrentUserList(classesId) {
      let param = {
        classesId: classesId
@@ -175,11 +273,11 @@
    submitForm() {
      updateClassesUser(this.classes).then(res => {
        this.$message.success(res.data.message)
        this.classesStudentPage();
        this.page();
      })
    },
    handleClose() {

      this.open = false
    },
    filterMethod(query, item) {
      return item.realName.indexOf(query) > -1;