recordDialog.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <!-- 记录事项 -->
  3. <div class='detail-dialog'>
  4. <el-dialog :title='`${major}${tabName}记录事项`' width='80%' :visible.sync='visible' style='height:900px;overflow-y:scroll;'>
  5. <div class='bottom-table' :style='`height:${height}`'>
  6. <el-table
  7. :data='tableData'
  8. :height='tableHeight'
  9. :border='true'
  10. style='width: 100%;margin-bottom:12px;'
  11. :span-method='objectSpanMethod'
  12. v-if='tableData.length>0'
  13. >
  14. <el-table-column label='位置' prop width='230' show-overflow-tooltip resizable>
  15. <template slot-scope='{row}'>{{row.smswz || '--'}}</template>
  16. </el-table-column>
  17. <el-table-column label='设备' width='280' resizable>
  18. <template slot-scope='{row}'>{{row.smsasset || '--'}}</template>
  19. </el-table-column>
  20. <el-table-column label='记录事项' show-overflow-tooltip resizable>
  21. <template slot-scope='{row}'>
  22. <p class='p-style' v-for='(item,index) in row.children' :key='item.sn'>{{index+1}}) {{item.matter}}</p>
  23. </template>
  24. </el-table-column>
  25. </el-table>
  26. </div>
  27. </el-dialog>
  28. </div>
  29. </template>
  30. <script>
  31. import { queryRecord } from '@/api/equipmentList.js'
  32. export default {
  33. data() {
  34. return {
  35. visible: false,
  36. major: '',
  37. tabName: '',
  38. tableData: [],
  39. }
  40. },
  41. computed: {
  42. tableHeight() {
  43. if (window.screen.height <= 768) {
  44. return 450
  45. } else {
  46. return 560
  47. }
  48. },
  49. height() {
  50. if (window.screen.height <= 768) {
  51. return 500
  52. } else {
  53. return 600
  54. }
  55. },
  56. },
  57. methods: {
  58. open({ system_code, wznw, apply, difference }) {
  59. this.visible = true
  60. this.getRecordList({ system_code, wznw, apply, difference })
  61. },
  62. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  63. if (columnIndex === 0) {
  64. if (row.col0Count > 0) {
  65. return {
  66. rowspan: row.col0Count,
  67. colspan: 1,
  68. }
  69. }
  70. return {
  71. rowspan: 0,
  72. colspan: 0,
  73. }
  74. }
  75. },
  76. /**
  77. * @param { string } system_code 八大系统code
  78. * @param { string } wznw 区分各系统内外(如: 慧云机房内,慧云机房外)
  79. * @param { string } apply 事项类型, 含: 维修维保,专维及其它
  80. * @param { string } difference 区分给排水 取值范围:给水;排水
  81. */
  82. getRecordList({ system_code, wznw, apply, difference }) {
  83. let getParams = {
  84. system_code,
  85. apply,
  86. plazaId: this.$store.state.plazaId,
  87. }
  88. wznw !== '0' && wznw !== '-1' && wznw && (getParams.wznw = wznw) //专维及其它,不上传该字段
  89. // 处理给排水
  90. if (difference) {
  91. getParams.difference = difference
  92. delete getParams.wznw //不上传内外
  93. }
  94. queryRecord({ getParams }).then((res) => {
  95. this.tableData = []
  96. res.data.forEach((i) => {
  97. i.children.forEach((j, index) => {
  98. this.tableData.push({
  99. smswz: i.smswz,
  100. smsasset: j.smsasset,
  101. col0Count: index === 0 ? i.children.length : 0,
  102. children: j.children,
  103. })
  104. })
  105. })
  106. })
  107. },
  108. },
  109. mounted() {},
  110. }
  111. </script>
  112. <style lang="less" scoped>
  113. </style>
  114. <style lang="less">
  115. .detail-dialog {
  116. .el-dialog__wrapper {
  117. overflow: hidden !important;
  118. }
  119. .el-dialog__header {
  120. background: #fff !important;
  121. color: #909399 !important;
  122. }
  123. .el-dialog__close {
  124. color: #909399 !important;
  125. }
  126. /deep/.el-dialog {
  127. margin-top: 7vh !important;
  128. overflow-y: scroll !important;
  129. }
  130. }
  131. </style>