<template>
|
<GlobalWindow
|
:title="title"
|
width="80%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<p class="tip-warn"><i class="el-icon-warning"></i>操作说明：<br>
|
1.请按需配置推送规则，配送多个规则时，即为多个规则满足时才推送;<br>
|
2.发生区域非必填，不填则表示该规则下所有区域的相应报警类型均通知;<br>
|
</p>
|
<el-form :model="form" ref="form" :rules="rules">
|
<div style="display: flex;" v-for="(item,index) in form.detailList" :key="'region_'+item.random" >
|
<span style="line-height: 32px;font-size: 14px;"><b style="color: #F56C6C;margin-right: 4px;font-size: 11px;">*</b>{{'规则'+(index +1)}}</span>
|
<el-form-item label="" style="display: inline-block;margin-left: 10px; " >
|
<el-select v-model="item.warningId" filterable placeholder="请选择报警类型" >
|
<el-option v-for="item in warningList" :label="item.name" :value="item.id"> </el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="" style="display: inline-block;margin-left: 10px">
|
<!-- <el-select v-model="item.regionId" filterable multiple clearable placeholder="请选择发生区域" >
|
<el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id">
|
</el-option>
|
</el-select>-->
|
<treeselect
|
style="width: 200px;height:32px;display: inline-block"
|
@input="changeSel(index)"
|
v-model="item.regionId"
|
placeholder="请选择发生区域"
|
:options="regionList"
|
:normalizer="normalizeOptions"
|
:default-expand-level="1"
|
noChildrenText="没有子选项"
|
noOptionsText="没有可选项"
|
noResultsText="没有匹配的结果" />
|
</el-form-item>
|
<el-button type="danger" style="margin-left: 10px;height: 32px; " @click="delDo(index)" v-if="index>0 || form.detailList.length>1">删除</el-button>
|
</div>
|
<el-form-item label="" prop="detailList" style="width: 150px">
|
<el-button type="primary" style="margin-left: 10px;margin-bottom: 20px;" @click="addDo">增加规则</el-button>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="0" :value="0">禁用</el-radio>
|
<el-radio :label="1" :value="1">启用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="发生间隔时间(秒）" prop="intervalSec">
|
<el-input type="number" v-model="form.intervalSec" placeholder="请输入多规则间隔时间(秒）" v-trim/>
|
</el-form-item>
|
<el-form-item label="钉钉通知" prop="memberNotice" >
|
<el-switch style="margin-right:30px;width:100px" v-model="form.memberNotice" :active-value="1" :inactive-value="0" active-text="开" inactive-text="关"></el-switch>
|
</el-form-item>
|
<el-form-item label="选择钉钉通知人员" v-if="form.memberNotice ==1" prop="memberIds" style="margin-bottom: 30px" >
|
<el-select v-model="memberSelect" filterable multiple clearable placeholder="请选择" @change="changeMembers">
|
<el-option v-for="item in memberList" :key="'member_'+item.id" :label="item.name+'-'+item.companyName" :value="item.id+''">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="广播通知" prop="deviceNotice" >
|
<el-switch style="margin-right:30px;width: 100px" v-model="form.deviceNotice" :active-value="1" :inactive-value="0" active-text="开" inactive-text="关">></el-switch>
|
</el-form-item>
|
<el-form-item label="选择播报广播" v-if="form.deviceNotice ==1" prop="deviceIds" style="margin-bottom: 30px" >
|
<el-select v-model="deviceSelect" filterable multiple clearable placeholder="请选择" @change="changeDevices">
|
<el-option v-for="item in deviceList" :key="'device_'+item.id" :label="item.name" :value="item.id+''">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="广播播报内容" v-if="form.deviceNotice ==1" prop="deviceNoticeContent">
|
<el-input type="text" v-model="form.deviceNoticeContent" placeholder="请输入播报内容" v-trim/>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { allList } from '@/api/business/member'
|
import { allList as allDveiceList } from '@/api/business/device'
|
import { allList as warningList, regionList } from '@/api/business/warning'
|
import { validIdCardNo } from '@/utils/form'
|
export default {
|
name: 'OperaWarningRuleWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
var validIdDetals = (rule, value, callback) => {
|
if (this.form.detailList == null || this.form.detailList.length==0) {
|
callback(new Error('请配置规则'))
|
return
|
}
|
console.log("1111111111111111111111",this.form.detailList)
|
for (let i = 0; i < this.form.detailList.length; i++) {
|
var item = this.form.detailList[i]
|
if (!item.warningId || item.warningId == null) {
|
callback(new Error('请正确配置规则'))
|
return
|
}
|
}
|
callback()
|
}
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
memberIds: '',
|
deviceIds: '',
|
deviceNoticeContent: '',
|
deviceNotice: 1,
|
memberNotice: 1,
|
intervalSec: '',
|
sortnum: '',
|
status: 0,
|
detailList: [{ random: Math.random(), regionId: null, regionName: null, regionCode: null, warningId: null }]
|
},
|
deviceSelect: [],
|
memberSelect: [],
|
memberList: [],
|
deviceList: [],
|
warningList: [],
|
regionList: [],
|
// 验证规则
|
rules: {
|
detailList: [{ required: true, validator: validIdDetals, message: '请正确配置规则', tigger: 'blur' }],
|
memberNotice: [{ required: true, message: '请选择钉钉通知' }],
|
deviceNotice: [{ required: true, message: '请选择是否广播通知' }],
|
deviceIds: [{ required: true, message: '请选择播报广播', tigger: 'blur' }],
|
memberIds: [{ required: true, message: '请选择通知人员', tigger: 'blur' }],
|
status: [{ required: true, message: '请选择状态' }]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/warningRule',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
normalizeOptions (node) {
|
if (!node.childList || !node.childList.length) {
|
// 去掉children=[]的children属性
|
delete node.childList
|
}
|
return {
|
id: node.indexCode,
|
label: node.name,
|
children: node.childList
|
}
|
},
|
changeSel (opt) {
|
var item = this.form.detailList[opt]
|
this.form.detailList[opt].regionCode = null
|
this.form.detailList[opt].regionName = null
|
if (item.regionId) {
|
var reg = this.getSelectedObject(item.regionId)
|
if (reg) {
|
this.form.detailList[opt].regionCode = reg.indexCode
|
this.form.detailList[opt].regionName = reg.name
|
}
|
}
|
console.log(' this.form.detailList[opt]', reg, this.form.detailList[opt])
|
},
|
getSelectedObject (id) {
|
if (!id) {
|
return null // 没有选中项时返回 null 或 {} 根据需要处理
|
}
|
const findSelected = (options) => {
|
for (const option of options) {
|
if (option.indexCode === id) {
|
return option // 返回匹配的完整对象
|
} else if (option.childList && option.childList.length > 0) {
|
const found = findSelected(option.childList) // 递归搜索子选项
|
if (found) return found // 如果找到返回该对象
|
}
|
}
|
return null // 未找到返回 null 或 {} 根据需要处理
|
}
|
return findSelected(this.regionList) // 开始搜索并返回结果
|
},
|
addDo () {
|
this.form.detailList.push({ random: Math.random(), regionId: null, regionName: null, regionCode: null, warningId: null })
|
},
|
delDo (index) {
|
if (this.form.detailList.length > 1 && this.form.detailList.length > index) {
|
this.form.detailList.splice(index, 1)
|
}
|
},
|
changeMembers () {
|
console.log(this.memberSelect)
|
this.form.memberIds = ''
|
if (!this.memberSelect || !this.memberSelect.length) {
|
return
|
}
|
this.form.memberIds = this.memberSelect.join(',')
|
},
|
changeDevices () {
|
console.log(this.deviceSelect)
|
this.form.deviceIds = ''
|
if (!this.deviceSelect || !this.deviceSelect.length) {
|
return
|
}
|
this.form.deviceIds = this.deviceSelect.join(',')
|
},
|
open (title, target) {
|
this.memberSelect = []
|
this.deviceSelect = []
|
this.title = title
|
this.loadMember()
|
this.loadDevice()
|
this.loadRegions()
|
this.loadWarning()
|
this.visible = true
|
this.form = {
|
id: null,
|
memberIds: '',
|
deviceIds: '',
|
intervalSec: '',
|
sortnum: '',
|
deviceNotice: 1,
|
deviceNoticeContent: '',
|
memberNotice: 1,
|
status: 0,
|
detailList: [{ random: Math.random(), regionId: null, regionName: null, regionCode: null, warningId: null }]
|
}
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
if (!this.form.detailList || !this.form.detailList.length) {
|
this.form.detailList = [{ random: Math.random(), regionId: null, regionName: null, regionCode: null, warningId: null }]
|
}
|
if (this.form.memberIds) {
|
this.memberSelect = this.form.memberIds.split(',')
|
}
|
if (this.form.deviceIds) {
|
this.deviceSelect = this.form.deviceIds.split(',')
|
}
|
})
|
},
|
loadMember () {
|
allList({
|
type: 2
|
}).then(res => {
|
this.memberList = res
|
})
|
},
|
loadDevice () {
|
allDveiceList({
|
type: 4
|
}).then(res => {
|
this.deviceList = res
|
})
|
},
|
loadWarning () {
|
warningList({
|
}).then(res => {
|
this.warningList = res
|
})
|
},
|
loadRegions () {
|
regionList({
|
}).then(res => {
|
this.regionList = res
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.inline {
|
width: 178px;
|
}
|
.vue-treeselect {
|
line-height: 30px;
|
::v-deep .vue-treeselect__control {
|
height: 32px;
|
.vue-treeselect__single-value {
|
line-height: 30px;
|
}
|
}
|
}
|
</style>
|
