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>
				</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="!formData.id" @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
	} 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: '',
					empBirthday: '',
					issueDate: ''
				},
				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
			}
            console.log(this.isedit,'ffffffff',this.isview);
		},
		methods: {
			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
					console.log(response, 'response')
				})
			},
			//拍照
			closeImage(val, index) {
				this.formData.streetRepPicsDOList.splice(index, 1)
			},
			bindDateChange(e) {
				this.formData.empBirthday = e.detail.value
			},
			bindDateChange2(e) {
				this.formData.issueDate = e.detail.value
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log(this.isview, 'this.formDatathis.isview');
					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 => {
					console.log(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;
		}
	}
</style>