小题编辑的选择知识点问题

TEAMModelOS/ClientApp/src/common/BaseMyCanvas.vue

@@ -1,32 +1,36 @@
 <template>
-    <div id="baseCanvas">
-        <BaseCanvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
-        <div class="canvas-tools animated fadeIn">
-            <span class="canvas-tools-item" style="border-radius: 15px 0 0 0;">
+	<div id="baseCanvas" @mouseover="mouseOver" @mouseleave="mouseLeave">
+		<BaseCanvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
+		<div class="canvas-tools animated fadeIn" ref="canvasTools">
+			<span class="canvas-tools-item" style="border-radius: 15px 0 0 0;">
 				<Poptip trigger="hover">
 					<div class="flex-center">
 						<Icon type="md-brush" />
 						<span>粗细</span>
 					</div>
-				   <div slot="content" class="widthDotBox">
-					   <span class="widthDot widthDot1" :style="{ backgroundColor: (activeDot === 5 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(5,$event)"></span>
-					   <span class="widthDot widthDot2" :style="{ backgroundColor: (activeDot === 10 ? 'red' : '#827a7a')}"  @click="onSelectWriteWidth(10,$event)"></span>
-					   <span class="widthDot widthDot3" :style="{ backgroundColor: (activeDot === 15 ? 'red' : '#827a7a')}"  @click="onSelectWriteWidth(15,$event)"></span>
-					   <span class="widthDot widthDot4" :style="{ backgroundColor: (activeDot === 20 ? 'red' : '#827a7a')}"  @click="onSelectWriteWidth(20,$event)"></span>
-				   </div>
+					<div slot="content" class="widthDotBox">
+						<span class="widthDot widthDot5" :style="{ backgroundColor: (activeDot === 2 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(2,$event)"></span>
+						<span class="widthDot widthDot1" :style="{ backgroundColor: (activeDot === 5 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(5,$event)"></span>
+						<span class="widthDot widthDot2" :style="{ backgroundColor: (activeDot === 10 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(10,$event)"></span>
+						<span class="widthDot widthDot3" :style="{ backgroundColor: (activeDot === 15 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(15,$event)"></span>
+						<span class="widthDot widthDot4" :style="{ backgroundColor: (activeDot === 20 ? 'red' : '#827a7a')}" @click="onSelectWriteWidth(20,$event)"></span>
+					</div>
 				</Poptip>
 			</span>
 			<span class="canvas-tools-item" v-if="!isStudent">
 				<Poptip trigger="hover">
 					<div class="flex-center">
-						<Icon type="md-color-palette" :color="activeColor"/>
+						<Icon type="md-color-palette" :color="activeColor" />
 						<span>画笔颜色</span>
 					</div>
-				   <div slot="content" class="widthDotBox">
-					   <span class="color-item color-item-black" :style="{ borderColor: (activeColor === 'black' ? 'black' : 'transparent')}" @click="onSelectWriteColor('black',$event)"></span>
-					   <span class="color-item color-item-blue" :style="{ borderColor: (activeColor === 'blue' ? 'black' : 'transparent')}"  @click="onSelectWriteColor('blue',$event)"></span>
-					   <span class="color-item color-item-red" :style="{ borderColor: (activeColor === 'red' ? 'black' : 'transparent')}"  @click="onSelectWriteColor('red',$event)"></span>
-				   </div>
+					<div slot="content" class="widthDotBox">
+						<span class="color-item color-item-black" :style="{ borderColor: (activeColor === 'black' ? 'black' : 'transparent')}"
+						 @click="onSelectWriteColor('black',$event)"></span>
+						<span class="color-item color-item-blue" :style="{ borderColor: (activeColor === 'blue' ? 'black' : 'transparent')}"
+						 @click="onSelectWriteColor('blue',$event)"></span>
+						<span class="color-item color-item-red" :style="{ borderColor: (activeColor === 'red' ? 'black' : 'transparent')}"
+						 @click="onSelectWriteColor('red',$event)"></span>
+					</div>
 				</Poptip>
 			</span>
 			<span class="canvas-tools-item" @click="canvasClear()">
@@ -37,241 +41,256 @@
 				<Icon type="md-close" />
 				<span>关闭</span>
 			</span>
-			<span class="canvas-tools-item" @click="downloadSignImg()"  style="border-radius:  0 15px 0 0 ;">
+			<span class="canvas-tools-item" @click="downloadSignImg()" style="border-radius:  0 15px 0 0 ;">
 				<Icon type="md-cloud-download" />
 				<span>保存</span>
 			</span>
-        </div>
-    </div>
+		</div>
+	</div>
 </template>
 <script>
-import BaseCanvas from './BaseCanvas.vue';
-export default {
-    components:{BaseCanvas},
-	props:{
-		isStudent:{
-			type:Boolean,
-			default:false
-		},
-		bgImg:{
-			type:String,
-			default:''
-		},
-		writeColor:{
-			type:String,
-			default:'black'
-		}
-	},
-    data(){
-        return {
-            value: null,
-			activeDot:5,
-			activeColor:'black',
-            options:{
-                isDpr: false,       //是否使用dpr兼容高分屏 [Boolean] 可选
-                lastWriteSpeed: 1,  //书写速度 [Number] 可选
-                lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
-                lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
-                lineJoin: 'bevel',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
-                canvasWidth: 1200, //canvas宽高 [Number] 可选
-                canvasHeight: 480,  //高度  [Number] 可选
-                isShowBorder: true, //是否显示边框 [可选]
-                bgColor: '#ebebeb', //背景色 [String] 可选
-                borderWidth: 2, // 网格线宽度  [Number] 可选
-                borderColor: "#7c7c7c", //网格颜色  [String] 可选
-                writeWidth: 5, //基础轨迹宽度  [Number] 可选
-                writeColor: '#000', // 轨迹颜色  [String] 可选
-                isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
-                imgType:'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
-            }
-        }
-    },
-	created() {
-		this.initBgImg()
-	},
-    methods:{
-		onChangeWriteColor(val){
-			this.options.writeColor = val
-		},
-		
-		onSelectWriteColor(val){
-			console.log(val)
-			this.options.writeColor = val
-			this.activeColor = val
+	import BaseCanvas from './BaseCanvas.vue';
+	export default {
+		components: {
+			BaseCanvas
 		},
-		
-		onChangeBgColor(val){
-			this.options.bgColor = val
-		},
-		
-		onSelectWriteWidth(val){
-			console.log(val)
-			this.options.writeWidth = val
-			this.activeDot = val
+		props: {
+			isStudent: {
+				type: Boolean,
+				default: false
+			},
+			bgImg: {
+				type: String,
+				default: ''
+			},
+			writeColor: {
+				type: String,
+				default: 'black'
+			}
 		},
-		
-		closeModal(){
-			this.$emit('onCloseModal')
+		data() {
+			return {
+				value: null,
+				activeDot: 5,
+				activeColor: 'black',
+				options: {
+					isDpr: false, //是否使用dpr兼容高分屏 [Boolean] 可选
+					lastWriteSpeed: 1, //书写速度 [Number] 可选
+					lastWriteWidth: 2, //下笔的宽度 [Number] 可选
+					lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
+					lineJoin: 'bevel', //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
+					canvasWidth: 1200, //canvas宽高 [Number] 可选
+					canvasHeight: 480, //高度  [Number] 可选
+					isShowBorder: true, //是否显示边框 [可选]
+					bgColor: '#ebebeb', //背景色 [String] 可选
+					borderWidth: 2, // 网格线宽度  [Number] 可选
+					borderColor: "#7c7c7c", //网格颜色  [String] 可选
+					writeWidth: 5, //基础轨迹宽度  [Number] 可选
+					writeColor: '#000', // 轨迹颜色  [String] 可选
+					isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+					imgType: 'png' //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
+				}
+			}
 		},
-        /**
-         * 清除画板
-         */
-        canvasClear(){
-            this.$refs.SignCanvas.canvasClear();
+		created() {
 			this.initBgImg()
-        },
-		
-		initBgImg(){
-			if(this.bgImg){
-				this.$nextTick(() => {
-					var img = new Image()
-					img.setAttribute('crossOrigin', 'anonymous');
-					img.src = this.bgImg
-					img.onload = () => {
-						let renderWidth = img.width > 1200 ? 1200 : img.width
-						let renderHeight = renderWidth * (img.height / img.width)
-						this.options.canvasWidth = renderWidth
-						this.options.canvasHeight = renderHeight
-						setTimeout(() => {
-						    this.$refs.SignCanvas.context.drawImage(img,0,0,img.width,img.height,0,0,renderWidth,renderHeight);
-						},10)
-					}
-				})
-			}
 		},
+		methods: {
+			// 移入
+			mouseOver() {
+				this.$refs.canvasTools.style.display = 'flex'
+			},
+			// 移出
+			mouseLeave() {
+				this.$refs.canvasTools.style.display = 'none'
+			},
+			onChangeWriteColor(val) {
+				this.options.writeColor = val
+			},
+
+			onSelectWriteColor(val) {
+				console.log(val)
+				this.options.writeColor = val
+				this.activeColor = val
+			},
+
+			onChangeBgColor(val) {
+				this.options.bgColor = val
+			},
+
+			onSelectWriteWidth(val) {
+				console.log(val)
+				this.options.writeWidth = val
+				this.activeDot = val
+			},
+
+			closeModal() {
+				this.$emit('onCloseModal')
+			},
+			/**
+			 * 清除画板
+			 */
+			canvasClear() {
+				this.$refs.SignCanvas.canvasClear();
+				this.initBgImg()
+			},
 
-        /**
-         * 下载图片
-         */
-        async downloadSignImg(){
-			const img = await this.$refs.SignCanvas.saveAsImg();
-			this.$emit('onSaveCanvas',img)
-        },
+			initBgImg() {
+				if (this.bgImg) {
+					this.$nextTick(() => {
+						var img = new Image()
+						img.setAttribute('crossOrigin', 'anonymous');
+						img.src = this.bgImg
+						img.onload = () => {
+							let renderWidth = img.width > 1200 ? 1200 : img.width
+							let renderHeight = renderWidth * (img.height / img.width)
+							this.options.canvasWidth = renderWidth
+							this.options.canvasHeight = renderHeight
+							setTimeout(() => {
+								this.$refs.SignCanvas.context.drawImage(img, 0, 0, img.width, img.height, 0, 0, renderWidth, renderHeight);
+							}, 10)
+						}
+					})
+				}
+			},
 
-    },
-	mounted() {
-		this.activeColor = this.writeColor || 'black'
-		/* 如果有传背景图片 则接收后绘制作为Canvas的背景 */
-		
-	},
-	watch:{
-		writeColor:{
-			handler(n,o){
-				this.onSelectWriteColor(n)
+			/**
+			 * 下载图片
+			 */
+			async downloadSignImg() {
+				const img = await this.$refs.SignCanvas.saveAsImg();
+				this.$emit('onSaveCanvas', img)
 			},
-			immediate:true
+
+		},
+		mounted() {
+			this.activeColor = this.writeColor || 'black'
+			/* 如果有传背景图片 则接收后绘制作为Canvas的背景 */
+
+		},
+		watch: {
+			writeColor: {
+				handler(n, o) {
+					this.onSelectWriteColor(n)
+				},
+				immediate: true
+			}
 		}
 	}
-}
 </script>
 <style lang="less" scoped>
-* {
-    margin: 0;
-    padding: 0;
-}
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	#baseCanvas {
+		position: relative;
+	}
 
-#baseCanvas{
-	position: relative;
-}
-.sign-canvas{
-    display: block;
-    margin: 0 auto;
-}
+	.sign-canvas {
+		display: block;
+		margin: 0 auto;
+	}
 
-.canvas-tools{
-    position: absolute;
-	bottom: 0;
-	left: 50%;
-	transform:translate(-50%, 0);
-	display: flex;
-	background-color: #696969;
-	border-radius: 15px 15px 0 0;
-	
-	&-item{
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		color: #fff;
-		padding: 10px 20px;
-		font-size: 10px;
-		cursor: pointer;
-		
-		&:hover{
-			background-color: rgba(255,255,255,.6);
-			color: #000;
-		}
-		
-		.ivu-icon{
-			font-size: 20px;
-			margin-bottom: 5px;
-		}
-		
-		.ivu-poptip-title{
-			display: none;
-		}
-		
-		.widthDotBox{
+	.canvas-tools {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+		display: none;
+		background-color: #696969;
+		border-radius: 15px 15px 0 0;
+
+		&-item {
 			display: flex;
-			flex-direction: row;
-			justify-content: space-around;
+			flex-direction: column;
+			justify-content: center;
 			align-items: center;
-		}
-		
-		.widthDot{
-			display: inline-block;
-			width: 10px;
-			height: 10px;
-			border-radius: 50%;
-			background: #827a7a;
-			position: relative;
-			
-			
-			&2{
-				width: 15px;
-				height: 15px;
-			}
-			
-			&3{
-				width: 20px;
-				height: 20px;
+			color: #fff;
+			padding: 10px 20px;
+			font-size: 10px;
+			cursor: pointer;
+
+			&:hover {
+				background-color: rgba(255, 255, 255, .6);
+				color: #000;
 			}
-			&4{
-				width: 25px;
-				height: 25px;
+
+			.ivu-icon {
+				font-size: 20px;
+				margin-bottom: 5px;
 			}
-			&5{
-				width: 30px;
-				height: 30px;
+
+			.ivu-poptip-title {
+				display: none;
 			}
-		}
-		
-		.color-item{
-			display: inline-block;
-			width: 30px;
-			height: 20px;
-			background: #827a7a;
-			position: relative;
-			border-radius: 5px;
-			border: 2px solid transparent;
-			
-			&-black{
-				background-color: #000;
+
+			.widthDotBox {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-around;
+				align-items: center;
 			}
-			&-red{
-				background-color: #ff0000;
+
+			.widthDot {
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				border-radius: 50%;
+				background: #827a7a;
+				position: relative;
+
+
+				&2 {
+					width: 15px;
+					height: 15px;
+				}
+
+				&3 {
+					width: 20px;
+					height: 20px;
+				}
+
+				&4 {
+					width: 25px;
+					height: 25px;
+				}
+
+				&5 {
+					width: 5px;
+					height: 5px;
+				}
 			}
-			&-blue{
-				background-color: blue;
+
+			.color-item {
+				display: inline-block;
+				width: 30px;
+				height: 20px;
+				background: #827a7a;
+				position: relative;
+				border-radius: 5px;
+				border: 2px solid transparent;
+
+				&-black {
+					background-color: #000;
+				}
+
+				&-red {
+					background-color: #ff0000;
+				}
+
+				&-blue {
+					background-color: blue;
+				}
 			}
 		}
+
+		.flex-center {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+		}
 	}
-	
-	.flex-center{
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-}
 </style>

TEAMModelOS/ClientApp/src/view/evaluation/components/BaseChildList.vue

@@ -21,7 +21,8 @@
 		<!-- 添加子题弹窗 -->
 		<Modal v-model="editChildModal" width="1080" footer-hide class="">
 			<div class="modal-header" slot="header">编辑子题</div>
-			<BaseCreateChild @addFinish='onEditChildFinish' refId="childListEdit" :editItem="curItem"></BaseCreateChild>
+			<BaseCreateChild @addFinish='onEditChildFinish' refId="childListEdit" :editItem="curItem" :curPeriodIndex="curPeriodIndex"
+			 :curSubjectIndex="curSubjectIndex"></BaseCreateChild>
 		</Modal>
 	</div>
 </template>
@@ -36,7 +37,15 @@
 			childList: {
 				type: Array,
 				default: []
-			}
+			},
+			curPeriodIndex: {
+				type: Number,
+				default: 0,
+			},
+			curSubjectIndex: {
+				type: Number,
+				default: 0,
+			},
 		},
 		data() {
 			return {

TEAMModelOS/ClientApp/src/view/evaluation/components/BaseCreateChild.vue

@@ -178,7 +178,8 @@
 		},
 		created() {
 			this.getSchoolInfo();
-			
+			console.log(this.curPeriodIndex)
+			console.log(this.curSubjectIndex)
 		},
 		methods: {
 			getSchoolInfo() {
@@ -479,7 +480,7 @@
 				this.childList = editItem.children || [];
 				let schoolInfo = await this.$store.dispatch('user/getSchoolProfile');
 				this.schoolInfo = schoolInfo.school_base;
-
+				
 				this.stemContent = editItem.question;
 				this.relateFileList = editItem.repairResource || [];
 				this.optionsContent = editItem.option;
@@ -536,6 +537,12 @@
 				},
 				//immediate:true
 			},
+			curPeriodIndex:{
+				handler(newValue, oldValue) {
+					console.log('变了',newValue)
+				},
+				immediate:true
+			}
 		},
 	};
 </script>

TEAMModelOS/ClientApp/src/view/evaluation/components/BaseEditExercise.vue

@@ -99,7 +99,8 @@
 		<!-- 小题展示区域 -->
 		<div class="child-list-wrap" v-show="exersicesType === 'compose' && childList.length">
 			<IconText :text="'小题列表'" :color="'#00b8ff'" :icon="'md-list'"></IconText>
-			<BaseChildList :childList="childList" @onEditChildFinish="onEditChildFinish" @onDeleteChild="onDeleteChild"></BaseChildList>
+			<BaseChildList :childList="childList" @onEditChildFinish="onEditChildFinish" @onDeleteChild="onDeleteChild" :curPeriodIndex="exercisePeriod"
+			 :curSubjectIndex="exerciseSubject"></BaseChildList>
 		</div>
 
 		<div class="save-wrap display-flex">
@@ -760,6 +761,7 @@
 						.map((item) => item.id)
 						.indexOf(editItem.subjectId);
 				}
+				console.log('当前题目学段',this.exercisePeriod)
 				
 				this.isEdit = true;
 				this.exersicesDiff = editItem.level.toString() || "0";