|
|
@@ -0,0 +1,146 @@
|
|
|
+<template>
|
|
|
+ <div class="shop-list">
|
|
|
+ <x-crud @load="onLoad">
|
|
|
+ <template #slot-date-select>
|
|
|
+ <el-date-picker v-model="currentDateList" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" @change="getDate" value-format="yyyy-MM-dd"
|
|
|
+ end-placeholder="结束日期" :picker-options="pickerOptions" size="mini"> </el-date-picker>
|
|
|
+ </template>
|
|
|
+ <template #slot-export-due>
|
|
|
+ <el-button type="primary" size="mini" style="margin-left:60px;" @click="exportData()">导出数据</el-button>
|
|
|
+ </template>
|
|
|
+ </x-crud>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ crud: null,
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近一周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ currentDateList:'',
|
|
|
+ startTime:'',
|
|
|
+ endTime:'',
|
|
|
+ searchTime:'',
|
|
|
+ totalAmount:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['shopInfo']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ exportData(){
|
|
|
+ this.$service.stat.getIncomeOutItem({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime,export:1}).then(res => {
|
|
|
+ if(res.file){
|
|
|
+ window.location.href = res.file
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
+ ctx.service({
|
|
|
+ page: () => {
|
|
|
+ return this.$service.stat.getIncomeOutItem({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime}).then((res) => {
|
|
|
+ let list = [
|
|
|
+ ...res.list,
|
|
|
+ {name:'物流打包费',income:0,expend:res.packFreight,profit:-res.packFreight},
|
|
|
+ {name:'采购仅退款',income:res.onlyRefundCg,expend:0,profit:res.onlyRefundCg},
|
|
|
+ {name:'销售仅退款',income:0,expend:res.onlyRefund,profit:-res.onlyRefund},
|
|
|
+ {name:'附加人工费',income:res.totalLabourCost,expend:0,profit:res.totalLabourCost},
|
|
|
+ {name:'优惠金额',income:-res.totalDiscountAmount,expend:0,profit:-res.totalDiscountAmount},
|
|
|
+ {name:'【汇总金额】',income:res.totalIncome,expend:res.totalExpend,profit:res.totalProfit}
|
|
|
+ ]
|
|
|
+ return {
|
|
|
+ list: list
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '销售收入',
|
|
|
+ prop: 'income',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '采购成本',
|
|
|
+ prop: 'expend',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '花材利润',
|
|
|
+ prop: 'profit',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ op: {
|
|
|
+ visible: true,
|
|
|
+ props: {
|
|
|
+ width: 250,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ layout: []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ [ 'slot-date-select',
|
|
|
+ 'slot-order-debt',
|
|
|
+ 'flex1',
|
|
|
+ 'slot-export-due',
|
|
|
+ 'refresh-btn',
|
|
|
+ ],
|
|
|
+ [ 'data-table' ],
|
|
|
+ ['flex1']
|
|
|
+ ])
|
|
|
+ .done();
|
|
|
+ app.refresh();
|
|
|
+ },
|
|
|
+ getDate(){
|
|
|
+ this.searchTime = 'custom'
|
|
|
+ this.startTime = this.currentDateList[0]
|
|
|
+ this.endTime = this.currentDateList[1]
|
|
|
+ this.app.refresh({searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime});
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+.shop-list {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|