代码迁移、路由

xiangpei

2024-06-12 1aa0483fabd258d1c1b1f9b21cc585ce75ddf5b9

代码迁移、路由

 src/api/classes.js

New file
@@ -0,0 +1,77 @@
import axios from "./request";

// 获取班级分页
export const getClassess = (params) => {
    return axios({
        url: "/api/admin/classes/page",
        method: "GET",
        params: params
    })
}

// 我的班级
export const myClasses = () => {
  return axios({
    url: "/api/admin/classes/my",
    method: "GET"
  })
}

// 获取班级列表
export const getClassesList = () => {
    return axios({
        url: "/api/admin/classes/list",
        method: "GET"
    })
}

// 通过id获取班级
export const getClassesById = (params) => {
    return axios({
        url: "/api/admin/classes/" + params,
        method: "GET"
    })
}

// 通过id删除班级
export const deleteClassesById = (params) => {
    return axios({
        url: "/api/admin/classes/" + params,
        method: "DELETE"
    })
}

// 解散班级
export const dissolution = (params) => {
  return axios({
    url: "/api/admin/classes/dissolution/" + params,
    method: "PUT"
  })
}

// 批量删除班级
export const deleteClassesByIds = (params) => {
    return axios({
        url: "/api/admin/classes/batch",
        method: "DELETE",
        data: params
    })
}

// 修改班级
export const editClasses = (params) => {
    return axios({
        url: "/api/admin/classes/",
        method: "PUT",
        data: params
    })
}

// 添加班级
export const addClasses = (params) => {
    return axios({
        url: "/api/admin/classes/",
        method: "POST",
        data: params
    })
}

 src/api/classesNotify.js

New file
@@ -0,0 +1,61 @@
import axios from "./request";

// 获取班级通知分页
export const getClassesNotifys = (params) => {
    return axios({
        url: "/api/admin/classes-notify/page",
        method: "GET",
        params: params
    })
}

// 获取班级通知列表
export const getClassesNotifyList = () => {
    return axios({
        url: "/api/admin/classes-notify/list",
        method: "GET"
    })
}

// 通过id获取班级通知
export const getClassesNotifyById = (params) => {
    return axios({
        url: "/api/admin/classes-notify/" + params,
        method: "GET"
    })
}

// 通过id删除班级通知
export const deleteClassesNotifyById = (params) => {
    return axios({
        url: "/api/admin/classes-notify/" + params,
        method: "DELETE"
    })
}

// 批量删除班级通知
export const deleteClassesNotifyByIds = (params) => {
    return axios({
        url: "/api/admin/classes-notify/batch",
        method: "DELETE",
        data: params
    })
}

// 修改班级通知
export const editClassesNotify = (params) => {
    return axios({
        url: "/api/admin/classes-notify/",
        method: "PUT",
        data: params
    })
}

// 添加班级通知
export const addClassesNotify = (params) => {
    return axios({
        url: "/api/admin/classes-notify/",
        method: "POST",
        data: params
    })
}

 src/api/classesUser.js

New file
@@ -0,0 +1,55 @@
import axios from "./request";

// 获取班级与用户关联表分页
export const getClassesUsers = (params) => {
    return axios({
        url: "/api/admin/classesUser/page",
        method: "GET",
        params: params
    })
}

// 保存班级学员数据(删除/新增)
export const updateClassesUser = (data) => {
  return axios({
    url: "/api/admin/classesUser/edit",
    method: "POST",
    data: data
  })
}

// 编辑学员信息
export const editClassesUser = (data) => {
  return axios({
    url: "/api/admin/classesUser",
    method: "PUT",
    data: data
  })
}


// 通过id删除
export const deleteClassesUserById = (params) => {
  return axios({
    url: "/api/admin/classesUser/" + params,
    method: "DELETE"
  })
}

// 批量删除
export const deleteClassesUserByIds = (params) => {
  return axios({
    url: "/api/admin/classesUser/batch",
    method: "DELETE",
    data: params
  })
}

// 添加班级与用户关联表
export const addClassesUser = (params) => {
  return axios({
    url: "/api/admin/classesUser/",
    method: "POST",
    data: params
  })
}

 src/api/request.js

New file
@@ -0,0 +1,54 @@
import axios from "axios";
import router from "../router";
import {Message} from 'element-ui';
import vue from "vue";

const instance = axios.create({
  baseURL: process.env.VUE_APP_URL,
  timeout: 50000,
  // 不携带cookie
  withCredentials: true,
  headers: {
    "Content-Type": "application/json"
  }
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  Message.error("请求存在问题，请检查")
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  if (response.data.code === 1) {
    return response;
    // 验证码错误放行，以便刷新验证码
  }
  // 处理自定义状态码
  else if (response.data.code === 1998) {
    return response;
  } else {
    Message.error(response.data.msg);
    return Promise.reject(response.data.msg);
  }

}, function (error) {
  // 处理http状态码
  if (error.response.data) {
    error.message = error.response.data.msg;
  }
  if (error.response.code === 401) {
    error.message = "登录已过期，请重新登录";
    vue.prototype.$$router.push({ path: '/login' })
  }
  if (error.response.code === 403) {
    error.message = "权限不足";
  }
  Message.error(error.message);
  return Promise.reject(error);
});

export default instance;

 src/api/subject.js

@@ -1,7 +1,7 @@
import { post } from '@/utils/request'

export default {
  list: query => post('/api/admin/education/subject/list'),
  list: query => post('/api/admin/subject/list'),
  pageList: query => post('/api/admin/education/subject/page', query),
  edit: query => post('/api/admin/education/subject/edit', query),
  select: id => post('/api/admin/education/subject/select/' + id),

 src/router.js

@@ -26,7 +26,7 @@
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    redirect: '/login',
    children: [
      {
        path: 'dashboard',

 src/views/class-management/Class.vue

New file
@@ -0,0 +1,387 @@
<!-- 班级管理 -->
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <div class="main-1">
          <div
            class="main-btn flex"
            style="justify-content:space-between"
          >
            <div>
              <el-button
                type="primary"
                size="small"
                style="margin-right:20px;"
                @click="handlerAdd"
              >新增班级</el-button>
            </div>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
              <el-form-item label="班级名称">
                <el-input v-model="searchForm.className" size="small" clearable @clear="page" placeholder="班级名称"></el-input>
              </el-form-item>
              <el-form-item label="班级状态">
                <el-select v-model="searchForm.status" size="small" clearable @change="page" placeholder="班级状态">
                  <el-option label="正常" value="normal"></el-option>
                  <el-option label="解散" value="dissolution"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="page">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div>
              <el-table
                v-loading="loading"
                :data="tableData"
                border
                :row-style="{height:'42px'}"
                :cell-style="{padding: '0'}"
              >
                <el-table-column
                  align="center"
                  label="班级"
                  prop="className"
                  width="180px"
                ></el-table-column>
                <el-table-column
                  label="状态"
                  align="center"
                  width="80px"
                  prop="status"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '正常'" type="success">{{scope.row.status}}</el-tag>
                    <el-tag v-if="scope.row.status === '解散'" type="danger">{{scope.row.status}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  width="100px"
                  align="center"
                  label="单位"
                  prop="unit"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="100px"
                  label="教师"
                  prop="createUserName"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="120px"
                  label="联系电话"
                  prop="teacherPhone"
                ></el-table-column>
                <el-table-column
                  width="140px"
                  label="开班时间"
                  align="center"
                  prop="startTime"
                ></el-table-column>
                <el-table-column
                  width="140px"
                  label="结束时间"
                  align="center"
                  prop="endTime"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.status !== '解散'" size="small" @click="handlerEdit(scope.row)" type="primary">修改</el-button>
                    <el-button v-if="scope.row.status !== '解散'" size="small" type="warning">班级验证</el-button>
                    <el-button v-if="scope.row.status !== '解散'" size="small" @click="handlerOpenNotify(scope.row)" type="info">通知</el-button>
                    <el-button v-if="scope.row.status !== '解散'" @click="studentManager(scope.row.id)" size="small" type="success">成员管理</el-button>
                    <el-button v-if="scope.row.status !== '解散'" @click="dissolution(scope.row.id)" type="danger" size="small">解散</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div
              class="flex"
              style="justify-content:center;margin-top:20px;"
            >
              <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageIndex" :limit.sync="searchForm.pageSize"
                          @pagination="page"/>
            </div>
          </div>
        </div>
      </div>

    </div>

    <el-dialog
      title="班级通知"
      :visible.sync="notifyOpen"
      width="600px"
      :before-close="handleClose">
      <el-form :model="notifyForm" :rules="notifyRules" ref="notifyForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="通知班级：" prop="className">
          <span>{{notifyForm.className}}</span>
        </el-form-item>
        <el-form-item label="通知内容：" prop="notifyContent">
          <el-input type="textarea" v-model="notifyForm.notifyContent" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleNotifyClose">取 消</el-button>
        <el-button type="primary" @click="submitNotifyForm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="700px"
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="班级名称" prop="className">
          <el-input v-model="form.className" size="small"></el-input>
        </el-form-item>
        <el-form-item label="班级时间" required>
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="备注信息" prop="remark">
          <el-input type="textarea" v-model="form.remark" size="small"></el-input>
        </el-form-item>
      </el-form>
      <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 { addClasses, editClasses, getClassess, dissolution } from "@/api/classes";
import { addClassesNotify } from "@/api/classesNotify";
import Pagination from "@/components/Pagination"
export default {
  components: {Pagination},
  data() {
    return {
      notifyOpen: false,
      notifyForm: {
        className: '',
        notifyContent: '',
        classesId: null
      },
      loading: true,
      total: 0,
      open: false,
      title: "",
      value: "",
      searchForm: {
        className:'',
        status: '',
        subject: null,
        pageSize: 10,
        pageNum: 1
      },
      form: {
        id: null,
        className: "",
        status: "",
        verifyStatus: "",
        startTime: null,
        endTime: null,
        remark: ""
      },
      notifyRules: {
        notifyContent: [
          { required: true, message: '请输入通知内容', trigger: 'blur' },
          { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ],
      },
      rules: {
        className: [
          { required: true, message: '请输入班级名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择班级开始时间', trigger: 'change' },
        ],
        endTime: [
          { required: true, message: '请选择班级结束时间', trigger: 'change' },
        ],
      },
      tableData: [

      ],
    };
  },
  methods: {
    handlerOpenNotify(row) {
      this.notifyOpen = true
      this.notifyForm.className = row.className
      this.notifyForm.classesId = row.id
    },
    submitNotifyForm() {
      this.$refs['notifyForm'].validate((valid) => {
        if (valid) {
          let _this = this
          addClassesNotify(_this.notifyForm).then(res => {
            this.$message.success(res.data.message)
            this.notifyOpen = false
            this.clearNotifyForm()
          })
        }
      })
    },
    clearNotifyForm() {
      this.notifyForm = {
        className: '',
        notifyContent: ''
      }
    },
    handleNotifyClose() {
      this.notifyOpen = false
      this.clearNotifyForm()
    },
    page() {
      getClassess(this.searchForm).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
        this.loading = false
      })
    },
    resetForm() {
      this.form = {
        id: null,
        className: "",
        status: "",
        verifyStatus: "",
        startTime: null,
        endTime: null,
        remark: ""
      }
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            editClasses(this.form).then(res => {
              this.$message.success("修改成功")
              this.resetForm()
              this.open = false
              this.page()
            })
          } else {
            addClasses(this.form).then(res => {
              this.$message.success("添加班级成功")
              this.resetForm()
              this.open = false
              this.page()
            })
          }
        } else {
          return false;
        }
      });
    },
    dissolution(id) {
      dissolution(id).then(res => {
        this.$message.success(res.data.message)
        this.page()
      })
    },
    handlerEdit(row) {
      this.form = row;
      this.open = true
    },
    handleClose() {
      this.open = false
      this.resetForm()
    },
    handlerAdd() {
      this.open = true
      this.title = "新增班级"
    },
    // 跳转(查看班级人员情况)
    studentManager(classesId) {
      this.$router.push({ path: "class-management/Class-staff", query: { classesId: classesId } });
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
  },
  created() {
    this.page()
  },
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}
.mian-1-top {
  margin: 10px 0;
  align-items: center;
  & input {
    height: 30px;
    width: 200px;
    margin-right: 20px;
  }
}

.main {
  &-title {
    border-left: 5px solid rgb(16, 71, 247);
    padding-left: 10px;
    margin: 30px 0;
    & p {
      font-weight: 700;
    }
  }
  &-1 {
    width: 1227px;
    // height: 784px;
    background: white;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 32px 40px;
  }
  &-btn {
    padding-bottom: 10px;
    border-bottom: 3px solid rgb(16, 71, 247);
  }
}
.deepBlue {
  background: rgb(16, 71, 247);
  color: white;
  border: none;
  &:hover {
    background-color: rgb(45, 92, 248);
  }
}
</style>

 src/views/class-management/ClassStaff.vue

New file
@@ -0,0 +1,332 @@
<!-- 班级人员管理 -->
<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>

    </div>
    <PopUp
      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: {
    PopUp,
  },
  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: {
        examName: "",
        pageSize: 10,
        pageNum: 1,
        classesId: null
      },
      classes: {
        id: null,
        studentList: []
      },
      open: false,
      // 班级名称
      title: "19级软件四班",
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      },
      tableData: [
      ],
    };
  },
  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.map(item => item.id)
      })
    },
    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) {
      if (! item.realName) {
        return null
      }
      return item.realName.indexOf(query) > -1;
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    },

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

    // 点击后调用弹窗组件的方法,开启弹窗
    getDialogFormVisible() {
      this.$refs.popUp.showDialog();
    },
    // 弹窗
    // 接收弹窗组件返回的表单值
    parentGoods(obj) {
      console.log(obj, "弹窗组件的表单值");
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}
// 内容
.content {
  width: 1262px;
  margin-bottom: 80px;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 10px;
}
</style>



 src/views/class-management/index.vue

New file
@@ -0,0 +1,12 @@
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

 src/views/exam/exam/ExamManage.vue

New file
@@ -0,0 +1,377 @@
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <div class="main-1">
          <div class="main-btn">
            <el-button
              type="primary"
              @click="openAdd"
            >安排考试
            </el-button>
          </div>
          <div>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
              <el-form-item label="考试名称">
                <el-input v-model="searchForm.examName" @input="page" clearable size="small" clearable @clear="page" placeholder="班级名称"></el-input>
              </el-form-item>
              <el-form-item label="参考班级">
                <el-select v-model="searchForm.classesId" @change="page" clearable @clear="page">
                  <el-option v-for="classes in classesList" :key="classes.id" :value="classes.id" :label="classes.className"/>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="page" size="small">查询</el-button>
              </el-form-item>
            </el-form>
            <div>
              <el-table :data="tableData">
                <el-table-column
                  label="考试名称"
                  prop="examName"
                ></el-table-column>
                <el-table-column
                  label="考试试卷"
                  prop="examPaperName"
                ></el-table-column>
                <el-table-column
                  label="参考班级"
                  prop="className"
                ></el-table-column>
                <el-table-column
                  label="班级人数"
                  prop="studentNum"
                ></el-table-column>
                <el-table-column
                  label="考试地点"
                  prop="examPlace"
                ></el-table-column>
                <el-table-column
                  label="考试状态"
                  prop="status"
                  :formatter="statusFormatter"
                ></el-table-column>
                <el-table-column
                  label="创建时间"
                  width="150px"
                  prop="createTime"
                ></el-table-column>
                <el-table-column
                  label="考试时间"
                  width="200px"
                  algin="center"
                >
                  <template slot-scope="scope">
                    <div>{{scope.row.startTime}}</div>
                    <div>至</div>
                    <div>{{scope.row.endTime}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fiexd="right" width="150px">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handlerEdit(scope.row)"
                    >修改
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteExam(scope.row.id)">删除</el-button>
                    <el-button type="success" size="small" @click="markPaper(scope.row)">阅卷</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div
              class="flex"
              style="justify-content:center;margin-top:20px;"
            >
              <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageIndex" :limit.sync="searchForm.pageSize"
                          @pagination="page"/>
            </div>
          </div>
        </div>
      </div>

    </div>


    <el-dialog width="500px" :title="title" @close="closeHandler" :visible.sync="open" :destroy-on-close="true"
               :append-to-body="true" :close-on-click-modal="false">
      <el-form :model="examForm" :rules="examRules" ref="examForm">
        <el-form-item label="考试名称" :label-width="formLabelWidth" prop="examName">
          <el-input v-model="examForm.examName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参考班级" :label-width="formLabelWidth" prop="classesId">
          <el-select v-model="examForm.classesId">
            <el-option v-for="classes in classesList" :key="classes.id" :value="classes.id" :label="classes.className"/>
          </el-select>
        </el-form-item>
        <el-form-item label="试卷类型" :label-width="formLabelWidth" prop="examPaperType">
          <el-select v-model="examForm.examPaperType" @change="getMyExamPaperList">
            <el-option label="固定试卷" :value="1"></el-option>
            <el-option label="随机试卷" :value="2"></el-option>
            <el-option label="随序试卷" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试试卷" :label-width="formLabelWidth" prop="examPaperId">
          <el-select v-model="examForm.examPaperId" :disabled="!examForm.examPaperType" placeholder="请先选择试卷类型">
            <el-option v-for="examPaper in examPaperList" :key="examPaper.id" :value="examPaper.id" :label="examPaper.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="time">
          <el-date-picker
            v-model="examForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试地点" :label-width="formLabelWidth" prop="examPlace">
          <el-input v-model="examForm.examPlace" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeHandler">取 消</el-button>
        <el-button type="primary" @click="addOrEditExam">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import { getExams, addExam, editExam, deleteExamById } from "@/api/exam"
import { myClasses } from "@/api/classes"
import examPaperAPI from "@/api/examPaper"
export default {
  components: { Pagination },
  data() {
    return {
      formLabelWidth: "80px",
      classesList: [],
      examPaperList: [],
      examForm: {
        id: null,
        examName: "",
        examPaperId: "",
        classesId: "",
        examPaperType: null,
        examPlace: "",
        status: "",
        startTime: "",
        endTime: "",
        time: [],
      },
      examRules: {
        examName: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
        ],
        examPaperId: [
          { required: true, message: '请选择考试试卷', trigger: 'change' }
        ],
        classesId: [
          { required: true, message: '请选择参考班级', trigger: 'change' }
        ],
        examPaperType: [
          { required: true, message: '请选择试卷类型', trigger: 'change' }
        ],
        examPlace: [
          { required: true, message: '请输入考试地点', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择考试时间', trigger: 'change' }
        ],
      },
      total: 0,
      title: "安排考试",
      open: false,
      searchForm: {
        examName: "",
        subject: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [
      ],
    };
  },
  mounted() {
    this.page();
    this.getMyClasses()
    this.MyExamPaperList()
  },
  methods: {
    markPaper(row) {
      // 跳转阅卷页面
      this.$router.push({path: "/exam/mark/paper", query: {examName: row.examName, examId: row.id}})
    },
    timeFormatter(row) {
      return row.startTime + "至" + row.endTime
    },
    statusFormatter(row) {
      if (row.status === "ing") {
        return "进行中"
      } else if (row.status === "not_start") {
        return "未开始"
      } else if (row.status === "finished") {
        return "已结束"
      }
    },
    MyExamPaperList() {
      let param = {
        "paperType": this.examForm.examPaperType
      }
      examPaperAPI.myExamPaperList(param).then(res => {
        this.examForm.examPaperId = null
        this.examPaperList = res.data
      })
    },
    getMyExamPaperList() {
      if (! this.examForm.examPaperType) {
        return
      }
      this.MyExamPaperList()
    },
    getMyClasses() {
      myClasses().then(res => {
        this.classesList = res.data.data
      })
    },
    deleteExam(id) {
      deleteExamById(id).then(res => {
        this.$message.success("删除成功")
        this.page()
      })
    },
    handlerEdit(row) {
      this.examForm = row
      this.examForm.time = [row.startTime, row.endTime]
      this.title = "修改考试"
      this.open = true
    },
    addOrEditExam() {
      this.$refs['examForm'].validate((valid) => {
        if (valid) {
          this.examForm.startTime = this.examForm.time[0]
          this.examForm.endTime = this.examForm.time[1]
          if (this.examForm.id) {
            editExam(this.examForm).then(res => {
              this.open = false
              this.clearForm()
              this.$message.success("操作成功")
              this.page()
            })
          } else {
            addExam(this.examForm).then(res => {
              this.open = false
              this.clearForm()
              this.$message.success("操作成功")
              this.page()
            })
          }
        }
      })
    },
    clearForm() {
      this.examForm = {
        id: null,
        examName: "",
        examPaperId: "",
        classesId: "",
        examPaperType: "",
        examPlace: "",
        status: "",
        startTime: "",
        endTime: "",
      }
    },
    closeHandler() {
      this.open = false
      this.clearForm()
    },
    openAdd() {
      this.title = this.examForm.id ? "修改考试" : "安排考试"
      this.open = true
    },
    formatterType(row) {
    },
    page() {
      getExams(this.searchForm).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    routerTo(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.mian-1-top {
  margin: 10px 0;
  align-items: center;

  & input {
    height: 30px;
    width: 200px;
    margin-right: 20px;
  }
}

// .c{
//     background-image:url('../../assets/img/loginBackground.jpg');
//     width:100vw;
//     height:calc(100vh - 75px);
//     background-size: cover;
// }
// .bg{
//     width:100%;
//     height:100%;
//     background: rgba(255,255,255,0.2);
//     display: flex;
//     justify-content: center;

// }
.main {
  &-title {
    border-left: 5px solid rgb(16, 71, 247);
    padding-left: 10px;
    margin: 50px 0;

    & p {
      font-weight: 700;
    }
  }

  &-1 {
    width: 1227px;
    height: 784px;
    background: white;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 32px 40px;
  }

  &-btn {
    padding-bottom: 32px;
    border-bottom: 3px solid rgb(16, 71, 247);
  }
}

.deepBlue {
  background: rgb(16, 71, 247);
  color: white;
  border: none;

  &:hover {
    background-color: rgb(45, 92, 248);
  }
}
</style>

 src/views/exam/exam/Index.vue

New file
@@ -0,0 +1,18 @@
<template>
  <div>
    <router-view>

    </router-view>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.commit("SET_HEADER_NUM", 2);
  },
};
</script>

<style>
</style>

 src/views/exam/exam/MarkPaper.vue

New file
@@ -0,0 +1,42 @@
<template>
  <div>
    <div>
      <div></div>
      <div></div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { getExamInfo } from "@/api/exam"
export default {
  name: "MarkPaper",
  mounted() {
    this.examInfo.examName = this.$route.query.examName
    this.examInfo.id = this.$route.query.examId
    this.getExamInfo()
  },
  data() {
    return {
      examInfo: {
        examName: "",
        id: null,
        paperList: []
      }

    }
  },
  methods: {
    getExamInfo() {
      getExamInfo(this.examInfo.id).then(res => {
        this.examInfo = res.data.data
      })
    }
  }
}
</script>

<style scoped>

</style>

 src/views/login/index.vue

@@ -139,7 +139,7 @@
          loginApi.login(this.loginForm).then(function (result) {
            if (result && result.code === 1) {
              _this.setUserName(_this.loginForm.userName)
              _this.$router.push({ path: '/' })
              _this.$router.push({ path: '/dashboard' })
            } else {
              _this.loading = false
              _this.$message({