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

<template>
	<view>
		<!-- 提交内容 -->
		<view class="content" v-if="list.length > 0">
			<!-- <view class="title">填写人：测试用户</view> -->

			<view class="inner" v-for="(item,index) in list" :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 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>



				<view class="input_box" v-if="item.fieldstype == 'changeuser'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(单选)：</view>
					<view class="box">
						<view class="box_label">
							<label v-for="(item_2,index_2) in item.data" :key="index_2">
								<checkbox style="transform:scale(0.7)" :value="item_2.name" :checked="true" />
								<text style="color: #007AFF;">{{item_2.name}}</text>
							</label>
						</view>
					</view>
				</view>
				<view class="input_box" v-if="item.fieldstype == 'changeuser'">
					<view class="label"><text v-if="item.isbt == 1"> * </text>{{item.name}}(单选)：</view>
					<view class="box">
						<view class="box_label">
							<label v-for="(item_2,index_2) in item.data" :key="index_2">
								<radio style="transform:scale(0.7)" :value="item_2.name" :checked="true" />
								<text style="color: #007AFF;">{{item_2.name}}</text>
							</label>
						</view>
					</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 == 'checkbox'">
					checkbox{{index}}{{item.isbt}}
				</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}}</view>
						<view>
							<uni-icons type="arrowdown"></uni-icons>
						</view>
					</view> -->

					<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 class="approval_box">
				<view class="title">审批</view>
				<view class="list">
					<view class="item" v-for="(item,index) in 6" :key="index">
						<view class="left">
							<view class="img">
								<image
									src="https://cdn.colorhub.me/mLTc_QwjdJe9PWaZ2Hy9vkjFMiV2uKzJRMj5qkPd9Ig/rs:fill:280:280:0/g:sm/bG9jYWw6Ly8vNTQv/ZDIvNDM2MTkxZGVi/NTYzMzk3NWZkNTUx/NjIzYWQzMzgxOWFk/NDdkNTRkMi5qcGc.jpg"
									mode="aspectFill"></image>

								<view class="tip">
									<uni-icons type="checkbox-filled" color="#31ED55"></uni-icons>
								</view>
							</view>

						</view>
						<view class="right">
							<view class="line">
								<view class="label">发起申请</view>
								<view class="time">2021.12.23 15:03</view>
							</view>
							<view class="line">
								<view class="name">主管姓名（已同意）</view>
							</view>
							<view class="line">
								<view class="tip">审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见</view>
							</view>
							<view class="line_bottom">
								<view class="tip">签名：</view>
								<view class="img">
									<image
										src="https://cdn.colorhub.me/uJ7lu7Vl6XmX4zqenjbVB245jjJitvFvA7AT6wS92Xs/rs:fill:280:280:0/g:sm/bG9jYWw6Ly8vNWQv/YTYvMDRmOGI1ZjA3/Y2MyMGQxZmU5ZmJm/Y2Q3NmQzNjI3OTA2/NjNjNWRhNi5qcGVn.jpg"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'
	export default {
		data() {
			return {
				mine_code: "",
				base_url: "",
				// 单据table
				table: "",
				// 单据项目
				list: [],

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


				popup_checkbox_group: []
			};
		},
		onLoad(option) {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			// 设置单据标题
			uni.setNavigationBarTitle({
				title: option.title
			})
			// 初始化单据标识
			this.table = "admin"

			// 获取单据详情
			this.get_detail()

		},
		methods: {
			// 获取单据详情
			get_detail() {
				uni.showLoading({
					mask: true
				})

				uni.request({
					method: "GET",
					url: this.base_url + "/workflow/get_detail",
					data: {
						table: this.table,
						staff_num: "123456"
					},
					success: (res) => {
						uni.hideLoading()
						console.log(res.data.content)

						let data = res.data.content.data

						this.list = data

						// 设置提交的初始值
						data.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() {
				// // 必填项是否全部填写
				// let isbt = true

				// this.inner_list.forEach((item,index)=>{
				// 	if(item.isbt == 1 && item.data == ""){
				// 		// 必填项不完整
				// 		isbt = false
				// 		console.log(item,index)
				// 		uni.showToast({
				// 			icon:"none",
				// 			title:"请补充必填项！"
				// 		})
				// 	}
				// })

				// console.log(isbt)


				// // 必填项全部填写提交
				// if(isbt){
				// 	console.log(this.list)
				// 	console.log(this.inner_list)
				// }

				console.log(this.inner_list)

				uni.showLoading({
					mask: true
				})
				uni.request({
					method: "POST",
					url: this.base_url + "/workflow/submit_apply",
					data: {
						data: this.inner_list
					},
					success: (res) => {
						uni.hideLoading()

						uni.showToast({
							icon: "none",
							title: "提交成功！"
						})
						console.log(res)
					}
				})
			},

			// 文本框
			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) {
			// 	uni.showActionSheet({
			// 		itemList: data,
			// 		success: (res) => {
			// 			console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			// 			this.inner_list[index].data = data[res.tapIndex]
			// 		},
			// 	});
			// },

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


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

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

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

		.title {
			line-height: 80rpx;
			color: #2980B9;
			font-size: 38rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

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

					.box_label {
						font-size: 28rpx;
						color: #666;

						display: flex;
						// justify-content: space-around;
						flex-wrap: wrap;
						.uni-label-pointer {
							display: flex;
							align-items: center;
							
							margin-right: 35rpx;
						}
					}
				}

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

				// 下拉选择 下拉菜单
				.select_box {
					display: flex;
					justify-content: space-between;
				}
			}
		}


		.approval_box {
			width: 650rpx;

			.title {
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}

			.list {
				margin-left: 50rpx;

				.item {
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;

					border-left: 2rpx solid #DCDCDC;

					.left {
						position: relative;
						left: -50rpx;

						.img {
							width: 100rpx;
							height: 100rpx;

							position: relative;

							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								overflow: hidden;
							}

							.tip {
								position: absolute;
								bottom: -10rpx;
								right: -10rpx;
							}
						}

					}

					.right {
						.line {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.label {}

							.time {
								font-size: 28rpx;
								color: #a9a9a9;
							}

							.name {
								height: 80rpx;
								line-height: 80rpx;
								font-size: 28rpx;
								color: #a9a9a9;
							}

							.tip {
								background-color: #E5E5E5;
								border-radius: 6rpx;
								color: #666666;
								font-size: 28rpx;
								box-sizing: border-box;
								padding: 10rpx;
							}
						}

						.line_bottom {
							margin-top: 30rpx;
							padding-bottom: 20rpx;
							border-bottom: 2rpx solid #DCDCDC;
							display: flex;

							.tip {
								font-size: 28rpx;
								color: #a9a9a9;
							}

							.img {
								image {
									width: 280rpx;
									height: 90rpx;
								}
							}
						}
					}
				}

				.item:last-child {
					border: 0;

					.line_bottom {
						border: 0;
					}
				}
			}
		}
	}
</style>