| | |
| | | <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="更新人编码" prop="editor"> |
| | | <el-input v-model="form.editor" placeholder="请输入更新人编码" v-trim/> |
| | | <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-form-item label="更新时间" prop="editDate"> |
| | | <el-date-picker v-model="form.editDate" value-format="yyyy-MM-dd" placeholder="请输入更新时间"></el-date-picker> |
| | | <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="是否删除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> |