cyberwin_fairyalliance_webquery 未来之窗昭和仙君

示例：合同模板渲染

本示例展示了如何使用 `未来之窗_文档_模板渲染高级` 功能生成合同文档。页面提供了模式选择，支持 `one` 模式（无前缀、带前缀）和 `com` 模式（多层级数据）。

页面结构如下：

• 顶部标题：显示合同生成器名称。
• 模式选择：可选择不同的渲染模式。
• 交互按钮：
  • `重置模板 (back)`：点击后刷新页面，将模板重置为原始占位符状态。
  • `填充信息 (done)`：根据选择的模式，将占位符替换为实际数据。
• 合同区域：包含合同的模板内容，有不同模式的占位符。
• 测试区域：该区域的占位符不会被替换。

数据部分定义了不同模式下的演示数据：

• `contractDataOne`：用于 `one` 模式，包含单层数据。
• `contractDataCom`：用于 `com` 模式，包含多层级数据。

按钮逻辑：

• `handleBack` 函数：点击 `重置模板 (back)` 按钮时调用，刷新页面并提示模板已重置。
• `handleDone` 函数：点击 `填充信息 (done)` 按钮时调用，根据选择的模式调用相应的渲染方法，并提示填充完成。

代码示例：

                    
// one模式数据（单层）
const contractDataOne = {
    lessor: "王某某",
    lessee: "李某某",
    address: "XX市XX区XX路88号",
    area: "50",
    startDate: "2026年3月1日",
    endDate: "2027年2月28日",
    leaseTerm: "12",
    rent: "8000",
    signDate: "2026年2月20日"
};

// com模式数据（多层级）
const contractDataCom = {
    addressInfo: { detail: "XX市XX区XX路88号（多层级）" },
    priceInfo: { monthly: "8000元（多层级）" },
    signInfo: { lessor: "王某某（多层级）", lessee: "李某某（多层级）", date: "2026年2月20日（多层级）" }
};

// 重置模板
function handleBack() {
    location.reload();
    alert("模板已重置为原始占位符状态！");
}

// 填充信息（根据选择的模式调用不同逻辑）
function handleDone() {
    // 获取选中的模式
    var selectedMode = document.querySelector('input[name="replaceMode"]:checked').value;
    
    if (selectedMode === "one") {
        // one模式（无前缀）
        $cq("#contractArea").未来之窗_文档_模板渲染高级(contractDataOne, "one");
        alert("one模式（无前缀）填充完成！");
    } else if (selectedMode === "one-prefix") {
        // one模式（带前缀：contract）
        $cq("#contractArea").未来之窗_文档_模板渲染高级(contractDataOne, "one", "contract");
        alert("one模式（带前缀contract）填充完成！");
    } else if (selectedMode === "com") {
        // com模式（多层级）
        $cq("#contractArea").未来之窗_文档_模板渲染高级(contractDataCom, "com");
        alert("com模式（多层级）填充完成！");
    }
}

// 绑定按钮事件
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('backBtn').addEventListener('click', handleBack);
    document.getElementById('doneBtn').addEventListener('click', handleDone);
});