南京理工查询统计（数据看板）优化整改: 会员管理和医疗互助统计总数加点击详情弹出人员列表；

src/main/java/io/v/nutz/diseaseaid/controller/DiseaseAidDashBoard.java

@@ -1,21 +1,31 @@
 package io.v.nutz.diseaseaid.controller;
 
+import cn.afterturn.easypoi.excel.ExcelExportUtil;
+import cn.afterturn.easypoi.excel.entity.ExportParams;
+import cn.afterturn.easypoi.excel.entity.params.ExcelExportEntity;
 import io.v.nutz.annontation.ViReturn;
 import io.v.nutz.base.utils.DateUtil;
 import io.v.nutz.diseaseaid.mode.AidFundMemberMode;
 import io.v.nutz.diseaseaid.service.AidFundMemberAuditRecordService;
 import io.v.nutz.diseaseaid.service.MedicalAidService;
 import io.v.nutz.member.service.MemberService;
+import io.v.nutz.modules.models.PageForm;
+import org.apache.poi.ss.usermodel.Workbook;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.nutz.dao.Cnd;
 import org.nutz.dao.Sqls;
 import org.nutz.dao.entity.Record;
 import org.nutz.dao.sql.Sql;
+import org.nutz.dao.util.cri.SqlExpressionGroup;
 import org.nutz.ioc.loader.annotation.Inject;
 import org.nutz.ioc.loader.annotation.IocBean;
+import org.nutz.lang.Strings;
 import org.nutz.mvc.annotation.At;
 import org.nutz.mvc.annotation.Ok;
 
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 
@@ -58,6 +68,7 @@ public class DiseaseAidDashBoard {
                 SELECT
                     un.unionname,
                     un.unioncode,
+                    un.id unionid,
                 	( SELECT count( 1 ) FROM `user` WHERE unionid = un.id and aidFundMember = @code ) `value`
                 FROM
                 	sys_union un
@@ -188,5 +199,200 @@ public class DiseaseAidDashBoard {
         return medicalAidService.count(sql);
     }
 
+    /**
+     * 看板指标下钻明细
+     */
+    @At
+    @ViReturn
+    @RequiresPermissions("aid.dashboard")
+    public Object detailPage(PageForm pageForm, String detailType, Integer year, Integer medicalType,
+                             Integer stateId, String unionId, String unitId, String personType,
+                             String userState, String sex, String searchKeyword,
+                             String startTime, String endTime) {
+        Sql sql = buildDetailSql(detailType, year, medicalType, stateId, unionId, unitId,
+                personType, userState, sex, searchKeyword, startTime, endTime);
+        return medicalAidService.listPage(pageForm.getPageNumber(), pageForm.getPageSize(), sql);
+    }
+
+    /**
+     * 导出当前筛选条件下的全部下钻明细
+     */
+    @At
+    @Ok("void")
+    @RequiresPermissions("aid.dashboard")
+    public void exportDetail(HttpServletResponse response, String detailType, Integer year, Integer medicalType,
+                             Integer stateId, String unionId, String unitId, String personType,
+                             String userState, String sex, String searchKeyword,
+                             String startTime, String endTime) throws IOException {
+        Sql sql = buildDetailSql(detailType, year, medicalType, stateId, unionId, unitId,
+                personType, userState, sex, searchKeyword, startTime, endTime);
+        List<Record> list = medicalAidService.list(sql);
+        List<ExcelExportEntity> columns = new ArrayList<>();
+        columns.add(new ExcelExportEntity("工号", "loginname", 18));
+        columns.add(new ExcelExportEntity("姓名", "username", 16));
+        columns.add(new ExcelExportEntity("性别", "sex", 10));
+        columns.add(new ExcelExportEntity("人员类型", "personType", 18));
+        columns.add(new ExcelExportEntity("在职状态", "userState", 16));
+        columns.add(new ExcelExportEntity("所属工会", "unionname", 25));
+        columns.add(new ExcelExportEntity("所属单位", "unitname", 25));
+        if ("medical".equals(detailType)) {
+            columns.add(new ExcelExportEntity("补助类型", "typeName", 18));
+            columns.add(new ExcelExportEntity("申请时间", "detailTime", 20));
+            columns.add(new ExcelExportEntity("申请状态", "state_name", 18));
+            columns.add(new ExcelExportEntity("补助金额", "total_grant", 18));
+        } else {
+            columns.add(new ExcelExportEntity("加入时间", "detailTime", 20));
+        }
+
+        String fileName = "medical".equals(detailType) ? "医疗互助申请明细.xls" : "基金会员明细.xls";
+        response.setContentType("application/octet-stream");
+        response.setHeader("Content-Disposition", "attachment;filename="
+                + new String(fileName.getBytes("UTF-8"), "ISO8859-1"));
+        Workbook workbook = ExcelExportUtil.exportExcel(new ExportParams(), columns, list);
+        workbook.write(response.getOutputStream());
+        workbook.close();
+    }
+
+    /**
+     * 明细弹窗筛选选项
+     */
+    @At
+    @ViReturn
+    @RequiresPermissions("aid.dashboard")
+    public Object detailOptions() {
+        Sql sql = Sqls.create("""
+                SELECT DISTINCT
+                    s.state_id value,
+                    s.state_name label
+                FROM state s
+                    INNER JOIN medicalaid med ON med.state_id = s.state_id
+                ORDER BY s.state_id
+                """);
+        return Map.of("medicalStates", medicalAidService.list(sql));
+    }
+
+    private Sql buildDetailSql(String detailType, Integer year, Integer medicalType, Integer stateId,
+                               String unionId, String unitId, String personType, String userState,
+                               String sex, String searchKeyword, String startTime, String endTime) {
+        if ("medical".equals(detailType)) {
+            return buildMedicalDetailSql(year, medicalType, stateId, unionId, unitId, personType,
+                    userState, sex, searchKeyword, startTime, endTime);
+        }
+        return buildMemberDetailSql(year, unionId, unitId, personType, userState, sex,
+                searchKeyword, startTime, endTime);
+    }
+
+    private Sql buildMemberDetailSql(Integer year, String unionId, String unitId, String personType,
+                                     String userState, String sex, String searchKeyword,
+                                     String startTime, String endTime) {
+        Sql sql = Sqls.create("""
+                SELECT
+                    u.id,
+                    u.loginname,
+                    u.username,
+                    u.sex,
+                    u.personType,
+                    u.userState,
+                    u.unionid,
+                    u.unionname,
+                    u.unitid,
+                    u.unitname,
+                    u.aidFundMemberJoinTime detailTime
+                FROM user u
+                $condition
+                """);
+        Cnd cnd = Cnd.where("u.aidFundMember", "=", AidFundMemberMode.NORMAL.getCode());
+        if (year != null) {
+            cnd.and("YEAR(u.aidFundMemberJoinTime)", "=", year);
+        }
+        addUserCondition(cnd, "u", unionId, unitId, personType, userState, sex,
+                searchKeyword, startTime, endTime, "aidFundMemberJoinTime");
+        sql.setCondition(cnd.asc("u.unioncode").asc("u.loginname"));
+        return sql;
+    }
+
+    private Sql buildMedicalDetailSql(Integer year, Integer medicalType, Integer stateId,
+                                      String unionId, String unitId, String personType,
+                                      String userState, String sex, String searchKeyword,
+                                      String startTime, String endTime) {
+        Sql sql = Sqls.create("""
+                SELECT
+                    med.id,
+                    u.loginname,
+                    med.user_name username,
+                    u.sex,
+                    u.personType,
+                    u.userState,
+                    u.unionid,
+                    un.unionname,
+                    u.unitid,
+                    unit.name unitname,
+                    med.type,
+                    CASE med.type
+                        WHEN 1 THEN '医疗补助'
+                        WHEN 2 THEN '重疾补助'
+                        WHEN 3 THEN '特殊门诊补助'
+                        ELSE '其他'
+                    END typeName,
+                    med.apply_time detailTime,
+                    med.state_id,
+                    s.state_name,
+                    med.total_grant
+                FROM medicalaid med
+                    LEFT JOIN user u ON med.user_id = u.id
+                    LEFT JOIN sys_union un ON u.unionid = un.id
+                    LEFT JOIN sys_unit unit ON u.unitid = unit.id
+                    LEFT JOIN state s ON med.state_id = s.state_id
+                $condition
+                """);
+        Cnd cnd = Cnd.NEW();
+        if (year != null) {
+            cnd.and("med.year", "=", year);
+        }
+        if (medicalType != null) {
+            cnd.and("med.type", "=", medicalType);
+        }
+        if (stateId != null) {
+            cnd.and("med.state_id", "=", stateId);
+        }
+        addUserCondition(cnd, "u", unionId, unitId, personType, userState, sex,
+                searchKeyword, startTime, endTime, "med.apply_time");
+        sql.setCondition(cnd.desc("med.apply_time"));
+        return sql;
+    }
+
+    private void addUserCondition(Cnd cnd, String alias, String unionId, String unitId,
+                                  String personType, String userState, String sex,
+                                  String searchKeyword, String startTime, String endTime,
+                                  String timeField) {
+        if (Strings.isNotBlank(unionId)) {
+            cnd.and(alias + ".unionid", "=", unionId);
+        }
+        if (Strings.isNotBlank(unitId)) {
+            cnd.and(alias + ".unitid", "=", unitId);
+        }
+        if (Strings.isNotBlank(personType)) {
+            cnd.and(alias + ".personType", "=", personType);
+        }
+        if (Strings.isNotBlank(userState)) {
+            cnd.and(alias + ".userState", "=", userState);
+        }
+        if (Strings.isNotBlank(sex)) {
+            cnd.and(alias + ".sex", "=", sex);
+        }
+        if (Strings.isNotBlank(startTime)) {
+            cnd.and(timeField, ">=", startTime);
+        }
+        if (Strings.isNotBlank(endTime)) {
+            cnd.and(timeField, "<=", endTime + " 23:59:59");
+        }
+        if (Strings.isNotBlank(searchKeyword)) {
+            SqlExpressionGroup group = new SqlExpressionGroup();
+            group.orLike(alias + ".username", searchKeyword);
+            group.orLike(alias + ".loginname", searchKeyword);
+            cnd.and(group);
+        }
+    }
+
 
 }

src/main/java/io/v/nutz/member/controller/inquire/MemberDataBoardController.java

@@ -1,18 +1,28 @@
 package io.v.nutz.member.controller.inquire;
 
+import cn.afterturn.easypoi.excel.ExcelExportUtil;
+import cn.afterturn.easypoi.excel.entity.ExportParams;
+import cn.afterturn.easypoi.excel.entity.params.ExcelExportEntity;
 import io.v.nutz.annontation.ViReturn;
 import io.v.nutz.base.utils.DateUtil;
 import io.v.nutz.member.service.MemberService;
+import io.v.nutz.modules.models.PageForm;
+import org.apache.poi.ss.usermodel.Workbook;
 import org.apache.shiro.authz.annotation.RequiresAuthentication;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.nutz.dao.Cnd;
 import org.nutz.dao.Sqls;
 import org.nutz.dao.entity.Record;
 import org.nutz.dao.sql.Sql;
+import org.nutz.dao.util.cri.SqlExpressionGroup;
 import org.nutz.ioc.loader.annotation.Inject;
 import org.nutz.ioc.loader.annotation.IocBean;
+import org.nutz.lang.Strings;
 import org.nutz.mvc.annotation.At;
 import org.nutz.mvc.annotation.Ok;
 
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
@@ -47,7 +57,7 @@ public class MemberDataBoardController {
     @ViReturn
     public Object memberNumber() {
         int memberNum = memberService.count(Sqls.create("select count(1) from member"));
-        int lastYearMemberNum = memberService.count(Sqls.create("select * from member_his where year = year(now()) -1 "));
+        int lastYearMemberNum = memberService.count(Sqls.create("select * from member_his where year = year(now()) -1 and member = 1 "));
         return Map.of("memberNum", memberNum, "lastYearMemberNum", lastYearMemberNum);
     }
 
@@ -60,7 +70,7 @@ public class MemberDataBoardController {
         List<Map> result = new ArrayList<>();
         Integer year = DateUtil.getYear();
         for (int i = year - 5; i < year; i++) {
-            int count = memberService.count(Sqls.create("select * from member_his where year = @year ").setParam("year", year));
+            int count = memberService.count(Sqls.create("select * from member_his where year = @year and member = 1 ").setParam("year", i));
             result.add(Map.of("label", i, "value", count));
         }
         result.add(Map.of("label", year, "value", memberService.count(Sqls.create("select count(1) from member"))));
@@ -104,6 +114,7 @@ public class MemberDataBoardController {
                 SELECT
                     un.unionname,
                     un.unioncode,
+                    un.id unionid,
                 	( SELECT count( 1 ) FROM member WHERE unionid = un.id ) `value`
                 FROM
                 	sys_union un
@@ -166,5 +177,122 @@ public class MemberDataBoardController {
         return memberService.list(sql);
     }
 
+    /**
+     * 看板指标下钻明细
+     */
+    @At
+    @ViReturn
+    @RequiresPermissions("member.inquire.board")
+    public Object detailPage(PageForm pageForm, Integer year, String unionId, String unitId,
+                             String personType, String userState, String sex, String searchKeyword,
+                             String startTime, String endTime) {
+        return memberService.list(pageForm, buildDetailSql(year, unionId, unitId, personType,
+                userState, sex, searchKeyword, startTime, endTime));
+    }
+
+    /**
+     * 导出当前筛选条件下的全部下钻明细
+     */
+    @At
+    @Ok("void")
+    @RequiresPermissions("member.inquire.board")
+    public void exportDetail(HttpServletResponse response, Integer year, String unionId, String unitId,
+                             String personType, String userState, String sex, String searchKeyword,
+                             String startTime, String endTime) throws IOException {
+        List<Record> list = memberService.list(buildDetailSql(year, unionId, unitId, personType,
+                userState, sex, searchKeyword, startTime, endTime));
+        List<ExcelExportEntity> columns = new ArrayList<>();
+        columns.add(new ExcelExportEntity("工号", "loginname", 18));
+        columns.add(new ExcelExportEntity("姓名", "username", 16));
+        columns.add(new ExcelExportEntity("性别", "sex", 10));
+        columns.add(new ExcelExportEntity("人员类型", "personType", 18));
+        columns.add(new ExcelExportEntity("在职状态", "userState", 16));
+        columns.add(new ExcelExportEntity("所属工会", "unionname", 25));
+        columns.add(new ExcelExportEntity("所属单位", "unitname", 25));
+        columns.add(new ExcelExportEntity("入会时间", "detailTime", 18));
+
+        response.setContentType("application/octet-stream");
+        response.setHeader("Content-Disposition", "attachment;filename="
+                + new String("会员看板明细.xls".getBytes("UTF-8"), "ISO8859-1"));
+        Workbook workbook = ExcelExportUtil.exportExcel(new ExportParams(), columns, list);
+        workbook.write(response.getOutputStream());
+        workbook.close();
+    }
+
+    /**
+     * 明细弹窗附加选项，会员看板暂无业务状态选项
+     */
+    @At
+    @ViReturn
+    @RequiresPermissions("member.inquire.board")
+    public Object detailOptions() {
+        return Map.of("medicalStates", List.of());
+    }
+
+    private Sql buildDetailSql(Integer year, String unionId, String unitId, String personType,
+                               String userState, String sex, String searchKeyword,
+                               String startTime, String endTime) {
+        int currentYear = DateUtil.getYear();
+        boolean history = year != null && year != currentYear;
+        String timeField = "h.memberJoinTime";
+        Sql sql = Sqls.create("""
+                SELECT
+                    m.id,
+                    m.loginname,
+                    m.username,
+                    m.sex,
+                    m.personType,
+                    m.userState,
+                    m.unionid,
+                    m.unionname,
+                    m.unitid,
+                    m.unitname,
+                    $detailTime detailTime
+                FROM $table m
+                $detailJoin
+                $condition
+                """)
+                .setVar("table", history ? "member_his" : "`user`")
+                .setVar("detailTime", timeField)
+                .setVar("detailJoin", history
+                        ? "LEFT JOIN member_history h ON h.id = m.id AND h.year = m.year"
+                        : "LEFT JOIN sys_user h ON h.id = m.id");
+        Cnd cnd = Cnd.NEW();
+        cnd.and("m.member", "=", 1);
+        if (history) {
+            cnd.and("m.year", "=", year);
+        }
+        if (Strings.isNotBlank(unionId)) {
+            cnd.and("m.unionid", "=", unionId);
+        }
+        if (Strings.isNotBlank(unitId)) {
+            cnd.and("m.unitid", "=", unitId);
+        }
+        if (Strings.isNotBlank(personType)) {
+            cnd.and("m.personType", "=", personType);
+        }
+        if (Strings.isNotBlank(userState)) {
+            cnd.and("m.userState", "=", userState);
+        }
+        if (Strings.isNotBlank(sex)) {
+            cnd.and("m.sex", "=", sex);
+        }
+        if (Strings.isNotBlank(startTime)) {
+            cnd.and(timeField, ">=", startTime);
+        }
+        if (Strings.isNotBlank(endTime)) {
+            cnd.and(timeField, "<=", endTime + " 23:59:59");
+        }
+        if (Strings.isNotBlank(searchKeyword)) {
+            SqlExpressionGroup group = new SqlExpressionGroup();
+            group.orLike("m.username", searchKeyword);
+            group.orLike("m.loginname", searchKeyword);
+            cnd.and(group);
+        }
+        cnd.asc("m.unioncode").asc("m.loginname");
+        sql.setCondition(cnd);
+        return sql;
+    }
+
 
 }

src/main/resources/static/components/dashboard/DataBoardDetail.vue

@@ -0,0 +1,246 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" width="88%" top="5vh"
+             append-to-body :close-on-click-modal="false">
+    <el-form :inline="true" :model="form" size="small" class="dashboard-detail-filter">
+      <el-form-item label="统计年度" v-if="detailType === 'member'">
+        <el-date-picker v-model="form.year" type="year" value-format="yyyy"
+                        clearable placeholder="选择年度" @change="search"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="时间">
+        <el-date-picker v-model="form.dateRange" type="daterange" value-format="yyyy-MM-dd"
+                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                        clearable @change="search"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="所属工会">
+        <el-select v-model="form.unionId" clearable filterable placeholder="所属工会"
+                   @change="flushUnits(false)">
+          <el-option v-for="item in unions" :key="item.id"
+                     :label="item.unionname" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属单位">
+        <el-select v-model="form.unitId" clearable filterable placeholder="所属单位" @change="search">
+          <el-option v-for="item in units" :key="item.id"
+                     :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="人员类型">
+        <el-select v-model="form.personType" clearable placeholder="人员类型" @change="search">
+          <el-option v-for="item in personTypeOptions" :key="item.code"
+                     :label="item.name" :value="item.code"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="在职状态">
+        <el-select v-model="form.userState" clearable placeholder="在职状态" @change="search">
+          <el-option v-for="item in userStateOptions" :key="item.code"
+                     :label="item.name" :value="item.code"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-select v-model="form.sex" clearable placeholder="性别" @change="search">
+          <el-option label="男" value="男"></el-option>
+          <el-option label="女" value="女"></el-option>
+        </el-select>
+      </el-form-item>
+      <template v-if="detailType === 'medical'">
+        <el-form-item label="补助类型">
+          <el-select v-model="form.medicalType" clearable placeholder="补助类型" @change="search">
+            <el-option v-for="item in medicalTypeOptions" :key="item.value"
+                       :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请状态">
+          <el-select v-model="form.stateId" clearable placeholder="申请状态" @change="search">
+            <el-option v-for="item in medicalStates" :key="item.value"
+                       :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <el-form-item label="人员">
+        <el-input v-model="form.searchKeyword" clearable placeholder="姓名或工号"
+                  @keyup.enter.native="search"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
+        <el-button type="success" icon="el-icon-download" @click="exportData">导出</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" border stripe height="calc(75vh - 170px)"
+              v-loading="loading" style="width: 100%">
+      <el-table-column type="index" label="序号" width="70" align="center"
+                       :index="indexMethod"></el-table-column>
+      <el-table-column prop="loginname" label="工号" min-width="110" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="username" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="sex" label="性别" width="70" align="center"></el-table-column>
+      <el-table-column prop="persontype" label="人员类型" min-width="110" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="userstate" label="在职状态" min-width="100" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="unionname" label="所属工会" min-width="160" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="unitname" label="所属单位" min-width="160" show-overflow-tooltip></el-table-column>
+      <template v-if="detailType === 'medical'">
+        <el-table-column prop="typename" label="补助类型" min-width="110"></el-table-column>
+        <el-table-column prop="detailtime" label="申请时间" min-width="160"></el-table-column>
+        <el-table-column prop="state_name" label="申请状态" min-width="120"></el-table-column>
+        <el-table-column prop="total_grant" label="补助金额" min-width="110" align="right"></el-table-column>
+      </template>
+      <el-table-column v-else prop="detailtime" label="加入时间" min-width="160"></el-table-column>
+    </el-table>
+
+    <el-pagination class="dashboard-detail-pagination"
+                   background
+                   layout="total, sizes, prev, pager, next, jumper"
+                   :current-page="pageForm.pageNumber"
+                   :page-size="pageForm.pageSize"
+                   :page-sizes="[10, 20, 50, 100]"
+                   :total="pageForm.totalCount"
+                   @current-change="pageChange"
+                   @size-change="pageSizeChange"></el-pagination>
+  </el-dialog>
+</template>
+
+<script>
+module.exports = {
+  props: {
+    baseUrl: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      title: '指标明细',
+      detailType: 'member',
+      form: this.emptyForm(),
+      initialForm: {},
+      tableData: [],
+      unions: [],
+      units: [],
+      personTypeOptions: [],
+      userStateOptions: [],
+      medicalStates: [],
+      medicalTypeOptions: [
+        {label: '医疗补助', value: 1},
+        {label: '重疾补助', value: 2},
+        {label: '特殊门诊补助', value: 3}
+      ],
+      pageForm: {
+        pageNumber: 1,
+        pageSize: 10,
+        totalCount: 0
+      }
+    }
+  },
+  methods: {
+    emptyForm() {
+      return {
+        detailType: 'member',
+        year: '',
+        dateRange: [],
+        unionId: '',
+        unitId: '',
+        personType: '',
+        userState: '',
+        sex: '',
+        medicalType: '',
+        stateId: '',
+        searchKeyword: ''
+      }
+    },
+    async open(title, detailType, filters) {
+      this.title = title || '指标明细'
+      this.detailType = detailType || 'member'
+      const form = this.emptyForm()
+      form.detailType = this.detailType
+      Object.assign(form, filters || {})
+      if (form.startTime || form.endTime) {
+        form.dateRange = [form.startTime || '', form.endTime || '']
+      }
+      this.form = form
+      this.initialForm = clone(form)
+      this.visible = true
+      await this.flushUnits(true)
+      this.search()
+    },
+    buildParams() {
+      const params = clone(this.form)
+      params.detailType = this.detailType
+      params.startTime = params.dateRange && params.dateRange.length ? params.dateRange[0] : ''
+      params.endTime = params.dateRange && params.dateRange.length ? params.dateRange[1] : ''
+      delete params.dateRange
+      return params
+    },
+    async loadData() {
+      this.loading = true
+      const params = Object.assign(this.buildParams(), {
+        pageNumber: this.pageForm.pageNumber,
+        pageSize: this.pageForm.pageSize
+      })
+      const resp = await $.get(this.baseUrl + '/detailPage', params)
+      requestLaterFun(resp, data => {
+        this.tableData = data.list || []
+        this.pageForm.totalCount = data.totalCount || 0
+      })
+      this.loading = false
+    },
+    search() {
+      if (!this.visible) return
+      this.pageForm.pageNumber = 1
+      this.loadData()
+    },
+    async reset() {
+      this.form = clone(this.initialForm)
+      await this.flushUnits(true)
+      this.search()
+    },
+    async flushUnits(preserveUnit) {
+      if (!preserveUnit) {
+        this.$set(this.form, 'unitId', '')
+      }
+      this.units = await getUnits(this.form.unionId)
+      if (!preserveUnit) {
+        this.search()
+      }
+    },
+    pageChange(pageNumber) {
+      this.pageForm.pageNumber = pageNumber
+      this.loadData()
+    },
+    pageSizeChange(pageSize) {
+      this.pageForm.pageSize = pageSize
+      this.pageForm.pageNumber = 1
+      this.loadData()
+    },
+    indexMethod(index) {
+      return (this.pageForm.pageNumber - 1) * this.pageForm.pageSize + index + 1
+    },
+    exportData() {
+      window.open(this.baseUrl + '/exportDetail?' + $.param(this.buildParams()))
+    }
+  },
+  async created() {
+    this.unions = await getUnions(null)
+    this.personTypeOptions = await getDictOptions('UserType')
+    this.userStateOptions = await getDictOptions('UserState')
+    const resp = await $.get(this.baseUrl + '/detailOptions')
+    requestLaterFun(resp, data => {
+      this.medicalStates = data.medicalStates || []
+    })
+  }
+}
+</script>
+
+<style scoped>
+.dashboard-detail-filter {
+  margin-bottom: 4px;
+}
+.dashboard-detail-filter .el-form-item {
+  margin-bottom: 12px;
+}
+.dashboard-detail-pagination {
+  margin-top: 15px;
+  text-align: right;
+}
+</style>

src/main/resources/views/platform/diseaseaid/DashBoard.html

@@ -74,13 +74,23 @@ layout("/layouts/platform.html"){
         color: white !important;
         background-color: #314659 !important;
     }
+    .dashboard-drill {
+        cursor: pointer;
+    }
+
+    .dashboard-drill:hover .card-value-num,
+    .dashboard-drill:hover .card-label {
+        color: #409EFF;
+    }
 </style>
 
 <div id="app" class="platform aid-dash-bord" v-cloak>
     <guava ref="guava">
         <template>
             <el-row gutter="20" type="flex">
-                <el-col v-loading="loading.memberNumber">
+                <el-col class="dashboard-drill" v-loading="loading.memberNumber"
+                        title="点击查看基金会员明细"
+                        @click.native="openDetail('基金会员总数明细', 'member', {})">
                     <el-card shadow="never">
                         <div class="card-label">基金会员总数</div>
                         <div class="card-value">
@@ -90,7 +100,12 @@ layout("/layouts/platform.html"){
                     </el-card>
                 </el-col>
 
-                <el-col v-loading="loading.memberNumberYear">
+                <el-col class="dashboard-drill" v-loading="loading.memberNumberYear"
+                        title="点击查看今年新加入会员明细"
+                        @click.native="openDetail('今年新加入基金会员明细', 'member', {
+                            startTime: moment().startOf('year').format('YYYY-MM-DD'),
+                            endTime: moment().endOf('year').format('YYYY-MM-DD')
+                        })">
                     <el-card shadow="never">
                         <div class="card-label">今年新加入会员数</div>
                         <div class="card-value">
@@ -99,7 +114,9 @@ layout("/layouts/platform.html"){
                         </div>
                     </el-card>
                 </el-col>
-                <el-col v-loading="loading.aidMedical">
+                <el-col class="dashboard-drill" v-loading="loading.aidMedical"
+                        title="点击查看医疗补助申请明细"
+                        @click.native="openDetail('医疗补助申请明细', 'medical', {medicalType: 1})">
                     <el-card shadow="never">
                         <div class="card-label">医疗补助申请总数</div>
                         <div class="card-value">
@@ -108,7 +125,9 @@ layout("/layouts/platform.html"){
                         </div>
                     </el-card>
                 </el-col>
-                <el-col v-loading="loading.aidMedical">
+                <el-col class="dashboard-drill" v-loading="loading.aidMedical"
+                        title="点击查看重疾补助申请明细"
+                        @click.native="openDetail('重疾补助申请明细', 'medical', {medicalType: 2})">
                     <el-card shadow="never">
                         <div class="card-label">重疾补助申请总数</div>
                         <div class="card-value">
@@ -117,7 +136,9 @@ layout("/layouts/platform.html"){
                         </div>
                     </el-card>
                 </el-col>
-                <el-col v-loading="loading.aidMedicalMoney">
+                <el-col class="dashboard-drill" v-loading="loading.aidMedicalMoney"
+                        title="点击查看已补助申请明细"
+                        @click.native="openDetail('已补助金额明细', 'medical', {stateId: 700})">
                     <el-card shadow="never">
                         <div class="card-label">共计补助</div>
                         <div class="card-value">
@@ -132,10 +153,13 @@ layout("/layouts/platform.html"){
                 <el-col class="center-col">
                     <div class="card-label">工会基金会员数</div>
 
-                    <div style="width: 100%;height: 100px" id="unionMemberChart"></div>
+                    <div class="dashboard-drill" title="点击趋势点查看工会基金会员明细"
-                    <el-table :data="unionMember" style="width: 100%;margin-top: 20px"
+                         style="width: 100%;height: 100px" id="unionMemberChart"></div>
+                    <el-table :data="unionMember" style="width: 100%;margin-top: 20px;cursor: pointer"
                               height="calc(100vh - 160px - 300px)"
-                              :header-cell-style="{background:'#FAFAFA'}" row-key="id">
+                              :header-cell-style="{background:'#FAFAFA'}" row-key="id"
+                              title="点击工会行查看基金会员明细"
+                              @row-click="openUnionMemberDetail">
                         <el-table-column label="序号" width="100px">
                             <template scope="{$index}">
                                 <div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
@@ -157,13 +181,15 @@ layout("/layouts/platform.html"){
                 <el-col class="center-col">
 
                     <div class="card-label">在职状态</div>
-                    <div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
+                    <div class="dashboard-drill" title="点击图表项查看在职状态明细"
+                         style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
                          v-loading="loading.userStateMember"
                          id="userStateMemberChart"></div>
 
 
                     <div class="card-label">人员类型</div>
-                    <div style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
+                    <div class="dashboard-drill" title="点击图表项查看人员类型明细"
+                         style="width: 100%;height:calc(50% - 35px);box-sizing: border-box;padding: 30px 10px"
                          v-loading="loading.personTypeMember"
                          id="personTypeMemberChart"></div>
 
@@ -172,6 +198,7 @@ layout("/layouts/platform.html"){
             </el-row>
         </template>
     </guava>
+    <data-board-detail ref="dataBoardDetail" :base-url="loc()"></data-board-detail>
 </div>
 
 <script>
@@ -207,9 +234,27 @@ layout("/layouts/platform.html"){
             }
         },
         components: {
-            'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0')
+            'guava': httpVueLoader('/components/plugins/Guava.vue?v=1.0.0'),
+            'data-board-detail': httpVueLoader('/components/dashboard/DataBoardDetail.vue?v=1.0.3')
         },
         methods: {
+            openDetail(title, detailType, filters) {
+                this.$refs.dataBoardDetail.open(title, detailType, filters)
+            },
+            openUnionMemberDetail(row) {
+                this.openDetail(row.unionname + '基金会员明细', 'member', {
+                    unionId: row.unionid
+                })
+            },
+            getTinyAreaRow(event, rows) {
+                const point = event && event.data ? event.data.data : null
+                const index = point && point.x !== undefined ? Number(point.x) : NaN
+                if (Number.isInteger(index) && rows[index]) {
+                    return rows[index]
+                }
+                const value = point && point.y !== undefined ? point.y : point
+                return rows.find(item => String(item.value) === String(value))
+            },
             /**
              * 各工会会员数
              * @returns {Promise<void>}
@@ -244,6 +289,12 @@ layout("/layouts/platform.html"){
                         },
                     })
                     chart.unionMemberChart.render();
+                    chart.unionMemberChart.on('element:click', event => {
+                        const row = this.getTinyAreaRow(event, chartData)
+                        if (row) {
+                            this.openUnionMemberDetail(row)
+                        }
+                    })
 
                 })
             },
@@ -303,6 +354,14 @@ layout("/layouts/platform.html"){
                          area: {},*/
                     });
                     chart.userStateMemberChart.render();
+                    chart.userStateMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openDetail(row.type + '基金会员明细', 'member', {
+                                userState: row.type
+                            })
+                        }
+                    })
 
 
                 })
@@ -353,6 +412,14 @@ layout("/layouts/platform.html"){
                         },
                     });
                     chart.personTypeMemberChart.render();
+                    chart.personTypeMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openDetail(row.label + '基金会员明细', 'member', {
+                                personType: row.label
+                            })
+                        }
+                    })
 
 
                 })

src/main/resources/views/platform/member/inquire/DataBoard.html

@@ -67,12 +67,22 @@ layout("/layouts/platform.html"){
         overflow-y: auto;
     }
 
+    .dashboard-drill {
+        cursor: pointer;
+    }
+
+    .dashboard-drill:hover .top-col-member-number,
+    .dashboard-drill:hover .col-title {
+        color: #409EFF;
+    }
 </style>
 
 <div id="app" v-cloak>
     <guava>
         <el-row style="background-color: #f0f2f5" type="flex">
-            <el-col class="top-col" v-loading="loading.memberNumber">
+            <el-col class="top-col dashboard-drill" v-loading="loading.memberNumber"
+                    title="点击查看会员明细"
+                    @click.native.capture="openMemberDetail('会员总数明细', {year: moment().format('YYYY')})">
                 <div class="col-title">会员数</div>
                 <div class="top-col-member-number">{{memberNumberData.memberNum}}<span
                         style="font-size: 14px">&ensp;人</span></div>
@@ -97,16 +107,20 @@ layout("/layouts/platform.html"){
             </el-col>
             <el-col class="top-col" v-loading="loading.growthTrend">
                 <div class="col-title">增长趋势</div>
-                <div class="top-col-chart" id="growthTrendChart"></div>
+                <div class="top-col-chart dashboard-drill" title="点击趋势点查看年度明细"
+                     id="growthTrendChart"></div>
             </el-col>
-            <el-col class="top-col" v-loading="loading.memberPercentage">
+            <el-col class="top-col dashboard-drill" v-loading="loading.memberPercentage"
+                    title="点击查看会员明细"
+                    @click.native.capture="openMemberDetail('会员占比明细', {year: moment().format('YYYY')})">
                 <div class="col-title">会员占比</div>
                 <div class="top-col-chart" id="memberPercentageChart"
                      style="position: absolute;height: 120px;right: -10%;bottom: 20px"></div>
             </el-col>
             <el-col class="top-col" v-loading="loading.growthTrend">
                 <div class="col-title">男女占比</div>
-                <div class="top-col-chart" id="memberSexPercentageChart"
+                <div class="top-col-chart dashboard-drill" title="点击图表项查看性别明细"
+                     id="memberSexPercentageChart"
                      style="position: absolute;height: 120px;right: -10%;bottom: 20px"></div>
             </el-col>
         </el-row>
@@ -119,7 +133,9 @@ layout("/layouts/platform.html"){
 
                 <el-table :data="unionMember" :header-cell-style="{background:'#FAFAFA'}"
                           height="calc(100vh - 160px - 300px)"
-                          row-key="id" style="width: 100%;margin-top: 20px">
+                          row-key="id" style="width: 100%;margin-top: 20px;cursor: pointer"
+                          title="点击工会行查看会员明细"
+                          @row-click="openUnionMemberDetail">
                     <el-table-column label="序号" width="100px">
                         <template scope="{$index}">
                             <div class="idx idx-rank" v-if="$index<3">{{$index+1}}</div>
@@ -152,6 +168,7 @@ layout("/layouts/platform.html"){
             </el-col>
         </el-row>
     </guava>
+    <data-board-detail ref="dataBoardDetail" :base-url="loc()"></data-board-detail>
 
 </div>
 
@@ -193,8 +210,28 @@ layout("/layouts/platform.html"){
                 unionMember: [],
             }
         },
-        components: {},
+        components: {
+            'data-board-detail': httpVueLoader('/components/dashboard/DataBoardDetail.vue?v=1.0.3')
+        },
         methods: {
+            openMemberDetail(title, filters) {
+                this.$refs.dataBoardDetail.open(title, 'member', filters)
+            },
+            openUnionMemberDetail(row) {
+                this.openMemberDetail(row.unionname + '会员明细', {
+                    year: moment().format('YYYY'),
+                    unionId: row.unionid
+                })
+            },
+            getTinyAreaRow(event, rows) {
+                const point = event && event.data ? event.data.data : null
+                const index = point && point.x !== undefined ? Number(point.x) : NaN
+                if (Number.isInteger(index) && rows[index]) {
+                    return rows[index]
+                }
+                const value = point && point.y !== undefined ? point.y : point
+                return rows.find(item => String(item.value) === String(value))
+            },
             /**
              * 会员数
              * @returns {Promise<void>}
@@ -247,6 +284,12 @@ layout("/layouts/platform.html"){
                         },
                     });
                     chart.growthTrendChart.render();
+                    chart.growthTrendChart.on('element:click', event => {
+                        const row = this.getTinyAreaRow(event, data)
+                        if (row) {
+                            this.openMemberDetail(row.label + '年会员明细', {year: row.label})
+                        }
+                    })
 
                 })
             },
@@ -321,6 +364,15 @@ layout("/layouts/platform.html"){
                         interactions: [{type: 'element-active'}], color: ['#409EFF', '#F56C6C'],
                     });
                     chart.memberSexPercentageChart.render();
+                    chart.memberSexPercentageChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openMemberDetail(row.type + '性会员明细', {
+                                year: moment().format('YYYY'),
+                                sex: row.type
+                            })
+                        }
+                    })
 
                 })
             },
@@ -358,6 +410,12 @@ layout("/layouts/platform.html"){
                         },
                     })
                     chart.unionMemberChart.render();
+                    chart.unionMemberChart.on('element:click', event => {
+                        const row = this.getTinyAreaRow(event, chartData)
+                        if (row) {
+                            this.openUnionMemberDetail(row)
+                        }
+                    })
 
                 })
             },
@@ -407,6 +465,15 @@ layout("/layouts/platform.html"){
                         },
                     });
                     chart.personTypeMemberChart.render();
+                    chart.personTypeMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openMemberDetail(row.label + '会员明细', {
+                                year: moment().format('YYYY'),
+                                personType: row.label
+                            })
+                        }
+                    })
 
 
                 })
@@ -456,6 +523,15 @@ layout("/layouts/platform.html"){
                         area: {},
                     });
                     chart.userStateMemberChart.render();
+                    chart.userStateMemberChart.on('element:click', event => {
+                        const row = event && event.data ? event.data.data : null
+                        if (row) {
+                            this.openMemberDetail(row.label + '会员明细', {
+                                year: moment().format('YYYY'),
+                                userState: row.label
+                            })
+                        }
+                    })
 
 
                 })

target/classes/static/components/dashboard/DataBoardDetail.vue

@@ -0,0 +1,246 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" width="88%" top="5vh"
+             append-to-body :close-on-click-modal="false">
+    <el-form :inline="true" :model="form" size="small" class="dashboard-detail-filter">
+      <el-form-item label="统计年度" v-if="detailType === 'member'">
+        <el-date-picker v-model="form.year" type="year" value-format="yyyy"
+                        clearable placeholder="选择年度" @change="search"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="时间">
+        <el-date-picker v-model="form.dateRange" type="daterange" value-format="yyyy-MM-dd"
+                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                        clearable @change="search"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="所属工会">
+        <el-select v-model="form.unionId" clearable filterable placeholder="所属工会"
+                   @change="flushUnits(false)">
+          <el-option v-for="item in unions" :key="item.id"
+                     :label="item.unionname" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属单位">
+        <el-select v-model="form.unitId" clearable filterable placeholder="所属单位" @change="search">
+          <el-option v-for="item in units" :key="item.id"
+                     :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="人员类型">
+        <el-select v-model="form.personType" clearable placeholder="人员类型" @change="search">
+          <el-option v-for="item in personTypeOptions" :key="item.code"
+                     :label="item.name" :value="item.code"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="在职状态">
+        <el-select v-model="form.userState" clearable placeholder="在职状态" @change="search">
+          <el-option v-for="item in userStateOptions" :key="item.code"
+                     :label="item.name" :value="item.code"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-select v-model="form.sex" clearable placeholder="性别" @change="search">
+          <el-option label="男" value="男"></el-option>
+          <el-option label="女" value="女"></el-option>
+        </el-select>
+      </el-form-item>
+      <template v-if="detailType === 'medical'">
+        <el-form-item label="补助类型">
+          <el-select v-model="form.medicalType" clearable placeholder="补助类型" @change="search">
+            <el-option v-for="item in medicalTypeOptions" :key="item.value"
+                       :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请状态">
+          <el-select v-model="form.stateId" clearable placeholder="申请状态" @change="search">
+            <el-option v-for="item in medicalStates" :key="item.value"
+                       :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </template>
+      <el-form-item label="人员">
+        <el-input v-model="form.searchKeyword" clearable placeholder="姓名或工号"
+                  @keyup.enter.native="search"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
+        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
+        <el-button type="success" icon="el-icon-download" @click="exportData">导出</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" border stripe height="calc(75vh - 170px)"
+              v-loading="loading" style="width: 100%">
+      <el-table-column type="index" label="序号" width="70" align="center"
+                       :index="indexMethod"></el-table-column>
+      <el-table-column prop="loginname" label="工号" min-width="110" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="username" label="姓名" min-width="100" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="sex" label="性别" width="70" align="center"></el-table-column>
+      <el-table-column prop="persontype" label="人员类型" min-width="110" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="userstate" label="在职状态" min-width="100" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="unionname" label="所属工会" min-width="160" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="unitname" label="所属单位" min-width="160" show-overflow-tooltip></el-table-column>
+      <template v-if="detailType === 'medical'">
+        <el-table-column prop="typename" label="补助类型" min-width="110"></el-table-column>
+        <el-table-column prop="detailtime" label="申请时间" min-width="160"></el-table-column>
+        <el-table-column prop="state_name" label="申请状态" min-width="120"></el-table-column>
+        <el-table-column prop="total_grant" label="补助金额" min-width="110" align="right"></el-table-column>
+      </template>
+      <el-table-column v-else prop="detailtime" label="加入时间" min-width="160"></el-table-column>
+    </el-table>
+
+    <el-pagination class="dashboard-detail-pagination"
+                   background
+                   layout="total, sizes, prev, pager, next, jumper"
+                   :current-page="pageForm.pageNumber"
+                   :page-size="pageForm.pageSize"
+                   :page-sizes="[10, 20, 50, 100]"
+                   :total="pageForm.totalCount"
+                   @current-change="pageChange"
+                   @size-change="pageSizeChange"></el-pagination>
+  </el-dialog>
+</template>
+
+<script>
+module.exports = {
+  props: {
+    baseUrl: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      title: '指标明细',
+      detailType: 'member',
+      form: this.emptyForm(),
+      initialForm: {},
+      tableData: [],
+      unions: [],
+      units: [],
+      personTypeOptions: [],
+      userStateOptions: [],
+      medicalStates: [],
+      medicalTypeOptions: [
+        {label: '医疗补助', value: 1},
+        {label: '重疾补助', value: 2},
+        {label: '特殊门诊补助', value: 3}
+      ],
+      pageForm: {
+        pageNumber: 1,
+        pageSize: 10,
+        totalCount: 0
+      }
+    }
+  },
+  methods: {
+    emptyForm() {
+      return {
+        detailType: 'member',
+        year: '',
+        dateRange: [],
+        unionId: '',
+        unitId: '',
+        personType: '',
+        userState: '',
+        sex: '',
+        medicalType: '',
+        stateId: '',
+        searchKeyword: ''
+      }
+    },
+    async open(title, detailType, filters) {
+      this.title = title || '指标明细'
+      this.detailType = detailType || 'member'
+      const form = this.emptyForm()
+      form.detailType = this.detailType
+      Object.assign(form, filters || {})
+      if (form.startTime || form.endTime) {
+        form.dateRange = [form.startTime || '', form.endTime || '']
+      }
+      this.form = form
+      this.initialForm = clone(form)
+      this.visible = true
+      await this.flushUnits(true)
+      this.search()
+    },
+    buildParams() {
+      const params = clone(this.form)
+      params.detailType = this.detailType
+      params.startTime = params.dateRange && params.dateRange.length ? params.dateRange[0] : ''
+      params.endTime = params.dateRange && params.dateRange.length ? params.dateRange[1] : ''
+      delete params.dateRange
+      return params
+    },
+    async loadData() {
+      this.loading = true
+      const params = Object.assign(this.buildParams(), {
+        pageNumber: this.pageForm.pageNumber,
+        pageSize: this.pageForm.pageSize
+      })
+      const resp = await $.get(this.baseUrl + '/detailPage', params)
+      requestLaterFun(resp, data => {
+        this.tableData = data.list || []
+        this.pageForm.totalCount = data.totalCount || 0
+      })
+      this.loading = false
+    },
+    search() {
+      if (!this.visible) return
+      this.pageForm.pageNumber = 1
+      this.loadData()
+    },
+    async reset() {
+      this.form = clone(this.initialForm)
+      await this.flushUnits(true)
+      this.search()
+    },
+    async flushUnits(preserveUnit) {
+      if (!preserveUnit) {
+        this.$set(this.form, 'unitId', '')
+      }
+      this.units = await getUnits(this.form.unionId)
+      if (!preserveUnit) {
+        this.search()
+      }
+    },
+    pageChange(pageNumber) {
+      this.pageForm.pageNumber = pageNumber
+      this.loadData()
+    },
+    pageSizeChange(pageSize) {
+      this.pageForm.pageSize = pageSize
+      this.pageForm.pageNumber = 1
+      this.loadData()
+    },
+    indexMethod(index) {
+      return (this.pageForm.pageNumber - 1) * this.pageForm.pageSize + index + 1
+    },
+    exportData() {
+      window.open(this.baseUrl + '/exportDetail?' + $.param(this.buildParams()))
+    }
+  },
+  async created() {
+    this.unions = await getUnions(null)
+    this.personTypeOptions = await getDictOptions('UserType')
+    this.userStateOptions = await getDictOptions('UserState')
+    const resp = await $.get(this.baseUrl + '/detailOptions')
+    requestLaterFun(resp, data => {
+      this.medicalStates = data.medicalStates || []
+    })
+  }
+}
+</script>
+
+<style scoped>
+.dashboard-detail-filter {
+  margin-bottom: 4px;
+}
+.dashboard-detail-filter .el-form-item {
+  margin-bottom: 12px;
+}
+.dashboard-detail-pagination {
+  margin-top: 15px;
+  text-align: right;
+}
+</style>