gwlz/jp-mobile/components/generate-form/generate-form.vue

<template>
	<view>
		<u--form labelWidth="100px" class="u-form" labelPosition="left" >
			
			<u-form-item :label="item.name" borderBottom v-if="item.readable" v-for="(item,index) in formData" :key="index">
			<!-- 	<view class="title">
					<text class="red-color " v-if="item.options.required">* </text> {{item.name}}
				</view> -->
				<template v-if="item.type=='input'">				
					<!-- 普通输入框 -->
					 <u--input :placeholder='item.placeholder'  :disabled="!item.writable"  v-model="item.value" border="none"></u--input>
				</template>	
				<template v-if="item.type=='textarea' || item.type=='editor'">
					<!-- 多行文本输入框 -->
					<u--textarea :placeholder='item.placeholder' :disabled="!item.writable"   v-model="item.value" border="none"></u--textarea>
				</template>	
				<template v-if="item.type=='number'">
					<!-- 计数器 -->
					<u-number-box :placeholder='item.placeholder' :disabled="!item.writable"   v-model="item.value"></u-number-box>
				</template>	
				<template v-if="item.type=='radio'">
					<!-- 单选框 -->
				<u-radio-group
					v-if="item.options.remote === 3" 
				    v-model="item.value"
					:disabled="!item.writable"
				    placement="column"
				  >
				    <u-radio
				      :customStyle="{margin: '8px'}"
				      v-for="(option, index) in $dictUtils.getDictList(item.options.dictType)"
				      :key="index"
				      :label="option.label"
				      :name="option.value"
				    >
				    </u-radio>
				  </u-radio-group>
				  <u-radio-group
				  	 v-else-if="item.options.showLabel"
				     v-model="item.value"
				  	 :disabled="!item.writable"
				     placement="column"
				    >
				      <u-radio
				        :customStyle="{margin:'8px'}"
				        v-for="(option, index) in item.options.options"
				        :key="index"
				        :label="option.label"
				        :name="option.value"
				      >
				      </u-radio>
				    </u-radio-group>
					<u-radio-group
					   v-else
					   v-model="item.value"
					   :disabled="!item.writable"
					   placement="column"
					  >
					    <u-radio
					      :customStyle="{margin:'8px'}"
					      v-for="(option, index) in item.options.options"
					      :key="index"
					      :label="option.value"
					      :name="option.value"
					    >
					    </u-radio>
					  </u-radio-group>
				</template>	
				<template v-if="item.type=='checkbox'">
					 <u-checkbox-group
								v-if="item.options.remote === 3"
					            v-model="item.value"
					            :disabled="!item.writable"
					            placement="column"
					        >
						<u-checkbox
							:customStyle="{margin: '8px'}"
							v-for="(option, index) in $dictUtils.getDictList(item.options.dictType)"
							:key="index"
							:label="option.label || option.value"
							:name="option.value"
						>
						</u-checkbox>
					</u-checkbox-group>
					<u-checkbox-group
								v-else-if="item.options.showLabel"
					            v-model="item.value"
					            :disabled="!item.writable"
					            placement="column"
					        >
						<u-checkbox
							:customStyle="{margin: '8px'}"
							v-for="(option, index) in item.options.options"
							:key="index"
							:label="option.label"
							:name="option.value"
						>
						</u-checkbox>
					</u-checkbox-group>
					<u-checkbox-group
								v-else
					            v-model="item.value"
					            :disabled="!item.writable"
					            placement="column"
					        >
						<u-checkbox
							:customStyle="{margin: '8px'}"
							v-for="(option, index) in item.options.options"
							:key="index"
							:label="option.value"
							:name="option.value"
						>
						</u-checkbox>
					</u-checkbox-group>
				</template>	
				<template v-if="item.type=='time'">
					<!-- 时间控件 -->
					<jp-datetime-picker  v-model="item.value" :placeholder='item.placeholder' :disabled="!item.writable" mode="time"></jp-datetime-picker>
				</template>	
				<template v-if="item.type=='date'">
					<!-- 日期控件 -->
					<jp-datetime-picker  v-model="item.value" :placeholder='item.placeholder' :disabled="!item.writable" mode="date"></jp-datetime-picker>
				</template>	
				<template v-if="item.type=='rate'">
					<!-- 评分 -->
					<u-rate :disabled="!item.writable" :count="item.options.max" v-model="item.value"></u-rate>
				</template>	
				<template v-if="item.type=='color'">
					<!-- 颜色选择框 -->
					<jp-color-picker :disabled="!item.writable" v-model="item.value" ></jp-color-picker>
				</template>	
				<template v-if="item.type=='select'">
					<!-- 选择框 -->
					<jp-picker :disabled="!item.writable" v-if="item.options.remote === 3" v-model="item.value" :range="$dictUtils.getDictList(item.options.dictType)">
					</jp-picker>
					<jp-picker :disabled="!item.writable" v-else-if="item.options.showLabel" v-model="item.value" :range="item.options.options">
					</jp-picker>
					<jp-picker :disabled="!item.writable" v-else v-model="item.value" rangeKey="value" :range="item.options.options">
					</jp-picker>
				</template>	
				<template v-if="item.type=='switch'">
					<!-- 开关 -->
					<u-switch :placeholder="item.placeholder" :disabled="!item.writable"   v-model="item.value"></u-switch>
				</template>	
				<template v-if="item.type=='cascader'">
					<!-- 开关 -->
					<uni-data-picker :localdata="item.options.options" v-model="item.value" :map="{text:'label', value: 'value'}" :popup-title="item.placeholder" ></uni-data-picker>
				</template>	
				<template v-if="item.type=='slider'">
					<!-- 滑块 -->
					<u-slider :placeholder='item.placeholder' :disabled="!item.writable" step="20" min="30" max="100"   v-model="item.value"></u-slider>
				</template>	
				<template v-if="item.type=='text'">
					<!-- 普通输入框 -->
					<text>{{item.value}}</text>
				</template>	
				<template v-if="item.type=='html'">
					<!-- 普通输入框 -->
					<view v-html="item.value"></view>
				</template>	
				<!--步骤条-->
				<template v-if="item.type == 'steps'">
					<u-steps :current="item.value">
						<u-steps-item v-for="(item, index) in item.options.steps" :title="item.title"></u-steps-item>
					</u-steps>
				</template>
				<template v-if="item.type=='imgupload' || item.type=='fileupload'">
					<!-- 图片上传 -->
					<jp-form-upload :disabled="!item.writable"   v-model="item.value"></jp-form-upload>
				</template>	
				<template v-if="item.type=='user'">
					<!-- 用户选择框 -->
					<user-select :placeholder='item.placeholder' :disabled="!item.writable"   v-model="item.value"></user-select>
				</template>	
				<template v-if="item.type=='office'">
					<!-- 机构选择框 -->
					<jp-office-select :placeholder='item.placeholder' :disabled="!item.writable"   v-model="item.value"></jp-office-select>
				</template>	
				<template v-if="item.type=='area'">
					<!-- 普通输入框 -->
					<jp-area-select  :disabled="!item.writable"  v-model="item.value"></jp-area-select>
				</template>	
				<template v-if="item.type=='dict'">
					<!-- 字典 -->
					<jp-picker :disabled="!item.writable"  v-model="item.value" :range="$dictUtils.getDictList(item.options.dictType)"></jp-picker>
				</template>	
			</u-form-item>							
		</u--form>
	</view>
</template>

<script>
	export default {
		watch:{
			formData:{
				handler (val) {
					console.log(this.formData)
				},
				immediate: true,
				deep: false
			}
		},
		props: {
			formData:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		methods: {	

		}
	}
</script>

<style lang="scss">
.uni-list-cell {
    justify-content: flex-start
}
.cu-form-group{

    uni-checkbox-group{
		text-align: right;
	}
	uni-radio-group {
		text-align: right;
	}
	uni-checkbox, uni-radio {
	    position: relative;
	    margin-top: 7px;
		margin-left:7px;
		margin-bottom: 7px;
	}
}
</style>