68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<el-card shadow="never" header="订单排行">
|
|
<el-date-picker
|
|
v-model="queryParams.createDateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
@change="getRankList"
|
|
style="width: 100%;"
|
|
size="mini"
|
|
:picker-options="DatePickerOptions.DEFAULT"
|
|
/>
|
|
|
|
<el-table
|
|
:data="rankList"
|
|
style="width: 100%;"
|
|
size="mini"
|
|
v-loading="loading"
|
|
>
|
|
<el-table-column label="排行" type="index" width="50">
|
|
<template slot-scope="d">{{d.$index + 1}}</template>
|
|
</el-table-column>
|
|
<el-table-column label="运营区" prop="areaName" />
|
|
<el-table-column label="金额" prop="orderAmount" />
|
|
<el-table-column label="数量" prop="orderCount" />
|
|
<el-table-column label="进行中" prop="processingCount" />
|
|
</el-table>
|
|
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOrderRank } from '@/api/dashboard/dashboardOrder'
|
|
import { getLastDateStr } from '@/utils'
|
|
import { DatePickerOptions } from '@/utils/constants'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
DatePickerOptions,
|
|
loading: false,
|
|
rankList: [],
|
|
queryParams: {
|
|
createDateRange: [getLastDateStr(0), getLastDateStr(0)],
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getRankList();
|
|
},
|
|
methods: {
|
|
getRankList() {
|
|
this.loading = true;
|
|
getOrderRank(this.queryParams).then(res => {
|
|
this.rankList = res.data;
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |