123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396 |
- /**
- @author:fugy
- @date:2018.11.28
- @info:项目报警通知列表表格
- **/
- <template>
- <div class='box'>
- <table v-if="tableData && tableData.length" class='table' border='1' cellpadding='0' cellspacing='0'>
- <tr v-for='(item,index) in tableData' :key='index'>
- <td v-show='item.isShow'>
- <div class='td-box' :style='"margin-left:" + ( 30 * item.level ) + "px;"'>
- <!-- 图标 -->
- <div class='icon-box'>
- <span v-if='item.isLow' @click='switchIcon(item)'>
- <i v-show='!item.isExpend' class='el-icon-caret-right'></i>
- <i v-show='item.isExpend' class='el-icon-caret-bottom'></i>
- </span>
- </div>
- <div class='con-box'>
- <!-- 1级 -->
- <p v-if='item.level == 1' class='first-level'>
- <span class='first-span first-span-name'>{{item.name}}</span>
- <span class='first-span'>{{item.phone}}</span>
- <span class='first-span'>{{item.email}}</span>
- <el-button type='text' class='first-btn' @click="addNotice(item)">增加通知</el-button>
- </p>
- <!-- 2级 -->
- <p v-else-if='item.level == 2'>
- <span>{{item.objName}}</span>
- </p>
- <!-- 3级 -->
- <p v-else-if='item.level == 3' class='three-level'>
- <span>{{item.instanceInfo}}</span>
- <!-- <el-button type='text' class='three-btn gray' @click="noLookObj(item)">不再关注此对象</el-button> -->
- </p>
- <!-- 4级 -->
- <p v-else-if='item.level == 4' class='four-level'>
- <span class='four-span'>{{item.alarmLevel}} 级</span>
- <span class='four-span'>{{item.alarmName}}</span>
- <!-- <el-button type='text' class='four-btn gray' @click="noLook(item)">不再关注</el-button> -->
- <v-check-box
- class='four-check'
- :sendMessage='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendMessage: 0'
- :sendEmail='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendEmail: 0'
- :sendWechat='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendWechat: 0'
- :define='item'
- :isAll="false"
- @change='checkBoxChange'
- ></v-check-box>
- </p>
- </div>
- </div>
- </td>
- </tr>
- </table>
- <div v-else style="text-align:center; line-height: 500px;">
- 暂无数据
- </div>
- <!-- 组件 -->
- <v-user-add-notice :addNoticeDialogVisible="addNoticeDialogVisible" :userData="userData" :projectId="projectId" @refresh="refreshList"></v-user-add-notice>
- </div>
- </template>
- <script>
- import api from './api'
- import proApi from '@/api/alarm/alarm'
- import utils from './utils'
- import proUtils from './utils'
- // component
- import vCheckBox from '@/components/alarm/common/CheckBox'
- import vUserAddNotice from './UserAddNotice'
- export default {
- name: 'index-content-list',
- data() {
- return {
- addNoticeDialogVisible: false,
- userData: null,
- projectId: null,
- /**
- * level: 级别
- * isExpend: 图标样式
- * isLow: 是否有下一级
- * isShow: 当前行是否显示
- * index: 下标
- */
- tableData: [],
- pidArr: [], //树形结构pid数组
- treeObj: [],
- /****Dict***** */
- entityDictObj: {} //对象类的名称
- }
- },
- props: ['tableParams','userIndex'],
- components: { vCheckBox , vUserAddNotice },
- methods: {
- /********************************树形结构----up************************************************************************** */
- async switchIcon(row) {
- row.isExpend = !row.isExpend
- if (row.isExpend) {
- if (row.level == 1) {
- await this.getAlarmList(row.id)
- this.tableData.forEach(hh => {
- if (hh.id == row.id && hh.level == 1) { //展开第一行
- this.pidArr = []
- hh.isExpend = true
- }
- })
- }
- //展开
- this.pidArr.push(row.index)
- this.pidArr.sort((a, b) => a - b)
- this.expend()
- } else {
- //折叠
- for (let i = 0; i < this.pidArr.length; i++) {
- if (row.index == this.pidArr[i]) {
- this.pidArr.splice(i, 1)
- }
- }
- this.refresh()
- }
- },
- /********pidArr中存在,并且父级的isShow为true**** */
- // 展开
- expend() {
- this.pidArr.forEach(item => {
- this.tableData.forEach(ele => {
- if (item == ele.pid) {
- ele.isShow = true
- }
- })
- })
- this.refresh()
- },
- // 刷新
- refresh() {
- this.tableData.forEach(ele => {
- let pidFlag = this.pidArr.includes(ele.pid)
- if (pidFlag) {
- //pid存在
- this.tableData.forEach(item => {
- //父级是否show
- if (item.index == ele.pid) {
- if (item.level == 1) {
- ele.isShow = item.isExpend
- } else {
- ele.isShow = item.isShow
- }
- }
- })
- } else {
- if (ele.level == 1) {
- ele.isShow = true
- } else {
- ele.isShow = false
- }
- }
- })
- },
- /********************************树形结构----down************************************************************************** */
- // checkbox多选回填
- async checkBoxChange(obj, define) {
- let params = {
- projectId: this.tableParams.projectId,
- notifyUserId:define.notifyUserList[0].id,
- alarmConfigResultIdList:[{
- alarmConfigResultId:define.alarmId,
- sendMessage: obj.sendMessage,
- sendEmail: obj.sendEmail,
- sendWechat: obj.sendWechat
- }]
- };
- let res = await api.setUpAlarmConfigResult(params);
- if (res.result == "success") {
- this.$message({
- message: '设定成功',
- type: 'success'
- });
- }
- },
- // 不再关注对象
- noLookObj(item) {
- this.$confirm('取消后,不再收到该对象下的报警提醒?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(async () => {
- let arr = []
- this.tableData.forEach(ele => {
- if(ele.pid == item.index){
- let obj = {
- alarmConfigResultId:ele.alarmId,
- notifyType:[]
- }
- arr.push(obj);
- }
- })
- let params = {
- notifyUserId:item.id,
- alarmConfigResultIdList: arr
- };
- let res = await api.setUpAlarmConfigResult(params);
- if (res.result == "success") {
- this.$message({
- message: '设定成功',
- type: 'success'
- });
- }
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '已取消'
- });
- });
- },
- // 不再关注
- async noLook(item) {
- let params = {
- notifyUserId:item.id,
- alarmConfigResultIdList:[{
- alarmConfigResultId:item.alarmId,
- notifyType:[]
- }]
- };
- let res = await api.setUpAlarmConfigResult(params);
- if (res.result == "success") {
- this.$message({
- message: '设定成功',
- type: 'success'
- });
- }
- },
- addNotice(item) {
- this.userData = item;
- this.addNoticeDialogVisible = !this.addNoticeDialogVisible
- },
- async getAlarmList(id) {
- let params = {
- criteria: {
- projectId: this.tableParams.projectId,
- notifyUserId: id
- },
- page: 1,
- size: 1000
- }
- let res = await api.queryNotifyUserByAlarmConfigResult(params)
- if (res.result == 'success' && res.count) {
- // 获取location本地名称
- let applyArr = []
- res.content.forEach((item, index) => {
- applyArr.push({ id: item.instanceId })
- item.objName = utils.getObjName(item.objType) //对象名称
- if(item.notifyUserList) {
- let arr = item.notifyUserList.filter((user)=> {
- return user.id == id
- })
- item.notifyUserList = arr
- }
- })
- let param = { criterias: applyArr ,valid: null}
- let resp = await proApi.getApplyObjInfo(this.tableParams.projectId, param)
- if (resp.length) {
- this.entityDictObj = proUtils.entityDict(resp)
- res.content.forEach((ele, idx) => {
- let preName = proUtils.objPreName(ele.objType)
- let name =
- this.entityDictObj[ele.instanceId].infos[preName + 'LocalName'] ||
- this.entityDictObj[ele.instanceId].infos[preName + 'Name']
- let id =
- this.entityDictObj[ele.instanceId].infos[preName + 'LocalID'] ||
- this.entityDictObj[ele.instanceId].infos[preName + 'ID']
- ele.instanceInfo = name
- })
- }
- this.treeObj = await utils.alarmToTree(this.treeObj, id, res.content)
- this.tableData = await utils.treeToData(this.treeObj)
- }
- },
- async init() {
- // 获取人员
- this.tableData = []
- let userParams = {
- criteria:{
- projectId: this.tableParams.projectId,
- id: this.tableParams.notifyUserId || undefined
- }
- };
- let res = await api.getUserList(userParams)
- if (res.result == 'success' && res.count) {
- this.treeObj = await utils.userToTree(res.content)
- this.tableData = await utils.treeToData(this.treeObj)
- }
- },
- refreshList() {
- this.init();
- },
- },
- created() {
- if(this.tableParams.projectId){
- this.init()
- }
- },
- watch: {
- tableParams: {
- deep: true,
- handler(val) {
- this.projectId = val.projectId
- this.init()
- }
- },
- userIndex() {
- this.init()
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .gray {
- color: #AEAEAE;
- }
- .box {
- .table {
- width: 100%;
- border-width: 1px;
- border-color: #ebeef5;
- border-collapse: collapse;
- tr {
- line-height: 40px;
- td {
-
- border-width: 1px;
- padding: 8px;
- border-style: solid;
- border-color: #ebeef5;
- .td-box {
- overflow: hidden;
- .icon-box {
- float:left;
- width: 15px;
- height: 40px;
- cursor: pointer;
- };
- .con-box {
- width: 97%;
- float: left;
- margin-left: 10px;
- overflow: hidden;
- p {
- overflow: hidden;
- width: 99%;
- float: left;
- margin-left: 10px;
- }
- .first-level{
- .first-span {
- float: left;
- width: 150px;
- }
- .first-span-name{
- width: 100px;
- }
- .first-btn {
- float: right;
- }
- }
- .three-level {
- .three-btn {
- float: right;
- }
- }
- .four-level {
- .four-span {
- float: left;
- }
- .four-span:nth-of-type(1) {
- width: 80px;
- }
- .four-btn {
- float: right;
- }
- .four-check {
- float: right;
- line-height: 22px;
- margin-top:8px;
- margin-right: 50px;
- }
- }
- }
- }
- }
- }
- }
- }
- </style>
|