试卷管理和试卷模板ui

fuliqi

2024-06-06 94da5161fcc39a88e0337e67573a3dd96691b39c

 src/views/Manage/TestPaper/index.vue

@@ -7,64 +7,48 @@
        <TitleIndex title='试卷管理' />
        <div class="content">
          <!-- 试卷生成按钮 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;display: flex; align-items: center;">
            <el-page-header @back="goBack()"/>
            <el-button
              type="primary"
              @click="getCreate"
            >试卷生成</el-button>
            <el-button
              type="primary"
              @click="toTemplate"
            >随机试卷模板</el-button>
          </div>

          <!-- 搜索 -->
          <div>
            <el-form
              :inline="true"
              :model="formLabelAlign"
              class="demo-form-inline"
              :model="queryParam"
              label-width="80px"
            >
              <el-form-item>
                <el-input v-model="formLabelAlign.type"></el-input>
                <el-input v-model="queryParam.id" placeholder="试卷编号" style="width: 120px" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="queryParam.name" placeholder="试卷名" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  v-model="queryParam.subjectId"
                  placeholder="全部科目"
                  clearable
                >
                  <el-option
                    label="全部科目"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="语文"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="数学"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="英语"
                    value="beijing"
                  ></el-option>
                  <el-option v-for="item in subjects" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="formLabelAlign.region"
                  placeholder="选择题"
                  v-model="queryParam.paperType"
                  placeholder="试卷类型"
                  clearable
                >
                  <el-option
                    label="选择题"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="问答题"
                    value="beijing"
                  ></el-option>
                  <el-option
                    label="判断题"
                    value="beijing"
                  ></el-option>
                  <el-option label="固定试卷" value="1" />
                  <el-option label="随机试卷" value="2" />
                  <el-option label="随序试卷" value="3" />
                </el-select>
              </el-form-item>

@@ -73,6 +57,7 @@
                  style="width:100px;"
                  type="primary"
                  size="small"
                  @click="getPage"
                >查询</el-button>
              </el-form-item>
            </el-form>
@@ -88,20 +73,40 @@
          >
            <el-table-column
              align="center"
              prop="title"
              prop="id"
              label="试卷编号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="试卷名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="type"
              label="题目类型"
              prop="subjectId"
              label="科目"
            >
              <template slot-scope="scope">
                {{ translate(scope.row.subjectId) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="subject"
              label="科目"
              prop="paperType"
              label="试卷类型"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.paperType === 1">固定试卷</div>
                <div v-else-if="scope.row.paperType === 2">随机试卷</div>
                <div v-else-if="scope.row.paperType === 3">随序试卷</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggestTime"
              label="建议时长(分钟)"
            >
            </el-table-column>
            <el-table-column
@@ -114,120 +119,207 @@
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
              <el-button type="text">预览</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
              <el-button type="text" @click="deletePaper(scope.row)" class="link-left">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div
            class="block"
            style="display: flex; margin-top: 40px;"
            class="flex"
            style="justify-content:center;margin-top:20px;"
          >
            <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="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                        @pagination="getPage"/>
          </div>
        </div>
      </div>

        <!-- 添加试卷对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body >
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="试卷名称" prop="name" >
              <el-input v-model="form.name" placeholder="请输入试卷名称" style="width: 300px"/>
            </el-form-item>
            <el-form-item label="科目" prop="subjectId">
              <el-select v-model="form.subjectId" placeholder="请选择科目" style="width: 200px">
                <el-option
                  v-for="item in subjects"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="试卷类型" prop="paperType">
              <el-select v-model="form.paperType" placeholder="请选择试卷类型" style="width: 200px">
                <el-option label="固定试卷" value="1" />
                <el-option label="随序试卷" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="考试时长(分钟)" prop="suggestTime">
              <el-input-number v-model="form.suggestTime" placeholder="请输入考试时长"/>
            </el-form-item>
            <el-button type="primary" @click="toCreate">编辑题目</el-button>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>


        </div>
      </div>
    </div>

  </div>
</template>
<script>
import examPaperApi from '@/api/examPaper'
import subjectApi from '@/api/subject'
import Pagination from "@/components/Pagination"
export default {
  components: {Pagination},
  data() {
    return {
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,
      queryParam: {
        id: null,
        paperType: null,
        subjectId: null,
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
        {
          title: "当A与B一起修路",
          type: "选择题",
          subject: "语文",
          score: 100,
        },
      ],
      form: {},
      tableData: [],
      subjects: [],
      // 表单校验
      rules: {
        name: [
          { required: true, message: "试卷名称不能为空", trigger: "blur" }
        ],
        subjectId: [
          { required: true, message: "科目不能为空", trigger: "blur" }
        ],
        paperType: [
          { required: true, message: "试卷类型不能为空", trigger: "blur" }
        ],
        suggestTime: [
          { required: true, message: "考试时长不能为空", trigger: "blur" }
        ],
      }
    };

  },
  created () {
    this.getSubjects();
    this.getPage()
  },
  methods: {
    translate(subjectId) {
      const subject = this.subjects.find(subject => subject.id == subjectId);
      return subject ? subject.name : '未知';
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    },
    //提交按钮
    onSubmit() {
      console.log("submit!");
    cancel(){
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        name: null,
        subjectId: null,
        paperType: null,
      };
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    },

    // 生成试卷
    /** 生成试卷对话框 */
    getCreate() {
      // 跳转到生成页面
      this.reset();
      this.open = true;
      this.title = "试卷配置";
    },
    // 配置试卷题目
    toCreate() {
      //跳转到对应的管理页面
      this.$router.push({
        path: "/manage/test-paper-generation",
      });
    },
    toTemplate() {
      //跳转到模板管理页面
      this.$router.push({
        path: "/manage/paper-template",
      });
    },
    deletePaper (row) {
      examPaperApi.deletePaper(row.id).then(re => {
        if (re.code === 1) {
          this.getPage()
          this.$message.success("删除成功")
        } else {
          this.$message.error(re.message)
        }
      })
    },
    getPage () {
      this.listLoading = true
      examPaperApi.pageList(this.queryParam).then(re => {
        const data = re.data
        this.tableData = data.list
        this.total = data.total
        this.queryParam.pageIndex = data.pageNum
        this.listLoading = false
      })
    },
    // 获取科目
    getSubjects() {
      subjectApi.list().then(re => {
        this.subjects = re.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.deptId && this.form.deptId.length > 0) {
            this.form.deptId = this.form.deptId[this.form.deptId.length - 1]
          }
          let temp = {
            ...this.form,
            category: parseInt(this.form.category)
          };
          if (temp.id != null) {
            updatePoint(temp).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPoint(temp).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.reset()
              this.getList();
            });
          }
        } else {
          console.log("error")
        }
      })
    },
  },
};
</script>