djspTable.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!-- 电井商铺 -->
  2. <template>
  3. <div class='djsp-list'>
  4. <div class='eq-list-top'>
  5. <el-input
  6. placeholder='搜索电井间'
  7. size='small'
  8. @keyup.enter.native='getList'
  9. @blur='getList'
  10. prefix-icon='el-icon-search'
  11. v-model='welldes'
  12. clearable
  13. style='width:192px;margin-right:12px'
  14. ></el-input>
  15. <el-input
  16. placeholder='搜索商铺编号'
  17. size='small'
  18. @keyup.enter.native='getList'
  19. @blur='getList'
  20. prefix-icon='el-icon-search'
  21. v-model='shopsnum'
  22. clearable
  23. style='width:192px;margin-right:12px'
  24. ></el-input>
  25. <Select @change='getList' v-model='floor' width='180' tipPlace='top' caption='楼层 :' :selectdata='floorSelect'></Select>
  26. </div>
  27. <el-table :data='tableData' :span-method='objectSpanMethod' :border='true' style='width: 100%' @row-click='innerVisible = true'>
  28. <el-table-column prop='floor' label='楼层' width='50'>
  29. <template slot-scope='{row}'>{{row.floor || '--'}}</template>
  30. </el-table-column>
  31. <el-table-column prop='welldes' label='电井间' width='120'>
  32. <template slot-scope='{row}'>{{row.welldes || '--'}}</template>
  33. </el-table-column>
  34. <el-table-column prop='meterbox' label='商铺电表数' width='200'>
  35. <template slot-scope='{row}'>{{row.meterbox || '--'}}</template>
  36. </el-table-column>
  37. <el-table-column prop='shopsnum' label='商铺编号'>
  38. <template slot-scope='{row}'>{{row.shopsnumList || '--'}}</template>
  39. </el-table-column>
  40. </el-table>
  41. <div class='foot'></div>
  42. </div>
  43. </template>
  44. <script>
  45. import { Select } from 'meri-design'
  46. import EqDetail from './eqDetaileDialog'
  47. import { queryShops } from '@/api/equipmentList.js'
  48. import { mapGetters } from 'vuex'
  49. import store from '../../../store/index'
  50. export default {
  51. components: { Select, EqDetail },
  52. data() {
  53. return {
  54. tableData: [],
  55. floor: '',
  56. innerVisible: false, //详情弹框
  57. shopsnum: '',
  58. welldes: ''
  59. }
  60. },
  61. computed: {
  62. ...mapGetters(['floorSelect', 'plazaId'])
  63. },
  64. props: ['param'],
  65. methods: {
  66. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  67. if (columnIndex === 0) {
  68. if (row.col0count > 0) {
  69. return {
  70. rowspan: row.col0count,
  71. colspan: 1
  72. }
  73. } else {
  74. return {
  75. rowspan: 0,
  76. colspan: 0
  77. }
  78. }
  79. }
  80. },
  81. pageChanged(page) {
  82. this.currentPage = page
  83. this.getList()
  84. },
  85. getList() {
  86. let getParams = {
  87. orderBy: `floor,0;welldesm,1;meterbox,1;`,
  88. plazaId: this.plazaId
  89. }
  90. if (this.floor) {
  91. getParams.floor = this.floor
  92. }
  93. getParams.keyword = ''
  94. if (this.welldes) {
  95. getParams.keyword += `${this.welldes}:welldes;`
  96. }
  97. if (this.shopsnum) {
  98. getParams.keyword += `${this.shopsnum}:shopsnumList;`
  99. }
  100. if (getParams.keyword == '') {
  101. delete getParams.keyword
  102. }
  103. queryShops({ getParams }).then(res => {
  104. console.log(res)
  105. this.tableData = []
  106. let floor = {}
  107. res.data &&
  108. res.data.forEach(i => {
  109. console.log(i)
  110. Object.keys(i).forEach(key => (floor[key] = 0)) // 初始化每一楼层个数为0
  111. Object.values(i).forEach(j => {
  112. Object.values(j).forEach(k => {
  113. console.log(k)
  114. this.tableData.push(k)
  115. })
  116. })
  117. })
  118. this.tableData.map(n => {
  119. if (floor[n.floor] === 0) {
  120. const count = this.tableData.filter(m => m.floor === n.floor).length
  121. floor[n.floor] = count
  122. n.col0count = count
  123. } else {
  124. n.col0count = 0
  125. }
  126. return n
  127. })
  128. })
  129. }
  130. },
  131. watch: {
  132. param(newV, oldV) {
  133. if (newV !== oldV) {
  134. this.getList()
  135. }
  136. },
  137. /* floor() {
  138. console.log('watch floor')
  139. this.getList()
  140. }, */
  141. // 监听 vuex 中currentFloor的变化,切换楼层后,更新下拉菜单
  142. '$store.state.currentFloor': {
  143. handler(newV, oldV) {
  144. if (newV.gname !== oldV.gname) {
  145. this.floor = newV.gname
  146. this.getList()
  147. }
  148. },
  149. deep: true
  150. }
  151. },
  152. mounted() {
  153. console.log('商铺电表数 mounted')
  154. this.floor = this.$cookie.get('floorMapId')
  155. console.log(this.floor)
  156. this.getList()
  157. }
  158. }
  159. </script>
  160. <style lang="less" scoped>
  161. .djsp-list {
  162. .eq-list-top {
  163. display: flex;
  164. margin-bottom: 12px;
  165. }
  166. td {
  167. overflow: hidden;
  168. text-overflow: ellipsis;
  169. white-space: nowrap;
  170. }
  171. .foot {
  172. height: 32px;
  173. display: flex;
  174. justify-content: flex-end;
  175. margin-top: 28px;
  176. }
  177. }
  178. </style>