jp-railway/pages/oawork/approve/view.vue

<template>
	<view>
		<u-navbar title="详情查看">
		
		</u-navbar>
		<approve-info  v-if="viewApproveBl"
		:fieldInfo="fieldInfo" :formData="formData"   :fileList="fileList" ></approve-info>
		
		<view class="submitBtn" v-if="0">
			<u-button type="info" class="submitBtn30">保存</u-button>
			<u-button type="primary" class="submitBtn60" >提交</u-button>
		</view>
		<approve-view  :activityList="activityList"></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 approveInfo from '@/components/ApproveInfo.vue'
	
	import {

		currentTimeStamp,
		parseUnixTime,

	} from '@/apis/utils'


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

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

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

				},
				viewApproveBl:false,
				id: "",
				placeholder: '开始输入...'

			}
		},
		onLoad(op) {
			this.oatype = op.oatype
			if (op.id) {
				this.id = op.id
			}

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

			this.getProcessDetails();

		},
		methods: {
			submit(draftStatus) {
				
			},
			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
						this.formData={
							...applyContent,
							...this.formData
						}
						
						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]
						
						}
					}
					this.viewApproveBl=true

					//(this.formData)
				}).catch(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] = ""
				}

				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]
					}
					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
				// //('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;
	}



	.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>