snapshot-wx/pagesBase/Write/WeldingOperations.vue

<template>
	<view style="position: relative;" v-show="isShow">
		<form @submit="onSubmit">
			<scroll-view scroll-y class="container">
				<div class="helpBox">
					<semp-notice-bar scrollable showType="slider" icon="sound" setIconColor="#eb9064" round bgColor="#fff" :strText="helpTips" @tap="onOperateIllustrateTo"></semp-notice-bar>
				</div>
				<view class="formBox">
					<view class="hiddenDangerBox">
						<view class="hiddenDangerItemBox workBox" style="margin-top: 0px;">
							<view class="hiddenDangerHeader">申报信息</view>
							<view class="hiddenDangerBody">
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>作业类型</view>
									<view class="fway-form-input-select">
										<radio-group @change="bindWorkTypeChange">
											<label class="fway-form-checkbox" v-for="(item, index) in WorkTypeData" :key="index">
												<radio style="transform:scale(0.8);" color="#3e6ffd" :value="item.dicDataName"></radio>{{item.dicDataName}}
											</label>
										</radio-group>
									</view>
								</view>
								<view class="fway-form-item" v-show="data.jobType == '气割'">
									<view class="fway-form-lable" style="width: 260rpx;"><text class="mustTips">*</text>购气单位/个人名称</view>
									<view class="fway-form-input-inline" style="width: calc(100% - 290rpx);">
										<input type="text" class="fway-form-input" placeholder="请填写购气单位/个人名称" v-model="data.companyName" @tap="inputTap" data-focus="companyName" :focus="focusID == 'companyName' ? true : false" />
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable" style="width: 300rpx;"><text class="mustTips">*</text>经营单位类别（甲方）</view>
									<view class="fway-form-input-select" style="width: calc(100% - 330rpx);">
										<radio-group @change="bindUnitTypeChange">
											<label class="fway-form-checkbox" v-for="(item, index) in UnitTypeData" :key="index">
												<radio style="transform:scale(0.8);" color="#3e6ffd" :value="item.dicDataName"></radio>{{item.dicDataName}}
											</label>
										</radio-group>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>作业场所</view>
									<view class="fway-form-input-select">
										<picker mode="selector" placeholder="请选择作业所属场所" :range="PlaceData" :value="indexPlace" @change="bindPlaceChange" range-key="dicDataName">
											<view class="fway-form-input" :class="indexPlace == -1 ? 'fway-form-place' : ''">
												{{ indexPlace == -1 ?  '请选择作业所属场所' : PlaceData[indexPlace].dicDataName }}
											</view>
										</picker>
										<image class="fway-form-selectImg" mode="aspectFill" src="/static/img/common/selectImg.png"></image>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>场所名称</view>
									<view class="fway-form-input-select">
										<picker mode="selector" placeholder="请选择场所名称" :range="FirstPlaceNameData" :value="indexFirstPlaceName" @change="bindFirstPlaceNameChange" range-key="dicDataName">
											<view class="fway-form-input" :class="indexFirstPlaceName == -1 ? 'fway-form-place' : ''">
												{{ indexFirstPlaceName == -1 ?  '请选择场所名称' : FirstPlaceNameData[indexFirstPlaceName].dicDataName }}
											</view>
										</picker>
										<image class="fway-form-selectImg" mode="aspectFill" src="/static/img/common/selectImg.png"></image>
									</view>
								</view>
								<view class="fway-form-item" v-show="indexFirstPlaceName != -1">
									<view class="fway-form-lable" style="width: 200rpx;"><text class="mustTips">*</text>子类场所名称</view>
									<view class="fway-form-input-select" style="width: calc(100% - 230rpx);">
										<picker mode="selector" placeholder="请选择子类场所名称" :range="SecondPlaceNameData" :value="indexSecondPlaceName" @change="bindSecondPlaceNameChange" range-key="dicDataName">
											<view class="fway-form-input" :class="indexSecondPlaceName == -1 ? 'fway-form-place' : ''">
												{{ indexSecondPlaceName == -1 ?  '请选择子类场所名称' : SecondPlaceNameData[indexSecondPlaceName].dicDataName }}
											</view>
										</picker>
										<image class="fway-form-selectImg" mode="aspectFill" src="/static/img/common/selectImg.png"></image>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>作业区域</view>
									<view class="fway-form-input-select">
										<picker mode="multiSelector" placeholder="请选择施工作业地所在区域" :range="AreaData" :value="indexArea" @columnchange="bindAreaColChange" @change="bindAreaChange" range-key="areaName">
											<view class="fway-form-input" :class="selectAreaName == '' ? 'fway-form-place' : ''">
												{{ selectAreaName == '' ?  '请选择施工作业地所在区域' : selectAreaName }}
											</view>
										</picker>
										<image class="fway-form-selectImg" mode="aspectFill" src="/static/img/common/selectImg.png"></image>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>作业地点</view>
									<view class="fway-form-input-inline">
										<view class="fway-form-input-inline" @tap="onMapTo" style="width: 100%;">
											<input type="text" disabled class="fway-form-input" placeholder="请准确标记施工作业地具体位置" v-model="data.address" />
										</view>
										<view class="fway-form-input-inline" v-if="data.address" style="width: 100%;">
											<input type="text" class="fway-form-input" placeholder="请填写详细地址" v-model="data.fullAddress" @tap="inputTap" data-focus="fullAddress" :focus="focusID == 'fullAddress' ? true : false" maxlength="100" />
										</view>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>作业时间</view>
									<view class="fway-form-input-select">
										<uni-datetime-picker type="datetime" placeholder="请选择作业开始时间" :start="minDateTime" :end="maxDateTime" v-model="data.startWorkTime" :border="true" :clear-icon="false" @change="bindStartTimeChange" @changeStatus="bindWorkTimeChangeStatus" hide-second="false" />
									</view>
								</view>
								<view class="fway-form-item" v-if="isShowEndTime">
									<view class="fway-form-lable"></view>
									<view class="fway-form-input-select">
										<uni-datetime-picker type="datetime" placeholder="请选择作业结束时间" :start="endMinDateTime" :end="endMaxDateTime" v-model="data.endWorkTime" :border="true" :clear-icon="false" @change="bindEndTimeChange" @changeStatus="bindWorkTimeChangeStatus" hide-second="false" />
									</view>
								</view>
							</view>
						</view>
						<view class="hiddenDangerItemBox reportPersonBox">
							<view class="hiddenDangerHeader">申报人信息</view>
							<view class="hiddenDangerBody">
								<view class="hiddenDangerItem" style="margin-bottom: 0;">
									<view class="hiddenDangerItemBody">
										<view class="fway-form-item">
											<view class="fway-form-lable"><text class="mustTips">*</text>姓名</view>
											<view class="fway-form-input-inline">
												<input type="text" class="fway-form-input" placeholder="请录入申报人姓名" v-model="data.name" @tap="inputTap" data-focus="name" :focus="focusID == 'name' ? true : false" maxlength="20" />
											</view>
										</view>
										<view class="fway-form-item">
											<view class="fway-form-lable"><text class="mustTips">*</text>联系方式</view>
											<view class="fway-form-input-inline">
												<input type="number" class="fway-form-input" placeholder="请录入申报人的联系电话" v-model="data.phoneNumber" @tap="inputTap" data-focus="phoneNumber" :focus="focusID == 'phoneNumber' ? true : false" />
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="tipsBox">
							<view class="tipsHeader">作业票模板下载</view>
							<view class="tipsBody">
								<view class="tipsItem" v-for="(item, index) in downloadFileList" :key="index">
									<image class="tipsItemImg" src="../../static/img/write/doc.png"></image>
									<text class="tipsItemText">{{item.name}}</text>
									<view class="tipsItemBtn" @tap="toDownloadFile(item.src)">
										<text class="tipsItemBtnText">下载</text>
										<image class="tipsItemBtnImg" src="../../static/img/write/yun.png"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="remarkBox">
							<view class="remarkHeader">备注:</view>
							<view class="remarkBody">
								<view class="remarkItem">1.请提前24小时完成电气焊作业申报。</view>
								<view class="remarkItem">2.24小时内紧急作业（应急抢险等）请拨打12345政务服务热线申报。</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="fway-btnBox" v-show="isShowFormBtn">
				<button class="fway-btn" formType="submit">立即上报</button>
			</view>
		</form>
	</view>
</template>

<script>
	var qqMap = require('@/static/js/qqmap-wx-jssdk.min.js');
	var qqMapsdk;
	var that;
	export default {
		data() {
			return {
				isShow: false,
				data: {
					longitude: '',
					latitude: '',
					areaCode: '',
					province: '',
					city: '',
					county: '',
					town: '',
					street: '',
					address: '',
					fullAddress: '',
					industryId: '',
					jobType: '',
					businessUnitType: '',
					workplace: '',
					workplaceName: '',
					workArea: '',
					workAreaId: '',
					startWorkTime: '',
					endWorkTime: '',
					name: '',
					phoneNumber: '',
					isSecret: false,
					description: '',
					companyName: '',
					files: []
				},
				// 作业类型
				WorkTypeData: [],
				// 经营单位类别
				UnitTypeData: [],
				// 作业场所
				indexPlace: -1,
				PlaceData: [],
				// 场所名称
				indexFirstPlaceName: -1,
				FirstPlaceNameData: [],
				indexSecondPlaceName: -1,
				SecondPlaceNameData: [],
				// 作业区域
				selectAllAreaData: [],
				AreaData: [],
				indexArea: [-1, -1],
				selectAreaName: '',
				// 作业时间
				minDateTime:'',// 开始时间范围最小时间
				maxDateTime:'',// 开始时间范围最大时间
				isShowEndTime:false,// 是否显示结束时间
				endMinDateTime:'',// 结束时间最小时间
				endMaxDateTime: '', // 结束时间最大时间
				isShowFormBtn: true,
				helpID: '',
				helpTips: '',
				focusID: '',
				fileSize: 10, // 单位M
				downloadFileList: [
					{name: '气割动火安全作业票（个体）', src: 'https://www.zgsafesp.cn/doc/气割动火安全作业票（个体）.docx'},
					{name: '气割动火安全作业票（企业）', src: 'https://www.zgsafesp.cn/doc/气割动火安全作业票（企业）.docx'},
					{name: '电焊动火安全作业票（个体）', src: 'https://www.zgsafesp.cn/doc/电焊动火安全作业票（个体）.docx'},
					{name: '电焊动火安全作业票（企业）', src: 'https://www.zgsafesp.cn/doc/电焊动火安全作业票（企业）.docx'}
				]
			}
		},
		onLoad(option) {
			that = this;
			that.data.industryId = decodeURIComponent(option.id);
			qqMapsdk = new qqMap({
				key: 'TE4BZ-ZFEAT-45CX3-VPZ3R-GOLS6-EGF54'
			});
			that.onGetBaseData(function(){
				that.GetDateTime();
				that.isShow = true;
			});
		},
		onShow() {
			that.data.phoneNumber = that.data.phoneNumber ? that.data.phoneNumber : uni.getStorageSync('userInfo').userTel || '';
			that.data.name = that.data.name ? that.data.name : uni.getStorageSync('userInfo').userName || '';
		},
		methods: {
			// 获取初始化数据
			onGetBaseData(fun){
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/industry/base/' + that.data.industryId
				}).then(res => {
					if (res) {
						that.helpID = res.bulletinId;
						that.helpTips = res.industry.txtHelpRemarks || '填报有疑问？点击查看更详细的操作指引';
						// 作业类型数据
						that.WorkTypeData = res.jobType;
						// 经营单位类别
						that.UnitTypeData = res.businessUnitType;
						// 作业场所
						that.PlaceData = res.workplace;
						// 场所名称集合
						that.FirstPlaceNameData = res.workplaceName;
						// 区域集合
						that.selectAllAreaData = res.areaTree;
						that.AreaData[0] = that.selectAllAreaData;
						that.AreaData[1] = that.selectAllAreaData[0].children;
					} else {
						that.$util.msg('服务异常，请稍后重试！');
					}
					typeof fun === 'function' && fun();
				})
			},
			// 获取时间范围时间戳
			GetDateTime(){
				// 获取当前时间
				let nowDate = new Date().getTime();
				// 开始时间取值范围为，当前时间24小时后，72小时中
				that.minDateTime = nowDate + 24 * 60 * 60 *1000;
				that.maxDateTime = nowDate + 72 * 60 * 60 *1000;
				that.endMinDateTime = that.minDateTime;
				that.endMaxDateTime = that.maxDateTime;
			},
			// 作业类型下拉选择
			bindWorkTypeChange(e){
				if (e.detail.value){
					that.data.jobType = e.detail.value;
				}
			},
			// 经营单位
			bindUnitTypeChange(e){
				if (e.detail.value){
					that.data.businessUnitType = e.detail.value;
				}
			},
			// 作业场所
			bindPlaceChange(e){
				if (e.detail.value){
					that.indexPlace = e.detail.value
				}
			},
			// 场所名称
			bindFirstPlaceNameChange(e){
				if (e.detail.value){
					that.indexFirstPlaceName = e.detail.value;
					// 第二级数据
					that.SecondPlaceNameData = [];
					that.indexSecondPlaceName = -1;
					let firstObj = that.FirstPlaceNameData[that.indexFirstPlaceName];
					that.SecondPlaceNameData = firstObj.children
				}
			},
			bindSecondPlaceNameChange(e){
				if (e.detail.value){
					that.indexSecondPlaceName = e.detail.value;
				}
			},
			// 作业区域
			bindAreaColChange(e) {
				if (e.detail.column == 0){
					// 选择第一列
					that.indexArea[1] = -1;
					that.AreaData[1] = [];
					that.indexArea[0] = e.detail.value;
					that.selectAreaName = that.AreaData[0][that.indexArea[0]].areaName;
					if (e.detail.value != -1) {
						// 构建二级分类数据
						that.AreaData[1] = that.AreaData[0][that.indexArea[0]].children
						that.$forceUpdate()
					}
				}else if (e.detail.column == 1) {
					// 选择第二列
					if (that.indexArea[0] != -1){
						that.indexArea[1] = e.detail.value;
						that.selectAreaName = that.AreaData[0][that.indexArea[0]].areaName + '-' + that.AreaData[1][that.indexArea[1]].areaName;
					}
				}
			},
			bindAreaChange(e){
				that.indexArea[0] = e.detail.value[0];
				that.indexArea[1] = e.detail.value[1];
				if (that.indexArea[0] != -1){
					that.selectAreaName = that.AreaData[0][that.indexArea[0]].areaName;
					if (that.indexArea[1] != -1){
						that.selectAreaName += that.AreaData[1][that.indexArea[1]].areaName;
					}
				}
			},
			// 验证地理位置是否在自贡市
			onGetAddress(latitude, longitude, fun) {
				qqMapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success(res) {
						// 地址信息
						if (res.result.address_component.city != '自贡市') {
							typeof fun === 'function' && fun(false);
						} else {
							typeof fun === 'function' && fun(res.result);
						}
					},
					fail: function(error) {
						console.error(error);
						typeof fun === 'function' && fun(false);
					}
				});
			},
			onMapTo() {
				// 判断微信位置是否开启
				let appAuthorizeSetting = uni.getAppAuthorizeSetting();
				if (appAuthorizeSetting.locationAuthorized != 'authorized') {
					that.$util.msg("定位失败，请在手机设置中打开微信位置权限");
					return;
				}
				that.$util.msg("标记地点请与作业区域选择一致", function(){
					uni.chooseLocation({
						success: function(res) {
							if (res.name) {
								that.onGetAddress(res.latitude, res.longitude, function(data) {
									if (data) {
										that.data.longitude = res.longitude;
										that.data.latitude = res.latitude;
										that.data.areaCode = data.ad_info.adcode;
										that.data.province = data.address_component.province;
										that.data.city = data.address_component.city;
										that.data.county = data.address_component.district;
										that.data.town = data.address_reference.town.title;
										that.data.street = data.address_component.street;
										// that.data.address = data.address;
										if (res.address) {
											let address = res.address;
											try {
												address = address.replace('四川省自贡市', '');
												that.data.address = res.name + '(' + address + ')';
											} catch (d) {
												that.data.address = res.name + '(' + address + ')';
											}
										} else {
											that.data.address = res.name;
										}
									} else {
										that.$util.msg("选择的地点不属于自贡市行政管辖范围，请重新确认作业地点");
									}
								})
							} else {
								that.$util.msg("作业地点定位失败，请重新选择");
							}
						},
						fail() {
							that.$util.msg("作业地点定位失败，请重新选择");
						}
					});
				});
			},
			bindWorkTimeChangeStatus(status){
				that.isShowFormBtn = !status;
			},
			// 开始时间选择
			bindStartTimeChange(e){
				that.data.startWorkTime = e;
				that.data.endWorkTime = '';
				that.endMinDateTime = new Date(e + ':00').getTime();
				that.endMaxDateTime = new Date(e + ':00').getTime() + 72 * 60 * 60 *1000;
				that.isShowEndTime = true;
			},
			// 结束时间选择
			bindEndTimeChange(e){
				that.data.endWorkTime = e;
			},
			// 监听input框点击设置焦点
			inputTap(e) {
				if(that.focusID != e.currentTarget.dataset.focus){
					uni.hideKeyboard();
					setTimeout(function() {
						that.focusID = e.currentTarget.dataset.focus
					}, 200)
				}
			},
			// 操作指引
			onOperateIllustrateTo() {
				uni.navigateTo({
					url: '/pagesBase/Home/OperatingInstructions?helpID=' + encodeURIComponent(that.helpID)
				})
			},
			// 下载模板
			toDownloadFile(src){
				let startIndex = src.lastIndexOf("/") + 1; 
				 // 提取文件名
				let fileName = src.substring(startIndex);// 截取文件名称部分
				uni.downloadFile({
					url: src, 
					filePath: uni.env.USER_DATA_PATH + "/" + fileName,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.filePath,
								showMenu: true,
								fail: () =>{
									that.$util.msg("文件打开失败！请稍后重试");
								}
							});
						}
					},
					fail: () =>{
						that.$util.msg("文件下载失败！请稍后重试");
					}
				});
			},
			// 表单验证
			formValidation() {
				if(!that.data.jobType){
					that.$util.msg("请选择作业类型！");
					return false;
				}
				if(that.data.jobType == '气割' && !that.data.companyName){
					that.$util.msg("请填写购气单位/个人名称！");
					return false;
				}
				if(!that.data.businessUnitType){
					that.$util.msg("请选择经营单位类别！");
					return false;
				}
				if (that.indexPlace == -1) {
					that.$util.msg("请选择作业所属场所！");
					return false;
				}
				if (that.indexFirstPlaceName == -1) {
					that.$util.msg("请选择场所名称！");
					return false;
				}
				if (that.indexSecondPlaceName == -1) {
					that.$util.msg("请选择子类场所名称！");
					return false;
				}
				if (that.indexArea[0] == -1) {
					that.$util.msg("请选择作业所属区域！");
					return false;
				} else {
					if (that.AreaData[1].length > 0 && that.indexArea[1] == -1) {
						that.$util.msg("请选择作业所属区域！");
						return false;
					}
				}
				if (!that.data.startWorkTime || !that.data.endWorkTime) {
					that.$util.msg("请选择作业时间！");
					return false;
				} else {
					if(new Date(that.data.startWorkTime + ':00').getTime() >= new Date(that.data.endWorkTime + ':00').getTime()){
						that.$util.msg("作业开始时间不能大于结束时间！");
						return false;
					}
					if(that.minDateTime > new Date(that.data.startWorkTime + ':00').getTime()){
						that.data.startWorkTime = '';
						that.data.endWorkTime = '';
						that.isShowEndTime = false;
						that.$util.msg("需提前24小时完成作业申报！");
						return false;
					}
				}
				if (!that.data.address) {
					that.$util.msg("请选择作业地点！");
					return false;
				}
				if (that.data.fullAddress) {
					if (escape(that.data.fullAddress).indexOf("%u") == -1) {
						that.$util.msg("请输入正确的地址信息！");
						return false;
					}
				}
				if (!that.data.name) {
					that.$util.msg("请输入申报人姓名！");
					return false;
				}
				if (!that.data.phoneNumber) {
					that.$util.msg("请输入申报人手机号码！");
					return false;
				}
				if (that.$util.e_checkPhone(that.data.phoneNumber) === false) {
					that.$util.msg('申报人手机号码格式不正确！');
					return false;
				}
				if (that.data.isSecret == null) {
					that.$util.msg("请选择是否保密！");
					return false;
				}
				return true;
			},
			// 表单提交
			onSubmit(e) {
				if (!that.formValidation()) {
					return;
				}
				that.data.workplace = that.PlaceData[that.indexPlace].dicDataName;
				that.data.workplaceName = that.FirstPlaceNameData[that.indexFirstPlaceName].dicDataName + '-' + that.SecondPlaceNameData[that.indexSecondPlaceName].dicDataName;
				that.data.workArea = that.selectAreaName;
				that.data.workAreaId = that.AreaData[1][that.indexArea[1]].id;
				if(that.data.jobType != '气割'){
					that.data.companyName = '';
				}
				that.data.jobType = that.data.jobType == '气割' ? '1' : (that.data.jobType == '电焊' ? '0' : null) 
				let params = that.data;
				console.log(JSON.stringify(params))
				that.$admin.req({
					method: 'POST',
					url: '/api/v1/Snapshot/order',
					data: params
				}).then(res => {
					if (res) {
						if (res.no && res.password) {
							uni.showModal({
								title: "您的诉求已上报成功！ ",
								content: '工单编号：' + res.no + '\r\n查询密码：' + res.password,
								showCancel: false,
								confirmText: '确定',
								confirmColor: '#3e6ffd',
								success: res => {
									let obj = uni.getStorageSync('userInfo');
									obj.userName = that.data.name;
									uni.setStorageSync('userInfo', obj);
									uni.switchTab({
										url: "/pages/Index/Mine"
									})
								}
							})
						} else {
							that.$util.msg(res.msg || "对不起，提交失败，请稍后重试！");
						}
					} else {
						that.$util.msg("对不起，提交失败，请稍后重试！");
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #f7f7f7;
		font-size: 0;
	}

	.helpBox {
		padding: 20rpx;
	}

	.formBox {
		margin: 0;
		padding-bottom: 140rpx;
	}
	
	.fway-btnBox{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 20rpx 0 30rpx;
		background-color: #f7f7f7;
		z-index: 9;
	}

	.hiddenDangerBox {
		padding: 0 20rpx;
	}

	.hiddenDangerItemBox {
		padding: 0;
		background-color: #fff;
		margin-top: 20rpx;
		box-shadow: 0rpx 5rpx 12rpx 0rpx #c7c7c7;
		border-radius: 10rpx;
	}

	.hiddenDangerHeader {
		padding: 30rpx 20rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}

	.hiddenDangerBody {
		padding: 0 20rpx 10rpx;
	}

	.hiddenDangerItem {
		margin-bottom: 20rpx;
	}

	.hiddenDangerItemHeader {
		padding: 10rpx 0;
		display: flex;
		justify-content: left;
		align-items: center;
		height: 32rpx;
	}

	.mustTips {
		width: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fd0101;
	}

	.itemHeaderText {
		color: #000;
		font-size: 28rpx;
	}

	.itemHeaderTips {
		font-size: 24rpx;
		color: #777;
	}

	.hiddenDangerItemBody {
		padding: 0;
	}

	.hiddenDangerHeaderBtn {
		width: calc(100% - 288rpx);
		display: inline-block;
		vertical-align: middle;
		text-align: right;
	}
	
	.fway-form-item {
		padding: 0 10rpx;
	}
	
	.fway-form-textarea {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		height: 180rpx;
	}
	
	.fway-form-tips {
		padding: 10rpx 0;
	}
	
	.workBox .fway-form-lable {
		width: 150rpx;
	}
	
	.workBox .lableTips{
		font-size: 24rpx;
		color: #777;
	}
	
	.workBox .fway-form-input {
		width: calc(100% - 20rpx);
	}
	
	.workBox .fway-form-input-select {
		width: calc(100% - 180rpx);
		position: relative;
	}
	
	.workBox .fway-form-input-inline {
		width: calc(100% - 180rpx);
		position: relative;
	}
	
	.workBox .fway-form-input-select .fway-form-input {
		width: calc(100% - 50rpx);
		padding-right: 40rpx;
	}
	
	.workBox .fway-form-input-select .fway-form-selectImg{
		position: absolute;
		right: 10rpx;
		top: 34rpx;
	}
	
	.workBox .fway-form-checkbox{
		margin-right: 20rpx;
	}
	
	.reportPersonBox .fway-form-item {
		border-bottom: 2rpx #eaeaea solid;
	}
	
	.reportPersonBox .fway-form-lable {
		padding: 10rpx 0;
		width: 150rpx;
		color: #777;
	}
	
	.reportPersonBox .fway-form-input-inline {
		width: calc(100% - 150rpx);
		padding: 10rpx 0 0;
	}
	
	.reportPersonBox .fway-form-input {
		background-color: #fff;
	}
	
	.chooseFileItem{
		padding: 0 0 0 10rpx;
	}
	
	.chooseFileItemHeader{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.chooseFileItemBtn{
		height: 50rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		background-color: #3e6ffd;
		text-align: center;
		border-radius: 20rpx;
		padding: 0 40rpx;
	}
	
	.photoListBox {
		width: calc(100% - 20rpx);
		padding: 10rpx 0 20rpx;
		display: flex;
		justify-content: left;
		align-items: start;
		flex-wrap: wrap;
		align-content: start;
	}
	
	.photoItemBox {
		width: calc(25% - 20rpx);
		height: 130rpx;
		position: relative;
		border: 2rpx #E5E5E5 solid;
		border-radius: 10rpx;
	}
	
	.photoItemBox + .photoItemBox{
		margin-left: 20rpx;
	}
	
	.photoItemBox + .photoItemBoxsel{
		margin-left: 20rpx;
	}
	
	.photoItemBoxsel {
		width: calc(25% - 20rpx);
		height: 130rpx;
		position: relative;
		background-color: #f7f7f7;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.photoItemImg {
		width: 100%;
		height: 100%;
	}
	
	.photoItemImgsel{
		width: 60rpx;
		height: 60rpx;
	}
	
	.closeBtn {
		background-color: #00000060;
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		padding: 10rpx;
		top: 0;
		right: 0;
	}
	
	.fileListBox{
		padding: 20rpx 10rpx;
	}
	 
	.fileItemBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.fileItemBox + .fileItemBox{
		margin-top: 20rpx;
	}
	 
	.fileName{
		width: calc(100% - 60rpx);
		margin-right: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #53d4fc;
	} 
	
	.fileDeleteBtn{
		width: 40rpx;
		height: 40rpx;
	}
	
	.tipsBox{
		background-color: #f7f7f7;
		margin-top: 20rpx;
	} 
	
	.tipsHeader{
		padding: 30rpx 20rpx 10rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	} 
	
	.tipsBody{
		padding: 0 20rpx 10rpx;
	} 
	
	.tipsItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx #d2d2d2 dashed;
		padding: 20rpx 0 10rpx;
	} 
	
	.tipsItemImg{
		width: 30rpx;
		height: 40rpx;
		margin-right: 20rpx;
	} 
	
	.tipsItemText{
		width: calc(100% - 180rpx);
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #000;
	} 
	
	.tipsItemBtn{
		width: 130rpx;
		padding: 10rpx 0;
		text-align: center;
		border: 2rpx #d2d2d2 solid;
		border-radius: 30rpx;
	} 
	
	.tipsItemBtnText{
		margin-right: 10rpx;
		vertical-align: middle;
	} 
	
	.tipsItemBtnImg{
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}
	
	.remarkBox{
		margin-top: 20rpx;
	} 
	
	.remarkHeader{
		padding: 10rpx 20rpx;
		font-size: 30rpx;
		color: #000;
	} 
	
	.remarkBody{
		padding: 0 20rpx;
	} 
	
	.remarkItem{
		padding: 10rpx 0;
		color: #000;
	} 
</style>