Merge remote-tracking branch 'origin/master'

fuliqi

2024-06-06 0af507deb2a8b08a606b795d73c660d02ecb7f49

 src/views/Manage/ClassManagement/ClassStaff.vue

@@ -3,11 +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="handlerAddStudent" type="primary" size="small">新增学员</el-button>
            <el-button @click="open = true" type="primary" size="small">学员调整</el-button>
          </div>
          <!-- 表格 -->
          <el-table
@@ -26,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>
@@ -43,33 +45,23 @@
            >
            </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
            class="block"
            style="display: flex; margin-top: 40px;"
          >
            <el-pagination
              style="margin:auto"
              background
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
            <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                        @pagination="page"/>
          </div>
        </div>
      </div>
@@ -79,11 +71,69 @@
      ref="popUp"
      @children="parentGoods"
    />

    <el-dialog
      :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">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="学员姓名"
        :titles="['学生列表', '当前学生']"
        :button-texts="['退出班级', '加入班级']"
        :props="{
          key: 'id',
          label: 'realName'
        }"
        v-model="classes.studentList"
        :data="studentList">
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
// 引入彈出窗口組件
import PopUp from "../../../components/PopUp/Question.vue";
import UserApi from "@/api/user";
import { updateClassesUser, getClassesUsers, deleteClassesUserById, addClassesUser, edit } from "@/api/classesUser";
export default {
  // 注册
  components: {
@@ -91,6 +141,43 @@
  },
  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: {
        realName: "",
        pageSize: 10,
        pageNum: 1,
        classesId: null
      },
      classes: {
        id: null,
        studentList: []
      },
      open: false,
      // 班级名称
      title: "19级软件四班",
      formLabelAlign: {
@@ -99,90 +186,102 @@
        region: "",
      },
      tableData: [
        {
          id: 1,
          name: "张三",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "李四",
          sex: "女",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
        {
          id: 1,
          name: "张三",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "李四",
          sex: "女",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
        {
          id: 1,
          name: "张三",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "李四",
          sex: "女",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
      ],
    };
  },
  mounted() {
    this.classes.id = this.$route.query.classesId;
    this.page()
    this.getClassesCurrentUserList(this.classes.id)
    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
      }
      UserApi.getClassesCurrentUserList(param).then(res => {
        this.classes.studentList = res.data
      })
    },
    getStudentList() {
      UserApi.studentList().then(res => {
        this.studentList = res.data;
      })
    },
    // 获取当前班级学员分页
    page() {
      this.searchForm.classesId = this.classes.id
      getClassesUsers(this.searchForm).then(res => {
        this.tableData = res.data.data
      })
    },
    submitForm() {
      updateClassesUser(this.classes).then(res => {
        this.$message.success(res.data.message)
        this.page();
      })
    },
    handleClose() {
      this.open = false
    },
    filterMethod(query, item) {
      return item.realName.indexOf(query) > -1;
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();