统计页面修改

src/views/his/statistics/comprehensiveStatistics.vue

@@ -4,83 +4,82 @@
       <div class="title">综合统计看板</div>
 
       <el-form class="search-form" :inline="true" label-width="90px">
-
-        <!-- 时间范围选择 -->
-        <el-form-item label="时间范围">
-          <el-date-picker
-            v-model="dateRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-dd"
-            :picker-options="pickerOptions">
-          </el-date-picker>
-        </el-form-item>
-
-        <!-- 统计维度选择 -->
-        <el-form-item label="统计维度">
-          <el-select v-model="queryParams.dimension" placeholder="请选择统计维度" @change="handleDimensionChange" clearable>
-            <el-option label="个人" :value="1"></el-option>
-            <el-option label="公司" :value="2"></el-option>
-            <el-option label="部门" :value="3"></el-option>
-          </el-select>
-        </el-form-item>
-
-        <!-- 公司选择 -->
-        <el-form-item label="选择公司" v-if="queryParams.dimension">
-          <el-select
-            v-model="queryParams.companyId"
-            placeholder="请选择公司"
-            @change="handleCompanyChange"
-            clearable
-            :disabled="!queryParams.dimension">
-            <el-option
-              v-for="company in companyList"
-              :key="company.companyId"
-              :label="company.companyName"
-              :value="company.companyId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <!-- 部门选择 -->
-        <el-form-item label="选择部门" v-if="showDepartmentSelect">
-          <el-select
-            v-model="queryParams.deptId"
-            placeholder="请选择部门"
-            @change="handleDeptChange"
-            clearable
-            :disabled="!queryParams.companyId">
-            <el-option
-              v-for="dept in deptList"
-              :key="dept.deptId"
-              :label="dept.deptName"
-              :value="dept.deptId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <!-- 人员选择 -->
-        <el-form-item label="选择人员" v-if="showUserSelect">
-          <el-select
-            v-model="queryParams.userId"
-            placeholder="请选择人员"
-            clearable
-            :disabled="!queryParams.deptId">
-            <el-option
-              v-for="user in userList"
-              :key="user.userId"
-              :label="user.nickName"
-              :value="user.userId">
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
+        <el-row :gutter="10">
+          <!-- 时间范围选择 -->
+          <el-col :span="6">
+            <el-form-item label="时间范围">
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="yyyy-MM-dd"
+                :picker-options="pickerOptions"
+                style="width: 100%">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+
+          <!-- 统计维度选择 -->
+          <el-col :span="4">
+            <el-form-item label="统计维度">
+              <el-select 
+                v-model="queryParams.dimension" 
+                placeholder="请选择统计维度" 
+                @change="handleDimensionChange" 
+                clearable
+                style="width: 100%">
+                <el-option label="个人" :value="1"></el-option>
+                <el-option label="公司" :value="2"></el-option>
+                <el-option label="部门" :value="3"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <!-- 公司选择 -->
+          <el-col :span="4" v-if="showCompanySelect">
+            <el-form-item label="选择公司">
+              <el-select
+                v-model="queryParams.companyId"
+                placeholder="请选择公司"
+                @change="handleCompanyChange"
+                clearable
+                :disabled="!queryParams.dimension"
+                style="width: 100%">
+                <el-option
+                  v-for="company in companyList"
+                  :key="company.companyId"
+                  :label="company.companyName"
+                  :value="company.companyId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <!-- 部门选择 -->
+          <el-col :span="4" v-if="showDepartmentSelect">
+            <el-form-item label="选择部门">
+              <el-cascader
+                v-model="selectedDeptIds"
+                :options="deptTreeData"
+                :props="deptCascaderProps"
+                placeholder="请选择部门"
+                clearable
+                style="width: 100%"
+                @change="handleDeptChange">
+              </el-cascader>
+            </el-form-item>
+          </el-col>
+
+          <!-- 操作按钮 -->
+          <el-col :span="6">
+            <el-form-item label-width="0" style="padding-top: 35px;">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
     </div>
 
@@ -93,15 +92,36 @@
             {{ formatDateTime(scope.row.statisticsTime) }}
           </template>
         </el-table-column>
-        <el-table-column prop="companyName" label="公司名称" />
-        <el-table-column prop="deptName" label="部门名称" />
+        <el-table-column prop="companyName" label="公司名称"/>
+        <el-table-column prop="deptName" label="部门名称" v-if="showDeptNameColumn" />
         <!-- 根据维度决定是否显示人员姓名 -->
         <el-table-column prop="companyUserName" label="人员姓名" v-if="showUserNameColumn" />
         <!-- 更新以下列为新的字段名 -->
-        <el-table-column prop="sendCount" label="发送数" />
-        <el-table-column prop="answerNum" label="答题数" />
-        <el-table-column prop="redPacketNum" label="红包领取数" />
-        <el-table-column prop="redPacketAmount" label="红包金额(元)" />
+        <el-table-column prop="sendCount" label="发送数">
+          <template slot-scope="scope">
+            {{ scope.row.sendCount || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="completeNum" label="完课数">
+          <template slot-scope="scope">
+            {{ scope.row.completeNum || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="answerNum" label="答题数">
+          <template slot-scope="scope">
+            {{ scope.row.answerNum || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="redPacketNum" label="红包领取数">
+          <template slot-scope="scope">
+            {{ scope.row.redPacketNum || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="redPacketAmount" label="红包金额(元)">
+          <template slot-scope="scope">
+            {{ scope.row.redPacketAmount || 0 }}
+          </template>
+        </el-table-column>
       </el-table>
 
       <el-pagination
@@ -124,8 +144,11 @@ import { getStatisticsData, getSearchUserInfo, getSearchCompanyInfo, getSearchDe
 export default {
   data() {
     return {
+      lastQueryDimension: null, // 记录上次查询的维度
       companyList: [],
-      deptList: [],
+      deptList: [], // 原始部门数据
+      deptTreeData: [], // 树形部门数据
+      selectedDeptIds: [], // 选中的部门ID路径
       userList: [],
       rawData: [],
       tableData: [],
@@ -159,6 +182,14 @@ export default {
           }
         }]
       },
+      deptCascaderProps: {
+        value: 'deptId',
+        label: 'deptName',
+        children: 'children',
+        expandTrigger: 'hover',
+        checkStrictly: true, // 允许选择任意一级
+        emitPath: false // 只返回选中节点的值，而不是整个路径
+      },
       queryParams: {
         dimension: null,
         companyId: null,
@@ -175,22 +206,28 @@ export default {
       return this.tableData.slice(start, end);
     },
 
+    showCompanySelect() {
+      // 公司维度不需要显示公司选择，其他维度都需要
+      return this.queryParams.dimension && this.queryParams.dimension !== 2;
+    },
+
     showDepartmentSelect() {
-      return this.queryParams.dimension &&
-        (this.queryParams.dimension === 3 || this.queryParams.dimension === 1) &&
-        this.queryParams.companyId;
+      // 部门维度不需要显示部门选择，个人维度需要显示
+      return this.queryParams.dimension === 1 && this.queryParams.companyId;
     },
 
-    showUserSelect() {
-      return this.queryParams.dimension === 1 &&
-        this.queryParams.companyId &&
-        this.queryParams.deptId;
+
+
+    // 控制部门名称列显示
+    showDeptNameColumn() {
+      // 基于上次查询的维度来决定是否显示部门名称列
+      return this.lastQueryDimension && this.lastQueryDimension !== 2;
     },
 
-    // 添加计算属性控制人员姓名列显示
+    // 控制人员姓名列显示
     showUserNameColumn() {
-      // 当维度为个人时显示人员姓名列，公司维度时不显示
-      return this.queryParams.dimension === 1 || this.queryParams.dimension === 3;
+      // 只有个人维度显示人员姓名列
+      return this.lastQueryDimension === 1;
     }
   },
 
@@ -201,23 +238,26 @@ export default {
     // 默认设置统计维度为公司
     this.queryParams.dimension = 2;
     this.loadData();
+    // 页面初始化时查询一次数据
+    this.fetchStatisticsData();
   },
 
   methods: {
+    // 在 loadData 方法中也移除自动查询
     loadData() {
       // 使用 getSearchCompanyInfo 获取公司下拉数据
       getSearchCompanyInfo().then(response => {
         this.companyList = response.data || [];
 
         // 默认选择第一个公司（如果存在）
-        if (this.companyList.length > 0) {
+        if (this.companyList.length > 0 && this.queryParams.dimension !== 2) {
           this.queryParams.companyId = this.companyList[0].companyId;
           // 加载该公司的部门数据
           return this.loadDeptData(this.queryParams.companyId);
         }
       }).then(() => {
-        // 在公司和部门默认选择完成后，请求统计数据
-        return this.fetchStatisticsData();
+        // 移除自动查询调用，只保留初始加载
+        // return this.fetchStatisticsData();
       }).catch(error => {
         console.error('数据加载失败:', error);
         this.$message.error('数据加载失败');
@@ -225,12 +265,26 @@ export default {
     },
 
     loadDeptData(companyId) {
+      if (!companyId) return Promise.resolve();
+
       return getSearchDeptInfo({ id: companyId }).then(response => {
-        this.deptList = response.data || [];
+        const deptData = response.data || [];
+        this.deptList = deptData;
+        
+        // 如果后端直接返回树形结构（第一层数据有children），直接使用
+        // 否则通过buildDeptTree构建树形结构
+        const hasTreeStructure = deptData.some(dept => dept.children && dept.children.length > 0);
+        if (hasTreeStructure) {
+          this.deptTreeData = deptData.filter(dept => dept.parentId === 0 || dept.parentId === null);
+        } else {
+          this.deptTreeData = this.buildDeptTree(deptData);
+        }
 
         // 默认选择第一个部门（如果存在）
-        if (this.deptList.length > 0) {
-          this.queryParams.deptId = this.deptList[0].deptId;
+        if (this.deptTreeData.length > 0 && this.queryParams.dimension === 1) {
+          // 选择第一个顶级部门
+          this.queryParams.deptId = this.deptTreeData[0].deptId;
+          this.selectedDeptIds = [this.queryParams.deptId];
         }
       }).catch(error => {
         console.error('部门数据加载失败:', error);
@@ -238,6 +292,50 @@ export default {
       });
     },
 
+    // 构建部门树形结构
+    buildDeptTree(deptList) {
+      if (!deptList || deptList.length === 0) return [];
+
+      // 创建部门映射
+      const deptMap = {};
+      deptList.forEach(dept => {
+        // 如果后端返回的数据中已经有children字段且有值，则使用后端的children
+        // 否则初始化为空数组
+        deptMap[dept.deptId] = { 
+          ...dept, 
+          children: (dept.children && dept.children.length > 0) ? dept.children : [] 
+        };
+      });
+
+      // 构建树形结构
+      const tree = [];
+      deptList.forEach(dept => {
+        if (dept.parentId === 0 || dept.parentId === null) {
+          // 顶级部门
+          tree.push(deptMap[dept.deptId]);
+        } else {
+          // 子部门 - 只有在后端没有返回children的情况下才手动构建
+          if (deptMap[dept.parentId] && (!dept.children || dept.children.length === 0)) {
+            deptMap[dept.parentId].children.push(deptMap[dept.deptId]);
+          }
+        }
+      });
+
+      // 清理空的children数组，保持数据结构整洁
+      const cleanEmptyChildren = (nodes) => {
+        nodes.forEach(node => {
+          if (node.children && node.children.length === 0) {
+            delete node.children;
+          } else if (node.children && node.children.length > 0) {
+            cleanEmptyChildren(node.children);
+          }
+        });
+      };
+      cleanEmptyChildren(tree);
+
+      return tree;
+    },
+
     // 添加时间格式化方法
     formatDateTime(dateString) {
       if (!dateString) return '';
@@ -266,14 +364,15 @@ export default {
         endTime: this.formatDate(this.dateRange[1])
       };
 
-      // 根据维度设置id参数
-      if (this.queryParams.dimension === 1 && this.queryParams.userId) {
-        params.id = this.queryParams.userId;
-      } else if (this.queryParams.dimension === 2 && this.queryParams.companyId) {
-        params.id = this.queryParams.companyId;
-      } else if (this.queryParams.dimension === 3 && this.queryParams.deptId) {
+      // 根据新规则设置id参数
+      if (this.queryParams.dimension === 1 && this.queryParams.deptId) {
+        // 个人维度传递部门ID
         params.id = this.queryParams.deptId;
+      } else if (this.queryParams.dimension === 3 && this.queryParams.companyId) {
+        // 部门维度传递公司ID
+        params.id = this.queryParams.companyId;
       }
+      // 公司维度不传递ID参数
 
       // 以POST方式发送请求体
       return getStatisticsData(params).then(response => {
@@ -288,71 +387,52 @@ export default {
 
     handleCompanyChange(companyId) {
       this.queryParams.deptId = null;
+      this.selectedDeptIds = [];
       this.queryParams.userId = null;
       this.deptList = [];
+      this.deptTreeData = [];
       this.userList = [];
 
       if (!companyId) return;
 
       // 使用 getSearchDeptInfo 获取部门下拉数据
       getSearchDeptInfo({ id: companyId }).then(response => {
-        this.deptList = response.data || [];
+        const deptData = response.data || [];
+        this.deptList = deptData;
+        
+        // 如果后端直接返回树形结构（第一层数据有children），直接使用
+        // 否则通过buildDeptTree构建树形结构
+        const hasTreeStructure = deptData.some(dept => dept.children && dept.children.length > 0);
+        if (hasTreeStructure) {
+          this.deptTreeData = deptData.filter(dept => dept.parentId === 0 || dept.parentId === null);
+        } else {
+          this.deptTreeData = this.buildDeptTree(deptData);
+        }
 
         // 默认选择第一个部门（如果存在）
-        // 仅在部门维度或个人维度下默认选择第一个部门
-        if (this.deptList.length > 0 &&
-          (this.queryParams.dimension === 3 || this.queryParams.dimension === 1)) {
-          this.queryParams.deptId = this.deptList[0].deptId;
-
-          // 如果是个人维度，还需要加载用户数据
-          if (this.queryParams.dimension === 1 && this.queryParams.deptId) {
-            this.loadUserData(this.queryParams.deptId);
-          }
+        // 仅在个人维度下默认选择第一个部门
+        if (this.deptTreeData.length > 0 && this.queryParams.dimension === 1) {
+          // 选择第一个顶级部门
+          this.queryParams.deptId = this.deptTreeData[0].deptId;
+          this.selectedDeptIds = [this.queryParams.deptId];
         }
       }).catch(error => {
         console.error('部门数据加载失败:', error);
         this.$message.error('部门数据加载失败');
       });
+      // 移除.then()后面的自动查询调用
     },
 
-    // 新增加载用户数据的方法
-    loadUserData(deptId) {
-      if (!deptId) return;
 
-      getSearchUserInfo({ id: deptId }).then(response => {
-        this.userList = response.data || [];
 
-        // 可以选择默认选中第一个用户
-        if (this.userList.length > 0) {
-          // this.queryParams.userId = this.userList[0].userId;
-        }
-      }).catch(error => {
-        console.error('人员数据加载失败:', error);
-        this.$message.error('人员数据加载失败');
-      });
-    },
-
-    handleDeptChange(deptId) {
-      this.queryParams.userId = null;
-      this.userList = [];
-
-      if (!deptId) return;
-
-      // 使用 getSearchUserInfo 获取人员下拉数据
-      getSearchUserInfo({ id: deptId }).then(response => {
-        this.userList = response.data || [];
-
-        // 在个人维度下，默认选择第一个用户（可选）
-        if (this.userList.length > 0 && this.queryParams.dimension === 1) {
-          // this.queryParams.userId = this.userList[0].userId;
-        }
-      }).catch(error => {
-        console.error('人员数据加载失败:', error);
-        this.$message.error('人员数据加载失败');
-      });
+    handleDeptChange(selectedDeptId) {
+      // 更新选中的部门ID
+      this.queryParams.deptId = selectedDeptId;
     },
 
     handleQuery() {
+      // 记录当前查询的维度
+      this.lastQueryDimension = this.queryParams.dimension;
       // 触发统计数据请求
       this.fetchStatisticsData();
     },
@@ -361,25 +441,32 @@ export default {
       // 重置后续选择项
       this.queryParams.companyId = null;
       this.queryParams.deptId = null;
+      this.selectedDeptIds = [];
       this.queryParams.userId = null;
       this.deptList = [];
+      this.deptTreeData = [];
       this.userList = [];
     },
 
     resetQuery() {
       this.queryParams = {
-        dimension: null,
+        dimension: 2, // 重置为公司维度
         companyId: null,
         deptId: null,
         userId: null
       };
+      this.selectedDeptIds = []; // 重置部门选择
       // 重置时间为当天
       const today = new Date();
       this.dateRange = [today, today];
       this.deptList = [];
+      this.deptTreeData = [];
       this.userList = [];
       this.tableData = [...this.rawData];
       this.currentPage = 1;
+      // 重置后立即发送请求
+      this.lastQueryDimension = 2; // 同时更新lastQueryDimension
+      this.fetchStatisticsData();
     },
 
     handleSizeChange(val) {
@@ -417,13 +504,17 @@ export default {
 }
 
 .search-form {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
+  margin-bottom: 0;
 }
 
 .search-form .el-form-item {
-  margin-bottom: 10px;
+  margin-bottom: 18px;
+  width: 100%;
+}
+
+.search-form .el-row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }
 
 .table-section {
@@ -441,4 +532,4 @@ export default {
     padding: 20px 50px;
   }
 }
-</style>
+</style>