djspTable.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!-- 电井商铺 -->
  2. <template>
  3. <div class='djsp-list'>
  4. <div class='eq-list-top'>
  5. <el-input
  6. placeholder='搜索电井间'
  7. size='small'
  8. @change='getList'
  9. prefix-icon='el-icon-search'
  10. v-model='keyword'
  11. style='width:192px;margin-right:12px'
  12. ></el-input>
  13. <el-input
  14. placeholder='搜索商铺编号'
  15. size='small'
  16. @change='getList'
  17. prefix-icon='el-icon-search'
  18. v-model='keyword'
  19. style='width:192px;margin-right:12px'
  20. ></el-input>
  21. <Select @change='getList' v-model='floor' width='120' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
  22. </div>
  23. <el-table :data='tableData' style='width: 100%' @row-click='innerVisible = true'>
  24. <el-table-column prop='floor' label='楼层' width='120'>
  25. <template slot-scope='{row}'>{{row.floor || '--'}}</template>
  26. </el-table-column>
  27. <el-table-column prop='welldes' label='电井间' width='160'>
  28. <template slot-scope='{row}'>{{row.welldes || '--'}}</template>
  29. </el-table-column>
  30. <el-table-column prop='meterbox' label='商铺电表数'>
  31. <template slot-scope='{row}'>{{row.meterbox || '--'}}</template>
  32. </el-table-column>
  33. <el-table-column prop='shopsnum' label='商铺编号'>
  34. <template slot-scope='{row}'>{{row.shopsnum || '--'}}</template>
  35. </el-table-column>
  36. </el-table>
  37. <div class='foot'>
  38. <el-pagination
  39. background
  40. layout='prev, pager, next'
  41. :total='total'
  42. :page-size='size'
  43. @prev-click='pageChanged'
  44. @next-click='pageChanged'
  45. @current-change='pageChanged'
  46. ></el-pagination>
  47. </div>
  48. </div>
  49. </template>
  50. <script>
  51. import Select from '@/components/Select/Select.vue'
  52. import EqDetail from './eqDetaileDialog'
  53. import { queryEquipmentList } from '@/api/equipmentList.js'
  54. import { mapGetters } from 'vuex'
  55. export default {
  56. components: { Select, EqDetail },
  57. data() {
  58. return {
  59. dataSelect2: [
  60. { id: 'test1', name: '选择项' },
  61. { id: 'test2', name: '单平米' },
  62. { id: 'test3', name: '下级分项' },
  63. { id: 'test4', name: '滑动平均滑动平均' }
  64. ],
  65. tableData: [],
  66. total: 0,
  67. currentPage: 1,
  68. size: 10,
  69. floor: '',
  70. innerVisible: false, //详情弹框
  71. keyword: ''
  72. }
  73. },
  74. computed: {
  75. ...mapGetters(['floorSelect'])
  76. },
  77. props: ['major'],
  78. methods: {
  79. pageChanged(page) {
  80. this.currentPage = page
  81. this.getList()
  82. },
  83. getList() {
  84. let postParams = {
  85. // tab_code: this.param
  86. }
  87. let data = {
  88. page: this.currentPage,
  89. size: this.size,
  90. plazaId: this.$store.state.plazaId,
  91. major: this.major,
  92. keyword: this.keyword
  93. }
  94. queryEquipmentList({ data, postParams }).then(res => {
  95. console.log(res)
  96. this.tableData = res.data.data
  97. this.total = res.data.count
  98. })
  99. }
  100. },
  101. mounted() {
  102. // this.getList()
  103. }
  104. }
  105. </script>
  106. <style lang="less" scoped>
  107. .djsp-list {
  108. .eq-list-top {
  109. display: flex;
  110. margin-bottom: 12px;
  111. }
  112. td {
  113. overflow: hidden;
  114. text-overflow: ellipsis;
  115. white-space: nowrap;
  116. }
  117. .foot {
  118. height: 32px;
  119. display: flex;
  120. justify-content: flex-end;
  121. margin-top: 28px;
  122. }
  123. }
  124. </style>