ybxf-security-uniapp/pagesA/fire/staff_info/add_staff/add_staff.vue

<template>
	<view class="uni-container">
		<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="addUser.username" :required="true">
						<u-input v-model="formData.addUser.username" placeholder="请输入系统登录用户名" />
					</u-form-item>
					<u-form-item label="手机号" prop="addUser.mobile" :required="true">
						<u-input v-model="formData.addUser.mobile" placeholder="请输入手机号	" />
					</u-form-item>

					<u-form-item label="真实姓名" prop="empRyxm" :required="true">
						<u-input v-model="formData.empRyxm" placeholder="请输入真实姓名" />
					</u-form-item>
					<u-form-item label="岗位" prop="empGw" :required="true">
						<u-input v-model="formData.empGw" placeholder="请输入岗位" />
					</u-form-item>
					<u-form-item label="主管单位" prop="zgdwid" :required="true">
						<u-input v-model="formData.zgdwid" placeholder="请输入主管单位" />
					</u-form-item>
					<u-form-item label="所属机构" :required="true" prop="orgName" @click="
							showSex5 = true;
							hideKeyboard();
						">
						<u--input v-model="formData.orgName" disabled disabledColor="#ffffff" placeholder="请选择所属机构">
						</u--input>
					</u-form-item>
					<u-form-item label="人员编号">
						<u-input v-model="formData.empRybh" placeholder="请输入人员编号	" />
					</u-form-item>
					<u-form-item label="部门职别">
						<u-input v-model="formData.bmzb" placeholder="请输入部门职别" />
					</u-form-item>

					<u-form-item label="毕业学校">
						<u-input v-model="formData.byxx" placeholder="请输入毕业学校" />
					</u-form-item>
					<u-form-item label="职业资格证书">
						<u-input v-model="formData.zzzs" placeholder="请输入职业资格证书" />
					</u-form-item>
					<u-form-item label="人员性别" prop="empGender" @click="
							showSex = true;
							hideKeyboard();
						">
						<u--input v-model="formData.empGender" disabled disabledColor="#ffffff" placeholder="请选择人员性别">
						</u--input>
					</u-form-item>
					<u-form-item label="学历" @click="
							showSex4 = true;
							hideKeyboard();
						">
						<u--input v-model="formData.empXl" prop="empXl" disabled disabledColor="#ffffff"
							placeholder="选择学历"></u--input>
					</u-form-item>
					<!-- 	<u-form-item label="人员序号	">
						<u-input v-model="formData.empXh" placeholder="请输入人员序号" />
					</u-form-item> -->
					<u-form-item label="专业	">
						<u-input v-model="formData.empZy" placeholder="请输入专业" />
					</u-form-item>
					<u-form-item label="婚姻情况	">
						<u-input v-model="formData.hyqk" placeholder="请输入婚姻情况" />
					</u-form-item>
					<u-form-item label="籍贯">
						<u-input v-model="formData.jgdm" placeholder="请输入籍贯" @click.native="showPickerJiguan" disabled class="jiguan"/>
					</u-form-item>
					<!-- <u-form-item label="警官证号">
						<u-input v-model="formData.jgzh" placeholder="请输入警官证号" />
					</u-form-item> -->
					<u-form-item label="民族">
						<u-input v-model="formData.mzdm" placeholder="请选择民族" @click.native="showPicker"  disabled class="jiguan"/>
					</u-form-item>
					<!-- <u-form-item label="人员类别" @click="
							showSex3 = true;
							hideKeyboard();
						">
						<u--input v-model="formData.empType" disabled disabledColor="#ffffff" placeholder="选择人员类别">
						</u--input>
					</u-form-item> -->
					<u-form-item label="区域编码	">
						<u-input v-model="formData.qybm" placeholder="请输入区域编码" />
					</u-form-item>
					<u-form-item label="身份证号">
						<u-input v-model="formData.sfzid" placeholder="请输入身份证号" />
					</u-form-item>
					<u-form-item label="通讯地址">
						<u-input v-model="formData.txdz" placeholder="请输入通讯地址" />
					</u-form-item>
					<!-- <u-form-item label="学历代码">
						<u-input v-model="formData.xldm" placeholder="请输入学历代码" />
					</u-form-item> -->
					<u-form-item label="现在单位">
						<u-input v-model="formData.xzdw" placeholder="请输入现在单位" />
					</u-form-item>
					<u-form-item label="邮政编码">
						<u-input v-model="formData.yzbm" placeholder="请输入邮政编码" />
					</u-form-item>
					<!-- <u-form-item label="执法身份证">
						<u-input v-model="formData.zfsfzid" placeholder="请输入执法身份证" />
					</u-form-item> -->
					<!-- 	<u-form-item label="政治面貌代码">
						<u-input v-model="formData.zzmmdm" placeholder="请输入政治面貌代码" />
					</u-form-item> -->
					<!-- 出生日期 -->
					<view class="flex flex-direction-row" style="margin-top:30rpx">
						<text class="text-Width">出生日期：</text>
						<uni-datetime-picker :show="showtimeStart" v-model="formData.empBirthday" type="date"
							closeOnClickOverlay @confirm="confirmStarttime" @cancel="showtimeStart = false"
							@change="changetime" @close="showtimeStart = false"></uni-datetime-picker>
					</view>
					<!-- 入伍时间 -->
					<!-- <view class="flex flex-direction-row" style="margin-top:30rpx">
						<text class="text-Width">入伍时间：</text>
						<u-button customStyle="background-color: rgba(76, 178, 182, 0.5);" plain shape="circle" size="small"
							color="#fff" @click="showtimeEnd = true" :text="formData.rwsj"></u-button>
						<u-datetime-picker :show="showtimeEnd" :value="formData.rwsj" mode="date" closeOnClickOverlay
							@confirm="confirmEndtime" @cancel="showtimeEnd = false" @change="changetime"
							@close="showtimeEnd = false"></u-datetime-picker>
					</view> -->
				</view>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions2" title="人员性别" @close="showSex = false"
				@select="sexSelect2"></u-action-sheet>
			<u-action-sheet :show="showSex3" :actions="actions3" title="人员类别" @close="showSex3 = false"
				@select="sexSelect3"></u-action-sheet>
			<u-action-sheet :show="showSex4" :actions="actions4" title="学历" @close="showSex4 = false"
				@select="sexSelect4"></u-action-sheet>
			<u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
				@select="sexSelect5"></u-action-sheet>
			<u-action-sheet :show="showPopup" :actions="mzListPopup" title="选择民族" @close="showPopup = false"
				@select="choiceMz"></u-action-sheet>
			<u-action-sheet :show="showPopupJiguan" :actions="jiguanListPopup" title="选择籍贯"
				@close="showPopupJiguan = false" @select="choiceJiguan"></u-action-sheet>
		</view>
		<view class="heigthButton">
			<u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
				text="确认新增"></u-button>
		</view>
	</view>
</template>
<script>
	import {
		addStaff, //获取人员信息列表
		getOrgId,
		addUser
	} from '@/api/staff_info';
	import {
		DICT_TYPE,
		getDictDatas
	} from '@/utils/dict';

	let that = null;
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				wheight: '',
				showSex: false,
				showSex3: false,
				showSex4: false,
				showSex5: false, //所属单位
				showPopup: false,
				selectedMzIndex: [0], // 已选中的民族下标，初始值为第一个元素
				mzListPopup: [],
				mzList: ['汉族', '蒙古族', '回族', '藏族', '维吾尔族', '苗族', '彝族', '壮族', '布依族', '朝鲜族', '满族', '侗族', '瑶族', '白族', '土家族',
					'哈尼族', '哈萨克族', '傣族', '黎族', '傈僳族', '佤族', '畲族', '高山族', '拉祜族', '水族', '东乡族', '纳西族', '景颇族', '柯尔克孜族',
					'土族', '达斡尔族', '仫佬族', '羌族', '布朗族', '撒拉族', '毛南族', '仡佬族', '锡伯族', '阿昌族', '普米族', '塔吉克族', '怒族', '乌孜别克族',
					'俄罗斯族', '鄂温克族', '德昂族', '保安族', '裕固族', '京族', '塔塔尔族', '独龙族', '鄂伦春族', '赫哲族', '门巴族', '珞巴族'
				], // 56个民族数据
				//籍贯
				showPopupJiguan: false,
				jiguanList: ["北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省",
					"江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省", "西藏自治区",
					"陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区", "台湾省", "香港特别行政区", "澳门特别行政区"
				],
				jiguanListPopup: [],
				actions: [],
				actions2: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				actions3: [{
					id: 1,
					name: '一类'
				}, {
					id: 2,
					name: '二类'
				}, {
					id: 3,
					name: '三类'
				}],
				actions4: getDictDatas(DICT_TYPE.XUE_LI),
				actions5: [],
				formData: {
					addUser: {
						nickname: '',
						password: '',
						orgId: '',
						deptId: 100000
					},
					code: '',
					orgName: '',
					accountId: '',
					// empBirthday:'请选择出生日期',
					// rwsj:'请选择入伍时间'
					rwsj: ''
				},

				showtimeStart: false,
				showtimeEnd: false,
				customRules: {
					orgName: {
						type: 'string',
						required: true,
						message: '所属机构不能为空',
						trigger: ['blur', 'change']
					},
					empRyxm: {
						type: 'string',
						required: true,
						message: '真实姓名不能为空',
						trigger: ['blur', 'change']
					},
					empGw: {
						type: 'string',
						required: true,
						message: '岗位不能为空',
						trigger: ['blur', 'change']
					},
					zgdwid: {
						type: 'string',
						required: true,
						message: '主管单位不能为空',
						trigger: ['blur', 'change']
					},
					linkTel: {
						type: 'number',
						message: '联系电话为数字',
						trigger: ['blur', 'change']
					},
					'addUser.username': {
						type: 'string',
						required: true,
						message: '系统登录用户名不能为空',
						trigger: ['blur', 'change']
					},
					'addUser.mobile': {
						required: true,
						pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						message: '请输入正确的电话号码',
						trigger: ['blur', 'change']

					},
					sfzid: {
						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']
					}
				}
			};
		},
		computed: {},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.actions4.map(i => {
				i.name = i.label;
				i.id = i.value;
			});

			that = this;
			// 获取单位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 => {
					this.actions5.push({
						id: v.dwid,
						name: v.orgName
					});
				});
			});
		},
		onShow() {
			this.jiguanList.map((i, index) => {
				this.jiguanListPopup.push({
					id: index,
					name: i
				})
			})
			this.mzList.map((i, index) => {
				this.mzListPopup.push({
					id: index,
					name: i
				})
			})
		},
		onReady() {
			this.$refs.customForm.setRules(this.customRules);
		},

		methods: {
			//民族
			showPicker() {
				// 点击输入框时显示下拉选择器
				this.showPopup = true
			},
			choiceMz(item) {
				this.formData.mzdm = item.name
				this.$forceUpdate()
			},
			sureMz() {
				this.showPopup = false
			},
			//籍贯
			showPickerJiguan() {
				this.showPopupJiguan = true
			},
			sureJiguan() {
				this.showPopupJiguan = false
			},
			choiceJiguan(item) {
				this.formData.jgdm = item.name
				this.$forceUpdate()
			},
			submit(ref) {
				// if(this.formData.empBirthday){
				// 	this.formData.empBirthday= this.formData.empBirthday + '00:00:00'
				// }
				this.$refs[ref]
					.validate()
					.then(res => {
						that = this;
						// 新增用户以获取accountId
						this.formData.addUser.nickname = this.formData.addUser.username;
						this.formData.addUser.password = this.formData.addUser.mobile.substring(
							this.formData.addUser.mobile.length - 6
						);
						this.formData.linkTel = this.formData.addUser.mobile;
						this.formData.addUser.orgId = this.formData.sjjg
						var userData = JSON.stringify(this.formData.addUser);
						addUser(userData).then(response => {
							that.formData.accountId = response.data;

							// 新建用户信息
							this.formData['status'] = 0;
							console.log(this.formData);
							var jsdata = JSON.stringify(this.formData);
							addStaff(jsdata).then(response => {
								console.log('response.data.msg,', response.data);
								uni.hideLoading();
								uni.navigateBack({
									delta: 1
								});
							});
						});
					})
					.catch(err => {
						console.log('err错误信息为：', err);
						uni.showToast({
							icon: 'none',
							title: '错误！' + err[0].message
						})
					});
			},

			// 出生日期
			confirmStarttime(e) {
				this.showtimeStart = false;
				console.log(e.value, e.mode);
				let value = new Date(e.value);
				// this.formData.empBirthday = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
			},
			changetime(e) {
				console.log('change', e);
			},
			// 入伍时间
			confirmEndtime(e) {
				this.showtimeEnd = false;
				console.log(e.value, e.mode);
				let value = new Date(e.value);
				this.formData.rwsj = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
			},

			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			// 人员性别
			sexSelect2(e) {
				this.formData.empGender = e.name;
				console.log(this.formData.empGender);
			},
			// 人员类别
			sexSelect3(e) {
				this.formData.empType = e.name;
				console.log(this.formData.empType);
			},
			// 人员性别
			sexSelect4(e) {
				this.formData.empXl = e.name;
				console.log(this.formData.empXl);
			},
			// 所属单位
			sexSelect5(e) {
				this.formData.sjjg = e.id;
				this.formData.orgName = e.name;
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f5f7f9;
		position: relative;
	}

	.text-Width {
		font-size: 30rpx;
		text-align: center;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		white-space: pre-wrap;
	}

	.uni-row[data-v-1d993189] {
		position: relative;
		flex-direction: column;
		box-sizing: border-box;
	}

	.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%;
		}
	}

	//*号和label位置
	/deep/.u-form-item__body__left__content__required[data-v-5e7216f1],
	/deep/.u-form-item__body__left__content__required.data-v-5e7216f1,
	/deep/.u-form-item__body__left__content__required {
		left: 14rpx !important;

	}

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

	/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;
	}

	.activecolor {
		background-color: #f5f7f9;
	}

	.confrim-btn {
		margin: 20px;

		/deep/ .u-button {
			border: none;
			color: #fff;
			border-radius: 60rpx;
			background-color: #4cb2b6;
		}
	}

	.mzCss {
		padding: 10px 0;
		font-size: 16px;
		width: 96%;
		margin-left: 2%;
		border-radius: 60rpx;
	}

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

	.example {
		overflow-y: auto;
	}

	//关闭按钮的样式
	/deep/.uicon-close {
		color: #6b6b6b !important;
		background-color: #fff;
		font-size: 25px !important;
		line-height: 8px !important;
	}
	.jiguan{
		background-color: #fff !important;
	}
</style>