djspTable.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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='shopInfo'
  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='floorAllSelect'></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='shopInfo' label='商铺信息'>
  38. <template slot-scope='{row}'>{{row.brandList || '--'}}</template>
  39. <template slot-scope='{row}'>
  40. <div v-if='row.brandList' class='shop-info'>
  41. <i v-for='(info,infoIndex) in row.brandList' :key='infoIndex'>
  42. {{ info.brandname || 'xxx' }}
  43. -
  44. <!-- {{ info.shopsnumList ? info.shopsnumList.replaceAll(',','、') : 'xxx' }} -->
  45. {{ info.shopsnumList ? info.shopsnumList.replace(/,/g,'、') : 'xxx' }}
  46. {{ infoIndex === row.brandList.length - 1 ? '' : ',' }}
  47. </i>
  48. </div>
  49. </template>
  50. </el-table-column>
  51. </el-table>
  52. <div class='foot'></div>
  53. </div>
  54. </template>
  55. <script>
  56. import { Select } from 'meri-design'
  57. import EqDetail from './eqDetaileDialog'
  58. import { queryShops, queryBrand } from '@/api/equipmentList.js'
  59. import { mapGetters } from 'vuex'
  60. import store from '../../../store/index'
  61. export default {
  62. components: { Select, EqDetail },
  63. data() {
  64. return {
  65. tableData: [],
  66. floor: '1',
  67. innerVisible: false, //详情弹框
  68. shopInfo: '',
  69. welldes: '',
  70. floorAllSelect: [],
  71. }
  72. },
  73. computed: {
  74. ...mapGetters(['floorSelect', 'plazaId']),
  75. },
  76. props: ['param'],
  77. methods: {
  78. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  79. if (columnIndex === 0) {
  80. if (row.col0count > 0) {
  81. return {
  82. rowspan: row.col0count,
  83. colspan: 1,
  84. }
  85. } else {
  86. return {
  87. rowspan: 0,
  88. colspan: 0,
  89. }
  90. }
  91. }
  92. },
  93. getList() {
  94. let getParams = {
  95. orderBy: `floor,0;welldesm,1;meterbox,1;`,
  96. plazaId: this.plazaId,
  97. }
  98. if (this.floor && this.floor != 1) {
  99. getParams.floor = this.floor
  100. }
  101. getParams.keyword = ''
  102. if (this.welldes) {
  103. getParams.keyword += `${this.welldes}:welldes;`
  104. }
  105. if (this.shopInfo) {
  106. getParams.keyword += `${this.shopInfo}:shopsnumList,brandname;`
  107. }
  108. if (getParams.keyword == '') {
  109. delete getParams.keyword
  110. }
  111. queryBrand({ getParams }).then((res) => {
  112. console.log(res)
  113. this.tableData = []
  114. let floor = {}
  115. res.data &&
  116. res.data.forEach((i) => {
  117. console.log(i)
  118. Object.keys(i).forEach((key) => (floor[key] = 0)) // 初始化每一楼层个数为0
  119. Object.values(i).forEach((j) => {
  120. Object.values(j).forEach((k) => {
  121. console.log(k)
  122. this.tableData.push(k)
  123. })
  124. })
  125. })
  126. this.tableData.map((n) => {
  127. if (floor[n.floor] === 0) {
  128. const count = this.tableData.filter((m) => m.floor === n.floor).length
  129. floor[n.floor] = count
  130. n.col0count = count
  131. } else {
  132. n.col0count = 0
  133. }
  134. return n
  135. })
  136. })
  137. },
  138. getFloorAllSelect() {
  139. this.floorAllSelect = []
  140. this.floorAllSelect.push({
  141. name: '全部',
  142. id: '1',
  143. })
  144. this.floorSelect.forEach((el) => {
  145. this.floorAllSelect.push(el)
  146. })
  147. },
  148. },
  149. watch: {
  150. param(newV, oldV) {
  151. if (newV !== oldV) {
  152. this.getList()
  153. }
  154. },
  155. /* floor() {
  156. console.log('watch floor')
  157. this.getList()
  158. }, */
  159. // 监听 vuex 中currentFloor的变化,切换楼层后,更新下拉菜单
  160. '$store.state.currentFloor': {
  161. handler(newV, oldV) {
  162. if (newV.gcname !== oldV.gcname) {
  163. this.floor = newV.gcname
  164. this.getList()
  165. }
  166. },
  167. deep: true,
  168. },
  169. },
  170. mounted() {
  171. // this.floor = this.$cookie.get('floorMapId')
  172. this.getList()
  173. this.getFloorAllSelect()
  174. },
  175. }
  176. </script>
  177. <style lang="less" scoped>
  178. .djsp-list {
  179. .eq-list-top {
  180. display: flex;
  181. margin-bottom: 12px;
  182. }
  183. td {
  184. overflow: hidden;
  185. text-overflow: ellipsis;
  186. white-space: nowrap;
  187. }
  188. .foot {
  189. height: 32px;
  190. display: flex;
  191. justify-content: flex-end;
  192. margin-top: 28px;
  193. }
  194. .shop-info {
  195. word-break: break-word;
  196. i {
  197. // display: inline-block;
  198. padding: 2px 0;
  199. }
  200. }
  201. }
  202. </style>