emergencyManagement/pages/duty/components/AddForm.vue

<template>
	<view class="modal" :class="showModal?'show':''">
		<view class="form-wrap" >
			<uni-forms ref="form" label-position="top" :rules="rules" :model="form">
				<uni-forms-item label="值班岗" name="posName">
					<uni-data-select v-model="form.posId" :localdata="posList"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="值班人员" name="user">
					<uni-data-select v-model="form.accountId" :localdata="userList"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="职责说明" name="remark">
					<uni-easyinput type="textarea" :maxlength="30" v-model="form.remark" placeholder="请输入职责说明"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view class="handle-container">
				<button class="save" type="primary" @click="onSubmit">保存</button>
				<button class="cancel" type="default" @click="showModal=false">取消</button>
			</view>
		</view>	
	</view>
</template>

<script>
	export default{
		name:'DutyAddForm',
		data(){
			return{
				showModal:false,
				rules:{
					posName:{
						rules:[
							{
								required: true,
								errorMessage: '请选择值班岗'
							}					
						],
						validateTrigger:'submit'
					},
					user:{
						rules:[
							{
								required: true,
								errorMessage: '请选择值班人员',
							}
						],
						validateTrigger:'submit'
					}					
				},
				form:{
					year:"",
					week:'',
					dutyType: undefined,
					groupId: 0,
					groupName: '',
					posId: undefined,
					posName: '',
					accountId: undefined,
					accountName: '',
					positionId: 0,
					positionName: '',
					remark: '',
				},
				posList:[],
				userList:[]
			}
		},
		methods:{
			show(){
				this.showModal=true
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					uni.showToast({
						icon:"none",
						title:"成功！！"
					})
				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal{
		position: fixed;
		left: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 999;
		box-sizing: border-box;
		overflow-y: auto;
		transition: 0.36s;	
		overflow: hidden;
		&.show{
			left: 0;
		}
		.form-wrap{
			padding: 20rpx;
			.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>