为了在现有的 JavaScript 代码中为合同模块添加四个按钮（”全部”、”已结清”、”停催” 和 “诉讼”），并实现点击切换功能，你可以通过以下步骤来完成：

1. 定义按钮：我们需要创建按钮并将它们添加到 DOM 中。
2. 状态管理：我们需要一个变量来管理当前显示的贷款状态。
3. 筛选逻辑：根据选中的按钮，筛选显示的合同信息。

以下是修改后的代码示例。请注意，我假设你将在合同模块的数据展示部分执行这些更改。

$.ajax({
    method: "POST",
    url: "../d/detail/keyInfo",
    data: { custId: custId },
    success: function(result) {
        var jsonRes = JSON.parse(result);
        
        // 定义按钮状态
        const loanStatusButtons = ['all', 'settled', 'stopCollection', 'litigation'];
        let currentLoanStatus = 'all'; // 默认状态为全

        // 创建按钮并附加事件
        function createLoanStatusButtons() {
            const buttonContainer = document.createElement('div');
            buttonContainer.classList.add('loan-status-buttons');

            loanStatusButtons.forEach(status => {
                const button = document.createElement('button');
                button.innerText = status === 'settled' ? '已结清' : 
                                   status === 'stopCollection' ? '停催' : 
                                   status === 'litigation' ? '诉讼' : 
                                   '全部';
                
                button.onclick = () => {
                    currentLoanStatus = status;
                    renderLoans(); // 更新显示的贷款数据
                };
                
                buttonContainer.appendChild(button);
            });

            document.body.appendChild(buttonContainer); // 假设你要将其添加到 body
        }

        createLoanStatusButtons(); // 初始化按钮

        function renderLoans() {
            for (const item of jsonRes) {
                if (item.code === 'loan') {  
                    const filteredLoans = item.child.filter(loan => {
                        switch (currentLoanStatus) {
                            case 'settled':
                                return loan.status === "settled"; // 假设存在status属性标识是否已结清
                            case 'stopCollection':
                                return loan.status === "stopCollection"; // 同上
                            case 'litigation':
                                return loan.status === "litigation"; // 同上
                            case 'all':
                            default:
                                return true; // 全部返回true
                        }
                    });
                    
                    item.child = filteredLoans;  // 更新贷款信息为过滤后的结果
                    
                    for (const loan of filteredLoans) {  // 渲染过滤后的贷款信息
                        const Index = loan.path.split('.')[1];
                        let contractCode;
                        me.overDueInfoIndex[loan.path] = Index;
                        const child_OverduePeriod = loan.child.find(val => val.code === "overduePeriod");
                        const child_LoanCharacter = loan.child.find(val => val.code === "loanCharacter");
                        
                        if (child_LoanCharacter && child_LoanCharacter.value === "Y") {
                            Object.assign(authMapLoan, { totalPaymentAmount: '' });
                        }
                        
                        const child_ProductLine = loan.child.find(val => val.code === "productLine");
                        if (child_ProductLine && !child_ProductLine.ifVirtual) {
                            Object.assign(authMapLoan, { installmentLoanAmount: '' });
                            const productLine = child_ProductLine.line;

                            loan.child.forEach(child => {
                                if (child.code == 'overduePeriod') {
                                    if (child.title.includes("（") && child.title.includes("）")) {
                                        child.title = child.title.replace('（', '(').replace('）', ')');
                                    }
                                }
                                
                                if (child.code == 'loanStatus' && child_OverduePeriod && child_OverduePeriod.value == '0') {
                                    child.valueMap[child.value] += `(${lang('NO_DEBT')})`;
                                }
                                
                                if (child.code === 'contractCode') {
                                    contractCode = child.value;
                                    me.loanPathContractCodes[loan.path] = child.value;
                                }

                                if (!(child.code in authMapLoan)) arr.push(child);
                            });
                        }
                    }
                }
            }

            me.keyInfo = JSON.parse(result)
            me.form.initForm(jsonRes)
        }

        renderLoans(); // 初始渲染所有贷款
        
    }
});

说明：

• 创建按钮：createLoanStatusButtons 函数动态创建了四个按钮，并给每个按钮绑定了点击事件。
• 状态管理：使用 currentLoanStatus 来跟踪当前选择的状态。
• 筛选逻辑：在 renderLoans 函数中，根据所选的状态对贷款进行筛选，并更新展示的信息。

请确保替换适合你的 HTML 结构和样式。如果还需其他帮助，请告诉我！


内容由零声教学AI助手提供，问题来源于学员提问