androidCnToWechatGrt/pagesHome/employee/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='员工管理'></cus-header>
		<div class="info">
			<div class="item">
				<div class="left">姓名</div>
				<div class="right">
					<input type="text" v-model="userInfo.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="item">
				<div class="left">工号</div>
				<div class="right">
					<input type="text" v-model="userInfo.jobNumber" placeholder="请输入工号">
				</div>
			</div>
			<div class="item">
				<div class="left">身份证</div>
				<div class="right">
					<input type="text" v-model="userInfo.idCard" placeholder="请输入身份证">
				</div>
			</div>
			<div class="item">
				<div class="left">性别</div>
				<div class="right" @tap="sexShow = true">
					{{userInfo.gender==1?'男':(userInfo.gender==2?'女':'保密')}}
					<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
				</div>
			</div>
			<div class="item">
				<div class="left">手机号</div>
				<div class="right">
					<input type="text" v-model="userInfo.mobile" placeholder="请输入手机号">
				</div>
			</div>
			<div class="item">
				<div class="left">职位</div>
				<div class="right">
					<input type="text" v-model="userInfo.postName" placeholder="请输入职位">
				</div>
			</div>
			<div class="item">
				<div class="left">邮箱</div>
				<div class="right">
					<input type="text" v-model="userInfo.email" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="item">
				<div class="left">家庭住址</div>
				<div class="right">
					<input type="text" v-model="userInfo.address" placeholder="请输入家庭住址">
				</div>
			</div>
			<div class="item">
				<div class="left">入职时间</div>
				<div class="right" @tap="dateShow = true">
					{{userInfo.entryDate}}
					<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
				</div>
			</div>
		</div>
		<div class="btn" @tap="confirm">确定</div>
		<u-picker :show="sexShow" :columns="sexColumns" title="性别" keyName="name" @cancel="sexShow = false;" @confirm="sexConfirm"></u-picker>
		<u-datetime-picker :show="dateShow" v-model="userInfo.workdate" mode="date" @cancel="dateShow = false;" @confirm="dateConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				userInfo:{},
				sexShow:false,
				sexColumns:[[{id:1,name:'男'},{id:2,name:'女'},{id:3,name:'保密'}]],
				dateShow:false
			}
		},
		onLoad(options) {
			this.getDetail(options.id||'')
		},
		methods:{
			getDetail(id){
				this.$api.get('/staff/info/'+id).then(res=>{
					if(res.data.code===0){
						this.userInfo = res.data.data;
						this.userInfo.workdate = new Date(this.userInfo.entryDate);
					}else this.$showToast(res.data.msg)
				})
			},
			sexConfirm(e){
				this.userInfo.gender = e.value[0].id;
				this.sexShow = false;
			},
			dateConfirm(e){
				this.userInfo.workdate = new Date(e.value);
				this.userInfo.entryDate = new Date(this.userInfo.workdate).Format('yyyy-MM-dd');
				this.dateShow = false;
			},
			confirm(){
				if(!this.$reg.idCard(this.userInfo.idCard)) return this.$showToast('请输入正确的身份证号')
				if(!this.$reg.mobile(this.userInfo.mobile)) return this.$showToast('请输入正确的手机号')
				if(!this.$reg.email(this.userInfo.email)) return this.$showToast('请输入正确的邮箱')
				
				this.$api.put('/staff/info',this.userInfo).then(res=>{
					if(res.data.code===0){
						this.$showToast('操作成功');
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else this.$showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F4F8FB;
		box-sizing: border-box;
		
		.info{
			width: 100%;
			margin-top: 20rpx;
			.item{
				padding: 24rpx 25rpx;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					text-align: left;
				}
				.right{
					display: flex;
					align-items: center;
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #4E5969;
						line-height: 42rpx;
						text-align: right;
						outline: none;
						border: none;
					}
				}
			}
		}
		
		.btn{
			width: calc(100% - 108rpx);
			height: 88rpx;
			background: #198CFF;
			border-radius: 16rpx;
			margin: 240rpx 54rpx 0;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>