jp-railway/components/ApproveInfo.vue

<template>
	<view>
		<view class="businessMain" :style="'font-size:'+fieldInfo.fontsize+'rpx'">
		
		
			<view class="businessTitle" v-if="false">{{fieldInfo.title}}</view>
			<view v-for="(item,i) in fieldList" :key="i" class="oawork-item" :class="getClass(item)">
				<template v-if="item.type.indexOf('uview')>-1">
					<view v-if="item.type.indexOf('divider')>-1">
						<u-divider bg-color="#fff" border-color="#6d6d6d">{{item.text}}</u-divider>
					</view>
				</template>
				<template v-else>
		
		
					<view class="oawork-item1">
						<view class="oawork-item1_a">{{item.text}} 
						</view>
						<view class="oawork-item1_b">
							<template v-if="item.view">
								{{formData[item.key]?formData[item.key]:getViewItem(item)}}
							</template>
							<template v-else>
								<template v-if="item.type.indexOf('text')>-1">
									{{formData[item.key]}}
										
		
								</template>
								<template v-if="item.type.indexOf('textnumber')>-1">
									{{formData[item.key]}}
		
								</template>
		
								<template v-if="item.type.indexOf('radio')>-1">
		
									<u-radio-group v-model="formData[item.key]">
										<u-radio v-for="(item, index) in item.list?item.list:radioListDefault"
											:key="index" :name="item.value">
											{{item.name}}
										</u-radio>
									</u-radio-group>
		
								</template>
		
		
								<template v-if="item.type.indexOf('selecttime')>-1">
		
									<u-calendar max-date="2060-01-01" v-model="showCalendar" mode="date"
										@change="changeCalendar"></u-calendar>
									<view @click="showCalendar = true,keyCalendar=item">
										{{formData[item.key]?formData[item.key]:getViewItem(item)}}</view>
		
								</template>
								<template v-if="item.type.indexOf('selecttime2')>-1">
		
									<u-calendar max-date="2060-01-01" v-model="showCalendar" mode="range"
										@change="changeCalendar2"></u-calendar>
									<view @click="showCalendar = true,keyCalendar=item">
										{{formData[item.key]?formData[item.key]:createTime}}至{{formData[item.key2]?formData[item.key2]:createTime}}
									</view>
		
								</template>
							</template>
		
		
						</view>
						<view class="oawork-item1_c" v-if="item.type.indexOf('unit')>-1">
							{{item.unit}}
						</view>
					</view>
		
					<view class="oawork-item2">
		
						<template v-if="item.type.indexOf('textlong')>-1">
							<u-input v-model="formData[item.key]"  :disabled="1"
								:placeholderStyle="placeholderStyle" class="oawork-line" type="textarea" />
		
						</template>
						<template v-if="item.type.indexOf('upload')>-1">
							<view class="upload">
		
								<u-upload-file-all ref="uUpload"  :max-size="50 * 1024 * 1024"
									:file-max-size="50 * 1024 * 1024" :maxCount="0" 
									 :file-list="fileList"></u-upload-file-all>
							</view>
						</template>
						<template v-if="item.type.indexOf('texteditor')>-1">
							<view v-html="formData[item.key]">
								
							</view>
						</template>
		
					</view>
				</template>
		
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"ApproveInfo",
		props:{
			fieldInfo: {},
			personInfo: {},
			createTime: "",
			createTime2: "",
			fileList:{
				type: Array,
				default () {
					return [];
				}
			},
			formData: {},
			placeholderStyle: "font-size: 24rpx",
		},
		watch: {
			fieldInfo: {
				immediate: true,
				handler(val) {
					console.log("fieldList",val)
					if(val){
						this.fieldList=val.list
					}
					
				}
			},
			
			// 监听lists的变化，发出事件
			lists(n) {
				this.$emit('on-list-change', n, this.index);
			}
		},
		data() {
			return {
				fieldList: [],
			};
		},
		created() {
			//this.init()
		},
		methods:{
			init() {
			// 	this.personInfo = this.carhelp.getPersonInfo()
			// 	this.createTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
			// 	this.createTime2 = parseUnixTime(currentTimeStamp());
			
				for (var i in this.fieldList) {
					var obj = this.fieldList[i];
					this.formData[obj.key] = ""
				}
			
				//this.action = process.car.BASE_URL + "uploadPicture"
			
				//this.uploadData.subFolder = "oawork11" + this.oatype;
				//接口应该免登陆
				var token = this.carhelp.getToken()
			
				this.header = {
					'Authorization': token
				}
			},
			getViewItem(item) {
				console.log(item)
				if (item.viewSql) {
					var obj = this;
					for (var i in item.viewSql) {
						var k = item.viewSql[i];
						console.log(k)
						obj = obj[k]
					}
					return obj;
				}
			},
			getClass(item) {
			
				if (item) {
					var list = item.type.map(it => {
						return 'oawork-' + it
					})
					return list.join(' ')
				}
			
			},
		}
		
	}
</script>

<style  scoped lang="scss">
.oawork-line {
		border-bottom: 1px solid #c8c8c8;
	}

	.oawork-paddingTop {
		padding-top: 40rpx;
	}



	.businessMain {
		/deep/.uni-input-input {
			font-size: 24rpx;
		}

		font-size: 32rpx;

		background: #fff;
		padding-top: 10rpx;
		padding-bottom: 50rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-wrap: wrap;

		.oawork-item {
			padding: 4rpx 16rpx 4rpx 16rpx;
			width: 100%;

			.oawork-item1 {
				display: flex;
				align-items: center;

				.oawork-item1_a {
					min-width: 160rpx;
					font-weight: bold;
				}

				.oawork-item1_b {
					color: #777777;
					width: 100%;
					text-align: right;
				}

				.oawork-item1_c {
					padding-left: 16rpx;
				}

			}

		}

		.oawork-selecttime,
		.oawork-selecttime2 {
			margin: 10rpx 0;
			display: flex;

			.oawork-item1 {
				width: 100%;
			}

			.oawork-item1_b {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 100%;
				border-bottom: 1px solid #c8c8c8;
			}
		}

		.oawork-itemrow {
			.oawork-item1_a {
				font-weight: 400 !important;
				width: 200%;
			}
		}

		.oawork-textlong {
			.oawork-item1_a {
				width: 100%;

			}
		}

		.oawork-title {
			padding: 20rpx 0px 4rpx 20rpx;

			.oawork-item1_a {
				width: 100%;
				font-size: 32rpx;
			}
		}

		.width200 {

			// padding:20rpx 0px 4rpx 20rpx;
			.oawork-item1_a {}
		}

		/deep/.oawork-width49 {
			padding: 4rpx 0px 4rpx 20rpx;
			width: 49%;

			.oawork-item1_a {
				min-width: 140rpx !important;
			}
		}
	}


	.submitBtn {
		bottom: 0;
		position: fixed;
		width: 100%;
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-top: 3px solid #f3f4f4;
		z-index: 9999;
		display: flex;

		.submitBtn30 {
			width: 30%;
		}

		.submitBtn60 {
			width: 60%;
		}
	}

	//@import "../data/editor-icon.css";
</style>