jp-railway/components/ApproveInfoEdit.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}}<span v-if="item.isrequset" style="color:red">*</span>
						</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">
									<u-input v-model="formData[item.key]" :placeholder="'请输入'+item.text"
										:placeholderStyle="placeholderStyle" class="oawork-line"
										:customStyle="{textAlign: 'right'}" />
										
		
								</template>
								<template v-if="item.type.indexOf('textnumber')>-1">
									<u-input v-model="formData[item.key]" type="number" :placeholder="'请输入'+item.text"
										:placeholderStyle="placeholderStyle" class="oawork-line"
										:customStyle="{textAlign: 'right'}" />
		
								</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]" :placeholder="'请输入'+item.text"
								: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="9" 
									 :file-list="fileList"></u-upload-file-all>
							</view>
						</template>
						<template v-if="item.type.indexOf('texteditor')>-1">
							<view class="container">
								<view class="page-body">
									<view class='wrapper'>
										<view class='toolbar' @tap="format" style="overflow-y: auto;">
											<view :class="formats.bold ? 'ql-active' : ''"
												class="iconfont icon-zitijiacu" data-name="bold"></view>
											<view :class="formats.italic ? 'ql-active' : ''"
												class="iconfont icon-zitixieti" data-name="italic"></view>
											<view :class="formats.underline ? 'ql-active' : ''"
												class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
											<view :class="formats.strike ? 'ql-active' : ''"
												class="iconfont icon-zitishanchuxian" data-name="strike"></view>
		
											<view :class="formats.align === 'center' ? 'ql-active' : ''"
												class="iconfont icon-juzhongduiqi" data-name="align"
												data-value="center"></view>
											<view :class="formats.align === 'right' ? 'ql-active' : ''"
												class="iconfont icon-youduiqi" data-name="align" data-value="right">
											</view>
											<view :class="formats.align === 'justify' ? 'ql-active' : ''"
												class="iconfont icon-zuoyouduiqi" data-name="align"
												data-value="justify"></view>
		
		
											<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
		
		
											<view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
												class="iconfont icon-text_color" data-name="color" data-value="#0000ff">
											</view>
											<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
												class="iconfont icon-fontbgcolor" data-name="backgroundColor"
												data-value="#00ff00"></view>
											<view class="iconfont icon-date" @tap="insertDate"></view>
											<view class="iconfont icon--checklist" data-name="list" data-value="check">
											</view>
											<view :class="formats.list === 'ordered' ? 'ql-active' : ''"
												class="iconfont icon-youxupailie" data-name="list" data-value="ordered">
											</view>
											<view :class="formats.list === 'bullet' ? 'ql-active' : ''"
												class="iconfont icon-wuxupailie" data-name="list" data-value="bullet">
											</view>
		
											<view class="iconfont icon-undo" @tap="undo"></view>
											<view class="iconfont icon-redo" @tap="redo"></view>
		
											<view class="iconfont icon-outdent" data-name="indent" data-value="-1">
											</view>
											<view class="iconfont icon-indent" data-name="indent" data-value="+1">
											</view>
											<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
											<view class="iconfont icon-charutupian" @tap="insertImage"></view>
											<view :class="formats.header === 1 ? 'ql-active' : ''"
												class="iconfont icon-format-header-1" data-name="header"
												:data-value="1"></view>
											<view :class="formats.script === 'sub' ? 'ql-active' : ''"
												class="iconfont icon-zitixiabiao" data-name="script" data-value="sub">
											</view>
											<view :class="formats.script === 'super' ? 'ql-active' : ''"
												class="iconfont icon-zitishangbiao" data-name="script"
												data-value="super"></view>
		
											<view class="iconfont icon-shanchu" @tap="clear"></view>
		
											<view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
												class="iconfont icon-direction-rtl" data-name="direction"
												data-value="rtl"></view>
										</view>
		
										<view class="editor-wrapper">
											<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size
												show-img-toolbar show-img-resize @statuschange="onStatusChange"
												:read-only="readOnly" @ready="onEditorReady">
											</editor>
										</view>
									</view>
								</view>
							</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) {
					//("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) {
				//(item)
				if (item.viewSql) {
					var obj = this;
					for (var i in item.viewSql) {
						var k = item.viewSql[i];
						//(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>