答题卡

src/components/fuEditor/index1.vue

@@ -0,0 +1,169 @@
+<template lang="html">
+  <div class="editor">
+      <div ref="toolbar" class="toolbar">
+      </div>
+      <div ref="editor" class="text">
+      </div>
+  </div>
+</template>
+
+<script>
+import E from "wangeditor";
+export default {
+  name: "editoritem",
+  data() {
+    return {
+      // uploadPath,
+      editor: null,
+      info_: null
+    };
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {
+      default: ""
+    },
+    isClear: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    isClear(val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear();
+        this.info_ = null;
+      }
+    },
+    value: function(value) {
+      if (value !== this.editor.txt.html()) {
+        this.editor.txt.html(value);
+      }
+    }
+    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+  },
+  mounted() {
+    this.seteditor();
+    this.editor.txt.html(this.value);
+  },
+  methods: {
+    getEditor(){
+      return this.editor.txt.html();
+    },
+    seteditor() {
+
+      // http://192.168.2.125:8080/admin/storage/create
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor);
+      this.editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片
+      this.editor.customConfig.uploadImgServer =
+        "/api/admin/uploadfile"; // 配置服务器端地址
+      this.editor.customConfig.uploadImgHeaders = {}; // 自定义 header
+      this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
+      this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
+      this.editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上传 3 张图片
+      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
+
+      // 配置菜单
+      this.editor.customConfig.menus = [
+        "head", // 标题
+        "bold", // 粗体
+        "fontSize", // 字号
+        "fontName", // 字体
+        "italic", // 斜体
+        "underline", // 下划线
+        "strikeThrough", // 删除线
+        "foreColor", // 文字颜色
+        "backColor", // 背景颜色
+        "link", // 插入链接
+        "list", // 列表
+        "justify", // 对齐方式
+        // "quote", // 引用
+        // "emoticon", // 表情
+        "image", // 插入图片
+        "table", // 表格
+        // "video", // 插入视频
+        // "code", // 插入代码
+        "undo", // 撤销
+        "redo", // 重复
+        // "fullscreen" // 全屏
+      ];
+
+      this.editor.customConfig.uploadImgHooks = {
+        fail: (xhr, editor, result) => {
+          // 插入图片失败回调
+        },
+        success: (xhr, editor, result) => {
+          // 图片上传成功回调
+        },
+        timeout: (xhr, editor) => {
+          // 网络超时的回调
+        },
+        error: (xhr, editor) => {
+          // 图片上传错误的回调
+        },
+        customInsert: (insertImg, result, editor) => {
+          // 图片上传成功，插入图片的回调
+          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
+          // console.log(result.data[0].url)
+          //insertImg()为插入图片的函数
+          //循环插入图片
+          // for (let i = 0; i < 1; i++) {
+          // console.log(result)
+          let url = result.data.url;
+          insertImg(url);
+          // }
+        }
+      };
+      this.editor.customConfig.onchange = html => {
+        this.info_ = html; // 绑定当前逐渐地值
+        this.$emit("change", this.info_); // 将内容同步到父组件中
+      };
+      // 创建富文本编辑器
+      this.editor.create();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.editor {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+  z-index: 0;
+  /deep/ .toolbar {
+    border: 1px solid #ccc;
+    position: absolute;
+    z-index: 100000;
+    width: 98.5%;
+    background: #fff;
+    height: 32px;
+	top: -33px;
+	display: none;
+  }
+  /deep/ .text {
+    // border: 1px solid #ccc;
+    // min-height: 500px;
+	height: calc(100% - 32px);
+
+    // margin-top:52px;
+        // top: 52px;
+  }
+  // overflow-y: scroll;
+  // .w-e-toolbar{
+  //   position: fixed;
+  //   width: 100%;
+  //   background: #fff;
+  //   height: 52px;
+  // }
+
+}
+.editor:hover .toolbar{
+	display: flex;
+}
+</style>

src/views/anscard/Index.vue

@@ -34,6 +34,7 @@
 					 position:relative;border:solid 1px black;
 					 width: 100%;
 					 height: 100%;
+					 // overflow: hidden;
 				}
 				.item{
 					position: absolute;
@@ -230,6 +231,9 @@
 	.content_box{
 		top:20mm;left:15mm;width:180mm;height:257mm;position:absolute;
 	}
+	.w-e-text{
+		min-height: auto !important;
+	}
 </style>
 <template>
   <section class="content">
@@ -357,12 +361,12 @@
 								width: item.w+'mm',
 								height: item.h+'mm',
 								left: item.x+'mm',
-								top: (item.y-5)+'mm',
+								top: (item.y)+'mm',
 								position:'absolute'
 							}"> 
 								<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 class="obj" v-if='paper.sub[i].type==2'> 
 									<div v-for='sub in paper.sub[i].list' class="tk">
 										<span class="tm_id" :style="{
 											left:(sub.x-6)+'mm',
@@ -376,10 +380,11 @@
 										}"></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 class="obj" v-else-if='paper.sub[i].type==3'>
+									<Editor :value='paper.sub[i].option.id'/>
+									<!-- <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;">
+								<div class="obj" v-else-if='paper.sub[i].type==4' 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>
@@ -391,15 +396,15 @@
 										top: opt.y+'mm'
 									}">{{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>
+								<div class="obj" v-else-if='paper.sub[i].type==5'>
+									<span class="tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;">{{paper.sub[i].id}}.</span>
 									<ul class="words">
-										<li v-for='num in paper.sub[i].words'>
+										<li v-for='num in paper.sub[i].end' v-if='num>=paper.sub[i].start'>
 											<span v-if='num%100 == 0'>{{num}}</span>
 										</li>
 									</ul>
 								</div>
-								<div class="obj" v-else-if='paper.sub[i].title=="英语作文题"'>
+								<div class="obj" v-else-if='paper.sub[i].type==6'>
 									<span class="tm_id" style="top: 7mm;">{{paper.sub[i].id}}.</span>
 									<ul class="english">
 										<li v-for='num in paper.sub[i].rows'>
@@ -548,13 +553,16 @@
 	    <el-button type="primary" @click="addPaper">添 加</el-button>
 	  </span>
 	</el-dialog>
+	
   </section>
 </template>
 <script>
 import Page from "../../components/Page";
+import Editor from "../../components/fuEditor/index1";
+import { max } from "moment";
 export default {
   components: {
-    Page,
+    Page,Editor
   },
   data() {
     return {
@@ -629,7 +637,12 @@ export default {
   watch:{
 	  "paper.stdSujQnoPoints":{
 		  handler(value){
-			  
+			  if(value.length <= 1)return
+			  var arr=value.filter(item=>item.pno == this.cur_page)
+			  if(arr.length <= 0){
+				  this.cur_page--
+				  this.paper_page.pop()
+			  }
 		  },
 		  deep:true
 	  },
@@ -690,16 +703,24 @@ export default {
 			}
 			return
 		}
-		var height=sub[i].h,item={...list[i]}
-		sub.splice(i,1)
-		list.splice(i,1)
+		
+		var height=sub[i].h,cur={...list[i]}
+
+		if(cur.type == 5){
+			list=list.filter(item=>item.id!=cur.id)
+		}else{
+			sub.splice(i,1)
+			list.splice(i,1)
+		}
+	
 		sub.forEach((item,index)=>{
-			if(index >= i){
-				item.y=item.y-height-8
+			if(index >= i){	
+				item.y=sub[index-1].y+sub[index-1].h+8
+				item.pno=sub[index-1].pno
 			}
 		})
 		if(i>=sub.length-1){
-			if(item.title == '填空题'){
+			if(cur.type == 2){
 				this.addForm.start-=item.list.length
 			}else{
 				this.addForm.start--
@@ -708,7 +729,7 @@ export default {
 		if(this.paper.objAnsPoints.length == 0 && this.paper.stdSujQnoPoints.length == 0){
 			this.addForm.start=1
 		}
-		
+		this.changpage()
 	},
 	createList(){
 		let s=this.addForm.start,e=this.addForm.end
@@ -790,6 +811,7 @@ export default {
 				this.paper.sub.push({
 					title:'填空题',
 					list:list,
+					type:2
 					
 				})
 				this.list=[]
@@ -841,7 +863,7 @@ export default {
 						let x=index==1?6:1
 						this.paper.stdSujQnoPoints.push({
 							x:sub[i].x,
-							y:sub[i].y+sub[i].h+x,
+							y:sub[i].y+sub[i].h+8,
 							w:sub[i].w,
 							h:50,
 							pno:this.cur_page
@@ -850,7 +872,7 @@ export default {
 					this.paper.sub.push({
 						title:index==0?'解答题':'',
 						option:item,
-						type:'解答题'
+						type:3
 					})
 				})
 				this.list=[]
@@ -896,7 +918,8 @@ export default {
 				}
 				this.paper.sub.push({
 					title:'选做题',
-					list:tihao
+					list:tihao,
+					type:4
 				})
 				this.addForm.end=end
 				break;
@@ -904,38 +927,81 @@ export default {
 				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
+				var max_height,cur_obj={}
 				if(sub.length>0){
 					let i=sub.length-1
-					this.paper.stdSujQnoPoints.push({
+					cur_obj={
 						x:sub[i].x,
 						y:sub[i].y+sub[i].h+8,
 						w:sub[i].w,
 						h:height,
 						pno:this.cur_page
-					})
+					}
 				}
 				else if(obj.length>0 ){
 					let i=obj.length-1
-					this.paper.stdSujQnoPoints.push({
+					cur_obj={
 						x:obj[i].x,
 						y:obj[i].y+obj[i].h+8,
 						w:obj[i].w,
 						h:height,
 						pno:this.cur_page
-					})
+					}
 				}else{
 					let dft={...this.dft}
 					dft.h=height
 					dft.pno=this.cur_page
-					this.paper.stdSujQnoPoints.push(dft)
+					cur_obj=dft	
 				}
-				
+				max_height=this.paper.stdPoints[1].y-cur_obj.y-31
+				let real_row=Math.floor((max_height-10)/9.5)
+				cur_obj.h=max_height
+				this.paper.stdSujQnoPoints.push(cur_obj)
 				this.paper.sub.push({
 					title:'语文作文题',
-					words:row*20,
+					type:5,
+					// words:row*20,
+					start:1,
+					end:real_row*20,
 					id:this.addForm.start
 				})
-				
+				if(row > real_row){
+					let page_row=Math.floor((this.paper.stdPoints[1].y-36)/9.5)  //一页的行数
+					let pages=Math.ceil((row-real_row)/page_row)
+					let start=real_row*20+1,end,h
+					for(let i=1;i<=pages;i++){
+						this.cur_page++
+						this.paper_page.push({
+							pno:this.cur_page,
+							bin:this.decToBin4(this.cur_page).split('')
+						})
+						if(i == pages){
+							end=row*20
+						}else{
+							end=start+page_row*20-1
+						}
+						h=page_row*9.5
+						this.paper.sub.push({
+							title:'',
+							type:5,
+							// words:row*20,
+							start:start,
+							end:end,
+							id:this.addForm.start
+						})
+						start=end+1
+						
+						let l=sub.length-1
+						this.paper.stdSujQnoPoints.push({
+							x:sub[l].x,
+							y:5,
+							w:sub[l].w,
+							h:h+15,
+							pno:this.cur_page
+						})
+					}
+					
+				}
 				this.addForm.end=this.addForm.start
 				break;
 			case 6:
@@ -971,11 +1037,11 @@ export default {
 				this.paper.sub.push({
 					title:'英语作文题',
 					rows:rows,
-					id:this.addForm.start
+					id:this.addForm.start,
+					type:6
 				})
 				
 				this.addForm.end=this.addForm.start
-				console.log(this.paper)
 				break;
 		}
 		this.addForm.start=Number(this.addForm.end)+1
@@ -991,9 +1057,8 @@ export default {
 						  let down_point=this.paper.stdPoints[1]
 						  let s=-1
 						  for(let i=0;i<value.length;i++){
-							  console.log(value[i].y,233)
-							  if((value[i].y+value[i].h) >= (down_point.y-20)){
-								    console.log(i)
+							  if((value[i].y+value[i].h) >= (down_point.y-10)){
+								  
 							  		s=i
 							  		this.cur_page++
 							  		this.paper_page.push({
@@ -1013,7 +1078,7 @@ export default {
 								  item.y=value[index-1].y+value[index-1].h+1
 							  }
 						  })
-						  console.log(value)
+			this.changpage()
 		}
 	},
 	calcXY(){
@@ -1071,7 +1136,7 @@ export default {
 		}
 		
 		this.list=[]
-		console.log(dft)
+		
 	},