答题卡

src/views/anscard/Index.vue

@@ -29,8 +29,11 @@
 					box-sizing: content-box;
 					font-family: 宋体, SimSun, 'STSong';
 				}
+				
 				.obj{
-					 position:absolute;border:solid 1px black;
+					 position:relative;border:solid 1px black;
+					 width: 100%;
+					 height: 100%;
 				}
 				.item{
 					position: absolute;
@@ -45,10 +48,60 @@
 				.opLabel{
 					padding:0mm 2mm;font-weight:bold; font-size:3mm;line-height:5mm;width:178mm;
 				}
+				.del{
+					position: absolute;
+					width: 20px;
+					right: 5px;
+					display: none;
+					cursor: pointer;
+					z-index: 999;
+				}
+			}
+			.sub:hover .del{
+				display: block !important;
 			}
 			.act{
 				background-color: #000;
 			}
+			.tk{
+				div{
+					background-color: #666;
+					position: absolute;
+				}
+			}
+			.words{
+				display: flex;
+				flex-wrap: wrap;
+				margin: 8mm auto;
+				width: 170mm;
+				border: 1px solid #333;
+				border-right-width: 2px;
+				border-bottom-width: 2px;
+				li{
+					box-sizing: border-box;
+					list-style: none;
+					width: 8.5mm;
+					height: 8mm;
+					border: 1px solid #333;
+					margin-bottom: 1.5mm;
+					border-right: none;
+					position: relative;
+					span{
+						position: absolute;
+						font-size: 2mm;
+						top: 100%;
+						left: 40%;
+					}
+				}
+			}
+			.english{
+				padding: 0 5mm;
+				li{
+					list-style: none;
+					height: 10mm;
+					border-bottom: 1px solid #333;
+				}
+			}
 		}
 		.right_div{
 			margin-left: 10px;
@@ -143,11 +196,12 @@
 			list-style: none;
 			border-bottom: 1px solid #d9d9d9;
 			padding: 5px 10px;
-			height: 40px;
+			min-height: 40px;
 			
 			span{
 				display: inline-block;
 				line-height: 30px;
+				font-size: 18px;
 			}
 			div{
 				float: right;
@@ -158,7 +212,7 @@
 					margin-right: 5px;
 					text-align: center;
 					outline: none;
-					font-size: 16px;
+					font-size: 18px;
 				}
 			}
 		}
@@ -248,48 +302,99 @@
 				
 						<!-- 选择题 -->
 						<template v-if='paper.obj.list.length>0'>
-						<!-- {{paper.obj.list}} -->
-							<div style="top:89mm;left:0mm;width:178mm;height:5mm; position:absolute;"> 
-							<div class="opLabel">
-								{{paper.obj.title}}
-								</div></div>
-							<div class="obj" :style="{
-								width: paper.objAnsPoints[0].w+'mm',
-								height: paper.objAnsPoints[0].h+'mm',
-								left: paper.objAnsPoints[0].x+'mm',
-								top: paper.objAnsPoints[0].y+'mm'
+						<!-- {{paper.obj}} -->
+							<div class="sub" :style="{
+									width: paper.objAnsPoints[0].w+'mm',
+									height: paper.objAnsPoints[0].h+'mm',
+									left: paper.objAnsPoints[0].x+'mm',
+									top: (paper.objAnsPoints[0].y-5)+'mm',
+									position:'absolute'
+								}"> 
+								<div class="opLabel">
+									{{paper.obj.title}}
+								</div>
+								<img @click="delTm(0,1)" class="del" src="../../assets/delete.png" alt="">
+								<div class="obj" > 
+									<div  v-for='(item,index) in paper.obj.list'>
+										<span class="tm_id" :style="{
+											left:(item.points[0].x-8)+'mm',
+											top:(item.points[0].y)+'mm'
+										}">{{item.id}}</span>
+										<span v-for='(opt,i) in item.points' class="options" :style="{
+											width: opt.w+'mm',
+											height: opt.h+'mm',
+											left: opt.x+'mm',
+											top: opt.y+'mm'
+										}">
+										<template v-if='item.type == 3'>
+											{{pd[i]}}
+										</template>
+										<template v-else>
+											{{options[i]}}
+										</template>
+										</span>
+									</div>					
+								</div>
+							</div>
+						</template>
+						<!-- 填空题 -->
+						<template v-if='paper.sub.length>0'>
+							<div class="sub" v-for='(item,i) in paper.stdSujQnoPoints' :style="{
+								width: item.w+'mm',
+								height: item.h+'mm',
+								left: item.x+'mm',
+								top: (item.y-5)+'mm',
+								position:'absolute'
 							}"> 
-								<div  v-for='(item,index) in paper.obj.list'>
-									<span class="tm_id" :style="{
-										left:(item.points[0].x-8)+'mm',
-										top:(item.points[0].y)+'mm'
-									}">{{item.id}}</span>
-									<span v-for='(opt,i) in item.points' class="options" :style="{
+								<div class="opLabel">{{paper.sub[i].title}}</div>
+								<img @click="delTm(i)" class="del" src="../../assets/delete.png" alt="">
+								<div class="obj" v-if='paper.sub[i].title=="填空题"'> 
+									<div v-for='sub in paper.sub[i].list' class="tk">
+										<span class="tm_id" :style="{
+											left:(sub.x-6)+'mm',
+											top:(sub.y-3)+'mm'
+										}">{{sub.id}}.</span>
+										<div :style="{
+											width:sub.w+'mm',
+											height:sub.h+'mm',
+											left: sub.x+'mm',
+											top: sub.y+'mm',
+										}"></div>
+									</div>
+								</div>
+								<div class="obj" v-else-if='paper.sub[i].type=="解答题"'>
+									<span class="tm_id" style="top: 2.5mm;">{{paper.sub[i].option.id}}</span>
+								</div>
+								<div class="obj" v-else-if='paper.sub[i].title=="选做题"' style="padding: 1mm;font-size: 3mm;line-height: 5mm;">
+									<span>请考生从<template v-for='(opt,i) in paper.sub[i].list'>{{opt.id}} </template>
+									题任选一题作答，作答时用2B铅笔在答题卡上把所选题目对应的选考标记涂黑，
+									不涂或多涂或填涂和作答不符，均不得分。</span><br>
+									<span>我选择的题号为：</span>
+									<span v-for='opt in paper.sub[i].list' class="options" :style="{
 										width: opt.w+'mm',
 										height: opt.h+'mm',
 										left: opt.x+'mm',
 										top: opt.y+'mm'
-									}">{{options[i]}}</span>
+									}">{{opt.id}}</span>
+								</div>
+								<div class="obj" v-else-if='paper.sub[i].title=="语文作文题"'>
+									<span class="tm_id" style="top: 2.5mm;">{{paper.sub[i].id}}.</span>
+									<ul class="words">
+										<li v-for='num in paper.sub[i].words'>
+											<span v-if='num%100 == 0'>{{num}}</span>
+										</li>
+									</ul>
+								</div>
+								<div class="obj" v-else-if='paper.sub[i].title=="英语作文题"'>
+									<span class="tm_id" style="top: 7mm;">{{paper.sub[i].id}}.</span>
+									<ul class="english">
+										<li v-for='num in paper.sub[i].rows'>
+											
+										</li>
+									</ul>
 								</div>
-
-								
 							</div>
 						</template>
-						<!-- 填空题 -->
-						<!-- <template>
-							<div> 
-							<div class="opLabel">填空题</div></div>
-							<div class="obj" :style="{
-								width: paper.stdSujQnoPoints[0].w+'mm',
-								height: paper.stdSujQnoPoints[0].h+'mm',
-								left: paper.stdSujQnoPoints[0].x+'mm',
-								top: paper.stdSujQnoPoints[0].y+'mm'
-							}"> 
-								
-						
-								
-							</div>
-						</template> -->
 					</div>
 					<!-- //试卷内容 -->
 					
@@ -392,14 +497,37 @@
 			<ul class="tm_list" v-if='type == 1'>
 				<li v-for="item in list">
 					<span>{{item.id}}</span>
-					<div><input type="text" v-model="item.num">个选项</div>
+					<div v-if='addForm.type != 3'><input type="text" v-model="item.num">个选项</div>
+				</li>
+			</ul>
+			<ul class="tm_list" v-if='type == 3'>
+				<li v-for="item in list" v-if='list.length>0'>
+					<span>{{item.id}}</span>
+					<div @click="addLeaf(item,item.leaf)" style="cursor: pointer;">+</div>
+
+					<div v-for="(item1,i1) in item.leaf" style="float: none;padding-left: 10px;">
+						<span style="font-weight: 500;">{{item1.id}}</span>
+						<div @click="item.leaf.splice(i1,1)" style="cursor: pointer;">-</div>
+						<div @click="addLeaf(item1,item1.leaf)" style="cursor: pointer;">+</div>
+						<div v-for="(item2,i2) in item1.leaf" style="float: none;padding-left: 10px;">
+							<span style="font-weight: 500;">{{item2.id}}</span>
+							<div @click="item1.leaf.splice(i2,1)" style="cursor: pointer;">-</div>
+							<div @click="addLeaf(item2,item2.leaf)" style="cursor: pointer;">+</div>
+							
+							<div v-for="(item3,i3) in item2.leaf" style="float: none;padding-left: 10px;">
+								<span style="font-weight: 500;">{{item3.id}}</span>
+								<div @click="item2.leaf.splice(i3,1)" style="cursor: pointer;">-</div>
+							</div>
+						</div>
+					</div>
+					
 				</li>
 			</ul>
 	  </el-form>
 		
-	  <p align='center' v-if="type == 1">
+	 <!-- <p align='center' v-if="type == 1">
 		<el-checkbox v-model="addForm.auto" >添加题目自动排版至顶端客观题区域</el-checkbox>
-	  </p>
+	  </p> -->
 	  
 	  <span slot="footer" class="dialog-footer">
 	    <el-button @click="open = false">取 消</el-button>
@@ -439,13 +567,14 @@ export default {
 	  },
 	  type:1,
 	  options:['A','B','C','D','E','F'],
+	  pd:['T','F'],
 	  addForm:{
 		  type:1,
 		  start:1,
 		  end:'',
 		  num:4,
 		  auto:true,
-		  count:1,
+		  count:2,
 		  chooseNum:3,
 		  words:900,
 		  row:10,
@@ -459,17 +588,45 @@ export default {
 			  title:'客观题',
 			  list:[]
 		  },
+		  sub:[],  //主观题
 		  objAnsPoints:[
-			{"x":0,"y":94,"w":180,"h":32,"points":[{"x":1,"y":2,"w":4,"h":3},]
-			}
+			
 		  ],
 		  stdSujQnoPoints:[
-			  {"x":0,"y":180,"w":180,"h":32}
+			 
 		  ]
+	  },
+	  dft:{
+		  x:0,
+		  y:100,
+		  w:180,
+		  h:28
 	  }
 	  
 	};
   },
+  watch:{
+	 "paper.objAnsPoints":{
+		 handler(newvalue){
+			 var y
+			 if(newvalue.length>0){
+				y=newvalue[0].y+newvalue[0].h+8
+			 }else{
+				 y=this.dft.y
+			 }
+			
+			var sub=this.paper.stdSujQnoPoints
+			sub.forEach((item,index)=>{
+				if(index > 0){
+					item.y=item.y-height-8
+				}else{
+					item.y=y
+				}
+			})
+		 },
+		 deep:true
+	 }
+  },
   methods: {
 	decToBin4(decimalNumber) {
 	  return decimalNumber.toString(2).padStart(4, '0');
@@ -486,16 +643,72 @@ export default {
 		})
 		this.list=list
 	},
+	//添加小题
+	addLeaf(item,leaf){
+		var l=leaf.length
+		leaf.push({
+			id:item.id+'.'+(l+1),
+			leaf:[]
+		})
+	},
+	//删除主观题目
+	delTm(i,flag){
+		
+		var sub=this.paper.stdSujQnoPoints,list=this.paper.sub
+		if(flag){  //客观题
+			this.paper.objAnsPoints=[]
+			this.paper.obj.list=[]
+			if(sub.length == 0){
+				this.addForm.start=1
+			}
+			return
+		}
+		var height=sub[i].h,item={...list[i]}
+		sub.splice(i,1)
+		list.splice(i,1)
+		sub.forEach((item,index)=>{
+			if(index >= i){
+				item.y=item.y-height-8
+			}
+		})
+		if(i>=sub.length-1){
+			if(item.title == '填空题'){
+				this.addForm.start-=item.list.length
+			}else{
+				this.addForm.start--
+			}
+		}
+		if(this.paper.objAnsPoints.length == 0 && this.paper.stdSujQnoPoints.length == 0){
+			this.addForm.start=1
+		}
+		
+	},
 	createList(){
-		if(this.type != 1)return
 		let s=this.addForm.start,e=this.addForm.end
 		let list=[]
 		if(this.addForm.end >= this.addForm.start){
 			for(let i=s;i<=e;i++){
-				list.push({
-					id:i,
-					num:this.addForm.num
-				})
+				if(this.type == 1){
+					// 客观题
+					if(this.addForm.type == 3){  //判断题
+						list.push({
+							id:i,
+							num:2
+						})
+					}else{
+						list.push({
+							id:i,
+							num:this.addForm.num
+						})
+					}
+					
+				}else if(this.type == 2 || this.type == 3){
+					// 填空题 解答题
+					list.push({
+						id:i,
+						leaf:[]
+					})
+				}
 			}
 		}
 		this.list=list
@@ -505,29 +718,223 @@ export default {
 	addPaper(){
 		switch(this.type){
 			case 1:   //客观题
-			this.paper.obj.list=this.paper.obj.list.concat(this.list)
-			this.calcXY()
-			this.list=[]
-			break;
-			case 2:
-			var objAnsPoints=this.paper.objAnsPoints,i=objAnsPoints.length-1
-			if(i>=0){
-				this.paper.stdSujQnoPoints.push({
-					x:objAnsPoints[i].x,
-					y:objAnsPoints[i].y+objAnsPoints[i].h+20,
-					w:objAnsPoints[i].w,
-					h:objAnsPoints[i].h
+				
+				this.calcXY()
+				
+				break;
+			case 2:  //填空题
+				let list=this.list
+				let count=this.addForm.count
+				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
+				let h=Math.ceil(list.length/count)*12
+				if(sub.length>0){
+					let i=sub.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:sub[i].x,
+						y:sub[i].y+sub[i].h+8,
+						w:sub[i].w,
+						h:h
+					})
+				}
+				else if(obj.length>0 ){
+					let i=obj.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:obj[i].x,
+						y:obj[i].y+obj[i].h+8,
+						w:obj[i].w,
+						h:h
+					})
+				}else{
+					let dft={...this.dft}
+					dft.h=h
+					this.paper.stdSujQnoPoints.push(dft)
+				}
+				
+				list.forEach((item,index)=>{
+					let row=parseInt(index/count),col=(index%count)
+					item.w=parseInt(this.dft.w/count-10)
+					item.h=0.1
+					item.x=8+(8+item.w)*col
+					item.y=8+row*10
 				})
-			}else{
-				this.paper.stdSujQnoPoints.push({
-					x:0,
-					y:94,
-					w:180,
-					h:32
+				this.paper.sub.push({
+					title:'填空题',
+					list:list,
+					
 				})
-			}
-			
-			break;
+				this.list=[]
+				console.log(this.paper)
+				break;
+			case 3: //解答题
+				var _list=this.list,new_list=[]
+				function searchLeaf(arr){
+					arr.forEach(item=>{
+						if(item.leaf.length == 0){
+							new_list.push({
+								id:item.id
+							})
+						}else{
+							searchLeaf(item.leaf)
+						}
+					})
+				}
+				searchLeaf(_list)
+				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
+				if(sub.length>0){
+					let i=sub.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:sub[i].x,
+						y:sub[i].y+sub[i].h+8,
+						w:sub[i].w,
+						h:50
+					})
+				}
+				else if(obj.length>0 ){
+					let i=obj.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:obj[i].x,
+						y:obj[i].y+obj[i].h+8,
+						w:obj[i].w,
+						h:50
+					})
+				}else{
+					let dft={...this.dft}
+					dft.h=50
+					this.paper.stdSujQnoPoints.push(dft)
+				}
+				
+				new_list.forEach((item,index)=>{
+					if(index > 0){
+						let i=sub.length-1
+						let x=index==1?6:1
+						this.paper.stdSujQnoPoints.push({
+							x:sub[i].x,
+							y:sub[i].y+sub[i].h+x,
+							w:sub[i].w,
+							h:50
+						})
+					}
+					this.paper.sub.push({
+						title:index==0?'解答题':'',
+						option:item,
+						type:'解答题'
+					})
+				})
+				this.list=[]
+				break;
+			case 4:
+				let chooseNum=this.addForm.chooseNum
+				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
+				if(sub.length>0){
+					let i=sub.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:sub[i].x,
+						y:sub[i].y+sub[i].h+8,
+						w:sub[i].w,
+						h:50
+					})
+				}
+				else if(obj.length>0 ){
+					let i=obj.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:obj[i].x,
+						y:obj[i].y+obj[i].h+8,
+						w:obj[i].w,
+						h:50
+					})
+				}else{
+					let dft={...this.dft}
+					dft.h=50
+					this.paper.stdSujQnoPoints.push(dft)
+				}
+				let start=this.addForm.start,end=Number(start)+Number(this.addForm.chooseNum)-1
+				let tihao=[]
+				for(let i=start;i<=end;i++){
+					tihao.push({
+						id:i,
+						w:4,
+						h:2.5,
+						x:24+(i-start)*6,
+						y:12
+					})
+				}
+				this.paper.sub.push({
+					title:'选做题',
+					list:tihao
+				})
+				this.addForm.end=end
+				break;
+			case 5:
+				let words=Number(this.addForm.words)
+				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
+				var row=Math.ceil(words/20)+1,height=row*9.5+30
+				if(sub.length>0){
+					let i=sub.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:sub[i].x,
+						y:sub[i].y+sub[i].h+8,
+						w:sub[i].w,
+						h:height
+					})
+				}
+				else if(obj.length>0 ){
+					let i=obj.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:obj[i].x,
+						y:obj[i].y+obj[i].h+8,
+						w:obj[i].w,
+						h:height
+					})
+				}else{
+					let dft={...this.dft}
+					dft.h=height
+					this.paper.stdSujQnoPoints.push(dft)
+				}
+				
+				this.paper.sub.push({
+					title:'语文作文题',
+					words:row*20,
+					id:this.addForm.start
+				})
+				
+				this.addForm.end=this.addForm.start
+				break;
+			case 6:
+				let rows=Number(this.addForm.row)
+				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
+				var height=rows*10+10
+				if(sub.length>0){
+					let i=sub.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:sub[i].x,
+						y:sub[i].y+sub[i].h+8,
+						w:sub[i].w,
+						h:height
+					})
+				}
+				else if(obj.length>0 ){
+					let i=obj.length-1
+					this.paper.stdSujQnoPoints.push({
+						x:obj[i].x,
+						y:obj[i].y+obj[i].h+8,
+						w:obj[i].w,
+						h:height
+					})
+				}else{
+					let dft={...this.dft}
+					dft.h=height
+					this.paper.stdSujQnoPoints.push(dft)
+				}
+				
+				this.paper.sub.push({
+					title:'英语作文题',
+					rows:rows,
+					id:this.addForm.start
+				})
+				
+				this.addForm.end=this.addForm.start
+				console.log(this.paper)
+				break;
 		}
 		this.addForm.start=Number(this.addForm.end)+1
 		this.addForm.end=''
@@ -541,26 +948,36 @@ export default {
 		  return arr.reduce((acc, curr) => Number(acc) + Number(curr), 0);
 		}
 		let col=this.addForm.col
-		let list=this.paper.obj.list
+		let list=this.paper.obj.list,list1=this.list
 		let x,y=2.5,max=[0,0,0,0,0,0,0,0,0,0]
-		list.forEach((item,index)=>{
-			let i=parseInt(index/col)
-			if(item.num>max[i]){
-				max[i]=item.num
+		 
+		list1.forEach(item=>{
+			item.type=this.addForm.type
+			if(item.type == 3){
+				item.num=2
 			}
+			list.push(item)
 		})
-
 		list.forEach((item,index)=>{
-			let i=parseInt(index/col)
+			let r=parseInt(index/25),i=parseInt(index/col)
+			if(r>0){
+				i=parseInt(index%(r*25)/col)
+			}
 			item.points=[]
+			
 			if(index>0)y=y+5
 			if(index>0 && index%col == 0){
-				y=2.5
+				y=2.5+27*r
+			}
+			
+			x=8+35*i
+		
+			if(index>0 && (index%25 >= 0 && index%25 < 5)){
+				x=8
 			}
-			x=8+12*(i)+sum(max,0,i)*6
-
 			for(let i=0;i<item.num;i++){
 				if(i>0)x+=6
+				
 				item.points.push({
 					x:x,
 					y:y,
@@ -569,7 +986,19 @@ export default {
 				})
 			}
 		})
-	}
+		
+		var dft={...this.dft}
+		dft.h=Math.ceil(list.length/25)*28
+		if(this.paper.objAnsPoints.length>0){
+			this.paper.objAnsPoints[0].h=dft.h
+		}else{
+			this.paper.objAnsPoints.push(dft)
+		}
+		
+		this.list=[]
+		console.log(dft)
+	},
+	
   
   },
   created() {