订单统计

src/views/store/statistics/storeOrder.vue

@@ -1,66 +1,149 @@
 <template>
-        <div class="app-container">
-            <div class="app-content">
-                 <div class="title">
-                    商城订单统计
-                </div>
+  <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 label="公司名" prop="companyId">
-                    <el-select filterable v-model="companyId" @change="companyChange" placeholder="请选择公司名" clearable size="small">
-                        <el-option
-                          v-for="item in companys"
-                          :key="item.companyId"
-                          :label="item.companyName"
-                          :value="item.companyId"
-                        />
-                  </el-select>
-                </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 label="公司名" prop="companyId">
+          <el-select filterable v-model="companyId" @change="companyChange" placeholder="请选择公司名" clearable size="small">
+            <el-option
+              v-for="item in companys"
+              :key="item.companyId"
+              :label="item.companyName"
+              :value="item.companyId"
+            />
+          </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>
+        <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"
+        <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-date-picker>
+        </el-form-item>
+        <el-form-item>
                     <el-button type="cyan" icon="el-icon-search"   @click="storeOrder">搜索</el-button>
-                </el-form-item>
-              </el-form>
-               <div class="data-box">
-                  <div class="echart-box">
-                    <div id="echart-customer"></div>
-                  </div>
-              </div>
-            </div>
+        </el-form-item>
+      </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>
+          <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="120" fixed="left">
+              <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>
+        </div>
+      </div>
+    </div>
 
-          </div>
+  </div>
 </template>
 
 <script>
@@ -82,241 +165,294 @@ export default {
   },
   data() {
     return {
-       companys:[],
-       deptOptions:[],
-       companyId:undefined,
-       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: '上年'
-        }],
+      companys: [],
+      deptOptions: [],
+      companyId: undefined,
+      deptId: undefined,
+      userIds: undefined,
+      users: [],
+      dateRange: [],
+      chart: null,
+      options: [{
+        value: '1',
+        label: '今天'
+      }, {
+        value: '2',
+        label: '昨天'
+      }, {
+        value: '3',
+        label: '本周'
+      }, {
+        value: '4',
+        label: '上周'
+      }, {
         value: '5',
-        list:[],
-        dates:[],
-        orderCount:[],
-        payPrice:[]
-
-
+        label: '本月'
+      }, {
+        value: '6',
+        label: '上月'
+      }, {
+        value: '7',
+        label: '本季度'
+      }, {
+        value: '8',
+        label: '上季度'
+      }, {
+        value: '9',
+        label: '本年'
+      }, {
+        value: '10',
+        label: '上年'
+      }],
+      value: '5',
+      list: [],
+      dates: [],
+      orderCount: [],
+      payPrice: [],
+      // 新增表格数据
+      tableData: []
     }
   },
-   created() {
-       getCompanyList().then(response => {
-        this.companys = response.data;
-        if(this.companys!=null&&this.companys.length>0){
-          this.companyId=this.companys[0].companyId;
-          this.getTreeselect();
-        }
-      });
+  created() {
+    getCompanyList().then(response => {
+      this.companys = response.data;
+      if (this.companys != null && this.companys.length > 0) {
+        this.companyId = this.companys[0].companyId;
+        this.getTreeselect();
+      }
+    });
   },
   methods: {
-    companyChange(val){
+    companyChange(val) {
       console.log(val);
-      this.companyId=val;
+      this.companyId = val;
       this.getTreeselect();
     },
-    currDeptChange(val){
+    currDeptChange(val) {
       console.log(val)
-      this.deptId=val;
-       this.getUserListByDeptId();
+      this.deptId = val;
+      this.getUserListByDeptId();
     },
-     /** 查询部门下拉树结构 */
+    /** 查询部门下拉树结构 */
     getTreeselect() {
-      var that=this;
-      var param={companyId:this.companyId}
+      var that = this;
+      var param = { companyId: this.companyId }
       treeselect(param).then((response) => {
         this.deptOptions = response.data;
         console.log(this.deptOptions)
-        if(response.data!=null&&response.data.length>0){
-          this.deptId=response.data[0].id;
+        if (response.data != null && response.data.length > 0) {
+          this.deptId = response.data[0].id;
           that.storeOrder()
         }
       });
     },
-    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}
-        }
-        exportVoiceLogs(data).then((response) => {
-            console.log(response)
-           this.download(response.msg);
-        });
-
+    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 }
+      }
+      exportVoiceLogs(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;
-
-        });
+      this.userIds = undefined;
+      var data = { deptId: this.deptId };
+      getUserListByDeptId(data).then(response => {
+        this.users = response.data;
+      });
+    },
+    storeOrder() {
+      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 && this.dateRange.length>0){
+        data.type = null
+        data.startTime = this.dateRange[0]
+        data.endTime = this.dateRange[1]
+      }
+      storeOrder(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);
+      });
     },
-    storeOrder(){
-          var data;
-          if(this.userIds!=undefined){
-              data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
+    initEchart() {
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           }
-          else{
-              data={type:this.value,deptId:this.deptId}
+        },
+        legend: {
+          data: ['订单数', '订单金额']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.dates
           }
-          storeOrder(data).then((response) => {
-            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
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              formatter: '{value}个'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '订单数',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.orderCount
           },
-          xAxis: [
-              {
-                  type: 'category',
-                  data: this.dates
-              }
-          ],
-          yAxis: [
-              {
-                  type: 'value',
-                  axisLabel:{
-                    formatter:'{value}个'
-                  }
-              }
-          ],
-          series: [
-              {
-
-                  name: '订单数',
-                  type: 'bar',
-                  emphasis: {
-                      focus: 'series'
-                  },
-                  data: this.orderCount
-              },
-              {
-
-                  name: '订单金额',
-                  type: 'bar',
-                  emphasis: {
-                      focus: 'series'
-                  },
-                  data: this.payPrice
-              }
-          ]
-        };
-        this.chart=echarts.init(document.getElementById("echart-customer"));
-        this.chart.setOption(option,true);
-      },
+          {
+            name: '订单金额',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.payPrice
+          }
+        ]
+      };
+      this.chart = echarts.init(document.getElementById("echart-customer"));
+      this.chart.setOption(option, true);
+    },
+    // 表格行样式
+    tableRowClassName({ row, rowIndex }) {
+      if (row.isGroup) {
+        return 'group-row';
+      }
+      return '';
+    },
+    // 表格合并方法（如果需要的话）
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      // 可以在这里实现单元格合并逻辑
+      return {
+        rowspan: 1,
+        colspan: 1
+      };
+    }
   }
 }
 </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;
-
+.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;
       }
-      .search-form{
-        margin: 20px 30px 0px 30px;
+      .el-select {
+        margin: 5px 10px;
       }
-      .data-box{
-        padding: 30px;
-        background-color:  rgb(255, 255, 255);
-        height: 100%;
-
-        .echart-box{
-          margin: 0 auto;
-          text-align: center;
+      .table-box {
+        margin-top: 15px;
+        .export {
+          float: right;
+          margin: 10px 0px;
         }
-        .el-select{
-          margin: 5px 10px;
-        }
-        .table-box{
-          margin-top: 15px;
-          .export{
-            float: right;
-            margin: 10px 0px;
-          }
+      }
+      // 新增表格样式
+      .table-container {
+        margin-top: 30px;
+        .table-title {
+          font-size: 16px;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 10px;
         }
       }
     }
-}
-  #echart-customer{
-    width:100%;
-    height:320px
   }
-.vue-treeselect{
+}
+
+#echart-customer {
+  width: 100%;
+  height: 320px
+}
+
+.vue-treeselect {
   width: 217px;
   height: 36px;
 }
 
+// 表格相关样式
+::v-deep .group-row {
+  background-color: #e8f5e8 !important;
+  font-weight: bold;
+}
+
+::v-deep .group-name {
+  font-weight: bold;
+  color: #333;
+}
+
+::v-deep .el-table {
+  font-size: 12px;
+  
+  .el-table__header-wrapper {
+    th {
+      background-color: #f5f7fa;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+  
+  .el-table__body-wrapper {
+    td {
+      padding: 8px 0;
+    }
+  }
+}
 </style>
+
 <style>
-.vue-treeselect__control{
+.vue-treeselect__control {
   display: block;
 }
-</style>
+</style>