uni-zhihuikuangshan/pages/origanization/OA/approval_list/approval/approval.vue

<template>
	<view>
		<!-- 申请的内容 -->
		<view class="content" v-if="flow_element.length > 0">
			<view class="inner" v-for="(item,index) in flow_element" :key="index">
				<!-- 文本框 -->
				<view class="input_box" v-if="item.fieldstype == 'text'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box">
						<input type="text" @blur="blur_text($event,index)" :placeholder="'请输入'+item.name" />
					</view>
				</view>
				<!-- 文本域 -->
				<view class="input_box" v-if="item.fieldstype == 'textarea'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}</view>
					<view class="box">
						<textarea @blur="blur_textarea($event,index)" auto-height="true"
							:placeholder="'请输入'+item.name" />
					</view>
				</view>
				<!-- 日期(Y-m-d 的日期格式) -->
				<view class="input_box" v-if="item.fieldstype == 'date'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box date_box">
						<uni-datetime-picker type="date" @change="change_time($event,index)" />
					</view>
				</view>
				<!-- Y-m-d H:i:s的格式 -->
				<view class="input_box" v-if="item.fieldstype == 'datetime'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box date_box">
						<uni-datetime-picker type="datetime" @change="change_time($event,index)" />
					</view>
				</view>
				<!-- 选择人员(多选) 返回{"id","name"}格式，提交时传id -->
				<view class="input_box" v-if="item.fieldstype == 'changeusercheck'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(多选)：</view>
					<view class="box">
						<uni-data-checkbox multiple :map="{text:'name',value:'id'}" :localdata="item.data"
							@change="change_select_box($event,index)"></uni-data-checkbox>
					</view>
				</view>
				<!-- 选择人员(单选) 返回{"id","name"}格式，提交时传id -->
				<view class="input_box" v-if="item.fieldstype == 'changeuser'">
					<view class="label"><text> * </text>{{item.name}}(单选)：</view>
					<view class="box_picker">
						<uni-data-picker popup-title="-" :localdata="user_list" @nodeclick="onnodeclick($event,index)">
						</uni-data-picker>
					</view>
				</view>
				<!-- 选择部门(单选) 返回{"id","name"}格式，提交时传id -->
				<view class="input_box" v-if="item.fieldstype == 'changedept'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(单选)：</view>
					<view class="box">
						<uni-data-checkbox :map="{text:'name',value:'id'}" :localdata="item.data.children[0].children"
							@change="change_select_box($event,index)"></uni-data-checkbox>
					</view>
				</view>
				<!-- 选择部门(多选) 返回{"id","name"}格式，提交时传id -->
				<view class="input_box" v-if="item.fieldstype == 'changedeptcheck'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(多选)：</view>
					<view class="box">
						<uni-data-checkbox multiple :map="{text:'name',value:'id'}"
							:localdata="item.data.children[0].children" @change="change_select_box($event,index)">
						</uni-data-checkbox>
					</view>
				</view>
				<!-- 多个复选框 返回{"key":"val"}格式，提交时传key	 -->
				<view class="input_box" v-if="item.fieldstype == 'checkboxall'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box">
						<uni-data-checkbox multiple :map="{text:'name',value:'id'}" :localdata="item.data"
							@change="change_select_box($event,index)"></uni-data-checkbox>
					</view>
				</view>
				<!-- 固定值 -->
				<view class="input_box" v-if="item.fieldstype == 'fixed'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box">
						{{inner_list[index].data}}
					</view>
				</view>
				<!-- 隐藏文本框 -->
				<view class="input_box" v-if="item.fieldstype == 'hidden'" v-show="false">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box">
						{{inner_list[index].data}}
					</view>
				</view>
				<!-- 数字 -->
				<view class="input_box" v-if="item.fieldstype == 'number'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box">
						<input type="number" @blur="blur_text($event,index)" :placeholder="'请输入'+item.name" />
					</view>
				</view>
				<!-- 单选框 返回{"key":"val"}格式，提交时传key -->
				<view class="input_box" v-if="item.fieldstype == 'radio'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(单选)：</view>
					<view class="box">
						<uni-data-checkbox :map="{text:'name',value:'id'}" :localdata="item.data"
							@change="change_select_box($event,index)"></uni-data-checkbox>
					</view>
				</view>
				<!-- 下拉框 返回{"key":"val"}格式，提交时传key -->
				<view class="input_box" v-if="item.fieldstype == 'select'">
					<!-- 下拉框形式 -->
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：下拉框{{index}}</view>
					<view class="box select_box" @click="select_showActionSheet(item.data,index)">
						<view>{{inner_list[index].data.name}}</view>
						<view>
							<uni-icons type="arrowdown"></uni-icons>
						</view>
					</view>

					<!-- radio形式 -->
					<!-- <view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(单选)：</view>
					<view class="box">
						<uni-data-checkbox :map="{text:'name',value:'id'}" :localdata="item.data"
							@change="change_select_box($event,index)"></uni-data-checkbox>
					</view> -->
				</view>
				<!-- H:i:s的格式 -->
				<view class="input_box" v-if="item.fieldstype == 'time'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}：</view>
					<view class="box">
						<picker mode="time" :value="inner_list[index].data" @change="bindTimeChange($event,index)">
							<view class="uni-input" v-if="inner_list[index].data != ''">{{inner_list[index].data}}
							</view>
							<view class="uni-input" v-if="inner_list[index].data == ''">请选择时间</view>
						</picker>
					</view>

				</view>

			</view>
		</view>
		
		
		<!-- 当前审批步骤 -->
		<view class="content" v-if="flow_course.length > 0 && item.checkfields" v-for="(item,index) in flow_course" :key="index">
			<view>{{item.name}}</view>
			
			<view class="inner" v-for="(item_2,index_2) in item.formfields" :key="index_2">
				<!-- 文本框 -->
				{{item_2}}
			</view>
			

			<view class="approval_btn">
				<view class="btn" v-for="(item,index) in item.courseact">{{item}}</view>
			</view>
			
			<view class="btn" @click="submit()">提交</view>
		</view>

		



	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'
	export default {
		data() {
			return {
				mine_code: "",
				base_url: "",


				// 流程id
				flow_set_id: "",
				// 单据table
				table: "",
				// 单据项目
				flow_element: [],

				// 审批项目
				flow_course: [],

				// 需要提交的数据
				inner_list: [],

				// 全矿人员数据
				user_list: []
			};
		},
		onLoad(option) {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)

			// 设置流程id
			this.flow_set_id = option.flow_set_id
			// 设置单据标题
			uni.setNavigationBarTitle({
				title: option.title
			})
			// 初始化单据标识
			this.table = "admin"

			// 获取单据详情
			this.get_detail()
			// 获取部门和人员
			this.get_user()
		},
		methods: {
			// 获取单据详情
			get_detail() {
				uni.showLoading({
					mask: true
				})
				this.$api.workflow_get_detail({
					flow_set_id: this.flow_set_id,
					staff_num: uni.getStorageSync('user').staff_num
				}).then((res) => {
					uni.hideLoading()
					console.log(res.data.content.data)

					let data = res.data.content.data

					this.flow_element = data.flow_element
					this.flow_course = data.flow_course

					// 设置提交的初始值
					this.flow_element.forEach((item, index) => {
						this.inner_list.push({
							fields: item.fields,
							fieldstype: item.fieldstype,
							isbt: item.isbt,
							name: item.name,
							data: ""
						})

						// 固定值
						if (item.fieldstype == 'fixed') {
							this.inner_list[index].data = item.data
						}
						// 隐藏文本框
						if (item.fieldstype == 'hidden') {
							this.inner_list[index].data = item.data
						}

					})

				})

			},
			// 提交内容
			submit() {
				console.log(this.inner_list)

				// uni.showLoading({
				// 	mask: true
				// })

				// this.$api.workflow_submit_apply({
				// 	flow_set_id: this.flow_set_id,
				// 	staff_num: uni.getStorageSync('user').staff_num,
				// 	data_list: JSON.stringify(this.inner_list)
				// }).then((res) => {
				// 	uni.hideLoading()

				// 	if (res.data.code == '0000') {
				// 		uni.showToast({
				// 			icon: "none",
				// 			title: res.data.content.msg
				// 		})
				// 	} else {

				// 	}

				// 	console.log(res.data)
				// })

			},


			// 获取部门和人员
			get_user() {
				this.$api.section_getSectionStaff({

				}).then((res) => {
					// console.log(res.data.data)
					this.user_list = res.data.data
				})
			},

			// 文本框
			blur_text(e, index) {
				console.log(e.detail.value, index)

				this.inner_list[index].data = e.detail.value
			},

			// 文本域
			blur_textarea(e, index) {
				console.log(e.detail.value, index)

				this.inner_list[index].data = e.detail.value
			},

			// 日期(Y-m-d 的日期格式)
			change_time(e, index) {
				console.log("-change事件:", e, index);

				this.inner_list[index].data = e
			},


			// 多选人员 选择部门(单选) 选择部门(多选) 
			change_select_box(e, index) {
				console.log(e.detail.value, index)

				this.inner_list[index].data = e.detail.value
			},

			// 下拉框
			select_showActionSheet(data, index) {
				let array = []

				data.forEach((item, index) => {
					array.push(item.name)
				})

				uni.showActionSheet({
					itemList: array,
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						console.log(data[res.tapIndex].id, index)
						this.inner_list[index].data = data[res.tapIndex]
					},
				});


				// 上传图片
				// uni.chooseImage({
				// 	count: 1,
				// 	sourceType: ['camera'],
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		console.log(tempFilePaths)
				// 		console.log(chooseImageRes.tempFiles[0]);


				// 		uni.uploadFile({
				// 			url: this.base_url + "/worksheet/design/up_images",
				// 			header: {
				// 				'Authorization': 'Bearer ' + uni.getStorageSync('Authorization')
				// 			},
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			// formData只有H5存在
				// 			formData: {
				// 				image: chooseImageRes.tempFiles[0]
				// 			},
				// 			success: (uploadFileRes) => {
				// 				console.log(uploadFileRes)
				// 				console.log(uploadFileRes.data);
				// 				console.log(JSON.parse(uploadFileRes.data));


				// 			}
				// 		});
				// 	}
				// })
			},

			// time
			bindTimeChange(e, index) {
				console.log(e.detail.value, index)
				this.inner_list[index].data = e.detail.value
			},


			// 从全矿人员里单选
			onnodeclick(node, index) {
				console.log(node.value, index)
				this.inner_list[index].data = node.value
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #009FE8;
		box-sizing: border-box;
		padding: 25rpx;
	}

	.content {
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		box-sizing: border-box;
		padding: 30rpx 25rpx;

		.inner {
			margin-bottom: 25rpx;

			.input_box {
				font-size: 32rpx;

				.label {
					margin: 15rpx 0;
					line-height: 50rpx;
					color: #6C6F74;

					text {
						color: red;
					}
				}

				.box {
					width: 650rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #E9EBF2;

					box-sizing: border-box;
					padding: 20rpx 25rpx;

					// 文本域
					textarea {
						min-height: 120rpx;
					}

					// 选择时间
					/deep/.uni-date-editor--x {
						.uniui-clear {
							display: none;
						}
					}

					/deep/.uni-date-x--border {
						box-sizing: border-box;
						border-radius: 4px;
						border: none;
					}

					/deep/.uni-date-x {
						padding: 0;
					}
				}

				// 日期(Y-m-d 的日期格式)
				.date_box {
					padding: 2rpx 25rpx;
				}

				// 下拉选择 下拉菜单
				.select_box {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
	
	.btn {
		margin-top: 40rpx;
		background-color: #009FE8;
		padding: 25rpx 50rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	.approval_btn {
		margin-top: 40rpx;

		display: flex;
		justify-content: space-between;

		.btn {
			width: 250rpx;
			background-color: #009FE8;
			padding: 25rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.btn:nth-child(2) {
			background-color: #E43D33;
		}

	}
</style>