互联网医院和App商城订单金额统计页面

src/api/company/statistics.js

@@ -54,7 +54,23 @@ export function inquiryOrder(query) {
     params: query
   })
 }
+// 获取互联网医院订单统计数据
+export function getHisOrderCountStats(query) {
+  return request({
+    url: '/company/statistics/hisOrderCountStats',
+    method: 'get',
+    params: query
+  });
+}
 
+// 获取App商城订单统计数据
+export function getAppOrderCount(query) {
+  return request({
+    url: '/company/statistics/appOrderCountStats',
+    method: 'get',
+    params: query
+  });
+}
 
 export function exportStoreOrder(query) {
   return request({
@@ -170,4 +186,4 @@ export function exportTuiMoney(query) {
     method: 'get',
     params: query
   })
-}
+}

src/views/his/statistics/appOrderCountStats.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <div class="app-content">
+      <div class="title">App商城订单统计</div>
+      <el-form class="search-form" :inline="true">
+        <el-form-item>
+          <treeselect
+            :clearable="false"
+            v-model="companyId"
+            :options="deptOptions"
+            :show-count="true"
+            placeholder="请选择归属部门"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-select
+            filterable
+            v-model="companyUserId"
+            placeholder="请选择员工"
+            clearable
+            size="small"
+          >
+            <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="totalOrderCount" label="订单总数" />
+            <el-table-column prop="fullPayOrderCount" label="全款支付订单数" />
+            <el-table-column prop="codOrderCount" label="物流代收支付订单数" />
+            <el-table-column prop="depositCodOrderCount" label="付定金的物流代收订单数" />
+            <el-table-column prop="noDepositCodOrderCount" label="0定金的物流代收订单数" />
+            <el-table-column prop="totalOrderAmount" 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 { getUserListByDeptId } from "@/api/company/companyUser";
+import { treeselect } from "@/api/company/companyDept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "AppOrderCountStats",
+  components: { Treeselect },
+  watch: {
+    companyId: {
+      handler(newVal) {
+        if (newVal != null) {
+          this.companyUserId = null;
+          this.getUserListByDeptId();
+        } else {
+          this.users = [];
+          this.companyUserId = null;
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      companyId: null,
+      companyUserId: null,
+      users: [],
+      deptOptions: [],
+      dateRange: [],
+      tableData: []
+    };
+  },
+  created() {
+    this.loadDeptTree();
+  },
+  methods: {
+    loadDeptTree() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
+        if (response.data && response.data.length > 0) {
+          this.companyId = response.data[0].id;
+        }
+      });
+    },
+
+    getUserListByDeptId() {
+      if (!this.companyId) return;
+      getUserListByDeptId({ deptId: this.companyId }).then(response => {
+        this.users = response.data || [];
+      });
+    },
+
+    search() {
+      const params = {
+        companyId: this.companyId,
+        companyUserId: this.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] : [];
+      });
+    }
+  }
+};
+</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;
+      }
+    }
+  }
+}
+
+.vue-treeselect {
+  width: 217px;
+  height: 36px;
+}
+</style>
+
+<style>
+.vue-treeselect__control {
+  display: block;
+}
+</style>

src/views/his/statistics/hisOrderCountStats.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="app-container">
+    <div class="app-content">
+      <div class="title">互联网医院订单统计</div>
+      <el-form class="search-form" :inline="true">
+        <el-form-item>
+          <treeselect
+            :clearable="false"
+            v-model="companyId"
+            :options="deptOptions"
+            :show-count="true"
+            placeholder="请选择归属部门"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-select
+            filterable
+            v-model="companyUserId"
+            placeholder="请选择员工"
+            clearable
+            size="small"
+          >
+            <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="totalOrderCount" label="订单总数" />
+            <el-table-column prop="fullPayOrderCount" label="全款支付订单数" />
+            <el-table-column prop="codOrderCount" label="物流代收支付订单数" />
+            <el-table-column prop="depositCodOrderCount" label="付定金的物流代收订单数" />
+            <el-table-column prop="noDepositCodOrderCount" label="0定金的物流代收订单数" />
+            <el-table-column prop="totalOrderAmount" label="订单总金额" />
+            <el-table-column prop="depositAmount" label="定金总金额" />
+            <el-table-column prop="codAmount" label="物流代收总金额" />
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getHisOrderCountStats } from "@/api/company/statistics";
+import { getUserListByDeptId } from "@/api/company/companyUser";
+import { treeselect } from "@/api/company/companyDept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "HisOrderCountStats",
+  components: { Treeselect },
+  watch: {
+    // 监听 companyId 变化，自动重载员工列表
+    companyId: {
+      handler(newVal) {
+        if (newVal != null) {
+          this.companyUserId = null; // 清空已选员工
+          this.getUserListByDeptId();
+        } else {
+          this.users = [];
+          this.companyUserId = null;
+        }
+      },
+      immediate: false
+    }
+  },
+  data() {
+    return {
+      companyId: null,        // 销售公司（部门）ID
+      companyUserId: null,    // 销售人员（员工）ID
+      users: [],              // 员工列表
+      deptOptions: [],        // 部门树形数据
+      dateRange: [],          // 日期范围
+      tableData: []           // 表格数据
+    };
+  },
+  created() {
+    this.loadDeptTree();
+  },
+  methods: {
+    // 加载部门树
+    loadDeptTree() {
+      treeselect().then(response => {
+        this.deptOptions = response.data;
+        if (response.data && response.data.length > 0) {
+          // 默认选中第一个部门
+          this.companyId = response.data[0].id;
+          // 触发 watch 自动加载员工（无需手动调用）
+        }
+      });
+    },
+
+    // 根据 companyId 获取员工列表
+    getUserListByDeptId() {
+      if (!this.companyId) return;
+      getUserListByDeptId({ deptId: this.companyId }).then(response => {
+        this.users = response.data || [];
+      });
+    },
+
+    // 搜索统计
+    search() {
+      const params = {
+        companyId: this.companyId,
+        companyUserId: this.companyUserId,
+        startTime: this.dateRange?.[0] || undefined,
+        endTime: this.dateRange?.[1] ? this.dateRange[1] + " 23:59:59" : undefined
+      };
+
+      getHisOrderCountStats(params).then(response => {
+        const vo = response.data;
+        this.tableData = vo ? [vo] : [];
+      });
+    }
+  }
+};
+</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;
+      }
+    }
+  }
+}
+
+.vue-treeselect {
+  width: 217px;
+  height: 36px;
+}
+</style>
+
+<style>
+.vue-treeselect__control {
+  display: block;
+}
+</style>