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,textarea{
				background:#F7F7F7;
				margin-top:14rpx;
				border-radius: 24rpx;
				width:100%;
			}
			textarea{
				height:auto;
				min-height:160rpx;
				padding:20rpx;
			}
			.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);
				}
			}
			.u-upload{
				background:#F7F7F7;
				border-radius: 8rpx;
				padding:20rpx;
				min-height:260rpx;
				margin-top:14rpx;
				align-content: flex-start;
				&/deep/ .u-upload__wrap__preview{
					border-radius: 10rpx;
					&>.u-upload__wrap__preview__image{
						height:170rpx!important;
						width:170rpx!important;
					}
					&>.u-upload__deletable{
						width:30rpx;
						height:30rpx;
					}
				}
				.album{
					background:#fff;
					border-radius: 20rpx;
					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,.radio{
				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;
			}
			&/deep/ .u-form-item__body__right__message{
				margin-left:0!important;
			}
		}
	}
</style>
<template>
	<view class="d-form">
		<u-form-item :class="{tip:!!tip}" :label="label" :prop="field" :required="required">
			<view v-if="/^text$|^number$|^digit$/.test(type)" class="textinput">
				<u-input :placeholder="placeholder||`请输入${label}`" :type="type" :value="value" @input="$emit('input',$event)" @blur="/^number$|^digit$/.test(type) && $emit('input',parseFloat(value)||'')">
					<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].label||placeholder||`请选择${label}`}}</view>
			<u-upload v-if="type=='upImg'" :fileList="imgs" previewFullImage multiple :maxCount="num" @delete="delImg" @afterRead="afterRead">
				<view class="album">
					<text class="plant-paizhao">添加照片</text>
				</view>
			</u-upload>
			<textarea v-if="type=='textarea'" auto-height :value="value" :placeholder="placeholder||`请输入${label}`" @input="$emit('input',$event.detail.value)"/>
			<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=='radio'" class="radio">
				<u-radio-group :value="value" shape="square" @change="$emit('input',$event)" activeColor="#D9F6E9" iconColor="#10C176">
					<u-radio :customStyle="{marginRight: '30rpx'}" v-for="(v, k) in columns" :key="k" :label="v.label" :name="v.value"/>
				</u-radio-group>
			</view>
			<view v-if="type=='checkBox'" class="checkBox">
				<u-checkbox-group :value="[]" @change="$emit('select',$event)" >
					<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="$refs.calendar.open()" :class="{noData:!value}">{{value||placeholder||`请选择${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="label"
			ref="picker"
			:defaultIndex="(value||[]).map(v=>v||0)"
			closeOnClickOverlay
			@close="show=false"
			@cancel="show=false"
			@confirm="$emit('select',$event.indexs[0]);show=false"
			@change="pickerChange"/>
		<u-datetime-picker
			v-if="type=='dateRange'"
			:show="show"
			mode="date"
			:value="date"
			:maxDate="maxDate"
			:minDate="minDate"
			closeOnClickOverlay
			@close="show=false"
			@cancel="show=false"
			@confirm="$emit('selectRDate',{value:new Date($event.value).format('yyyy-MM-dd'),type:dateType});show=false"/>
		<uni-calendar
			ref="calendar"
			v-if="type=='calendar'"
			:insert="false"
			lunar
			@confirm="$emit('input',$event.fulldate)"/>

	</view>
</template>

<script>
import request,{host} from '@/common/request'

	function setPickerCol(columns, value, n){
		var v=value[0]||0
		if(columns[v].item){
			this.setColumnValues(n,columns[v].item)
			setPickerCol(columns[v].item, value.slice(1), ++n)
		}
	}

	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:"",
			},
			type:{
				type:String,
				default:"text"
			},
			num:{
				type:Number,
				default:1,
			},
			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",
				imgList:[],
			}
		},
		watch:{
			columns(n){
				if(this.type=='select'){
					this.$nextTick(()=>{
						setPickerCol.bind(this.$refs.picker)(n[0]||[],this.value,1)
					})
				}
			},
		},
		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');
			},
			maxDate(){
				if(this.type=='dateRange' && this.dateType=='start' && this.value[1])return new Date(this.value[1]).getTime();
			},
			minDate(){
				if(this.type=='dateRange' && this.dateType=='end' && this.value[0])return new Date(this.value[0]).getTime();
			},
			imgs(){
				if(this.type=='upImg')return this.value.map((v,index)=>({url:`${host(undefined,"/plant_manage/sys/common/static")}/${v}`,status:"success",index,type:'saved'})).concat(this.imgList.map((v,index)=>Object.assign(v,{index,type:'unsaved'})))
				return []
			}
		},
		created(){
			if(this.type=='select'){
				window.the=this
			}
		},
		methods:{
			async afterRead(e){
				this.imgList=this.imgList.concat(e.file.map(v=>Object.assign(v,{
					status: 'uploading',
					message:"上传中",
				})))
				for(var i=0; i<e.file.length;i++){
					var res=await request('/sys/common/upload',{
						filePath:e.file[i].url
					})
					if(res.statu ||true){
						this.imgList.some((v,k)=>{
							if(v==e.file[i]){
								v.status='success'
								v.message=''
								v.tempUrl=res.data
								this.$set(this.imgList,k,this.imgList[k])
								return true
							}
							return false
						})
					}else{
						this.imgList=this.imgList.filter(v=>!v==e.file[i])
					}
				}
				this.$emit('imgs',this.imgs.map(v=>({saved:v.url,unsaved:v.tempUrl})[v.type]).join(','))
			},
			delImg({file}){
				if(file.type=='unsaved'){
					this.imgList.splice(file.index,1)
				}else{
					this.$emit("input",this.value.filter(v=>v.index!=file.index).map(v=>v.url))
				}
				this.$emit('imgs',this.imgs.map(v=>({saved:v.url,unsaved:v.tempUrl})[v.type]).join(','))
			},
			pickerChange(e){
				if(e.value[e.columnIndex].item){
					this.$refs.picker.setColumnValues(e.columnIndex+1,e.value[0].item)
				}
			},
		},
	}
</script>