|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow | 
|---|
|  |  |  | :title="title" | 
|---|
|  |  |  | width="50%" | 
|---|
|  |  |  | :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"> | 
|---|
|  |  |  | <el-form-item label="创建人编码" prop="creator"> | 
|---|
|  |  |  | <el-input v-model="form.creator" placeholder="请输入创建人编码" v-trim/> | 
|---|
|  |  |  | <el-form-item label="选择签到通知人员" 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="createDate"> | 
|---|
|  |  |  | <el-date-picker v-model="form.createDate" value-format="yyyy-MM-dd" placeholder="请输入创建时间"></el-date-picker> | 
|---|
|  |  |  | <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-button type="primary" style="margin-left: 10px;margin-bottom: 20px;" @click="addDo">增加规则</el-button> | 
|---|
|  |  |  | <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="editor"> | 
|---|
|  |  |  | <el-input v-model="form.editor" placeholder="请输入更新人编码" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="更新时间" prop="editDate"> | 
|---|
|  |  |  | <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="请输入更新时间"></el-date-picker> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="是否删除0否 1是" prop="isdeleted"> | 
|---|
|  |  |  | <el-input v-model="form.isdeleted" placeholder="请输入是否删除0否 1是" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="备注" prop="info"> | 
|---|
|  |  |  | <el-input v-model="form.info" placeholder="请输入备注" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="内部人员编码(关联member)" prop="memberId"> | 
|---|
|  |  |  | <el-input v-model="form.memberId" placeholder="请输入内部人员编码(关联member)" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="多规则间隔时间(秒)" prop="intervalSec"> | 
|---|
|  |  |  | <el-input v-model="form.intervalSec" placeholder="请输入多规则间隔时间(秒)" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="排序码" prop="sortnum"> | 
|---|
|  |  |  | <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="状态 0禁用 1启用" prop="status"> | 
|---|
|  |  |  | <el-input v-model="form.status" placeholder="请输入状态 0禁用 1启用" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="报警类型编码(关联warning)" prop="warningId"> | 
|---|
|  |  |  | <el-input v-model="form.warningId" placeholder="请输入报警类型编码(关联warning)" v-trim/> | 
|---|
|  |  |  | <el-form-item label="发生间隔时间(秒)" prop="intervalSec"> | 
|---|
|  |  |  | <el-input type="number" v-model="form.intervalSec" placeholder="请输入多规则间隔时间(秒)" v-trim/> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | </GlobalWindow> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
|---|
|  |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
|---|
|  |  |  | import { allList } from '@/api/business/member' | 
|---|
|  |  |  | import { allList as warningList, regionList } from '@/api/business/warning' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'OperaWarningRuleWindow', | 
|---|
|  |  |  | extends: BaseOpera, | 
|---|
|  |  |  | 
|---|
|  |  |  | // 表单数据 | 
|---|
|  |  |  | form: { | 
|---|
|  |  |  | id: null, | 
|---|
|  |  |  | creator: '', | 
|---|
|  |  |  | createDate: '', | 
|---|
|  |  |  | editor: '', | 
|---|
|  |  |  | editDate: '', | 
|---|
|  |  |  | isdeleted: '', | 
|---|
|  |  |  | info: '', | 
|---|
|  |  |  | memberId: '', | 
|---|
|  |  |  | memberIds: '', | 
|---|
|  |  |  | intervalSec: '', | 
|---|
|  |  |  | sortnum: '', | 
|---|
|  |  |  | status: '', | 
|---|
|  |  |  | warningId: '' | 
|---|
|  |  |  | status: 0, | 
|---|
|  |  |  | detailList: [{ random:Math.random(),regionId: null, regionName: null, regionCode: null ,warningId:null}] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | memberSelect: [], | 
|---|
|  |  |  | memberList: [], | 
|---|
|  |  |  | warningList: [], | 
|---|
|  |  |  | regionList: [], | 
|---|
|  |  |  | // 验证规则 | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | memberIds: [{ required: true, message: '请选择通知人员', tigger: 'blur' }], | 
|---|
|  |  |  | status: [{ required: true, message: '请选择状态'}] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | 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(',') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | open (title, target) { | 
|---|
|  |  |  | this.memberSelect =[] | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.loadMember() | 
|---|
|  |  |  | this.loadRegions() | 
|---|
|  |  |  | this.loadWarning() | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | this.form = { | 
|---|
|  |  |  | id: null, | 
|---|
|  |  |  | memberIds: '', | 
|---|
|  |  |  | intervalSec: '', | 
|---|
|  |  |  | sortnum: '', | 
|---|
|  |  |  | 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(",") | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | loadMember () { | 
|---|
|  |  |  | allList({ | 
|---|
|  |  |  | type: 2 | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | this.memberList = 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> | 
|---|