antissoft / antissoft.shangten-admin

<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="6" :style="{'height':contentHeight+'px'}">
				<div class="grid-content bg-purple">
					<div style="width: 100%;height: 80px;background: red;">
					</div>
					<draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1"
						@add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}"
						infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto">
						<li v-for="i in arr1" class="infinite-list-item">{{ i.subject }}</li>
						<p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p>
						<p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p>
						</li>
					</draggable>

				</div>
			</el-col>
			<el-col :span="10" :style="{'height':contentHeight+'px'}">
				<div class="grid-content bg-purple">
					<div class="areahead">
						<span v-show="!edit" style="font-weight: bold;">{{ TestPaper.TestPaperTitle }}</span>
						<el-input v-show="edit" style="width: 400px;" v-model="TestPaper.TestPaperTitle"></el-input>
						<i :class="{'el-icon-edit': !edit, 'el-icon-check': edit}" @click="edit = !edit"
							style="margin-left: 5px;cursor: pointer;"></i>
					</div>
					<draggable :options="{animation:380}" group="itxst" v-model="arr2" class="infinite-list" @end="end2"
						@add="ComeHere" :style="{'height':contentHeight-60+'px'}"
						style="overflow:auto;padding-top: 10px;">
						<li v-for="i in arr2" class="infinite-list-item">
							<label>[{{i.subjectName}}]{{ i.subject }}</label>
							<div v-for="item in JSON.parse(i.subjectContent)">
								<p class="option-p">{{item.option}}:{{item.optionContent}}</p>
							</div>
						</li>
						</li>
					</draggable>
				</div>
			</el-col>
			<el-col :span="8" :style="{'height':contentHeight+'px'}">
				<div class="grid-content bg-purple">
					<div class="areahead">组卷基本信息</div>
					<el-form ref="form" class="testPaper-manager" :rules="rules" :model="TestPaper" label-width="100px">
						<el-form-item label="试卷名称:" class="el-form-item-custom">
							{{TestPaper.TestPaperTitle}}
						</el-form-item>
						<el-form-item label="题目数量:" class="el-form-item-custom">
							{{arr2.length}}
						</el-form-item>
						<el-form-item label="题型数量:" class="el-form-item-custom">
							<span style="margin-right: 10px;">单选题：{{TestPaper.SingleNumber}}</span>
							<span style="margin-right: 10px;">多选题：{{TestPaper.MultipleNumber}}</span>
							<span style="margin-right: 10px;">主观题：{{TestPaper.SubjectiveNumber}}</span>
						</el-form-item>
						<el-form-item label="题目总分:" class="el-form-item-custom">
							{{TestPaper.TotalScore}}
						</el-form-item>
						<el-form-item label="分类" class="el-form-item-custom">
							<el-cascader class="testpaper-input" v-model="TestPaper.QuestionClassId"
								style="width:400px;margin-bottom: 20px;" :props="{emitPath:false}" :clearable=true
								:options="QuestionClass">
							</el-cascader>
						</el-form-item>
						<el-form-item label="试卷原价:" prop="OriginalPrice">
							<el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
								v-model="TestPaper.OriginalPrice" :precision="0">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="试卷现价:" prop="PresentPrice">
							<el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
								v-model="TestPaper.PresentPrice">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="会员价:" prop="MembershipPrice">
							<el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
								v-model="TestPaper.MembershipPrice">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="试卷简介:">
							<el-input class="testpaper-input" :rows="10" type="textarea" v-model="TestPaper.Describe">
							</el-input>
						</el-form-item>
						<el-button type="primary" style="float: right;" @click="SubmitTestPaper">保存
						</el-button>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import {
		getQuestionClassList,
		getQuestionList
	} from '@/api/QuestionBank'
	import {
		EditTestPaper
	} from '@/api/TestPaper'
	export default {
		//注册draggable组件
		components: {
			draggable,
		},
		data() {
			return {
				parameter: {
					pageIndex: 0,
					pageSize: 12,
					sort: "id",
					sortOrder: 1,
					keyword: "",
					QuestionClassId: 0,
					status: 1
				},
				contentHeight: 0,
				count: 0,
				edit: false,
				arr1: [],
				arr2: [],
				moveId: -1,
				TestPaper: {
					TestPaperTitle: "未命名试卷标题",
					TestPaperClassId: 0,
					TotalScore: 0,
					Describe: "",
					SingleNumber: 0,
					MultipleNumber: 0,
					SubjectiveNumber: 0,
					OriginalPrice: "0",
					PresentPrice: "0",
					MembershipPrice: "0",
					QuestionBankIds: []
				},
				loading: false,
				rules: {
					OriginalPrice: [{
						required: true,
						message: '不能为空'
					}],
					PresentPrice: [{
						required: true,
						message: '不能为空'
					}],
					MembershipPrice: [{
						required: true,
						message: '不能为空'
					}]
				},
				QuestionClass: [],
				treeData: [{
					value:0,
					label:"全部"
				}]
			}
		},
		computed: {
			noMore() {
				return this.arr1.length >= this.count
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		created() {

		},
		mounted() {
			//计算页面内容区域的高度
			this.contentHeight = window.innerHeight - 90;
			this.getQuestionClassListHeadler();
			//this.GetList();
		},
		methods: {
			SubmitTestPaper() {
				if (this.arr2.length > 0) {
					EditTestPaper(this.TestPaper).then(res => {
						if(res.data.code==200){
							this.$confirm('组卷成功！', '消息')
						}else{
							this.$confirm('组卷失败！', '消息')
						}
					});
				} else {
					this.$confirm('试题未有题目！', '消息')
				}
			},
			load() {
				this.loading = true
				this.parameter.pageIndex += 1;
				this.GetList();
				this.loading = false;
			},
			GetList() {
				getQuestionList(this.parameter).then(res => {
					res.data.data.rows.forEach((item, i) => {
						this.arr1.push(item)
					})
					this.count = res.data.data.total;
					this.$forceUpdate();
				});
			},
			end1(e, ) {
				var that = this;
				if (that.arr1.length < 10) {
					this.load();
				}

				var items = this.arr2.filter(function(m) {
					return m.id == that.moveId
				})

				//如果左边
				if (items.length < 2) return;
				this.arr2.splice(e.newDraggableIndex, 1)

				//	SingleNumber:0,
				// MultipleNumber:0,
				// SubjectiveNumber:0,
			},
			//从右边移除到左边
			RemoveHere(e) {
				if (e.item._underlying_vm_.subjectType == 1) {
					this.TestPaper.SingleNumber -= 1;
				}
				if (e.item._underlying_vm_.subjectType == 2) {
					this.TestPaper.MultipleNumber -= 1;
				}
				if (e.item._underlying_vm_.subjectType == 3) {
					this.TestPaper.SubjectiveNumber -= 1;
				}
				this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction;
				this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id);
			},
			//从左边添加到右边
			ComeHere(e) {
				if (e.item._underlying_vm_.subjectType == 1) {
					this.TestPaper.SingleNumber += 1;
				}
				if (e.item._underlying_vm_.subjectType == 2) {
					this.TestPaper.MultipleNumber += 1;
				}
				if (e.item._underlying_vm_.subjectType == 3) {
					this.TestPaper.SubjectiveNumber += 1;
				}
				this.TestPaper.TotalScore += e.item._underlying_vm_.fraction;

				this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id);
			},
			//右边往左边拖动时的事件
			end2(e) {
				var that = this;
				var items = this.arr1.filter(function(m) {
					return m.id == that.moveId
				})
				//如果左边
				if (items.length < 2) return;
				this.arr1.splice(e.newDraggableIndex, 1)
			},
			//move回调方法
			onMove(e, originalEvent) {
				//this.moveId = e.relatedContext.element.id;
				return true;
			},
			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 lang="scss" scoped>
	.el-row {
		/* margin-bottom: 20px; */
		&:last-child {
			margin-bottom: 0;
		}
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #efefef;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
		height: 100%;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
	.infinite-list {
		list-style: none;
		margin: 0px;
		padding: 0px;
		&::-webkit-scrollbar {
			width: 6px;
		}
		//滚动条小方块
		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: #304156;
		}
		//滚动条轨道
		&::-webkit-scrollbar-track {
			// border-radius: 10px;
			height: 100px;
			background: #cdcdcd;
		}
		.infinite-list-item {
			padding: 10px;
			min-height: 60px;
			width: 95%;
			margin: auto;
			background-color: #FFF;
			margin-bottom: 10px;
			border-radius: 5px;
			box-shadow: 0 0 5px #cdcdcd;
			&:first-child {
				margin-top: 10px;
			}
		}
	}
	.option-p {
		line-height: 15px;
	}
	.areahead {
		text-align: center;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #cdcdcd;
	}
	.testPaper-manager{
		margin: 10px 20px 10px 10px;
	}
	.testPaper-manager .el-form-item {
		margin-bottom: 20px;
	}
	.el-form-item-custom {
		margin-bottom: 0px !important;
	}
	.testpaper-input {
		//max-width: 400px;
	}
</style>