index.vue 14.9 KB

Edit Raw Blame History

<template>
	<div class="app-container">

		<el-row id="elRow">
			<el-col :span="4" :style="{'height':TreeColHeight+'px'}">
				<div style="margin-right: 10px;height: 100%;">
					<div class="TreeHeader">
						<label style="font-size: 18px;">题目分类</label>
						<el-button type="primary" class="classbtn">添加分类
						</el-button>
					</div>
					<div :style="{'height':TableColHeight+'px'}" class="areadiv"
						style="margin:10px 0 0 0;padding: 5px 0 0 0;">
						<el-tree :data="treeData" :props="treeData" @node-click="handleNodeClick" class="eltree" :expand-on-click-node=false>
						</el-tree>
					</div>
				</div>
			</el-col>
			<el-col :span="20">
				<div class="grid-content bg-purple-light">
					<div class="seetingsDiv" style="">
						<el-button type="primary" @click="dialogsubjectlVisible=true">添加题目
						</el-button>
					</div>
					<div class="areadiv" :style="{'height':TableColHeight+'px'}">
						<el-table :data="QuestList" id="QuestionTable" border
							style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;"
							:header-cell-class-name="headerStyle" :stripe=true>
							<el-table-column prop="date" label="ID" width="50">
								<template slot-scope="scope">
									<span>{{ scope.row.id }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="date" label="题目类型" width="100">
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.subjectName }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="QuestionClassName" label="分类" width="100">
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.QuestionClassName }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="分数" width="80">
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.fraction }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="单项分数" width="80">
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.singleFraction }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="正确答案" width="80">
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.answer }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="题目" :show-overflow-tooltip=true>
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.subject }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="解析" :show-overflow-tooltip=true>
								<template slot-scope="scope">
									<span style="padding-left: 10px;">{{ scope.row.analysis }}</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="150">
								<template slot-scope="scope">
									<el-dropdown @command="(e)=>{handleCommand(e,scope.row.id)}"
										style="padding-left: 10px;">
										<span class="el-dropdown-link">
											操作<i class="el-icon-arrow-down el-icon--right"></i>
										</span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item command="update">编辑</el-dropdown-item>
												<!-- <el-dropdown-item command="b">锁定</el-dropdown-item> -->
												<el-dropdown-item command="del">删除</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination background @current-change="currentchange"
							style="position:static;bottom: 3px;text-align: center;margin-top: 5px;"
							:page-size="this.parameter.pageSize" layout="total,prev, pager, next" :total="Count">
						</el-pagination>
						<div style="clear: both;"></div>
					</div>
				</div>
			</el-col>
		</el-row>

		<el-dialog title="编辑题目" :visible.sync="dialogsubjectlVisible" @close='closeDialog' width="800px"
			:close-on-click-modal="false">
			<el-form ref="Dataform" :model="Dataform" label-width="60px">
				<el-form-item label="题目">
					<el-input v-model="Dataform.subject" placeholder="请输入题目名称"></el-input>
				</el-form-item>
				<el-form-item label="分类" style="padding-top: 5px;">
					<el-cascader v-model="Dataform.QuestionClassId" style="width:400px" :props="{emitPath:false}"
						:clearable=true :options="QuestionClass">
					</el-cascader>
				</el-form-item>
				<el-form-item label="题型" style="padding-top: 5px;">
					<el-select v-model="Dataform.subjectType" value-key="Dataform.subjectType"
						@change="changeQuestionType" placeholder="请选择题型">
						<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="选项" v-show="OptionVisible">
					<el-table :data="subjectContent" :show-header="false">
						<el-table-column>
							<template slot-scope="scope">
								<el-input placeholder="请输入答案" v-model="scope.row.optionContent" class="optionInput">
									<template slot="prepend">{{scope.row.option}}</template>
								</el-input>
								<i class="el-icon-circle-plus el-icon" @click="Addlist"></i>
								<i class="el-icon-remove el-icon" @click="RemoveList(scope)" v-if="scope.$index!=0"></i>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="答案" v-show="OptionVisible" class="subjectContentClass">
					<el-radio-group v-for="(item,i) in subjectContent" v-model="Dataform.answer" v-if="GroupVisible">
						<el-radio :label="item.option">{{item.option}}</el-radio>
					</el-radio-group>
					<el-checkbox-group v-for="(item,i) in subjectContent" v-model="Dataform.answer"
						v-if="!GroupVisible">
						<el-checkbox style="float: left;" :label="item.option">{{item.option}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="分数" v-show="OptionVisible">
					<el-input-number :step="1" style="float: left;" :min="0" v-model="Dataform.fraction">
					</el-input-number>
					<div style="float: left;margin-left: 20px;" v-if="!GroupVisible">
						<lable style="font-weight: bold;">单项分数：</lable>
						<el-input-number :step="0.5" :max="Dataform.fraction/2" :min="0"
							v-model="Dataform.singleFraction">
						</el-input-number>
					</div>
				</el-form-item>
				<el-form-item label="解析" style="margin-top: 10px;">
					<el-input v-model="Dataform.analysis" :rows="10" type="textarea" placeholder="请输入答案解析" />
				</el-form-item>
			</el-form>
			<el-button @click="EditQuestionHeadler" style="margin: 10px 0 0 0 ;float:right" type="primary">确定
			</el-button>
			<div style="clear: both;"></div>
		</el-dialog>
	</div>
</template>

<script lang="ts">
	import {
		getQuestionList,
		EditQuestion,
		getQuestionClassList,
		DelQuestionBankEvent,
		GetQuestionBankById
	} from '@/api/QuestionBank'
	import {
		parseTime
	} from '@/utils/index.js'
	export default {
		filters: {},
		data() {
			return {
				parameter: {
					pageIndex: 1,
					pageSize: 12,
					sort: "id",
					sortOrder: 1,
					keyword: "",
					QuestionClassId: 0,
					status: 1
				},
				Count: 0,
				QuestList: [],
				dialogsubjectlVisible: false,
				OptionVisible: true,
				GroupVisible: true,
				Dataform: {
					subject: "",
					subjectType: 1,
					subjectContent: "",
					QuestionClassId: 0,
					answer: [],
					analysis: "",
					fraction: 0,
					singleFraction: 0,
					addTime: "2021-11-12",
					state: 1
				},
				subjectContent: [{
					option: "A",
					optionContent: ""
				}],
				QuestionClass: [],
				TreeColHeight: 0,
				TableColHeight: 0,
				treeData: [{
					value:0,
					label:"全部"
				}]
			}
		},
		created() {

		},
		mounted() {
			let ContentAreaHight = window.innerHeight - document.getElementById("elRow").offsetTop - 70;
			this.TableColHeight = ContentAreaHight - document.getElementById("QuestionTable").offsetTop;
			let lineNumber = this.TableColHeight - 50 - 20; //减去表头来计算
			this.TreeColHeight = ContentAreaHight;
			lineNumber = Math.floor(lineNumber / 49)
			this.parameter.pageSize = lineNumber;
			this.GetList();
			this.getQuestionClassListHeadler();
		},
		methods: {
			//表格右边的操作按钮
			handleCommand(value, val) {
				if (value == "update") {
					this.GetQuestionBankByIdHeadler(val);
				}
				if (value == "del") {
					this.DelQuestionBankEventHeadler(val);
				}
			},
			//获取选择的题目详细信息
			GetQuestionBankByIdHeadler(id) {
				GetQuestionBankById(id).then(res => {
					this.changeQuestionType(res.data.data.subjectType); //这里先初始化编辑显示内容
					this.Dataform = res.data.data; //内容赋值
					this.subjectContent = JSON.parse(res.data.data.subjectContent); //赋值选项
					if (res.data.data.subjectType == 1) {
						this.Dataform.answer = res.data.data.answer.split(',')[0]; //赋值答案
					} else {
						this.Dataform.answer = res.data.data.answer.split(','); //赋值答案
					}
					this.dialogsubjectlVisible = true;

				});
			},
			//关闭弹框的事件
			closeDialog() {
				//初始化数据
				this.Dataform = this.$options.data().Dataform;
				this.subjectContent = this.$options.data().subjectContent;
				//所有文本框恢复到初始化状态
				this.Dataform.answer = [];
				this.OptionVisible = true;
				this.GroupVisible = true;
			},
			//选择题目类型来判断是否显示部分表单
			changeQuestionType(val) {
				if (val == 3) {
					this.OptionVisible = false;
				}
				if (val == 2) {
					this.OptionVisible = true;
					this.Dataform.answer = [];
					this.GroupVisible = false;
				}
				if (val == 1) {
					this.Dataform.answer = [];
					this.OptionVisible = true;
					this.GroupVisible = true;
				}
			},
			headerStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return 'tableStyle'
			},
			Addlist() {
				if (this.subjectContent.length < 4) {
					var alphabet = String.fromCharCode(64 + parseInt(this.subjectContent.length + 1));
					this.subjectContent.push({
						"option": alphabet,
						"title": ""
					});
				} else {
					this.$confirm('系统暂时只支持4个答案！', '消息')
				}
			},
			RemoveList(val) {
				this.subjectContent.splice(val.$index, 1);
				this.subjectContent.forEach((item, index) => {
					item.option = String.fromCharCode(64 + parseInt(index + 1));
				})
			},
			handleNodeClick(val) {
				this.parameter.QuestionClassId = val.value;
				this.parameter.pageIndex = 1;
				this.GetList();
			},
			DelQuestionBankEventHeadler(id) {
				this.$confirm('确定删除该试题？', '消息', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					callback: (action) => {
						if (action == "confirm") {
							DelQuestionBankEvent(id).then(res => {
								if (res.data.code == 200) {
									this.$confirm(res.data.message, '消息')
									this.GetList();
								}
							});
						}
					},
				})
			},
			EditQuestionHeadler() {
				let reg = new RegExp('"', 'g');
				//this.Dataform.subjectContent = JSON.stringify(this.subjectContent).replace(reg, "\"");
				this.Dataform.subjectContent = this.subjectContent;
				if (typeof(this.Dataform.answer) != 'string') //判断是否为字符串
					this.Dataform.answer = this.Dataform.answer.join(',')
				var _this = this;
				EditQuestion(this.Dataform).then(res => {
					if (res.data.code == 200) {
						_this.GetList();
						this.$message(res.data.message);
						setTimeout(function() {
							_this.dialogsubjectlVisible = false;
						}, 10)
					}
				});
			},
			GetList() {
				let _this = this;
				getQuestionList(_this.parameter).then(res => {
					_this.QuestList = res.data.data.rows;
					_this.Count = res.data.data.total;
					_this.$forceUpdate();
				});
			},
			currentchange(page) {
				this.parameter.pageIndex = page;
				this.GetList();
			},
			getQuestionClassListHeadler() {
				let _this = this;
				getQuestionClassList().then(res => {
					var gettree = function(titem) {
						titem.children = []
						let childrenList = res.data.data.filter(u => u.ParentId == titem.value);
						if (childrenList.length == 0)
							titem.children = undefined;
						res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => {
							var model = {
								value: item.id,
								label: item.ClassificationName
							};
							gettree(model);
							titem.children.push(model);
						})
					}
					res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => {
						var model = {
							value: item.id,
							label: item.ClassificationName
						};
						gettree(model);
						_this.QuestionClass.push(model);
						_this.treeData.push(model)
					})
				});
			}
		}
	}
</script>
<style scoped="scoped">
	/deep/.cell {
		padding-left: 0px;
	}
	/deep/.el-form-item {
		margin-bottom: 5px;
	}
	/deep/.el-radio {
		margin-right: 10px;
	}
	/deep/.el-radio__input.is-checked .el-radio__inner {
		border-color: #409EFF;
		background-color: #409EFF;
	}
	/deep/.el-radio__input.is-checked+.el-radio__label {
		color: #409EFF;
		font-weight: bold;
	}
	/deep/.tableStyle {
		background-color: #304156 !important;
		color: #fff;
		font-weight: 400;
	}
	.QuestDiv {
		width: 24%;
		float: left;
		min-height: 50px;
		border: 1px solid #CDCDCD;
		margin-right: 10px;
		box-shadow: 0 0 10px #808080;
		border-radius: 8px;
		min-height: 100px;
		background-color: #FFF;
		opacity: 0.8;
		margin-bottom: 10px;
		height: 313px;
	}
	.clear {
		clear: both;
		margin-bottom: 10px;
	}
	.font-color {
		background-color: #AE1E15 !important;
		color: #FFF;
		box-shadow: 0 0 5px #AE1E15;
	}
	/deep/.el-input-group__prepend {
		font-weight: bold;
		width: 30px;
		text-align: center;
		background: #409EFF;
		color: #FFF;
	}
	.optionInput {
		float: left;
		width: 620px !important;
	}
	.el-icon {
		font-size: 20px;
		line-height: 40px;
		margin: 0 5px;
		cursor: pointer;
		color: #409EFF !important;
	}
	>>>.subjectContentClass .el-checkbox__label {
		padding-right: 10px !important;
	}
	.seetingsDiv {
		width: 100%;
		height: 60px;
		background: #efefef;
		line-height: 60px;
		border-radius: 5px;
		box-shadow: 0 0 5px #cdcdcd;
	}
	.seetingsDiv button {
		background-color: #304156;
		border: 0px;
		margin-left: 10px;
		box-shadow: 0 0 5px #cdcdcd;
		float: right;
		margin-top: 12px;
		margin-right: 10px;
	}
	.areadiv {
		background-color: #efefef;
		border-radius: 5px;
		box-shadow: 0 0 5px #efefef;
	}
	.TreeHeader {
		background-color: #304156;
		height: 60px;
		border-radius: 5px;
		box-shadow: 0 0 10px #efefef;
		line-height: 60px;
		color: #FFF;
		padding-left: 10px;
	}
	.classbtn {
		float: right;
		margin: 11px 10px 0 0;
		height: 35px;
		line-height: 12px;
	}
	.eltree {
		background-color: #efefef;
	}
	/deep/.el-tree-node__content {
		min-height: 40px;
	}
</style>