checkBill.vue 6.0 KB

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