商城订单统计

src/api/hisStore/statistics.js

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

src/views/hisStore/components/OrderSummaryTable.vue

@@ -9,8 +9,10 @@
       style="width: 100%; margin-top: 20px;"
       :row-class-name="tableRowClassName"
       :span-method="objectSpanMethod"
+      show-summary
+      :summary-method="getSummaries"
       >
-      <el-table-column prop="name" label="姓名/工号" width="150" class-name="sticky-column">
+      <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>
@@ -26,8 +28,8 @@
           {{ 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">
+      <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>
@@ -44,6 +46,12 @@
           {{ 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">
@@ -95,8 +103,25 @@ export default {
     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 }) {
@@ -111,8 +136,52 @@ export default {
         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>
 

src/views/hisStore/statistics/storeOrderStatatic.vue → src/views/hisStore/statistics/storeOrderStatistics.vue

@@ -4,7 +4,7 @@
       <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">
@@ -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">
@@ -80,41 +80,79 @@
 
 
 
+        <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 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="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">
           <!-- 使用组件替换原有表格 -->
           <order-summary-table 
             title="员工下单汇总" 
-            :table-data="tableData" />
+            :table-data="tableData" 
+            nameLable="员工姓名" />
             
           <order-summary-table 
             title="公司下单汇总" 
-            :table-data="companyTableData" />
+            :table-data="companyTableData" 
+            nameLable="公司" />
             
           <order-summary-table 
             title="部门下单汇总" 
-            :table-data="deptTableData" />
+            :table-data="deptTableData" 
+            nameLable="部门"/>
         </div>
       </div>
     </div>
@@ -124,9 +162,9 @@
 
 <script>
 import OrderSummaryTable from '../components/OrderSummaryTable';
-import { storeOrder } from "@/api/hisStore/statistics";
+import { storeOrderStatistics } from "@/api/hisStore/statistics";
 import { getUserListByDeptId} from "@/api/company/companyUser";
-import echarts from 'echarts'
+// import echarts from 'echarts'
 import resize from '../../dashboard/mixins/resize'
 import { treeselect } from "@/api/company/companyDept";
 import Treeselect from "@riophae/vue-treeselect";
@@ -142,6 +180,16 @@ export default {
   },
   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,
@@ -199,10 +247,10 @@ export default {
   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) => {
@@ -232,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()
         }
       });
     },
@@ -257,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]
@@ -276,18 +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;
+        this.tableData = response.userTableData || [];
         this.companyTableData = response.companyTableData || [];
         this.deptTableData = response.deptTableData || [];
 
-        setTimeout(() => {
-          this.initEchart();
-        }, 500);
+        // setTimeout(() => {
+        //   this.initEchart();
+        // }, 500);
       });
     },
     initEchart() {
@@ -367,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 {
@@ -396,6 +482,7 @@ export default {
           margin: 10px 0px;
         }
       }
+      
       // 新增表格样式
       .table-container {
         margin-top: 30px;