Commit 40220e17 authored by guoyou's avatar guoyou

总公司报表

parent 0524b615
import fetch from 'utils/fetch'; import fetch from 'utils/fetch';
// 員工業績報表列表
export function getDate(query) { export function getDate(query) {
return fetch({ return fetch({
url: 'api/admin/staff_statistics/page', url: 'api/admin/staff_statistics/page',
...@@ -8,7 +8,7 @@ export function getDate(query) { ...@@ -8,7 +8,7 @@ export function getDate(query) {
data: query data: query
}); });
} }
// 員工業績報表導出
export function exports(query) { export function exports(query) {
return fetch({ return fetch({
url: 'api/admin/staff_statistics/export', url: 'api/admin/staff_statistics/export',
...@@ -17,3 +17,22 @@ export function exports(query) { ...@@ -17,3 +17,22 @@ export function exports(query) {
responseType: 'blob' responseType: 'blob'
}); });
} }
// 員工業績列表
export function companyList(query) {
return fetch({
url: '/api/order/report/form/list',
method: 'post',
data: query
});
}
// 員工業績導出
export function excel(query) {
return fetch({
url: '/api/order/report/form/excel',
method: 'post',
data: query,
responseType: 'blob'
});
}
\ No newline at end of file
...@@ -17,3 +17,10 @@ export function statistic(param) { ...@@ -17,3 +17,10 @@ export function statistic(param) {
}) })
} }
export function findReserveType(param) {
return fetch({
url: '/departure/findReserveType ',
method: 'get',
params: param
})
}
...@@ -382,7 +382,6 @@ ...@@ -382,7 +382,6 @@
this.branchCompany_btn_del = this.elements['branchCompany:btn_del']; this.branchCompany_btn_del = this.elements['branchCompany:btn_del'];
this.branchCompany_btn_add = this.elements['branchCompany:btn_add']; this.branchCompany_btn_add = this.elements['branchCompany:btn_add'];
this.compnay_stock_update = this.elements['compnay:stock:update'] this.compnay_stock_update = this.elements['compnay:stock:update']
debugger
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody"> <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div> <div>
<div class="filter-container" ref="filter-container"> <div class="filter-container" ref="filter-container">
<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="60px"> <el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
<el-row> <el-row>
<el-form-item label="手机号"> <el-form-item label="手机号">
<el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input> <el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input>
...@@ -31,10 +31,6 @@ ...@@ -31,10 +31,6 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-col :span="4"></el-col>
<el-col :span="3"></el-col>
<el-col :span="4"></el-col>
<el-col :span="4"></el-col> -->
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button> <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" @click="giveCunpon" style="float: right;">+ 发券</el-button> <el-button class="filter-item" type="primary" @click="giveCunpon" style="float: right;">+ 发券</el-button>
<!-- <el-button class="filter-item" type="primary" style="float: right;">+ 批量发券</el-button> --> <!-- <el-button class="filter-item" type="primary" style="float: right;">+ 批量发券</el-button> -->
......
<template> <template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody"> <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div> <div class="filter-container" ref="filter-container">
<div class="filter-container" ref="filter-container"> <el-form ref="queryForm" :inline="inline" :model="listQuery">
<el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="50px"> <el-form-item label="标题">
<el-row> <el-input v-model.number="listQuery.title" placeholder="请输入标题"></el-input>
<el-form-item label="标题"> </el-form-item>
<el-input v-model.number="listQuery.title" placeholder="请输入标题"></el-input> <el-form-item label="类型">
</el-form-item> <el-select class="filter-item" v-model="listQuery.channel" placeholder="类型">
<el-form-item> <el-option key label="全部" value></el-option>
<el-select class="filter-item" v-model="listQuery.channel" placeholder="类型"> <el-option
<el-option key label="全部" value></el-option> v-for="(item,index) in channelType"
<el-option :key="index"
v-for="(item,index) in channelType" :label="item.val"
:key="index" :value="item.id"
:label="item.val" ></el-option>
:value="item.id" </el-select>
></el-option> </el-form-item>
</el-select> <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
</el-form-item> <el-button class="filter-item" type="primary" @click="addCunpon" style="float: right;">+ 添加优惠券</el-button>
<el-col :span="5"></el-col> </el-form>
<el-col :span="5"></el-col> </div>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button> <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
<el-button class="filter-item" type="primary" @click="addCunpon" style="float: right;">+ 添加优惠券</el-button> <el-table-column type="index" align="center" label="ID" width="100">
</el-row> <template scope="scope">
</el-form> <span>{{scope.row.id}}</span>
</div> </template>
<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;"> </el-table-column>
<el-table-column type="index" align="center" label="ID" width="100"> <el-table-column align="center" label="优惠券标题">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.title}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="优惠券标题"> <el-table-column align="center" label="类型">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.title}}</span> <span v-if="scope.row.channel==0">全平台</span>
</template> <span v-if="scope.row.channel==1">租车</span>
</el-table-column> <span v-if="scope.row.channel==2">旅游</span>
<el-table-column align="center" label="类型"> <span v-if="scope.row.channel==3">营地</span>
<template scope="scope"> <span v-if="scope.row.channel==4">会员</span>
<span v-if="scope.row.channel==0">全平台</span> </template>
<span v-if="scope.row.channel==1">租车</span> </el-table-column>
<span v-if="scope.row.channel==2">旅游</span> <el-table-column align="center" label="金额">
<span v-if="scope.row.channel==3">营地</span> <template scope="scope">
<span v-if="scope.row.channel==4">会员</span> <span>{{scope.row.usedAmount}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="金额"> <el-table-column align="center" label="已领取">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.usedAmount}}</span> <span>{{scope.row.takeCount}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="已领取"> <el-table-column align="center" label="已使用">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.takeCount}}</span> <span>{{scope.row.usedCount}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="已使用"> <el-table-column align="center" label="创建时间">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.usedCount}}</span> <span>{{scope.row.crtTimeStr}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="创建时间"> <el-table-column align="center" label="操作" width="150" fixed="right">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.crtTimeStr}}</span> <el-button
</template> size="small"
</el-table-column> class="el-button el-button--text el-button--small"
<el-table-column align="center" label="操作" width="150" fixed="right"> @click="handleUpdate(scope.row)"
<template scope="scope"> >编辑</el-button>
<el-button <el-button
size="small" class="el-button el-button--text el-button--small"
class="el-button el-button--text el-button--small" style="color:red;"
@click="handleUpdate(scope.row)" size="small"
>编辑</el-button> @click="deleteHandler(scope.row)"
<el-button >删除</el-button>
class="el-button el-button--text el-button--small" </template>
style="color:red;" </el-table-column>
size="small" </el-table>
@click="deleteHandler(scope.row)" <div v-show="!listLoading" class="pagination-container">
>删除</el-button> <el-pagination
</template> @size-change="handleSizeChange"
</el-table-column> @current-change="handleCurrentChange"
</el-table> :current-page.sync="listQuery.page"
<div v-show="!listLoading" class="pagination-container"> :page-sizes="[10,20,30,40,50]"
<el-pagination :page-size="listQuery.limit"
@size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange" :total="total"
:current-page.sync="listQuery.page" ></el-pagination>
:page-sizes="[10,20,30,40,50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
</div> </div>
<!-- 优惠券编辑 --> <!-- 优惠券编辑 -->
......
<template> <template>
<div class="app-container calendar-list-container" v-loading="loading"> <div class="app-container calendar-list-container" v-loading="loading">
<el-row style="border-bottom:1px dashed #ccc;padding-bottom:20px"> <el-row>
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="统计类型" style="width:200px"> <el-form-item label="统计类型" style="width:200px">
<el-radio-group v-model="listquery.radio1"> <el-radio-group v-model="listquery.type" @change="changeType">
<el-radio-button label="0">收入</el-radio-button> <el-radio-button label="0">收入</el-radio-button>
<el-radio-button label="1">支出</el-radio-button> <el-radio-button label="1">支出</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-date-picker v-model="time" type="daterange" placeholder="选择日期范围" @change="changeTime"></el-date-picker> <el-date-picker v-model="time" type="daterange" placeholder="请选择下单时间" @change="changeTime"></el-date-picker>
<el-select v-model="listquery.orderType" clearable placeholder="请选择订单类型" @change="changeStaff">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-select <el-select
v-model="listquery.userPostionId" v-show="listquery.type == 0"
v-model="listquery.companyId"
filterable
placeholder="请选择业绩所属公司"
clearable clearable
placeholder="请选择订单类型" @change="changeCompany"
@change="changeStaff"
> >
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in allCompaniesArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
<el-select
v-model="listquery.paymentMethod"
clearable
placeholder="请选择支付方式"
@change="changeWay"
v-show="listquery.type == 0"
>
<el-option v-for="item in payArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-button type="primary" :loading="excelLoading" @click="downloadExcel">导出报表</el-button> <el-button type="primary" :loading="excelLoading" @click="downloadExcel">导出报表</el-button>
</el-form> </el-form>
</el-row> </el-row>
<div class="information"> <div class="information" v-if="listquery.type == 0">
<h4>数据概况</h4> <h4>数据概况</h4>
<ul> <ul class="first">
<li> <li>
<p>{{information.staffNum}}</p> <p>{{information.orderSum || 0}}</p>
<p>订单总量</p> <p>订单总量</p>
</li> </li>
<li> <li>
<p>{{information.totalRoyaltyAmount}}</p> <p>{{information.totalReceivables || 0}}</p>
<p>应收金额</p>
</li>
<li>
<p>{{information.discount || 0}}</p>
<p>优惠金额</p>
</li>
<li>
<p>{{information.actual || 0}}</p>
<p>实收金额</p>
</li>
</ul>
<!-- <ul v-else class="second">
<li>
<p>{{information.orderSum || 0}}</p>
<p>订单总量</p>
</li>
<li>
<p>{{information.staffNum || 0}}</p>
<p>应退还金额</p> <p>应退还金额</p>
</li> </li>
<li> <li>
<p>{{information.totalRoyaltyAmount}}</p> <p>{{information.staffNum || 0}}</p>
<p>实际退还</p> <p>实际退还</p>
</li> </li>
</ul> </ul> -->
</div> </div>
<el-table :data="tableData" border style="width: 100%" header-align="center" height="450"> <el-table :data="tableData" border style="width: 100%" header-align="center" height="450">
<el-table-column prop="name" label="退款日期" align="center"></el-table-column> <el-table-column prop="crtTime" label="下单日期" align="center" v-if="listquery.type == 0"></el-table-column>
<el-table-column prop="companyNames" label="订单ID" align="center"> <el-table-column prop="time" label="退款日期" align="center" v-else></el-table-column>
<template scope="scope"> <el-table-column prop="no" label="订单ID" align="center"></el-table-column>
<p v-for="(item,index) in scope.row.companyNames" :key="index">{{item}}</p> <el-table-column prop="type" label="订单类型" align="center"></el-table-column>
</template> <el-table-column prop="orderAmount" label="应收金额" align="center" v-if="listquery.type == 0"></el-table-column>
</el-table-column> <el-table-column prop="refundInstruction" label="退还类型" align="center" v-else></el-table-column>
<el-table-column prop="postionNames" label="订单类型" align="center"> <el-table-column prop="favorablePrice" label="优惠金额" align="center" v-if="listquery.type == 0"></el-table-column>
<el-table-column prop="refundAmount" label="退还金额" align="center" v-else></el-table-column>
<el-table-column prop="realAmount" label="实收金额" align="center" v-if="listquery.type == 0"></el-table-column>
<el-table-column prop="realname" label="客户名字" align="center"></el-table-column>
<el-table-column prop="username" label="客户手机号" align="center"></el-table-column>
<el-table-column label="邀约人/身份" align="center" v-if="listquery.type == 0">
<template scope="scope"> <template scope="scope">
<span <span>{{scope.row.parentRealname}} / {{scope.row.positionName}}</span>
v-for="(item,index) in scope.row.postionNames"
:key="index"
style="margin-left:10px"
>{{item}}</span>
</template>
</el-table-column>
<el-table-column prop="phone" label="退还类型" align="center"></el-table-column>
<el-table-column prop="sellAmount" label="应退还金额" align="center"></el-table-column>
<el-table-column prop="royaltyAmount" label="实际退款接" align="center"></el-table-column>
<el-table-column label="客户名字" align="center">
<template scope="scope">
<span>{{scope.row.memberOrderNum}} / {{scope.row.memberAmount}}</span>
</template>
</el-table-column>
<el-table-column label="客户手机号" align="center">
<template scope="scope">
<span>{{scope.row.rentVehicleOrderNum}} / {{scope.row.rentVehicleAmount}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="parentUsername" label="邀约人手机号" align="center" v-if="listquery.type == 0"></el-table-column>
<el-table-column prop="companyName" label="业绩所属公司" align="center" v-if="listquery.type == 0"></el-table-column>
<el-table-column prop="payWay" label="支付方式" align="center" v-if="listquery.type == 0"></el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
...@@ -85,12 +111,12 @@ ...@@ -85,12 +111,12 @@
</div> </div>
</template> </template>
<script> <script>
import { getDate } from 'api/statistics' import { companyList, excel } from 'api/statistics'
import { getAll } from 'api/base_info/branch_company/'
import { getrewardSetting } from 'api/purseManage'
export default { export default {
created() { created() {
this.getList() this.getList()
this.getCompany()
}, },
data() { data() {
return { return {
...@@ -98,33 +124,37 @@ export default { ...@@ -98,33 +124,37 @@ export default {
total: null, total: null,
information: {}, information: {},
time: [], time: [],
allCompaniesArr: [], //公司数据
tableData: [], //表格数据 tableData: [], //表格数据
excelLoading: false, //导出loading excelLoading: false, //导出loading
payArr: [
{ id: 1, name: '微信公众号支付' },
{ id: 2, name: '支付宝即时支付' },
{ id: 3, name: '银联' }
],
options: [ options: [
{
id: '0',
name: '首次购买'
},
{ {
id: '1', id: '1',
name: '续费' name: '租车'
}, },
{ {
id: '2', id: '2',
name: '激活' name: '旅游'
}, },
{ {
id: '3', id: '3',
name: '付费' name: '会员'
} }
], //身份 ], //身份
listquery: { listquery: {
startDate: null, //开始日期 startDate: null, //开始日期
endDate: null, //结束日期 endDate: null, //结束日期
userPostionId: null, //身份 orderType: null, //身份
page: 1, page: 1,
limit: 10, limit: 10,
radio1: 0 companyId: null, //业绩所属公司
paymentMethod: null, //支付方式
type: 0
} }
} }
}, },
...@@ -137,6 +167,27 @@ export default { ...@@ -137,6 +167,27 @@ export default {
this.listquery.page = val this.listquery.page = val
this.getList() this.getList()
}, },
//获取分公司
getCompany() {
getAll().then(data => {
this.allCompaniesArr = data.data
})
},
//所属公司筛选
changeCompany() {
this.listquery.page = 1
this.getList()
},
//统计类型筛选
changeType() {
this.listquery.page = 1
this.getList()
},
//支付方式筛选
changeWay() {
this.listquery.page = 1
this.getList()
},
//时间筛选 //时间筛选
changeTime(val, value) { changeTime(val, value) {
this.listquery.page = 1 this.listquery.page = 1
...@@ -158,20 +209,56 @@ export default { ...@@ -158,20 +209,56 @@ export default {
}, },
//列表数据 //列表数据
getList() { getList() {
// this.loading = true this.loading = true
// getDate(this.listquery).then(data => { companyList(this.listquery).then(data => {
// if (data.status == 200) { if (data.status == 200) {
// this.tableData = data.data.data if (this.listquery.type == 0) {
// this.total = data.data.totalCount this.tableData = data.data.achievements.list
// } this.total = data.data.achievements.total
// setTimeout(() => { if (this.listquery.page == 1) {
// this.loading = false this.information = {
// }, 300) orderSum: data.data.orderSum, //订单总量
// }) totalReceivables: data.data.totalReceivables, //应收金额
discount: data.data.discount, //优惠金额
actual: data.data.actual //实收金额
}
}
} else {
this.tableData = data.data.list
this.total = data.data.total
}
}
setTimeout(() => {
this.loading = false
}, 300)
})
}, },
//导出 //导出
downloadExcel() { downloadExcel() {
this.excelLoading = true this.excelLoading = true
var u = navigator.userAgent,
app = navigator.appVersion
excel(this.listquery, { responseType: 'arraybuffer' }).then(res => {
const content = res
const blob = new Blob([content], {
type: 'application/vnd.ms-excel'
})
const fileName = '报表.xlsx'
if (u.indexOf('Edge') > -1) {
window.navigator.msSaveBlob(blob, fileName)
} else {
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
}
this.excelLoading = false
})
} }
} }
} }
...@@ -197,9 +284,15 @@ export default { ...@@ -197,9 +284,15 @@ export default {
list-style: none; list-style: none;
text-align: center; text-align: center;
float: left; float: left;
width: 33.33%;
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
.information .first li {
width: 25%;
}
.information .second li {
width: 33%;
}
.information li:last-child { .information li:last-child {
border: none; border: none;
} }
......
...@@ -10,8 +10,6 @@ ...@@ -10,8 +10,6 @@
<el-form-item label="手机号"> <el-form-item label="手机号">
<el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input> <el-input v-model.number="listQuery.phone" placeholder="请输入手机号"></el-input>
</el-form-item> </el-form-item>
<el-col :span="5"></el-col>
<el-col :span="5"></el-col>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button> <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="clearFilter">清除搜索</el-button> <el-button class="filter-item" type="primary" v-waves icon="search" @click="clearFilter">清除搜索</el-button>
</el-row> </el-row>
......
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<div class="filter-container"> <div class="filter-container">
<el-form ref="queryForm" :inline="true" :model="listQuery"> <el-form ref="queryForm" :inline="true" :model="listQuery" label-width="100px">
<el-row> <el-row>
<el-form-item label="手机号"> <el-form-item label="手机号">
<el-input v-model.number="listQuery.mobile" placeholder="请输入手机号"></el-input> <el-input v-model.number="listQuery.mobile" placeholder="请输入手机号"></el-input>
......
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<div class="filter-container"> <div class="filter-container">
<el-form> <el-form>
<el-row> <el-row>
<el-col :span="5">
<el-form-item label="车辆编码" prop="code">
<el-input type="number" style="width: 200px;" v-model.number="listQuery.code"
placeholder="请输入车辆编码"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="车牌号" prop="code">
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="车牌号"
v-model="listQuery.numberPlate"></el-input>
</el-form-item>
</el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="出车日期" prop="startTime"> <el-form-item label="车辆编码" prop="code">
<el-date-picker <el-input
v-model="listQuery.startTime" type="number"
type="date" style="width: 200px;"
:editable="false" v-model.number="listQuery.code"
format="yyyy-MM-dd" placeholder="请输入车辆编码"
prop="startTime" ></el-input>
placeholder="请选择出车日期"> </el-form-item>
</el-date-picker>
</el-form-item>
</el-col> </el-col>
<el-col :span="5">
<el-form-item label="车牌号" prop="code">
<el-input
@keyup.enter.native="handleFilter"
style="width: 200px;"
class="filter-item"
placeholder="车牌号"
v-model="listQuery.numberPlate"
></el-input>
</el-form-item>
</el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="还车日期" prop="endTime"> <el-form-item label="出车日期" prop="startTime">
<el-date-picker <el-date-picker
v-model="listQuery.endTime" v-model="listQuery.startTime"
type="date" type="date"
:editable="false" :editable="false"
format="yyyy-MM-dd" format="yyyy-MM-dd"
prop="endTime" prop="startTime"
placeholder="请选择还车日期"> placeholder="请选择出车日期"
</el-date-picker> ></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="分公司" prop="departureId">
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div v-show="statisticVisiable">
<el-row style="text-align: center;margin-top: 10px;margin-bottom: 10px">
<el-col :span="8">
<span class="statistic_number">{{statisticData.departureCount}}</span>
<br><br>
<span class="statistic_title">出行次数</span>
</el-col>
<el-col :span="8">
<span class="statistic_number">{{statisticData.departureDay}}</span>
<br><br>
<span class="statistic_title">出行天数</span>
</el-col>
<el-col :span="8">
<span class="statistic_number">{{statisticData.departureMileage}}</span>
<br><br>
<span class="statistic_title">公里</span>
</el-col>
</el-row>
</div>
<el-button class="filter-item" type="primary" :icon=" showMoreMoreCol ? 'caret-left' : 'caret-right' " v-waves
@click="showMoreMoreCol=!showMoreMoreCol">
更多列
</el-button>
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
style="width: 100%">
<el-table-column
type="index"
label="编号"
width="65">
</el-table-column>
<!-- <el-table-column align="center" label="编号" width="65">
--> <!--<template scope="scope">-->
<!--<span>{{scope.row.id}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column align="center" label="车牌号" width="120">
<template scope="scope">
<span>{{scope.row.numberPlate}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="出车时间">
<template scope="scope">
<span>{{scope.row.departureTime}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="使用人">
<template scope="scope">
<span>{{scope.row.user}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="出车地点">
<template scope="scope">
<span>{{scope.row.departureName}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="还车时间">
<template scope="scope">
<span>{{scope.row.arrivalTime}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="还车人">
<template scope="scope">
<span>{{scope.row.recycleMan}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="还车地点">
<template scope="scope">
<span>{{scope.row.arrivalName}}</span>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="本次出行天数">
<template scope="scope">
<span>{{scope.row.departureDay}}</span>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="本次出行公里">
<template scope="scope">
<span>{{scope.row.mileage}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="验车人">
<template scope="scope">
<span>{{scope.row.checkMan}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="用途">
<template scope="scope">
<span>{{scope.row.use}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="使用人电话" v-if="showMoreMoreCol"> <el-col :span="5">
<template scope="scope"> <el-form-item label="还车日期" prop="endTime">
<span>{{scope.row.userTel}}</span> <el-date-picker
</template> v-model="listQuery.endTime"
</el-table-column> type="date"
:editable="false"
format="yyyy-MM-dd"
prop="endTime"
placeholder="请选择还车日期"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="出车公司" prop="departureId">
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="收车公司">
<el-autocomplete
class="inline-input"
v-model="arrivalBranchCompanyId"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="putCompanyChange"
></el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="5">
<!-- <el-form-item label="用途">
<el-select v-model="state1" filterable placeholder="请选择车辆用途">
<el-option
v-for="item in allCompaniesArr"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>-->
</el-col>
<el-col :span="5">
<el-form-item>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div v-show="statisticVisiable">
<el-row style="text-align: center;margin-top: 10px;margin-bottom: 10px">
<el-col :span="8">
<span class="statistic_number">{{statisticData.departureCount}}</span>
<br />
<br />
<span class="statistic_title">出行次数</span>
</el-col>
<el-col :span="8">
<span class="statistic_number">{{statisticData.departureDay}}</span>
<br />
<br />
<span class="statistic_title">出行天数</span>
</el-col>
<el-col :span="8">
<span class="statistic_number">{{statisticData.departureMileage}}</span>
<br />
<br />
<span class="statistic_title">公里</span>
</el-col>
</el-row>
</div>
<el-button
class="filter-item"
type="primary"
:icon=" showMoreMoreCol ? 'caret-left' : 'caret-right' "
v-waves
@click="showMoreMoreCol=!showMoreMoreCol"
>更多列</el-button>
<el-table
:key="tableKey"
:data="list"
v-loading.body="listLoading"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column type="index" label="编号" width="65"></el-table-column>
<!-- <el-table-column align="center" label="编号" width="65">
-->
<!--<template scope="scope">-->
<!--<span>{{scope.row.id}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column align="center" label="车牌号" width="120">
<template scope="scope">
<span>{{scope.row.numberPlate}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="预约出/收车时间">
<template scope="scope">
<span>{{scope.row.departureTime}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="实际出/收车时间">
<template scope="scope">
<span>{{scope.row.departureTime}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="出/收车公司">
<template scope="scope">
<p>{{scope.row.departureName}}</p>
<p>{{scope.row.arrivalName}}</p>
</template>
</el-table-column>
<el-table-column align="center" label="出/收车人">
<template scope="scope">
<span>{{scope.row.departureTime}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="出行天数/公里数">
<template scope="scope">
<p>{{scope.row.departureDay}}</p>
<p>{{scope.row.mileage}}</p>
</template>
</el-table-column>
<el-table-column align="center" label="客户/手机号">
<template scope="scope">
<p>{{scope.row.user}}</p>
<p>{{scope.row.userTel}}</p>
</template>
</el-table-column>
<el-table-column align="center" label="用途">
<template scope="scope">
<span>{{scope.row.use}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="备注">
<template scope="scope">
<span>{{scope.row.departureTime}}</span>
</template>
</el-table-column>
<!-- <el-table-column width="100" align="center" label="使用人">
<template scope="scope">
<span>{{scope.row.user}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="出车地点">
<template scope="scope">
<span>{{scope.row.departureName}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="还车时间">
<template scope="scope">
<span>{{scope.row.arrivalTime}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="还车人">
<template scope="scope">
<span>{{scope.row.recycleMan}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="还车地点">
<template scope="scope">
<span>{{scope.row.arrivalName}}</span>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="本次出行天数">
<template scope="scope">
<span>{{scope.row.departureDay}}</span>
</template>
</el-table-column>
<el-table-column width="150" align="center" label="本次出行公里">
<template scope="scope">
<span>{{scope.row.mileage}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="验车人">
<template scope="scope">
<span>{{scope.row.checkMan}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="用途">
<template scope="scope">
<span>{{scope.row.use}}</span>
</template>
</el-table-column>-->
<el-table-column width="200" align="center" label="验车人电话" v-if="showMoreMoreCol"> <!-- <el-table-column width="200" align="center" label="使用人电话" v-if="showMoreMoreCol">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.checkManTel}}</span> <span>{{scope.row.userTel}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="200" align="center" label="验车人电话" v-if="showMoreMoreCol">
<template scope="scope">
<span>{{scope.row.checkManTel}}</span>
</template>
</el-table-column>
<el-table-column width="100" align="center" label="开始公里数" v-if="showMoreMoreCol"> <el-table-column width="100" align="center" label="开始公里数" v-if="showMoreMoreCol">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.mileageStart}}</span> <span>{{scope.row.mileageStart}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="100" align="center" label="结束公里数" v-if="showMoreMoreCol"> <el-table-column width="100" align="center" label="结束公里数" v-if="showMoreMoreCol">
<template scope="scope"> <template scope="scope">
<span>{{scope.row.mileageEnd}}</span> <span>{{scope.row.mileageEnd}}</span>
</template> </template>
</el-table-column> </el-table-column>-->
</el-table> </el-table>
<div v-show="!listLoading" class="pagination-container"> <div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" @size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination> @current-change="handleCurrentChange"
</div> :current-page.sync="listQuery.page"
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
<!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">--> <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
<!-- <el-form :model="form" :rules="rules" ref="form" label-width="100px">--> <!-- <el-form :model="form" :rules="rules" ref="form" label-width="100px">-->
<!-- <el-form-item label="姓名" prop="name">--> <!-- <el-form-item label="姓名" prop="name">-->
<!-- <el-input v-model="form.name" placeholder="请输入姓名"></el-input>--> <!-- <el-input v-model="form.name" placeholder="请输入姓名"></el-input>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </el-form>--> <!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">--> <!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button @click="cancel('form')">取 消</el-button>--> <!-- <el-button @click="cancel('form')">取 消</el-button>-->
<!-- <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>--> <!-- <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>-->
<!-- <el-button v-else type="primary" @click="update('form')">确 定</el-button>--> <!-- <el-button v-else type="primary" @click="update('form')">确 定</el-button>-->
<!-- </div>--> <!-- </div>-->
<!-- </el-dialog>--> <!-- </el-dialog>-->
</div> </div>
</template> </template>
<style> <style>
.statistic_number { .statistic_number {
font-size: x-large; font-size: x-large;
font-weight: bolder; font-weight: bolder;
} }
.statistic_title { .statistic_title {
font-size: x-large; font-size: x-large;
} }
</style> </style>
<script> <script>
import {mapGetters} from 'vuex'; import { mapGetters } from 'vuex'
import { import {
page, page,
statistic statistic,
} from '../../../api/vehicle/departureLog'; findReserveType
import { } from '../../../api/vehicle/departureLog'
getAllCompany, import { getAllCompany, getAll } from 'api/base_info/branch_company/'
getAll import { getAllZone } from 'api/base_info/constant/'
} from 'api/base_info/branch_company/'; import { getAllBranchCompanyByZoneId } from 'api/order/rentVehicle'
import { import {
getAllZone toEast8Date,
} from 'api/base_info/constant/'; deepCopyDate,
import { newEast8Date,
getAllBranchCompanyByZoneId getYMD_date
} from 'api/order/rentVehicle'; } from 'utils/dateUtils'
import { export default {
toEast8Date, name: 'vehicleDepartureLog',
deepCopyDate, data() {
newEast8Date, return {
getYMD_date showMoreMoreCol: false,
} from 'utils/dateUtils'; form: {
export default { id: null,
name: 'vehicleDepartureLog', numberPlate: null,
data() { vehicleId: null,
return { use: null,
showMoreMoreCol: false, user: null,
form: { userTel: null,
id: null, checkMan: null,
numberPlate: null, checkManTel: null,
vehicleId: null, recycleMan: null,
use: null, recycleManTel: null,
user: null, departureTime: null,
userTel: null, arrivalTime: null,
checkMan: null, mileageStart: null,
checkManTel: null, mileageEnd: null,
recycleMan: null, state: null,
recycleManTel: null, allCompaniesArr: [],
departureTime: null, selectArry: []
arrivalTime: null, },
mileageStart: null, rules: {
mileageEnd: null, name: [
state: null, {
allCompaniesArr:[], required: true,
selectArry: [], message: '请输入用户',
}, trigger: 'blur'
rules: { }
name: [ ]
{ },
required: true, list: null,
message: '请输入用户', total: null,
trigger: 'blur' listLoading: true,
} allBranchCompany: [],
] baranchQuery: {
}, zoneId: null
list: null, },
total: null, allZoneArr: [], //全部片区
listLoading: true, state1: '',
allBranchCompany:[], arrivalBranchCompanyId:null,
baranchQuery: { listQuery: {
zoneId:null page: 1,
}, limit: 20,
allZoneArr:[],//全部片区 startTime: undefined,
state1:'', endTime: undefined,
listQuery: { numberPlate: undefined,
page: 1, departureId: undefined,
limit: 20, arrivalBranchCompanyId: null
startTime: undefined, },
endTime:undefined, dialogStatus: '',
numberPlate: undefined, textMap: {
departureId:undefined, update: '编辑',
}, create: '创建'
dialogStatus: '', },
textMap: { tableKey: 0,
update: '编辑', dialogFormVisible: null,
create: '创建' statisticVisiable: true,
}, statisticData: {
tableKey: 0, departureCount: null,
dialogFormVisible: null, departureDay: null,
statisticVisiable: true, departureMileage: null
statisticData: { }
departureCount: null, }
departureDay: null, },
departureMileage: null created() {
} let t = this
} const numberPlate = this.$route.query.numberPlate
}, if (numberPlate) {
created() { this.listQuery.numberPlate = numberPlate
let t = this; }
const numberPlate = this.$route.query.numberPlate; getAll().then(response => {
if (numberPlate) { this.allCompaniesArr = response.data
this.listQuery.numberPlate = numberPlate; let query = localStorage.getItem('vehicleDepartureLog')
} if (query != 'null' && query && !numberPlate) {
getAll() .then(response => { this.listQuery = JSON.parse(query)
this.allCompaniesArr = response.data; if (t.listQuery.departureId) {
let query = localStorage.getItem("vehicleDepartureLog"); t.allCompaniesArr.map(function(item) {
if(query !="null" && query && !numberPlate){ if (item.id == t.listQuery.departureId) {
this.listQuery = JSON.parse(query); t.state1 = item.name
if(t.listQuery.departureId){ }
t.allCompaniesArr.map(function (item) { })
if(item.id == t.listQuery.departureId){ }
t.state1 = item.name; }
} t.handleFilter()
}); })
} },
} computed: {
t.handleFilter(); ...mapGetters(['elements']),
}) //获取大区列表
}, getAllZoneList() {
computed: { return getAllZone()
...mapGetters([ }
'elements' },
]), methods: {
//获取大区列表 //收车公司筛选
getAllZoneList() { putCompanyChange(val) {
return getAllZone(); console.log(val)
}, if (val) {
}, this.listQuery.arrivalBranchCompanyId = val.id
methods: { } else {
/** this.listQuery.arrivalBranchCompanyId = null
* 重置 }
* */ },
reloadPage() { /**
this.state1=''; * 重置
this.listQuery = { * */
page: 1, reloadPage() {
limit: 20, this.state1 = ''
startTime: undefined, this.arrivalBranchCompanyId = null
endTime:undefined, this.listQuery = {
numberPlate: undefined, page: 1,
departureId:undefined, limit: 20,
}; startTime: undefined,
if(this.listQuery){ endTime: undefined,
localStorage.setItem("vehicleDepartureLog", JSON.stringify(this.listQuery)); numberPlate: undefined,
} departureId: undefined,
this.handleFilter(); arrivalBranchCompanyId: undefined
}, }
handleFilter() { if (this.listQuery) {
this.listQuery.page = 1 localStorage.setItem(
if(this.listQuery){ 'vehicleDepartureLog',
localStorage.setItem("vehicleDepartureLog", JSON.stringify(this.listQuery)); JSON.stringify(this.listQuery)
} )
this.getList(); }
if (this.listQuery.numberPlate) { this.handleFilter()
statistic({numberPlate: this.listQuery.numberPlate}).then(response => { },
this.statisticData = response.data; handleFilter() {
}); this.listQuery.page = 1
this.statisticVisiable = true; if (this.listQuery) {
} localStorage.setItem(
}, 'vehicleDepartureLog',
dateToString: function (date) { JSON.stringify(this.listQuery)
var year = date.getFullYear(); )
var month = (date.getMonth() + 1).toString(); }
var day = (date.getDate()).toString(); this.getList()
if (month.length == 1) { if (this.listQuery.numberPlate) {
month = "0" + month; statistic({ numberPlate: this.listQuery.numberPlate }).then(
} response => {
if (day.length == 1) { if (response.status == 200) {
day = "0" + day; this.statisticData = response.data
} this.statisticVisiable = true
var dateTime = year + "-" + month + "-" + day; } else {
return dateTime; this.$message(response.message)
}, }
getList() { }
this.listLoading = true; )
if (!this.listQuery.numberPlate) { }
this.statisticVisiable = false; },
} dateToString: function(date) {
if (this.listQuery.startTime) { var year = date.getFullYear()
this.listQuery.startTime = getYMD_date(new Date(this.listQuery.startTime)); var month = (date.getMonth() + 1).toString()
} var day = date.getDate().toString()
if(this.listQuery.endTime) { if (month.length == 1) {
this.listQuery.endTime = getYMD_date(new Date(this.listQuery.endTime)); month = '0' + month
} }
if (!this.state1) { if (day.length == 1) {
this.listQuery.departureId = undefined; day = '0' + day
} }
page(this.listQuery) var dateTime = year + '-' + month + '-' + day
.then(response => { return dateTime
this.list = response.data.list; },
this.total = response.data.total; getList() {
this.listLoading = false; this.listLoading = true
}) if (!this.listQuery.numberPlate) {
}, this.statisticVisiable = false
querySearch(queryString, cb) { }
let selectArry = []; if (this.listQuery.startTime) {
let iitem = { this.listQuery.startTime = getYMD_date(
value: "全部", new Date(this.listQuery.startTime)
name: "全部" )
}; }
selectArry.push(iitem); if (this.listQuery.endTime) {
this.allCompaniesArr.map(function (item) { this.listQuery.endTime = getYMD_date(
item.value = item.name; new Date(this.listQuery.endTime)
selectArry.push(item); )
}); }
this.selectArry = selectArry; if (!this.state1) {
var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry; this.listQuery.departureId = undefined
// 调用 callback 返回建议列表的数据 }
cb(results); page(this.listQuery).then(response => {
}, this.list = response.data.list
createFilter(queryString) { this.total = response.data.total
return (restaurant) => { this.listLoading = false
return (restaurant.name.indexOf(queryString.toLowerCase()) != -1); })
}; },
}, querySearch(queryString, cb) {
handleSelect(item) { let selectArry = []
if (item.value == "全部") { let iitem = {
this.listQuery.departureId = undefined; value: '全部',
} else { name: '全部'
this.listQuery.departureId = item.id; }
} selectArry.push(iitem)
}, this.allCompaniesArr.map(function(item) {
handleSizeChange(val) { item.value = item.name
this.listQuery.limit = val; selectArry.push(item)
if(this.listQuery){ })
localStorage.setItem("vehicleDepartureLog", JSON.stringify(this.listQuery)); this.selectArry = selectArry
} var results = queryString
this.getList(); ? selectArry.filter(this.createFilter(queryString))
}, : selectArry
handleCurrentChange(val) { // 调用 callback 返回建议列表的数据
this.listQuery.page = val; cb(results)
if(this.listQuery){ },
localStorage.setItem("vehicleDepartureLog", JSON.stringify(this.listQuery)); createFilter(queryString) {
} return restaurant => {
this.getList(); return restaurant.name.indexOf(queryString.toLowerCase()) != -1
}, }
} },
} handleSelect(item) {
if (item.value == '全部') {
this.listQuery.departureId = undefined
} else {
this.listQuery.departureId = item.id
}
},
handleSizeChange(val) {
this.listQuery.limit = val
if (this.listQuery) {
localStorage.setItem(
'vehicleDepartureLog',
JSON.stringify(this.listQuery)
)
}
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
if (this.listQuery) {
localStorage.setItem(
'vehicleDepartureLog',
JSON.stringify(this.listQuery)
)
}
this.getList()
}
}
}
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment