ybxf-security-uniapp/pagesB/fire/fireWork/addWork/index.vue

<template>
	<view class="uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 85) + 'px'">
			<u--form ref="customForm" :model="formData" labelPosition="left" labelWidth="100%" labelAlign="left">
				<view class="juli-bottom">
					<u-form-item label="所属单位" prop="orgName" @click="showOrg = true; hideKeyboard()" :required="true">
						<u-input v-model="formData.orgName" placeholder="请输入" :disabled="isview" />
					</u-form-item>
					<u-form-item label="动火事由" prop="workReason" :required="true">
						<u-input v-model="formData.workReason" placeholder="请输入" :disabled="isview" />
					</u-form-item>
					<u-form-item label="动火作业执行人" prop="executor" :required="true"
						style="position: relative;">
						<view slot="label" style="display: flex;">
							<text style="color:#000;font-size: 15px;"><text style="color: red;margin-right: 4px">*</text>动火作业执行人</text>
							<u-button @click="onAddPerson" shape="circle" size="mini" style="margin-bottom: 10px;width: 80px;" :custom-style="{backgroundColor: '#4CB2B6',color:'#fff',padding:'12px 0'}">新增人员</u-button>
						</view>
						<view class=""  @click="addPerson">
							<u-input v-model="formData.executor" placeholder="请选择" :disabled="isview" />
						</view>
					</u-form-item>
					<u-form-item label="动火台账状态" prop="workStatus" :required="true" v-if="isview">
						<u-input v-model="formData.workStatus" placeholder="请选择" :disabled="isview" />
						<!-- @click="showSex = true; hideKeyboard()" -->

					</u-form-item>
					<picker mode="date" :value="dateTime" @change="bindDateChange" :disabled="isview">
						<view class="datatime-street">
							<u-form-item label="动火开始时间" prop="workBegin" :required="true">
								<u-input v-model="formData.workBegin" placeholder="动火结束时间" class="add-date"
									:disabled="isview" />
							</u-form-item>
						</view>
					</picker>
					<picker mode="date" @change="bindDateChange2" :disabled="isview">
						<view class="datatime-street">
							<u-form-item label="动火结束时间" prop="workEnd" :required="true">
								<u-input v-model="formData.workEnd" placeholder="动火结束时间" class="add-date"
									:disabled="isview" />
							</u-form-item>
						</view>
					</picker>
					<u-form-item label="附件">
						<!-- 选择文件上传，limit="1则最多选择一张图片，del-icon隐藏删除按钮 -->
						<uni-file-picker v-model="formData.attId" del-icon limit="1" auto-upload file-mediatype="all"
							@select="selectFile" @delete="deleteFile" :disabled="isview">
							<button type="primary" class="selectBtn" :disabled="isview">选择文件</button>
							<!-- 加载中 -->
							<isLodingModel v-if="loading"></isLodingModel>
						</uni-file-picker>
					</u-form-item>
					<u-form-item label="已上传附件:" v-if="formData.att" labelWidth="150">
						<u-icon name="close" color="#4CB2B6" size="24" @click="closeImage()" v-if="!isview">
						</u-icon>
						<!-- #ifdef MP-WEIXIN -->
						<text style="color:#00a3f4;cursor: pointer;margin-left: 20px !important;"
							@click.native="viewSee(formData.att)">点击预览文件</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<a style="color:#00a3f4;cursor: pointer;margin-left: 20px !important;"
							@click="viewSee(formData.att)">点击预览文件</a>
						<!-- #endif -->
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="heigthButton">
			<u-button v-if="isedit" @click="submit('customForm')" type="primary" shape="circle" size="large"
				color="#4CB2B6" text="确认修改" style="width:200px">
			</u-button>
			<u-button v-else-if="!isedit&&!isview" @click="submit('customForm')" type="primary" shape="circle"
				size="large" color="#4CB2B6" text="确认新增" style="width:200px">
			</u-button>
			<u-button v-else-if="isview" @click="submit('customForm')" type="primary" shape="circle" size="large"
				color="#4CB2B6" text="返回" style="width:200px">
			</u-button>
		</view>
		<u-action-sheet :show="showSex" :actions="actionsSex" title="请选择动火台账状态" @close="showSex = false"
			@select="sexSelect">
		</u-action-sheet>
		<u-action-sheet :show="showExecutor" :actions="actionsExecutor" class="popups" title="请选择动火作业执行人"
			@close="showExecutor = false" @select="clickExecutor">
		</u-action-sheet>
		<u-action-sheet :show="showOrg" :actions="orgaction" title="请选择单位" class="org-choice popups"
			@close="showOrg = false" @select="orgSelect"></u-action-sheet>
	</view>
</template>

<script>
	import {
		fireWorkUpdate,
		fireWorkCreate,
		fireWorkIdGet,
		fireSpecialPage, //动火执行人
	} from '@/api/fireSpecial';
	import {
		NumericRule,
		downSee,
		uploadFile
	} from '@/utils/common.js';
	import config from '@/config'
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				wheight: '',
				showExecutor: false, //动火台账执行人
				actionsExecutor: [],
				formData: {
					orgName: '',
					orgId: '',
					workReason: '',
					executor: '',
					workStatus: '0',
					workBegin: '',
					workEnd: '',
					att: '',
					attId: []
				},
				loading: '',
				rules: {
					workReason: [{
						type: 'string',
						required: true,
						message: '动火事由不能为空',
						trigger: ['blur', 'change']
					}],
					executor: [{
						type: 'string',
						required: true,
						message: '动火作业执行人不能为空',
						trigger: ['blur', 'change']
					}],
					workStatus: [{
						type: 'string',
						required: true,
						message: '动火台账状态不能为空',
						trigger: ['blur', 'change']
					}],
					workBegin: [{
						type: 'string',
						required: true,
						message: '动火开始时间不能为空',
						trigger: ['blur', 'change']
					}],
					workEnd: [{
						type: 'string',
						required: true,
						message: '动火结束时间不能为空',
						trigger: ['blur', 'change']
					}],
					// empName: NumericRule(),
				},
				isedit: '',
				isview: '',
				dateTime: '',
				showSex: false,
				actionsSex: getDictDatas(DICT_TYPE.FIRE_WORK_STATUS), //性别
				workStatus: getDictDatas(DICT_TYPE.FIRE_WORK_STATUS), //台账状态
				orgaction: [], //单位
				showOrg: false
			}
		},
		onReady() {
			this.$refs.customForm.setRules(this.rules);
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		onLoad(option) {
			this.formData.orgName = option.orgName ? option.orgName : ''
			this.formData.orgId = option.orgId ? option.orgId : ''
			this.orgaction = option.orgaction ? JSON.parse(option.orgaction) : []
			this.actionsSex.map(i => i.name = i.label)
			uni.setNavigationBarTitle({
				title: option.title
			})
			if (option.editData) {
				this.isedit = true
				this.isview = false
				this.parentId = option.editData
				this.getData()
				// this.formData = JSON.parse(option.editData)
			} else if (option.viewData) {
				this.isview = true
				this.parentId = option.viewData
				this.getData()
				// this.formData = JSON.parse(option.viewData)
			} else {
				this.isedit = false
				this.isview = false
			}
			
		},
		onShow() {
			// 获取动火作业执行人数据
			let arrOrg = []
			arrOrg.push(this.formData.orgId)
			fireSpecialPage({
				pageNo: 1,
				pageSize: 100,
				orgIds: arrOrg,
			}).then(response => {
				this.actionsExecutor = response.data ? response.data.list : []
				this.actionsExecutor.map(i => {
					i.name = i.empName
				})
			
			});
		},
		methods: {
			onAddPerson(){
				uni.navigateTo({
					url: `/pagesB/fire/fireSpecial/addSpecial/index?title=新增特种人员`
				})
			},
			addPerson() {
				this.showExecutor = true;
				uni.hideKeyboard()
			},
			clickExecutor(e) { //动火台账执行人
				this.formData.executor = e.name
			},
			//查看已上传附件
			viewSee(val) {
				downSee(val)
			},
			// 移出图片函数
			async deleteFile(e) {
				this.formData.attId = [];
			},
			selectFile(e) {
				let promises = [];
				for (let i = 0; i < e.tempFilePaths.length; i++) {
					const promise = uploadFile(e.tempFilePaths, i, this);
					promises.push(promise);
				}
				Promise.all(promises).then(result => {
					// 处理上传文件成功的结果
				}).catch(error => {
					// 处理上传文件失败的错误
				});
			},
			closeImage() {
				this.formData.attId = []
				this.formData.att = ''
				this.$forceUpdate()
			},
			sexSelect(e) {
				this.formData.workStatus = e.name
			},
			orgSelect(e) {
				this.formData.orgName = e.name
				this.formData.orgId = e.value
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			getData() {
				fireWorkIdGet({
					id: this.parentId
				}).then(response => {
					this.formData = response.data
					this.workStatus.map(i => {
						if (this.formData.workStatus == i.value)
							this.formData.workStatus = i.label
					})
				})
			},
			bindDateChange(e) {
				this.formData.workBegin = e.detail.value
			},
			bindDateChange2(e) {
				this.formData.workEnd = e.detail.value
			},
			submit(ref) {
				const end = new Date(this.formData.workEnd).getTime()
				const start = new Date(this.formData.workBegin).getTime()
				if (start > end) {
					return this.$modal.msg('结束时间不能小于开始时间')
				}
				this.$refs[ref].validate().then(res => {
					if (this.formData.attId && this.formData.attId.length > 0) {
						this.formData.att = this.formData.attId[0];
					} else {
						this.formData.att = this.formData.att;
					}
					if (this.isedit) {
						fireWorkUpdate(JSON.stringify(this.formData)).then(res => {
							this.$modal.msg('修改成功')
							this.isedit = false
							setTimeout(() => {
								uni.navigateBack()
							}, 400)
						})
					} else if (this.isview) {
						this.isview = false
						uni.navigateBack()
					} else {
						fireWorkCreate(JSON.stringify(this.formData)).then(response => {
							this.$modal.msg('新增成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 400)
						})
					}

				}).catch(err => {})
			}
		}
	}
</script>


<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9 !important;
	}

	.uni-container {
		// height: 100vh;
		background-color: #f5f7f9 !important;
	}

	/deep/.uni-card {
		position: relative;
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.15);
		border-radius: 30rpx;
	}

	.example {
		overflow-y: auto;
	}

	.juli-bottom {
		/deep/ .u-form-item__body__left__content__label {
			color: #000 !important;
		}
	}

	.org-choice {
		/deep/.u-action-sheet {
			overflow-y: auto;
			height: 1000rpx;
			background-color: #fff;
		}
	}

	.selectBtn {
		width: 200rpx;
		margin-left: 0;
		font-size: 30rpx;
		background-color: #4cb2b6;
	}

	.popups {
		/deep/.u-action-sheet {
			overflow-y: auto;
			height: 1000rpx;
			background-color: #fff;
		}
	}

	.example {
		overflow-y: auto;
	}
</style>s