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 class="submitBtn" v-if="isReady">
				<u-button type="info" class="submitBtn30" @click="submit(0)">保存</u-button>
				<u-button type="primary" class="submitBtn60" @click="submit(1)">提交</u-button>
			</view>
		</view>
		<approve-view :activityList="activityList" :initStart="false"></approve-view>
		



	</view>
</template>

<script>
	import {
		dataJsGetInfo
	} from '../data.js'
	import * as API from '@/apis/pagejs/oa.js'
	import approveView from '@/components/ApproveView.vue'

	import {

		currentTimeStamp,
		parseUnixTime,

	} from '@/apis/utils'


	export default {
		components: {
			approveView
		},
		data() {
			return {
				//editor
				readOnly: false,
				formats: {},
				editorCtx:"",
				//editor
				oatype: "",

				showCalendar: false,
				keyCalendar: {},
				placeholderStyle: "font-size: 24rpx",
				radioListDefault: [{
					name: '是',
					value: '1'
				}, {
					name: '否',
					value: '0'
				}, ],
				fieldInfo: {},
				fieldList: [],
				activityList: [

				],
				action: "",
				formData: {},
				personInfo: {},
				createTime: "",
				createTime2: "",
				uploadData: {},
				fileList: [],
				header: {

				},
				id: "",
				placeholder: '开始输入...',
				isReady:true,
				themeWordKey:"",
			}
		},
		onLoad(op) {
			this.oatype = op.oatype
			if (op.id) {
				this.id = op.id
			}

			this.fieldInfo = dataJsGetInfo(op.oatype)
			
			this.fieldList = this.fieldInfo.list;

			this.getProcessDetails();

		},
		methods: {
			inspect(){
				// if (!this.form.verifyCode) {
				// 	uni.showToast({
				// 		title: "请输入验证码",
				// 		icon: "none"
				// 	})
				// 	return
				// }
				
				for(var i in  this.fieldList){
					var item=this.fieldList[i]
					if(item.isrequset){
						//(item)
						var key=this.formData[item.key]
						if(!key){
								uni.showToast({
									title: "请输入"+item.text,
									icon: "none"
								})
								return false
						}
						
					}
				}
				return true
			},
			
			submit(draftStatus) {
				if(this.editorCtx){
					var _this=this
					this.formData[this.themeWordKey]=this.editorCtx.getContents({
						success(obj){
							_this.formData[_this.themeWordKey]=obj.html
							console.log(obj.html)
							_this.submitApi(draftStatus);
						}
					})
				}else{
					this.submitApi(draftStatus);
				}
			},
			submitApi(draftStatus) {
				if(draftStatus){
					var c=this.inspect()
					if(!c){
						return
					}
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.formData.draftStatus = draftStatus
				this.formData.formId = this.oatype
				
				
				
			
				if(this.$refs.uUpload){
					var list=this.$refs.uUpload[0].lists.filter(val => {
						return val.progress == 100;
					})
					if(list.length){
						var str =list.map(item=>{
							//(item)
							return JSON.stringify( {
								name:item.file?item.file.name:item.name,
								url:item.response?item.response.data.fileUrl:item.url
							})
						})
						this.formData.annexFile=JSON.stringify(str)
						
					}
				}
				
				
				API.application(this.fieldInfo.url, this.formData).then((res) => {
					uni.hideLoading();
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refreshData');
					uni.showModal({
						title:"提示",
						showCancel:false,
						content:"操作成功！",
						
						success() {
							uni.navigateBack()
						}
					})
					////(this.formData.maintenanceDescription,res.data.applyContent.maintenanceDescription)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getProcessDetails() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.processDetails({
					formId: this.oatype,
					id: this.id
				}).then((res) => {
					uni.hideLoading();
					this.activityList = res.data.activityList
					var applyContent = res.data.applyContent
					this.init()
					if(applyContent){
						this.formData.id=applyContent.id
						for (var i in this.fieldList) {
							var obj = this.fieldList[i];
							//(this.formData[obj.key], applyContent[obj.key])
							var data=applyContent[obj.key];
							if(data==null){
								continue
							}
							if (obj.type.indexOf("upload") > -1) {
								if(data){
									 
									var sz=JSON.parse(data).map(str=>{
										var item=JSON.parse(str)
										return {
											url:item.url,name:item.name,view:1
										}
									})
									
									this.fileList=sz//data.split(",").map(item=>{return {url:item,item.name=,view:1}})
								}
								
							} 
							this.formData[obj.key] = applyContent[obj.key]
						
						}
						
						if(this.editorCtx){
							var _this=this
							//console.log(_this.formData.themeWord)
							this.editorCtx.setContents({
								html:_this.formData[_this.themeWordKey]
							})
						}
						
					}
					
					//console.log("formData",this.formData)
					////(this.formData.maintenanceDescription,res.data.applyContent.maintenanceDescription)
				}).catch(error => {
					this.isReady=false;
					if(!error){
						error="未配置审批流程，请联系管理员"
					}
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			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] = ""
					if(obj.type.indexOf('texteditor')>-1){
						this.themeWordKey=obj.key
						console.log("this.themeWordKey",this.themeWordKey)
					}
				}

				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.sql) {
					var obj = this;
					for (var i in item.sql) {
						var k = item.sql[i];
						obj = obj[k]
						this.formData[item.key]=obj
					}
					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
				
					if(this.editorCtx){
						var _this=this
						//console.log(_this.formData.themeWord)
						this.editorCtx.setContents({
							html:_this.formData[_this.themeWordKey]
						})
					}
					
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// //('format', name, value)
				this.editorCtx.format(name, value)
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						//('insert divider success')
					}
				})
			},
			clear() {
				uni.showModal({
					title: '清空编辑器',
					content: '确定清空编辑器全部内容？',
					success: res => {
						if (res.confirm) {
							this.editorCtx.clear({
								success: function(res) {
									//("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() {
								//('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-itemline {
		// 	.oawork-item1_a {
				
		// 		width: 100%;
		// 	}
		// }
		.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: 180rpx;
		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;
	}

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

		.submitBtn30 {
			width: 30%;
		}

		.submitBtn60 {
			width: 60%;
		}
	}

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