优化益寿缘app商城订单统计与互联网医院订单统计回显样式

src/views/his/statistics/appOrderCountStats.vue

@@ -3,22 +3,32 @@
     <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 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>
+
+        <el-form-item label="员工" prop="companyUserId">
           <el-select
             filterable
-            v-model="companyUserId"
+            v-model="queryParams.companyUserId"
             placeholder="请选择员工"
             clearable
             size="small"
+            :disabled="!queryParams.companyId"
           >
             <el-option
               v-for="item in users"
@@ -28,6 +38,7 @@
             />
           </el-select>
         </el-form-item>
+
         <el-form-item label="下单日期">
           <el-date-picker
             clearable
@@ -40,6 +51,7 @@
             end-placeholder="结束日期"
           />
         </el-form-item>
+
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
         </el-form-item>
@@ -47,20 +59,12 @@
 
       <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 :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>
@@ -70,68 +74,72 @@
 
 <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";
+import { getUserList } from "@/api/company/companyUser"; // 使用 getUserList(companyId)
+import { getCompanyList } from "@/api/company/company";
 
 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: []
+      // 仅保留必要查询参数
+      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() {
-    this.loadDeptTree();
+    // 初始化公司下拉列表
+    getCompanyList().then(response => {
+      this.companys = response.data || [];
+    });
   },
   methods: {
-    loadDeptTree() {
-      treeselect().then(response => {
-        this.deptOptions = response.data;
-        if (response.data && response.data.length > 0) {
-          this.companyId = response.data[0].id;
-        }
-      });
-    },
+    // 根据 companyId 加载员工
+    loadUsers() {
+      const companyId = this.queryParams.companyId;
+      if (!companyId) return;
 
-    getUserListByDeptId() {
-      if (!this.companyId) return;
-      getUserListByDeptId({ deptId: this.companyId }).then(response => {
-        this.users = response.data || [];
+      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.companyId,
-        companyUserId: this.companyUserId,
+        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 = [];
       });
     }
   }
@@ -165,15 +173,4 @@ export default {
     }
   }
 }
-
-.vue-treeselect {
-  width: 217px;
-  height: 36px;
-}
-</style>
-
-<style>
-.vue-treeselect__control {
-  display: block;
-}
 </style>

src/views/his/statistics/hisOrderCountStats.vue

@@ -47,20 +47,12 @@
 
       <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 :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>
@@ -137,8 +129,7 @@ export default {
       };
 
       getHisOrderCountStats(params).then(response => {
-        const vo = response.data;
-        this.tableData = vo ? [vo] : [];
+        this.tableData = response.data || []; // 直接赋值数组
       });
     }
   }