Electricity.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div class="main">
  3. <div class="search_bottom_tab">
  4. <div
  5. class="tab_list"
  6. v-for="(item, index) in tabs"
  7. @click="toggle(index + 1)"
  8. :class="activeIndex == index + 1 ? 'active' : ''"
  9. :key="index"
  10. >
  11. {{ item.label }}{{ item.value }}元
  12. </div>
  13. </div>
  14. <zz-table
  15. :cols="activeIndex == 1 ? cols : statusCols"
  16. :settings="{ showIndex: true, stripe: true }"
  17. :loading="mixins_onQuery"
  18. :data="mixins_list"
  19. :pageset="mixins_pageset"
  20. @page-change="pageChange"
  21. >
  22. </zz-table>
  23. </div>
  24. </template>
  25. <script>
  26. import list from '@utils/list.js';
  27. export default {
  28. mixins: [list],
  29. data() {
  30. return {
  31. cols: [
  32. {
  33. label: '社区名称',
  34. prop: 'communityName'
  35. },
  36. {
  37. label: '房间',
  38. prop: 'assets'
  39. },
  40. {
  41. label: '充值时间',
  42. prop: 'createDate'
  43. },
  44. {
  45. label: '充值方式',
  46. prop: 'paymentMethod',
  47. format(val) {
  48. if (val == '1') {
  49. return '微信';
  50. } else if (val == '2') {
  51. return '支付宝';
  52. } else if (val == '3') {
  53. return '现金';
  54. } else if (val == '4') {
  55. return '预存';
  56. } else if (val == '5') {
  57. return '其他';
  58. }
  59. }
  60. },
  61. {
  62. label: '充值人姓名',
  63. prop: 'userName'
  64. },
  65. {
  66. label: '手机号',
  67. prop: 'phone'
  68. },
  69. {
  70. label: '充值金额(元)',
  71. prop: 'amount'
  72. },
  73. {
  74. label: '备注',
  75. prop: 'remark'
  76. }
  77. ],
  78. statusCols: [
  79. {
  80. label: '社区名称',
  81. prop: 'communityName'
  82. },
  83. {
  84. label: '房间',
  85. prop: 'assets'
  86. },
  87. {
  88. label: '扣费时间',
  89. prop: 'createDate'
  90. },
  91. {
  92. label: '上期读数',
  93. prop: 'previousReading'
  94. },
  95. {
  96. label: '本期读数',
  97. prop: 'currentReading'
  98. },
  99. {
  100. label: '用电量(度)',
  101. prop: 'volume'
  102. },
  103. {
  104. label: '扣费金额(元)',
  105. prop: 'amount'
  106. }
  107. ],
  108. tabs: [
  109. {
  110. label: '充值金额:',
  111. value: '0'
  112. },
  113. {
  114. label: '扣费金额:',
  115. value: '0'
  116. }
  117. ],
  118. activeIndex: 1,
  119. mixins_post: 'post'
  120. };
  121. },
  122. created() {
  123. this.mixins_dataUrl = '/sc-charge/payment/record/page';
  124. this.mixins_query.accountType = 3;
  125. this.mixins_query.paymentType = 1;
  126. Object.assign(this.mixins_query, this.$parent.mixins_query);
  127. this.getSun(1);
  128. this.getSun(2);
  129. this.mixins_search();
  130. },
  131. mounted() {},
  132. methods: {
  133. toggle(index) {
  134. this.activeIndex = index;
  135. this.mixins_query.paymentType = index;
  136. this.mixins_search();
  137. },
  138. getSun(type) {
  139. this.$http
  140. .post('/sc-charge/payment/record/sum/amount', { accountType: 3, paymentType: type })
  141. .then(({ data, status, msg }) => {
  142. if (status == 0) {
  143. if (type == 1) {
  144. this.tabs[0].value = data;
  145. } else if (type == 2) {
  146. this.tabs[1].value = data;
  147. }
  148. } else {
  149. this.$message.error(msg);
  150. }
  151. })
  152. .catch(() => {});
  153. },
  154. getParent(query) {
  155. Object.assign(this.mixins_query, query);
  156. this.mixins_search();
  157. },
  158. exportExcel() {
  159. this.__exportExcel('/sc-charge/payment/record/export/excel', this.mixins_query);
  160. }
  161. }
  162. };
  163. </script>
  164. <style scoped lang='scss'>
  165. @import '@assets/css/public-style.scss';
  166. .search_bottom_tab {
  167. height: 60px;
  168. line-height: 60px;
  169. background: #ffffff;
  170. border-radius: 4px;
  171. margin-bottom: 20px;
  172. padding: 0 20px;
  173. box-sizing: border-box;
  174. .tab_list {
  175. display: inline-block;
  176. border-bottom: 1px solid transparent;
  177. cursor: pointer;
  178. color: #424656;
  179. &:not(:last-child) {
  180. margin-right: 40px;
  181. }
  182. &.active {
  183. color: $mainTextColor;
  184. border-color: $mainTextColor;
  185. }
  186. }
  187. }
  188. </style>