From 94da5161fcc39a88e0337e67573a3dd96691b39c Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期四, 06 六月 2024 17:11:12 +0800
Subject: [PATCH] 试卷管理和试卷模板ui
---
src/views/Manage/TestPaper/TestPaperGeneration.vue | 1024 ++++++++++++++++++++++--------
src/views/Manage/TestPaper/index.vue | 332 ++++++---
src/api/examTemplate.js | 61 +
src/views/Manage/TestPaper/PaperTemplate.vue | 522 +++++++++++++++
src/router.js | 6
5 files changed, 1,559 insertions(+), 386 deletions(-)
diff --git a/src/api/examTemplate.js b/src/api/examTemplate.js
new file mode 100644
index 0000000..ef8ab7d
--- /dev/null
+++ b/src/api/examTemplate.js
@@ -0,0 +1,61 @@
+import axios from "./request";
+
+// 鑾峰彇闅忔満璇曞嵎妯℃澘鍒嗛〉
+export const getExamTemplates = (params) => {
+ return axios({
+ url: "/api/admin/exam-template/page",
+ method: "GET",
+ params: params
+ })
+}
+
+// 鑾峰彇闅忔満璇曞嵎妯℃澘鍒楄〃
+export const getExamTemplateList = () => {
+ return axios({
+ url: "/api/admin/exam-template/list",
+ method: "GET"
+ })
+}
+
+// 閫氳繃id鑾峰彇闅忔満璇曞嵎妯℃澘
+export const getExamTemplateById = (params) => {
+ return axios({
+ url: "/api/admin/exam-template/" + params,
+ method: "GET"
+ })
+}
+
+// 閫氳繃id鍒犻櫎闅忔満璇曞嵎妯℃澘
+export const deleteExamTemplateById = (params) => {
+ return axios({
+ url: "/api/admin/exam-template/" + params,
+ method: "DELETE"
+ })
+}
+
+// 鎵归噺鍒犻櫎闅忔満璇曞嵎妯℃澘
+export const deleteExamTemplateByIds = (params) => {
+ return axios({
+ url: "/api/admin/exam-template/batch",
+ method: "DELETE",
+ data: params
+ })
+}
+
+// 淇敼闅忔満璇曞嵎妯℃澘
+export const editExamTemplate = (params) => {
+ return axios({
+ url: "/api/admin/exam-template/",
+ method: "PUT",
+ data: params
+ })
+}
+
+// 娣诲姞闅忔満璇曞嵎妯℃澘
+export const addExamTemplate = (params) => {
+ return axios({
+ url: "/api/admin/exam-template/",
+ method: "POST",
+ data: params
+ })
+}
diff --git a/src/router.js b/src/router.js
index adcce54..7b19ea1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -135,6 +135,12 @@
name: 'TestPaperGeneration',
component: () => import('@/views/Manage/TestPaper/TestPaperGeneration.vue')
},
+ //闅忔満璇曞嵎妯℃澘绠＄悊
+ {
+ path: 'paper-template',
+ name: 'PaperTemplate',
+ component: () => import('@/views/Manage/TestPaper/PaperTemplate.vue')
+ },
// 鐝骇绠＄悊
{
path: 'class-management',
diff --git a/src/views/Manage/TestPaper/PaperTemplate.vue b/src/views/Manage/TestPaper/PaperTemplate.vue
new file mode 100644
index 0000000..cc587a3
--- /dev/null
+++ b/src/views/Manage/TestPaper/PaperTemplate.vue
@@ -0,0 +1,522 @@
+<!-- 璇曞嵎绠＄悊 -->
+<template>
+ <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;display: flex; align-items: center;">
+ <el-page-header @back="goBack()">
+ </el-page-header>
+ <el-button
+ type="primary"
+ @click="addTemplate"
+ >鏂板妯℃澘
+ </el-button>
+ </div>
+ <!-- 鎼滅储 -->
+ <div>
+ <el-form
+ :inline="true"
+ :model="queryParam"
+ 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
+ >
+ <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="">
+ <el-button
+ style="width:100px;"
+ type="primary"
+ size="small"
+ @click="getPage"
+ >鏌ヨ
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <!-- 琛ㄦ牸 -->
+ <el-table
+ :header-cell-style="getRowClass"
+ :data="tableData"
+ border
+ style="width: 100%;"
+ :row-style="{height:'40px'}"
+ :cell-style="{padding: '0'}"
+ >
+ <el-table-column
+ align="center"
+ prop="name"
+ label="妯℃澘鍚�"
+ >
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="subjectId"
+ label="绉戠洰"
+ >
+ <template slot-scope="scope">
+ {{ translate(scope.row.subjectId) }}
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="suggestTime"
+ label="寤鸿鏃堕暱(鍒嗛挓)"
+ >
+ </el-table-column>
+ <el-table-column
+ align="center"
+ prop="score"
+ label="鍒嗗��"
+ >
+ </el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ align="center"
+ >
+ <template slot-scope="scope">
+ <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="flex"
+ style="justify-content:center;margin-top:20px;"
+ >
+ <pagination v-show="total>0" :total="total" :page.sync="queryParam.currentPage"
+ :limit.sync="queryParam.pageSize"
+ @pagination="getPage"/>
+ </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: 300px">
+ <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="suggestTime">
+ <el-input-number v-model="form.suggestTime" placeholder="璇疯緭鍏ヨ�冭瘯鏃堕暱"/>
+ </el-form-item>
+ <el-form-item label="澶氶�夐寰楀垎绫诲瀷" prop="deductType" v-show="addedQuestionTypes.includes(2)"><!-- 鏈夊閫夋墠鍑虹幇 -->
+ <div>
+ <el-select v-model="form.deductType" placeholder="璇烽�夋嫨澶氶�夐寰楀垎绫诲瀷" style="width: 200px;margin-right: 30px">
+ <el-option
+ v-for="item in deductTypeList"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value"
+ />
+ </el-select>
+ <el-input-number v-model="form.score" placeholder="璇疯緭鍏ュ閫夊緱鍒嗗垎鏁�"
+ v-show="form.deductType === 2 || form.deductType === 3"/>
+ </div>
+ </el-form-item>
+ <el-form-item prop="questionList" label-width="0">
+ <el-table
+ :summary-method="getSummaries"
+ show-summary
+ :data="questionList"
+ style="width: 100%;">
+ <el-table-column
+ prop="questionType"
+ label="棰樼洰绫诲瀷"
+ width="180"
+ >
+ <template slot-scope="scope">
+ <div> {{ translateQuestionType(scope.row.questionType) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="num"
+ label="棰樼洰鏁伴噺"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="score"
+ label="姣忛鍒嗘暟">
+ </el-table-column>
+ <el-table-column
+ fixed="right"
+ width="100">
+ <template slot-scope="scope">
+ <el-button
+ type="text"
+ size="small"
+ @click="editQuestion(scope.row)">
+ 缂栬緫
+ </el-button>
+ <el-button
+ type="text"
+ size="small"
+ @click="removeQuestion(scope.row)">
+ 绉婚櫎
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-button type="success" @click="nextAdd()" size="mini" plain>娣诲姞</el-button>
+ </el-form-item>
+ </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>
+ <!-- 娣诲姞棰樼洰瀵硅瘽妗� -->
+ <el-dialog :title="questionTitle" :visible.sync="questionOpen" width="400px" append-to-body>
+ <el-form ref="questionForm" :model="questionForm" :rules="questionRules">
+ <el-form-item label="棰樼洰绫诲瀷" prop="questionType">
+ <el-select v-model="questionForm.questionType" placeholder="璇烽�夋嫨棰樼洰绫诲瀷">
+ <el-option
+ v-for="item in questionTypeList"
+ :key="item.value"
+ :label="item.name"
+ :value="item.value"
+ :disabled="addedQuestionTypes.includes(item.value)"/><!-- 绂佺敤宸叉坊鍔犵殑閫夐」 -->
+ </el-select>
+ </el-form-item>
+ <el-form-item label="棰樼洰鏁伴噺" prop="num" style="margin-left: 10px">
+ <el-input-number v-model="questionForm.num" placeholder="璇疯緭鍏ラ鐩暟閲�" :precision="0"/>
+ </el-form-item>
+ <el-form-item label="姣忛鍒嗘暟" prop="score" style="margin-left: 10px">
+ <el-input-number v-model="questionForm.score" placeholder="璇疯緭鍏ユ瘡棰樺垎鏁�" :precision="1"/>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="addQuestion">纭� 瀹�</el-button>
+ <el-button @click="questionCancel">鍙� 娑�</el-button>
+ </div>
+ </el-dialog>
+ </div>
+ </div>
+ </div>
+
+</template>
+<script>
+import {
+ getExamTemplates,
+ getExamTemplateById,
+ deleteExamTemplateById,
+ editExamTemplate,
+ addExamTemplate
+} from '@/api/examTemplate'
+import subjectApi from '@/api/subject'
+import Pagination from "@/components/Pagination"
+
+export default {
+ components: {Pagination},
+ data() {
+ var validateDeductType = (rule, value, callback) => {
+ const index = this.addedQuestionTypes.findIndex(item => item.questionType === 2)
+ if (index && (!value || value === '')) {
+ callback(new Error('璇烽�夋嫨澶氶�夐寰楀垎鏂瑰紡'));
+ } else {
+ callback();
+ }
+ }
+ return {
+ // 寮瑰嚭灞傛爣棰�
+ title: "",
+ questionTitle: "",
+ // 鏄惁鏄剧ず寮瑰嚭灞�
+ open: false,
+ questionOpen: false,
+ // 鎬绘潯鏁�
+ total: 0,
+ queryParam: {
+ name: null,
+ subjectId: null,
+ currentPage: 1,
+ pageSize: 10
+ },
+ form: {},
+ questionForm: {},
+ tableData: [],
+ subjects: [],
+ deductTypeList: [
+ {name: '绛旈敊涓嶅緱鍒�', value: 1},
+ {name: '婕忛�夊緱鍥哄畾鍒嗗��,鍖呭惈閿欒閫夐」涓嶅緱鍒�', value: 2},
+ {name: '姣忓涓�棰樺緱鐩稿簲鍒嗗��,鍖呭惈閿欒閫夐」涓嶅緱鍒�', value: 3},
+ ],
+ questionTypeList: [
+ {name: '鍗曢�夐', value: 1},
+ {name: '澶氶�夐', value: 2},
+ {name: '濉┖棰�', value: 3},
+ {name: '鍒ゆ柇棰�', value: 4},
+ {name: '绠�绛旈', value: 5},
+ {name: '璁＄畻棰�', value: 6},
+ ],
+ questionList: [],
+ addedQuestionTypes: [],// 宸叉坊鍔犵殑棰樼洰绫诲瀷
+ // 琛ㄥ崟鏍￠獙
+ rules: {
+ name: [
+ {required: true, message: "璇曞嵎鍚嶇О涓嶈兘涓虹┖", trigger: "blur"}
+ ],
+ subjectId: [
+ {required: true, message: "绉戠洰涓嶈兘涓虹┖", trigger: "change"}
+ ],
+ paperType: [
+ {required: true, message: "璇曞嵎绫诲瀷涓嶈兘涓虹┖", trigger: "change"}
+ ],
+ suggestTime: [
+ {required: true, message: "鑰冭瘯鏃堕暱涓嶈兘涓虹┖", trigger: "blur"}
+ ],
+ deductType: [
+ {validator: validateDeductType, trigger: 'change'}
+ ],
+ },
+ questionRules: {
+ questionType: [
+ {required: true, message: "棰樼洰绫诲瀷涓嶈兘涓虹┖", trigger: "change"}
+ ],
+ }
+ };
+
+ },
+ created() {
+ this.getSubjects();
+ this.getPage()
+ },
+ methods: {
+ //绉婚櫎棰樼洰
+ removeQuestion(row) {
+ let index = this.questionList.findIndex(item => item.questionType === row.questionType && item.num === row.num && item.score === row.score);
+ this.questionList.splice(index, 1);
+ index = this.addedQuestionTypes.findIndex(item => item.questionType === row.questionType)
+ this.addedQuestionTypes.splice(index, 1);
+ },
+ //缂栬緫棰樼洰
+ editQuestion(row) {
+ this.questionReset();
+ this.questionForm.questionType = row.questionType
+ this.questionForm.num = row.num
+ this.questionForm.score = row.score
+ this.questionTitle = "缂栬緫棰樼洰"
+ this.questionOpen = true;
+ },
+ //棰樼洰鍒楄〃鍚堣鏂规硶
+ getSummaries(param) {
+ const {columns, data} = param;
+ const sums = [];
+ columns.forEach((column, index) => {
+ if (index === 0) {
+ sums[index] = '鍚堣';
+ return;
+ }
+ if (index === 3) {
+ sums[index] = '';
+ return;
+ }
+ if (index === 2) { // 绗笁鍒楁槸鍒嗘暟鍒�
+ const values = data.map(item => Number(item.score) * Number(item.num) || 0);
+ if (!values.every(value => isNaN(value))) {
+ sums[index] = values.reduce((prev, curr) => {
+ const value = Number(curr);
+ if (!isNaN(value)) {
+ return prev + curr;
+ } else {
+ return prev;
+ }
+ }, 0);
+ sums[index] = sums[index].toFixed(2); // 鏍煎紡鍖栧悎璁″�硷紝淇濈暀涓や綅灏忔暟
+ sums[index] += ' 鍒�';
+ }
+ } else if (index === 1) { // 绗簩鍒楁槸棰樼洰鏁伴噺鍒楋紝鍦ㄨ繖閲屽睍绀烘�绘暟
+ const values = data.map(item => Number(item.num) || 0);
+ if (!values.every(value => isNaN(value))) {
+ sums[index] = values.reduce((prev, curr) => {
+ const value = Number(curr);
+ if (!isNaN(value)) {
+ return prev + curr;
+ } else {
+ return prev;
+ }
+ }, 0);
+ sums[index] += ' 棰�';
+ } else {
+ sums[index] = 'N/A';
+ }
+ } else {
+ sums[index] = 'N/A';
+ }
+ });
+ return sums;
+ },
+ translate(subjectId) {
+ const subject = this.subjects.find(subject => subject.id == subjectId);
+ return subject ? subject.name : '鏈煡';
+ },
+ translateQuestionType(questionTypeId) {
+ const questionType = this.questionTypeList.find(questionType => questionType.value == questionTypeId);
+ return questionType ? questionType.name : '鏈煡';
+ },
+ // 杩斿洖涓婁竴涓〉闈�
+ goBack() {
+ this.$router.back();
+ },
+ cancel() {
+ this.open = false;
+ },
+ questionCancel() {
+ this.questionOpen = false;
+ },
+ // 妯℃澘琛ㄥ崟閲嶇疆
+ reset() {
+ this.form = {
+ name: null,
+ subjectId: null,
+ suggestTime: null,
+ };
+ this.addedQuestionTypes = []
+ this.questionList = []
+ },
+ // 闂琛ㄥ崟閲嶇疆
+ questionReset() {
+ this.questionForm = {
+ questionType: null,
+ num: null,
+ score: null,
+ };
+ },
+ // 淇敼琛ㄥ崟澶撮儴鐨勯鑹�
+ getRowClass() {
+ return "background:#d2d3d6";
+ },
+ //鏂板妯℃澘
+ addTemplate() {
+ this.reset();
+ this.title = "鏂板妯℃澘"
+ this.open = true;
+ },
+ //鏂板棰樼洰
+ nextAdd() {
+ this.questionReset();
+ this.questionTitle = "娣诲姞棰樼洰"
+ this.questionOpen = true;
+ },
+ deletePaper(row) {
+ deleteExamTemplateById(row.id).then(re => {
+ if (re.code === 1) {
+ this.getPage()
+ this.$message.success("鍒犻櫎鎴愬姛")
+ } else {
+ this.$message.error(re.message)
+ }
+ })
+ },
+ getPage() {
+ this.listLoading = true
+ getExamTemplates(this.queryParam).then(re => {
+ const data = re.data
+ this.tableData = data.data
+ this.total = data.total
+ this.listLoading = false
+ })
+ },
+ // 鑾峰彇绉戠洰
+ getSubjects() {
+ subjectApi.list().then(re => {
+ this.subjects = re.data
+ })
+ },
+ //娣诲姞鎴栦慨鏀归鐩�
+ addQuestion() {
+ this.$refs['questionForm'].validate(valid => {
+ if (valid) {
+ //鏂板
+ if (this.questionTitle === "娣诲姞棰樼洰") {
+ // 灏嗛鐩被鍨嬫坊鍔犲埌宸叉坊鍔犲垪琛ㄤ腑
+ if (!this.addedQuestionTypes.includes(this.questionForm.questionType)) {
+ this.addedQuestionTypes.push(this.questionForm.questionType);
+ }
+ this.questionList.push({
+ "questionType": this.questionForm.questionType,
+ "num": this.questionForm.num,
+ "score": this.questionForm.score
+ });
+ this.questionOpen = false;
+ } else if (this.questionTitle === "缂栬緫棰樼洰") {
+ let index = this.questionList.findIndex(item => item.questionType === this.questionForm.questionType)
+ this.questionList.splice(index, 1, this.questionForm);
+ this.questionOpen = false;
+ }
+ }
+ })
+ },
+ //娣诲姞鎴栦慨鏀规ā鏉�
+ 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>
+<style scoped lang="scss">
+.flex {
+ display: flex;
+}
+
+// 鍐呭
+.content {
+ width: 1262px;
+ margin-bottom: 80px;
+ background-color: #fff;
+ padding: 20px 40px;
+ border-radius: 10px;
+}
+
+</style>
+
+
diff --git a/src/views/Manage/TestPaper/TestPaperGeneration.vue b/src/views/Manage/TestPaper/TestPaperGeneration.vue
index 3b9bbc4..85c3081 100644
--- a/src/views/Manage/TestPaper/TestPaperGeneration.vue
+++ b/src/views/Manage/TestPaper/TestPaperGeneration.vue
@@ -3,301 +3,793 @@
<div class="c">
<div class="bg">
<div class="main">
- <!-- 甯﹁繑鍥炵殑鏍囬 -->
- <TitleIndex title="璇曞嵎鐢熸垚" />
- <div class="content">
- <!-- 鎼滅储 -->
- <div>
- <el-form
- :inline="true"
- :model="formLabelAlign"
- class="demo-form-inline"
- label-width="80px"
+ <div class="paper-main">
+ <div class="paper-content">
+ <!-- 璇曢 -->
+ <div
+ ref="paperContent"
+ class="paper-left"
>
- <el-form-item>
- <el-input
- v-model="formLabelAlign.type"
- placeholder="棰樼洰鍚�"
- ></el-input>
- </el-form-item>
- <el-form-item>
- <el-select
- v-model="formLabelAlign.region"
- placeholder="棰樼洰绫诲瀷"
+ <div
+ class="subject"
+ v-for="item in convertDatas"
+ :key="item.id"
+ >
+ <div class="subject-title">
+ <h2>{{ item.name }}</h2>
+ <span>锛堝叡 {{ item.count }} 棰橈紝鍚堣 {{ item.totalScore }} 鍒嗭級</span>
+ </div>
+ <el-card
+ class="box-card"
+ v-for="(sub,index) in item.childs"
+ :id="item.code+(index+1)"
+ :key="sub.id"
>
- <el-option
- label="鍏ㄩ儴棰樼洰"
- value="shanghai"
- ></el-option>
- <el-option
- label="閫夋嫨棰�"
- value="shanghai"
- ></el-option>
- <el-option
- label="鍒ゆ柇棰�"
- value="beijing"
- ></el-option>
- <el-option
- label="绠�鍗曢"
- value="beijing"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-select
- v-model="formLabelAlign.region"
- placeholder="鍏ㄩ儴绉戠洰"
- >
- <el-option
- label="鍏ㄩ儴绉戠洰"
- value="shanghai"
- ></el-option>
- <el-option
- label="璇枃"
- value="beijing"
- ></el-option>
- <el-option
- label="鏁板"
- value="beijing"
- ></el-option>
- </el-select>
- </el-form-item>
+ <div
+ slot="header"
+ class="clearfix"
+ >
+ <el-tag
+ effect="dark"
+ style="margin-right:10px"
+ > {{ sub.no }}
+ </el-tag>
+ <span>{{ sub.subject }}</span>
+ <span>({{ sub.totalScore }}鍒�)</span>
+ <div
+ v-if="type===2 || type===3"
+ style="float: right; padding: 3px 0"
+ >
+ <el-radio-group v-model="sub.isHook">
+ <el-radio-button
+ :disabled="disabledRead"
+ :label="1"
+ @change.native="isHookButtionCheck(sub)"
+ ><i class="el-icon-check"/></el-radio-button>
+ <el-radio-button
+ :disabled="disabledRead"
+ :label="2"
+ @change.native="isHookButtionCheck(sub)"
+ ><i class="el-icon-close"/></el-radio-button>
+ </el-radio-group>
+ <div
+ v-if="sub.type===1 ||sub.type===2||sub.type===3"
+ style="display: inline;"
+ >
+ <el-input
+ :disabled="true"
+ v-model="sub.score"
+ style="width:50px"
+ ></el-input>
+ <span>鍒�</span>
+ </div>
+ <div
+ v-else
+ style="display: inline;"
+ >
+ <el-input
+ :disabled="disabledRead"
+ v-model="sub.score"
+ style="width:50px"
+ ></el-input>
+ <span>鍒�</span>
+ </div>
- <el-form-item label="">
- <el-button
- style="width:100px;"
- type="primary"
- size="small"
- >鏌ヨ</el-button>
- </el-form-item>
- </el-form>
+ </div>
+ </div>
+ <el-radio-group
+ v-if="sub.type===1"
+ v-model="sub.examineAnswer"
+ >
+ <el-radio
+ :disabled="disabledAnswer"
+ v-for="o in sub.answers"
+ :key="o.id"
+ :label="o.no"
+ class="answer-radio"
+ @change="answerButtionCheck($event,item,sub)"
+ >{{ o.no }}.{{ o.answer }}
+ </el-radio>
+ </el-radio-group>
+ <el-checkbox-group
+ v-if="sub.type===2"
+ v-model="sub.examineAnswer"
+ >
+ <el-checkbox
+ :disabled="disabledAnswer"
+ v-for="o in sub.answers"
+ :key="o.id"
+ :label="o.no"
+ class="answer-checkbox"
+ @change="answerButtionCheck($event,item,sub)"
+ >{{ o.no }}.{{ o.answer }}
+ </el-checkbox>
+ </el-checkbox-group>
+ <el-radio-group
+ v-if="sub.type===3"
+ v-model="sub.examineAnswer"
+ >
+ <el-radio
+ :disabled="disabledAnswer"
+ label="瀵�"
+ class="answer-radio"
+ @change="answerButtionCheck($event,item,sub)"
+ >瀵�
+ </el-radio>
+ <el-radio
+ :disabled="disabledAnswer"
+ label="閿�"
+ class="answer-radio"
+ @change="answerButtionCheck($event,item,sub)"
+ >閿�
+ </el-radio>
+ </el-radio-group>
+ <el-input
+ :disabled="disabledAnswer"
+ v-if="sub.type===4"
+ type="textarea"
+ :rows="2"
+ v-model="sub.examineAnswer"
+ resize="none"
+ maxlength="150"
+ @blur="answerButtionCheck($event,item,sub)"
+ ></el-input>
+ <el-input
+ :disabled="disabledAnswer"
+ v-if="sub.type===5"
+ type="textarea"
+ :rows="10"
+ v-model="sub.examineAnswer"
+ resize="none"
+ maxlength="2000"
+ @blur="answerButtionCheck($event,item,sub)"
+ ></el-input>
+ <div
+ v-if="type!==1"
+ class="subject-remark"
+ >
+ <div class="item">
+ <span class="title">鑰冪敓绛旀锛�</span>
+ <span>{{ converAnswerStr(sub.examineAnswer) }}</span>
+ </div>
+ <div class="item">
+ <span class="title">姝ｇ‘绛旀锛�</span>
+ <span>{{ converAnswerStr(sub.correctAnswer) }}</span>
+ </div>
+ <div class="item">
+ <span class="title">鑰冪敓绛旀锛�</span>
+ <span>{{ sub.answerAnalysis }}</span>
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
+ <!-- 绛旈鍗� -->
+ <div
+ ref="paperLeft"
+ class="paper-right"
+ >
+ <div class="paper-title">
+ <h1><i class="el-icon-s-grid"></i>绛旈鍗�
+ <span class="downTime"><i
+ class="el-icon-alarm-clock"
+ style=" color: #000; font-weight: bold; font-size: 24px;margin-right: 10px;"
+ ></i>{{ hour ? hourString + ':' + minuteString + ':' + secondString : minuteString + ':' + secondString }}</span>
+ </h1>
+ </div>
+ <el-collapse v-model="answerCardActiveName">
+ <el-collapse-item
+ v-for="item in convertDatas"
+ :key="item.id"
+ :name="item.code"
+ >
+ <template slot="title">
+ <h2>{{ item.name }}</h2>
+ <span>鍏眥{ item.count }}棰�</span>
+ </template>
+ <el-button
+ class="answer-button"
+ circle
+ size="small"
+ v-for="index of item.count"
+ :key="index"
+ :id="'answer'+item.code+index"
+ @click.native="jump(item.code+index)"
+ >{{ index }}
+ </el-button>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+
</div>
- <!-- 琛ㄦ牸 -->
- <el-table
- :row-style="{height:'38px'}"
- :cell-style="{padding: '0'}"
- ref="multipleTable"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- @selection-change="handleSelectionChange"
- border
- >
- <el-table-column
- align="center"
- type="selection"
- width="55"
- >
- </el-table-column>
- <el-table-column
- prop="title"
- label="棰樼洰鍚�"
- align="center"
- width="220"
- min-width="180"
- >
- </el-table-column>
- <el-table-column
- prop="type"
- label="棰樼洰绫诲瀷"
- align="center"
- width="120"
- >
- </el-table-column>
- <el-table-column
- align="center"
- prop="subject"
- label="绉戠洰"
- show-overflow-tooltip
- >
- </el-table-column>
- <el-table-column
- align="center"
- prop="score"
- label="鍒嗗��"
- show-overflow-tooltip
- >
- </el-table-column>
- <el-table-column
- align="center"
- prop="reference"
- label="鍙傝�冪瓟妗�"
- show-overflow-tooltip
- >
- </el-table-column>
- </el-table>
- <div style="margin-top: 20px;text-align: center;">
- <el-button type="primary">鐢熸垚璇曞嵎</el-button>
- </div>
- <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 class="paper-footer">
+ <el-button
+ v-if="type===1"
+ type="success"
+ @click.native="btnClick('handPaper')"
+ >浜ゅ嵎
+ </el-button>
+ <el-button
+ v-if="type===2"
+ type="success"
+ @click.native="btnClick('readPaper')"
+ >闃呭嵎
+ </el-button>
+ <el-button
+ v-if="type===2"
+ type="success"
+ @click.native="btnClick('readPaperUpper')"
+ >涓婁竴涓�
+ </el-button>
+ <el-button
+ v-if="type===2"
+ type="success"
+ @click.native="btnClick('readPaperNext')"
+ >涓嬩竴涓�
+ </el-button>
</div>
</div>
-
</div>
-
</div>
-
</div>
</template>
<script>
export default {
+ name: "examinationPaper",
+ props: {
+ //璇曞嵎绫诲瀷 1 鑰冭瘯 2 闃呭嵎 3 鏌ョ湅
+ type: {
+ type: Number,
+ default: 2,
+ },
+ //鏁版嵁婧�
+ dataSource: {
+ type: Object,
+ default: () => {
+ return {
+ //璇曞嵎ID
+ paperId: "",
+ //璇曞嵎鍚嶇О
+ paperName: "",
+ //鑰冪敓ID
+ examineId: "",
+ //鑰冪敓鍚嶇О
+ examineName: "",
+ //鍒嗘暟
+ score: null,
+ //鑰冭瘯鏃堕暱(鍒嗛挓)
+ examDuration: null,
+ //浜ゅ嵎鏃堕棿
+ submissionTime: "",
+ //棰樼洰闆嗗悎
+ list: [
+ {
+ //棰樼洰绫诲瀷 1.鍗曢�夐 2.澶氶�夐 3.鍒ゆ柇棰� 4.濉┖棰� 5.绠�绛旈
+ type: null,
+ //棰樺彿
+ no: null,
+ //棰樼洰
+ subject: "",
+ //棰樼洰鎬诲垎
+ totalScore: null,
+ //绛旀闆嗗悎
+ answers: [
+ {
+ //绛旀搴忓彿
+ no: "",
+ //绛旀
+ answer: "",
+ },
+ ],
+ //鑰冪敓绛旀
+ examineAnswer: null,
+ //姝ｇ‘绛旀
+ correctAnswer: null,
+ //绛旀瑙ｆ瀽
+ answerAnalysis: "",
+ //鏄惁瀵归敊 1.瀵� 2.閿�
+ isHook: null,
+ //寰楀垎
+ score: null,
+ },
+ ],
+ };
+ },
+ },
+ },
data() {
return {
- formLabelAlign: {
- type: "",
- user: "",
- region: "",
- },
- tableData: [
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- ],
- //鎻愪氦鎸夐挳
- multipleSelection: [],
+ //鍊掕灏忔椂
+ hour: "",
+ //鍊掕鍒嗛挓
+ minute: "",
+ //鍊掕绉�
+ second: "",
+ //璁℃椂鍣�
+ promiseTimer: "",
+ //鏁版嵁婧�
+ tempDataSource: {},
+ //绛旈鍗℃縺娲婚」
+ answerCardActiveName: [],
+ //缁勮鍚庢暟鎹泦
+ convertDatas: [],
+ //绂佹绛旈
+ disabledAnswer: false,
+ //绂佹闃呭嵎
+ disabledRead: false,
};
+ },
+ watch: {
+ dataSource(newValue, oldValue) {
+ Object.assign(this.tempDataSource, newValue);
+ this.convertData();
+ },
+ },
+ created() {
+ Object.assign(this.tempDataSource, this.dataSource);
+ this.convertData();
+ if (this.type === 2) {
+ this.disabledAnswer = true;
+ }
+ if (this.type === 3) {
+ this.disabledAnswer = true;
+ this.disabledRead = true;
+ }
+ },
+ computed: {
+ hourString() {
+ return this.hour < 10 ? "0" + this.hour : "" + this.hour;
+ },
+ minuteString() {
+ return this.minute < 10 ? "0" + this.minute : "" + this.minute;
+ },
+ secondString() {
+ return this.second < 10 ? "0" + this.second : "" + this.second;
+ },
+ },
+ mounted() {
+ if (this.type === 1) {
+ let remainTime = this.dataSource.examDuration * 60;
+ if (remainTime > 0) {
+ this.hour = Math.floor((remainTime / 3600) % 24);
+ this.minute = Math.floor((remainTime / 60) % 60);
+ this.second = Math.floor(remainTime % 60);
+ this.countDowm();
+ }
+ }
+
+ if (this.type === 2 || this.type === 3) {
+ this.convertDatas.forEach((t) => {
+ t.childs.forEach((c) => {
+ this.answerButtionCheck(c.examineAnswer, t, c);
+ });
+ });
+ }
},
methods: {
// 杩斿洖涓婁竴涓〉闈�
goBack() {
this.$router.back();
},
- //鎻愪氦鎸夐挳
- onSubmit() {
- console.log("submit!");
+ /**
+ * 鎸夐挳鐐瑰嚮浜嬩欢
+ */
+ btnClick(type) {
+ console.log(this.tempDataSource);
+ switch (type) {
+ //浜ゅ嵎
+ case "handPaper":
+ this.$emit("PaperHand", this.tempDataSource);
+ break;
+ //闃呭嵎
+ case "readPaper":
+ this.$emit("paperRead", this.tempDataSource);
+ break;
+ //闃呭嵎 涓婁竴涓�
+ case "readPaperUpper":
+ this.$emit("paperReadUpper");
+ break;
+ //闃呭嵎 涓嬩竴涓�
+ case "readPaperNext":
+ this.$emit("paperReadNext");
+ break;
+ }
},
- // 淇敼琛ㄥ崟澶撮儴鐨勯鑹�
- getRowClass() {
- return "background:#d2d3d6";
+ /**
+ * 閿氱偣瀹氫綅
+ */
+ // 杩欏効灏辨槸瀹氫綅
+ jump(postion) {
+ console.log("postion", postion);
+ let jump = this.$refs.paperContent.querySelectorAll("#" + postion);
+ // 鑾峰彇闇�瑕佹粴鍔ㄧ殑璺濈
+ // 鐖剁洅瀛愬埌娴忚鍣ㄩ《閮ㄧ殑璺濈
+ let subjectTitleTop = this.$refs.paperContent.offsetTop;
+ // 瀵瑰簲鐨勫厓绱犲埌娴忚鍣ㄩ《閮ㄧ殑璺濈
+ let total = jump[0].offsetTop;
+ //瀹炵幇form閿氱偣瀹氫綅锛堜娇鐢ㄥ綋鍓嶈窛绂诲噺鍘荤埗鍏冪礌鍒伴《閮ㄨ窛绂伙級
+ this.$refs.paperContent.scrollTop = total - subjectTitleTop;
},
-
- // 閫夋嫨
- handleSelectionChange(val) {
+ /**
+ *瀵归敊閫夋嫨
+ */
+ isHookButtionCheck(val) {
console.log(val, "val");
- this.multipleSelection = val;
+ if (val.type === 1 || val.type === 2 || val.type === 3) {
+ if (val.isHook === 1) {
+ val.score = val.totalScore;
+ }
+ if (val.isHook === 2) {
+ val.score = 0;
+ }
+ }
+ },
+ /**
+ *绛旈鍗￠�変腑
+ */
+ answerButtionCheck(value, parent, child) {
+ console.log(value, parent, child);
+ let answerId = "answer" + parent.code + child.no;
+ let but = this.$refs.paperLeft.querySelectorAll("#" + answerId);
+ if (but.length > 0) {
+ if (but[0].className.indexOf("answer-button-check") > -1) {
+ if (child.examineAnswer && child.examineAnswer.length == 0) {
+ but[0].classList.remove("answer-button-check");
+ }
+ } else {
+ if (child.examineAnswer && child.examineAnswer.length > 0) {
+ but[0].classList.add("answer-button-check");
+ }
+ }
+ }
+ },
+ /**
+ * 杞崲绛旀
+ */
+ converAnswerStr(answer) {
+ if (answer instanceof Array) {
+ return answer.join(" ");
+ }
+ return answer;
+ },
+ /**
+ * 杞崲鏁版嵁
+ */
+ convertData() {
+ let sorted = this.groupBy(this.tempDataSource.list, function (item) {
+ return [item.type];
+ });
+ this.convertDatas = [];
+ this.answerCardActiveName = [];
+ this.orderBy(sorted, "key", "asc");
+ sorted.forEach((item) => {
+ let totalScore = 0;
+ item.value.forEach((t) => {
+ totalScore += t.totalScore;
+ });
+ switch (item.key) {
+ case "[1]":
+ this.convertDatas.push({
+ name: "鍗曢�夐",
+ code: "Single",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Single");
+ break;
+ case "[2]":
+ this.convertDatas.push({
+ name: "澶氶�夐",
+ code: "Multiple",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Multiple");
+ break;
+ case "[3]":
+ this.convertDatas.push({
+ name: "鍒ゆ柇棰�",
+ code: "Judgment",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Judgment");
+ break;
+ case "[4]":
+ this.convertDatas.push({
+ name: "濉┖棰�",
+ code: "Blank",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Blank");
+ break;
+ case "[5]":
+ this.convertDatas.push({
+ name: "绠�绛旈",
+ code: "Answer",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Answer");
+ break;
+ }
+ });
+ console.log(this.convertDatas);
+ },
+ /**
+ * 鎺掑簭
+ * @param {} datas 鏁扮粍
+ * @param {} col 鍒�
+ * @param {} type 绫诲瀷 desc,asc
+ * @returns {}
+ */
+ orderBy(datas, col, type) {
+ let m;
+ for (let i = 0; i < datas.length; i++) {
+ for (let k = 0; k < datas.length; k++) {
+ if (type === "asc") {
+ if (datas[i][col] < datas[k][col]) {
+ m = datas[k];
+ datas[k] = datas[i];
+ datas[i] = m;
+ }
+ } else if (type === "desc") {
+ if (datas[i][col] > datas[k][col]) {
+ m = datas[k];
+ datas[k] = datas[i];
+ datas[i] = m;
+ }
+ }
+ }
+ }
+ return datas;
+ },
+ /**
+ * 鍒嗙粍
+ * @param array 鏁版嵁闆�
+ * @param f 鍑芥暟
+ * let sorted = groupBy(list, function(item){ return [item.name];});
+ */
+ groupBy(array, f) {
+ const groups = {};
+ const keyValues = [];
+ array.forEach(function (o) {
+ const group = JSON.stringify(f(o));
+ groups[group] = groups[group] || [];
+ groups[group].push(o);
+ });
+ Object.keys(groups).map(function (group) {
+ return keyValues.push({key: group, value: groups[group]});
+ });
+ return keyValues;
+ },
+ /**
+ * 鍊掕鏃�
+ */
+ countDowm() {
+ let self = this;
+ clearInterval(this.promiseTimer);
+ this.promiseTimer = setInterval(function () {
+ if (self.hour === 0 && self.minute === 0 && self.second === 0) {
+ self.disabledAnswer = true;
+ }
+ if (self.hour === 0) {
+ if (self.minute !== 0 && self.second === 0) {
+ self.second = 59;
+ self.minute -= 1;
+ } else if (self.minute === 0 && self.second === 0) {
+ self.second = 0;
+ self.$emit("countDowmEnd", true);
+ clearInterval(self.promiseTimer);
+ } else {
+ self.second -= 1;
+ }
+ } else {
+ if (self.minute !== 0 && self.second === 0) {
+ self.second = 59;
+ self.minute -= 1;
+ } else if (self.minute === 0 && self.second === 0) {
+ self.hour -= 1;
+ self.minute = 59;
+ self.second = 59;
+ } else {
+ self.second -= 1;
+ }
+ }
+ }, 1000);
},
},
};
</script>
-<style scoped lang="scss">
-.flex {
- display: flex;
-}
-// 鍐呭
-.content {
- width: 1262px;
- margin-bottom: 80px;
- background-color: #fff;
- padding: 20px 40px;
+
+<style lang="scss" scoped>
+.main {
+ width: 1227px;
+ background: white;
+ box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
+ padding: 32px 40px 0 40px;
+}
+
+.paper-main {
+ overflow: hidden;
+
+ .paper-header {
+ width: 100%;
+ height: 60px;
+ background-color: #f7f7f7;
+ position: absolute;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .paper-content {
+ display: flex;
+ // margin-top: 60px;
+ .paper-left {
+ flex: 1;
+ padding: 10px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ border: 1px solid #e4e4e4;
+ border-top: none;
+ height: 580px;
+ }
+
+ .paper-right {
+ height: 580px;
+ width: 300px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ box-sizing: border-box;
+ padding: 10px;
+ border: 1px solid #e4e4e4;
+ border-top: none;
+ }
+ }
+}
+
+.paper-footer {
+ line-height: 60px;
+ overflow: hidden;
+ box-sizing: border-box;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+.paper-title {
+ padding-left: 10px;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ /* background: #f7f7f7; */
+}
+
+.paper-title h1 {
+ font-size: 1.2em;
+ margin: 0;
+}
+
+.downTime {
+ color: rgb(230, 93, 110);
+ font-size: 24px;
+ font-weight: bold;
+ float: right;
+ line-height: 1em;
+}
+
+.answer-button {
+ padding: 0px;
+ color: #0a0a0a;
+ /* background-color: #ffffff; */
+ border-color: #e4e4e4;
+ margin-left: 10px;
+ width: 30px;
+ height: 30px;
+}
+
+.answer-button:hover {
+ /* background: #ecf1ef; */
+ border-color: #e4e4e4;
+ color: #0a0a0a;
+}
+
+.answer-button-check {
+ background: #13ce66;
+ border-color: #30b08f;
+}
+
+// 鍗曢�夋牱寮�
+.answer-radio {
+ display: list-item;
+ margin: 5px 0px;
+ list-style: none;
+}
+
+// 澶氶�夋牱寮�
+.answer-checkbox {
+ display: list-item;
+ margin: 5px 0px;
+ list-style: none;
+}
+
+.subject-title {
+ padding-left: 10px;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ /* background: #f7f7f7; */
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.subject-title h2 {
+ font-size: 16px;
+ display: inline-block;
+}
+
+.subject-title span {
+ font-size: 16px;
+ display: inline-block;
+}
+
+.subject-remark {
+ /* background: #f7f7f7; */
+}
+
+.subject-remark .item {
+ display: block;
+ padding: 5px;
+}
+
+.subject-remark .title {
+ font-weight: bold;
+}
+
+.el-radio > > > .el-radio__input.is-checked .el-radio__inner {
+ background-color: #13ce66;
+ border-color: #13ce66;
+}
+
+.el-radio-button > > > .el-radio-button__inner {
+ padding: 10px;
+}
+
+.el-collapse-item h2 {
+ width: 150px;
+ font-size: 14px;
+ display: inline-block;
+}
+
+.el-form--label-top > > > .el-form-item__label {
+ float: none;
+ display: inline-block;
+ text-align: left;
+ padding: 0px;
+}
+
+.el-card {
+ margin: 10px;
+}
+
+.el-card > > > .el-card__header {
+ /* background-color: #ffffff; */
+ padding: 0px 10px;
+ line-height: 35px;
+ font-size: 16px;
+}
+
+.el-card > > > .el-card__body {
+ padding: 5px 20px;
}
</style>
diff --git a/src/views/Manage/TestPaper/index.vue b/src/views/Manage/TestPaper/index.vue
index f6cf92e..2678e79 100644
--- a/src/views/Manage/TestPaper/index.vue
+++ b/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: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- type: "閫夋嫨棰�",
- subject: "璇枃",
- score: 100,
- },
- {
- title: "褰揂涓嶣涓�璧蜂慨璺�",
- 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>
--
Gitblit v1.8.0