recordDialog.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  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 }) {
  59. this.visible = true
  60. this.getRecordList({ system_code, wznw, apply })
  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. */
  81. getRecordList({ system_code, wznw, apply }) {
  82. let getParams = {
  83. system_code,
  84. // TODO: 添加 wznw, apply 字段
  85. // wznw, apply,
  86. plazaId: this.$store.state.plazaId,
  87. }
  88. queryRecord({ getParams }).then((res) => {
  89. this.tableData = []
  90. res.data.forEach((i) => {
  91. i.children.forEach((j, index) => {
  92. this.tableData.push({
  93. smswz: i.smswz,
  94. smsasset: j.smsasset,
  95. col0Count: index === 0 ? i.children.length : 0,
  96. children: j.children,
  97. })
  98. })
  99. })
  100. })
  101. },
  102. },
  103. mounted() {},
  104. }
  105. </script>
  106. <style lang="less" scoped>
  107. </style>
  108. <style lang="less">
  109. .detail-dialog {
  110. .el-dialog__wrapper {
  111. overflow: hidden !important;
  112. }
  113. .el-dialog__header {
  114. background: #fff !important;
  115. color: #909399 !important;
  116. }
  117. .el-dialog__close {
  118. color: #909399 !important;
  119. }
  120. /deep/.el-dialog {
  121. margin-top: 7vh !important;
  122. overflow-y: scroll !important;
  123. }
  124. }
  125. </style>