room3.vue 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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='60' :index="indexMethod"></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='80'>
  17. <template slot-scope='{row}'>{{row.sl||'--'}}</template>
  18. </el-table-column>
  19. <el-table-column prop label='品牌' :show-overflow-tooltip='true' width="120">
  20. <template slot-scope='{row}'>{{row.brand||'--'}}</template>
  21. </el-table-column>
  22. <el-table-column prop label='型号' :show-overflow-tooltip='true' width="150">
  23. <template slot-scope='{row}'>{{row.sbxh||'--'}}</template>
  24. </el-table-column>
  25. <el-table-column prop label='楼层' :show-overflow-tooltip='true' width='100'>
  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. indexMethod(index) {
  63. return (this.page-1) * this.size + index+1
  64. },
  65. modalClose() {
  66. this.innerVisible = false
  67. },
  68. pageChanged(page) {
  69. this.$emit('Index2Emit', page)
  70. },
  71. innerTable(row) {
  72. this.row = row
  73. this.innerVisible = true
  74. }
  75. },
  76. mounted() {}
  77. }
  78. </script>
  79. <style lang="less" scoped>
  80. </style>
  81. <style lang="less">
  82. .compute-item {
  83. .foot {
  84. height: 32px;
  85. display: flex;
  86. justify-content: flex-end;
  87. margin-top: 28px;
  88. }
  89. .el-dialog {
  90. height: 95% !important;
  91. margin-top: 50px;
  92. }
  93. }
  94. </style>