396 行
18 KiB
HTML
可执行文件
396 行
18 KiB
HTML
可执行文件
<!--[1.8.68]-->
|
|
<style>
|
|
.time {
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin: auto 1px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/Public/Retail/css/order-details.css">
|
|
<link rel="stylesheet" href="/Public/css/component-serial.css">
|
|
<link rel="stylesheet" href="/Public/css/component-serial-modify-record.css">
|
|
<script src="/Public/Retail/js/order-details.js"></script>
|
|
<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>
|
|
<div id="app" 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>
|
|
|
|
<el-form :inline="true" size="small" style="margin-top: 10px">
|
|
<el-form-item>
|
|
<el-date-picker :editable="false" v-model="seek_data.start_time" type="datetime" placeholder="起始时间"
|
|
value-format="yyyy-MM-dd HH:mm:ss" @change="quick_time=''" style="width: 220px;">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-date-picker :editable="false" v-model="seek_data.end_time" type="datetime" placeholder="截止时间"
|
|
value-format="yyyy-MM-dd HH:mm:ss" @change="quick_time=''" style="width: 220px;">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input v-model="seek_data.order_id" class="page-input" placeholder="订单号" clearable style="width: 220px;">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="seek_data.guide_id" clearable placeholder="导购员">
|
|
<el-option v-for="(val,index) in guide" :label="val.guidename" :value="val.id" :key="index"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="seek_data.order_mold" clearable placeholder="类型">
|
|
<el-option v-for="(val,index) in sell_status" :label="val.name" :value="val.status" :key="index">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="seek">查询</el-button>
|
|
|
|
<el-button type="primary" plain @click="reset">重置</el-button>
|
|
|
|
<el-button @click="exportExcel">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="12" style="padding-bottom: 10px;">
|
|
<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>
|
|
<template>
|
|
<el-table :data="bill_list" :highlight-current-row="true" border size="small" 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 width="200">
|
|
</el-table-column>
|
|
<el-table-column prop="add_time" label="售出时间" show-overflow-tooltip width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="consumer_object" label="消费对象" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="guide_name" label="导购" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="pay_name" label="支付方式"></el-table-column>
|
|
<el-table-column prop="all_money" label="支付金额" show-overflow-tooltip></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 width="150"></el-table-column>
|
|
<el-table-column prop="delivery_fee" label="配送费" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="profit" label="利润" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="profit_margin" label="利润率" show-overflow-tooltip></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>
|
|
</template>
|
|
</div>
|
|
<!--订单详情-->
|
|
<order-details :show.sync="showOrderDetails" :order-no="details_order_no"></order-details>
|
|
</div>
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
quick_time: '', //快速设置查询时间
|
|
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%', // 利润率
|
|
details_order_no: '', // 显示详情
|
|
showOrderDetails: false, // 显示详情
|
|
order_details: [], // 订单详情
|
|
loading: false, // 加载
|
|
exportLoading: false, // 加载
|
|
sell_status: [ // 销售类型
|
|
{status: 1, name: '店内所有'},
|
|
{status: 2, name: '商城所有'},
|
|
{status: 3, name: '店内销售'},
|
|
{status: 4, name: '商城销售'},
|
|
{status: 5, name: '店内退款'},
|
|
{status: 6, name: '商城退款'}
|
|
],
|
|
};
|
|
},
|
|
|
|
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",
|
|
success: (res) => {
|
|
this.guide = res.guide;
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 获取销售数据 */
|
|
get_bill_list() {
|
|
this.bill_list = [];
|
|
this.loading = true;
|
|
$.ajax({
|
|
url: "{:U('get_bill_list')}",
|
|
type: "post",
|
|
data: {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;
|
|
this.loadingText = '文件生成中，请耐心等待';
|
|
if (type == 1) {
|
|
$.ajax({
|
|
url: "{:U('sell_export')}",
|
|
type: 'POST',
|
|
data: {
|
|
page: page,
|
|
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: function () {
|
|
this.get_seek_list();
|
|
this.get_bill_list();
|
|
},
|
|
})
|
|
</script> |