checkBill.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div class="checkBill">
  3. <div class="optionLine">
  4. <span>应用:</span>
  5. <a-select default-value="0" style="width: 150px" @change="APPChange">
  6. <a-select-option value="0">全部</a-select-option>
  7. <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>
  8. </a-select>
  9. <span class="timedate">日期选择:</span>
  10. <a-range-picker
  11. :placeholder="['开始月份', '结束月份']"
  12. format="YYYY-MM"
  13. :value="monthRange"
  14. :mode="mode2"
  15. @change="monthChange"
  16. @panelChange="monthPanelChange"
  17. style="width: 250px;"
  18. :loading="loading"
  19. />
  20. <span class="caozuoxitong">操作系统:</span>
  21. <a-select default-value="all" style="width: 150px" @change="handleChange">
  22. <a-select-option value="all">全部</a-select-option>
  23. <a-select-option value="android">Android</a-select-option>
  24. <a-select-option value="ios">IOS</a-select-option>
  25. </a-select>
  26. <div class="btn">
  27. <a-button type='primary' @click="getData">查询</a-button>
  28. </div>
  29. </div>
  30. <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false'>
  31. </a-table>
  32. <div class="fenye">
  33. <a-pagination v-model="currentPage" :total="totalItem" show-less-items style="float:right" />
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import moment from 'moment'
  39. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  40. let columns=[
  41. {
  42. title: '时间',
  43. dataIndex: 'date',
  44. key: 'date',
  45. scopedSlots: { customRender: 'date' },
  46. align: 'center',
  47. },
  48. {
  49. title: '应用',
  50. dataIndex: 'appName',
  51. key: 'appName',
  52. align: 'center',
  53. },
  54. {
  55. title: '操作系统',
  56. dataIndex: 'operateSystem',
  57. key: 'operateSystem',
  58. align: 'center',
  59. },
  60. {
  61. title: '有效激活数',
  62. dataIndex: 'sumInternalActivations',
  63. key: 'sumInternalActivations',
  64. align: 'center',
  65. },
  66. {
  67. title: '预估结算金额(元)',
  68. dataIndex: 'estimatedTotalPrice',
  69. key: 'estimatedTotalPrice',
  70. align: 'center',
  71. },
  72. {
  73. title: '账户质量分',
  74. dataIndex: 'accountQualityScore',
  75. key: 'accountQualityScore',
  76. align: 'center',
  77. },
  78. {
  79. title: '实际结算金额(元)',
  80. dataIndex: 'actualTotalPrice',
  81. key: 'actualTotalPrice',
  82. align: 'center',
  83. },
  84. ]
  85. export default {
  86. data() {
  87. return {
  88. //应用下拉选择框的
  89. optionArr:[],
  90. APPID:'',
  91. //table的值
  92. columns,
  93. dataSource:[],
  94. loading:false,
  95. //选择的值
  96. selectValue:'all',
  97. //日期的值
  98. monthRange:[],
  99. monthStr:[],//时间-字符串的类型
  100. mode2: ['month', 'month'],
  101. monthOpen:false,
  102. //分页器的参数
  103. currentPage:1,
  104. totalItem:10
  105. }
  106. },
  107. methods: {
  108. moment,
  109. //应用选择
  110. APPChange(value){
  111. this.APPID=value;
  112. },
  113. handleChange(value) {
  114. this.selectValue=value
  115. },
  116. //月份选择器value
  117. monthChange(value){
  118. console.log(value)
  119. this.monthRange=value
  120. },
  121. monthPanelChange(value, mode){
  122. this.monthRange=value
  123. // console.log(value,mode)
  124. this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
  125. this.monthStr=[moment(this.monthRange[0]).format('YYYY-MM'),moment(this.monthRange[1]).format('YYYY-MM')]
  126. },
  127. //确定按钮的事件
  128. getData(){
  129. console.log(this.monthStr,this.selectValue);
  130. this.loading=true;
  131. this.HttpPost()
  132. },
  133. //请求事件
  134. HttpPost(){
  135. postAction('/pangolin/api/checkApps/list',{
  136. pageSize:10,
  137. pageNo:this.currentPage,
  138. startDate:this.monthStr[0],
  139. endDate:this.monthStr[1],
  140. operateSystem:this.selectValue,
  141. appId:this.APPID
  142. }).then(res => {
  143. console.log(res)
  144. if (res.success) {
  145. this.loading=false;
  146. res.data.list.map((item, index) => {
  147. item.key = index
  148. })
  149. this.dataSource=res.data.list;
  150. this.totalItem=res.data.total
  151. }
  152. })
  153. }
  154. },
  155. mounted() {
  156. this.monthStr=[moment().format('YYYY-MM'),moment().format('YYYY-MM')];
  157. this.monthRange=[moment(),moment()]
  158. this.HttpPost()
  159. postAction('/pangolin/api/app/list').then(res=>{
  160. console.log(res)
  161. if(res.success){
  162. this.optionArr=res.data
  163. }
  164. })
  165. },
  166. }
  167. </script>
  168. <style lang="scss" scoped>
  169. .checkBill{
  170. width: 100%;
  171. height: 100%;
  172. background: #fff;
  173. padding: 10px 15px;
  174. }
  175. .optionLine{
  176. padding: 15px 5px;
  177. position: relative;
  178. margin-bottom: 15px;
  179. margin-top: 20px;
  180. span{
  181. display: inline-block;
  182. padding: 0 3px;
  183. }
  184. .timedate,.caozuoxitong{
  185. margin-left: 30px;;
  186. }
  187. .btn{
  188. position: absolute;
  189. right: 10px;
  190. top: 15px;
  191. }
  192. }
  193. .fenye{
  194. margin: 30px 15px 10px;
  195. overflow: hidden;
  196. }
  197. </style>