售后订单统计

src/api/company/statistics.js

@@ -39,6 +39,14 @@ export function packageOrder(query) {
     params: query
   })
 }
+
+export function afterSalesOrder(query) {
+  return request({
+    url: '/company/statistics/afterSalesOrder',
+    method: 'get',
+    params: query
+  })
+}
 export function inquiryOrder(query) {
   return request({
     url: '/company/statistics/inquiryOrder',
@@ -62,6 +70,14 @@ export function exportPackageOrder(query) {
     params: query
   })
 }
+
+export function exportAfterSalesOrder(query) {
+  return request({
+    url: '/company/statistics/exportAfterSalesOrder',
+    method: 'get',
+    params: query
+  })
+}
 export function exportInquiryOrder(query) {
   return request({
     url: '/company/statistics/exportInquiryOrder',

src/views/his/statistics/afterSalesOrder.vue

@@ -0,0 +1,352 @@
+<template>
+    <div class="app-container">
+        <div class="app-content">
+             <div class="title">
+               售后订单统计
+            </div>
+           <el-form class="search-form" :inline="true" >
+            <el-form-item >
+              <el-select v-model="value" placeholder="请选择日期">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item >
+              <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+            </el-form-item>
+            <el-form-item>
+              <el-select filterable v-model="userIds" placeholder="请选择员工" clearable size="small">
+                  <el-option
+                    v-for="item in users"
+                    :key="item.userId"
+                    :label="item.nickName"
+                    :value="item.userId">
+                  </el-option>
+                </el-select>
+            </el-form-item>
+           <el-form-item label="下单日期" prop="createTime">
+                    <el-date-picker clearable size="small" style="width: 205.4px"
+                      v-model="dateRange"
+                      type="daterange"
+                      value-format="yyyy-MM-dd"
+                      start-placeholder="开始日期" end-placeholder="结束日期"
+                      >
+                    </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="cyan" icon="el-icon-search"   @click="afterSalesOrder">搜索</el-button>
+            </el-form-item>
+          </el-form>
+           <div class="data-box">
+              <div class="echart-box">
+                <div id="echart-customer"></div>
+              </div>
+              <div class="table-box">
+                    <el-button class="export" size="small"  @click="handleExport" >导出</el-button>
+                    <el-table
+                    :data="list"
+                    border
+                    :summary-method="getSummaries"
+                    show-summary
+                    max-height="500"
+                    style="width: 100%;">
+                    <el-table-column
+                      prop="nickName"
+                      label="员工姓名">
+                    </el-table-column>
+                    <el-table-column
+                      prop="orderCount"
+                      label="订单数">
+                    </el-table-column>
+                    <el-table-column
+                      prop="payPrice"
+                      label="订单金额">
+                    </el-table-column>
+  
+                  </el-table>
+              </div>
+          </div>
+        </div>
+  
+      </div>
+  </template>
+  
+  <script>
+  import { afterSalesOrder,exportAfterSalesOrder } from "@/api/company/statistics";
+  import { getUserListByDeptId} from "@/api/company/companyUser";
+  import echarts from 'echarts'
+  import resize from '../../dashboard/mixins/resize'
+  import { treeselect } from "@/api/company/companyDept";
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  
+  export default {
+  name: 'Index',
+  mixins: [resize],
+  components: { Treeselect },
+  watch: {
+  // 监听deptId
+  'deptId': 'currDeptChange'
+  },
+  data() {
+  return {
+   deptOptions:[],
+   deptId:undefined,
+   userIds:undefined,
+   users:[],
+   dateRange:[],
+   chart: null,
+   options: [{
+      value: '1',
+      label: '今天'
+    }, {
+      value: '2',
+      label: '昨天'
+    }, {
+      value: '3',
+      label: '本周'
+    }, {
+      value: '4',
+      label: '上周'
+    }, {
+      value: '5',
+      label: '本月'
+    }
+    , {
+      value: '6',
+      label: '上月'
+    }
+    , {
+      value: '7',
+      label: '本季度'
+    }
+    , {
+      value: '8',
+      label: '上季度'
+    }
+    , {
+      value: '9',
+      label: '本年'
+    }
+    , {
+      value: '10',
+      label: '上年'
+    }],
+    value: '5',
+    list:[],
+    dates:[],
+    orderCount:[],
+    payPrice:[],
+  
+  }
+  },
+  created() {
+  this.getTreeselect();
+  },
+  methods: {
+    currDeptChange(val){
+    console.log(val)
+    this.deptId=val;
+    this.getUserListByDeptId();
+  },
+  /** 查询部门下拉树结构 */
+  getTreeselect() {
+  var that=this;
+  treeselect().then((response) => {
+    this.deptOptions = response.data;
+    console.log(this.deptOptions)
+    if(response.data!=null&&response.data.length>0){
+      this.deptId=response.data[0].id;
+      that.afterSalesOrder()
+    }
+  });
+  },
+  handleExport(){
+    var data;
+    if(this.userIds!=undefined){
+        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
+    }
+    else{
+        data={type:this.value,deptId:this.deptId}
+    }
+    if(this.dateRange){
+        data.startTime = this.dateRange[0];
+        data.endTime = this.dateRange[1];
+      }
+    exportAfterSalesOrder(data).then((response) => {
+        console.log(response)
+       this.download(response.msg);
+    });
+  
+  },
+  getUserListByDeptId() {
+    this.userIds=undefined;
+    var data={deptId:this.deptId};
+    getUserListByDeptId(data).then(response => {
+      this.users = response.data;
+  
+    });
+  },
+  afterSalesOrder(){
+      var data;
+      if(this.userIds!=undefined){
+          data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
+      }
+      else{
+          data={type:this.value,deptId:this.deptId}
+      }
+      if(this.dateRange){
+        data.startTime = this.dateRange[0];
+        data.endTime = this.dateRange[1];
+      }
+      afterSalesOrder(data).then((response) => {
+       this.list=response.list;
+       this.dates=response.dates;
+       this.orderCount=response.orderCount;
+       this.payPrice=response.payPrice;
+        setTimeout(() => {
+          this.initEchart();
+        }, 500);
+    });
+  },
+  initEchart(){
+    var option = {
+      tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          }
+      },
+      legend: {
+          data: ['订单数', '订单金额' ]
+      },
+      grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+      },
+      xAxis: [
+          {
+              type: 'category',
+              data: this.dates
+          }
+      ],
+      yAxis: [
+          {
+              type: 'value',
+              axisLabel:{
+                formatter:'{value}'
+              }
+          }
+      ],
+      series: [
+          {
+  
+              name: '订单数',
+              type: 'line',
+              emphasis: {
+                  focus: 'series'
+              },
+              data: this.orderCount
+          },
+          {
+  
+              name: '订单金额',
+              type: 'line',
+              emphasis: {
+                  focus: 'series'
+              },
+              data: this.payPrice
+          }
+  
+      ]
+    };
+    this.chart=echarts.init(document.getElementById("echart-customer"));
+    this.chart.setOption(option,true);
+  },
+   getSummaries(param) {
+    const { columns, data } = param;
+    const sums = [];
+    columns.forEach((column, index) => {
+      if (index === 0) {
+        sums[index] = '总计';
+        return;
+      }
+      const values = data.map(item => Number(item[column.property]));
+      if (!values.every(value => isNaN(value))) {
+        const total = values.reduce((prev, curr) => {
+          const value = Number(curr);
+          return !isNaN(value) ? prev + curr : prev;
+        }, 0);
+        sums[index] = total.toFixed(2);
+      } else {
+        sums[index] = '';
+      }
+    });
+  
+    return sums;
+  }
+  }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .app-container{
+  border: 1px solid #e6e6e6;
+  padding: 12px;
+  
+  .app-content{
+  background-color: white;
+  .title{
+    padding: 20px 30px 0px 30px;
+    font-size: 18px;
+    font-weight: bold;
+    color: black;
+  
+  }
+  .search-form{
+    margin: 20px 30px 0px 30px;
+  }
+  .data-box{
+    padding: 30px;
+    background-color:  rgb(255, 255, 255);
+    height: 100%;
+  
+    .echart-box{
+      margin: 0 auto;
+      text-align: center;
+    }
+    .el-select{
+      margin: 5px 10px;
+    }
+    .table-box{
+      margin-top: 15px;
+      .export{
+        float: right;
+        margin: 10px 0px;
+      }
+    }
+  }
+  }
+  }
+  #echart-customer{
+  width:100%;
+  height:320px
+  }
+  .vue-treeselect{
+  width: 217px;
+  height: 36px;
+  }
+  
+  </style>
+  <style>
+  .vue-treeselect__control{
+  display: block;
+  }
+  </style>
+