jp-railway/components/ApproveInfo.vue

<template>
	<view>
		<view  class="head-approve-main" v-if="formData.applyPersonName" >
			<view class="head-approve">
				<view class="head-approve-a">
					<view class="head-approve-a1">
						<u-avatar size="36" :src="formData.headImg" class="img"></u-avatar>
						<view class="head-approve-2">
							{{formData.applyPersonName}}
						</view>
					</view>
					
					<view class="head-approve-3">申请了<span  class="head-approve-2" style="color:#2196F3;">{{fieldInfo.title}}</span></view>
				</view>
				<view  class="head-approve-b" :style="{
						color:recordStatusColor(formData.status),
						borderColor:recordStatusColor(formData.status),
						}" >
					<span >{{formData.statusN}}</span>
				</view>
				
			</view>
			<view class="head-approve-info">
				<view>申请人部门：{{formData.orgName}}</view>
				<view>申请时间：{{formData.createTime}}</view>
			</view>
		</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>
					<view v-if="item.type.indexOf('stepBtn')>-1&&item.isEdit"   style=" text-align:  center;" >
						<u-button @click="stepBtn"  type="warning"  size="medium">{{item.text}}</u-button>
					</view>
				</template>
				<template v-else-if="item.type.indexOf('tableList')>-1">
				
					<template v-if="formData[item.key]&&formData[item.key].length">
						<view v-if="item.type.indexOf('tableList-vertical')>-1">
							<u-table>
								<u-tr class="u-tr">
									<u-th class="u-th"></u-th>
									<u-th class="u-th" v-for="(num2,index2) in formData[item.key].length"
										:key="index2+'it'">{{item.text}}{{index2+1}}</u-th>
								</u-tr>
								<u-tr class="u-tr" v-for="(it,index) in item.list" :key="index+'it'">
										
									<u-td class="u-td" style="flex-direction: unset;">{{it.text}}<span v-if="it.isrequset"
											style="color:red">*</span></u-td>
									<u-td class="u-td"  style="flex-direction: unset;" v-for="(num2,index2) in formData[item.key].length" :key="index2+'it'">
										
										{{formData[item.key][index2][it.key]}}  <span style="color:#fff">.</span>
									</u-td>
										
								</u-tr>
										
							</u-table>
						</view>
						<view
							v-if="item.type.indexOf('tableList-horizontal')>-1&&formData[item.key]&&formData[item.key].length">
							<u-table>
								<u-tr class="u-tr">
										
									<u-th class="u-th" style="flex-direction: unset;" v-for="(it,index) in item.list"
										:key="index+'it'">{{it.text}}<span v-if="it.isrequset"
											style="color:red">*</span></u-th>
								</u-tr>
								<u-tr class="u-tr" v-for="(num2,index2) in formData[item.key].length" :key="index2+'it'">
										
										
									<u-td class="u-td"  style="flex-direction: unset;" v-for="(it,index) in item.list" :key="index+'it'">
										
										{{formData[item.key][index2][it.key]}}<span style="color:#fff">.</span>
										
									</u-td>
										
								</u-tr>
										
							</u-table>
						</view>
					</template>
					<template v-else>
						<view style="
								text-align: center;
								color: #777777;
								margin-bottom: 20px;
							">
							未填写
						</view>
					</template>
				</template>
				<template v-else>
		
		
					<view class="oawork-item1">
						<view class="oawork-item1_a">{{item.serial}}{{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">
								
								<u-input v-if="item.isEdit" v-model="formData[item.key]" :placeholder="'请输入'+item.text"
									:placeholderStyle="placeholderStyle" class="oawork-line"
									:customStyle="{textAlign: 'right1'}" />
									<span  v-else >{{formData[item.key]}}</span>
										
									
								</template>
								<template v-if="item.type.indexOf('textnumber')>-1">
									
									
									<u-input v-if="item.isEdit"  type="number"  maxlength="10" v-model="formData[item.key]" :placeholder="'请输入'+item.text"
										:placeholderStyle="placeholderStyle" class="oawork-line" 
										:customStyle="{textAlign: 'right1'}" />
										<span  v-else >{{formData[item.key]}}</span>
										
								</template>
		
								<template v-if="item.type.indexOf('radio')>-1">
								
									<!-- <u-radio-group   v-model="formData[item.key]">
										<u-radio :label-disabled="false" v-for="(item, index) in item.list?item.list:radioListDefault"
											:key="index" :name="item.value">
											{{item.name}}
										</u-radio>
									</u-radio-group> -->
									
									<span  v-for="(item2, index) in item.list?item.list:radioListDefault" :key="index" 
									v-if="formData[item.key]==item2.value||((formData[item.key]?1:0)==item2.value)" >
											{{item2.name}}
									</span>
		
								</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> -->
										{{formData[item.key]?formData[item.key]:getViewItem(item)}}
								</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>
									 -->
									{{formData[item.key]?formData[item.key]:createTime}}至{{formData[item.key2]?formData[item.key2]:createTime}}
								</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-if="item.isEdit" v-model="formData[item.key]"  :placeholder="'请输入'+item.text"
							 	:placeholderStyle="placeholderStyle" class="oawork-line" type="textarea" />
								
							<u-input v-else  v-model="formData[item.key]" 
							 
							 :customStyle="{fontSize: '16',color:'#000'}"
							 
							 placeholder="" :disabled="true"
								:placeholderStyle="placeholderStyle" class="oawork-line" type="textarea" />
							
						</template>
						<template v-if="item.type.indexOf('upload')>-1">
							<view class="upload">
		
								<u-upload-file-all  :isedit="0" ref="uUpload"  :max-size="50 * 1024 * 1024"
									:file-max-size="50 * 1024 * 1024" 
									 :file-list="fileList"></u-upload-file-all>
							</view>
						</template>
						<template v-if="item.type.indexOf('texteditor')>-1">
							 
							<view  class="ql-containerMain">
								
								<editor id="editor" class="ql-container"
								 
								 show-img-size
									show-img-toolbar show-img-resize 
									:read-only="true" @ready="onEditorReady(formData[item.key])">
								</editor>
							</view>
						</template>
		
					</view>
				</template>
		
			</view>
			
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/oa.js'
	export default {
		name:"ApproveInfo",
		props:{
			fieldInfo: {},
			personInfo: {},
			createTime: "",
			createTime2: "",
			stepNum:"",
		
			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 {
				stepSubmit:false,
				radioListDefault: [{
					name: '是',
					value: '1'
				}, {
					name: '否',
					value: '0'
				}, ],
				fieldList: [],
			};
		},
		created() {
			
		},
		methods:{
			submitApi() {
				 
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.formData.draftStatus = 0
				this.formData.applyDate=""
				API.application(this.fieldInfo.url, this.formData).then((res) => {
					uni.hideLoading();
				
					uni.showModal({
						title:"提示",
						showCancel:false,
						content:"操作成功！",
						
						success() {
							
						}
					})
					////(this.formData.maintenanceDescription,res.data.applyContent.maintenanceDescription)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			stepBtn(){
				this.submitApi()
			},
			// getRole(item){
			// 	if(item.role){
			// 		if(item.role.indexOf("step1")>-1){
			// 			this.stepSubmit=true
			// 			return true
			// 		}
			// 	}else{
			// 		return false
			// 	}
			// },
			onEditorReady(html) {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif
			
				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				
					if(this.editorCtx){
						var _this=this
						console.log(html)
						this.editorCtx.setContents({
							html:html
						})
					}
					
				}).exec()
				// #endif
			},
			
			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];
						//("viewSql",k,obj)
						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 !important;
	}
	



	.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;
					color: #777777;
				}

				.oawork-item1_b {
					//color: #777777;
					padding-left: 2px;
					color: #000;
					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-itemline{
			.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 {}
		}
		.oawork-width49,.oawork-width69,.oawork-width29{
			display: flex;
			padding: 4rpx 0px 4rpx 20rpx;
			.oawork-item1_a {
				font-size: 28rpx;
				min-width: 140rpx !important;
			}
		}
		.oawork-width49 {
			  
			width: 49%;

		}
		.oawork-width69 {
			  
			width: 69%;
		
		}
		.oawork-width29 {
			  
			width: 29%;
		
		}
	}


	.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%;
		}
	}
	.head-approve-main{
		background: #ffffff;
		.head-approve-info{
			background: #ffffff;
			margin-bottom: 8px;
			padding: 0px 8px 8px 8px;
		}
		.head-approve{
			padding: 8px 8px;
			background: #ffffff;
			
			
			font-size: 32rpx;
				
					 display: flex;
					 flex-wrap: wrap;
					  align-items: center;
					 justify-content: space-between;
			   
				.head-approve-a{
						display: flex;
						align-items: center;
						    flex-wrap: wrap;
				}
				.head-approve-a1{
						display: flex;
						align-items: center;
				}
				.head-approve-2{
					padding: 0 3px
				}
				.head-approve-b{
						padding: 2px 9px;
						border: 1px solid;
						border-radius: 18px;
							font-size: 24rpx;
				}
				
				
		}
	}
	//@import "../data/editor-icon.css";
	.ql-containerMain{
		border: 1px solid;
	}
</style>