emergencyManagement/pages/team/components/MemberForm.vue

<template>
	<uni-drawer ref="drawer" mode="left" :mask-click="false" width="85%" :maskClick='true'>
		<scroll-view class="scroll-view" scroll-y="true">
			<view class="form-wrap" >
				<uni-forms ref="form" label-position="top" :rules="rules" :model="form">
					<uni-forms-item label="成员姓名" name="memberName" required>
						<uni-easyinput type="text" :maxlength="30" v-model="form.memberName" placeholder="请输入成员姓名"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="成员头像">
						<view class="memberAvatar" @click="editAvart">
							<image :src="form.memberAvatar" v-if="form.memberAvatar"></image>
						</view>
					</uni-forms-item>
					<uni-forms-item label="联系电话" name="memberPhone" required>
						<uni-easyinput v-model="form.memberPhone" type="number" :clearable="false" placeholder="请输入联系电话" />
					</uni-forms-item>	
					<uni-forms-item label="是否党员" required>
						<uni-data-checkbox v-model="form.ifCpc" :localdata="ifCpcs" />
					</uni-forms-item>	
					<view class="row" >
						<view class="col sex">
							<uni-forms-item label="性别">
								<view class="sexbox">
									<uni-data-checkbox v-model="form.memberSex" :localdata="sexs" />								
								</view>
							</uni-forms-item>
						</view>
						<view class="col age">
							<uni-forms-item label="年龄">
								<uni-easyinput type="number" v-model.number="form.memberAge" :clearable="false" placeholder="请输入年龄" />
							</uni-forms-item>
						</view>
					</view>												
					<uni-forms-item label="分工岗位">
						<uni-easyinput v-model="form.memberPosition" placeholder="请输入分工岗位" />
					</uni-forms-item>										
					<uni-forms-item label="职责说明">
						<uni-easyinput type="textarea" :maxlength="1000" v-model="form.memberDuty" placeholder="请输入职责说明"></uni-easyinput>
						<view class="word-limit">{{form.memberDuty.length||0}}/500</view>
					</uni-forms-item>
					<uni-forms-item label="说明">
						<uni-easyinput type="textarea" :maxlength="500" v-model="form.remark" placeholder="请输入说明"></uni-easyinput>
						<view class="word-limit">{{form.remark.length||0}}/500</view>
					</uni-forms-item>
					<uni-forms-item label="排序" v-model="form.sortNo">
						<uni-number-box :min="1"></uni-number-box>
					</uni-forms-item>
				</uni-forms>
				<view class="handle-container">
					<button class="save" type="primary" @click="onSubmit">保存</button>
					<button class="cancel" type="default" @click="close">取消</button>
				</view>
			</view>	
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import teamApi from '@/api/team.js'
	import { upload } from '@/api/upload.js'
	export default{
		name:"MemberForm",
		data(){
			return{
				type:undefined,
				rules:{
					memberName:{
						rules:[
							{
								required: true,
								errorMessage: '请输入成员姓名'
							}					
						],
						validateTrigger:'submit'
					},
					memberPhone:{
						rules:[
							{
								required: true,
								errorMessage: '请输入联系电话',
							},{
								// validateFunction:function(rule,value,data,callback){
								// 	const regex = /^(\d{3,4}-)?\d{7,8}(-\d{1,4})?$/;
								// 	if(!regex.test(value)){
								// 		callback('请输入正确的手机号码')
								// 	}
								// 	return true
								// }
							}
						],
						validateTrigger:'submit'
					}					
				},
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}],
				ifCpcs: [{
					text: '不是党员',
					value: 0
				}, {
					text: '党员',
					value: 1
				}],
				form:{
					teamId: 0,
					memberId: 0,
					memberName: '',
					memberAvatar: '',
					memberPosition: '',
					memberPhone: '',
					memberDuty: '',
					memberSex: 1,
					memberAge: 20,
					ifCpc: 0,
					remark: '',
					sortNo: 1,					
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods:{
			resetForm(){
				this.form={
					teamId: 0,
					memberId: 0,
					memberName: '',
					memberAvatar: '',
					memberPosition: '',
					memberPhone: '',
					memberDuty: '',
					memberSex: 1,
					memberAge: 20,
					ifCpc: 0,
					remark: '',
					sortNo: 1,
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					let submitFx=this.type==='add'?teamApi.createMember:teamApi.updateMember
					submitFx(this.form).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success')
						this.close();
					})
			
				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			editAvart(){
				const self=this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album',"camera"], //从相册选择
					success:(res)=>{
						let filePath=res.tempFilePaths[0]
						upload({filePath}).then((resq)=>{
							var fileResq=JSON.parse(resq)
							self.form.memberAvatar=fileResq.data.fileUrl;
						})
					}
				});		
			},
			show(type,item){
				this.resetForm()
				if(type==='edit'){
					this.form={...item}
				}else{
					this.form.teamId=item
				}
				this.type=type
				this.$refs.drawer.open()
			},
			close(){
				this.$refs.drawer.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.form-wrap{
			padding:40rpx 20rpx;
			.row{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				.col{
					width: 50%;
					&.sex{
						.sexbox{
							padding-top: 22rpx;
						}
					}
					&.age{
						width: 200rpx;
					}
				}
			}
			.memberAvatar{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #eaeaea;
				image{
					display: block;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			.word-limit{
				text-align: right;
				padding: 10rpx 0;
				color: #999;
				font-size: 26rpx;
			}
			.handle-container{
				display: flex;
				justify-content: center;
				align-items: center;
				button{
					width: 160rpx;
					padding: 20rpx 16rpx;
					line-height: 1;
					font-size: 28rpx;
					&.save{
						background-color: #007aff;
					}
				}
			}
		}
	}
</style>