room3.vue 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div class='compute-item'>
  3. <div class='compute-table'>
  4. <el-table
  5. :border='true'
  6. @row-click='innerTable'
  7. v-loading='loading'
  8. :data='table3'
  9. style='width: 100%'
  10. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  11. >
  12. <el-table-column type='index' label='序号' width='50'></el-table-column>
  13. <el-table-column prop :show-overflow-tooltip='true' label='设备简称' resizable min-width='150'>
  14. <template slot-scope='{row}'>{{row.classqc||'--'}}</template>
  15. </el-table-column>
  16. <el-table-column prop label='数量' :show-overflow-tooltip='true' width='70'>
  17. <template slot-scope='{row}'>{{row.sl||'--'}}</template>
  18. </el-table-column>
  19. <el-table-column prop label='品牌' :show-overflow-tooltip='true'>
  20. <template slot-scope='{row}'>{{row.brand||'--'}}</template>
  21. </el-table-column>
  22. <el-table-column prop label='型号' :show-overflow-tooltip='true'>
  23. <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
  24. </el-table-column>
  25. <el-table-column prop label='楼层' :show-overflow-tooltip='true' width='70'>
  26. <template slot-scope='{row}'>{{row.floorcode||'--'}}</template>
  27. </el-table-column>
  28. <el-table-column prop :show-overflow-tooltip='true' label='生产厂商' min-width='150'>
  29. <template slot-scope='{row}'>{{row.manufacturer||'--'}}</template>
  30. </el-table-column>
  31. </el-table>
  32. </div>
  33. <div class='foot'>
  34. <el-pagination
  35. background
  36. layout='prev, pager, next'
  37. :total='total'
  38. :page-size='size'
  39. @prev-click='pageChanged'
  40. @next-click='pageChanged'
  41. @current-change='pageChanged'
  42. ></el-pagination>
  43. </div>
  44. <el-dialog width='90%' title='设备清单' :visible.sync='innerVisible' append-to-body>
  45. <detail v-if='row' :row='row' :floorChange='floorChange'></detail>
  46. </el-dialog>
  47. </div>
  48. </template>
  49. <script>
  50. import Select from '@/components/Select/Select.vue'
  51. import Detail from './detail'
  52. export default {
  53. props: ['table3', 'total', 'page', 'size', 'loading', 'floorChange'],
  54. data() {
  55. return {
  56. innerVisible: false,
  57. row: {}
  58. }
  59. },
  60. components: { Select, Detail },
  61. methods: {
  62. modalClose() {
  63. this.innerVisible = false
  64. },
  65. pageChanged(page) {
  66. this.$emit('Index2Emit', page)
  67. },
  68. innerTable(row) {
  69. this.row = row
  70. this.innerVisible = true
  71. }
  72. },
  73. mounted() {}
  74. }
  75. </script>
  76. <style lang="less" scoped>
  77. </style>
  78. <style lang="less">
  79. .compute-item {
  80. .foot {
  81. height: 32px;
  82. display: flex;
  83. justify-content: flex-end;
  84. margin-top: 28px;
  85. }
  86. .el-dialog {
  87. height: 95% !important;
  88. margin-top: 50px;
  89. }
  90. }
  91. </style>