jp-railway/pages/oawork/waybill/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-if="item.type.indexOf('tableList')>-1&&formData[item.key]&&formData[item.key].length">
					<view v-if="item.type.indexOf('tableList-vertical')>-1">
						<u-table  align="left">
							<u-tr class="u-tr">
								<u-th class="u-th"></u-th>
								<u-th class="u-th" v-for="(num2,index2) in item.num"
									: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" v-for="(num2,index2) in item.num" :key="index2+'it'">

									<u-input v-model="formData[item.key][index2][it.key]" :placeholder="'填写'+it.text" 
										:placeholderStyle="placeholderStyle" class="oawork-line" :type="it.unit"
										:maxlength="it.unit?10:20"
										:customStyle="{textAlign: 'right1',    minHeight: 0}" />
								</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 align="left">
							<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 item.num" :key="index2+'it'">


								<u-td class="u-td" v-for="(it,index) in item.list" :key="index+'it'">

									<u-input v-model="formData[item.key][index2][it.key]" :placeholder="'填写'+it.text"
										:placeholderStyle="placeholderStyle" class="oawork-line" :type="it.unit"
										:customStyle="{textAlign: 'right1',    minHeight: 0}" />

								</u-td>

							</u-tr>

						</u-table>
					</view>
				</template>
				<template v-else>


					<view class="oawork-item1">
						<view class="oawork-item1_a" v-if="item.text">{{item.serial}}{{item.text}}<span
								v-if="item.isrequset" style="color:red">*</span>
						</view>
						<view class="oawork-item1_b"
							v-if="item.role==null||item.role.indexOf('0')>-1||item.role.indexOf('0')>-1">
							<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: 'right1'}" />

								</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: 'right1'}" />

								</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"
						v-if="item.role==null||item.role.indexOf('0')>-1||item.role.indexOf('0')>-1">

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



					</view>
				</template>

			</view>
			<view class="submitBtn"  v-if="isReady">
				<u-button type="info"  :class="{
					submitBtn30:isReady
				}" @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 = 11
			

			this.fieldInfo = dataJsGetInfo(this.oatype)

			this.fieldList = this.fieldInfo.list;
			this.init()

			if (op.id) {
				this.id = op.id
				this.getProcessDetails();
				
			}

		},
		computed: {

		},
		methods: {
			sum1() {
				var num = 0;
				console.log("sum1sum1sum1")
				for (var i in this.formData.waybillCostList) {
					var item = this.formData.waybillCostList[i]

					if (item.amount) {
						num += item.amount
					}

				}

				return num
			},
			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) {
							console.log(item.key)
							uni.showToast({
								title: "请输入" + item.text,
								icon: "none"
							})
							return false
						}

					}
				}
				return true
			},

			submit(draftStatus) {

				this.submitApi(draftStatus);
			},
			submitApi(draftStatus) {

				var submitObj = {

					...this.formData
				}
				if (draftStatus) {
					var c = this.inspect()
					if (!c) {
						return
					}
				}
				
				var draftStatusBl=false;
				var draftStatusBlName='';
				// submitObj.waybillInfo.waybillCostList=''
				// submitObj.waybillInfo.waybillGoodsList=''
				var sz1 = [ "waybillGoodsList","waybillCostList"]
				var szBl1 = ["货物列表", "现付费用"]
				var szBl2 = ["货品名称", "费别"]
				var szBl3 = ["name", "category"]
				
				for (var i in sz1) {

					var key = sz1[i]
					var sz2 = []

					var sz3 = submitObj[key];
					var sortNo = 1;
					for (var j in sz3) {
						var obj = sz3[j]
						var bl = false
						for (var k in obj) {
							
							if (obj[k] != '') {
								bl = true
							}
							
						}
					
						if(draftStatus&&bl){
							var draftStatuskey=szBl3[i]
								console.log(draftStatus,bl,obj[draftStatuskey],obj,draftStatuskey)
							if(obj[draftStatuskey] == ''){
								draftStatusBl=true
								console.log("szBl1"+szBl1[i]+szBl2[i])
								draftStatusBlName=szBl1[i]+"-"+szBl2[i];
								uni.showToast({
									title: "请完整填写一条" + draftStatusBlName,
									icon: "none"
								})
								return
							}
						}
						
						if (bl) {
							obj.sortNo = sortNo
							sortNo++;
							sz2.push(obj);
						}
					}
					submitObj[key] = sz2
				}
				 
		
				 

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				submitObj.status = draftStatus?0:-1

				API.applyWayBill(submitObj).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.waybillDetails({
					formId: this.oatype,
					id: this.id
				}).then((res) => {
					uni.hideLoading();

					var applyContent = res.data.waybillInfo

					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
							}
							console.log(obj.key,applyContent[obj.key])
							this.formData[obj.key] = applyContent[obj.key]
							
							if (obj.type.indexOf('tableList') > -1) {
								//var sz = []
							
								for (var k = this.formData[obj.key].length; k < obj.num; k++) {
									var ob = {}
									for (var j in obj.list) {
										var io = obj.list[j]
										ob[io.key] = ""
									}
									this.formData[obj.key].push(ob)
								}
								//this.formData[obj.key] = sz
							}
							if(applyContent.status!=-1){
								this.isReady=false
							}

						}
						
							this.$forceUpdate();

					}
					
				}).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] = ""
					if (obj.type.indexOf('texteditor') > -1) {
						this.themeWordKey = obj.key
						console.log("this.themeWordKey", this.themeWordKey)
					}
					if (obj.type.indexOf('tableList') > -1) {
						var sz = []

						for (var k = 0; k < obj.num; k++) {
							var ob = {}
							for (var j in obj.list) {
								var io = obj.list[j]
								ob[io.key] = ""
							}
							sz.push(ob)
						}
						this.formData[obj.key] = sz
					}
				}
				console.log(this.formData)

				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;
				}
				return "填写" + item.text;
			},
			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;
	}

	.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: 180rpx;
		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: 2rpx;
				}

			}

		}

		.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-texteditor {
			margin-top: 10px;
		}

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

		/deep/.oawork-width49 {
			padding: 4rpx 0px 4rpx 10rpx;
			width: 49%;

			.oawork-item1_a {
				font-size: 28rpx;
				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>