spark-coach/pagesClass/addClassForm.vue

<template>
	<view class="content">
		<u-form :model="form" ref="form" label-width="140">
			<u-form-item label="班级名称" prop="name" required>
				<u-input v-model="form.name" placeholder="请输入班级名称" />
			</u-form-item>
			<u-form-item label="课程周期开始时间" prop="startDate" right-icon="arrow-right" required @click.native="startDateShow = true">
				<u-input v-model="form.startDate" placeholder="请选择课程周期开始时间" disabled @click="startDateShow = true" />
			</u-form-item>
			<u-form-item label="课程周期结束时间" prop="endDate" right-icon="arrow-right" required @click.native="endDateShow = true">
				<u-input v-model="form.endDate" placeholder="请选择课程周期结束时间" disabled @click="endDateShow = true" />
			</u-form-item>
			<u-form-item label="上课时间" prop="timeReqList" required label-position="top"></u-form-item>
			<u-swipe-action :index="index" v-for="(item, index) in form.timeReqList" :key="item.id" @click="deleteDate" :options="options">
				<u-form-item label=" " right-icon="arrow-right" @click.native="toSetDate(index)" label-width="0px">
					<text :style="{color: item.week ? '' :'#999999'}">{{item.week ? item.week + '&nbsp;&nbsp;' +item.startTime + '&nbsp;&nbsp;' +item.endTime : '请选择上课时间'}}</text>
				</u-form-item>
			</u-swipe-action>
			<u-form-item label=" " label-width="0px">
				<view style="display: flex; justify-content: space-around;">
					<u-button type="success" :ripple="true" size="medium" :custom-style="{backgroundColor: '#ff6e3e'}" @click="addDate">新增</u-button>
				</view>
			</u-form-item>
			<u-form-item label="归属场馆" prop="venueName" right-icon="arrow-right" required @click.native="venueShow = true">
				<u-input v-model="form.venueName" placeholder="请选择归属场馆" disabled @click="venueShow = true" />
			</u-form-item>
			<u-form-item label="地址">
				<u-input v-model="form.address" disabled placeholder="请输入地址" />
			</u-form-item>
			<u-form-item label="学生数量" prop="maxStudentCount" required>
				<u-input v-model="form.maxStudentCount" type="number" placeholder="请输入学生数量" />
			</u-form-item>
		</u-form>
		<u-popup v-model="classDate" mode="bottom" border-radius="30">
			<view class="dateForm">
				<u-form :model="selectForm" ref="selectForm" label-width="140">
					<u-form-item label="上课时间" prop="week" required>
						<u-radio-group v-model="selectForm.week">
							<u-radio v-for="(item, index) in weekList" :key="index" :name="item.name">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="上课时间" prop="startTime" right-icon="arrow-right" required @click.native="()=>{startTimeShow = true;timeType = 1}">
						<u-input v-model="selectForm.startTime" placeholder="请选择上课时间" disabled @click="()=>{startTimeShow = true;timeType = 1}" />
					</u-form-item>
					<u-form-item label="下课时间" prop="endTime" right-icon="arrow-right" required @click.native="()=>{startTimeShow = true;timeType = 2}">
						<u-input v-model="selectForm.endTime" placeholder="请选择下课时间" disabled @click="()=>{startTimeShow = true;timeType = 2}" />
					</u-form-item>
				</u-form>
				<u-button type="warning" :ripple="true" :custom-style="{...customStyle, marginTop: '15px'}" @click="setDate()">确定</u-button>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="startDateShow" :params="cycleParams" @confirm="setStartDate"></u-picker>
		<u-picker mode="time" v-model="endDateShow" :params="cycleParams" @confirm="setEndDate"></u-picker>
		<u-picker mode="time" v-model="startTimeShow" :params="startTimeParams" @confirm="setStartTime"></u-picker>
		<u-picker mode="selector" v-model="venueShow" :range="venueList" range-key="name" @confirm="setVenue"></u-picker>
		<view class="handle-fix-box">
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitForm()">保存</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'customStyle',
			])
		},
		data() {
			return {
				form: {
					name: '',
					startDate: '',
					endDate: '',
					address: '',
					venueId: '',
					venueName: '',
					address: '',
					maxStudentCount: '',
					timeReqList: [{
						week: '',
						startTime: '',
						endTime: '',
					}],
				},
				rules: {
					name: [{
						required: true,
						message: '请输入班级名称',
						trigger: 'change'
					}],
					startDate: [{
						required: true,
						message: '请选择课程周期开始时间',
						trigger: 'change'
					}],
					endDate: [{
						required: true,
						message: '请选择课程周期结束时间',
						trigger: 'change'
					}],
					timeReqList: [{
						type: 'array',
						required: true,
						message: '请选择上课时间',
						trigger: 'change'
					}],
					venueName: [{
						required: true,
						message: '请选择归属场馆',
						trigger: 'change'
					}],
					maxStudentCount: [{
						required: true,
						message: '请输入学生数量',
						trigger: 'change'
					}],
				},
				selectIndex: 0,
				selectForm: {
					week: '',
					startTime: '',
					endTime: '',
				},
				classDate: false,
				weekList: [{
						name: '周一'
					},
					{
						name: '周二'
					},
					{
						name: '周三'
					},
					{
						name: '周四'
					},
					{
						name: '周五'
					},
					{
						name: '周六'
					},
					{
						name: '周日'
					},
				],
				startDateShow: false,
				endDateShow: false,
				cycleParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTimeShow: false,
				startTimeParams: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},
				venueShow: false,
				venueList: [],
				options: [{
					text: '删除',
					style: {
						color: '#fa3534'
					}
				}]
			}
		},
		onLoad() {
			NET.request(API.getVenueList, {
				page: 1,
				size: 10000,
			}, 'POST').then(res => {
				this.venueList = res.data.row
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onShow() {},
		methods: {
			//  弹出设置时间
			toSetDate(index) {
				this.selectIndex = index
				this.selectForm = {
					week: this.form.timeReqList[index].week,
					startTime: this.form.timeReqList[index].startTime,
					endTime: this.form.timeReqList[index].endTime,
				}
				this.classDate = true
			},
			//  删除时间
			deleteDate(index, index1) {
				if (index1 == 0) {
					this.form.timeReqList.splice(index, 1);
				}
			},
			//  新增时间
			addDate() {
				this.form.timeReqList.push({
					week: '',
					startTime: '',
					endTime: '',
				})
			},
			//  设置课程周期开始时间
			setStartDate(date) {
				this.form.startDate = date.year + '-' + date.month + '-' + date.day
			},
			//  设置课程周期结束时间
			setEndDate(date) {
				this.form.endDate = date.year + '-' + date.month + '-' + date.day
			},
			//  设置上课时间
			setStartTime(date) {
				if (this.timeType == 1) {
					this.selectForm.startTime = date.hour + ':' + date.minute + ':' + date.second
				} else {
					this.selectForm.endTime = date.hour + ':' + date.minute + ':' + date.second
				}
			},
			//  设置上课时间
			setDate() {
				this.form.timeReqList[this.selectIndex] = {
					week: this.selectForm.week,
					startTime: this.selectForm.startTime,
					endTime: this.selectForm.endTime,
				}
				this.classDate = false
			},
			//  设置场馆
			setVenue(data) {
				this.form.venueId = this.venueList[data[0]].id
				this.form.venueName = this.venueList[data[0]].name
				this.form.address = this.venueList[data[0]].address
			},
			//  提交表单
			submitForm() {
				this.$refs.form.validate(valid => {
					if (valid) {
						NET.request(API.submitClassForm, {
							...this.form,
						}, 'POST').then(res => {
							uni.removeStorageSync({
								key: 'extraLessonsUserList'
							})
							this.$refs.uTips.show({
								title: '提交成功',
								type: 'success',
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}).catch(error => {
							this.$refs.uTips.show({
								title: error.message,
								type: 'warning',
							})
						})
					}
				});
			},
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		padding: 0 15px 60px 15px;
		box-sizing: border-box;

		.dateForm {
			padding: 20px;
		}
	}
</style>