xiangpei
2024-06-11 6c7e308453d1955506db6f24dd9b1e65caadfdaf
src/views/Manage/ScoreInquiry/index.vue
@@ -1,234 +1,125 @@
<!-- 成绩查询 -->
<!-- 答卷管理 -->
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <!-- 带返回的标题 -->
        <TitleIndex title="成绩查询" />
        <!-- 待返回的标题 -->
        <TitleIndex title="答卷管理" />
        <div class="content">
          <!-- 搜索 -->
          <div>
            <el-form
              :inline="true"
              :model="formLabelAlign"
              class="demo-form-inline"
              :label-position="labelPosition"
              label-width="80px"
            >
              <el-form-item label="活动区域">
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="活动区域"
                >
                  <el-option
                    label="区域一"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="区域二"
                    value="beijing"
                  ></el-option>
            <el-form :inline="true" :model="queryParam" class="demo-form-inline" label-width="80px">
              <el-form-item>
                <el-input v-model="queryParam.name" placeholder="请输入名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select v-model="queryParam.subjectId" placeholder="请选择科目" clearable multiple @change="search">
                  <el-option v-for="item in subjects" :key="item.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="活动区域">
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="活动区域"
                >
                  <el-option
                    label="区域一"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="区域二"
                    value="beijing"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学号">
                <el-input v-model="formLabelAlign.type"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button
                  style="width:100px;margin-top: 42px;"
                  type="primary"
                  size="small"
                >查询</el-button>
              <el-form-item>
                <el-button style="width:100px;" type="primary" size="small" @click="search()">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格 -->
          <!-- 修改表格的高度 -->
          <!-- :row-style="{height:'30px'}"
            :cell-style="{padding: '0'}" -->
          <el-table
            :data="tableData"
            border
            style="width: 100%;"
            :row-style="{height:'34px'}"
            :cell-style="{padding: '0'}"
          >
            <el-table-column
              prop="date"
              label="学年"
              width="100"
            >
          <el-table v-loading="listLoading" :data="tableData" border style="width: 100%;">
            <el-table-column align="center" prop="paperName" label="名称" />
            <el-table-column align="center" prop="subjectName" label="科目" />
            <el-table-column align="center" prop="paperType" label="试卷类型" width="150px">
              <template slot-scope="{row}">
                <span v-if="row.paperType === 1">固定试卷</span>
                <span v-if="row.paperType === 2">随机试卷</span>
                <span v-if="row.paperType === 3">顺序试卷</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="学期"
              width="150"
            >
            <el-table-column align="center" prop="questionCount" label="题目数量" width="100px" />
            <el-table-column align="center" prop="systemScore" label="总分" width="100px" />
            <el-table-column align="center" prop="suggestTime" label="建议时长" width="100px" />
            <el-table-column align="center" prop="personAnswerNum" label="参考人数" width="100px">
              <template slot-scope="{row}">
                <span>{{ row.personAnswerNum + "/" + row.personTotalNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="学号"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="date"
              label="课程名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="是否合格"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="成绩"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >查看试卷</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >导出试卷</el-button>
            <el-table-column align="center" prop="userName" label="创建人" width="100px" />
            <el-table-column label="操作" align="center">
              <template slot-scope="{row}">
                <el-button size="mini" @click="view(row)">查看</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>
          </div>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex"
            :limit.sync="queryParam.pageSize" @pagination="search" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入彈出窗口組件
import subjectApi from '@/api/subject'
import examPaperAnwserApi from '@/api/examPaperAnswer'
import Pagination from '@/components/Pagination'
export default {
  // 注册
  components: {
    Pagination
  },
  data() {
    return {
      labelPosition: "top",
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      listLoading: true,
      queryParam: {
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "1234568798788",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "5252252552555",
        },
      ],
      formLoading: false,
      total: 0,
      tableData: [],
      visible: false,
      subjects: []
    };
  },
  methods: {
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    //提交按钮
    onSubmit() {
      console.log("submit!");
    },
  created() {
    this.search()
    this.getSubjects();
  },
  methods: {
    // 获取科目
    getSubjects() {
      subjectApi.list().then(re => {
        this.subjects = re.data
      })
    },
    // 获取列表
    search() {
      this.listLoading = true
      examPaperAnwserApi.pageExamPaper(this.queryParam).then(re => {
        this.tableData = re.data.list
        this.total = re.data.total
        this.queryParam.pageSize = re.data.pageSize
        this.queryParam.pageIndex = re.data.pageNum
        this.listLoading = false
      })
    },
    view(row) {
      this.$router.push({ path: '/manage/answer-list', query: { id: row.id } });
    }
  }
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}
// 内容
.content {
  width: 1262px;
  margin-bottom: 80px;
  background-color: #fff;
  padding: 40px;
  padding: 20px 40px;
  border-radius: 10px;
}
</style>