ylrz_his_scrm_adminUI/src/views/his/statistics/appOrderCountStats.vue

<template>
  <div class="app-container">
    <div class="app-content">
      <div class="title">App商城订单统计</div>
      <el-form class="search-form" :inline="true">
        <el-form-item label="公司名称" prop="companyId">
          <el-select
            style="width: 220px"
            filterable
            v-model="queryParams.companyId"
            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 label="员工" prop="companyUserId">
          <el-select
            filterable
            v-model="queryParams.companyUserId"
            placeholder="请选择员工"
            clearable
            size="small"
            :disabled="!queryParams.companyId"
          >
            <el-option
              v-for="item in users"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="下单日期">
          <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-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>

      <div class="data-box">
        <div class="table-box">
          <el-table :data="tableData" border max-height="500" style="width: 100%">
            <el-table-column prop="category" label="订单类型" width="180" />
            <el-table-column prop="orderCount" label="订单数" />
            <el-table-column prop="orderAmount" label="订单总金额（元）" />
            <el-table-column prop="depositAmount" label="定金金额（元）" />
            <el-table-column prop="codAmount" label="物流代收金额（元）" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAppOrderCount } from "@/api/company/statistics";
import { getUserList } from "@/api/company/companyUser"; // 使用 getUserList(companyId)
import { getCompanyList } from "@/api/company/company";

export default {
  name: "AppOrderCountStats",
  data() {
    return {
      // 仅保留必要查询参数
      queryParams: {
        companyId: null,
        companyUserId: null
      },
      companys: [],   // 公司列表
      users: [],      // 员工列表
      dateRange: [],  // 日期范围
      tableData: []   // 表格数据
    };
  },
  watch: {
    // 公司变化时，重新加载员工
    'queryParams.companyId'(newVal) {
      if (newVal) {
        this.queryParams.companyUserId = null;
        this.loadUsers();
      } else {
        this.users = [];
        this.queryParams.companyUserId = null;
      }
    }
  },
  created() {
    // 初始化公司下拉列表
    getCompanyList().then(response => {
      this.companys = response.data || [];
    });
  },
  methods: {
    // 根据 companyId 加载员工
    loadUsers() {
      const companyId = this.queryParams.companyId;
      if (!companyId) return;

      getUserList(companyId).then(res => {
        if (res.code === 200) {
          this.users = Array.isArray(res.data) ? res.data : [];
        } else {
          this.users = [];
        }
      }).catch(() => {
        this.users = [];
      });
    },

    // 搜索统计
    search() {
      const params = {
        companyId: this.queryParams.companyId,
        companyUserId: this.queryParams.companyUserId,
        startTime: this.dateRange?.[0] || undefined,
        endTime: this.dateRange?.[1] ? this.dateRange[1] + " 23:59:59" : undefined
      };

      getAppOrderCount(params).then(response => {
        const vo = response.data;
        // this.tableData = vo ? [vo] : [];
        this.tableData = response.data || []; // 直接赋值数组
      }).catch(() => {
        this.tableData = [];
      });
    }
  }
};
</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%;

      .table-box {
        margin-top: 15px;
      }
    }
  }
}
</style>