| | |
| | | <template> |
| | | <div class="public-bounced-content"> |
| | | <!-- <el-dialog--> |
| | | <!-- custom-class="public-bounced-content_dialog"--> |
| | | <!-- title="上报事件"--> |
| | | <!-- :visible.sync="dialogVisible"--> |
| | | <!-- :append-to-body="true"--> |
| | | <!-- :modal="false"--> |
| | | <!-- v-dialogDragBottom--> |
| | | <!-- >--> |
| | | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form"> |
| | | <!-- <el-dialog--> |
| | | <!-- custom-class="events-reported"--> |
| | | <!-- title="上报事件"--> |
| | | <!-- :visible.sync="eventsReported"--> |
| | | <!-- :append-to-body="true"--> |
| | | <!-- :modal="false"--> |
| | | <!-- v-dialogDrag--> |
| | | <!-- >--> |
| | | <!-- </el-dialog>--> |
| | | <div> |
| | | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="search-form"> |
| | | <!-- 事件名称--> |
| | | <el-form-item class="input-event-name" label="事件名称" prop="nameOfEvent"> |
| | | <el-input v-model="ruleForm.nameOfEvent" placeholder="将事件命名"></el-input> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | <!-- 点击上传--> |
| | | <el-form-item> |
| | | <el-form-item label="附件上传" prop="upload"> |
| | | <el-upload |
| | | class="upload-demo" |
| | | action="https://jsonplaceholder.typicode.com/posts/" |
| | |
| | | </el-form-item> |
| | | <!-- 消息推送--> |
| | | <el-form-item label="消息推送" prop="beingPush"> |
| | | <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange()"> |
| | | <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange"> |
| | | <el-checkbox v-for="item in ruleForm.beingPushList" |
| | | :key="item.name" |
| | | :label="item.name" |
| | |
| | | </el-form-item> |
| | | <div v-show="wayTo"> |
| | | <el-form-item label="事件描述" prop="desc"> |
| | | <el-input type="textarea" v-model="ruleForm.desc"></el-input> |
| | | <el-input type="textarea" resize="none" v-model="ruleForm.desc" |
| | | placeholder="带出事件类型,事件位置,事件单位,事件时间等字段自动生产一部分描述"> |
| | | </el-input> |
| | | <el-button type="primary">一键<br/>生成</el-button> |
| | | </el-form-item> |
| | | <el-form-item label="接收人员" prop="desc"> |
| | | <el-input type="textarea" v-model="ruleForm.desc"></el-input> |
| | | <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="张三;李四,"></el-input> |
| | | <el-button type="primary">+</el-button> |
| | | </el-form-item> |
| | | </div> |
| | | <el-form-item> |
| | | <el-form-item class="confirmCancel"> |
| | | <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button> |
| | | <el-button @click="resetForm('ruleForm')">取消</el-button> |
| | | </el-form-item> |
| | |
| | | |
| | | <script> |
| | | |
| | | import eventBus from '../../../.././eventBus' |
| | | |
| | | export default { |
| | | name: 'ReportPopup', |
| | | data () { |
| | | return { |
| | | dialogVisible: false, |
| | | // eventsReported: true, |
| | | eventsReported: false, |
| | | saveSuccess: false, |
| | | // 表单绑定数据 |
| | | ruleForm: { |
| | | // 事件名称 绑定数据 |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | // 消息推送 选择 |
| | | // 消息推送 选择推送的对象 |
| | | infotsChange () { |
| | | this.wayTo = !this.wayTo |
| | | console.log(this.ruleForm.beingPushed) |
| | | // for (let i = 0; i < this.ruleForm.beingPushed.length; i++) { |
| | | // // console.log(this.ruleForm.beingPushed[i]) |
| | | // if (this.ruleForm.beingPushed[i] === '短信推送' || this.ruleForm.beingPushed[i] === '手机应用推送') { |
| | | // this.wayTo = true |
| | | // } else { |
| | | // this.wayTo = !this.wayTo |
| | | // } |
| | | // } |
| | | // if (this.ruleForm.beingPushed[0] === '短信推送') { |
| | | // console.log('短信推送') |
| | | // this.wayTo = true |
| | | // } |
| | | if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) { |
| | | // console.log('包含该元素') |
| | | this.wayTo = true |
| | | } else { |
| | | // console.log('不包含该元素') |
| | | this.wayTo = false |
| | | } |
| | | }, |
| | | // 点击上传 的取消上传事件 |
| | | handleRemove (file, fileList) { |
| | | console.log(file, fileList) |
| | | }, |
| | | // 点击上传 的上传事件 |
| | | handlePreview (file) { |
| | | console.log(file) |
| | | }, |
| | |
| | | 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 |
| | | } |
| | | }) |
| | | // this.$refs[formName].validate((valid) => { |
| | | // if (valid) { |
| | | // alert('submit!') |
| | | // } else { |
| | | // console.log('error submit!!') |
| | | // return false |
| | | // } |
| | | // }) |
| | | // this.eventsReported = false |
| | | // this.saveSuccess = true |
| | | |
| | | // temp临时 |
| | | window.mapManager.clickDialogSwitch = false |
| | | this.eventsReported = false |
| | | eventBus.$emit('events-reported', true) |
| | | }, |
| | | // 处置分析 |
| | | disposalAnalysis () { |
| | | this.saveSuccess = false |
| | | eventBus.$emit('events-reported', true) |
| | | }, |
| | | // form表单的取消按钮点击事件 重置信息 |
| | | resetForm (formName) { |
| | | this.$refs[formName].resetFields() |
| | | } |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | |
| | | /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { |
| | | display: none; |
| | | /deep/ .el-form-item { |
| | | margin: 5px 0; |
| | | } |
| | | |
| | | /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after { |
| | | content: '*'; |
| | | color: #F56C6C; |
| | | margin-left: 4px; |
| | | } |
| | | /deep/ .el-checkbox__label ::after { |
| | | content: '*' !important; |
| | | color: #F56C6C !important; |
| | | margin-left: 4px !important; |
| | | /deep/ .el-textarea__inner { |
| | | width: 2rem; |
| | | color: darkgrey; |
| | | border: solid 1px #00fff6; |
| | | background-color: rgba(0, 255, 246, 0.14); |
| | | outline: none; |
| | | font-size: 0.01rem; |
| | | } |
| | | |
| | | /deep/ .el-checkbox__label { |
| | |
| | | } |
| | | |
| | | /deep/ input { |
| | | /*width: 145px;*/ |
| | | border-radius: 0; |
| | | background-color: rgba(0, 255, 246, 0.14); |
| | | border: solid 1px #00fff6; |
| | | color: #C0C4CC; |
| | | font-size: 0.01rem; |
| | | /*padding: 0 15px;*/ |
| | | } |
| | | |
| | | /deep/ .el-input.is-disabled .el-input__inner { |
| | | border-radius: 0; |
| | | background-color: rgba(0, 255, 246, 0.14); |
| | | border: solid 1px #00fff6; |
| | | color: #C0C4CC; |
| | | font-size: 0.01rem; |
| | | /*padding: 0 15px;*/ |
| | | border-radius: 4px; |
| | | background: @background-color; |
| | | border-color: @color; |
| | | } |
| | | |
| | | /deep/ .input-event-name { |
| | | margin: 15px 0; |
| | | width: 75%; |
| | | |
| | | .el-input__inner { |
| | | width: 100%; |
| | | border-radius: 5px; |
| | | background: rgba(0, 16, 30, 0.5); |
| | | } |
| | | /deep/ .el-input__inner { |
| | | /*width: 145px;*/ |
| | | border-radius: 5px; |
| | | background: rgba(0, 16, 30, 0.5); |
| | | } |
| | | |
| | | /deep/ .el-form-item__label { |
| | |
| | | /deep/ .el-radio__label { |
| | | color: @color; |
| | | } |
| | | |
| | | .confirmCancel { |
| | | text-align: right; |
| | | /*display: flex;*/ |
| | | /*justify-content: flex-end;*/ |
| | | } |
| | | </style> |