794 lines
31 KiB
Vue
794 lines
31 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="box-card">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="储值卡变动记录" name="balanceCard">
|
|
<div style="display: flex;">
|
|
<!-- <div class="top-app-sou">-->
|
|
<el-form size="small" :inline="true" label-width="100px" :model="queryParams">
|
|
<el-form-item label="充值变化类型" prop="changeType">
|
|
<el-select
|
|
v-model="queryParams.changeType"
|
|
clearable
|
|
placeholder="全部"
|
|
>
|
|
<el-option label="充值" :value="1"></el-option>
|
|
<el-option label="消费" :value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="订单号">
|
|
<el-input v-model="queryParams.orderNo" clearable placeholder="订单号检索"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="交易时间">
|
|
<!-- <el-date-picker-->
|
|
<!-- v-model="dateRange"-->
|
|
<!-- style="width: 240px"-->
|
|
<!-- size="medium"-->
|
|
<!-- value-format="yyyy-MM-dd"-->
|
|
<!-- type="daterange"-->
|
|
<!-- range-separator="至"-->
|
|
<!-- start-placeholder="开始日期"-->
|
|
<!-- end-placeholder="结束日期"-->
|
|
<!-- ></el-date-picker>-->
|
|
<el-date-picker
|
|
v-model="beginTime"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
v-model="endTime"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- </div>-->
|
|
<!-- <div style="margin-left: 10px">-->
|
|
<!-- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>储值卡统计</span>
|
|
</div>
|
|
<div class="box-gang">
|
|
<!-- <div class="box" v-for="(item,index) in 7" :key="index">-->
|
|
<!-- <div class="size-hui">会员总数</div>-->
|
|
<!-- <div class="size-bole">55</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">余额汇总</div>-->
|
|
<!-- <div class="size-bole">{{ totalBalance.toFixed(2) }}</div>-->
|
|
<!-- </div>-->
|
|
<div class="box">
|
|
<div class="size-hui">充值笔数</div>
|
|
<div class="size-bole">{{ inCount }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="size-hui">充值总额</div>
|
|
<div class="size-bole">{{ totalRecharge.toFixed(2) }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="size-hui">消费笔数</div>
|
|
<div class="size-bole">{{ outCount }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="size-hui">消费总额</div>
|
|
<div class="size-bole">{{ totalConsumption.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<div class="wgang">
|
|
<div>列表</div>
|
|
<div style="display: flex ">
|
|
|
|
<!-- <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>-->
|
|
</div>
|
|
</div>
|
|
<div class="table-box">
|
|
<el-table
|
|
:data="cardBalanceList"
|
|
style="width: 100%">
|
|
<el-table-column prop="storeId" label="所属油站" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{store.name}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userId" label="用户信息" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userId ? queryUser(userList,scope.row.userId):"--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="orderNo" label="订单号" width="220" align="center"> </el-table-column>
|
|
<el-table-column prop="changeType" label="类型" align="center">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.changeType=='1'"><el-tag type="success">充值</el-tag></span>
|
|
<span v-if="scope.row.changeType=='0'"><el-tag type="danger">消费</el-tag></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="详细信息" align="center">
|
|
<el-table-column prop="balance" label="变动金额" align="center"> </el-table-column>
|
|
<el-table-column prop="afterTheChange" label="变动后余额" align="center" > </el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="fromType" label="消费来源" align="center" > </el-table-column>
|
|
<el-table-column prop="createTime" label="变动时间" align="center" > </el-table-column>
|
|
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination-box">
|
|
<el-pagination
|
|
background
|
|
v-show="total>0"
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
:page.sync="queryParams.page"
|
|
:limit.sync="queryParams.pageSize"
|
|
@current-change="getCardBalanceList">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="囤油卡变动记录" name="ascendCard">
|
|
<div style="display: flex;">
|
|
<!-- <div class="top-app-sou">-->
|
|
<el-form size="small" :inline="true" label-width="100px" :model="queryParams">
|
|
<el-form-item label="充值变化类型" prop="changeType">
|
|
<el-select
|
|
v-model="queryParams.changeType"
|
|
clearable
|
|
placeholder="全部"
|
|
>
|
|
<el-option label="充值" :value="1"></el-option>
|
|
<el-option label="消费" :value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="订单号">
|
|
<el-input v-model="queryParams.orderNo" clearable placeholder="订单号检索"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="交易时间">
|
|
<!-- <el-date-picker-->
|
|
<!-- v-model="dateRange"-->
|
|
<!-- style="width: 240px"-->
|
|
<!-- size="medium"-->
|
|
<!-- value-format="yyyy-MM-dd"-->
|
|
<!-- type="daterange"-->
|
|
<!-- range-separator="至"-->
|
|
<!-- start-placeholder="开始日期"-->
|
|
<!-- end-placeholder="结束日期"-->
|
|
<!-- ></el-date-picker>-->
|
|
<el-date-picker
|
|
v-model="beginTime"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
v-model="endTime"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- </div>-->
|
|
<!-- <div style="margin-left: 10px">-->
|
|
<!-- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>囤油卡统计</span>
|
|
</div>
|
|
<div class="box-gang">
|
|
<!-- <div class="box" v-for="(item,index) in 7" :key="index">-->
|
|
<!-- <div class="size-hui">会员总数</div>-->
|
|
<!-- <div class="size-bole">55</div>-->
|
|
<!-- </div>-->
|
|
<div class="box">
|
|
<div class="size-hui">充值笔数</div>
|
|
<div class="size-bole">{{ inCount1 }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="size-hui">充值总额</div>
|
|
<div class="size-bole">{{ totalRecharge1.toFixed(2) }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="size-hui">消费笔数</div>
|
|
<div class="size-bole">{{ outCount1 }}</div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="size-hui">消费总额</div>
|
|
<div class="size-bole">{{ totalConsumption1.toFixed(2) }}</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<div class="wgang">
|
|
<div>列表</div>
|
|
<div style="display: flex ">
|
|
|
|
<!-- <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>-->
|
|
</div>
|
|
</div>
|
|
<div class="table-box">
|
|
<el-table
|
|
:data="cardOilList"
|
|
style="width: 100%">
|
|
<el-table-column prop="storeId" label="所属油站" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{store.name}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userId" label="用户信息" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userId ? queryUser(userList,scope.row.userId):"--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="oilType" label="油品类型" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.type}}</span>
|
|
<!-- <span>{{scope.row.type}}{{ getOilName(oilNameList,scope.row.oilType) }}</span>-->
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="changeType" label="类型" align="center">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.changeType=='1'"><el-tag type="success">充值</el-tag></span>
|
|
<span v-if="scope.row.changeType=='0'"><el-tag type="danger">消费</el-tag></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="详细信息" align="center">
|
|
<el-table-column prop="oilBalance" label="变动升数" align="center"> </el-table-column>
|
|
<el-table-column prop="afterOilChange" label="变动后升数" align="center" > </el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="orderNo" label="订单号" width="230" align="center"> </el-table-column>
|
|
<el-table-column prop="fromType" label="消费来源" width="230" align="center" > </el-table-column>
|
|
<el-table-column prop="createTime" label="变动时间" align="center" > </el-table-column>
|
|
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination-box">
|
|
<el-pagination
|
|
background
|
|
v-show="total1>0"
|
|
layout="prev, pager, next"
|
|
:total="total1"
|
|
:page.sync="queryParams1.page"
|
|
:limit.sync="queryParams1.pageSize"
|
|
@current-change="getCardOilList">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
</el-card>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- <div style="display: flex;">-->
|
|
<!--<!– <div class="top-app-sou">–>-->
|
|
<!-- <el-form size="small" :inline="true" label-width="100px" :model="queryParams">-->
|
|
<!-- <el-form-item label="充值变化类型" prop="changeType">-->
|
|
<!-- <el-select-->
|
|
<!-- v-model="queryParams.changeType"-->
|
|
<!-- clearable-->
|
|
<!-- placeholder="全部"-->
|
|
<!-- >-->
|
|
<!-- <el-option label="充值" :value="1"></el-option>-->
|
|
<!-- <el-option label="消费" :value="0"></el-option>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="订单号">-->
|
|
<!-- <el-input v-model="queryParams.orderNo" clearable placeholder="订单号检索"></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="交易时间">-->
|
|
<!-- <el-date-picker-->
|
|
<!-- v-model="dateRange"-->
|
|
<!-- style="width: 240px"-->
|
|
<!-- size="medium"-->
|
|
<!-- value-format="yyyy-MM-dd"-->
|
|
<!-- type="daterange"-->
|
|
<!-- range-separator="至"-->
|
|
<!-- start-placeholder="开始日期"-->
|
|
<!-- end-placeholder="结束日期"-->
|
|
<!-- ></el-date-picker>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item>-->
|
|
<!-- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-form>-->
|
|
<!--<!– </div>–>-->
|
|
<!--<!– <div style="margin-left: 10px">–>-->
|
|
<!--<!– <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!-- </div>-->
|
|
</el-card>
|
|
<!-- 储值卡-->
|
|
<!-- <div v-if="activeName == 'balanceCard' ">-->
|
|
<!-- <el-card class="box-card">-->
|
|
<!-- <div slot="header" class="clearfix">-->
|
|
<!-- <span>储值卡统计</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box-gang">-->
|
|
<!--<!– <div class="box" v-for="(item,index) in 7" :key="index">–>-->
|
|
<!--<!– <div class="size-hui">会员总数</div>–>-->
|
|
<!--<!– <div class="size-bole">55</div>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!--<!– <div class="box">–>-->
|
|
<!--<!– <div class="size-hui">余额汇总</div>–>-->
|
|
<!--<!– <div class="size-bole">{{ totalBalance.toFixed(2) }}</div>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">充值笔数</div>-->
|
|
<!-- <div class="size-bole">{{ inCount }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">充值总额</div>-->
|
|
<!-- <div class="size-bole">{{ totalRecharge.toFixed(2) }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">消费笔数</div>-->
|
|
<!-- <div class="size-bole">{{ outCount }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">消费总额</div>-->
|
|
<!-- <div class="size-bole">{{ totalConsumption.toFixed(2) }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </el-card>-->
|
|
<!-- <el-card class="box-card">-->
|
|
<!-- <div class="wgang">-->
|
|
<!-- <div>列表</div>-->
|
|
<!-- <div style="display: flex ">-->
|
|
|
|
<!--<!– <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>–>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="table-box">-->
|
|
<!-- <el-table-->
|
|
<!-- :data="cardBalanceList"-->
|
|
<!-- style="width: 100%">-->
|
|
<!-- <el-table-column prop="storeId" label="所属油站" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span>{{store.name}}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="userId" label="用户信息" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span>{{ scope.row.userId ? queryUser(userList,scope.row.userId):"--" }}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="orderNo" label="订单号" width="220" align="center"> </el-table-column>-->
|
|
<!-- <el-table-column prop="changeType" label="类型" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span v-if="scope.row.changeType=='1'"><el-tag type="success">充值</el-tag></span>-->
|
|
<!-- <span v-if="scope.row.changeType=='0'"><el-tag type="danger">消费</el-tag></span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column label="详细信息" align="center">-->
|
|
<!-- <el-table-column prop="balance" label="变动金额" align="center"> </el-table-column>-->
|
|
<!-- <el-table-column prop="afterTheChange" label="变动后余额" align="center" > </el-table-column>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="fromType" label="消费来源" align="center" > </el-table-column>-->
|
|
<!-- <el-table-column prop="createTime" label="变动时间" align="center" > </el-table-column>-->
|
|
|
|
<!-- </el-table>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="pagination-box">-->
|
|
<!-- <el-pagination-->
|
|
<!-- background-->
|
|
<!-- v-show="total>0"-->
|
|
<!-- layout="prev, pager, next"-->
|
|
<!-- :total="total"-->
|
|
<!-- :page.sync="queryParams.page"-->
|
|
<!-- :limit.sync="queryParams.pageSize"-->
|
|
<!-- @current-change="getCardBalanceList">-->
|
|
<!-- </el-pagination>-->
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- </el-card>-->
|
|
<!-- </div>-->
|
|
<!--<!– 升数卡–>-->
|
|
<!-- <div v-if="activeName == 'ascendCard' ">-->
|
|
<!-- <el-card class="box-card">-->
|
|
<!-- <div slot="header" class="clearfix">-->
|
|
<!-- <span>升数卡统计</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box-gang">-->
|
|
<!--<!– <div class="box" v-for="(item,index) in 7" :key="index">–>-->
|
|
<!--<!– <div class="size-hui">会员总数</div>–>-->
|
|
<!--<!– <div class="size-bole">55</div>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">充值笔数</div>-->
|
|
<!-- <div class="size-bole">{{ inCount1 }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">充值总额</div>-->
|
|
<!-- <div class="size-bole">{{ totalRecharge1.toFixed(2) }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">消费笔数</div>-->
|
|
<!-- <div class="size-bole">{{ outCount1 }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="box">-->
|
|
<!-- <div class="size-hui">消费总额</div>-->
|
|
<!-- <div class="size-bole">{{ totalConsumption1.toFixed(2) }}</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </el-card>-->
|
|
<!-- <el-card class="box-card">-->
|
|
<!-- <div class="wgang">-->
|
|
<!-- <div>列表</div>-->
|
|
<!-- <div style="display: flex ">-->
|
|
|
|
<!--<!– <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>–>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="table-box">-->
|
|
<!-- <el-table-->
|
|
<!-- :data="cardOilList"-->
|
|
<!-- style="width: 100%">-->
|
|
<!-- <el-table-column prop="storeId" label="所属油站" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span>{{store.name}}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="userId" label="用户信息" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span>{{ scope.row.userId ? queryUser(userList,scope.row.userId):"--" }}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="oilType" label="油品类型" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span>{{scope.row.type}}{{ getOilName(oilNameList,scope.row.oilType) }}</span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="changeType" label="类型" align="center">-->
|
|
<!-- <template slot-scope="scope">-->
|
|
<!-- <span v-if="scope.row.changeType=='1'"><el-tag type="success">充值</el-tag></span>-->
|
|
<!-- <span v-if="scope.row.changeType=='0'"><el-tag type="danger">消费</el-tag></span>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column label="详细信息" align="center">-->
|
|
<!-- <el-table-column prop="oilBalance" label="变动金额" align="center"> </el-table-column>-->
|
|
<!-- <el-table-column prop="afterOilChange" label="变动后余额" align="center" > </el-table-column>-->
|
|
<!-- </el-table-column>-->
|
|
<!-- <el-table-column prop="orderNo" label="订单号" width="230" align="center"> </el-table-column>-->
|
|
<!-- <el-table-column prop="fromType" label="消费来源" width="230" align="center" > </el-table-column>-->
|
|
<!-- <el-table-column prop="createTime" label="变动时间" align="center" > </el-table-column>-->
|
|
|
|
<!-- </el-table>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="pagination-box">-->
|
|
<!-- <el-pagination-->
|
|
<!-- background-->
|
|
<!-- v-show="total1>0"-->
|
|
<!-- layout="prev, pager, next"-->
|
|
<!-- :total="total1"-->
|
|
<!-- :page.sync="queryParams1.page"-->
|
|
<!-- :limit.sync="queryParams1.pageSize"-->
|
|
<!-- @current-change="getCardOilList">-->
|
|
<!-- </el-pagination>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- </el-card>-->
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
cardBalanceCount,
|
|
cardOilCount,
|
|
listCardBalanceRecord,
|
|
listCardOilRecord
|
|
} from "@/api/cashier/balancecardrecord";
|
|
import {ljStoreInfo} from "@/api/cashier/user/store";
|
|
import {queryUsers} from "@/api/cashier/user/user";
|
|
import {oilNumbers} from "@/api/cashier/oilnumber";
|
|
|
|
export default {
|
|
name: "balanceList",
|
|
data(){
|
|
return{
|
|
activeName: 'balanceCard',
|
|
labelPosition: 'right',
|
|
formLabelAlign: {
|
|
name: '',
|
|
},
|
|
store:{},
|
|
|
|
queryParams:{
|
|
page:1,
|
|
pageSize:10,
|
|
},
|
|
cardBalanceList:[],
|
|
total:0,
|
|
inCount:0,
|
|
outCount:0,
|
|
totalBalance:0,
|
|
totalConsumption:0,
|
|
totalRecharge:0,
|
|
|
|
queryParams1:{
|
|
page:1,
|
|
pageSize:10,
|
|
},
|
|
cardOilList:[],
|
|
total1:0,
|
|
inCount1:0,
|
|
outCount1:0,
|
|
totalConsumption1:0,
|
|
totalRecharge1:0,
|
|
dateRange:[],
|
|
beginTime:"",
|
|
endTime:"",
|
|
|
|
// 用户列表
|
|
userList:[],
|
|
oilNameList:[],
|
|
|
|
// tableData: [{
|
|
// date: '2016-05-03',
|
|
// name: '王小狼',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }, {
|
|
// date: '2016-05-02',
|
|
// name: '王小虎',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }, {
|
|
// date: '2016-05-04',
|
|
// name: '王小虎',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }, {
|
|
// date: '2016-05-01',
|
|
// name: '王小虎',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }, {
|
|
// date: '2016-05-08',
|
|
// name: '王小虎',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }, {
|
|
// date: '2016-05-06',
|
|
// name: '王小虎',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }, {
|
|
// date: '2016-05-07',
|
|
// name: '王小虎',
|
|
// province: '上海',
|
|
// city: '普陀区',
|
|
// address: '上海市普陀区金沙江路 1518 弄',
|
|
// zip: 200333
|
|
// }]
|
|
}
|
|
|
|
},
|
|
created() {
|
|
this.getCardBalanceList();
|
|
// this.getCardBalanceCount();
|
|
// this.getCardOilList();
|
|
// this.getCardOilCount();
|
|
this.getStoreInfo();
|
|
this.getUserList();
|
|
this.getOilNameList();
|
|
},
|
|
methods: {
|
|
// 搜索按钮操作
|
|
handleQuery() {
|
|
this.queryParams.page = 1;
|
|
if (this.activeName == 'ascendCard'){
|
|
this.getCardOilList();
|
|
}
|
|
if (this.activeName == 'balanceCard'){
|
|
this.getCardBalanceList();
|
|
}
|
|
},
|
|
getOilName(list,id){
|
|
let name = ""
|
|
list.forEach(item => {
|
|
if (item.oilName = id){
|
|
name = item.oilNames;
|
|
}
|
|
})
|
|
return name;
|
|
},
|
|
getOilNameList(){
|
|
oilNumbers().then(response => {
|
|
this.oilNameList = response.data;
|
|
})
|
|
},
|
|
getUserList(){
|
|
queryUsers().then(res => {
|
|
this.userList = res.data
|
|
})
|
|
},
|
|
queryUser(list,id){
|
|
let name = ""
|
|
list.forEach(item => {
|
|
if (item.id == id){
|
|
name = item.name + " | " + item.mobile
|
|
}
|
|
})
|
|
return name;
|
|
},
|
|
// 获取店铺信息
|
|
getStoreInfo(){
|
|
ljStoreInfo().then(res => {
|
|
this.store = res.data
|
|
})
|
|
},
|
|
getCardBalanceList(val){
|
|
if (val!=undefined){
|
|
this.queryParams.page = val
|
|
}
|
|
this.dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
this.dateRange.push(this.beginTime.toLocaleDateString())
|
|
this.dateRange.push(this.endTime.toLocaleDateString())
|
|
}
|
|
listCardBalanceRecord(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
|
|
this.cardBalanceList = res.data.records
|
|
this.total = res.data.total
|
|
})
|
|
this.getCardBalanceCount(val)
|
|
},
|
|
getCardBalanceCount(val){
|
|
if (val!=undefined){
|
|
this.queryParams.page = val
|
|
}
|
|
this.dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
this.dateRange.push(this.beginTime.toLocaleDateString())
|
|
this.dateRange.push(this.endTime.toLocaleDateString())
|
|
}
|
|
console.log(this.dateRange)
|
|
cardBalanceCount(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
|
|
this.inCount = res.data.inCount
|
|
this.outCount = res.data.outCount
|
|
this.totalBalance = res.data.totalBalance
|
|
this.totalRecharge = res.data.totalRecharge
|
|
this.totalConsumption = res.data.totalConsumption
|
|
})
|
|
},
|
|
getCardOilList(val){
|
|
if (val!=undefined){
|
|
this.queryParams.page = val
|
|
}
|
|
this.dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
this.dateRange.push(this.beginTime.toLocaleDateString())
|
|
this.dateRange.push(this.endTime.toLocaleDateString())
|
|
}
|
|
listCardOilRecord(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
|
|
this.cardOilList = res.data.records
|
|
this.total1 = res.data.total
|
|
})
|
|
this.getCardOilCount(val)
|
|
},
|
|
getCardOilCount(val){
|
|
if (val!=undefined){
|
|
this.queryParams.page = val
|
|
}
|
|
this.dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
this.dateRange.push(this.beginTime.toLocaleDateString())
|
|
this.dateRange.push(this.endTime.toLocaleDateString())
|
|
}
|
|
cardOilCount(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
|
|
this.inCount1 = res.data.inCount
|
|
this.outCount1 = res.data.outCount
|
|
this.totalConsumption1 = res.data.totalConsumption
|
|
this.totalRecharge1 = res.data.totalRecharge
|
|
// console.log(res)
|
|
})
|
|
},
|
|
handleClick(tab, event) {
|
|
// console.log(tab, event);
|
|
this.queryParams = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
}
|
|
if (this.activeName == 'ascendCard'){
|
|
this.getCardOilList();
|
|
}
|
|
if (this.activeName == 'balanceCard'){
|
|
this.getCardBalanceList();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-top{
|
|
width: 100%;
|
|
|
|
height: 60px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
.clearfix{
|
|
width: 100%;
|
|
|
|
}
|
|
.box-card{
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
.box-gang{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.box{
|
|
width: 200px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
background: #f9f9f9;
|
|
height: 86px;
|
|
margin-right: 10px;
|
|
}
|
|
.size-hui{
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.size-bole{
|
|
font-weight: bold;
|
|
}
|
|
.wgang{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
.table-box{
|
|
width: 100%;
|
|
}
|
|
.pagination-box{
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.top-app-sou{
|
|
width: 20%;
|
|
}
|
|
|
|
|
|
</style>
|