产品销售统计 添加 发货时间

src/views/hisStore/statistics/storeProduct.vue

@@ -4,7 +4,7 @@
       <div class="title">
         产品销售统计
       </div>
-      
+
       <el-form class="search-form" :inline="true">
         <el-row :gutter="20">
           <el-col :span="6">
@@ -48,81 +48,96 @@
               </el-select>
             </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-form-item>
-          <el-button type="cyan" icon="el-icon-search" @click="storeProduct">搜索</el-button>
-        </el-form-item>
+        </el-row>
+
+        <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: 205.4px"
+                              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">
+          </el-col>
+          <el-col :span="6">
+            <el-form-item>
+              <el-button type="cyan" icon="el-icon-search" @click="storeProduct">搜索</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-      
+
       <div class="data-box">
         <div class="echart-box">
           <div id="echart-customer"></div>
         </div>
-        
+
         <!-- 产品销售统计数据表格 -->
         <div class="table-container">
           <h3 class="table-title">产品销售汇总</h3>
           <!-- <div class="export">
             <el-button type="primary" @click="handleExport">导出数据</el-button>
           </div> -->
-          <el-table 
+          <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="100" align="center" 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 
-              v-for="orderType in orderTypeOptions" 
+            <el-table-column
+              v-for="orderType in orderTypeOptions"
               :key="orderType.dictValue"
-              :label="orderType.dictLabel" 
+              :label="orderType.dictLabel"
               align="center">
-              
+
               <!-- 数量子列 -->
-              <el-table-column 
-                label="数量" 
-                width="60" 
+              <el-table-column
+                label="数量"
+                width="60"
                 align="center">
                 <template slot-scope="scope">
                   {{ getOrderData(scope.row, orderType.dictValue, 'count') }}
                 </template>
               </el-table-column>
-              
+
               <!-- 金额子列 -->
-              <el-table-column 
-                label="金额" 
-                width="80" 
+              <el-table-column
+                label="金额"
+                width="80"
                 align="center">
                 <template slot-scope="scope">
                   {{ getOrderData(scope.row, orderType.dictValue, 'amount') }}
                 </template>
               </el-table-column>
-              
+
             </el-table-column>
-            
+
           </el-table>
         </div>
       </div>
@@ -150,6 +165,11 @@ export default {
   },
   data() {
     return {
+      queryTypes:[
+        { dictLabel: '下单时间', dictValue: 1 },
+        { dictLabel: '发货时间', dictValue: 2 }
+      ],
+      queryType: 2,
       companys: [],
       deptOptions: [],
       companyId: undefined,
@@ -208,7 +228,7 @@ export default {
         this.getTreeselect();
       }
     });
-    
+
     // 获取订单类型字典
     this.getDicts("store_order_type").then((response) => {
       this.orderTypeOptions = response.data;
@@ -269,27 +289,30 @@ export default {
         data.startTime = this.dateRange[0]
         data.endTime = this.dateRange[1]
       }
-      
+      if(this.queryType){
+        data.queryType = this.queryType
+      }
+
       storeProduct(data).then((response) => {
         this.dates = response.dates;
         this.orderCount = response.orderCount;
         this.payPrice = response.payPrice;
-        
+
         // 处理表格数据，补全缺失的订单类型数据
         this.tableData = this.processTableData(response.tableData || []);
-        
+
         setTimeout(() => {
           this.initEchart();
         }, 500);
       });
     },
-    
+
     // 新增方法：处理表格数据，为每个产品补全所有订单类型的数据
     processTableData(rawTableData) {
       return rawTableData.map(item => {
         // 创建一个新的 productCounts 对象，包含所有订单类型
         const processedProductCounts = {};
-        
+
         // 遍历所有订单类型选项，为每个类型设置默认值
         this.orderTypeOptions.forEach(orderType => {
           const dictValue = orderType.dictValue;
@@ -304,14 +327,14 @@ export default {
             };
           }
         });
-        
+
         return {
           ...item,
           productCounts: processedProductCounts
         };
       });
     },
-    
+
     initEchart() {
       var option = {
         tooltip: {
@@ -365,7 +388,7 @@ export default {
       this.chart = echarts.init(document.getElementById("echart-customer"));
       this.chart.setOption(option, true);
     },
-    
+
     // 修改获取订单数据的方法，适配新的数据结构
     getOrderData(row, orderType, dataType) {
       // 使用 productCounts 而不是 orderData
@@ -378,7 +401,7 @@ export default {
       }
       return dataType === 'amount' ? '0.00' : 0;
     },
-    
+
     // 表格行样式
     tableRowClassName({ row, rowIndex }) {
       if (row.isGroup) {
@@ -471,7 +494,7 @@ export default {
 
 ::v-deep .el-table {
   font-size: 12px;
-  
+
   .el-table__header-wrapper {
     th {
       background-color: #f5f7fa;
@@ -479,7 +502,7 @@ export default {
       color: #333;
     }
   }
-  
+
   .el-table__body-wrapper {
     td {
       padding: 8px 0;
@@ -492,7 +515,7 @@ export default {
   left: 0;
   z-index: 2;
   background-color: white;
-  
+
   // 为表头也添加样式
   &.is-header-column {
     background-color: #f5f7fa;
@@ -509,4 +532,4 @@ export default {
 .vue-treeselect__control {
   display: block;
 }
-</style>
+</style>