职工慰问：增加工会备案流程环节，慰问报销导出模板同步优化更新

2026-09-18 14:57:24 +08:00
parent 4f8f23e632
commit 71ead6854a
8 changed files with 849 additions and 57 deletions
@@ -172,7 +172,13 @@ public class CondolenceMineController {

 	@At
 	@Ok("void")
-	public void doExport(String id, HttpServletResponse response) throws Exception {
+    /**
+     * 导出已完成慰问申请的 Word 报销单。
+     * @param id 慰问业务记录 ID
+     * @param response HTTP 响应，写入使用 condolence 模板渲染的 DOCX 文件流
+     * @throws Exception 模板读取或文件输出失败时抛出；无 JSON 返回值
+     */
+    public void doExport(String id, HttpServletResponse response) throws Exception {
 		Condolence condolence = condolenceService.fetch(id);
 		if (condolence == null) {
 			throw new RuntimeException("慰问记录不存在");
@@ -224,61 +230,8 @@ public class CondolenceMineController {
 		String fileName = "工会会员慰问报销审批单_" +
 				DateUtil.format(createTime, "yyyyMMdd") + ".docx";

-		List<ProcessTaskVO> doneTaskVos = new ArrayList<>();
-		List<ProcessTask> doneTaskList = flowEngine.processTaskService().getDoneTaskList(info.getLong("instanceId"), null);
-		for (ProcessTask doneTask : doneTaskList) {
-			ProcessTaskVO taskVO = flowEngine.processTaskService().findById(doneTask.getId());
-			doneTaskVos.add(taskVO);
-		}
-
-		doneTaskVos.stream().filter(task -> "分工会主席审核".equals(task.getDisplayName()))
-				.max(Comparator.comparing(ProcessTaskVO::getCreatedAt))
-				.ifPresent(v -> {
-					Dict taskFormData = v.getTaskFormData();
-					HashMap<String, Object> approval = new HashMap<>();
-
-					approval.put("date", DateUtil.format(v.getFinishTime(), "yyyy年MM月dd日"));
-					approval.put("user", taskFormData.getStr("tf_userName"));
-					if (StrUtil.isNotBlank(taskFormData.getStr("tf_sign"))) {
-						// 系统已取消签字，导出不再渲染签字图片。
-						// approval.put("sign", sysOfficeTemplateUtil.createPictureRenderData(taskFormData.getStr("tf_sign")));
-					}
-					approval.put("opinion", taskFormData.getStr("tf_opinion"));
-					docData.put("fgh", approval);
-				});
-
-		doneTaskVos.stream().filter(task -> "校工会财务审核".equals(task.getDisplayName()))
-				.max(Comparator.comparing(ProcessTaskVO::getCreatedAt))
-				.ifPresent(v -> {
-					Dict taskFormData = v.getTaskFormData();
-					HashMap<String, Object> approval = new HashMap<>();
-
-					approval.put("date", DateUtil.format(v.getFinishTime(), "yyyy年MM月dd日"));
-					approval.put("user", taskFormData.getStr("tf_userName"));
-					if (StrUtil.isNotBlank(taskFormData.getStr("tf_sign"))) {
-						// 系统已取消签字，导出不再渲染签字图片。
-						// approval.put("sign", sysOfficeTemplateUtil.createPictureRenderData(taskFormData.getStr("tf_sign")));
-					}
-					approval.put("opinion", taskFormData.getStr("tf_opinion"));
-					docData.put("kj", approval);
-				});
-
-		doneTaskVos.stream().filter(task -> "工会主席审核".equals(task.getDisplayName()))
-				.max(Comparator.comparing(ProcessTaskVO::getCreatedAt))
-				.ifPresent(v -> {
-					Dict taskFormData = v.getTaskFormData();
-					HashMap<String, Object> approval = new HashMap<>();
-
-					approval.put("date", DateUtil.format(v.getFinishTime(), "yyyy年MM月dd日"));
-					approval.put("user", taskFormData.getStr("tf_userName"));
-					if (StrUtil.isNotBlank(taskFormData.getStr("tf_sign"))) {
-						// 系统已取消签字，导出不再渲染签字图片。
-						// approval.put("sign", sysOfficeTemplateUtil.createPictureRenderData(taskFormData.getStr("tf_sign")));
-					}
-					approval.put("opinion", taskFormData.getStr("tf_opinion"));
-					docData.put("xgh", approval);
-				});
-
+        // 四级审核信息由 service 按 wf 节点代码提取，姓名使用实际办理时保存的快照。
+        docData.putAll(condolenceService.getApprovalExportData(info.getLong("instanceId")));

 		response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document");
 		response.setHeader("content-disposition", "attachment;filename="
@@ -0,0 +1,59 @@
+package com.budwk.app.zhgh.staffbenefit.condolence.controller;
+
+import cn.dev33.satoken.annotation.SaCheckPermission;
+import cn.dev33.satoken.annotation.SaMode;
+import com.budwk.app.base.param.PageForm;
+import com.budwk.app.base.result.Result;
+import com.budwk.app.zhgh.staffbenefit.condolence.service.CondolenceService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import org.nutz.ioc.loader.annotation.Inject;
+import org.nutz.ioc.loader.annotation.IocBean;
+import org.nutz.mvc.annotation.At;
+import org.nutz.mvc.annotation.Ok;
+import org.nutz.mvc.annotation.Param;
+
+/** 职工慰问工会备案，PC 与 H5 共用备案任务查询接口。 */
+@IocBean
+@At("/platform/condolence/unionRecord")
+@Api("职工慰问工会备案")
+@Ok("json:full")
+public class CondolenceUnionRecordController {
+
+    @Inject
+    private CondolenceService condolenceService;
+
+    /** PC 工会备案入口，审核操作复用 wf 公共任务接口。 */
+    @At("/")
+    @Ok("beetl:/platform/zhgh/staffbenefit/condolence/unionRecord/index.html")
+    @SaCheckPermission("condolence.unionRecord")
+    public void index() {}
+
+    /** H5 工会备案入口，使用独立的 h5 权限标识。 */
+    @At("/h5")
+    @Ok("beetl:/platform/zhghh5/staffbenefit/condolence/unionRecord/index.html")
+    @SaCheckPermission("h5.condolence.unionRecord")
+    public void h5Index() {}
+
+    /**
+     * 查询工会备案任务。
+     * @param pageForm 页码、每页条数、姓名/工号关键字及排序参数
+     * @param year 申请年度，不传则不限年度
+     * @param type 慰问类型 ID，不传则不限类型
+     * @param unionId 申请人工会 ID，不传则不限工会
+     * @param unitId 申请人单位 ID，不传则不限单位
+     * @param approval true 查询已审核，false 或不传查询未审核
+     * @return Result，data 为分页对象；list 为慰问及 wf 任务信息，totalCount 为总条数
+     */
+    @At
+    @ApiOperation("工会备案分页查询")
+    @SaCheckPermission(value = {"condolence.unionRecord", "h5.condolence.unionRecord"}, mode = SaMode.OR)
+    public Result pageData(PageForm pageForm,
+                           @Param("year") Integer year,
+                           @Param("type") String type,
+                           @Param("unionId") String unionId,
+                           @Param("unitId") String unitId,
+                           @Param("approval") Boolean approval) {
+        return Result.success(condolenceService.listUnionRecordPage(pageForm, year, type, unionId, unitId, approval));
+    }
+}
@@ -1,6 +1,9 @@
 package com.budwk.app.zhgh.staffbenefit.condolence.service;

 import com.budwk.app.base.service.BaseService;
+import com.budwk.app.base.page.Pagination;
+import com.budwk.app.base.param.PageForm;
+import org.nutz.lang.util.NutMap;
 import com.budwk.app.zhgh.staffbenefit.condolence.model.Condolence;

 /**
@@ -11,4 +14,24 @@ import com.budwk.app.zhgh.staffbenefit.condolence.model.Condolence;
 * @Description TODO
 */
 public interface CondolenceService extends BaseService<Condolence> {
+    /**
+     * 按工会备案节点查询慰问任务，节点尚未配置时返回空分页。
+     * @param pageForm 页码、每页条数、姓名/工号关键字及排序参数
+     * @param year 申请年度，可空
+     * @param type 慰问类型 ID，可空
+     * @param unionId 申请人工会 ID，可空
+     * @param unitId 申请人单位 ID，可空
+     * @param approval true 为已审核，false/null 为未审核
+     * @return 分页对象，list 包含慰问信息、taskId、流程状态和 canRevoke，totalCount 为总条数
+     */
+    Pagination<NutMap> listUnionRecordPage(PageForm pageForm, Integer year, String type,
+                                          String unionId, String unitId, Boolean approval);
+
+    /**
+     * 获取慰问报销单四级审核模板字段。
+     * @param instanceId 当前慰问申请的 wf 流程实例 ID，不是业务 ID 或流程定义 ID
+     * @return fgh、kj、xgh、ghba 四组字段，每组含 user（实际办理人姓名）、opinion（原审核意见）、
+     *         date（完成日期，格式为 yyyy年MM月dd日）；不存在已完成节点时，该组字段均为空字符串
+     */
+    NutMap getApprovalExportData(Long instanceId);
 }
@@ -3,6 +3,21 @@ package com.budwk.app.zhgh.staffbenefit.condolence.service.impl;
 import com.budwk.app.base.service.impl.BaseServiceImpl;
 import com.budwk.app.zhgh.staffbenefit.condolence.model.Condolence;
 import com.budwk.app.zhgh.staffbenefit.condolence.service.CondolenceService;
+import cn.hutool.core.util.StrUtil;
+import cn.hutool.core.date.DateUtil;
+import com.budwk.app.flow.entity.ProcessTask;
+import org.nutz.json.Json;
+import java.util.Map;
+import com.budwk.app.base.page.Pagination;
+import com.budwk.app.base.param.PageForm;
+import com.budwk.app.base.utils.PageUtil;
+import com.budwk.app.flow.enums.ProcessTaskStateEnum;
+import org.nutz.dao.Cnd;
+import org.nutz.dao.Sqls;
+import org.nutz.dao.sql.Sql;
+import org.nutz.dao.util.cri.SqlExpressionGroup;
+import org.nutz.lang.util.NutMap;
+import java.util.List;
 import lombok.extern.slf4j.Slf4j;
 import org.nutz.dao.Dao;
 import org.nutz.ioc.loader.annotation.IocBean;
@@ -21,4 +36,132 @@ public class CondolenceServiceImpl extends BaseServiceImpl<Condolence> implement
 	public CondolenceServiceImpl(Dao dao) {
 		super(dao);
 	}
+
+    // 工会备案的 wf 节点代码，与流程定义中的 taskName 保持一致。
+    private static final String UNION_RECORD_TASK_KEY = "80c3d6f8-978a-4f00-816e-338005240c7e";
+
+    /**
+     * 按工会备案节点查询慰问任务，节点尚未配置时返回空分页。
+     * @param pageForm 页码、每页条数、姓名/工号关键字及排序参数
+     * @param year 申请年度，可空
+     * @param type 慰问类型 ID，可空
+     * @param unionId 申请人工会 ID，可空
+     * @param unitId 申请人单位 ID，可空
+     * @param approval true 为已审核，false/null 为未审核
+     * @return 分页对象，list 包含慰问信息、taskId、流程状态和 canRevoke，totalCount 为总条数
+     */
+    @Override
+    public Pagination<NutMap> listUnionRecordPage(PageForm pageForm, Integer year, String type,
+                                                 String unionId, String unitId, Boolean approval) {
+        // H5/PC 共用分页参数；缺省页码和条数，并限制单页最多 200 条。
+        if (pageForm == null) {
+            pageForm = new PageForm();
+        }
+        int pageNumber = pageForm.getPageNumber() == null ? 1 : Math.max(1, pageForm.getPageNumber());
+        int pageSize = pageForm.getPageSize() == null ? 10 : Math.min(200, Math.max(1, pageForm.getPageSize()));
+        if (StrUtil.isBlank(UNION_RECORD_TASK_KEY)) {
+            return new Pagination<>(pageNumber, pageSize, 0, List.of());
+        }
+        Sql sql = Sqls.create("""
+                SELECT
+                  info.*,
+                  type.name as typeName,
+                  ins.id AS instanceId,
+                  ins.businessNo,
+                  ins.state instanceState,
+                  ins.variable instanceVariable,
+                  ins.processDefineId instanceProcessDefineId,
+                  t.id taskId,
+                  t.taskName AS taskKey,
+                  t.displayName taskName,
+                  t.taskType,
+                  t.performType taskPerformType,
+                  t.taskState,
+                  t.finishTime,
+                  t.taskParentId,
+                  t.variable taskVariable,
+                  IFNULL(GROUP_CONCAT(DISTINCT nt.displayName),'结束') curTaskName,
+                  IF(rt.id IS NOT NULL, 1, 0) AS canRevoke
+                FROM
+                  wf_process_task t
+                  LEFT JOIN wf_process_instance ins ON ins.id = t.processInstanceId
+                  LEFT JOIN condolence info ON info.id = ins.businessNo
+                  LEFT JOIN wf_process_task_actor ta ON ta.processTaskId = t.id
+                  LEFT JOIN condolence_type type ON info.type = type.id
+                  LEFT JOIN wf_process_task nt ON nt.processInstanceId = ins.id AND nt.taskState = 10
+                  LEFT JOIN wf_process_task rt ON rt.processInstanceId = ins.id AND rt.taskParentId = t.id AND rt.taskState = 10
+                $condition
+                """);
+        Cnd cnd = Cnd.NEW();
+        if (StrUtil.isNotBlank(pageForm.getSearchKeyword())) {
+            SqlExpressionGroup seg = new SqlExpressionGroup();
+            seg.or(Condolence::getHelpUserName, "like", "%" + pageForm.getSearchKeyword() + "%");
+            seg.or(Condolence::getHelpLoginName, "like", "%" + pageForm.getSearchKeyword() + "%");
+            cnd.and(seg);
+        }
+        cnd.andEX("info.type", "=", type);
+        cnd.andEX("YEAR(info.createTime)", "=", year);
+        cnd.andEX("info.applyUnionId", "=", unionId);
+        cnd.andEX("info.applyUnitId", "=", unitId);
+
+        // 必须限定备案节点，禁止空节点时退化为全部流程任务。
+        cnd.and("t.taskName", "=", UNION_RECORD_TASK_KEY);
+
+        if (Boolean.TRUE.equals(approval)) {
+            cnd.and("t.taskState", "in", List.of(ProcessTaskStateEnum.FINISHED.getCode(), ProcessTaskStateEnum.INTERRUPT.getCode()));
+        } else {
+            cnd.and("t.taskState", "=", ProcessTaskStateEnum.DOING.getCode());
+        }
+
+        if (StrUtil.isAllBlank(pageForm.getPageOrderName(), pageForm.getPageOrderBy())) {
+            cnd.desc("info.createTime");
+        } else {
+            cnd.orderBy(pageForm.getPageOrderName(), PageUtil.getOrder(pageForm.getPageOrderBy()));
+        }
+        cnd.groupBy("t.id");
+        sql.setCondition(cnd);
+        return listPageMap(pageNumber, pageSize, sql);
+    }
+
+    /**
+     * 获取慰问报销单四级审核模板字段。
+     * @param instanceId 当前慰问申请的 wf 流程实例 ID，不是业务 ID 或流程定义 ID
+     * @return fgh、kj、xgh、ghba 四组字段，每组含 user（实际办理人姓名）、opinion（原审核意见）、
+     *         date（完成日期，格式为 yyyy年MM月dd日）；不存在已完成节点时，该组字段均为空字符串
+     */
+    @Override
+    public NutMap getApprovalExportData(Long instanceId) {
+        // 模板前缀延续原有命名；用稳定节点代码匹配，避免修改节点显示名称后无法导出。
+        Map<String, String> nodeFields = Map.of(
+                "4dad0bef-3cf2-4a7d-bba3-35020b9b216d", "fgh",
+                "34f7938e-47a3-4b3a-b4e0-92b7a3f47865", "kj",
+                "ecdaef3b-edf4-4143-9a96-887dd5921711", "xgh",
+                UNION_RECORD_TASK_KEY, "ghba");
+        NutMap result = new NutMap();
+        // 历史申请没有备案节点，或节点尚未办理时留空，不生成虚构姓名、意见和时间。
+        nodeFields.values().forEach(field -> result.put(field,
+                NutMap.NEW().setv("user", "").setv("opinion", "").setv("date", "")));
+        if (instanceId == null) {
+            return result;
+        }
+        List<ProcessTask> tasks = dao().query(ProcessTask.class,
+                Cnd.where(ProcessTask::getProcessInstanceId, "=", instanceId)
+                        .and(ProcessTask::getTaskState, "=", ProcessTaskStateEnum.FINISHED.getCode())
+                        .and(ProcessTask::getTaskName, "in", nodeFields.keySet())
+                        .asc(ProcessTask::getFinishTime).asc(ProcessTask::getId));
+        for (ProcessTask task : tasks) {
+            String field = nodeFields.get(task.getTaskName());
+            if (field == null) continue;
+            NutMap variable = StrUtil.isBlank(task.getVariable()) ? new NutMap()
+                    : Json.fromJson(NutMap.class, task.getVariable());
+            if (variable == null) variable = new NutMap();
+            // 退回重审产生多次办理时，按完成时间取最后一条；同一时刻按任务 ID 确定顺序。
+            // 姓名和意见只读任务快照，不以候选审核人或用户当前姓名代替实际办理记录。
+            result.put(field, NutMap.NEW()
+                    .setv("user", variable.getString("tf_userName", ""))
+                    .setv("opinion", variable.getString("tf_opinion", ""))
+                    .setv("date", task.getFinishTime() == null ? "" : DateUtil.format(task.getFinishTime(), "yyyy年MM月dd日")));
+        }
+        return result;
+    }
 }
@@ -71,11 +71,13 @@ const initTableMixins = {
            const address = this.pageDataUrl ? this.pageDataUrl : loc() + "/pageData"
            this.tableLoading = true
            this.$axios.post(address, data ? data : this.pageForm).then((res) => {
-                this.tableLoading = false
                if (res.code === 0) {
                    this.tableData = res.data.list
                    this.pageForm.totalCount = res.data.totalCount
                }
+            }).finally(() => {
+                // 成功或失败均结束表格加载，避免请求失败后持续转圈。
+                this.tableLoading = false
            })
        },
        notifySuccess(msg) {
@@ -94,6 +94,110 @@
        // toast多例模式
        vant.Toast.allowMultiple()

+        // H5 统一弹框历史栈：仅接入的页面启用，捕获阶段消费弹框返回，防止 PJAX 重载页面。
+        window.h5PopupHistory = (() => {
+            let active = null
+            let serial = 0
+            let pending = null
+            let skippingClosedHistory = false
+            const sync = (closedKeys) => {
+                if (active) active.onChange(active.keys.slice(), closedKeys)
+            }
+            // 回退到指定层级，Promise 在 popstate 同步完成后结束，提交/跳转可安全等待。
+            const rewind = (depth) => {
+                if (pending) return pending.promise.then(() => rewind(depth))
+                if (!active || active.keys.length <= depth) return Promise.resolve()
+                let resolveBack
+                const promise = new Promise((resolve) => { resolveBack = resolve })
+                pending = { promise, resolve: resolveBack }
+                window.history.go(depth - active.keys.length)
+                return promise
+            }
+            window.addEventListener("popstate", (event) => {
+                // 清除前进进入的残留记录时，紧随其后的回退也不能触发 PJAX。
+                if (skippingClosedHistory) {
+                    skippingClosedHistory = false
+                    event.stopImmediatePropagation()
+                    return
+                }
+                const mark = event.state && event.state.h5Popup
+                if ((!active || !active.keys.length) && !mark) return
+                // 只处理当前页面弹框记录；普通业务页面的返回继续由原 PJAX 处理。
+                event.stopImmediatePropagation()
+                if (mark && (!active || mark.owner !== active.id)) {
+                    skippingClosedHistory = true
+                    window.history.go(-mark.depth)
+                    return
+                }
+                const depth = mark ? mark.depth : 0
+                if (depth > active.keys.length) {
+                    // 已关闭的弹框历史不重新打开，前进到残留记录时退回业务页记录。
+                    skippingClosedHistory = true
+                    window.history.go(active.keys.length - depth)
+                    return
+                }
+                const closedKeys = active.keys.slice(depth)
+                active.keys = active.keys.slice(0, depth)
+                const completed = pending
+                pending = null
+                sync(closedKeys)
+                if (completed) completed.resolve()
+            }, true)
+            return {
+                /** 注册页面同步回调，参数为仍打开的弹框 key 数组；返回页面专用操作句柄。 */
+                register(onChange) {
+                    if (active) throw new Error("上一个页面的弹框历史尚未注销")
+                    const owner = { id: Date.now() + "-" + (++serial), keys: [], onChange }
+                    active = owner
+                    return {
+                        // key 是页面内唯一弹框名称；相同弹框重复打开不会重复压栈。
+                        open(key) {
+                            const open = () => {
+                                if (active !== owner || owner.keys.includes(key)) return
+                                owner.keys.push(key)
+                                window.history.pushState({ h5Popup: { owner: owner.id, depth: owner.keys.length } }, "", window.location.href)
+                            }
+                            return pending ? pending.promise.then(open) : Promise.resolve(open())
+                        },
+                        // 关闭指定弹框及其上层弹框，返回 Promise<void>，保持后进先出。
+                        close(key) {
+                            if (active !== owner) return Promise.resolve()
+                            const index = owner.keys.indexOf(key)
+                            return index < 0 ? Promise.resolve() : rewind(index)
+                        },
+                        clear() {
+                            return active === owner ? rewind(0) : Promise.resolve()
+                        },
+                        destroy() {
+                            // 无弹框时同步注销，保证 PJAX 同次替换中下一个页面可以立即注册。
+                            if (active === owner && !owner.keys.length && !pending) {
+                                active = null
+                                return Promise.resolve()
+                            }
+                            return this.clear().then(() => {
+                                if (active === owner) active = null
+                            })
+                        }
+                    }
+                },
+                hasOpen() { return !!(active && active.keys.length) },
+                back() { return active ? rewind(Math.max(0, active.keys.length - 1)) : Promise.resolve() },
+                clear() { return rewind(0) }
+            }
+        })()
+        // 带弹框离开页面时先回收历史，再交给原链接/PJAX，避免返回到已关闭的弹框。
+        document.addEventListener("click", (event) => {
+            const link = event.target.closest && event.target.closest("a[href]")
+            if (!link || !window.h5PopupHistory.hasOpen() || event.defaultPrevented ||
+                event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey ||
+                link.target === "_blank" || link.hasAttribute("download")) return
+            const href = link.getAttribute("href")
+            if (!href || href.startsWith("#") || href.startsWith("javascript:")) return
+            event.preventDefault()
+            event.stopImmediatePropagation()
+            window.h5PopupHistory.clear().then(() => link.click())
+        }, true)
+
        //初始化pjax
        ;(function initPjax() {
            if ($.support.pjax) {
@@ -136,6 +240,10 @@
        })()

        function pjaxReplace(url, data = null) {
+            if (window.h5PopupHistory.hasOpen()) {
+                window.h5PopupHistory.clear().then(() => pjaxReplace(url, data))
+                return
+            }
            $.pjax({
                url: url,
                container: "#container",
@@ -159,6 +267,11 @@
        }

        function historyBack(func) {
+            // 弹框存在时只退一层；等待历史同步期间的重复点击不会穿透到业务页面。
+            if (window.h5PopupHistory.hasOpen()) {
+                window.h5PopupHistory.back()
+                return
+            }
            if (window.history.length > 1) {
                window.history.back()
            } else {
@@ -0,0 +1,253 @@
+<!--#
+layout("/layouts/platform.html"){
+#-->
+
+<div id="app">
+    <guava ref="guava">
+
+        <el-card shadow="never">
+            <search @search="doSearch">
+                <search-item label="年度">
+                    <el-date-picker
+                            v-model="pageForm.year"
+                            type="year"
+                            value-format="yyyy"
+                            placeholder="请选择年度"
+                            style="width: 100%"
+                            @change="doSearch"
+                    ></el-date-picker>
+                </search-item>
+                <search-item label="姓名/工号">
+                    <el-input placeholder="请输入姓名或工号" clearable v-model="pageForm.searchKeyword"
+                              @keyup.enter.native="doSearch">
+                    </el-input>
+                </search-item>
+                <search-item label="慰问类型">
+                    <el-select v-model="pageForm.type" @change="doSearch" style="width: 100%"
+                               placeholder="请选择慰问类型" filterable clearable>
+                        <el-option v-for="item in typeOptions"
+                                   :value="item.id"
+                                   :key="item.id"
+                                   :label="item.name"
+                        ></el-option>
+                    </el-select>
+                </search-item>
+                <search-item label="所属工会">
+                    <el-select v-model="pageForm.unionId" placeholder="请选择所属工会" filterable clearable
+                               @change="doSearch" style="width: 100%">
+                        <el-option
+                                v-for="item in unionList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </search-item>
+                <search-item label="所属单位">
+                    <el-select @change="doSearch"
+                               clearable
+                               filterable
+                               placeholder="请选择单位" style="width: 100%" v-model="pageForm.unitId">
+                        <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unitList"></el-option>
+                    </el-select>
+                </search-item>
+            </search>
+        </el-card>
+
+        <el-card shadow="never">
+            <table-tool label="工会备案">
+                <el-radio-group v-model="pageForm.approval" size="small" @change="doSearch">
+                    <el-radio-button :label="true">已审核</el-radio-button>
+                    <el-radio-button :label="false">未审核</el-radio-button>
+                </el-radio-group>
+            </table-tool>
+            <el-table v-loading="tableLoading" :data="tableData" @sort-change="pageOrder" style="width: 100%">
+                <el-table-column type="index" width="50px" label="序号" :index="indexMethod"></el-table-column>
+                <el-table-column
+                        :label="column.label"
+                        :prop="column.prop"
+                        :key="column.prop"
+                        :width="column.width"
+                        :sortable="column.sortable"
+                        align="center"
+                        header-align="center"
+                        show-overflow-tooltip
+                        v-for="column in tableColumns"
+                >
+                    <template v-slot="{ row }" v-if="column.prop === 'instanceState'">
+                        <enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" fixed="right" width="300px">
+                    <template slot-scope="{row}">
+                        <el-button @click="onView(row)" size="mini" type="primary">查看</el-button>
+                        <el-button v-if="row.taskState === 10" @click="onAudit(row)" size="mini" type="primary">审核</el-button>
+                        <el-button v-if="row.canRevoke" @click="onRevoke(row)" size="mini" type="danger">撤回</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!--#include("/layouts/pagination.html"){}#-->
+        </el-card>
+
+        <template #edit>
+            <condolence-info ref="condolenceInfoRef">
+                <div v-if="showApprovalForm">
+                    <div class="process-title">
+                        {{formData.taskName}}
+                    </div>
+                    <el-form :model="formData" ref="formRef" :rules="formRules" label-width="0" label-suffix="："
+                             class="flow-task-form">
+                        <el-form-item label="审批意见" prop="tf_opinion"
+                                      :rules="[{required:true,message:'必填',trigger:['change','blur']}]">
+                            <user-opinion-textarea v-model="formData.tf_opinion"></user-opinion-textarea>
+                        </el-form-item>
+                        <el-form-item v-if="false" label="电子签名" prop="tf_sign"
+                                      :rules="[{required:true,message:'必填',trigger:['change','blur']}]">
+                            <pc-signature v-if="false" v-model="formData.tf_sign"></pc-signature>
+                        </el-form-item>
+                    </el-form>
+                    <el-row type="flex" justify="end">
+                        <el-button @click="$refs.guava.index()" size="small">取消</el-button>
+                        <el-button @click="handleTaskAction(6)" size="small" type="info" :loading="formLoading">
+                            {{ formLoading ? "提交中..." : "退回到发起人" }}
+                        </el-button>
+                        <el-button @click="handleTaskAction(2)" size="small" type="danger" :loading="formLoading">
+                            {{ formLoading ? "提交中..." : "拒绝申请" }}
+                        </el-button>
+                        <el-button @click="handleTaskAction(1)" size="small" type="primary" :loading="formLoading">
+                            {{ formLoading ? "提交中..." : "同意申请" }}
+                        </el-button>
+                    </el-row>
+                </div>
+            </condolence-info>
+        </template>
+
+    </guava>
+</div>
+
+<script nonce="${cspNonce!}">
+    <!--#include('../common/info.js'){}#-->
+    new Vue({
+        el: "#app",
+        store,
+        mixins: [initTableMixins],
+        components: {
+            "condolence-info": condolenceInfo
+        },
+        data() {
+            return {
+                pageDataUrl: "/platform/condolence/unionRecord/pageData",
+                pageForm: {
+                    approval: false
+                },
+                typeOptions: [],
+                tableColumns: [
+                    {prop: 'helpUserName', label: '慰问对象'},
+                    {prop: 'helpLoginName', label: '慰问对象工号'},
+                    {prop: 'applyUserName', label: '申请人'},
+                    {prop: 'applyUnionName', label: '所属工会'},
+                    {prop: 'applyUnitName', label: '所属单位'},
+                    {prop: 'typeName', label: '慰问类型'},
+                    {prop: 'curTaskName', label: '当前节点'},
+                    {prop: 'instanceState', label: '流程状态'},
+                ],
+                unionList: [],
+                unitList: [],
+                formData: {},
+                showApprovalForm: false,
+                // 审核提交请求期间控制按钮转圈，避免重复提交审批意见。
+                formLoading: false
+            }
+        },
+        methods: {
+            // 查看仅展示已有慰问资料与办理历史，不显示备案操作表单。
+            onView(row) {
+                this.$refs.guava.edit(()=>{
+                    this.showApprovalForm = false
+                    this.$refs.condolenceInfoRef.onOpen(row)
+                })
+            },
+            // 打开当前待办任务，清空上一次填写的备案意见。
+            onAudit(row) {
+                this.$refs.guava.edit(()=>{
+                    this.showApprovalForm = true
+                    this.formData = {
+                        processTaskId: row.taskId,
+                        taskName: row.taskName,
+                        tf_opinion: ""
+                    }
+                    this.$refs.condolenceInfoRef.onOpen(row)
+                })
+            },
+            // val 为 wf 操作类型：1 同意、2 拒绝、6 退回发起人。
+            handleTaskAction(val) {
+                if (this.formLoading) return
+                this.$refs.formRef.validate((valid) => {
+                    if (valid) this.confirmTaskAction(val)
+                })
+            },
+            confirmTaskAction(val) {
+                this.$confirm("您确定要提交吗？", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(() => {
+                    if (this.formLoading) return
+                    this.formLoading = true
+                    this.$axios.post("/flow/common/executeTask", {
+                        data: JSON.stringify({
+                            ...this.formData,
+                            submitType: val
+                        })
+                    }).then((res) => {
+                        if (res.code === 0) {
+                            this.$refs.guava.index()
+                            this.$message.success(res.msg)
+                            this.doSearch()
+                        }
+                    }).finally(() => {
+                        this.formLoading = false
+                    })
+                }).catch(() => {})
+            },
+            // 撤回沿用 wf 公共接口，仅在列表返回 canRevoke 时显示入口。
+            onRevoke(row) {
+                if (this.formLoading) return
+                this.$confirm("您确定要撤回吗？", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "info"
+                }).then(() => {
+                    if (this.formLoading) return
+                    this.formLoading = true
+                    this.$axios.post("/flow/common/revokeTask", {taskId: row.taskId}).then((res) => {
+                        if (res.code === 0) {
+                            this.$message.success(res.msg)
+                            this.doSearch()
+                        }
+                    }).finally(() => {
+                        this.formLoading = false
+                    })
+                }).catch(() => {})
+            },
+            // 获取类型选项供备案列表筛选。
+            queryCondolenceType() {
+                this.$axios.post('/platform/condolence/type/queryCondolenceType')
+                    .then((resp) => {
+                        this.typeOptions = resp.data
+                    })
+            },
+        },
+        created() {
+            // 下拉数据沿用业务工具，避免异步请求阻塞列表初次加载。
+            this.$businessTool.listUnion().then((list) => { this.unionList = list })
+            this.$businessTool.listUnit().then((list) => { this.unitList = list })
+            this.queryCondolenceType()
+            this.pageData()
+        }
+    })
+</script>
+
+<!--#
+}
+#-->
@@ -0,0 +1,246 @@
+<!--#
+layout("/layouts/platform_h5.html"){
+#-->
+
+<style scoped>
+
+</style>
+
+<div id="app">
+    <van-nav-bar title="工会备案" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
+
+    <van-sticky offset-top="46px">
+        <van-search
+            v-model="pageForm.searchKeyword"
+            :show-action="false"
+            :reverse-color="false"
+            input-align="left"
+            placeholder="请输入姓名或者工号搜索"
+            @search="doSearch"
+        ></van-search>
+        <van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
+            <van-dropdown-item ref="yearFilterRef" :options="yearOptions" v-model="pageForm.year"
+                               @open="openFilter('year')" @close="closeFilter('year')" @change="doSearch"></van-dropdown-item>
+            <van-dropdown-item ref="typeFilterRef" @open="openFilter('type')" @close="closeFilter('type')" v-model="pageForm.type" :options="typeOptions" :multiple="false"
+                               @change="doSearch"></van-dropdown-item>
+        </van-dropdown-menu>
+        <van-tabs v-model="pageForm.approvalText"
+                  @change="onApprovalChange">
+            <van-tab title="已审核" name="1"></van-tab>
+            <van-tab title="未审核" name="0"></van-tab>
+        </van-tabs>
+    </van-sticky>
+
+    <table-list api="/platform/condolence/unionRecord/pageData" :page_form.sync="pageForm" ref="tableListRef" @ready="onReady">
+        <template v-slot="{index,row}">
+            <table-column label="慰问对象">{{row.helpUserName}}</table-column>
+            <table-column label="慰问对象工号">{{row.helpLoginName}}</table-column>
+            <table-column label="申请人">{{row.applyUserName}}</table-column>
+            <table-column label="所属工会">{{row.applyUnionName}}</table-column>
+            <table-column label="所属单位">{{row.applyUnitName}}</table-column>
+            <table-column label="慰问类型">{{row.typeName}}</table-column>
+            <table-column label="当前节点">{{row.curTaskName}}</table-column>
+        </template>
+        <template #actions="{index,row}">
+            <div class="action-btn" @click="onView(row)">
+                <i class="fa fa-eye"></i>
+                <span>查看</span>
+            </div>
+            <div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
+                <i class="fa fa-edit"></i>
+                <span>审核</span>
+            </div>
+            <div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
+                <i class="fa fa-reply"></i>
+                <span>撤回</span>
+            </div>
+        </template>
+    </table-list>
+
+    <info ref="infoRef">
+        <div v-if="showApprovalForm">
+            <div class="process-title">{{formData.taskName}}</div>
+            <van-form ref="formRef">
+                <van-field
+                    v-model="formData.tf_opinion"
+                    name="tf_opinion"
+                    label="审批意见"
+                    placeholder="请输入审批意见"
+                    :rules="[{ required: true, message: '请填写审批意见' }]"
+                    required
+                    maxlength="100"
+                    show-word-limit
+                ></van-field>
+                <van-cell-group v-if="false" title="电子签名" class="form-section">
+                    <van-field v-if="false" class="more-text" name="tf_sign" label="">
+                        <template #input>
+                            <h5-signature v-if="false" v-model="formData.tf_sign" slot="input"></h5-signature>
+                        </template>
+                    </van-field>
+                </van-cell-group>
+            </van-form>
+            <div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
+                <van-button type="danger" block @click="handleTaskAction(6)" :loading="formLoading">
+                    {{ formLoading ? "提交中..." : "退回" }}
+                </van-button>
+                <van-button type="danger" block @click="handleTaskAction(2)" :loading="formLoading">
+                    {{ formLoading ? "提交中..." : "不同意" }}
+                </van-button>
+                <van-button type="primary" block @click="handleTaskAction(1)" :loading="formLoading">
+                    {{ formLoading ? "提交中..." : "同意" }}
+                </van-button>
+            </div>
+        </div>
+    </info>
+    <van-dialog v-model="confirmVisible" title="提示" :message="confirmMessage" show-cancel-button
+                :close-on-popstate="false" @confirm="onConfirm"></van-dialog>
+</div>
+
+<script nonce="${cspNonce!}">
+    <!--#include('../common/info.js'){}#-->
+    new Vue({
+        el: "#app",
+        store,
+        components: { info: condolenceInfo },
+        data() {
+            return {
+                pageForm: {
+                    pageNumber: 1,
+                    pageSize: 10,
+                    totalCount: 0,
+                    searchKeyword: '',
+                    approvalText: "0",
+                    approval: false,
+                    year: new Date().getFullYear(),
+                    type: null
+                },
+                typeOptions: [{text: "全部慰问类型", value: null}],
+                yearOptions: [],
+                formData: {},
+                showApprovalForm: false,
+                formLoading: false,
+                confirmVisible: false,
+                confirmMessage: "",
+                pendingAction: null
+            }
+        },
+        watch: {
+            // 确认弹框与详情使用同一历史栈；取消和系统返回都只关闭最上层。
+            confirmVisible(visible) {
+                if (!this.popupScope) return
+                if (visible) this.popupScope.open("confirm")
+                else this.popupScope.close("confirm")
+            }
+        },
+        methods: {
+            // 年度、类型筛选同样是弹层，关闭时也须回收对应历史记录。
+            openFilter(key) {
+                if (this.popupScope) this.popupScope.open(key)
+            },
+            closeFilter(key) {
+                if (this.popupScope) this.popupScope.close(key)
+            },
+            onReady() {
+                this.queryCondolenceType()
+                this.doSearch()
+            },
+            onApprovalChange(val) {
+                this.$set(this.pageForm, "approval", val === "1")
+                this.doSearch()
+            },
+            // 查看复用慰问详情与办理历史，插槽仅在审核时展示意见表单。
+            onView(row) {
+                if (this.formLoading) return
+                this.showApprovalForm = false
+                this.$refs.infoRef.onOpen(row)
+            },
+            onApproval(row) {
+                if (this.formLoading) return
+                this.formData = {processTaskId: row.taskId, taskName: row.taskName, tf_opinion: ""}
+                this.showApprovalForm = true
+                this.$refs.infoRef.onOpen(row)
+            },
+            // val 为 wf 操作类型：1 同意、2 拒绝、6 退回发起人；校验通过才允许确认。
+            handleTaskAction(val) {
+                if (this.formLoading) return
+                this.$refs.formRef.validate().then(() => {
+                    this.pendingAction = {submitType: val, data: {...this.formData}}
+                    this.confirmMessage = "您确定要提交吗？"
+                    this.confirmVisible = true
+                }).catch(() => {})
+            },
+            onRevoke(row) {
+                if (this.formLoading) return
+                this.pendingAction = {taskId: row.taskId}
+                this.confirmMessage = "您确定要撤回吗？"
+                this.confirmVisible = true
+            },
+            // 先回退确认层历史再执行请求；成功后清理详情层，失败时保留表单便于重试。
+            onConfirm() {
+                if (this.formLoading || !this.pendingAction) return
+                const action = this.pendingAction
+                this.pendingAction = null
+                this.formLoading = true
+                this.popupScope.close("confirm").then(() => {
+                    const revoke = action.taskId != null
+                    const url = revoke ? "/flow/common/revokeTask" : "/flow/common/executeTask"
+                    const params = revoke ? {taskId: action.taskId} : {
+                        data: JSON.stringify({...action.data, submitType: action.submitType})
+                    }
+                    return this.$axios.post(url, params)
+                }).then((res) => {
+                    if (res.code === 0) {
+                        return this.popupScope.clear().then(() => {
+                            this.$toast.success(res.msg)
+                            this.doSearch()
+                        })
+                    }
+                }).finally(() => { this.formLoading = false })
+            },
+            queryCondolenceType() {
+                return this.$axios.post('/platform/condolence/type/queryCondolenceType').then((res) => {
+                    if (res.code === 0) {
+                        this.typeOptions = [{text: "全部慰问类型", value: null}]
+                            .concat((res.data || []).map((v) => ({text: v.name, value: v.id})))
+                    }
+                })
+            },
+            // H5 分页和加载状态由 table-list 管理，当前页面仅发起业务筛选刷新。
+            doSearch() {
+                this.$nextTick(() => { this.$refs.tableListRef.doSearch() })
+            }
+        },
+        created() {
+            this.$set(this.pageForm, "approvalText", this.pageForm.approval ? "1" : "0")
+            for (let year = new Date().getFullYear(); year >= new Date().getFullYear() - 5; year--) {
+                this.yearOptions.push({text: year + "年", value: year})
+            }
+            // 只通过全局管理器同步弹框，不在业务页面注册 popstate。
+            this.popupScope = window.h5PopupHistory.register((keys, closedKeys) => {
+                if (closedKeys.includes("confirm")) this.confirmVisible = false
+                if (closedKeys.includes("detail") && this.$refs.infoRef) this.$refs.infoRef.onClose()
+                if (closedKeys.includes("year") && this.$refs.yearFilterRef) this.$refs.yearFilterRef.toggle(false)
+                if (closedKeys.includes("type") && this.$refs.typeFilterRef) this.$refs.typeFilterRef.toggle(false)
+            })
+        },
+        mounted() {
+            // 复用公共详情组件，观察其开关即可覆盖关闭按钮、遮罩和提交后的关闭。
+            this.stopDetailWatch = this.$watch(() => this.$refs.infoRef.visible, (visible) => {
+                if (visible) this.popupScope.open("detail")
+                else this.popupScope.close("detail")
+            })
+            // PJAX 替换 DOM 不会自动销毁 Vue，需要显式释放当前页面的同步回调。
+            this.onPageReplace = () => { this.$destroy() }
+            $(document).on("pjax:beforeReplace.unionRecord", this.onPageReplace)
+        },
+        beforeDestroy() {
+            if (this.stopDetailWatch) this.stopDetailWatch()
+            $(document).off("pjax:beforeReplace.unionRecord", this.onPageReplace)
+            this.popupScope.destroy()
+        }
+    })
+</script>
+
+<!--#
+}
+#-->