123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219 |
- <template>
- <div class="checkBill">
- <div class="optionLine">
- <span>应用:</span>
- <a-select default-value="0" style="width: 150px" @change="APPChange">
- <a-select-option value="0">全部</a-select-option>
- <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>
- </a-select>
- <span class="timedate">日期选择:</span>
- <a-range-picker
- :placeholder="['开始月份', '结束月份']"
- format="YYYY-MM"
- :value="monthRange"
- :mode="mode2"
- @change="monthChange"
- @panelChange="monthPanelChange"
- style="width: 250px;"
- :openChange='monthOpenChange'
- :loading="loading"
- />
- <span class="caozuoxitong">操作系统:</span>
- <a-select default-value="all" style="width: 150px" @change="handleChange">
- <a-select-option value="all">全部</a-select-option>
- <a-select-option value="android">Android</a-select-option>
- <a-select-option value="ios">IOS</a-select-option>
- </a-select>
- <div class="btn">
- <a-button type='primary' @click="getData">查询</a-button>
- </div>
- </div>
- <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false'>
-
- </a-table>
- <div class="fenye">
- <a-pagination v-model="currentPage" :total="totalItem" show-less-items style="float:right" />
- </div>
-
- </div>
- </template>
- <script>
- import moment from 'moment'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- let columns=[
- {
- title: '时间',
- dataIndex: 'date',
- key: 'date',
- scopedSlots: { customRender: 'date' },
- align: 'center',
- },
- {
- title: '应用',
- dataIndex: 'appName',
- key: 'appName',
- align: 'center',
- },
- {
- title: '操作系统',
- dataIndex: 'operateSystem',
- key: 'operateSystem',
- align: 'center',
- },
- {
- title: '有效激活数',
- dataIndex: 'sumInternalActivations',
- key: 'sumInternalActivations',
- align: 'center',
- },
- {
- title: '预估结算金额(元)',
- dataIndex: 'estimatedTotalPrice',
- key: 'estimatedTotalPrice',
- align: 'center',
- },
- {
- title: '账户质量分',
- dataIndex: 'accountQualityScore',
- key: 'accountQualityScore',
- align: 'center',
- },
- {
- title: '实际结算金额(元)',
- dataIndex: 'actualTotalPrice',
- key: 'actualTotalPrice',
- align: 'center',
- },
- ]
- export default {
- data() {
- return {
- //应用下拉选择框的
- optionArr:[],
- APPID:'',
- //table的值
- columns,
- dataSource:[],
- loading:false,
- //选择的值
- selectValue:'all',
- //日期的值
- monthRange:[],
- monthStr:[],//时间-字符串的类型
- mode2: ['month', 'month'],
- monthOpen:false,
- //分页器的参数
- currentPage:1,
- totalItem:10
- }
- },
- methods: {
- moment,
- //应用选择
- APPChange(value){
- this.APPID=value;
- },
- handleChange(value) {
- this.selectValue=value
- },
- //月份选择器value
- monthChange(value){
- console.log(value)
- this.monthRange=value
- },
- monthPanelChange(value, mode){
- this.monthRange=value
- console.log(value)
- this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
- this.monthStr=[moment(this.monthRange[0]).format('YYYY-MM'),moment(this.monthRange[1]).format('YYYY-MM')]
- },
- monthOpenChange(val){
- console.log(val)
- if(open){
- this.monthRange=[]
- }
- },
- //确定按钮的事件
- getData(){
-
- console.log(this.monthStr,this.selectValue);
- this.loading=true;
- this.HttpPost()
-
- },
- //请求事件
- HttpPost(){
- postAction('/pangolin/api/checkApps/list',{
- pageSize:10,
- pageNo:this.currentPage,
- startDate:this.monthStr[0],
- endDate:this.monthStr[1],
- operateSystem:this.selectValue,
- appId:this.APPID
- }).then(res => {
-
- console.log(res)
- if (res.success) {
- this.loading=false;
- res.data.list.map((item, index) => {
- item.key = index
- })
-
- this.dataSource=res.data.list;
- this.totalItem=res.data.total
- }
- })
- }
-
- },
- mounted() {
- this.monthStr=[moment().format('YYYY-MM'),moment().format('YYYY-MM')];
- this.monthRange=[moment(),moment()]
- this.HttpPost()
- postAction('/pangolin/api/app/list').then(res=>{
- console.log(res)
- if(res.success){
- this.optionArr=res.data
- }
- })
- },
- }
- </script>
- <style lang="scss" scoped>
- .checkBill{
- width: 100%;
- height: 100%;
- background: #fff;
- padding: 10px 15px;
- }
- .optionLine{
- padding: 15px 5px;
- position: relative;
- margin-bottom: 15px;
- margin-top: 20px;
- span{
- display: inline-block;
- padding: 0 3px;
- }
- .timedate,.caozuoxitong{
- margin-left: 30px;;
- }
- .btn{
- position: absolute;
- right: 10px;
- top: 15px;
- }
- }
- .fenye{
- margin: 30px 15px 10px;
- overflow: hidden;
- }
- </style>
|