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

<template>
	<uni-drawer ref="drawer" mode="left" :mask-click="false" width="85%" :maskClick='true'>
		<scroll-view class="scroll-view" scroll-y="true">
			<uni-section :title="type==='add'?'隐患登记':'编辑隐患' " type="line"></uni-section>
			<view class="form-wrap" >
				<uni-forms ref="form" label-position="top" :rules="rules" :model="form" :label-width="300">
					<uni-forms-item  label ="企业/单位名称" >
						<uni-data-select  v-model="form.entId" :localdata="ents" placeholder="请选择企业/单位名称" :clear="false"></uni-data-select>
					</uni-forms-item>		
					<uni-card padding="0" margin="5px 0">
						<uni-forms-item  label ="隐患标题">
							<uni-easyinput v-model="form.dangerTitle" placeholder="请输入隐患标题"  />
						</uni-forms-item>	
<!-- 						<uni-forms-item  label ="隐患分类" >
							<uni-data-select  v-model="form.dangerCatId" :localdata="dangerCats" placeholder="请选择隐患分类" :clear="false"></uni-data-select>
						</uni-forms-item> -->	
						
						<uni-forms-item  label ="分类标签" >
							<uni-easyinput v-model="form.dangerTags" placeholder="请输入分类标签"  />
						</uni-forms-item>
						<uni-forms-item  label ="隐患等级" >
							<uni-data-select  v-model="form.dangerLevel" :localdata="dangerLevelOptions" placeholder="请选择隐患等级" :clear="false"></uni-data-select>
						</uni-forms-item>																									
						<uni-forms-item  label ="发生位置">
							<uni-easyinput v-model="form.dangerLocation" placeholder="请输入发生位置"  />
						</uni-forms-item>						
						<uni-forms-item label="隐患描述">
							<uni-easyinput type="textarea" :maxlength="300"
							 v-model="form.dangerDesc" autoHeight 
							placeholder="请输入隐患描述"></uni-easyinput>
							<view class="word-limit">{{form.dangerDesc.length||0}}/300</view>
						</uni-forms-item>	
						<uni-forms-item label ="登记时间">
							<uni-datetime-picker type="date" v-model="form.submitTime" placeholder="请选择登记时间"  />
						</uni-forms-item>
					</uni-card>
					<uni-card padding="0" margin="5px 0">
						<uni-forms-item label ="整改期限">
							<uni-datetime-picker type="date" v-model="form.dangerDeadLine" placeholder="请选择整改期限"  />
						</uni-forms-item>
						<uni-forms-item label="整改类型">
							<uni-data-checkbox 
							v-model="form.rectifyCat" 
							:localdata="[{ value: 1, text: '自行整改' },{ value: 2, text: '外协整改' }]"  />
						</uni-forms-item>					
						<uni-forms-item label="整改说明">
							<uni-easyinput type="textarea" :maxlength="300"
							 v-model="form.rectifyRemark" autoHeight 
							placeholder="请输入整改说明"></uni-easyinput>
							<view class="word-limit">{{form.rectifyRemark.length||0}}/300</view>
						</uni-forms-item>																																																																									
						<uni-forms-item label ="整改完成时间">
							<uni-datetime-picker type="date" v-model="form.rectifyTime" placeholder="请选择整改完成时间"  />
						</uni-forms-item>
					</uni-card>
					<uni-card padding="0" margin="5px 0">
						<uni-forms-item label="验收说明">
							<uni-easyinput type="textarea" :maxlength="300"
							 v-model="form.acceptRemark" autoHeight 
							placeholder="请输入验收说明"></uni-easyinput>
							<view class="word-limit">{{form.acceptRemark.length||0}}/300</view>
						</uni-forms-item>																																																																									
						<uni-forms-item label ="验收完成时间">
							<uni-datetime-picker type="date" v-model="form.acceptTime" placeholder="请选择验收完成时间"  />
						</uni-forms-item>
					</uni-card>																																							
					<uni-forms-item label="附件">
						<view class="attachbox">
							<view class="attach"  v-for="(attach, index) in form.attachList" :key="index" 
								@click="preview(form.attachList)" 
								@longpress="delAttach(index)">
								<image :src="attach.attachUrl"></image>
							</view>
							<view class="attach">
								<view class="handle" @click="uploadAttach">
									<uni-icons type="plusempty" size="40" color="#999999"></uni-icons>
								</view>
							</view>
						</view>
					</uni-forms-item>																					
					<uni-forms-item label="是否关闭">
						<uni-data-checkbox 
						v-model="form.status" 
						:localdata="[{ value: 0, text: '未整改' },{ value: 1, text: '已整改完成' }]"  />
					</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 dangerApi from '@/api/danger.js'
	import { upload } from '@/api/upload.js'	
	export default{
		name:"CreateDanger",
		computed:{
			ents(){
				let ents=this.ent
				if(!ents)return []
				return ents.map(item=>{
					return{
						value:item.entId,
						text:item.entName
					}
				})
			},
			dangerCats(){
				let dangerCats=this.danger
				if(!dangerCats)return []
				return dangerCats.map(item=>{
					return{
						value:item.dangerCatId,
						text:item.dangerCatTitle
					}
				})
			},						
		},
		props:{
			ent:{
				type:Array,
				default:()=>[]
			},
			danger:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				type:undefined,
				rules:{
					entName:{
						rules:[
							{
								required: true,
								errorMessage:"请输入企业名称"
							}					
						],
						validateTrigger:'submit'
					},
					entCatId:{
						rules:[
							{
								required: true,
								errorMessage:"请选择企业分类"
							}					
						],
						validateTrigger:'submit'
					}
				},
				dangerLevelOptions:[
				  { value: 0, text: '末知' },
				  { value: 1, text: '重大' },
				  { value: 2, text: '较大' },
				  { value: 3, text: '一般' },
				  { value: 4, text: '较小' }
				],
				statusOptions:[
				  { value: 0, text: '未整改' },
				  { value: 1, text: '已整改完成' }
				],
				form:{
					entId: undefined,
					dangerId: 0,
					dangerCatId: 1,
					dangerCatTitle: '',
					dangerTitle: '',
					dangerTags:'',
					dangerCode: '',
					dangerLocation: '',
					dangerLevel: 2,
					dangerDesc: '',
					submitTime: '',
					submitRemark: '',
					dangerDeadLine: '',
					rectifyTime: '',
					dangerReason: '',
					rectifyCat: 1,
					rectifyRemark: '',
					acceptTime: '',
					acceptRemark: '',
					finishTime: '',
					status: 0,
					attachList: []
				}
			}
		},
		methods:{
			resetForm(){
				this.form={
					entId: undefined,
					dangerId: 0,
					dangerCatId: 1,
					dangerCatTitle: '',
					dangerTitle: '',
					dangerTags:'',					
					dangerCode: '',
					dangerLocation: '',
					dangerLevel: 2,
					dangerDesc: '',
					submitTime: '',
					submitRemark: '',
					dangerDeadLine: '',
					rectifyTime: '',
					dangerReason: '',
					rectifyCat: 1,
					rectifyRemark: '',
					acceptTime: '',
					acceptRemark: '',
					finishTime: '',
					status: 0,
					attachList: []
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					let submitFx=this.type==='add'?dangerApi.create:dangerApi.update
					submitFx(this.form).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success')
						this.close();
					})

				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			preview(urls=[]){
				if(urls.length>0){
					urls=urls.map(item=>item.attachUrl);
					uni.previewImage({
						urls
					})	
				}
			},
			delAttach(idx){
				const self=this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除',
					success: function (res) {
						if (res.confirm) {
							self.form.attachList=self.form.attachList.filter((item,index)=>index!==idx);				
						}
					}
				});				
			},
			uploadAttach(){
				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)							
							let file={
								"attachId": fileResq.data.fileId,
								"attachName": fileResq.data.fileTitle,
								"attachExt": fileResq.data.fileExt,
								"attachUrl": fileResq.data.fileUrl,
								"attachIcon": fileResq.data.fileIcon
							}
							self.form.attachList.push(file);
						})
					}
				});	
			},
			show({type,item}){
				this.resetForm()
				this.type=type
				this.$refs.drawer.open()
				if(type==='edit'){
					dangerApi.getById(item.dangerId).then((res)=>{
						this.form={...res.data}
					})
				}
			},
			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;
			.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;
					}
				}
			}
			.word-limit{
				text-align: right;
				padding: 10rpx 0;
				color: #999;
				font-size: 26rpx;
			}
			.attachbox{
				display: flex;
				flex-wrap: wrap;
				.attach{
					padding: 16rpx 18rpx;
					image,.handle{
						display: block;
						width: 100rpx;
						height: 100rpx;
						box-shadow: rgba(0,0,0,0.6);	
						border: 1rpx solid #ccc;	
						border-radius: 10px;
						overflow: hidden;	
						box-sizing: border-box;
					}
					.handle{
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>