emergencyManagement/packageA/pages/reporting/components/Report.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="Report">
				<uni-card title="模板"  extra="可点选下面模板，然后修改填写" padding="0" margin="10px 5px">
					<view class="templatewrap">
						<view class="template" v-for="(template,templateIdx) in templateList" :key="template.reportingTypeId">
							<view class="reportingTypeTitle">{{template.reportingTypeTitle}}</view>
							<view class="template-item" v-for="(item,idx) in template.templateList" :key="item.templateId" @click='changeTemplate(item)' 
								:class="form.templateId===item.templateId?'active':''">
								<text class="index">{{idx+1}}.</text>
								<text class="word">{{item.templateTitle}}</text>
							</view>
						</view>
					</view>
				</uni-card>
				<uni-card :title="form.reportingTypeTitle"  :extra="form.templateTitle" :note="form.templateDesc" padding="0" margin="10px 5px">
					<view class="form-wrap" >
						<uni-forms ref="form" label-position="top" :rules="rules" :model="form" :label-width="300">
							<uni-forms-item  label ="消息标题">
								<uni-easyinput v-model="form.reportingSubject" type="textarea" auto-height="true" placeholder="请输入消息标题" :maxlength="150" />
								<view class="word-limit">{{form.reportingSubject.length||0}}/150</view>
							</uni-forms-item>	
							<uni-forms-item  label ="上报单位" >
								<uni-easyinput v-model="form.reportingGroupName" placeholder="请输入上报单位"  />
							</uni-forms-item>						
							<uni-forms-item label="请输入消息内容">
								<uni-easyinput type="textarea" :maxlength="300"
								 v-model="form.reportingContent" autoHeight 
								placeholder="请输入消息内容"></uni-easyinput>
								<view class="word-limit">{{form.reportingContent.length||0}}/300</view>
							</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>	
				</uni-card>
			</view>
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import reportingApi from '@/api/reporting.js'
	export default{
		name:"EditReporting",
		data(){
			return{
				defaultTemplateId: 1,
				templateList:uni.getStorageSync('reportTemplates')||[],
				form:{
					templateId: undefined ,
					templateTitle: '',
					reportingTypeId: '',
					reportingTypeTitle: '',
					reportingSubject: '',
					reportingContent: '',
					reportingGroupName: "",
					templateDesc: '',
				}
			}
		},
		methods:{
			resetForm(){
				let accountInfo=uni.getStorageSync('accountInfo')
				this.form={
					templateId: undefined ,
					templateTitle: '',
					reportingTypeId: '',
					reportingTypeTitle: '',
					reportingSubject: '',
					reportingContent: '',
					reportingGroupName: accountInfo&&accountInfo.groupName,
					templateDesc: '',
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					reportingApi.create(this.form).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success')
						this.close();
					})
			
				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			changeTemplate(item){
				reportingApi.getTemplateById(item.templateId).then((res)=>{
					this.getTemplateData(res.data)
				})
			},
			show(){
				this.resetForm()
				this.$refs.drawer.open()
				if(!uni.getStorageSync('reportTemplates')){
					reportingApi.getTemplateByView().then((res)=>{
						uni.setStorageSync('reportTemplates',res.data)
						this.templateList=res.data
					})
				}
				reportingApi.getTemplateById(this.defaultTemplateId).then((res)=>{
					this.getTemplateData(res.data)
				})
			},
			getTemplateData(data){
				this.form.templateId = data.templateId
				this.form.reportingTitle = data.templateTitle
				this.form.reportingTypeId = data.reportingTypeId
				this.form.reportingTypeTitle = data.reportingTypeTitle				
				this.form.reportingSubject = data.templateSubject
				this.form.reportingContent = data.templateContent				
				this.form.templateDesc = data.templateDesc		
				this.form.templateTitle = data.templateTitle	
			},
			close(){
				this.$refs.drawer.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		height: 100%;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		.templatewrap{
			padding-top: 16rpx;
			.template{
				.reportingTypeTitle{
					font-weight: 500;
					color: #000;
					font-size: 30rpx;
				}
				.template-item{
					padding: 10rpx 0 10rpx 24rpx;
					&.active{
						background-color:rgba(64, 158, 255,1);
						.index,.word{
							color: #fff;
						}
					}
					.index{
						padding-right: 4rpx;
					}
					.word{
						font-size: 24rpx;
						color: #999999;
						line-height: 1;
					}
				}
			}
		}
		.form-wrap{
			padding:40rpx 0;
			.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>