jp-railway/pages/oawork/business/add.vue

<template>
	<view>
		<u-navbar :titleLong="fieldInfo.title" >
			
		</u-navbar>
		<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" :action="action"
								  :max-size="50 * 1024 * 1024"
								  :file-max-size="50 * 1024 * 1024"
								   :maxCount="9"
								  :form-data="uploadData" :header="header"
								 :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 class="approveMain">
			<view class="approveMain_text" >流程</view>
			<u-time-line>
			
				<u-time-line-item node-top="10" v-for="(item,i) in approveList" :key="i"  >
					<template v-slot:node>
						<view>
							<view class="u-node" style="background:#CDCDCD;">
								<!-- 此处为uView的icon组件 -->
								<!-- <u-icon name="checkmark" color="#fff" :size="24"></u-icon> -->
							</view>
						</view>
					</template>
					<template v-slot:content>
						<view class="approveItem_main">
							<view class="approveItem_a1">
								<view class="approveItem_a1_text1">
									一级审批人
								</view>
								<view class="approveItem_a1_text2">
									请选择审批人
								</view>
								<view class="approveItem_a1_text3">
									<view class="approveItem_a1_text3Img">
										
									
										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
									</view><view class="approveItem_a1_text3Img">
										

										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
									</view><view class="approveItem_a1_text3Img">
										

										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
									</view><view class="approveItem_a1_text3Img">
										

										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
									</view><view class="approveItem_a1_text3Img">
										

										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
									</view><view class="approveItem_a1_text3Img">
										

										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
									</view>
									<view  class="approveItem_a1_text3Img">
										
									
										<u-avatar size="56" class="img" ></u-avatar>
										<u-badge size="mini" count="x" type="info" :absolute="false">
											
										</u-badge>
										
										<view>晓丽</view>
										
									</view>
								</view>
							</view>
							<view class="approveItem_a2">
								
								<view class="a2_span" @click="gotoSelectPerson(item)" >+</view>
								<span class="a2_span_2">*</span>
							</view>
							
						</view>
						
					</template>
				</u-time-line-item>
				
				
			</u-time-line>
		</view>
		
	</view>
</template>

<script>
	import {
		dataJsGetInfo
	}  from './data.js'
	
	import {
		
		currentTimeStamp,
		parseUnixTime,
	
	} from '@/apis/utils'
	
	
	export default {
		data() {
			return {
				//editor
				readOnly: false,
				formats: {},
				//editor
				oatype:"",
				
				showCalendar:false,
				keyCalendar:{},
				placeholderStyle:"font-size: 24rpx",
				radioListDefault:[
					{
										name: '是',
										value: '1'
					},{
										name: '否',
										value: '0'
					},
				],
				fieldInfo:{},
				fieldList:[],
				approveList:[
					{},{},{},{},{},
				],
				action:"",
				formData:{},
				personInfo:{},
				createTime:"",
				createTime2:"",
				uploadData:{},
				fileList:[],
				header:{
					
				},
				placeholder: '开始输入...'

			}
		},
		onLoad(op){
			this.oatype=op.oatype
			this.fieldInfo=dataJsGetInfo(op.oatype)
			console.log(this.fieldInfo)
			this.fieldList=this.fieldInfo.list;
			this.init()
		
		
		},
		methods: {
			saveStorage(){
				
			},
			gotoSelectPerson(item){
				this.saveStorage();
				
				uni.navigateTo({
					url:"/pages/oawork/business/select"
				})
			},
			changeCalendar(e){
				this.formData[this.keyCalendar.key]=e.result;
			},
			changeCalendar2(e){
				this.formData[this.keyCalendar.key]=e.startDate;
				this.formData[this.keyCalendar.key2]=e.endDate;
			},
			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.sql){
					var obj=this;
					for(var i  in  item.sql){
						var k=item.sql[i];
						obj=obj[k]
					}
					return obj;
				}
			},
			getClass(item){
				
				if(item){
					var list=item.type.map(it=>{
						return 'oawork-'+it
					})
					return list.join(' ')
				}
				
			},
			//editor
			readOnlyChange() {
					this.readOnly = !this.readOnly
				},
				onEditorReady() {
					// #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
					}).exec()
					// #endif
				},
				undo() {
					this.editorCtx.undo()
				},
				redo() {
					this.editorCtx.redo()
				},
				format(e) {
					let {
						name,
						value
					} = e.target.dataset
					if (!name) return
					// console.log('format', name, value)
					this.editorCtx.format(name, value)
				},
				onStatusChange(e) {
					const formats = e.detail
					this.formats = formats
				},
				insertDivider() {
					this.editorCtx.insertDivider({
						success: function() {
							console.log('insert divider success')
						}
					})
				},
				clear() {
					uni.showModal({
						title: '清空编辑器',
						content: '确定清空编辑器全部内容？',
						success: res => {
							if (res.confirm) {
								this.editorCtx.clear({
									success: function(res) {
										console.log("clear success")
									}
								})
							}
						}
					})
				},
				removeFormat() {
					this.editorCtx.removeFormat()
				},
				insertDate() {
					const date = new Date()
					const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
					this.editorCtx.insertText({
						text: formatDate
					})
				},
				insertImage() {
					uni.chooseImage({
						count: 1,
						success: (res) => {
							this.editorCtx.insertImage({
								src: res.tempFilePaths[0],
								alt: '图像',
								success: function() {
									console.log('insert image success')
								}
							})
						}
					})
				},
			
			//editor
		}
	}
</script>

<style  scoped lang="scss">
	.oawork-line{
		border-bottom: 1px solid #c8c8c8;
	}
	.oawork-paddingTop{
		padding-top: 40rpx;
	}
	
	.approveMain_text{
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		padding-bottom: 20rpx;
		padding-left: 32rpx;
		 border-bottom: 1px solid #C8C8C8;
		     margin-bottom: 16rpx;
		// padding-top: 32rpx;
	}
	
	.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;
				}
			}
	}
	
	.approveMain{
		background: #fff;
		padding-bottom: 80rpx;
		padding-top: 20rpx;
		.approveItem_main{
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			margin-right: 32rpx;
			
			.approveItem_a1{
				
				.approveItem_a1_text1{
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
				.approveItem_a1_text2{
					margin-bottom: 16rpx;
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
				}
				.approveItem_a1_text3{
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
					display: flex;
					 flex-direction: row;
					 flex-wrap: wrap;
					.approveItem_a1_text3Img{
						 margin-right: 40rpx;
						 margin-top: 10rpx;
						 /deep/.u-badge {
							     position: relative !important;
								     top: -40rpx !important;
								     right: 10rpx !important;
						 }
						
					} 
					
				}
			}
			.approveItem_a2{
				.a2_span{
					border-radius: 4px;
					text-align: center;
					border: 1px solid rgba(227, 227, 227, 1);
					width: 72rpx;
					height: 72rpx;
					    line-height: 60rpx;
					    font-size: 48rpx;
					color:#9F9F9F ;
				}
				.a2_span_2{
					position: relative;
					    top: -84rpx;
					    left: 60rpx;
					    color: red;
				}
			}
		}
		
	}
	.u-node {
		width: 18rpx;
		height: 18rpx;
		border-radius: 100rpx !important;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	@import "./data/editor-icon.css";
</style>