~xingchuan/SewerAndRainNetwork.git

New file
			@@ -0,0 +1,223 @@
			<template>
			<div class="report-popup map-background" v-drag v-show="flags">
			<div class="public-bounced-title panel-title">
			<span>上报事件</span>
			<i class="el-icon-circle-close" @click="closePopup"></i>
			</div>
			<div class="report-content">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form">
			<el-form-item label="事件名称" prop="nameEvent">
			<el-input v-model="ruleForm.nameEvent" class="report-input"></el-input>
			</el-form-item>
			<el-form-item label="事件类型" prop="eventType">
			<el-radio-group v-model="ruleForm.eventType">
			<el-radio v-for="(item,index) in ruleForm.eventTypeList" :label="item.value" :key="index">
			<span>{{ item.name }}</span>
			</el-radio>
			</el-radio-group>
			</el-form-item>
			<el-form-item label="事件等级" prop="eventLevel">
			<el-radio-group v-model="ruleForm.eventLevel">
			<el-radio v-for="(item,index) in ruleForm.eventLevelList" :label="item.value" :key="index">
			<span>{{ item.name }}</span>
			</el-radio>
			</el-radio-group>
			</el-form-item>
			<el-row>
			<el-col :span="12">
			<el-form-item label="事发单位" prop="region">
			<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
			<el-option label="单位位置1" value="shanghai"></el-option>
			<el-option label="单位位置2" value="beijing"></el-option>
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="事发时间" prop="region" class="search-panel-item">
			<el-date-picker
			v-model="ruleForm.atTime"
			type="datetime"
			placeholder="选择日期时间">
			</el-date-picker>
			</el-form-item>
			</el-col>
			</el-row>
			<el-row>
			<el-col :span="12">
			<el-form-item label="事发位置" prop="region" class="search-panel-item">
			<el-input v-model="ruleForm.name" class="report-input"></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="12">
			<el-form-item label="位置描述" prop="name">
			<el-input v-model="ruleForm.name" class="report-input"></el-input>
			</el-form-item>
			</el-col>
			</el-row>
			<el-form-item>
			<el-upload
			class="upload-demo"
			action="https://jsonplaceholder.typicode.com/posts/"
			:on-preview="handlePreview"
			:on-remove="handleRemove"
			:before-remove="beforeRemove"
			multiple
			:limit="3"
			:on-exceed="handleExceed"
			:file-list="fileList">
			<el-button size="small" type="primary">点击上传</el-button>
			</el-upload>
			</el-form-item>
			<el-form-item label="消息推送" prop="resource">
			<el-radio-group v-model="ruleForm.resource">
			<el-radio label="短信推送"></el-radio>
			<el-radio label="手机应用推送"></el-radio>
			</el-radio-group>
			</el-form-item>
			<el-form-item label="事件描述" prop="desc">
			<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item>
			<el-form-item label="接收人员" prop="desc">
			<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item>
			<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
			<el-button @click="resetForm('ruleForm')">取消</el-button>
			</el-form-item>
			</el-form>
			</div>
			</div>
			</template>

			<script>
			import '@utils/dragBoxes'

			export default {
			name: 'ReportPopup',
			props: ['flags'],
			data () {
			return {
			flag: false,
			ruleForm: {
			nameEvent: '',
			eventType: '',
			eventTypeList: [
			{
			name: '待补充',
			value: 1
			},
			{
			name: '待补充',
			value: 2
			},
			{
			name: '待补充',
			value: 3
			}
			],
			eventLevel: '',
			eventLevelList: [
			{
			name: '待补充',
			value: 1
			},
			{
			name: '待补充',
			value: 2
			},
			{
			name: '待补充',
			value: 3
			}
			],
			atTime: ''
			},
			fileList: [],
			rules: {
			name: [
			{
			required: true,
			message: '请输入活动名称',
			trigger: 'blur'
			},
			{
			min: 3,
			max: 5,
			message: '长度在 3 到 5 个字符',
			trigger: 'blur'
			}
			],
			region: [
			{
			required: true,
			message: '请选择活动区域',
			trigger: 'change'
			}
			],
			resource: [
			{
			required: true,
			message: '请选择活动资源',
			trigger: 'change'
			}
			],
			desc: [
			{
			required: true,
			message: '请填写活动形式',
			trigger: 'blur'
			}
			]
			}
			}
			},
			methods: {
			handleRemove (file, fileList) {
			console.log(file, fileList)
			},
			handlePreview (file) {
			console.log(file)
			},
			handleExceed (files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
			},
			beforeRemove (file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`)
			},
			closePopup () {
			this.flags = false
			},
			submitForm (formName) {
			this.$refs[formName].validate((valid) => {
			if (valid) {
			alert('submit!')
			} else {
			console.log('error submit!!')
			return false
			}
			})
			},
			resetForm (formName) {
			this.$refs[formName].resetFields()
			}
			}
			}
			</script>

			<style lang="less" scoped>
			/deep/ .el-form-item__label {
			color: @color;
			}

			/deep/ .el-radio__label {
			color: @color;
			}

			.report-popup {
			width: 35%;
			z-index: 999;
			position: absolute;
			top: 35%;
			left: 20%;
			}
			</style>