|
@@ -0,0 +1,226 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ title="AI智能评卷设置"
|
|
|
+ :visible.sync="modalIsShow"
|
|
|
+ width="800px"
|
|
|
+ append-to-body
|
|
|
+ top="10vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ @open="visibleChange"
|
|
|
+ >
|
|
|
+ <div class="modify-mark-ai-set">
|
|
|
+ <el-form ref="FormRef" :model="form" :rules="rules" label-width="90px">
|
|
|
+ <el-form-item label="试卷题干:" prop="questionStem">
|
|
|
+ <el-input
|
|
|
+ v-model="form.questionStem"
|
|
|
+ type="textarea"
|
|
|
+ :maxlength="999"
|
|
|
+ show-word-limit
|
|
|
+ :rows="4"
|
|
|
+ placeholder="请输入试卷题干"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="评分模式:" prop="scoreMode">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="form.scoreMode"
|
|
|
+ @change="handleScoreModeChange"
|
|
|
+ >
|
|
|
+ <el-radio label="POINT">按得分点评分</el-radio>
|
|
|
+ <el-radio label="LEVEL">按档次评分</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="最小分:" prop="minScore">
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.minScore"
|
|
|
+ :min="0"
|
|
|
+ :max="100"
|
|
|
+ :precision="1"
|
|
|
+ :step="0.5"
|
|
|
+ :controls="false"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 标答列表 -->
|
|
|
+ <div class="answer-list">
|
|
|
+ <div class="box-justify mb-2">
|
|
|
+ <h3 class="no-margin">标答列表</h3>
|
|
|
+ <el-button type="primary" size="small" @click="toAddAnswer"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table :data="form.answers" border>
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="60"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <template v-if="form.scoreMode === 'POINT'">
|
|
|
+ <el-table-column prop="score" label="分值" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.score }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-table-column label="分值区间" width="160">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.minScore }} - {{ scope.row.maxScore }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ <el-table-column
|
|
|
+ prop="content"
|
|
|
+ label="标答内容"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="操作" width="100" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ class="btn-primary"
|
|
|
+ @click="toEditAnswer(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ class="btn-danger"
|
|
|
+ @click="toDeleteAnswer(scope.$index)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="close">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="handleSubmit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 得分点标答编辑弹窗 -->
|
|
|
+ <modify-mark-ai-point-answer
|
|
|
+ ref="ModifyMarkAiPointAnswer"
|
|
|
+ @modified="answerModified"
|
|
|
+ ></modify-mark-ai-point-answer>
|
|
|
+ <!-- 档次标答编辑弹窗 -->
|
|
|
+ <modify-mark-ai-level-answer
|
|
|
+ ref="ModifyMarkAiLevelAnswer"
|
|
|
+ @modified="answerModified"
|
|
|
+ ></modify-mark-ai-level-answer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ModifyMarkAiPointAnswer from "./ModifyMarkAiPointAnswer.vue";
|
|
|
+import ModifyMarkAiLevelAnswer from "./ModifyMarkAiLevelAnswer.vue";
|
|
|
+
|
|
|
+const getInitForm = () => {
|
|
|
+ return {
|
|
|
+ questionStem: "",
|
|
|
+ scoreMode: "POINT",
|
|
|
+ minScore: undefined,
|
|
|
+ answers: [],
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "modify-mark-ai-set",
|
|
|
+ components: {
|
|
|
+ ModifyMarkAiPointAnswer,
|
|
|
+ ModifyMarkAiLevelAnswer,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ group: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modalIsShow: false,
|
|
|
+ form: getInitForm(),
|
|
|
+ rules: {
|
|
|
+ questionStem: [
|
|
|
+ { required: true, message: "请输入试卷题干", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ scoreMode: [
|
|
|
+ { required: true, message: "请选择评分模式", trigger: "change" },
|
|
|
+ ],
|
|
|
+ minScore: [
|
|
|
+ { required: true, message: "请输入最小分", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ curAnswer: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ visibleChange() {
|
|
|
+ this.form = this.group.aiMarkSet || getInitForm();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.FormRef.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.modalIsShow = true;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.modalIsShow = false;
|
|
|
+ this.$refs.FormRef.resetFields();
|
|
|
+ },
|
|
|
+ handleScoreModeChange() {
|
|
|
+ this.form.answers = [];
|
|
|
+ },
|
|
|
+ toAddAnswer() {
|
|
|
+ if (this.form.scoreMode === "POINT") {
|
|
|
+ this.$refs.ModifyMarkAiPointAnswer.open();
|
|
|
+ } else {
|
|
|
+ this.$refs.ModifyMarkAiLevelAnswer.open();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toEditAnswer(row) {
|
|
|
+ this.curAnswer = row;
|
|
|
+ if (this.form.scoreMode === "POINT") {
|
|
|
+ this.$refs.ModifyMarkAiPointAnswer.open(row);
|
|
|
+ } else {
|
|
|
+ this.$refs.ModifyMarkAiLevelAnswer.open(row);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toDeleteAnswer(index) {
|
|
|
+ this.form.answers.splice(index, 1);
|
|
|
+ },
|
|
|
+ answerModified(answer) {
|
|
|
+ if (this.curAnswer) {
|
|
|
+ Object.assign(this.curAnswer, answer);
|
|
|
+ } else {
|
|
|
+ this.form.answers.push(answer);
|
|
|
+ }
|
|
|
+ this.curAnswer = null;
|
|
|
+ },
|
|
|
+ async handleSubmit() {
|
|
|
+ const valid = await this.$refs.FormRef.validate().catch(() => {});
|
|
|
+ if (!valid) return;
|
|
|
+ if (!this.form.answers.length) {
|
|
|
+ this.$message.error("请添加标答");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$emit("modified", { ...this.form });
|
|
|
+ this.close();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.modify-mark-ai-set {
|
|
|
+ .answer-list {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|