manage_mobile/components/form.vue

<style lang="scss" scoped>
	.d-form{
		&>.u-form-item{
			position:relative;
			&.tip{
				margin-bottom:17rpx;
			}
			.textinput{
				width:100%;
				display:flex;
				align-items: center;
				.u-input{
					flex-grow: 1;
				}
				button{
					margin-top:14rpx;
					flex-shrink: 0;
					margin-left:30rpx;
				}
			}
			.u-input,.u-textarea{
				background:#F7F7F7;
				margin-top:14rpx;
				border-radius: 24rpx;
			}
			.plant-youbian{
				padding:18rpx 18rpx;
				border-radius: 24rpx;
				width:100%;
				display:flex;
				align-items: center;
				flex-direction: row-reverse;
				justify-content: space-between;
				background:#F7F7F7;
				margin-top:14rpx;
				color:rgb(48,49,51);
				&.noData{
					color:rgb(192, 196, 204);
				}
				&:before{
					transform: rotate(90deg);
					color:rgb(48,49,51);
				}
			}
			.upImg{
				width:100%;
				background:#F7F7F7;
				border-radius: 8rpx;
				padding:20rpx;
				min-height:260rpx;
				margin-top:14rpx;
				display:flex;
				flex-wrap: wrap;
				&>.album{
					background:#fff;
					border-radius: 24rpx;
					width:170rpx;
					height:170rpx;
					text{
						color:#ccc;
						font-size:22rpx;
						display:flex;
						justify-content: center;
						height:100%;
						align-items: center;
						flex-direction: column;
						&:before{
							color:#777;
							font-size:40rpx;
							margin-bottom:6rpx;
						}
					}
				}
			}
			.dateRange{
				display:flex;
				width:100%;
				margin-top:14rpx;
				align-items: center;
				text{
					width:50%;
					background:#F7F7F7;
					border-radius: 24rpx;
					height:80rpx;
					line-height: 80rpx;
					padding:0 20rpx;
					&.noData{
						color:rgb(192, 196, 204);
					}
				}
			}
			.checkBox{
				margin-top:14rpx;
			}
			.calendar{
				display:flex;
				align-items: center;
				justify-content: space-between;
				width:100%;
				height:80rpx;
				margin-top:14rpx;
				background: #f7f7f7;
				border-radius: 24rpx;
				padding:0 20rpx;
				color:#333;
				&.noData{
					color:#BFBFBF;
				}
				text{
					color:#BFBFBF;
				}
			}
			.tip{
				position:absolute;
				bottom:-20rpx;
				font-size:20rpx;
				color:#FBA83C;
			}
		}
	}
</style>
<template>
	<view class="d-form">
		<u-form-item :class="{tip:!!tip}" :label="label" :prop="field" :required="required">
			<view v-if="type=='text'" class="textinput">
				<u-input :placeholder="placeholder||`请输入${label}`" :value="value" @input="input">
					<text v-if="suffix" slot="suffix">{{suffix}}</text>
				</u-input>
				<button v-if="btnText" @click="btnFun" class="cu-btn bg-green shadow">{{btnText}}</button>
			</view>
			<view v-if="type=='select'" class="plant-youbian" :class="{noData:!/^\d+$/.test(value)}" @click="show=true">{{/^\d+$/.test(value)&&columns[0][value][keyName]||placeholder||`请选择${label}`}}</view>
			<view v-if="type=='upImg'" class="upImg">
				<view class="album" @click="selectImg">
					<text class="plant-paizhao">添加照片</text>
				</view>
			</view>
			<u-textarea v-if="type=='textarea'" :value="value" :placeholder="placeholder||`请输入${label}`" autoHeight/>
			<view v-if="type=='dateRange'" class="dateRange">
				<text style="margin-right:20rpx;" :class="{noData:!value[0]}" @click="dateType='start';show=true">{{value[0]||startPlaceholder||'开始时间'}}</text>
				-
				<text style="margin-left:20rpx;" :class="{noData:!value[1]}" @click="dateType='end';show=true">{{value[1]||endPlaceholder||'结束时间'}}</text>
			</view>
			<view v-if="type=='checkBox'" class="checkBox">
				<u-checkbox-group :value="[]" @change="checkboxChange" >
					<u-checkbox :customStyle="{marginRight: '30rpx'}" v-for="(v, k) in columns" :key="k" activeColor="#D9F6E9" iconColor="#10C176" :label="v.label" :name="v.value" />
				</u-checkbox-group>
			</view>
			<view v-if="type=='calendar'" class="calendar" @click="show=true" :class="{noData:value.length<=0}">请选择{{label}} <text class="plant-rili"/></view>
		
			<view class="tip" v-if="tip">{{tip}}</view>
		</u-form-item>
		<u-picker
			v-if="type=='select'"
			:columns="columns"
			:show="show"
			:keyName="keyName"
			:defaultIndex="[value||0]"
			closeOnClickOverlay
			@close="show=false"
			@cancel="show=false"
			@confirm="$emit('select',$event.indexs[0]);show=false"/>
		<u-datetime-picker
			v-if="type=='dateRange'"
			:show="show"
			mode="date"
			:value="date"
			closeOnClickOverlay
			@close="show=false"
			@cancel="show=false"
			@confirm="$emit('selectRDate',{value:new Date($event.value).format('yyyy-MM-dd'),type:dateType});show=false"/>
		<u-calendar
			v-if="type=='calendar'"
			:show="show" 
    		color="#10C176"
			mode="single"
			closeOnClickOverlay
			@close="show=false"
			@confirm="$emit('select',$event[0]);show=false"/>
	</view>
</template>

<script>
	export default{
		props:{
			label:{
				type:String,
				default:"",
			},
			suffix:{
				type:String,
				default:"",
			},
			field:{
				type:String,
				default:"",
			},
			tip:{
				type:String,
				default:'',
			},
			required:{
				type:Boolean,
				default:false,
			},
			placeholder:{
				type:String,
				default:"",
			},
			keyName:{
				type:String,
				default:"label",
			},
			type:{
				type:String,
				default:"text"
			},
			columns:{
				type:Array,
				default:()=>[]
			},
			value:{
				type:[String,Number,Array],
				default:"",
			},
			btnText:{
				type:String,
				default:"",
			},
			btnFun:{
				type:Function,
				default:()=>{}
			},
			startPlaceholder:"",
			endPlaceholder:"",
		},
		data(){
			return{
				downValue:[],
				show:false,
				dateType:"start",
			}
		},
		computed:{
			date(){
				if(this.dateType=='start')return this.value[0]||new Date().format('yyyy-MM-dd');
				else return this.value[1]||new Date().format('yyyy-MM-dd');
			}
		},
		methods:{
			async selectImg(){
				var res=await uni.chooseImage({
					count:1,
					sizeType:['compressed'],
				})
			},
			input(e){
				this.$emit("input",e)
			},
			checkboxChange(e){
				this.$emit("select",e)
			},
		},
	}
</script>