商城订单统计

src/api/hisStore/statistics.js

@@ -39,3 +39,11 @@ export function storeProduct(query) {
   })
 }
 
+ export function storeOrderStatistics(params) {
+    return request({
+      url: '/store/store/statistics/storeOrderStatistics',
+      method: 'get',
+      params
+    });
+  }
+

src/views/hisStore/components/OrderSummaryTable.vue

@@ -0,0 +1,199 @@
+<!-- src/components/OrderSummaryTable.vue -->
+<template>
+  <div class="table-container">
+    <h3 class="table-title">{{ title }}</h3>
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      style="width: 100%; margin-top: 20px;"
+      :row-class-name="tableRowClassName"
+      :span-method="objectSpanMethod"
+      show-summary
+      :summary-method="getSummaries"
+      >
+      <el-table-column prop="name" :label="nameLable" width="150" class-name="sticky-column" align="center">
+        <template slot-scope="scope">
+          <span :class="{'group-name': scope.row.isGroup}">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="totalCalls" label="总单数" width="80" align="center"></el-table-column>
+      <el-table-column prop="totalAmount" label="总金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.totalAmount ? scope.row.totalAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="validAmount" label="成单金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.validAmount ? scope.row.validAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="waitingOrders" label="待审数" width="80" align="center"></el-table-column>
+      <el-table-column prop="waitingAmount" label="待审金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.waitingAmount ? scope.row.waitingAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="unPassedOrders" label="未过数" width="80" align="center"></el-table-column>
+      <el-table-column prop="unPassedAmount" label="未过金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.unpassedAmount ? scope.row.unpassedAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="cancelOrders" label="取消数" width="80" align="center"></el-table-column>
+      <el-table-column prop="cancelAmount" label="取消金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.cancelAmount ? scope.row.cancelAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="completeOrders" label="成交数" width="120" align="center"></el-table-column>
+      <el-table-column prop="completeAmount" label="成交金额" width="130" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.completeAmount ? scope.row.completeAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="unshippedOrders" label="成交未发货数" width="120" align="center"></el-table-column>
+      <el-table-column prop="unshippedAmount" label="成交未发货金额" width="130" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.unshippedAmount ? scope.row.unshippedAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="shippedOrders" label="发货数" width="80" align="center"></el-table-column>
+      <el-table-column prop="shippedAmount" label="发货金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.shippedAmount ? scope.row.shippedAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="transitOrders" label="在途数" width="80" align="center"></el-table-column>
+      <el-table-column prop="transitAmount" label="在途金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.transitAmount ? scope.row.transitAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="receivedOrders" label="签收数" width="80" align="center"></el-table-column>
+      <el-table-column prop="receivedAmount" label="签收金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.receivedAmount ? scope.row.receivedAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="returnOrders" label="退货数" width="80" align="center"></el-table-column>
+      <el-table-column prop="returnAmount" label="退货金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.returnAmount ? scope.row.returnAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="paybackOrders" label="回款数" width="80" align="center"></el-table-column>
+      <el-table-column prop="paybackAmount" label="回款金额" width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.paybackAmount ? scope.row.paybackAmount.toFixed(2) : '0.00' }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderSummaryTable',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    nameLable: {  // 新增 prop
+      type: String,
+      default: '姓名/工号'
+    }
+  },
+  watch: {
+    tableData: {
+      handler(newVal) {
+        console.log('接收到的tableData:', newVal);
+        console.log('tableData长度:', newVal ? newVal.length : 0);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    console.log('组件挂载时的tableData:', this.tableData);
+    console.log('tableData长度:', this.tableData ? this.tableData.length : 0);
+  },
+  methods: {
+    // 表格行样式
+    tableRowClassName({ row, rowIndex }) {
+      if (row.isGroup) {
+        return 'group-row';
+      }
+      return '';
+    },
+    // 表格合并方法
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      return {
+        rowspan: 1,
+        colspan: 1
+      };
+    },
+    // 合计方法
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      const sumFields = ['totalCalls', 'totalAmount', 'validAmount', 'waitingOrders', 'waitingAmount',
+        'unPassedOrders', 'unPassedAmount', 'cancelOrders', 'cancelAmount', 'completeOrders',
+        'completeAmount', 'unshippedOrders', 'unshippedAmount', 'shippedOrders', 'shippedAmount',
+        'transitOrders', 'transitAmount', 'receivedOrders', 'receivedAmount', 'returnOrders',
+        'returnAmount', 'paybackOrders', 'paybackAmount'];
+      
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        
+        if (sumFields.includes(column.property)) {
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => Number.isNaN(value))) {
+            const sum = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!Number.isNaN(value)) {
+                return prev + value;
+              } else {
+                return prev;
+              }
+            }, 0);
+            
+            // 对于金额字段保留两位小数
+            if (column.property && column.property.includes('Amount')) {
+              sums[index] = sum.toFixed(2);
+            } else {
+              sums[index] = sum;
+            }
+          } else {
+            sums[index] = '0';
+          }
+        } else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    }
+  } 
+}
+</script>
+
+<style scoped>
+.table-container {
+  margin-top: 30px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+</style>

src/views/hisStore/statistics/storeOrderStatistics.vue

@@ -4,8 +4,8 @@
       <div class="title">
         商城订单统计
       </div>
-               <el-form class="search-form" :inline="true" >
-        
+      <el-form class="search-form" :inline="true" >
+
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="时间:">
@@ -33,7 +33,7 @@
           </el-col>
           <el-col :span="6">
             <el-form-item label="部门:">
-              <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+              <treeselect :clearable="true"  v-model="deptId"  :options="deptOptions" :show-count="true"  placeholder="请选择归属部门" />
             </el-form-item>
           </el-col>
           <el-col :span="6">
@@ -76,113 +76,83 @@
             </el-form-item>
           </el-col>
         </el-row>
-        
-       
-    
-        
 
 
-                
-        <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-row :gutter="20">
+          <el-col :span="6">
+            <!-- 查询方式 下单时间 发货时间 -->
+            <el-form-item label="下单时间:">
+              <el-select v-model="queryType" placeholder="查询方式" size="small">
+                <el-option
+                  v-for="item in queryTypes"
+                  :key="item.dictLabel"
+                  :label="item.dictLabel"
+                  :value="item.dictValue">
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="筛选日期" prop="createTime">
+              <el-date-picker clearable size="small" style="width: 220px"
+                v-model="dateRange"
+                type="daterange"
+                value-format="yyyy-MM-dd"
+                        start-placeholder="开始日期" end-placeholder="结束日期"
+                        >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <!-- 实收金额 金额等于0 金额大于0 -->
+            <el-form-item label="实收金额:">
+              <el-select v-model="amountType" placeholder="请选择金额" clearable size="small">
+                <el-option
+                  v-for="item in amountTypes"
+                  :key="item.dictLabel"
+                  :label="item.dictLabel"
+                  :value="item.dictValue">
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+          </el-col>
+          <el-col :span="6">
+
+          </el-col>
+        </el-row>
+
+
+        
         <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" plain   @click="storeOrder">搜索</el-button>
+                    <el-button type="primary" icon="el-icon-search" plain   @click="storeOrderStatistics">搜索</el-button>
         </el-form-item>
       </el-form>
       <div class="data-box">
-        <div class="echart-box">
+        <!-- <div class="echart-box">
           <div id="echart-customer"></div>
-        </div>
-        
+        </div> -->
+
         <!-- 新增的数据表格 -->
         <div class="table-container">
-          <h3 class="table-title">员工下单汇总</h3>
-          <el-table
-            :data="tableData" 
-            border 
-            stripe 
-            style="width: 100%; margin-top: 20px;"
-            :row-class-name="tableRowClassName"
-            :span-method="objectSpanMethod"
-            >
-            <el-table-column prop="name" label="姓名/工号" width="150" class-name="sticky-column">
-              <template slot-scope="scope">
-                <span :class="{'group-name': scope.row.isGroup}">{{ scope.row.name }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="totalCalls" label="总单数" width="80" align="center"></el-table-column>
-            <el-table-column prop="totalAmount" label="总金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.totalAmount ? scope.row.totalAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="validAmount" label="成单金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.validAmount ? scope.row.validAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="waitingOrders" label="待付数" width="80" align="center"></el-table-column>
-            <el-table-column prop="waitingAmount" label="待付金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.waitingAmount ? scope.row.waitingAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="unPassedOrders" label="未过数" width="80" align="center"></el-table-column>
-            <el-table-column prop="unPassedAmount" label="未过金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.unpassedAmount ? scope.row.unpassedAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="cancelOrders" label="取消数" width="80" align="center"></el-table-column>
-            <el-table-column prop="cancelAmount" label="取消金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.cancelAmount ? scope.row.cancelAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="unshippedOrders" label="成交未发货数" width="120" align="center"></el-table-column>
-            <el-table-column prop="unshippedAmount" label="成交未发货金额" width="130" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.unshippedAmount ? scope.row.unshippedAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="shippedOrders" label="发货数" width="80" align="center"></el-table-column>
-            <el-table-column prop="shippedAmount" label="发货金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.shippedAmount ? scope.row.shippedAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="transitOrders" label="在途数" width="80" align="center"></el-table-column>
-            <el-table-column prop="transitAmount" label="在途金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.transitAmount ? scope.row.transitAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="receivedOrders" label="签收数" width="80" align="center"></el-table-column>
-            <el-table-column prop="receivedAmount" label="签收金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.receivedAmount ? scope.row.receivedAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="returnOrders" label="退货数" width="80" align="center"></el-table-column>
-            <el-table-column prop="returnAmount" label="退货金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.returnAmount ? scope.row.returnAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="paybackOrders" label="回款数" width="80" align="center"></el-table-column>
-            <el-table-column prop="paybackAmount" label="回款金额" width="100" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.paybackAmount ? scope.row.paybackAmount.toFixed(2) : '0.00' }}
-              </template>
-            </el-table-column>
-          </el-table>
+          <!-- 使用组件替换原有表格 -->
+          <order-summary-table 
+            title="员工下单汇总" 
+            :table-data="tableData" 
+            nameLable="员工姓名" />
+            
+          <order-summary-table 
+            title="公司下单汇总" 
+            :table-data="companyTableData" 
+            nameLable="公司" />
+            
+          <order-summary-table 
+            title="部门下单汇总" 
+            :table-data="deptTableData" 
+            nameLable="部门"/>
         </div>
       </div>
     </div>
@@ -191,24 +161,35 @@
 </template>
 
 <script>
-import { storeOrder } from "@/api/hisStore/statistics";
+import OrderSummaryTable from '../components/OrderSummaryTable';
+import { storeOrderStatistics } from "@/api/hisStore/statistics";
 import { getUserListByDeptId} from "@/api/company/companyUser";
-import echarts from 'echarts';
-import resize from '../../dashboard/mixins/resize';
+// 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";
 import { getCompanyList } from "@/api/company/company";
 export default {
-  name: 'Index',
- mixins: [resize],
-  components: { Treeselect },
+  name: 'storeOrderStatatic',
+  mixins: [resize],
+  components: { Treeselect,OrderSummaryTable },
   watch: {
     // 监听deptId
     'deptId': 'currDeptChange'
   },
   data() {
     return {
+      queryTypes:[
+        { dictLabel: '下单时间', dictValue: 1 },
+        { dictLabel: '发货时间', dictValue: 2 }
+      ],
+      amountTypes:[
+        { dictLabel: '金额等于0', dictValue: 1 },
+        { dictLabel: '金额大于0', dictValue: 2 }
+      ],
+      queryType: 1,
+      amountType: null,
       companys: [],
       deptOptions: [],
       companyId: undefined,
@@ -258,16 +239,18 @@ export default {
       orderCount: [],
       payPrice: [],
       // 新增表格数据
-      tableData: []
+      tableData: [],        // 员工下单汇总
+      companyTableData: [], // 公司下单汇总
+      deptTableData: []     // 部门下单汇总
     }
   },
   created() {
     getCompanyList().then(response => {
       this.companys = response.data;
-      if (this.companys != null && this.companys.length > 0) {
-        this.companyId = this.companys[0].companyId;
-        this.getTreeselect();
-      }
+      // if (this.companys != null && this.companys.length > 0) {
+      //   this.companyId = this.companys[0].companyId;
+      //   this.getTreeselect();
+      // }
     });
     // 获取订单类型
     this.getDicts("store_order_type").then((response) => {
@@ -281,7 +264,6 @@ export default {
   methods: {
     companyChange(val) {
       console.log(val);
-      console.log("+++++++++++++++++++++++");
       this.companyId = val;
       this.getTreeselect();
     },
@@ -298,8 +280,8 @@ export default {
         this.deptOptions = response.data;
         console.log(this.deptOptions)
         if (response.data != null && response.data.length > 0) {
-          this.deptId = response.data[0].id;
-          that.storeOrder()
+          // this.deptId = response.data[0].id;
+          that.storeOrderStatistics()
         }
       });
     },
@@ -323,14 +305,22 @@ export default {
         this.users = response.data;
       });
     },
-    storeOrder() {
-      var data;
-      if (this.userIds != undefined) {
-        data = { type: this.value, userIds: this.userIds + "", deptId: this.deptId }
+    storeOrderStatistics() {
+      var data={};
+      if(this.value){
+        data.type = this.value
       }
-      else {
-        data = { type: this.value, deptId: this.deptId }
+      if(this.userIds){
+        data.companyUserId = this.userIds
+      }
+
+      if(this.queryType){
+        data.queryType = this.queryType
+      }
+      if(this.amountType){
+        data.amountType = this.amountType
       }
+
       if(this.dateRange && this.dateRange.length>0){
         data.type = null
         data.startTime = this.dateRange[0]
@@ -342,16 +332,24 @@ export default {
       if(this.orderMedium){
         data.orderMedium = this.orderMedium
       }
-      storeOrder(data).then((response) => {
+      if(this.companyId){
+        data.companyId = this.companyId
+      }
+      if(this.deptId){
+        data.deptId = this.deptId
+      }
+      storeOrderStatistics(data).then((response) => {
         this.dates = response.dates;
         this.orderCount = response.orderCount;
         this.payPrice = response.payPrice;
         //表格数据
-        this.tableData = response.tableData || this.tableData;
-        
-        setTimeout(() => {
-          this.initEchart();
-        }, 500);
+        this.tableData = response.userTableData || [];
+        this.companyTableData = response.companyTableData || [];
+        this.deptTableData = response.deptTableData || [];
+
+        // setTimeout(() => {
+        //   this.initEchart();
+        // }, 500);
       });
     },
     initEchart() {
@@ -431,28 +429,52 @@ export default {
 .app-container {
   border: 1px solid #e6e6e6;
   padding: 12px;
+  height: calc(100vh - 24px); // 设置容器高度
+  display: flex;
+  flex-direction: column;
+  
   .app-content {
     background-color: white;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
     .title {
       padding: 20px 30px 0px 30px;
       font-size: 18px;
       font-weight: bold;
       color: black;
     }
+    
     .search-form {
       margin: 20px 30px 0px 30px;
+      position: sticky;
+      top: 0;
+      background-color: white;
+      z-index: 100;
+      padding: 20px 30px 0px 30px;
+      margin: 0 30px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      flex-shrink: 0; // 防止收缩
     }
+    
     .data-box {
       padding: 30px;
       background-color: rgb(255, 255, 255);
+      flex: 1;
+      overflow-y: auto; // 添加垂直滚动条
       height: 100%;
+      
       .echart-box {
         margin: 0 auto;
         text-align: center;
       }
+      
       .el-select {
         margin: 5px 10px;
       }
+      
       .table-box {
         margin-top: 15px;
         .export {
@@ -460,6 +482,7 @@ export default {
           margin: 10px 0px;
         }
       }
+      
       // 新增表格样式
       .table-container {
         margin-top: 30px;
@@ -497,7 +520,7 @@ export default {
 
 ::v-deep .el-table {
   font-size: 12px;
-  
+
   .el-table__header-wrapper {
     th {
       background-color: #f5f7fa;
@@ -505,7 +528,7 @@ export default {
       color: #333;
     }
   }
-  
+
   .el-table__body-wrapper {
     td {
       padding: 8px 0;
@@ -518,7 +541,7 @@ export default {
   left: 0;
   z-index: 2;
   background-color: white;
-  
+
   // 为表头也添加样式
   &.is-header-column {
     background-color: #f5f7fa;
@@ -535,4 +558,4 @@ export default {
 .vue-treeselect__control {
   display: block;
 }
-</style>
+</style>