sz-kjsxy-wx-new/components/applyForm/index.vue

<template>
	<view class="applyform">
		<u-form :model="submitForm" ref="submitForm" :label-width="140" :label-align="'left'" error-type="message">
			<block v-for="(item,index) in course_forms">
				<u-form-item :label="item.name" :prop="item.field"
					:required="item.rule?item.rule.indexOf('required')!==-1:false">
					<block v-if="item.edit_input==='text'">
						<u-input :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
					</block>
					<block v-else-if="item.edit_input==='radio'">
						<u-input :placeholder="item.help?item.help:'请输入'" v-model="item.value" :type="'select'" @click="showSelect(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='checkbox'">
						<checkbox-group @change="(e)=>{checkboxGroupChange(e,item)}">
							<label v-for="(checkboxitem, checkboxindex) in item.select_item">
								<checkbox :value="checkboxitem.value" />{{checkboxitem.value}}
							</label>
						</checkbox-group>
					</block>
					<block v-else-if="item.edit_input==='date'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'" @click="showDate(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='datetime'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'" @click="showDateTime(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='files'">
						<u-upload :action="action" :file-list="fileList" max-count="9"></u-upload>
					</block>
				</u-form-item>
			</block>
		</u-form>
		<view class="form-btn">
			<view @click="submit" type="primary">提交</view>
		</view>
		<!-- 单选 -->
		<u-picker @confirm="selectConfirm" v-model="selectShow" :range="selectList" range-key="value"
			mode="selector"></u-picker>
		<!-- 日期 -->
		<u-picker @confirm="dateConfirm" mode="time" v-model="dateShow" :params="dateParams"></u-picker>
		<!-- 日期时间 -->
		<u-picker @confirm="dateTimeConfirm" mode="time" v-model="dateTimeShow" :params="dateTimeParams"></u-picker>
		
	</view>
</template>

<script>
	// import { watch } from "vue"
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	export default {
		props: {
			course_forms: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				submitForm: {},
				now_fileld: 0, // 当前所操作的 filed index值 
				// 单选
				selectShow: false,
				selectList: [],
				// 多选
				checkbox_list: [],
				// 日期
				dateShow: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 日期时间
				dateTimeShow:false,
				dateTimeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				// 文件上传
				action:`${baseUrl}/api/mobile/upload-file`,
				fileList:[],
				rules:{},


			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		methods: {
			// 单选
			showSelect(item, index) {
				this.selectList = item.select_item
				this.now_fileld = index
				this.selectShow = true
			},
			selectConfirm(e) {
				this.course_forms[this.now_fileld]['value'] = this.selectList[e[0]].value
			},
			// 多选
			checkboxGroupChange(e, item) {
				if (e.detail.value.length > 0) {
					item.value = e.detail.value.join(",")
				}
			},
			// 日期
			showDate(item,index){
				this.now_fileld = index
				this.dateShow = true
			},
			dateConfirm(e) {
				console.log("date",e)
				this.course_forms[this.now_fileld]['value'] = e.year+'-'+ e.month+'-'+e.day
			},
			// 日期时间
			showDateTime(item,index){
				this.now_fileld = index
				this.dateTimeShow = true
			},
			dateTimeConfirm(e) {
				console.log("date",e)
				this.course_forms[this.now_fileld]['value'] = e.year+'-'+ e.month+'-'+e.day + 
				' '+ e.hour + ':'+e.minute+':'+e.second
			},
			
			// 提交
			submit(){
				console.log("course_forms",this.course_forms)
				this.$emit("backForm",this.course_forms)
				// this.$refs.submitForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 	} else {
				// 		console.log('验证失败');
				// 		this.base.toast("验证失败")
				// 	}
				// });
			},
		},
		watch: {
			course_forms(newval) {
				if (newval) {
					// 验证规则
					let _rule = {}
					newval.map(item => {
						if (item.edit_input === 'checkbox') {
							item.select_item.map(s => {
								s.checked = false
							})
							console.log("item.select_item", item.select_item)
						}
						
						if(item.rule){
							_rule[item.field] = []
							if(item.rule.indexOf('required')!==-1){
								_rule[item.field].push({
									required:true,
									message:`请输入${item.name}`,
									trigger: ['change', 'blur'],
								})
							}
						}
					})
					this.rules = _rule
					console.log("this.rules",this.rules)
					// this.$refs.uForm.setRules(this.rules)

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.applyform{
		position: relative;
		z-index:99
	}
	.form-btn {
		width: 100%;
		position: relative;
		padding: 60rpx 0;
		
		&>view {
			width: 70%;
			text-align: center;
			margin: 0 auto;
			color: #fff;
			background: linear-gradient(to right, #5e5fbc, #0d0398);
			border-radius: 30rpx;
			padding: 20rpx;
		}
	}
</style>