zhihuixiaoyuan2-ui/work/pages/examine/addcourse.vue

<template>
	<view class="course">
		<view class="cour_top">
			<view class="f17 co16 fw mb6">请认真完善以下课程表所需内容！</view>
			<view class="f15 coa">填写完成后可进行修改。</view>
		</view>
		<uni-forms ref="form" :rules="rules" :modelValue="datainfo">
			<view class="cour_box">
				<view class="list">
					<view class="line bg1"></view>
					<view class="listr">
						<uni-forms-item label="学校名称" required name="schoolName">
							<view class="f16  flex1" :class="datainfo.schoolName ? 'co16' : 'coa'">{{ datainfo.schoolName || '请选择学校名称' }}</view>
							<view class="rimg"><image :src="rimg" class="rimgs"></image></view>
						</uni-forms-item>
						<!-- <picker range-key="dictLabel"  :value="xxindex" :range="schoolval" @change="bindDateChangea">
							
						</picker> -->
						<picker range-key="dictLabel"  :value="bjindex" :range="classval" @change="bindDateChangeb">
							<uni-forms-item label="班级名称" required name="className">
								<view class="f16  flex1" :class="datainfo.className ? 'co16' : 'coa'">{{ datainfo.className || '请选择班级名称' }}</view>
								<view class="rimg"><image :src="rimg" class="rimgs"></image></view>
							</uni-forms-item>
						</picker>
						<picker range-key="dictLabel"  :value="xqindex" :range="week" @change="bindDateChangec">
							<uni-forms-item label="时间(星期)" required name="week">
								<view class="f16  flex1" :class="weekname ? 'co16' : 'coa'">{{ weekname || '请选择时间(星期)' }}</view>
								<view class="rimg"><image :src="rimg" class="rimgs"></image></view>
							</uni-forms-item>
						</picker>
					</view>
				</view>

				<view class="list_tit">课程信息</view>
				
				<view class="list" v-for="(ite,idx) in timelist" :key="idx">
					<view class="line bg2"></view>
					<view class="listr">
						<view class="flexc flex1" @click="getChose(ite.val)">
							<picker range-key="dictLabel" :value="xqindex" :range="subject" @change="bindDateChanged">
								<uni-forms-item :label="ite.tit" name="subject">
									<block v-if="ite.val==1"><view class="tit" :class="datainfo.oneClass ? 'co16' : 'coa'">{{ datainfo.oneClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==2"><view class="tit" :class="datainfo.twoClass ? 'co16' : 'coa'">{{ datainfo.twoClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==3"><view class="tit" :class="datainfo.threeClass ? 'co16' : 'coa'">{{ datainfo.threeClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==4"><view class="tit" :class="datainfo.fourClass ? 'co16' : 'coa'">{{ datainfo.fourClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==5"><view class="tit" :class="datainfo.fiveClass ? 'co16' : 'coa'">{{ datainfo.fiveClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==6"><view class="tit" :class="datainfo.sixClass ? 'co16' : 'coa'">{{ datainfo.sixClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==7"><view class="tit" :class="datainfo.sevenClass ? 'co16' : 'coa'">{{ datainfo.sevenClass || '请选择课程名称' }}</view></block>
									<block v-if="ite.val==8"><view class="tit" :class="datainfo.eightClass ? 'co16' : 'coa'">{{ datainfo.eightClass || '请选择课程名称' }}</view></block>
									
									<view class="rimg"><image :src="rimg" class="rimgs"></image></view>
								</uni-forms-item>
							</picker>
							<!-- <view>删除</view> -->
						</view>
						<!-- <uni-forms-item :label="ite.tit" name="oneClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.oneClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item> -->
						<uni-forms-item label="授课教师" name="oneTeacher">
							<block v-if="ite.val==1"><uni-easyinput :inputBorder="false"  v-model="datainfo.oneTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==2"><uni-easyinput :inputBorder="false"  v-model="datainfo.twoTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==3"><uni-easyinput :inputBorder="false"  v-model="datainfo.threeTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==4"><uni-easyinput :inputBorder="false"  v-model="datainfo.fourTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==5"><uni-easyinput :inputBorder="false"  v-model="datainfo.fiveTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==6"><uni-easyinput :inputBorder="false"  v-model="datainfo.sixTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==7"><uni-easyinput :inputBorder="false"  v-model="datainfo.sevenTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							<block v-if="ite.val==8"><uni-easyinput :inputBorder="false"  v-model="datainfo.eightTeacher" placeholder="请输入授课教师姓名"></uni-easyinput></block>
							
						</uni-forms-item>
					</view>
				</view>
				<!-- <view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第二节课" name="twoClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.twoClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="twoTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.twoTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第三节课" name="threeClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.threeClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="threeTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.threeTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第四节课" name="fourClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.fourClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="fourTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.fourTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第五节课" name="fiveClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.fiveClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="fiveTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.fiveTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第六节课" name="sixClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.sixClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="sixTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.sixTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第七节课" name="sevenClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.sevenClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="sevenTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.sevenTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view>
				<view class="list">
					<view class="line bg2"></view>
					<view class="listr">
						<uni-forms-item label="第八节课" name="eightClass">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.eightClass" placeholder="请输入课程名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="授课教师" name="eightTeacher">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.eightTeacher" placeholder="请输入授课教师姓名"></uni-easyinput>
						</uni-forms-item>
					</view>
				</view> -->
				<view class="text">
					<uni-forms-item label="备注" name="remark" >
						<uni-easyinput type="textarea" :inputBorder="false"  v-model="datainfo.remark" placeholder="请输入备注内容，非必填项..."></uni-easyinput>
					</uni-forms-item>
				</view>
			</view>
			<view class="btnbox">
				<view class="btn btn1" @click="getSubmit">提交</view>
				<view class="btn btn2" @click="getRemove" v-if="pagetype=='update'">删除</view>
			</view>
			
		</uni-forms>
	</view>
</template>

<script>
// import tabSearch from "@/components/toptab/search.vue"
import {getDeptList,getselfList} from "@/api/mine/mine.js"
import {getCourseAddFn,getCoursePutFn,getCourseDelFn,getCourselistFn} from "@/api/work/index.js"
import {getDictionaryFn} from "@/api/mine/register.js"
export default {
	data() {
		return {
			rimg: require('@/static/images/wrimg.png'),
			datainfo: {
				"schoolId": "",
			  "schoolName": "",
			  "classId": "",
			  "className": "",
			  "week": "",//周几：1：周一，2：周二，3：周三，4：周四，5：周五
			  "oneClass": "",
			  "oneTeacher": "",
			  "twoClass": "",
			  "twoTeacher": "",
			  "threeClass": "",
			  "threeTeacher": "",
			  "fourClass": "",
			  "fourTeacher": "",
			  "fiveClass": "",
			  "fiveTeacher": "",
			  "sixClass": "",
			  "sixTeacher": "",
			  "sevenClass": "",
			  "sevenTeacher": "",
			  "eightClass": "",
			  "eightTeacher": "",
			  "remark":''
			},
			rules: {
				schoolName: { rules: [{ required: true, errorMessage: '请选择学校名称' }] },
				className: { rules: [{ required: true, errorMessage: '请选择班级名称' }] },
				week: { rules: [{ required: true, errorMessage: '请选择星期' }] },
			},
			schoolval: [],
			classval: [],
			week: [], //星期字典值
			subject:[],//学科
			xxindex: [],
			bjindex: [],
			xqindex: [],
			pagetype:'add',
			weekname:'',
			choseidx:'',
			timelist:[
				{tit:"第一节课",val:'1'},
				{tit:"第二节课",val:'2'},
				{tit:"第三节课",val:'3'},
				{tit:"第四节课",val:'4'},
				{tit:"第五节课",val:'5'},
				{tit:"第六节课",val:'6'},
				{tit:"第七节课",val:'7'},
				{tit:"第八节课",val:'8'},
			],
		};
	},
	watch:{
		
	},
	onLoad: function(e) {
		// var newObj=JSON.parse(decodeURIComponent(e.data))
		// this.pagetype=newObj.pagetype||'add';
		this.datainfo.schoolId=this.$store.state.user.schoolId||this.$store.state.user.deptId;;
		this.datainfo.schoolName=this.$store.state.user.schoolName||this.$store.state.user.deptName;
		this.getclassinfoFn();
		this.init()
	},
	methods: {
		init(){
			// 学科
			getDictionaryFn('sys_subject').then(res=>{
				if(res.code==200){
					this.subject = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
			// 星期
			getDictionaryFn('sys_week').then(res=>{
				if(res.code==200){
					this.week = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getselfList(id){
			var params={
				parentId:id,
			}
			params['params[role]']=this.$store.state.user.choseroles
			getselfList(params).then(res=>{
				if(res.code==200){
					var newArr=res.data;
					if(newArr&&newArr.length){
						this.classval = newArr.map(v => {
							return {
								dictLabel: v.deptName,
								dictValue: v.deptId
							}
						})
					}
				}else{
					this.$toast(res.msg)
				}
			})
		},
		// 学校列表
		getDeptListFn(){
			var params={
				parentId:0
			}
			getDeptList(0).then(res=>{
				if(res.code==200){
					this.schoolval = res.data.map(v => {
						return {
							dictLabel: v.deptName,
							dictValue: v.deptId
						}
					})
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getclassinfoFn(){
			var that=this;
			var roles=that.$store.state.user.choseroles;
			that.roles=roles;
			if(roles=='teacher'){
				var id=this.datainfo.schoolId;
				this.getselfList(id)
			}else if(roles=='parents'){
				this.$store.dispatch('GetInforoles').then(resd => {
					if(resd.code==200){
						var res=resd.data;
						if(res.user&&res.user.parentsStudent&&res.user.parentsStudent.length){
							this.classval = res.user.parentsStudent.map(v => {
								return {
									dictLabel: v.className,
									dictValue: v.classId,
									schoolName: v.schoolName
								}
							})
						}
					}
					
				})
			}else{
				// 学校
				that.datainfo.classId='';
				that.datainfo.className='';
				that.datainfo.schoolId=that.$store.state.user.deptId;
				that.datainfo.schoolName=that.$store.state.user.deptName;
				that.getselfList(0)
			}
		},
		// 班级
		getclassListFn(){
			getDeptList(this.datainfo.schoolId).then(res=>{
				if(res.code==200){
					this.classval = res.data.map(v => {
						return {
							dictLabel: v.deptName,
							dictValue: v.deptId
						}
					})
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getCourselistFn(){
			var params={
				schoolId:this.datainfo.schoolId,
				classId:this.datainfo.classId,
				week:this.datainfo.week
			}
			var that=this;
			getCourselistFn(params).then(res=>{
				if(res.code==200){
					if(res.rows.length){
						this.datainfo=res.rows[0];
						this.pagetype='update'
					}else{
						var obj={
							"oneClass": "",
							"oneTeacher": "",
							"twoClass": "",
							"twoTeacher": "",
							"threeClass": "",
							"threeTeacher": "",
							"fourClass": "",
							"fourTeacher": "",
							"fiveClass": "",
							"fiveTeacher": "",
							"sixClass": "",
							"sixTeacher": "",
							"sevenClass": "",
							"sevenTeacher": "",
							"eightClass": "",
							"eightTeacher": "",
						}
						Object.keys(obj).forEach(function (key) {
							that.datainfo[key]=''
						})
						this.pagetype='add'
					}
				}else{
					this.$toast(res.msg)
				}
			})
		},
		// 选择学校
		bindDateChangea(e) {
			var val=e.detail.value;
			var v=this.schoolval[val];
			var id=v.dictValue;
			if(this.datainfo.schoolId!=id){
				this.datainfo.schoolName=v.dictLabel;
				this.datainfo.schoolId=id;
				this.datainfo.className='';
				this.datainfo.classId='';
				this.getclassListFn(id);
			}
		},
		// 班级
		bindDateChangeb(e) {
			var val = e.detail.value;
			this.datainfo.className = this.classval[val].dictLabel;
			this.datainfo.classId = this.classval[val].dictValue;
			if(this.datainfo.schoolName&&this.datainfo.className&&this.datainfo.week){
				this.getCourselistFn()
			}
		},
		// 星期
		bindDateChangec(e){
			var val=e.detail.value;
			this.weekname=this.week[val].dictLabel
			this.datainfo.week=this.week[val].dictValue;
			if(this.datainfo.schoolName&&this.datainfo.className&&this.datainfo.week){
				this.getCourselistFn()
			}
		},
		// 学科
		bindDateChanged(e){
			var id=e.detail.value
			var val=this.subject[id].dictLabel
			
			var idx=this.choseidx;
			if(idx==1){
				this.datainfo.oneClass=val
			}else if(idx==2){
				this.datainfo.twoClass=val;
			}else if(idx==3){
				this.datainfo.threeClass=val;
			}else if(idx==4){
				this.datainfo.fourClass=val;
			}else if(idx==5){
				this.datainfo.fiveClass=val;
			}else if(idx==6){
				this.datainfo.sixClass=val;
			}else if(idx==7){
				this.datainfo.sevenClass=val;
			}else if(idx==8){
				this.datainfo.eightClass=val;
			}
		},
		getChose(idx){
			this.choseidx=idx;
		},
		getSubmit(){
			var that=this;
			this.$refs.form.validate().then(res => {
				var params=JSON.parse(JSON.stringify(this.datainfo))
				
				if(this.pagetype=='add'){
					getCourseAddFn(params).then(res=>{
						if(res.code==200){
							that.$toast("新增成功")
							setTimeout(function(){
							uni.$emit('refreshdatalis');
								that.$tab.reLaunch('/pages/work/index') 
							},1500)
						}else{
							that.$toast(res.msg)
						}
					})
				}else{
					getCoursePutFn(params).then(res=>{
						if(res.code==200){
							that.$toast("修改成功")
							setTimeout(function(){
							uni.$emit('refreshdatalis');
								that.$tab.reLaunch('/pages/work/index') 
							},1500)
						}else{
							that.$toast(res.msg)
						}
					})
				}
				// this.$tab.navigateTo(`/mine/pages/mine/success`)
			})
			
		},
		getRemove(){
			var that=this;
			uni.showModal({
				title: '确认删除',
				content: "是否确认删除",
				cancelText: '取消删除',
				confirmText: '确认删除',
				success: function(res) {
					if (res.confirm) {
						var id=that.datainfo.id;
						getCourseDelFn(id).then(res=>{
							if(res.code==200){
								that.$toast("删除成功")
								setTimeout(function(){
								uni.$emit('refreshdatalis');
									that.$tab.reLaunch('/pages/work/index') 
								},1500)
							}else{
								that.$toast(res.msg)
							}
						})
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});	
		}
	}
};
</script>

<style lang="scss" scoped>
.cour_top{padding: 60rpx 36rpx;}
.cour_box{padding: 0 36rpx;
	.list_tit{font-size: 32rpx;color: #161616;font-weight: 500;padding: 16rpx 0 24rpx;}
	.list{width: 100%;background: #FFFFFF;border-radius: 14rpx;box-sizing: border-box;margin-bottom: 24rpx;display: flex;align-items: stretch;
		.rimg{flex: 0 0 auto;margin-left: 12rpx;display: flex;align-items: center;justify-content: center;width: 40rpx;height: 40rpx;
			image{width: 12rpx;height: 20rpx;}
		}
		.line{width: 12rpx;border-radius: 14rpx 0 0 14rpx;opacity: 0.7;
			&.bg1{background: #fc733a;}
			&.bg2{background: #1f57e6;}
		}
		.listr{padding: 16rpx 32rpx 16rpx 36rpx;flex: 1;
			.tit{font-size: 32rpx;flex: 1;padding-left: 20rpx;}
		}
	}
}
.course /deep/ .uni-forms{flex: 1;}
.course /deep/ .uni-forms-item__label{flex: 0 0 auto;width: auto !important;font-size: 32rpx;font-weight: 500;
color: #161616;}
.course /deep/ .uni-forms .uni-forms-item{margin-bottom: 0;
		// &:last-of-type{margin-bottom: 0;border-bottom: 0;flex-direction: column;text-align: left;}
}
.course /deep/ .uni-forms .text .uni-forms-item{margin-bottom: 0;border-bottom: 0;flex-direction: column;text-align: left;}
.course /deep/ .uni-forms .uni-forms-item .uni-easyinput__content-textarea{border: 2rpx solid #CDCDCD;background-color: #FFFFFF;border-radius: 14rpx;padding: 32rpx 40rpx;font-size: 30rpx;margin: 0;min-height: 256rpx;box-sizing: border-box;
		}
.course /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.course /deep/ .uni-easyinput{flex: 1;text-align: left;}
.course /deep/ .uni-easyinput__placeholder-class{font-size: 30rpx;}
.course /deep/ .uni-easyinput__content-input{font-size: 30rpx;}
 .course /deep/ .uni-forms-item__error{margin-top:-20rpx;left: auto;right: 0;}
 .course /deep/ picker{width: 100%;}
.course{padding-bottom: 140rpx;
	.btnbox{position: fixed;left: 0;right: 0;bottom: 0;font-size: 34rpx;color: #FFFFFF;display: flex;align-items: center;z-index: 4;
	.btn{
		height: 100rpx;display: flex;align-items: center;justify-content: center;
		&.btn1{background-color: #1f57e6;flex: 1;}
		&.btn2{background-color: red;flex: 1;}
	}
		
	} 
}

 
</style>