ybxf-security-uniapp/pagesA/fire/drill/edit_drill/edit_drill.vue

<template>
	<view class=" uni-container" v-if="formData.orgName">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<u--form ref="customForm" :rules="customRules" :model="formData" labelPosition="left" labelWidth="150" labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="培训演练标题	" prop="drillTitle" :required="true">
						<u-input v-model="formData.drillTitle" placeholder="请输入培训演练标题" />
					</u-form-item>
					<u-form-item
						label="所属单位"
						@click="
							showSex5 = true;
							hideKeyboard();
						"
						 prop="orgName"
						  :required="true">
						<u--input v-model="formData.orgName" disabled disabledColor="#ffffff" placeholder="请选择所属单位"></u--input>
					</u-form-item>
					<u-form-item
						:required="true"
						label="记录类型"
						prop="drillType"
						@click="
							showSex = true;
							hideKeyboard();
						"
					>
						<u--input v-model="formData.drillTypeName" disabled disabledColor="#ffffff" placeholder="请选择记录类型"></u--input>
					</u-form-item>
					<u-form-item label="培训演练内容	" prop="drillContent">
						<u-textarea auto-height maxlength=-1 v-model="formData.drillContent" placeholder="请输入培训演练内容"></u-textarea> 
					</u-form-item>
					<u-form-item label="培训演练时间" prop="drillDate">
						<uni-datetime-picker
							:show="unitTime"
							v-model="formData.drillDate"
							type="datetime"
							closeOnClickOverlay
							@confirm="ActiveUnitTime"
							@cancel="unitTime = false"
							@change="changetime"
							@close="unitTime = false"
						></uni-datetime-picker>
					</u-form-item>
					<u-form-item label="培训演练地点" prop="drillPlace">
						<u-input v-model="formData.drillPlace" placeholder="请输入培训演练地点" />
					</u-form-item>
					<u-form-item label="培训演练讲师">
						<u-input v-model="formData.drillLecturer" placeholder="请输入培训演练讲师" />
					</u-form-item>
					<u-form-item label="参与人员数量">
						<u-input v-model="formData.participant" placeholder="请输入参与人员数量" />
					</u-form-item>

					<u-form-item label="附件">
						<!-- 选择文件上传 -->
						<uni-file-picker
							v-model="formData.File"
							del-icon
							limit="1"
							auto-upload
							file-mediatype="all"
							@select="select"
							@delete="deleteFile"
						>
							<button type="primary" class="selectBtn">选择附件</button>
							<!-- 加载中 -->
							<isLodingModel v-if="loading"></isLodingModel>
						</uni-file-picker>
					</u-form-item>
				</view>				
				
			</u--form>
			<u-action-sheet
				:show="showSex"
				:actions="actions2"
				title="记录类型"
				@close="showSex = false"
				@select="sexSelect2"
			></u-action-sheet>
			<u-action-sheet
				:show="showSex5"
				:actions="actions5"
				title="请选择单位"
				@close="showSex5 = false"
				@select="sexSelect5"
			></u-action-sheet>
		</view>
		<uni-row class="heigthButton">
			<u-button
				@click="submit('customForm')"
				type="primary"
				shape="circle"
				size="large"
				color="#4CB2B6"
				text="确认修改"
			></u-button>
		</uni-row>
	</view>
</template>
<script>
import {
	updateDrill,// 更新
	getOrgId,
	upload, //上传文件
} from '@/api/drill';
import { DICT_TYPE, getDictDatas } from '@/utils/dict';
import { getAccessToken } from '@/utils/auth';
import config from '@/config';
import store from '@/store';
import { uploadAvatar } from '@/api/system/user';

const baseUrl = config.baseUrl;
var that = null;
export default {
	data() {
		return {
			showSex: false, //有无避难层
			showSex5: false, //所属单位
			actions: [],
			actions2: getDictDatas(DICT_TYPE.TRAIN_DRILL),
			actions5: [],
			// 每页数据量
			pageSize: 5,
			// 当前页
			pageNo: 1,
			// 数据总量
			total: 0,
			unitTime:false,
			loading: false,
			title: '生成隐患',
			content: '确认将此检查项目生成为隐患',
			// 自定义表单数据
			formData: {
				status: '0',
				File:[]
			},
			// 自定义表单校验规则
			customRules: {
				drillTitle: {
					type: 'string',
					required: true,
					message: '培训演练标题不能为空',
					trigger: ['blur', 'change']
				},
				drillType: {
					type: 'string',
					message: '记录类型不能为空',
					trigger: ['blur', 'change']
				},
			},
			screenHeight: this.$screenHeight,
			wheight: ''
		};
	},
	computed: {},
	mounted() {
		uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
			this.wheight = data.height
		}).exec()
	},
	watch: {
		loading: {
			handler(newLength, oldLength) {
				this.$modal.isLoadingModel(this.loading)
			},
			immediate: true
		}
	},
	onLoad: function(option) {
		this.actions2.map(i => {
			i.name = i.label;
			i.id = i.value;	
		});
		// 在 vue页面，向起始页通过事件传递数据
		var data = option.id;	
		that = this;
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('acceptDataFromOpenerPage', function(val) {
			that.formData = val;
			console.log(val,'val33333333333');
			var File = 	that.formData.File = []
			if(that.formData.attId !='' ){
				File.push({
					url: that.formData.attId,
					name: that.formData.attId
				});		
			}else{
				File =null
			}
			console.log('edit页面的val的值', that.formData);
			if(that.formData.drillType == 1){
				that.formData.drillTypeName = '培训'
			}else if(that.formData.drillType == 2){
				that.formData.drillTypeName = '演练'
			}
		});
		
		// 获取单位id
		getOrgId({
			pageNo: this.pageNo,
			pageSize: this.pageSize,
			userId: this.$store.state.user.id
		}).then(response => {
			console.log(response, 'response');
			// 取到用户对应的单位名称与id
			response.data.map(v => {
				if(this.formData.orgId==v.dwid){
					this.formData.orgName=v.orgName
				}
				this.actions5.push({
					id: v.id,
					name: v.orgName
				});
			});
		});
	},
	onReady() {
		this.$refs.customForm.setRules(this.customRules);
	},

	methods: {
		submit(ref) {
			this.$refs[ref]
				.validate()
				.then(res => {
					this.formData['status'] = 0;
					if(this.formData.File.length!=0&&this.formData.File[0].url){
						this.formData.attId = this.formData.File[0].url.toString();
					}else{
						this.formData.attId=''
					}
					if(this.formData.drillDate&&this.formData.drillDate.indexOf(":") === -1){
						this.formData.drillDate= this.formData.drillDate + ' 00:00:00'
					}
					var jsdata = JSON.stringify(this.formData);
					console.log(jsdata, 'jsdatajsdatajsdata');
					updateDrill(jsdata).then(response => {
						console.log('response.data.msg,', response.data);
						uni.showLoading({
							title: response.data.msg
						});
						setTimeout(() => {
							console.log('修改成功！');
							uni.hideLoading();
							uni.navigateBack({
								delta:2
							})
						}, 0);
					});
				})
				.catch(err => {
					console.log('err错误信息为：', err);
					uni.showToast({
						icon:'none',
						title:'错误！'+ err[0].message
					})
				});
		},
// 上传图片 获取上传状态
		// 选择上传触发函数
		select(e) {
			// 根据所选图片的个数，多次调用上传函数
			let promises = [];
			for (let i = 0; i < e.tempFilePaths.length; i++) {
				const promise = this.uploadFiles(e.tempFilePaths, i);
				promises.push(promise);
			}
			Promise.all(promises).then(result => {});
		},
		// 上传函数
		async uploadFiles(tempFilePaths, i) {
			const that = this;
			this.loading = true
			await uni.uploadFile({
				url: baseUrl + '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
				filePath: tempFilePaths[i],
				name: 'file',
				header: {
					Authorization: 'Bearer ' + getAccessToken()
				}, //请求token
				success: res => {
					console.log('res', res);
					let data = JSON.parse(res.data);
					// 返回的url
					var fileLink = data.data;
					const code = data.code;
					// 如果成功，将返回的data数据给 formdata
					if (code == 0) {
						that.formData.File.push({
							url: fileLink,
							name: fileLink
						});
						uni.showToast({
							title: '文件上传成功！'
						});
						that.loading = false
						// that.formData.attId = fileLink
					}
					// this.formData.attId = this.formData.attId.toString();
				
				},
				fail: () => {
					console.log('err');
					uni.showToast({
						icon:'error',
						title: '文件上传失败！'
					});
				}
			});
		},
		// 移出图片函数
		async deleteFile(e) {
			console.log(e);
			this.formData.attId = '';
			console.log('移除了：', this.formData.attId);
		},
		

		// 隐藏键盘
		hideKeyboard() {
			uni.hideKeyboard();
		},
		// 记录类型
		sexSelect2(e) {
			this.formData.drillType	 = e.value;
			this.formData.drillTypeName	 = e.label;
			console.log(this.formData.drillType	);
		},
		
		// 单位成立时间
		ActiveUnitTime(e) {
			this.unitTime = false;
			console.log(e.value, e.mode);
			let value = new Date(e.value);
			this.formData.drillDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
		},
		
		changetime(e) {
			console.log('change', e);
		},
		// 所属单位
		sexSelect5(e) {
			this.formData.orgId = e.id;
			this.formData.orgName = e.name;
			console.log(this.formData.orgId);
		},
		// 生成隐患弹出层   //暂存为草稿箱弹出层
		cancel() {
			this.show = false;
		},
		confirm() {
			setTimeout(() => {
				// 0.5秒后自动关闭
				this.show = false;
			}, 500);
		},

		// 触底的事件
		scrolltolower() {
			// 判断是否还有下一页数据
			if (this.pageNo * this.pageSize >= this.total)
				return uni.showToast({
					title: `数据加载完毕`
				});
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.loading) return;
			this.pageNo += 1;
			this.showCheckboxShow(this.pageNo);
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #f5f7f9;
	position: relative;
}

.buttomBorder {
	height: 0px;
	border: 1px dashed #cbd5e1;
}

/deep/ .uni-section .uni-section-header {
	padding: 0px;
}

/deep/ .u-form-item__body {
	font-weight: 500;
	flex-direction: column !important;
}

/deep/ .u-form-item__body__left__content__label {
	margin-bottom: 16rpx;
	font-size: 30rpx !important;
	color: #274647 !important;
}

.arrow-icon {
	//主动检查箭头
	position: absolute;
	right: 14px;
	top: 49px;
	transform: rotate(90deg);
}

/deep/ .u-input[data-v-fdbb9fe6],
/deep/ .u-input.data-v-fdbb9fe6,/deep/ .u-input {
	background-color: #fff;
}

/deep/.u-button[data-v-3bf2dba7],
/deep/.u-button.data-v-3bf2dba7,/deep/.u-button{
	width: 60% !important;
}

//弹框样式
.btnList {
	// width: 40%;
	display: flex;

	// display:flex;
	.u-button[data-v-3bf2dba7] {
		width: 30%;
	}
}

/deep/ .u-popup__content {
	//弹出的宽高
	height: 100%;
}

/deep/ .u-form-item__body__right__message {
	//校验的文字的位置
	margin-left: 10rpx !important;
}

/deep/ .uicon-close {
	//关闭按钮背景色
	background-color: rgba(199, 203, 210, 0.9);
	border-radius: 10%;
}

.checkbox {
	.checkbox-item {
		box-sizing: border-box;
		padding-top: 40px;
	}
}

//侧边联动
.page-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav {
	display: flex;
	width: 100%;
}

.nav-left {
	width: 25%;
	background: #fafafa;
}

.nav-left-item {
	height: 100upx;
	border-right: solid 1px #f1f1f1;
	border-bottom: solid 1px #f1f1f1;
	font-size: 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/deep/.nav-right-item[data-v-73caef23],/deep/.nav-right-item {
	display: flex;
	flex-wrap: wrap;
}

.nav-left-item:last-child {
	border-bottom: none;
}

.nav-right {
	width: 75%;
}

.box {
	display: block;
	overflow: hidden;
	border-bottom: 20upx solid #f3f3f3;
	/* min-height: 100vh; */
	/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}

.box:last-child {
	border: none;
	// min-height: 100vh;
}

.nav-right-item {
	margin-top: 20px;
	// width: 28%;
	// min-height: 200upx;
	float: left;
	text-align: center;
	padding: 11upx;
	font-size: 28upx;
	background: #fff;

	/deep/.u-checkbox__icon-wrap[data-v-532d01c7],/deep/.u-checkbox__icon-wrap {
		//复选框的样式
		margin: 0 20rpx;
	}

	/deep/ uni-view[data-v-3d1b15f2] {
		//复选框上线的间距
		margin: 20rpx 0 !important;
	}

	// /deep/ .u-checkbox__icon-wrap--square{
	// 	margin: 20rpx;
	// }
	.u-checkbox-label--right[data-v-532d01c7],.u-checkbox-label--right {
		margin-right: 40rpx;
	}
}

.nav-right-item image {
	width: 150upx;
	height: 150upx;
}

.active {
	font-weight: 700;
	color: #274647;
	background: #fff;
	border-right: 0;
}

::-webkit-scrollbar {
	/*取消小程序的默认导航条样式*/
	width: 0;
	height: 0;
	color: transparent;
}

.selectBtn {
	width: 200rpx;
	margin-left: 0;
	font-size: 30rpx;
	background-color: #4cb2b6;
}
	/deep/.u-action-sheet {
		overflow-y: auto;
		height: 1000rpx;
		background-color: #fff;
	}
	.example{
		overflow-y: auto;
	}
</style>