emergencyManagement/packageA/pages/danger/components/SupervisorList.vue

<template>
	<uni-drawer ref="drawer" mode="left" :mask-click="false" width="100%" :maskClick='true'>
		<view class="head">
			<view class="name">{{dangerTitle}}</view>
			<view class="close" @click="close()">
				<uni-icons type="closeempty" size="24" color="#999" @click="close"></uni-icons>
			</view>
		</view>
		<scroll-view class="scroll-view" scroll-y="true">
			<uni-section title="隐患责任主体" type="line">
				<template v-slot:right>
					<view class="add" @click="create">
						<uni-icons type="plusempty" size="20" color="#ccc"></uni-icons>
					</view>
				</template>
			</uni-section>
			<view class="form-wrap" >
				<uni-forms ref="form" :model="form" :label-width="100">
					<uni-card padding="2px 0" margin="5px 0" v-for="(item,index) in form" :key="index">
						<uni-forms-item label ="责任部门">
							<uni-easyinput v-model="item.supervisorGroupName" placeholder="请输入责任部门" :clearable="false"  />
						</uni-forms-item>
						<uni-forms-item label="责任人员">
							<uni-easyinput v-model="item.supervisorName" placeholder="请输入责任人员" :clearable="false" />
						</uni-forms-item>					
						<uni-forms-item label="联系电话">
							<uni-easyinput v-model="item.supervisorPhone" type="number" placeholder="请输入联系电话" :clearable="false" />
						</uni-forms-item>	
						<view class="handle-container">
							<button class="save" type="primary" @click="onSubmit(item)">保存</button>
							<button class="del" type="default" @click="delItem(index,item)">删除</button>
						</view>																																																																														
					</uni-card>																																																																																																																																																																
				</uni-forms>
			</view>	
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import dangerApi from '@/api/danger.js'
	export default{
		name:"SupervisorList",
		data(){
			return{
				dangerId:undefined,
				dangerTitle:undefined,
				form:{},				
			}
		},
		methods:{
			resetForm(){
				this.form={}
			},
			create(){
				let item={
					dangerId:this.dangerId,
					supervisorGroupName: '',
					supervisorName: '',
					supervisorPhone: '',
				}
				this.form.unshift(item)
			},
			delItem(index,item){
				if(!item.supervisorId){
					this.form=this.form.filter((item,idx)=>index!==idx)
				}else{
					const self=this;
					uni.showModal({
						title: '提示',
						content: '是否确定删除',
						success: function (res) {
							if (res.confirm) {
								dangerApi.deleteSupervisorById(item.dangerId,item.supervisorId).then(()=>{
									uni.showToast({
										title:'删除成功！',
										duration:1500,
										icon:'none'
									})
									setTimeout(()=>{
										self.getDataList()
										self.$emit('success')
									},1500)
								})			
							}
						}
					});	

				}
			},
			onSubmit(item){
				this.$refs.form.validate().then(res=>{
					let submitFx=item.supervisorId?dangerApi.updateSupervisor:dangerApi.createSupervisor
					submitFx({dangerId:this.dangerId,...item}).then(()=>{
						uni.showToast({
							title:'操作成功！',
							duration:1500,
							icon:'none'
						})
						setTimeout(()=>{
							this.getDataList()
							this.$emit('success')
						},1500)

					})

				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			getDataList(){
				dangerApi.getSupervisorListById(this.dangerId).then((res)=>{					
					this.form=res.data||[]
				})
			},
			show(item){
				this.resetForm()
				this.dangerId=item.dangerId
				this.dangerTitle=item.dangerTitle
				this.getDataList()
				this.$refs.drawer.open()				
			},
			close(){
				this.$refs.drawer.close()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.head{
		height: 80rpx;		
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 10rpx;
		background-color: #f5f5f5;
		.name{
			font-size: 30rpx;
			color: #222222;
			font-weight: 500;
			line-height: 1;
			padding-left: 30rpx;
		}
		.close{
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding:0 30rpx;
		}
	}
	.scroll-view {
		height: calc(100% - 130rpx);
		padding:0 20rpx 20rpx;
		box-sizing: border-box;
		.add{
			padding: 10rpx 30rpx;
		}
		.form-wrap{
			padding:40rpx 20rpx;
			.handle-container{
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 10rpx;
				button{
					width: 160rpx;
					padding: 20rpx 16rpx;
					line-height: 1;
					font-size: 28rpx;
					&.save{
						background-color: #007aff;
					}
					&.del{
						background-color: #f56c6c;
						color: #fff;
					}
				}
			}
		}
	}
</style>