IndexContentList.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. /**
  2. @author:fugy
  3. @date:2018.11.28
  4. @info:项目报警通知列表表格
  5. **/
  6. <template>
  7. <div class='box'>
  8. <table v-if="tableData && tableData.length" class='table' border='1' cellpadding='0' cellspacing='0'>
  9. <tr v-for='(item,index) in tableData' :key='index'>
  10. <td v-show='item.isShow'>
  11. <div class='td-box' :style='"margin-left:" + ( 30 * item.level ) + "px;"'>
  12. <!-- 图标 -->
  13. <div class='icon-box'>
  14. <span v-if='item.isLow' @click='switchIcon(item)'>
  15. <i v-show='!item.isExpend' class='el-icon-caret-right'></i>
  16. <i v-show='item.isExpend' class='el-icon-caret-bottom'></i>
  17. </span>
  18. </div>
  19. <div class='con-box'>
  20. <!-- 1级 -->
  21. <p v-if='item.level == 1' class='first-level'>
  22. <span class='first-span first-span-name'>{{item.name}}</span>
  23. <span class='first-span'>{{item.phone}}</span>
  24. <span class='first-span'>{{item.email}}</span>
  25. <el-button type='text' class='first-btn' @click="addNotice(item)">增加通知</el-button>
  26. </p>
  27. <!-- 2级 -->
  28. <p v-else-if='item.level == 2'>
  29. <span>{{item.objName}}</span>
  30. </p>
  31. <!-- 3级 -->
  32. <p v-else-if='item.level == 3' class='three-level'>
  33. <span>{{item.instanceInfo}}</span>
  34. <!-- <el-button type='text' class='three-btn gray' @click="noLookObj(item)">不再关注此对象</el-button> -->
  35. </p>
  36. <!-- 4级 -->
  37. <p v-else-if='item.level == 4' class='four-level'>
  38. <span class='four-span'>{{item.alarmLevel}} 级</span>
  39. <span class='four-span'>{{item.alarmName}}</span>
  40. <!-- <el-button type='text' class='four-btn gray' @click="noLook(item)">不再关注</el-button> -->
  41. <v-check-box
  42. class='four-check'
  43. :sendMessage='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendMessage: 0'
  44. :sendEmail='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendEmail: 0'
  45. :sendWechat='item.notifyUserList&&item.notifyUserList.length ? item.notifyUserList[0].sendWechat: 0'
  46. :define='item'
  47. :isAll="false"
  48. @change='checkBoxChange'
  49. ></v-check-box>
  50. </p>
  51. </div>
  52. </div>
  53. </td>
  54. </tr>
  55. </table>
  56. <div v-else style="text-align:center; line-height: 500px;">
  57. 暂无数据
  58. </div>
  59. <!-- 组件 -->
  60. <v-user-add-notice :addNoticeDialogVisible="addNoticeDialogVisible" :userData="userData" :projectId="projectId" @refresh="refreshList"></v-user-add-notice>
  61. </div>
  62. </template>
  63. <script>
  64. import api from './api'
  65. import proApi from '@/api/alarm/alarm'
  66. import utils from './utils'
  67. import proUtils from './utils'
  68. // component
  69. import vCheckBox from '@/components/alarm/common/CheckBox'
  70. import vUserAddNotice from './UserAddNotice'
  71. export default {
  72. name: 'index-content-list',
  73. data() {
  74. return {
  75. addNoticeDialogVisible: false,
  76. userData: null,
  77. projectId: null,
  78. /**
  79. * level: 级别
  80. * isExpend: 图标样式
  81. * isLow: 是否有下一级
  82. * isShow: 当前行是否显示
  83. * index: 下标
  84. */
  85. tableData: [],
  86. pidArr: [], //树形结构pid数组
  87. treeObj: [],
  88. /****Dict***** */
  89. entityDictObj: {} //对象类的名称
  90. }
  91. },
  92. props: ['tableParams','userIndex'],
  93. components: { vCheckBox , vUserAddNotice },
  94. methods: {
  95. /********************************树形结构----up************************************************************************** */
  96. async switchIcon(row) {
  97. row.isExpend = !row.isExpend
  98. if (row.isExpend) {
  99. if (row.level == 1) {
  100. await this.getAlarmList(row.id)
  101. this.tableData.forEach(hh => {
  102. if (hh.id == row.id && hh.level == 1) { //展开第一行
  103. this.pidArr = []
  104. hh.isExpend = true
  105. }
  106. })
  107. }
  108. //展开
  109. this.pidArr.push(row.index)
  110. this.pidArr.sort((a, b) => a - b)
  111. this.expend()
  112. } else {
  113. //折叠
  114. for (let i = 0; i < this.pidArr.length; i++) {
  115. if (row.index == this.pidArr[i]) {
  116. this.pidArr.splice(i, 1)
  117. }
  118. }
  119. this.refresh()
  120. }
  121. },
  122. /********pidArr中存在,并且父级的isShow为true**** */
  123. // 展开
  124. expend() {
  125. this.pidArr.forEach(item => {
  126. this.tableData.forEach(ele => {
  127. if (item == ele.pid) {
  128. ele.isShow = true
  129. }
  130. })
  131. })
  132. this.refresh()
  133. },
  134. // 刷新
  135. refresh() {
  136. this.tableData.forEach(ele => {
  137. let pidFlag = this.pidArr.includes(ele.pid)
  138. if (pidFlag) {
  139. //pid存在
  140. this.tableData.forEach(item => {
  141. //父级是否show
  142. if (item.index == ele.pid) {
  143. if (item.level == 1) {
  144. ele.isShow = item.isExpend
  145. } else {
  146. ele.isShow = item.isShow
  147. }
  148. }
  149. })
  150. } else {
  151. if (ele.level == 1) {
  152. ele.isShow = true
  153. } else {
  154. ele.isShow = false
  155. }
  156. }
  157. })
  158. },
  159. /********************************树形结构----down************************************************************************** */
  160. // checkbox多选回填
  161. async checkBoxChange(obj, define) {
  162. let params = {
  163. projectId: this.tableParams.projectId,
  164. notifyUserId:define.notifyUserList[0].id,
  165. alarmConfigResultIdList:[{
  166. alarmConfigResultId:define.alarmId,
  167. sendMessage: obj.sendMessage,
  168. sendEmail: obj.sendEmail,
  169. sendWechat: obj.sendWechat
  170. }]
  171. };
  172. let res = await api.setUpAlarmConfigResult(params);
  173. if (res.result == "success") {
  174. this.$message({
  175. message: '设定成功',
  176. type: 'success'
  177. });
  178. }
  179. },
  180. // 不再关注对象
  181. noLookObj(item) {
  182. this.$confirm('取消后,不再收到该对象下的报警提醒?', '提示', {
  183. confirmButtonText: '确定',
  184. cancelButtonText: '取消',
  185. type: 'warning'
  186. }).then(async () => {
  187. let arr = []
  188. this.tableData.forEach(ele => {
  189. if(ele.pid == item.index){
  190. let obj = {
  191. alarmConfigResultId:ele.alarmId,
  192. notifyType:[]
  193. }
  194. arr.push(obj);
  195. }
  196. })
  197. let params = {
  198. notifyUserId:item.id,
  199. alarmConfigResultIdList: arr
  200. };
  201. let res = await api.setUpAlarmConfigResult(params);
  202. if (res.result == "success") {
  203. this.$message({
  204. message: '设定成功',
  205. type: 'success'
  206. });
  207. }
  208. }).catch(() => {
  209. this.$message({
  210. type: 'info',
  211. message: '已取消'
  212. });
  213. });
  214. },
  215. // 不再关注
  216. async noLook(item) {
  217. let params = {
  218. notifyUserId:item.id,
  219. alarmConfigResultIdList:[{
  220. alarmConfigResultId:item.alarmId,
  221. notifyType:[]
  222. }]
  223. };
  224. let res = await api.setUpAlarmConfigResult(params);
  225. if (res.result == "success") {
  226. this.$message({
  227. message: '设定成功',
  228. type: 'success'
  229. });
  230. }
  231. },
  232. addNotice(item) {
  233. this.userData = item;
  234. this.addNoticeDialogVisible = !this.addNoticeDialogVisible
  235. },
  236. async getAlarmList(id) {
  237. let params = {
  238. criteria: {
  239. projectId: this.tableParams.projectId,
  240. notifyUserId: id
  241. },
  242. page: 1,
  243. size: 1000
  244. }
  245. let res = await api.queryNotifyUserByAlarmConfigResult(params)
  246. if (res.result == 'success' && res.count) {
  247. // 获取location本地名称
  248. let applyArr = []
  249. res.content.forEach((item, index) => {
  250. applyArr.push({ id: item.instanceId })
  251. item.objName = utils.getObjName(item.objType) //对象名称
  252. if(item.notifyUserList) {
  253. let arr = item.notifyUserList.filter((user)=> {
  254. return user.id == id
  255. })
  256. item.notifyUserList = arr
  257. }
  258. })
  259. let param = { criterias: applyArr ,valid: null}
  260. let resp = await proApi.getApplyObjInfo(this.tableParams.projectId, param)
  261. if (resp.length) {
  262. this.entityDictObj = proUtils.entityDict(resp)
  263. res.content.forEach((ele, idx) => {
  264. let preName = proUtils.objPreName(ele.objType)
  265. let name =
  266. this.entityDictObj[ele.instanceId].infos[preName + 'LocalName'] ||
  267. this.entityDictObj[ele.instanceId].infos[preName + 'Name']
  268. let id =
  269. this.entityDictObj[ele.instanceId].infos[preName + 'LocalID'] ||
  270. this.entityDictObj[ele.instanceId].infos[preName + 'ID']
  271. ele.instanceInfo = name
  272. })
  273. }
  274. this.treeObj = await utils.alarmToTree(this.treeObj, id, res.content)
  275. this.tableData = await utils.treeToData(this.treeObj)
  276. }
  277. },
  278. async init() {
  279. // 获取人员
  280. this.tableData = []
  281. let userParams = {
  282. criteria:{
  283. projectId: this.tableParams.projectId,
  284. id: this.tableParams.notifyUserId || undefined
  285. }
  286. };
  287. let res = await api.getUserList(userParams)
  288. if (res.result == 'success' && res.count) {
  289. this.treeObj = await utils.userToTree(res.content)
  290. this.tableData = await utils.treeToData(this.treeObj)
  291. }
  292. },
  293. refreshList() {
  294. this.init();
  295. },
  296. },
  297. created() {
  298. if(this.tableParams.projectId){
  299. this.init()
  300. }
  301. },
  302. watch: {
  303. tableParams: {
  304. deep: true,
  305. handler(val) {
  306. this.projectId = val.projectId
  307. this.init()
  308. }
  309. },
  310. userIndex() {
  311. this.init()
  312. }
  313. }
  314. }
  315. </script>
  316. <style lang="less" scoped>
  317. .gray {
  318. color: #AEAEAE;
  319. }
  320. .box {
  321. .table {
  322. width: 100%;
  323. border-width: 1px;
  324. border-color: #ebeef5;
  325. border-collapse: collapse;
  326. tr {
  327. line-height: 40px;
  328. td {
  329. border-width: 1px;
  330. padding: 8px;
  331. border-style: solid;
  332. border-color: #ebeef5;
  333. .td-box {
  334. overflow: hidden;
  335. .icon-box {
  336. float:left;
  337. width: 15px;
  338. height: 40px;
  339. cursor: pointer;
  340. };
  341. .con-box {
  342. width: 97%;
  343. float: left;
  344. margin-left: 10px;
  345. overflow: hidden;
  346. p {
  347. overflow: hidden;
  348. width: 99%;
  349. float: left;
  350. margin-left: 10px;
  351. }
  352. .first-level{
  353. .first-span {
  354. float: left;
  355. width: 150px;
  356. }
  357. .first-span-name{
  358. width: 100px;
  359. }
  360. .first-btn {
  361. float: right;
  362. }
  363. }
  364. .three-level {
  365. .three-btn {
  366. float: right;
  367. }
  368. }
  369. .four-level {
  370. .four-span {
  371. float: left;
  372. }
  373. .four-span:nth-of-type(1) {
  374. width: 80px;
  375. }
  376. .four-btn {
  377. float: right;
  378. }
  379. .four-check {
  380. float: right;
  381. line-height: 22px;
  382. margin-top:8px;
  383. margin-right: 50px;
  384. }
  385. }
  386. }
  387. }
  388. }
  389. }
  390. }
  391. }
  392. </style>