emergencyManagement/pages/duty/components/AddForm.vue

<template>

		<view class="modal" :class="showModal?'show':''">
			<view class="head">
				<view class="name">{{title}}</view>
				<view class="clear-bt" @click="showModal=false">
					<uni-icons type="clear" size="30"></uni-icons>
				</view>				
			</view>
			<view class="form-wrap" >
				<uni-forms ref="form" label-position="top" :rules="rules" :model="form">
					<uni-forms-item label="值班岗" name="posId">
						<uni-data-select v-model="form.posId" :localdata="dutyList" placeholder="请选择值班岗" :clear="false" ></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="值班人员" name="accountId">
						<uni-data-select  v-model="form.accountId" :localdata="userList" placeholder="请选择值班人员" :clear="false"></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>
	import dutyApi from '@/api/duty.js'
	export default{
		name:'DutyAddForm',
		data(){
			return{
				showModal:false,
				type:undefined,
				title:'',
				rules:{
					posId:{
						rules:[
							{
								required: true,
								errorMessage: '请选择值班岗'
							}					
						],
						validateTrigger:'submit'
					},
					accountId:{
						rules:[
							{
								required: true,
								errorMessage: '请选择值班人员',
							}
						],
						validateTrigger:'submit'
					}					
				},
				form:{
					year:"",
					week:'',
					dutyType: undefined,
					groupId: 0,
					groupName: '',
					posId: undefined,
					posName: '',
					accountId: undefined,
					accountName: '',
					positionId: 0,
					positionName: '',
					remark: '',
				},
				dutyList:[],
				userList:[]
			}
		},
		methods:{
			show({type,params}){
				this.type=type
				if(type==='add'){this.resetForm()}
				if(params)this.form={...this.form,...params};
				this.showModal=true;
				this.title=type==='add'?'新增周记录':'更新周记录'
				this.init();
			},
			init(){
				let dutyList=uni.getStorageSync('dutys')
				let groupUser=uni.getStorageSync('groupUser')
				this.dutyList=dutyList.map(item=>{return{...item,value:item.posId,text:item.posName}})
				let userList=[]
				groupUser.map((item,index)=>{
					userList.push({...item,value:`root-${index+1}`,text:item.name,disable:true})
					if(Array.isArray(item.children)&&item.children.length>0){
						userList=userList.concat(item.children.map(item=>{return{...item,value:item.accountId,text:item.accountName}}))
					}			
				})
				this.userList=userList
			},
			resetForm(){
				this.form={
					year:"",
					week:'',
					dutyType: undefined,
					groupId: 0,
					groupName: '',
					posId: undefined,
					posName: '',
					accountId: undefined,
					accountName: '',
					positionId: 0,
					positionName: '',
					remark: ''
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					let user=this.userList.find(item=>this.form.accountId===item.accountId)
					let params={
						year: this.form.year,
						week: this.form.week,
						dutyType:this.form.dutyType,
						posId: this.form.posId,
						remark: this.form.remark,
						accountId: user.accountId,
						accountName: user.accountName,
						positionId: user.positionId,
						positionName: user.positionName,
						oAccountId: 0,
					}
					let submitFx=this.type==='add'?dutyApi.createWeekRecord:dutyApi.createWeekRecord
					submitFx(params).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success')
						this.showModal=false;
					})

				}).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;
		transition: 0.26s;	
		overflow-x: hidden;
		overflow-y: auto;		
		&.show{
			left: 0;
		}
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #f5f5f5;
			.name{
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
			}
		}
		.form-wrap{
			padding:40rpx;
			.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>