480 行
21 KiB
HTML
可执行文件
480 行
21 KiB
HTML
可执行文件
<!doctype html>
|
|
<html>
|
|
<!--[1.8.68]-->
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>销售报表</title>
|
|
<link rel="stylesheet" href="__PUBLIC__/vue/element-ui.css">
|
|
<link rel="stylesheet" href="/Public/Retail/css/order-details.css">
|
|
<link rel="stylesheet" href="/Public/css/page-common.css">
|
|
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
|
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
|
<script src="__PUBLIC__/vue/element-ui.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="/Public/js/common.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="/Public/js/drawer.js"></script>
|
|
<link rel="stylesheet" href="/Public/css/component-serial.css">
|
|
<link rel="stylesheet" href="/Public/css/component-serial-modify-record.css">
|
|
<script src="/Public/js/component-serial.js?v=1.0.0"></script>
|
|
<script src="/Public/js/component-serial-modify-record.js?v=1.0.0"></script>
|
|
<script src="/Public/Retail/js/order-details.js"></script>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
.center-content {
|
|
margin: 10px 0px 10px 30px;
|
|
}
|
|
|
|
.table-title {
|
|
width: 100%;
|
|
height: 30px;
|
|
text-indent: 20px;
|
|
line-height: 30px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.time {
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin: auto 1px;
|
|
}
|
|
|
|
.demo-table-expand {
|
|
font-size: 0;
|
|
}
|
|
|
|
.demo-table-expand label {
|
|
width: 90px;
|
|
color: #99a9bf;
|
|
}
|
|
|
|
.demo-table-expand .el-form-item {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.seek {
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="statisticsApp" v-cloak style="width: 100%" v-loading="exportLoading">
|
|
<el-radio-group v-model="quick_time" size="small" @change="createdTime">
|
|
<el-radio-button :label="1">日销售</el-radio-button>
|
|
<el-radio-button :label="2">周销售</el-radio-button>
|
|
<el-radio-button :label="3">月销售</el-radio-button>
|
|
<el-radio-button :label="4">年销售</el-radio-button>
|
|
</el-radio-group>
|
|
<div style="display: flex;padding-bottom: 10px;flex-wrap: wrap;">
|
|
<div class="seek">
|
|
<el-date-picker :editable="false" v-model="seek_data.start_time" type="datetime" placeholder="起始时间"
|
|
value-format="yyyy-MM-dd HH:mm:ss" size="small" @change="quick_time=''" style="width: 220px;">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="seek">
|
|
<el-date-picker :editable="false" v-model="seek_data.end_time" type="datetime" placeholder="截止时间"
|
|
value-format="yyyy-MM-dd HH:mm:ss" size="small" @change="quick_time=''" style="width: 220px;">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="seek">
|
|
<el-input v-model="seek_data.order_id" placeholder="订单号" clearable size="small" style="width: 220px;">
|
|
</el-input>
|
|
</div>
|
|
<div class="seek">
|
|
<el-select v-model="seek_data.guide_id" clearable placeholder="导购员" size="small" style="width: 220px;">
|
|
<el-option v-for="(val,index) in guide" :label="val.guidename" :value="val.id" :key="index">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="seek">
|
|
<el-select v-model="seek_data.order_mold" clearable placeholder="类型" size="small" style="width: 220px;">
|
|
<el-option v-for="(val,index) in sell_status" :label="val.name" :value="val.status" :key="index">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="seek">
|
|
<el-button type="primary" @click="seek" size="small">查询</el-button>
|
|
</div>
|
|
<div class="seek">
|
|
<el-button type="primary" @click="reset" plain size="small">重置</el-button>
|
|
</div>
|
|
<div class="seek">
|
|
<el-button @click="exportExcel" size="small">导出</el-button>
|
|
</div>
|
|
</div>
|
|
<el-row :gutter="12" style="margin-bottom: 20px">
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">销售笔数</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{sell_num}}</span>
|
|
<span class="time">（笔）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">销售金额</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{sell_money}}</span>
|
|
<span class="time">（元）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">退款笔数</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{refund_num}}</span>
|
|
<span class="time">（笔）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">退款金额</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{refund_money}}</span>
|
|
<span class="time">（元）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">实售金额</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{income}}</span>
|
|
<span class="time">（元）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">销售成本</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{cost}}</span>
|
|
<span class="time">（元）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">盈利合计</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{profit}}</span>
|
|
<span class="time">（元）</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-card shadow="always" :body-style="{ padding: '0px' }">
|
|
<div style="padding: 14px;">
|
|
<span style="color: #999;">销售利润率</span>
|
|
<div class="bottom clearfix">
|
|
<span class="time">{{profit_margin}}</span>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<el-table :data="bill_list" :highlight-current-row="true" border size="mini" max-height="500">
|
|
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
|
|
<el-table-column prop="order_mold" label="类型"></el-table-column>
|
|
<el-table-column prop="order_no" label="订单号" :show-overflow-tooltip="true" width="200">
|
|
</el-table-column>
|
|
<el-table-column prop="add_time" label="售出时间" :show-overflow-tooltip="true" width="180">
|
|
</el-table-column>
|
|
<el-table-column prop="consumer_object" label="消费对象" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="guide_name" label="导购" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="pay_name" label="支付方式"></el-table-column>
|
|
<el-table-column prop="all_money" label="支付金额" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="purchase_price" label="成本合计"></el-table-column>
|
|
<el-table-column prop="coupon_money" label="优惠券"></el-table-column>
|
|
<el-table-column prop="pay_coupon_fee" label="代金券" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="small_changes_money" label="抹零"></el-table-column>
|
|
<el-table-column prop="dismoney" label="会员折扣"></el-table-column>
|
|
<el-table-column prop="discount_remark" label="收银折扣" :show-overflow-tooltip="true" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="delivery_fee" label="配送费" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="profit" label="利润" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="profit_margin" label="利润率" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column label="操作" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini"
|
|
@click="showOrderDetails=true;details_order_no=scope.row.order_no">订单详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<div slot="empty" v-if="!loading">暂无数据</div>
|
|
<div slot="empty" v-else><span class="el-icon-loading"></span></div>
|
|
</el-table>
|
|
<el-pagination @size-change="sell_size_change" @current-change="sell_current_change"
|
|
layout="total, sizes, prev, pager, next, jumper" :pager-count="5"
|
|
:page-sizes="[10,20,30,40,50,60,70,80,90]" :page-size="10" :total="total">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
<!--订单详情-->
|
|
<order-details :show.sync="showOrderDetails"
|
|
:change-serial-number="false"
|
|
:drawer-height="'100vh'"
|
|
:order-no="details_order_no"></order-details>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var statisticsApp = new Vue({
|
|
el: '#statisticsApp',
|
|
data: function () {
|
|
return {
|
|
details_order_no: '',
|
|
showOrderDetails: false,
|
|
quick_time: '', //快速设置查询时间
|
|
store_id: '', // 门店id
|
|
bill_list: [], // 销售数据
|
|
page: 1, // 分页
|
|
limit: 10, // 每页显示条数
|
|
total: 0, // 总数 int类型
|
|
class_data: [], // 分类数据
|
|
supplier: [], // 供货商
|
|
goods_brand: [], // 商品品牌
|
|
guide: [], // 导购员
|
|
seek_data: { // 搜索数据
|
|
order_id: '', // 订单号搜索
|
|
start_time: '', // 起始时间
|
|
end_time: '', // 截止时间
|
|
guide_id: '', // 导购员id
|
|
order_mold: '', // 销售类型 1 销售 2 退款
|
|
},
|
|
sell_num: 0, // 销售笔数
|
|
sell_money: 0, // 销售金额
|
|
refund_num: 0, // 退款笔数
|
|
refund_money: 0, // 退款金额
|
|
income: 0, // 收入
|
|
cost: 0, // 成本
|
|
profit: 0, // 盈利
|
|
profit_margin: '0%', // 利润率
|
|
show_details: false, // 显示详情
|
|
order_details: [], // 订单详情
|
|
sell_status: [ // 销售类型
|
|
{status: 1, name: '店内所有'},
|
|
{status: 2, name: '商城所有'},
|
|
{status: 3, name: '店内销售'},
|
|
{status: 4, name: '商城销售'},
|
|
{status: 5, name: '店内退款'},
|
|
{status: 6, name: '商城退款'}],
|
|
loading: false,
|
|
exportLoading: false,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
//快速生成时间
|
|
createdTime(val) {
|
|
let date = new Date();
|
|
let y = date.getFullYear();
|
|
let m = date.getMonth() + 1;
|
|
let d = date.getDate();
|
|
let h = date.getHours();
|
|
let i = date.getMinutes();
|
|
let s = date.getSeconds();
|
|
let start_time = '';
|
|
let end_time = `${y}-${m}-${d} ${h}:${i}:${s}`;
|
|
switch (val) {
|
|
case 1:
|
|
start_time = `${y}-${m}-${d} 00:00:00`;
|
|
break;
|
|
case 2:
|
|
let w = date.getDay();
|
|
let t = date.getTime();
|
|
let newT = t - (w - 1) * 24 * 60 * 60 * 1000;
|
|
let newDate = new Date(newT);
|
|
start_time = `${newDate.getFullYear()}-${newDate.getMonth() + 1}-${newDate.getDate()} 00:00:00`;
|
|
break;
|
|
case 3:
|
|
start_time = `${y}-${m}-01 00:00:00`;
|
|
break;
|
|
case 4:
|
|
start_time = `${y}-01-01 00:00:00`;
|
|
break;
|
|
}
|
|
this.seek_data.start_time = start_time;
|
|
this.seek_data.end_time = end_time;
|
|
this.$nextTick(() => {
|
|
this.get_bill_list();
|
|
})
|
|
},
|
|
/* 获取搜索条件(导购员列表) */
|
|
get_seek_list() {
|
|
$.ajax({
|
|
url: "{:U('get_seek_list')}",
|
|
type: "post",
|
|
data: {store_id: this.store_id},
|
|
success: (res) => {
|
|
this.guide = res.guide;
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 获取销售数据 */
|
|
get_bill_list() {
|
|
this.bill_list = [];
|
|
this.loading = true;
|
|
$.ajax({
|
|
url: "{:U('getBillList')}",
|
|
type: "post",
|
|
data: {
|
|
store_id: this.store_id,
|
|
page: this.page,
|
|
limit: this.limit,
|
|
seek_data: this.seek_data,
|
|
},
|
|
success: (res) => {
|
|
this.loading = false;
|
|
if (res.status == 1) {
|
|
this.total = res.total;
|
|
this.bill_list = res.bill_list;
|
|
this.sell_num = res.sell_num;
|
|
this.sell_money = res.sell_money;
|
|
this.refund_num = res.refund_num;
|
|
this.refund_money = res.refund_money;
|
|
this.income = res.income;
|
|
this.cost = res.cost;
|
|
this.profit = res.profit;
|
|
this.profit_margin = res.profit_margin;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 重置表单 */
|
|
reset() {
|
|
this.page = 1;
|
|
this.seek_data.order_id = '';
|
|
this.seek_data.start_time = '';
|
|
this.seek_data.end_time = '';
|
|
this.seek_data.guide_id = '';
|
|
this.seek_data.order_mold = '';
|
|
/* 重新加载 */
|
|
this.get_bill_list();
|
|
},
|
|
|
|
/* 快速搜索 */
|
|
seek() {
|
|
this.page = 1;
|
|
this.get_bill_list();
|
|
},
|
|
|
|
/* 切换每页数量 */
|
|
sell_size_change(val) {
|
|
this.limit = val;
|
|
this.page = 1;
|
|
this.get_bill_list();
|
|
},
|
|
|
|
/* 切换页数 */
|
|
sell_current_change(val) {
|
|
this.page = val;
|
|
this.get_bill_list();
|
|
},
|
|
|
|
/* 导出 */
|
|
exportExcel() {
|
|
if (!this.seek_data.order_id && !this.seek_data.start_time && !this.seek_data.end_time && !this.seek_data.guide_id && !this.seek_data.order_mold) {
|
|
this.$confirm('确定导出所有销售数据吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.exportTable(1, 1, '');
|
|
});
|
|
} else {
|
|
this.exportTable(1, 1, '');
|
|
}
|
|
},
|
|
exportTable(page = 1, type = 1, directory_name) {
|
|
this.exportLoading = true;
|
|
if (type == 1) {
|
|
$.ajax({
|
|
url: "{:U('sell_export')}",
|
|
type: 'POST',
|
|
data: {
|
|
page: page,
|
|
store_id: this.store_id,
|
|
seek_data: this.seek_data,
|
|
directory_name: directory_name,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
if (type == 1) {
|
|
this.exportTable(++page, res.type, res.directory_name);
|
|
} else {
|
|
this.exportLoading = false;
|
|
}
|
|
} else {
|
|
this.exportLoading = false;
|
|
this.$confirm(res.msg, '提示', {
|
|
confirmButtonText: '确定',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
|
|
}).catch(() => {
|
|
});
|
|
}
|
|
},
|
|
error: (res) => {
|
|
this.exportLoading = false;
|
|
}
|
|
});
|
|
} else {
|
|
this.exportLoading = false;
|
|
window.location.href = `{:U('sell_export')}?directory_name=${directory_name}`;
|
|
}
|
|
},
|
|
},
|
|
|
|
created() {
|
|
// 接受参数
|
|
var store_id = "{$store_id}";
|
|
if (!store_id || store_id == 0) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: '系统异常,请重新登录',
|
|
type: 'error'
|
|
});
|
|
return;
|
|
}
|
|
this.store_id = store_id;
|
|
this.get_seek_list();
|
|
this.get_bill_list();
|
|
},
|
|
})
|
|
</script>
|
|
|
|
</html> |