eam-uniapp/components/form/index.vue

<template>
	<view class="form-content">
		<view class="form">
			<u-form
				:model="data"
				ref="form"
				:rules="form.rules"
				:error-type='form.errorType'
				:border='form.border'
				:label-position='form.labelPosition'
				:label-width='form.labelWidth'
				:label-style='form.labelStyle'
				:label-align='form.labelAlign'
			>
			
				<u-form-item
				:label="item.label"
				:prop="item.field"
				:required='item.required'
				:border-bottom="item.borderBottom"
				:label-position='item.labelPosition'
				:label-width='item.labelWidth'
				:label-style='item.labelStyle'
				:label-align='item.labelAlign'
				:right-icon='item.rightIcon'
				:left-icon='item.leftIcon'
				:left-icon-style='item.leftIconStyle'
				:right-icon-style='item.rightIconStyle'
				v-for="(item,index) in form.formData"
				:key="index"
				>
					<u-input
						:type="item.type ||'text'"
						v-model="data[item.field]"
						:clearable='item.clearable'
						:input-align='item.inputAlign'
						:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
						:disabled='item.disabled'
						:maxlength='item.maxlength'
						placeholder-style='font-size:28rpx'
						:confirm-type='item.confirmType'
						:confirm-style='item.confirmStyle'
						:focus='item.focus'
						:fixed='item.fixed'
						:password-icon='item.passwordIcon'
						:border='item.border'
						:border-color='item.borderColor'
						:auto-height='item.autoHeight'
						:height='item.height'
						:cursor-spacing='item.cursorSpacing'
						:selection-start='item.selectionStart'
						:selection-end='item.selectionEnd'
						:trim='item.trim'
						:show-confirmbar='item.showConfirmbar'
						:adjust-position='item.adjustPosition'
						@blur="blur($event,item.field)"
						v-if="item.type == 'text'||item.type == 'number'||item.type == 'idcard'||item.type == 'digit'||item.type == 'tel'||item.type == 'safePassword'||item.type == 'nickname'" 	
					/>
					<view class="range" v-if="item.type == 'range'">
						<u-input
							type="number"
							v-model="data[item.field]"
							:clearable='item.clearable'
							:input-align='item.inputAlign'
							:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
							:disabled='item.disabled'
							:maxlength='item.maxlength'
							placeholder-style='font-size:28rpx'
							:confirm-type='item.confirmType'
							:confirm-style='item.confirmStyle'
							:focus='item.focus'
							:fixed='item.fixed'
							:password-icon='item.passwordIcon'
							:border='item.border'
							:border-color='item.borderColor'
							:auto-height='item.autoHeight'
							:height='item.height'
							:cursor-spacing='item.cursorSpacing'
							:selection-start='item.selectionStart'
							:selection-end='item.selectionEnd'
							:trim='item.trim'
							:show-confirmbar='item.showConfirmbar'
							:adjust-position='item.adjustPosition'
							style="flex: 1;"
						/>
						<span style="padding: 0px 20rpx;">-</span>
						<u-input
							:type="item.type"
							v-model="data[item.field]"
							:clearable='item.clearable'
							:input-align='item.inputAlign'
							:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
							:disabled='item.disabled'
							:maxlength='item.maxlength'
							placeholder-style='font-size:28rpx'
							:confirm-type='item.confirmType'
							:confirm-style='item.confirmStyle'
							:focus='item.focus'
							:fixed='item.fixed'
							:password-icon='item.passwordIcon'
							:border='item.border'
							:border-color='item.borderColor'
							:auto-height='item.autoHeight'
							:height='item.height'
							:cursor-spacing='item.cursorSpacing'
							:selection-start='item.selectionStart'
							:selection-end='item.selectionEnd'
							:trim='item.trim'
							:show-confirmbar='item.showConfirmbar'
							:adjust-position='item.adjustPosition'
							style="flex: 1;"
						/>
					</view>
					<u-radio-group
						v-model="data[item.field]"
						:disabled='item.disabled'
						:label-disabled='item.labelDisabled'
						:shape='item.shape'
						:icon-size='item.iconSize'
						:active-color='item.activeColor'
						:size='item.size'
						:width='item.width'
						:wrap='item.wrap'
						@change="radioGroupChange($event,item.field)"
						v-else-if="item.type == 'radio'" 
					>
						<u-radio 
							:name="cur.value"
							:icon-size='cur.iconSize'
							:label-size='cur.labelSize'
							:shape='cur.shape'
							:disabled='cur.disabled'
							:label-disabled='cur.labelDisabled'
							:active-color='cur.activeColor'
							v-for="(cur, key) in item.list" :key="key" 
							@change="radioChange($event,item.field)" 
						>
							{{cur.label}}
						</u-radio>
					</u-radio-group>
					
					<u-checkbox-group
						:max='item.max'
						:disabled='item.disabled'
						:label-disabled='item.labelDisabled'
						:shape='item.shape'
						:icon-size='item.iconSize'
						:active-color='item.activeColor'
						:size='item.size'
						:width='item.width'
						:wrap='item.wrap'
						@change="checkboxGroupChange($event,item.field)"
						v-else-if="item.type == 'checkbox'" 
					>
						<u-checkbox 
							v-model="cur.checked" 
							:size='cur.size'
							:label-size='cur.labelSize'
							:icon-size='cur.iconSize'
							:name="cur.value"
							:shape='cur.shape'
							:disabled='cur.disabled'
							:active-color='cur.activeColor'
							v-for="(cur, key) in item.list" :key="key" 
							@change="checkboxChange($event,item.field)" 
						>
							{{cur.label}}
						</u-checkbox>
					</u-checkbox-group>
					<u-input
						:type="item.type"
						v-model="data[item.field]"
						:clearable='item.clearable'
						:input-align='item.inputAlign'
						:placeholder="item.placeholder ? item.placeholder : `请输入${item.label}`"
						:disabled='item.disabled'
						:maxlength='item.maxlength'
						placeholder-style='font-size:28rpx'
						:confirm-type='item.confirmType'
						:confirm-style='item.confirmStyle'
						:focus='item.focus'
						:fixed='item.fixed'
						:password-icon='item.passwordIcon'
						:border='item.border'
						:border-color='item.borderColor'
						:auto-height='item.autoHeight'
						:height='item.height'
						:cursor-spacing='item.cursorSpacing'
						:selection-start='item.selectionStart'
						:selection-end='item.selectionEnd'
						:trim='item.trim'
						:show-confirmbar='item.showConfirmbar'
						:adjust-position='item.adjustPosition'
						v-else-if="item.type == 'textarea'" 
						
					/>
					<u-switch 
						v-model="data[item.field]"
						:loading='item.loading'
						:disabled='item.disabled'
						:size='item.size'
						:active-color='item.activeColor'
						:inactive-color='item.inactiveColor'
						:vibrate-short='item.vibrateShort'
						:active-value='item.activeValue'
						:inactive-value='item.inactiveValue'
						@change ='switchChange($event,item.field)'
						v-else-if="item.type == 'switch'" 
					/>
					<u-slider
						v-model="data[item.field]"
						:min='item.min'
						:max='item.max'
						:step='item.step'
						:block-width='item.blockWidth'
						:height='item.height'
						:inactive-color='item.inactiveColor'
						:active-color='item.activeColor'
						:block-color='item.blockColor'
						:block-style='item.blockStyle'
						:disabled='item.disabled'
						:use-slot='item.useSlot'
						v-else-if="item.type == 'slider'" 
					/>
					<view class="select" v-else-if="item.type == 'singleColumn'" @click="openSingleColumn(item.field,data[item.field],item.list)">
						<view class="input" v-if='data[item.field]'>
							{{selectFormat(data[item.field],item.list)}}
						</view>
						<view class="placeholder" v-else>
							{{item.placeholder ? item.placeholder : `请选择${item.label}`}}
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
					<view class="select" v-else-if="item.type == 'datetime'" @click="openDatetime(item.field,data[item.field],item.params,item.formatValue)">
						<view class="input" v-if='data[item.field]'>
							{{data[item.field]}}
						</view>
						<view class="placeholder" v-else>
							{{item.placeholder ? item.placeholder : `请选择${item.label}`}}
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
					<view class="select" v-else-if="item.type == 'region'" @click="openRegion(item.field,data[item.field],item.params,item.formatValue)">
						<view class="input" v-if='data[item.field]'>
							{{regionText}}
						</view>
						<view class="placeholder" v-else>
							{{item.placeholder ? item.placeholder : `请选择${item.label}`}}
						</view>
						<u-icon name="arrow-right" color="#aaaaaa" size="28"></u-icon>
					</view>
					<template v-slot:right v-if="item.isRightButton || item.isRightText ">
						<view class="right-button" v-if="item.isRightButton" @click="chickRightButton(item.field)">
							{{item.isRightButton}}
						</view>
						<view class="right-text" v-if="item.isRightText">
							{{item.isRightText}}
						</view>
					</template>
				</u-form-item>
			</u-form>
			<view>
			</view>
		</view> 

		
		<u-select v-model="singleColumnShow" mode="single-column" :default-value='singleColumnDefaultValue' :list="singleColumnList" @confirm="chooseSingleColumn"></u-select>
		<u-select v-model="mutilColumnShow" mode="mutil-column" :default-value='mutilColumnDefaultValue' :list="mutilColumnList" @confirm="chooseMutilColumn"></u-select>
		<u-picker mode="time" v-model="datetimeShow" :default-time='datetimeDefaultValue' :params="params" @confirm='chooseDatetime'></u-picker>
		<u-picker mode="region" v-model="regionShow" :area-code='regionDefaultValue'  @confirm='chooseRegion'></u-picker>
		<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
	</view>
</template>

<script>
	import sparePartsCard from '@/components/sparePartsCard/index.vue'
	export default {
		components:{
			sparePartsCard
		},
		props: {
			form: {
				type: Object,
				default: {},
				require: true
			},
			data: {
				type: Object,
				default: {},
				require: true
			},
		},
		data() {
			return {
				// 单列模式参数
				singleColumnList:[],
				singleColumnShow:false,
				singleColumnDefaultValue:[],
				// 多列模式参数
				mutilColumnList:[],
				mutilColumnShow:false,
				mutilColumnDefaultValue:[],
				field:'',
				// 时间参数
				datetimeShow:false,
				params:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				datetimeDefaultValue:'',
				// 地区
				regionShow:false,
				regionDefaultValue:[],
				regionText:''
			}
		},
		methods: {
			// 单列模式
			openSingleColumn(field,val,list){
				this.singleColumnList = list
				this.field = field
				// this.data[this.field] = val ? val :''
				// if(val){
				// 	this.singleColumnDefaultValue = [list.findIndex(item=>item.value==val)]
				// }else{
				// 	this.singleColumnDefaultValue = []
				// }
				this.singleColumnShow = true
			},
			// 单列模式点击确定之后
			chooseSingleColumn(e){
				console.log(e)
				this.$forceUpdate()
				this.data[this.field] = e[0].value
				console.log(this.data)
				this.singleColumnShow = false
				this.$emit('singleColumn',this.field,this.data[this.field])
			},
			// 多列模式
			openMutilColumn(field,val,list){
				this.mutilColumnList = list
				this.field = field
				this.data[this.field] = val ? val :''
				this.mutilColumnDefaultValue = [list.findIndex(item=>item.value==val)]
				this.mutilColumnShow = true
			},
			// 多列模式点击确定之后
			chooseMutilColumn(e){
				this.data[this.field] = e[0].value
				this.mutilColumnShow = false
				this.$forceUpdate()
			},
			// 日期模式
			openDatetime(field,val,params,formatValue){
				this.params = params
				this.formatValue =formatValue
				this.field = field
				this.data[this.field] = val ? val :''
				this.datetimeDefaultValue = val ? val :''
				this.datetimeShow = true
			},
			// 日期模式点击确定之后
			chooseDatetime(e){
				let array1 = []
				let array2 = []
				if(this.formatValue.indexOf('YYYY')>-1){
					array1.push(e.year)
				}
				if(this.formatValue.indexOf('MM')>-1){
					array1.push(e.month)
				}
				if(this.formatValue.indexOf('DD')>-1){
					array1.push(e.day)
				}
				if(this.formatValue.indexOf('hh')>-1){
					array2.push(e.hour)
				}
				if(this.formatValue.indexOf('mm')>-1){
					array2.push(e.minute)
				}
				if(this.formatValue.indexOf('ss')>-1){
					array2.push(e.second)
				}
				let str = array1.join('-') + ' ' + array2.join(':')
				this.data[this.field] = str
				this.$emit('datetime',this.field,this.data[this.field])
			},
			// 地区
			openRegion(field,val){
				console.log(val)
				this.field = field
				this.data[this.field] = val ? val :[]
				if(val){
				this.regionDefaultValue = this.data[this.field]
				}else{
					this.regionDefaultValue = []
				}
				this.regionShow = true
			},
			chooseRegion(e){
				console.log(e)
				this.data[this.field] = [e.province.code,e.city.code,e.area.code]
				this.regionText = `${e.province.name}-${e.city.name}-${e.area.name}`
				this.$emit('region',this.field,this.data[this.field])
			},
			selectFormat(val,array){
				let str =  array.filter(item=>item.value  == val)[0].label
				return str
			},
			//单选
			radioGroupChange(e,field){
				this.$emit('radioGroupChange',e,field)
			},
			//单选
			radioChange(e,field){
				this.$emit('radioChange',e,field)
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e,field) {
				this.$emit('checkboxChange',e,field)
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e,field) {
				this.$emit('checkboxGroupChange',e,field)
			},
			switchChange(e,field) {
				this.$emit('switchChange',e,field)
			},
			chickRightButton(field) {
				this.$emit('chickRightButton',field)
			},
			blur(e,field) {
				this.$emit('blur',e,field)
			},
		},
		mounted() {
			this.$refs.form.setRules(this.form.rules)
			this.form.formData.forEach((item,index)=>{
				if(!this.data[item.field]){
					this.data[item.field] = item.value ? item.value : ''
				}
			})
		}
	}
</script>

<style lang="scss" scoped>

	.form {
	}

	::v-deep .uni-searchbar__box {
		border: 1px solid #E4E4E4;
		justify-content: start;
	}

	::v-deep .uni-forms-item {
		padding: 10px 0px;
		// border-bottom: 1px solid #E4E4E4;
		margin: 0px;
	}
	::v-deep .uni-data-checklist{
		margin-top: 10rpx!important;
	}
	::v-deep .uni-forms-item__content{
		display: flex;
		align-items: center;
	}

	.input {
		height: 72rpx;
		line-height: 72rpx;
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
	}

	.btns {
		display: flex;


		button {
			flex: 1;
		}

		.sure {
			background: #409eff;
			color: white;
			border-radius: 0px;

			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}

		.reset {
			background: #F5F5F5;
			border-radius: 0px;

			&::after {
				border-radius: 0px;
			}
		}
	}
	.select{
		display: flex;
		align-items: center;
		height: 72rpx;
		width: 100%;
		.input{
			flex: 1;
			font-size: 28rpx;
			color: #000000;
		}
		.placeholder{
			flex: 1;
			font-size: 28rpx;
			color: #828282;
			
		}
	}
	.select-popup{
		background: white;
		border-radius: 30rpx 30rpx 0px 0px;
		max-height: 80vh;
		overflow-y: auto;
		.popup-item{
			padding: 32rpx 30rpx;
			border-bottom: 1px solid #eeeeee;
			text-align: center;
			font-size: 30rpx;
		}
		.line{
			background: #F5F5F5;
			height: 20rpx;
		}
		.cancle{
			padding: 32rpx 30rpx;
			text-align: center;
			font-size: 30rpx;
			color: red;
		}
	}
	.active{
		color:  #409eff;
	}
	.right-button{
		background: #409eff; 
		color: white;
		padding:0rpx 30rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.range{
		display: flex;
		align-items: center;
	}
</style>