ybxf-security-uniapp/pagesB/fire/fireSpecial/addSpecial/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()">
						<u-input v-model="formData.orgName" placeholder="请输入" :disabled="isview" />
					</u-form-item>
					<u-form-item label="人员姓名" prop="empName" :required="true">
						<u-input v-model="formData.empName" placeholder="请输入" :disabled="isview" />
					</u-form-item>
					<u-form-item label="特种证书编号" prop="numberCode" :required="true">
						<u-input v-model="formData.numberCode" placeholder="请输入" :disabled="isview" />
					</u-form-item>
					<u-form-item label="身份证号" prop="idcardno" :required="true">
						<u-input v-model="formData.idcardno" placeholder="请输入" :disabled="isview" />
					</u-form-item>
					<u-form-item label="性别" prop="empGender" @click="showSex = true; hideKeyboard()">
						<u-input v-model="formData.empGender" placeholder="请选择" :disabled="isview" />
					</u-form-item>
					<picker mode="date" :value="dateTime" @change="bindDateChange" :disabled="isview">
						<view class="datatime-street">
							<u-form-item label="人员出生日期" prop="empBirthday">
								<u-input v-model="formData.empBirthday" 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="issueDate">
								<u-input v-model="formData.issueDate" 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="showOrg" :actions="orgaction" title="请选择单位" class="org-choice" @close="showOrg = false"
			@select="orgSelect"></u-action-sheet>
	</view>
</template>

<script>
	import {
		fireSpecialUpdate,
		fireSpecialCreate,
		fireSpecialIdGet
	} 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: '',
				formData: {
					orgName: '',
					orgId: '',
					empName: '',
					numberCode: '',
					idcardno: '',
					empGender: '',
					att:'',
					attId:[]
				},
				loading:'',
				rules: {
					empName: [{
						type: 'string',
						required: true,
						message: '人员姓名不能为空',
						trigger: ['blur', 'change']
					}],
					numberCode: [{
						type: 'string',
						required: true,
						message: '特种证书编号',
						trigger: ['blur', 'change']
					}],
					idcardno: [{
						type: 'string',
						required: true,
						pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
						message: "请输入合法身份证号",
						trigger: ['blur', 'change']
					}],
					// empName: NumericRule(),
				},
				isedit: '',
				isview: '',
				dateTime: '',
				showSex: false,
				actionsSex: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX), //性别
				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
			}
		},
		methods: {
			//查看已上传附件
			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.empGender = e.name
			},
			orgSelect(e) {
				this.formData.orgName = e.name
				this.formData.orgId = e.value
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			getData() {
				fireSpecialIdGet({
					id: this.parentId
				}).then(response => {
					this.formData = response.data
				})
			},
			bindDateChange(e) {
				this.formData.empBirthday = e.detail.value
			},
			bindDateChange2(e) {
				this.formData.issueDate = e.detail.value
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
				this.formData.att = this.formData.attId.length > 0 && this.formData.attId[0] ? this.formData
					.attId[0] : this.formData.att
					if (this.isedit) {
						fireSpecialUpdate(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 {
						fireSpecialCreate(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;
	}
	
</style>