zhsxDialog.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <div class='zhsx-log'>
  3. <el-dialog title='综合记录事项' width='70%' :visible.sync='visible'>
  4. <div class='top'></div>
  5. <div class='bottom'>
  6. <p>1.各级政府部门在广场检查中口头及书面提出的工作要求,整改事项</p>
  7. <p>2.广场消防安全培训、消防演习</p>
  8. <p>3.相关政府强制性检测的按时完成情况及检测中提出的问题</p>
  9. <p>4.广场安全质量第三方检测过程中列出的整改事项</p>
  10. <div class='bottom-table' :style='`height:${height}`'>
  11. <el-table
  12. :data='tableData'
  13. :height='tableHeight'
  14. style='width:100%;'
  15. :span-method='objectSpanMethod'
  16. border
  17. v-if='tableData.length>0'
  18. >
  19. <el-table-column label='序号' type='index' width='60'></el-table-column>
  20. <el-table-column prop='jcsx' label='检测事项' :show-overflow-tooltip='true' width='400'></el-table-column>
  21. <el-table-column prop='zgbm' label='主管部门' :show-overflow-tooltip='true'></el-table-column>
  22. <el-table-column prop='jlsx' label='记录事项' :show-overflow-tooltip='true'></el-table-column>
  23. </el-table>
  24. </div>
  25. </div>
  26. </el-dialog>
  27. </div>
  28. </template>
  29. <script>
  30. export default {
  31. props: ['tableData'],
  32. data() {
  33. return {
  34. visible: false
  35. }
  36. },
  37. computed: {
  38. tableHeight() {
  39. if (window.screen.height <= 768) {
  40. return 350
  41. } else {
  42. return 440
  43. }
  44. },
  45. height() {
  46. if (window.screen.height <= 768) {
  47. return 300
  48. } else {
  49. return 400
  50. }
  51. }
  52. },
  53. methods: {
  54. open() {
  55. this.visible = true
  56. },
  57. /**
  58. * @name objectSpanMethod
  59. * @param { Object } row 当前行
  60. * @param { Object } column 当前列
  61. * @param { Number } rowIndex 当前行号
  62. * @param { Number } columnIndex 当前列号
  63. * @return { Array,Object }
  64. * @description 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,
  65. * 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
  66. * 该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,
  67. * 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
  68. */
  69. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  70. // 取出 tableData的长度, 合并记录事项 表格 使用
  71. let { length } = this.tableData || 1
  72. if (columnIndex === 2) {
  73. if (rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]) {
  74. return {
  75. rowspan: 0,
  76. colspan: 0
  77. }
  78. } else {
  79. let rows = 1
  80. for (let i = rowIndex; i < this.tableData.length - 1; i++) {
  81. if (row[column.property] === this.tableData[i + 1][column.property]) {
  82. rows++
  83. }
  84. }
  85. return {
  86. rowspan: rows,
  87. colspan: 1
  88. }
  89. }
  90. } else if (columnIndex === 3) {
  91. // 记录事项表格合并
  92. return { rowspan: length, colspan: 1 }
  93. }
  94. }
  95. }
  96. }
  97. </script>
  98. <style lang="less" scoped>
  99. .top {
  100. width: 100%;
  101. height: 1px;
  102. background: rgba(0, 0, 0, 0.06);
  103. margin-bottom: 20px;
  104. }
  105. .bottom {
  106. padding: 0 30px 14px 30px;
  107. p {
  108. font-size: 14px;
  109. font-family: PingFangSC-Regular, PingFang SC;
  110. font-weight: 400;
  111. color: rgba(96, 106, 120, 1);
  112. line-height: 22px;
  113. }
  114. .bottom-table {
  115. margin-top: 12px;
  116. // element-ui table 组件 记录事项样式修改, 换行,fixed到页面中部
  117. /deep/ .el-table__row:first-child {
  118. td:last-child {
  119. div {
  120. white-space: pre-wrap;
  121. word-wrap: break-word;
  122. word-break: break-all;
  123. position: fixed;
  124. top: 50%;
  125. transform: translateY(-50%);
  126. }
  127. }
  128. }
  129. }
  130. }
  131. </style>
  132. <style lang="less">
  133. .zhsx-log {
  134. .el-dialog {
  135. margin-top: 10vh !important;
  136. }
  137. .el-dialog__wrapper {
  138. overflow: hidden;
  139. }
  140. }
  141. </style>