djspTable.vue 4.0 KB

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