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

<template>
	<view class=" uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<u--form ref="customForm" :model="formData" labelPosition="top" labelWidth="150" labelAlign="left">
				<u-form-item label="手机号" prop="linkTel" :required="true">
					<u-input v-model="formData.linkTel" placeholder="系统登录用户名" disabled />
				</u-form-item>

				<u-form-item label="真实姓名" prop="empRyxm" :required="true">
					<u-input v-model="formData.empRyxm" placeholder="真实姓名" disabled />
				</u-form-item>
				<u-form-item label="岗位" prop="empGw" :required="true">
					<u-input v-model="formData.empGw" placeholder="岗位" disabled />
				</u-form-item>
				<u-form-item label="主管单位" prop="zgdwid" :required="true"><u-input v-model="formData.zgdwid"
						placeholder="主管单位" disabled /></u-form-item>

				<u-form-item label="所属机构" :required="true" prop="orgName">
					<u--input v-model="formData.orgName" disabled placeholder="所属机构"></u--input>
				</u-form-item>
				<u-form-item label="人员编号">
					<u-input v-model="formData.empRybh" disabled placeholder="人员编号	" />
				</u-form-item>
				<u-form-item label="部门职别"><u-input v-model="formData.bmzb" disabled placeholder="部门职别" /></u-form-item>
				<u-form-item label="毕业学校"><u-input v-model="formData.byxx" disabled placeholder="毕业学校" /></u-form-item>
				<u-form-item label="人员性别" prop="empGender">
					<u--input v-model="formData.empGender" disabled placeholder="人员性别"></u--input>
				</u-form-item>

				<u-form-item label="学历">
					<u--input v-model="formData.empXl" prop="empXl" disabled placeholder="选择学历"></u--input>
				</u-form-item>
				<u-form-item label="职业资格证书">
					<u-input v-model="formData.pqcNo" placeholder="请输入职业资格证书" />
				</u-form-item>
				<u-form-item label="专业	"><u-input v-model="formData.empZy" disabled placeholder="专业" /></u-form-item>
				<u-form-item label="婚姻情况	"><u-input v-model="formData.hyqk" disabled placeholder="婚姻情况" /></u-form-item>

				<u-form-item label="籍贯">
					<u-input v-model="formData.jgdm" disabled placeholder="籍贯" @click.native="showPickerJiguan" />
				</u-form-item>
				<u-form-item label="民族">
					<u-input v-model="formData.mzdm" disabled placeholder="请选择民族" @click.native="showPicker" />
				</u-form-item>
				<u-form-item label="区域编码	"><u-input disabled v-model="formData.qybm" placeholder="区域编码" /></u-form-item>
				<u-form-item label="身份证号"><u-input disabled v-model="formData.sfzid" placeholder="身份证号" /></u-form-item>
				<u-form-item label="通讯地址"><u-input disabled v-model="formData.txdz" placeholder="通讯地址" /></u-form-item>
				<u-form-item label="现在单位"><u-input disabled v-model="formData.xzdw" placeholder="现在单位" /></u-form-item>
				<u-form-item label="邮政编码"><u-input disabled v-model="formData.yzbm" placeholder="邮政编码" /></u-form-item>
				<!-- <u-form-item label="职业资格证书"><u-input disabled v-model="formData.zyzgzs" placeholder="职业资格证书" /></u-form-item> -->
				<u-form-item label="出生日期">
					<uni-datetime-picker v-model="formData.empBirthday" disabled type="date"
						closeOnClickOverlay></uni-datetime-picker>
				</u-form-item>
			</u--form>
		</view>
		<view style="display: flex;width: 80%;margin-left: 10%;" class="heigthButton">
			<u-button @click="gotoEditArc(formData)" shape="circle" size="large" color="#4cb2b6" text="修改信息"></u-button>
			<u-button @click.native="showModal(formData)" customStyle="margin-left:20px" shape="circle" size="large"
				color="#ff3737" text="删除人员"></u-button>
		</view>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
			showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal"></u-modal>
	</view>
</template>
<script>
	import {
		delStaff, //删除人员信息
	} from '@/api/staff_info';
	var that = null;
	export default {
		data() {
			return {
				show: false,
				title: '是否删除该数据项?',
				content: '确认删除？',
				formData: {
					orgName: ''
				},
				screenHeight: this.$screenHeight,
				wheight: ''
			};
		},
		onLoad: function(option) {
			var data = option.id;
			that = this;
			// 接收来自上个页面传递的参数
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(val) {
				that.formData = val;
			});
			that.formData.orgName = option.orgName
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		methods: {
			// 传递当前页面数据到 ‘修改信息’
			gotoEditArc(val) {
				uni.navigateTo({
					url: '/pagesA/fire/staff_info/edit_staff/edit_staff?val=' + encodeURIComponent(JSON
						.stringify(val)),
					// events: {
					// 	// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					// 	acceptDataFromOpenedPage: function(val) {
					// 		this.formData = val;
					// 	}
					// },
					// success: function(res) {
					// 	// 通过eventChannel向被打开页面传送数据
					// 	res.eventChannel.emit('acceptDataFromOpenerPage', val);
					// }
				});
			},

			// 模态框内容
			showModal(val) {
				this.show = true;
				this.id = val.id;
			},
			confirm() {
				this.show = false;
				delStaff({
					id: this.id
				}).then(response => {
					if (response.code == 0) {
						uni.showToast({
							title: '删除成功！'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				});
			},
			close() {
				this.show = false;
			},
			cancel() {
				this.show = false;
			},

			// // 删除单位人员信息
			// onClickDel(val) {
			// 	this.id = val.id;
			// 	console.log(this.id);
			// 	delStaff({
			// 		id: this.id
			// 	}).then(response => {
			// 		uni.navigateBack({
			// 			delta:1
			// 		})
			// 		console.log(response, '获取人员信息详细信息获取人员信息详细信息获取人员信息详细信息获取人员信息详细信息');
			// 	});
			// },
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},

		}
	};
</script>
<style lang="scss" scoped>
	.container {
		position: relative;
		background-color: rgb(245, 247, 249);
		overflow: auto;

		.buju {
			margin: 40rpx 0;
		}
	}

	.cont {}

	.weiwan {
		color: #d51a52;
		background: rgba(213, 26, 82, 0.2);
		padding: 5rpx 20rpx;
		border-radius: 2px;
		border: 1px solid #d51a52;
	}

	.yiwan {
		color: #4cb2b6;
		background: rgba(76, 178, 182, 0.2);
		padding: 5rpx 20rpx;
		border-radius: 2px;
		border: 1px solid #4cb2b6;
	}

	.miaoshu {
		margin-right: 20rpx;
		color: #274647;
		font-weight: 600;
	}
</style>