edu-uniapp/pages/aiCt/index.vue

<template>
	<view class="content">
		<view class="title">
			阶段
		</view>
		<view>
			<view 
				v-for="(item, index) in schoolTypeList" 
				 @click="selectSchoolType(item)"
				:key="index" 
				:class="{title_name: true, 'on': item.code === selectSchoolTypeId}">
				{{item.value}}
			</view>
		</view>
		
		<view class="title">
			年级
		</view>
		<view>
			<view 
				v-for="(item, index) in gradeTypeList" 
				@click="selectGradeType(item)"
				:class="{title_name: true, 'on': item.code === selectGradeTypeId}"
				:key="index" class="title_name">
				{{item.value}}
			</view>
		</view>
		
		<view class="title">
			科目
		</view>
		<view>
			 <view
			   v-if="subjectList && subjectList.length > 0"
			   v-for="(item, index) in subjectList"
			   :class="{title_name: true, 'on': item.id === selectSubjectId}"
			    @click="selectSubject(item)"
				:key="index" >
				{{item.name}}
			</view> 
			<view style="line-height: 100px; text-align: center;color: red">{{errorMsg}}</view>
		</view>
		
		<view class="title">
			知识点
		</view>
		<view>
			<!-- :check-strictly="true" -->
			 <ly-tree 
			  :tree-data="languagePointsList" 
				:ready="ready"
				@check-change="handleCheckChange"
				
				:show-checkbox="true"
				node-key="value" 
				:props="props"
				:emptyText="emptyText"
				ref="languagePointsTree"
				@node-expand="handleNodeExpand" 
				@node-click="handleNodeClick">
			</ly-tree> 
		</view>
		
		<view class="title">
			已选中测试知识点
		</view>
		
		<view style="margin-top: 10upx;">
			<uni-tag 
			 v-for="(item, index) in selectLanguagePointsNameArray"
			 :key="index"
			 :text="item.label"></uni-tag>
		</view> 
		
		<view class="ai_btn">
			<button
			@click="clearSelectValue"
			 class="ai_btn_item"
			 type="warn">取消</button>
			 
			<button 
			 type="primary"
			 @click="createCtPaper"
			 class="ai_btn_item">确定</button>
		</view>
	</view>
</template>

<script>
	import {getQueryString} from '../../utils/common.js'
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	//import { mapGetters, mapState } from 'vuex'
	export default {
		components: {LyTree, uniTag},
		data() {
			return {
				
			   props: {
				   label(data, node) {
				        return node.data.label
				    },
				 children: 'children'
			   },
			   errorMsg: '',
			   treeData: [],
			   selectSubjectId: 0,
			   selectSchoolTypeId: 0,
			   selectGradeTypeId: 0,
			   ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
			   subjectList: [],
			   emptyText: '',
			   selectLanguagePointsNameArray: [],
			   languagePointsList: [],
			   schoolTypeList: [],
			   gradeTypeList: [],
			   selectLanguagePointsList: [], //选中的知识点集合
			   languagePointsList: []
			    
			}
		},
				
		onLoad(params) {
			// 获取二维码链接参数
			let paramValue = getQueryString('schoolId')
			if (paramValue) {
				let fromSchoolId = parseInt(paramValue)
				this.$store.commit('paper/updateFromSchoolId', fromSchoolId)
			}
			this.getData()
		},
		
		watch: {
			'subjectList' (val) {
				if (val.length > 0) {
					this.errorMsg = ''
				}
			},
			
			'languagePointsList' (val) {
				if (val.length > 0) {
					this.emptyText = ''
				}
			}
		},
			
		methods: {
			selectSchoolType (item) {
				this.selectSchoolTypeId = item.code
				this.selectGradeTypeId = 0
				this.selectSubjectId = 0
				this.languagePointsList = []
				this.selectLanguagePointsList = []
				this.gradeTypeList = []
			    let params = {schoolTypeValue: item.code}
				
				this.$httpApi.get('/front/dict/getGradeTypeListBySchoolTypeValue', params)
				   .then(response => {
					   if (response.code === 1) {
					    this.gradeTypeList = response.data
					   }
				}) 
			},
			
			selectGradeType (item) {
				this.selectGradeTypeId = item.code
				this.selectSubjectId = 0
				this.languagePointsList = []
				this.subjectList = []
				this.selectLanguagePointsList = []
				let params = {gradeType: item.code}
				this.$httpApi.get('/front/subject/getListByGradeType', params)
				   .then(response => {
					   if (response.code === 1) {
					     this.subjectList = response.data
					   }
				}) 
			},
			
		    selectSubject (subject) {
			  this.selectSubjectId = subject.id
			  this.selectLanguagePointsNameArray = []
			  this.loadLanguagePointsList()
		    },
				  
			// 清除form 表单数据
			clearSelectValue () {
				this.selectSchoolTypeId = 0
				this.selectGradeTypeId = 0
				this.selectSubjectId = 0
				this.$refs.languagePointsTree.setCheckedKeys([]);
			},
			
			getData () {
				this.$httpApi.get('/front/aiCt/getCtSelectValue', {})
				 .then(res => {
					let result = res.data
					this.schoolTypeList = result.schoolTypeList
					this.gradeTypeList = result.gradeTypeList
					this.selectSchoolTypeId = result.selectSchoolTypeId
					this.selectGradeTypeId = result.selectGradeTypeId
					this.subjectList = result.subjectList
					if (this.subjectList.length === 0) {
						this.errorMsg = '暂无该年级学习科目'
					} 
					this.selectSubjectId = result.selectSubjectId
					this.loadLanguagePointsList()
				})
			},
			
			 // 加载科目知识点
		    loadLanguagePointsList () {
					
				let params = {
					gradeType: this.selectGradeTypeId,
					subjectId: this.selectSubjectId
				}
				this.$httpApi.get('/front/languagePoints', params)
				 .then(response => {
					this.languagePointsList = response.data
				    this.ready = true
					console.log(this.languagePointsList)
					if (!this.languagePointsList) {
						this.emptyText = '暂无该科目知识点'
					} else {
						this.emptyText = ''
					}
				})
		    },
			
			createCtPaper () {
				if (this.selectGradeTypeId === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择年级'
					})
				    return false
				}
				
				if (this.selectSubjectId === 0) {
				   uni.showToast({
				  	  icon: 'none',
				  	  title: '请选择科目'
				    });	
				    return false
				}
				
				// 获取所有选择子节点 知识点
				let checkedNodes = this.$refs.languagePointsTree.getCheckedNodes()
				this.selectLanguagePointsList = []
				for (let i = 0; i < checkedNodes.length; i++) {
				  this.selectLanguagePointsList.push(checkedNodes[i].value)
				}
				
			//	console.log("this.selectLanguagePointsList: " + this.selectLanguagePointsList)
				if (this.selectLanguagePointsList.length === 0) {
				  uni.showToast({
					  icon: 'none',
					  title: '请至少选择一个知识点'
				  });	
				  return false
				}
				
				this.generatePaper()
			},
			
			generatePaper () {
				uni.showLoading({
				    title: '正在加载试卷试题...'
				})
				let form = {
				  subjectId: this.selectSubjectId,
				  schoolType: this.selectSchoolTypeId,
				  gradeType: this.selectGradeTypeId,
				  languagePointsList: this.selectLanguagePointsList
				}
				this.$httpApi.post('/front/aiCt/createAiCtPaper', form)
				.then(response => {
				  if (response.code === 1) {
					let paperInfo = response.data
					paperInfo.languagePointsList = this.selectLanguagePointsList
					this.$store.commit('paper/updatePaperInfo', paperInfo)
					uni.hideLoading()
					uni.navigateTo({
					    url: 'exam'
					})
				  } else {
					uni.showToast({
						icon: 'none',
						title: response.message
					})
				  }
				})
			},
			
			handleCheckChange(data, checked) {
				if (data.checked) {
				  this.selectLanguagePointsNameArray.push({
					id: data.data.value,
					label: data.data.label
				  })
				} else {
				  for(let i in this.selectLanguagePointsNameArray) {
					let item = this.selectLanguagePointsNameArray[i]
					if (item.id === data.data.value) {
					  this.selectLanguagePointsNameArray.splice(i, 1)
					}
				  }
				}
			       // console.log(data, checked, indeterminate);
			},
			// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj));
			},
			
			handleNodeExpand(obj) {
				console.log('handleNodeExpand', JSON.stringify(obj));
			}
		}
	}
</script>

<style lang="scss">
	
	.uni-tag {
		height: 119upx;
		margin: 10upx;
	}
   .content {
	   padding: 10px;
	   margin: 2%;
	   width: 90%;
	   height: 90%;
	   display: flex;
	   flex-direction: column;
	   .on {
			background: #409eff;
			color: #fff;
			border: 1px solid #409eff;
        }	
		.on:hover {
			background: #409eff;
			color: #fff;
			border: 1px solid #409eff;
		}
   }
   
   .ly-tree-node__label {
       font-size: 16px !important;
   }
   
   .title {
	   font-size: 22px;
	   font-weight: bold;
   }
   
   .title_name {
	   border-radius: 120rpx;
	   cursor: pointer;
	   color: #cacaca;
	   margin: 15px 5px 10px 12px;
	   padding: 8px;
	   display: block;
	   min-width: 70px;
	   line-height: 40px;
	   float: left;
	   text-align: center;
	   border: 1px solid #d0d0d0;
   }
   .ai_btn {
	   display: inline-block;
	   float: right;
	   line-height: 40px;
	   position: relative;
	   left: 10%;
   }
   .ai_btn_item {
	   width: 100px;
	   float: left;
	   line-height: 50px;
	   margin-left: 20px;
	   margin-top: 20px;
   }
</style>