1.新增：费用明细-编辑页面，费用明细-添加页面，费用明细-更多页面

liubp

2025-12-22 0677faf2ae8940aaafae3d394a8ea1100e070947

1.新增：费用明细-编辑页面，费用明细-添加页面，费用明细-更多页面

2.新增：角色权限页面新增页面权限按钮、页面权限页面

 public/components/frame/privilegeTree/privilegeTree.js

@@ -125,6 +125,49 @@
                        $that.deletePrivilege(_selectPrivileges);
                    }
                });
                // 在树加载完成后，为第三级节点添加"权限"按钮
                $('#jstree_privilege').on("ready.jstree", function (e, data) {
                    $that._addPermissionButtons();
                });
                // 当树节点展开时，为展开的第三级节点添加按钮
                $('#jstree_privilege').on("open_node.jstree", function (e, data) {
                    setTimeout(function () {
                        $that._addPermissionButtons();
                    }, 100);
                });
                // 当树刷新时，重新添加按钮
                $('#jstree_privilege').on("refresh.jstree", function (e, data) {
                    setTimeout(function () {
                        $that._addPermissionButtons();
                    }, 100);
                });
            },
            _addPermissionButtons: function () {
                // 获取所有第三级节点（id以p_开头）
                $('#jstree_privilege').find('li[id^="p_"]').each(function () {
                    let $node = $(this);
                    let $anchor = $node.find('> a.jstree-anchor');
                    // 检查是否已经添加过按钮
                    if ($anchor.next('.permission-btn').length === 0) {
                        // 创建权限按钮
                        let $btn = $('<button class="permission-btn" style="margin-left: 10px; padding: 2px 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; color: #333;">权限</button>');
                        // 获取权限ID
                        let nodeId = $node.attr('id');
                        let pId = nodeId.substring(2); // 去掉"p_"前缀
                        // 绑定点击事件
                        $btn.on('click', function (e) {
                            e.stopPropagation(); // 阻止事件冒泡，避免触发树节点的选择
                            // 获取当前页面的参数
                            let pgId = vc.component.privilegeTreeInfo._currentPgId;
                            let communityId = vc.getCurrentCommunity().communityId;
                            // 跳转到role-a页面，传递所有参数
                            let params = 'pId=' + pId + '&pgId=' + pgId + '&communityId=' + communityId + '&type=all';
                            vc.jumpToPage('/#/pages/frame/role/role-a?' + params);
                        });
                        // 将按钮插入到节点后面
                        $anchor.after($btn);
                    }
                });
            },
            _doJsTreeData: function (_privileges) {
                let _mGroupTree = [];

 public/css/vc.css

@@ -1289,6 +1289,8 @@
}

.cost-detail-container .search-bar label {
    position: relative;
    top: 4px;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
@@ -1297,13 +1299,14 @@

.cost-detail-container .search-bar input,
.cost-detail-container .search-bar select {
    padding: 6px 12px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
    height: 32px;
    min-width: 150px;
    background: #fff;
    line-height: 32px;
}

.cost-detail-container .search-bar .queryDate {
@@ -1548,3 +1551,60 @@
#costDetailTableHead th{
    background-color: rgb(233, 243, 255);
}

.form-container {
    margin: 20px;
    font-family: "微软雅黑", Arial, sans-serif;
}
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 15px;
}
.form-label {
    width: 85px;
    text-align: right;
    padding-top: 8px;
}
.form-input {
    padding: 6px;
    width: 220px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.form-note {
    color: red;
    font-size: 12px;
}
.form-container .radio-group {
    display: flex;
    gap: 12px;
}
.form-container select {
    padding: 6px;
    width: 100px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.form-container .btn-group {
    margin-left: 95px;
    margin-top: 25px;
}
.form-container .btn-cancel {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 12px;
}
.form-container .btn-save {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
}

 public/pages/frame/role/role-a/role-a.html

New file
@@ -0,0 +1,24 @@
<h1 style="font-weight: 600;">页面权限配置</h1>
<div class="role-a-container">
    <h3>全部</h3>
    <div class="role-a-checkbox">
        <label>全部</label>
        <input type="checkbox" name="all" id="all">
    </div>
    <h3>按钮</h3>
    <div class="role-a-checkbox" style="gap: 10px; display: flex; align-items: center;">
        <label>全部</label>
        <input type="checkbox" id="button-all">
    </div>
    <div id="button-container"></div>
    <h3>表头</h3>
    <div class="role-a-checkbox" style="gap: 10px; display: flex; align-items: center;">
        <label>全部</label>
        <input type="checkbox" id="data-all">
    </div>
    <div id="data-container"></div>
    <div class="role-a-buttons">
        <button type="button" class="btn btn-primary" id="save">保存</button>
        <button type="button" class="btn btn-primary" id="cancel" v-on:click="goBack">返回</button>
    </div>
</div>

 public/pages/frame/role/role-a/role-a.js

New file
@@ -0,0 +1,298 @@
(function (vc) {
    vc.extends({
        data: {
            roleAInfo: {
                all: false,
                button: false,
                header: false
            },
            pgId: '', // 保存角色编码
            privilegeData: [] // 保存权限数据
        },
        _initMethod: function () {
            // 获取URL参数
            let pId = '';
            let pgId = '';
            let communityId = '';
            let type = '';
            
            // 优先从 hash 中获取参数（单页应用使用 hash 路由）
            const hash = location.hash;
            const search = location.search;
            
            // 先尝试从 hash 中获取
            if (hash && hash.indexOf('?') !== -1) {
                const hashParams = hash.substring(hash.indexOf('?') + 1);
                const params = hashParams.split('&');
                for (let i = 0; i < params.length; i++) {
                    const param = params[i].split('=');
                    const key = param[0];
                    const value = decodeURIComponent(param[1] || '');
                    if (key === 'pId') {
                        pId = value;
                    } else if (key === 'pgId') {
                        pgId = value;
                    } else if (key === 'communityId') {
                        communityId = value;
                    } else if (key === 'type') {
                        type = value;
                    }
                }
            }
            
            // 如果 hash 中没有，尝试从 search 中获取
            if (!pId) {
                pId = vc.getParam('pId') || '';
            }
            if (!pgId) {
                pgId = vc.getParam('pgId') || '';
            }
            if (!communityId) {
                communityId = vc.getParam('communityId') || '';
            }
            if (!type) {
                type = vc.getParam('type') || '';
            }
            
            // 如果缺少必要参数，使用默认值或从当前社区获取
            if (!communityId) {
                communityId = vc.getCurrentCommunity().communityId;
            }
            
            // 保存 pgId 到 data 中
            vc.component.pgId = pgId;
            
            // 调用接口
            if (pgId && communityId) {
                let param = {
                    params: {
                        pgId: pgId,
                        communityId: communityId,
                        pId: pId,
                        type: 'all'
                    }
                };
                
                vc.http.apiGet('/query.privilegeGroup.noAddPrivilege',
                    param,
                    function (json) {
                        // 接口调用成功处理
                        try {
                            // 判断 json 的类型，如果已经是对象则直接使用，否则进行解析
                            let data = typeof json === 'string' ? JSON.parse(json) : json;
                            vc.component.privilegeData = data;
                            vc.component.renderPrivileges(data);
                            vc.component.initCheckboxEvents();
                        } catch (e) {
                            console.error('解析数据失败:', e);
                            console.error('原始数据:', json);
                            console.error('数据类型:', typeof json);
                            vc.toast('数据解析失败');
                        }
                    },
                    function () {
                        console.log('请求失败处理');
                        vc.toast('加载数据失败');
                    }
                );
            } else {
                console.warn('缺少必要参数，无法调用接口');
            }
        },
        methods: {
            goBack: function () {
                vc.goBack();
            },
            // 渲染权限复选框
            renderPrivileges: function (data) {
                const buttonContainer = document.getElementById('button-container');
                const dataContainer = document.getElementById('data-container');
                
                // 清空容器
                if (buttonContainer) buttonContainer.innerHTML = '';
                if (dataContainer) dataContainer.innerHTML = '';
                
                // 遍历数据，根据 type 创建对应的复选框
                data.forEach(function (item) {
                    const checkboxDiv = document.createElement('div');
                    checkboxDiv.className = 'role-a-checkbox';
                    checkboxDiv.style.gap = '10px';
                    
                    const label = document.createElement('label');
                    label.textContent = item.pName;
                    
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.name = 'privilege';
                    checkbox.value = item.pId;
                    checkbox.setAttribute('data-pid', item.pId);
                    checkbox.setAttribute('data-type', item.type);
                    
                    checkboxDiv.appendChild(label);
                    checkboxDiv.appendChild(checkbox);
                    
                    // 根据 type 添加到对应容器
                    if (item.type === '按钮') {
                        if (buttonContainer) {
                            buttonContainer.appendChild(checkboxDiv);
                        }
                    } else if (item.type === '数据') {
                        if (dataContainer) {
                            dataContainer.appendChild(checkboxDiv);
                        }
                    }
                });
            },
            // 初始化复选框事件
            initCheckboxEvents: function () {
                const self = this;
                
                // 全部复选框
                const allCheckbox = document.getElementById('all');
                if (allCheckbox) {
                    allCheckbox.addEventListener('change', function () {
                        const isChecked = this.checked;
                        // 选中所有复选框
                        const allCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]');
                        allCheckboxes.forEach(function (cb) {
                            cb.checked = isChecked;
                        });
                        // 同时更新按钮和数据区域的"全部"复选框
                        const buttonAll = document.getElementById('button-all');
                        const dataAll = document.getElementById('data-all');
                        if (buttonAll) buttonAll.checked = isChecked;
                        if (dataAll) dataAll.checked = isChecked;
                    });
                }
                
                // 按钮区域全部复选框
                const buttonAllCheckbox = document.getElementById('button-all');
                if (buttonAllCheckbox) {
                    buttonAllCheckbox.addEventListener('change', function () {
                        const isChecked = this.checked;
                        // 选中按钮区域所有复选框
                        const buttonCheckboxes = document.querySelectorAll('#button-container input[type="checkbox"][name="privilege"]');
                        buttonCheckboxes.forEach(function (cb) {
                            cb.checked = isChecked;
                        });
                        // 检查是否需要更新"全部"复选框
                        self.updateAllCheckbox();
                    });
                }
                
                // 数据区域全部复选框
                const dataAllCheckbox = document.getElementById('data-all');
                if (dataAllCheckbox) {
                    dataAllCheckbox.addEventListener('change', function () {
                        const isChecked = this.checked;
                        // 选中数据区域所有复选框
                        const dataCheckboxes = document.querySelectorAll('#data-container input[type="checkbox"][name="privilege"]');
                        dataCheckboxes.forEach(function (cb) {
                            cb.checked = isChecked;
                        });
                        // 检查是否需要更新"全部"复选框
                        self.updateAllCheckbox();
                    });
                }
                
                // 监听所有权限复选框的变化，更新"全部"复选框状态
                const privilegeCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]');
                privilegeCheckboxes.forEach(function (checkbox) {
                    checkbox.addEventListener('change', function () {
                        self.updateAllCheckbox();
                        self.updateSectionAllCheckbox();
                    });
                });
                
                // 保存按钮事件
                const saveButton = document.getElementById('save');
                if (saveButton) {
                    saveButton.addEventListener('click', function () {
                        self.savePrivileges();
                    });
                }
            },
            // 更新"全部"复选框状态
            updateAllCheckbox: function () {
                const allCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]');
                const allChecked = Array.from(allCheckboxes).every(function (cb) {
                    return cb.checked;
                });
                const allCheckbox = document.getElementById('all');
                if (allCheckbox) {
                    allCheckbox.checked = allChecked;
                }
            },
            // 更新区域"全部"复选框状态
            updateSectionAllCheckbox: function () {
                // 更新按钮区域
                const buttonCheckboxes = document.querySelectorAll('#button-container input[type="checkbox"][name="privilege"]');
                const buttonAllChecked = buttonCheckboxes.length > 0 && Array.from(buttonCheckboxes).every(function (cb) {
                    return cb.checked;
                });
                const buttonAll = document.getElementById('button-all');
                if (buttonAll) {
                    buttonAll.checked = buttonAllChecked;
                }
                
                // 更新数据区域
                const dataCheckboxes = document.querySelectorAll('#data-container input[type="checkbox"][name="privilege"]');
                const dataAllChecked = dataCheckboxes.length > 0 && Array.from(dataCheckboxes).every(function (cb) {
                    return cb.checked;
                });
                const dataAll = document.getElementById('data-all');
                if (dataAll) {
                    dataAll.checked = dataAllChecked;
                }
            },
            // 保存权限
            savePrivileges: function () {
                const self = this;
                // 获取所有选中的复选框
                const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"][name="privilege"]:checked');
                
                // 构建请求数据
                const pIds = [];
                checkedCheckboxes.forEach(function (checkbox) {
                    pIds.push({
                        pId: checkbox.value
                    });
                });
                
                const requestData = {
                    pgId: vc.component.pgId,
                    pIds: pIds
                };
                
                // 调用保存接口
                vc.http.apiPost('/add.privilege.PrivilegeGroup',
                    requestData,
                    {},
                    function (json) {
                        try {
                            // 判断 json 的类型，如果已经是对象则直接使用，否则进行解析
                            let result = typeof json === 'string' ? JSON.parse(json) : json;
                            vc.toast('保存成功');
                            console.log('保存成功:', result);
                            // 保存成功后返回上一页
                            setTimeout(function () {
                                vc.goBack();
                            }, 1000);
                        } catch (e) {
                            console.error('解析响应失败:', e);
                            vc.toast('保存成功');
                            // 保存成功后返回上一页
                            setTimeout(function () {
                                vc.goBack();
                            }, 1000);
                        }
                    },
                    function (error) {
                        console.error('保存失败:', error);
                        vc.toast('保存失败');
                    }
                );
            }
        }
    });
})(window.vc);

 public/pages/property/costDetail/add/add.html

New file
@@ -0,0 +1,108 @@
<div class="form-container">
    <h2 style="font-weight: 600;">添加</h2>
    <form>
        <!-- 流转编码 + 日期 -->
        <div class="form-row">
            <label class="form-label" for="flowCode">流转编码</label>
            <input type="text" id="flowCode" class="form-input" placeholder="请输入">
            <label class="form-label" for="date">日期</label>
            <input type="date" id="date" class="form-input" placeholder="yyyy/mm/日">
        </div>

        <!-- 小区名称 + 小区编码（带备注） -->
        <div class="form-row">
            <label class="form-label" for="communityName">小区名称</label>
            <input type="text" id="communityName" class="form-input" placeholder="请输入">
            <label class="form-label">小区编码</label>
            <input type="text" id="communityCode" class="form-input" placeholder="请输入">
        </div>

        <!-- 工程内容 -->
        <div class="form-row">
            <label class="form-label" for="projectContent">工程内容</label>
            <input type="text" id="projectContent" class="form-input" placeholder="请输入" style="width: 555px;">
        </div>

        <!-- 管理处金额 + 是否盖章 -->
        <div class="form-row">
            <label class="form-label" for="mgmtAmount">管理处金额</label>
            <input type="text" id="mgmtAmount" class="form-input" placeholder="请输入">
            <span>元</span>
            <label class="form-label">是否盖章</label>
            <div class="radio-group">
                <input type="radio" id="mgmtSealYes" name="mgmtSeal" checked>
                <label for="mgmtSealYes" style="margin-top: 8px;">是</label>
                <input type="radio" id="mgmtSealNo" name="mgmtSeal">
                <label for="mgmtSealNo" style="margin-top: 8px;">否</label>
            </div>
        </div>

        <!-- 业委会金额 + 审价金额 + 是否盖章 + 签报部门 -->
        <div class="form-row">
            <label class="form-label" for="committeeAmount">业委会金额</label>
            <input type="text" id="committeeAmount" class="form-input" placeholder="请输入">
            <span>元</span>
            <label class="form-label" for="auditAmount">审价金额</label>
            <input type="text" id="auditAmount" class="form-input" placeholder="请输入">
            <span>元</span>
            <label class="form-label">是否盖章</label>
            <div class="radio-group">
                <input type="radio" id="committeeSealYes" name="committeeSeal" checked>
                <label for="committeeSealYes" style="margin-top: 8px;">是</label>
                <input type="radio" id="committeeSealNo" name="committeeSeal">
                <label for="committeeSealNo" style="margin-top: 8px;">否</label>
            </div>
            <label class="form-label" for="approveDept">签报部门</label>
            <select id="approveDept" class="form-select">
                <option value="1">1</option>
            </select>
        </div>

        <!-- 分摊范围 + 维修类型 -->
        <div class="form-row">
            <label class="form-label">分摊范围</label>
            <div class="radio-group">
                <input type="radio" id="shareBuilding" name="shareScope" checked>
                <label for="shareBuilding" style="margin-top: 8px;">幢</label>
                <input type="radio" id="shareAll" name="shareScope">
                <label for="shareAll" style="margin-top: 8px;">全体</label>
            </div>
            <label class="form-label" for="repairType">维修类型</label>
            <select id="repairType" class="form-select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>

        <!-- 基金与设施 + 业主大会范围 + 门牌幢范围 -->
        <div class="form-row">
            <label class="form-label">基金与设施</label>
            <div class="radio-group">
                <input type="radio" id="fundRepair" name="fundType" checked>
                <label for="fundRepair" style="margin-top: 8px;">维修资金</label>
            </div>
            <label class="form-label" for="ownerScope">业主大会范围</label>
            <select id="ownerScope" class="form-select">
                <option value="multi">多选</option>
            </select>
            <label class="form-label" for="buildingScope">门牌幢范围</label>
            <select id="buildingScope" class="form-select">
                <option value="multi">多选</option>
            </select>
        </div>

        <div class="form-row">
            <div class="radio-group" style="margin-left: 100px;">
            <input type="radio" id="fundPublic" name="fundType">
                <label for="fundPublic" style="margin-top: 8px;">公共收益</label>
            </div>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group">
            <button type="button" class="btn-cancel">取消</button>
            <button type="button" class="btn-save">保存</button>
        </div>
    </form>
</div>

 public/pages/property/costDetail/add/add.js

 public/pages/property/costDetail/costDetail.html

@@ -9,7 +9,7 @@
        </div>
        <div>
            <label>小区：</label>
            <select class="form-control" v-model="costDetailInfo.conditions.communityName" style="text-align: center;line-height: 0px;">
            <select class="form-control" v-model="costDetailInfo.conditions.communityName">
                <option value="">请选择</option>
                <option value="鱼塘花园A区">鱼塘花园A区</option>
            </select>

 public/pages/property/costDetail/detail/detail.html

 public/pages/property/costDetail/detail/detail.js

 public/pages/property/costDetail/edit/edit.html

New file
@@ -0,0 +1,108 @@
<div class="form-container">
    <h2 style="font-weight: 600;">编辑</h2>
    <form>
        <!-- 流转编码 + 日期 -->
        <div class="form-row">
            <label class="form-label" for="flowCode">流转编码</label>
            <input type="text" id="flowCode" class="form-input" placeholder="请输入">
            <label class="form-label" for="date">日期</label>
            <input type="date" id="date" class="form-input" placeholder="yyyy/mm/日">
        </div>

        <!-- 小区名称 + 小区编码（带备注） -->
        <div class="form-row">
            <label class="form-label" for="communityName">小区名称</label>
            <input type="text" id="communityName" class="form-input" placeholder="请输入">
            <label class="form-label">小区编码</label>
            <input type="text" id="communityCode" class="form-input" placeholder="请输入">
        </div>

        <!-- 工程内容 -->
        <div class="form-row">
            <label class="form-label" for="projectContent">工程内容</label>
            <input type="text" id="projectContent" class="form-input" placeholder="请输入" style="width: 555px;">
        </div>

        <!-- 管理处金额 + 是否盖章 -->
        <div class="form-row">
            <label class="form-label" for="mgmtAmount">管理处金额</label>
            <input type="text" id="mgmtAmount" class="form-input" placeholder="请输入">
            <span>元</span>
            <label class="form-label">是否盖章</label>
            <div class="radio-group">
                <input type="radio" id="mgmtSealYes" name="mgmtSeal" checked>
                <label for="mgmtSealYes" style="margin-top: 8px;">是</label>
                <input type="radio" id="mgmtSealNo" name="mgmtSeal">
                <label for="mgmtSealNo" style="margin-top: 8px;">否</label>
            </div>
        </div>

        <!-- 业委会金额 + 审价金额 + 是否盖章 + 签报部门 -->
        <div class="form-row">
            <label class="form-label" for="committeeAmount">业委会金额</label>
            <input type="text" id="committeeAmount" class="form-input" placeholder="请输入">
            <span>元</span>
            <label class="form-label" for="auditAmount">审价金额</label>
            <input type="text" id="auditAmount" class="form-input" placeholder="请输入">
            <span>元</span>
            <label class="form-label">是否盖章</label>
            <div class="radio-group">
                <input type="radio" id="committeeSealYes" name="committeeSeal" checked>
                <label for="committeeSealYes" style="margin-top: 8px;">是</label>
                <input type="radio" id="committeeSealNo" name="committeeSeal">
                <label for="committeeSealNo" style="margin-top: 8px;">否</label>
            </div>
            <label class="form-label" for="approveDept">签报部门</label>
            <select id="approveDept" class="form-select">
                <option value="1">1</option>
            </select>
        </div>

        <!-- 分摊范围 + 维修类型 -->
        <div class="form-row">
            <label class="form-label">分摊范围</label>
            <div class="radio-group">
                <input type="radio" id="shareBuilding" name="shareScope" checked>
                <label for="shareBuilding" style="margin-top: 8px;">幢</label>
                <input type="radio" id="shareAll" name="shareScope">
                <label for="shareAll" style="margin-top: 8px;">全体</label>
            </div>
            <label class="form-label" for="repairType">维修类型</label>
            <select id="repairType" class="form-select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>

        <!-- 基金与设施 + 业主大会范围 + 门牌幢范围 -->
        <div class="form-row">
            <label class="form-label">基金与设施</label>
            <div class="radio-group">
                <input type="radio" id="fundRepair" name="fundType" checked>
                <label for="fundRepair" style="margin-top: 8px;">维修资金</label>
            </div>
            <label class="form-label" for="ownerScope">业主大会范围</label>
            <select id="ownerScope" class="form-select">
                <option value="multi">多选</option>
            </select>
            <label class="form-label" for="buildingScope">门牌幢范围</label>
            <select id="buildingScope" class="form-select">
                <option value="multi">多选</option>
            </select>
        </div>

        <div class="form-row">
            <div class="radio-group" style="margin-left: 100px;">
            <input type="radio" id="fundPublic" name="fundType">
                <label for="fundPublic" style="margin-top: 8px;">公共收益</label>
            </div>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group">
            <button type="button" class="btn-cancel">取消</button>
            <button type="button" class="btn-save">保存</button>
        </div>
    </form>
</div>

 public/pages/property/costDetail/edit/edit.js

 public/pages/property/costDetail/more/more.html

New file
@@ -0,0 +1,452 @@
<div class="cost-detail-container">
    <!-- 顶部：日期范围 + 操作按钮 -->
    <div class="search-bar">
        <div>
            <label>统计时间：</label>
            <input type="date" class="form-control startDate" placeholder="请选择开始日期" v-model="moreInfo.conditions.startDate" />
            <span style="margin: 0 5px;">至</span>
            <input type="date" class="form-control endDate" placeholder="请选择结束日期" v-model="moreInfo.conditions.endDate" />
        </div>
        <div class="action-buttons">
            <button type="button" class="download-btn" v-on:click="_downloadTemplate()" style="line-height: 0px;">下载模板</button>
            <button type="button" class="add-btn" v-on:click="_add()" style="line-height: 0px;">添加</button>
            <button type="button" class="import-btn" v-on:click="_export()" style="line-height: 0px;">导出</button>
        </div>
    </div>

    <!-- 导航标签页 -->
    <div class="vc-line-primary margin-top"></div>
    <div class="margin-top-sm">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'publicIncome'}" v-on:click="changeTab('publicIncome')">
                    公共收益金
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'convention'}" v-on:click="changeTab('convention')">
                    业委会公约
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'withdrawalIssues'}" v-on:click="changeTab('withdrawalIssues')">
                    支取存在问题
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'warranty'}" v-on:click="changeTab('warranty')">
                    质保金/验收审核
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'printDetail'}" v-on:click="changeTab('printDetail')">
                    打印明细
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'printSummary'}" v-on:click="changeTab('printSummary')">
                    打印汇总
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'payablePaid'}" v-on:click="changeTab('payablePaid')">
                    应付/实付
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'payablePaidSummary'}" v-on:click="changeTab('payablePaidSummary')">
                    应付实付汇总
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:moreInfo.currentTab == 'remarks'}" v-on:click="changeTab('remarks')">
                    备注
                </a>
            </li>
        </ul>
    </div>

    <!-- 数据表格 - 公共收益金 -->
    <table v-if="moreInfo.currentTab == 'publicIncome'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">拟公布-起始(年月)</th>
                <th style="background-color: rgb(233, 243, 255);">拟公布-止(年月)</th>
                <th style="background-color: rgb(233, 243, 255);">已公布-起始(年月)</th>
                <th style="background-color: rgb(233, 243, 255);">已公布-止(年月)</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{item.proposedStartDate || '-'}}</td>
                <td>{{item.proposedEndDate || '-'}}</td>
                <td>{{item.publishedStartDate || '-'}}</td>
                <td>{{item.publishedEndDate || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="5" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 数据表格 - 业委会公约 -->
    <table v-if="moreInfo.currentTab == 'convention'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">序号</th>
                <th style="background-color: rgb(233, 243, 255);">额度</th>
                <th style="background-color: rgb(233, 243, 255);">业委会大会决议 (是/否)</th>
                <th style="background-color: rgb(233, 243, 255);">业委会征询表 (是否)</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
                <td>{{item.amount || '-'}}</td>
                <td>{{item.meetingResolution == '1' ? '是' : '否'}}</td>
                <td>{{item.consultationForm == '1' ? '是' : '否'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="5" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 数据表格 - 支取存在问题 -->
    <table v-if="moreInfo.currentTab == 'withdrawalIssues'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">支取遇到的问题</th>
                <th style="background-color: rgb(233, 243, 255);">缺支/欠款(元)</th>
                <th style="background-color: rgb(233, 243, 255);">路名</th>
                <th style="background-color: rgb(233, 243, 255);">弄</th>
                <th style="background-color: rgb(233, 243, 255);">门</th>
                <th style="background-color: rgb(233, 243, 255);">室</th>
                <th style="background-color: rgb(233, 243, 255);">门室号</th>
                <th style="background-color: rgb(233, 243, 255);">业主地址</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{item.issue || '-'}}</td>
                <td>{{item.shortageAmount || '-'}}</td>
                <td>{{item.roadName || '-'}}</td>
                <td>{{item.lane || '-'}}</td>
                <td>{{item.door || '-'}}</td>
                <td>{{item.room || '-'}}</td>
                <td>{{item.doorRoomNumber || '-'}}</td>
                <td>{{item.ownerAddress || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="9" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 数据表格 - 质保金/验收审核 -->
    <table v-if="moreInfo.currentTab == 'warranty'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">可启动支取日期</th>
                <th style="background-color: rgb(233, 243, 255);">质保期开始</th>
                <th style="background-color: rgb(233, 243, 255);">质保期结束</th>
                <th style="background-color: rgb(233, 243, 255);">质保金占比</th>
                <th style="background-color: rgb(233, 243, 255);">质保金金额</th>
                <th style="background-color: rgb(233, 243, 255);"></th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{item.withdrawalDate || '-'}}</td>
                <td>{{item.warrantyStartDate || '-'}}</td>
                <td>{{item.warrantyEndDate || '-'}}</td>
                <td>{{item.warrantyRatio || '-'}}</td>
                <td>{{item.warrantyAmount || '-'}}</td>
                <td></td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="7" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 数据表格 - 打印明细 -->
    <table v-if="moreInfo.currentTab == 'printDetail'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">序号</th>
                <th style="background-color: rgb(233, 243, 255);">第几次打印</th>
                <th style="background-color: rgb(233, 243, 255);">打印日期</th>
                <th style="background-color: rgb(233, 243, 255);">决议编号</th>
                <th style="background-color: rgb(233, 243, 255);">打印金额</th>
                <th style="background-color: rgb(233, 243, 255);">到账日期</th>
                <th style="background-color: rgb(233, 243, 255);">到账金额</th>
                <th style="background-color: rgb(233, 243, 255);">支取人</th>
                <th style="background-color: rgb(233, 243, 255);">缺支/欠款 (元)</th>
                <th style="background-color: rgb(233, 243, 255);">路名</th>
                <th style="background-color: rgb(233, 243, 255);">弄</th>
                <th style="background-color: rgb(233, 243, 255);">门</th>
                <th style="background-color: rgb(233, 243, 255);">室</th>
                <th style="background-color: rgb(233, 243, 255);">业主地址</th>
                <th style="background-color: rgb(233, 243, 255);">到账凭证</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
                <td>{{item.printTimes || '-'}}</td>
                <td>{{item.printDate || '-'}}</td>
                <td>{{item.resolutionNumber || '-'}}</td>
                <td>{{item.printAmount || '-'}}</td>
                <td>{{item.arrivalDate || '-'}}</td>
                <td>{{item.arrivalAmount || '-'}}</td>
                <td>{{item.payer || '-'}}</td>
                <td>{{item.shortageAmount || '-'}}</td>
                <td>{{item.roadName || '-'}}</td>
                <td>{{item.lane || '-'}}</td>
                <td>{{item.door || '-'}}</td>
                <td>{{item.room || '-'}}</td>
                <td>{{item.ownerAddress || '-'}}</td>
                <td>{{item.arrivalVoucher || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="16" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 数据表格 - 打印汇总 -->
    <table v-if="moreInfo.currentTab == 'printSummary'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">序号</th>
                <th style="background-color: rgb(233, 243, 255);">打印合计</th>
                <th style="background-color: rgb(233, 243, 255);">到账合计</th>
                <th style="background-color: rgb(233, 243, 255);">到账率 <span title="维修基金或公共收益金到账率" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">尚缺金额 <span title="维修基金或公共收益金尚缺金额" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">管理费占比 <span title="按照施工单位承诺函,人工输入值" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">管理费 <span title="按照施工单位承诺函,人工输入值" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">应付金额A <span title="签报业委会金额—管理费" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">应付金额B <span title="签报业委会金额—质保金金额—管理" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">应付金额C <span title="按到账应付—同比管理费,到账金额不包含质保金" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">支付公司或个人名称</th>
                <th style="background-color: rgb(233, 243, 255);">身份证号</th>
                <th style="background-color: rgb(233, 243, 255);">开户银行</th>
                <th style="background-color: rgb(233, 243, 255);">开户账号</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
                <td>{{item.printTotal || '-'}}</td>
                <td>{{item.arrivalTotal || '-'}}</td>
                <td>{{item.arrivalRate || '-'}}</td>
                <td>{{item.shortageAmount || '-'}}</td>
                <td>{{item.managementFeeRatio || '-'}}</td>
                <td>{{item.managementFee || '-'}}</td>
                <td>{{item.payableAmountA || '-'}}</td>
                <td>{{item.payableAmountB || '-'}}</td>
                <td>{{item.payableAmountC || '-'}}</td>
                <td>{{item.payeeName || '-'}}</td>
                <td>{{item.idNumber || '-'}}</td>
                <td>{{item.bankName || '-'}}</td>
                <td>{{item.accountNumber || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="15" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>
    <!-- 打印汇总备注说明 -->
    <!-- <div v-if="moreInfo.currentTab == 'printSummary'" style="margin-top: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
        <div style="font-weight: bold; margin-bottom: 10px;">备注:光标浮在①上时,有解释提示,内容如下:</div>
        <div style="margin-left: 20px;">
            <div><strong>到账率:</strong> 维修基金或公共收益金到账率</div>
            <div><strong>尚缺金额:</strong> 维修基金或公共收益金尚缺金额</div>
            <div><strong>管理费占比:</strong> 按照施工单位承诺函,人工输入值</div>
            <div><strong>应付金额A:</strong> 签报业委会金额—管理费</div>
            <div><strong>应付金额B:</strong> 签报业委会金额—质保金金额—管理</div>
            <div><strong>应付金额C:</strong> 按到账应付—同比管理费,到账金额不包含质保金</div>
        </div>
    </div> -->

    <!-- 数据表格 - 应付/实付 -->
    <table v-if="moreInfo.currentTab == 'payablePaid'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">序号</th>
                <th style="background-color: rgb(233, 243, 255);">拟付金额</th>
                <th style="background-color: rgb(233, 243, 255);">次数</th>
                <th style="background-color: rgb(233, 243, 255);">拟付日期</th>
                <th style="background-color: rgb(233, 243, 255);">类别</th>
                <th style="background-color: rgb(233, 243, 255);">报销人</th>
                <th style="background-color: rgb(233, 243, 255);">实付金额</th>
                <th style="background-color: rgb(233, 243, 255);">实付日期</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
                <td>{{item.proposedAmount || '-'}}</td>
                <td>{{item.times || '-'}}</td>
                <td>{{item.proposedDate || '-'}}</td>
                <td>{{item.category || '-'}}</td>
                <td>{{item.reimburser || '-'}}</td>
                <td>{{item.actualAmount || '-'}}</td>
                <td>{{item.actualDate || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="9" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 数据表格 - 应付实付汇总 -->
    <table v-if="moreInfo.currentTab == 'payablePaidSummary'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">拟付合计</th>
                <th style="background-color: rgb(233, 243, 255);">实付合计</th>
                <th style="background-color: rgb(233, 243, 255);">未付合计</th>
                <th style="background-color: rgb(233, 243, 255);">垫付金额</th>
                <th style="background-color: rgb(233, 243, 255);">未付合计-到帐口径</th>
                <th style="background-color: rgb(233, 243, 255);">待付金额A <span title="签报业委会金额—管理费" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">待付金额B <span title="签报业委会金额—质保金金额—管理" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">待付金额C <span title="按到账应付—同比管理费,到账金额不包含质保金" style="cursor: pointer;">①</span></th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{item.proposedTotal || '-'}}</td>
                <td>{{item.actualTotal || '-'}}</td>
                <td>{{item.unpaidTotal || '-'}}</td>
                <td>{{item.advanceAmount || '-'}}</td>
                <td>{{item.unpaidTotalAccounted || '-'}}</td>
                <td>{{item.pendingAmountA || '-'}}</td>
                <td>{{item.pendingAmountB || '-'}}</td>
                <td>{{item.pendingAmountC || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="9" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>
    <!-- 应付实付汇总备注说明 -->
    <!-- <div v-if="moreInfo.currentTab == 'payablePaidSummary'" style="margin-top: 20px; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
        <div style="font-weight: bold; margin-bottom: 10px;">备注:光标浮在①上时,有解释提示,内容如下:</div>
        <div style="margin-left: 20px;">
            <div><strong>待付金额A:</strong> 签报业委会金额—管理费</div>
            <div><strong>待付金额B:</strong> 签报业委会金额—质保金金额—管理</div>
            <div><strong>待付金额C:</strong> 按到账应付—同比管理费,到账金额不包含质保金</div>
        </div>
    </div> -->

    <!-- 数据表格 - 备注 -->
    <table v-if="moreInfo.currentTab == 'remarks'">
        <thead>
            <tr>
                <th style="background-color: rgb(233, 243, 255);">序号</th>
                <th style="background-color: rgb(233, 243, 255);">时间</th>
                <th style="background-color: rgb(233, 243, 255);">备注人</th>
                <th style="background-color: rgb(233, 243, 255);">备注内容</th>
                <th style="background-color: rgb(233, 243, 255);">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in moreInfo.dataList">
                <td>{{(moreInfo.paginationInfo.currentPage - 1) * moreInfo.paginationInfo.rows + index + 1}}</td>
                <td>{{item.time || '-'}}</td>
                <td>{{item.remarker || '-'}}</td>
                <td>{{item.remarkContent || '-'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_edit(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_delete(item)">删除</a>
                </td>
            </tr>
            <tr v-if="moreInfo.dataList.length == 0">
                <td colspan="5" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
        </tbody>
    </table>

    <!-- 分页栏 -->
    <div class="pagination">
        <span class="pagination-info">共{{moreInfo.paginationInfo.dataCount || 0}}条记录</span>
        <div class="pagination-controls">
            <select class="page-size-select" v-model="moreInfo.paginationInfo.rows" v-on:change="_changePageSize()">
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            <span class="page-size-label">/页</span>
            <button class="page-btn" v-on:click="_goToPage(moreInfo.paginationInfo.currentPage - 1)" 
                    :disabled="moreInfo.paginationInfo.currentPage == 1">‹</button>
            <button class="page-btn" v-for="page in moreInfo.paginationInfo.pageList" 
                    :class="{active: page.currentPage}" 
                    v-on:click="_goToPage(page.page)"
                    v-if="page.pageView != '...'">
                {{page.pageView}}
            </button>
            <span v-for="page in moreInfo.paginationInfo.pageList" 
                  v-if="page.pageView == '...'"
                  class="page-ellipsis">...</span>
            <button class="page-btn" v-on:click="_goToPage(moreInfo.paginationInfo.currentPage + 1)" 
                    :disabled="moreInfo.paginationInfo.currentPage == moreInfo.paginationInfo.total">›</button>
            <span class="jump-label">跳转至</span>
            <input type="number" class="jump-input" v-model="moreInfo.jumpPage" min="1" :max="moreInfo.paginationInfo.total" />
            <span class="page-label">页</span>
            <button class="page-btn" v-on:click="_jumpToPage()">确定</button>
        </div>
    </div>
</div>


 public/pages/property/costDetail/more/more.js

New file
@@ -0,0 +1,294 @@
/**
 业委会公约管理
 **/
(function (vc) {
    var DEFAULT_PAGE = 1;
    var DEFAULT_ROWS = 15;
    var $that = {};
    vc.extends({
        data: {
            moreInfo: {
                dataList: [],
                paginationInfo: {
                    currentPage: 1,
                    rows: DEFAULT_ROWS,
                    total: 1,
                    dataCount: 0,
                    pageList: []
                },
                jumpPage: 1,
                currentTab: 'convention',
                conditions: {
                    startDate: '',
                    endDate: ''
                }
            }
        },
        _initMethod: function () {
            $that = vc.component;
            $that._injectStyles();
            $that._initDate();
            $that._listData(DEFAULT_PAGE, DEFAULT_ROWS);
        },
        _initEvent: function () {
        },
        methods: {
            _initDate: function () {
                // 初始化日期选择器
                $(".startDate").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    fontAwesome: 'fa',
                    format: 'yyyy-mm-dd',
                    initTime: true,
                    initialDate: new Date(),
                    autoClose: 1,
                    todayBtn: true,
                    clearBtn: true
                });
                $(".endDate").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    fontAwesome: 'fa',
                    format: 'yyyy-mm-dd',
                    initTime: true,
                    initialDate: new Date(),
                    autoClose: 1,
                    todayBtn: true,
                    clearBtn: true
                });
                
                // 设置默认日期为当前月份
                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var startDateStr = year + '-' + (month < 10 ? '0' + month : month) + '-01';
                var endDate = new Date(year, month, 0); // 获取当月最后一天
                var endDateStr = year + '-' + (month < 10 ? '0' + month : month) + '-' + endDate.getDate();
                
                $that.moreInfo.conditions.startDate = startDateStr;
                $that.moreInfo.conditions.endDate = endDateStr;
                $(".startDate").val(startDateStr);
                $(".endDate").val(endDateStr);
                
                $('.startDate').datetimepicker()
                    .on('changeDate', function (ev) {
                        var value = $(".startDate").val();
                        $that.moreInfo.conditions.startDate = value;
                    });
                $('.endDate').datetimepicker()
                    .on('changeDate', function (ev) {
                        var value = $(".endDate").val();
                        var start = Date.parse(new Date($that.moreInfo.conditions.startDate))
                        var end = Date.parse(new Date(value))
                        if (start - end >= 0) {
                            vc.toast("结束时间必须大于开始时间")
                            $that.moreInfo.conditions.endDate = '';
                            $(".endDate").val('');
                        } else {
                            $that.moreInfo.conditions.endDate = value;
                        }
                    });
                
                // 防止多次点击时间插件失去焦点
                var startDateElements = document.getElementsByClassName('form-control startDate');
                if (startDateElements.length > 0) {
                    startDateElements[0].addEventListener('click', function(e) {
                        e.currentTarget.blur();
                    });
                }
                var endDateElements = document.getElementsByClassName('form-control endDate');
                if (endDateElements.length > 0) {
                    endDateElements[0].addEventListener('click', function(e) {
                        e.currentTarget.blur();
                    });
                }
            },
            changeTab: function (_tab) {
                $that.moreInfo.currentTab = _tab;
                // 根据标签页加载不同数据
                $that._listData(DEFAULT_PAGE, $that.moreInfo.paginationInfo.rows);
            },
            _listData: function (_page, _rows) {
                $that.moreInfo.conditions.page = _page;
                $that.moreInfo.conditions.row = _rows;
                $that.moreInfo.conditions.tab = $that.moreInfo.currentTab;
                $that.moreInfo.conditions.communityId = vc.getCurrentCommunity().communityId;
                var param = {
                    params: $that.moreInfo.conditions
                };
                // 发送get请求 - 这里需要根据实际API调整
                vc.http.apiGet('/costDetail/queryMore',
                    param,
                    function (json, res) {
                        var _json = JSON.parse(json);
                        $that.moreInfo.paginationInfo.dataCount = _json.total || 0;
                        $that.moreInfo.paginationInfo.total = _json.records || 1;
                        $that.moreInfo.dataList = _json.data || [];
                        $that.moreInfo.paginationInfo.currentPage = _page;
                        $that._freshPageList();
                    },
                    function (errInfo, error) {
                        console.log('请求失败处理');
                        // 模拟数据用于演示
                        $that.moreInfo.dataList = [
                            {
                                amount: '张三三',
                                meetingResolution: '1',
                                consultationForm: '0'
                            }
                        ];
                        $that.moreInfo.paginationInfo.dataCount = 100;
                        $that.moreInfo.paginationInfo.total = 7;
                        $that.moreInfo.paginationInfo.currentPage = _page;
                        $that._freshPageList();
                    }
                );
            },
            _freshPageList: function () {
                var currentPage = $that.moreInfo.paginationInfo.currentPage;
                var total = $that.moreInfo.paginationInfo.total;
                var pageList = [];
                
                if (total <= 7) {
                    // 总页数小于等于7，显示所有页码
                    for (var i = 1; i <= total; i++) {
                        pageList.push({
                            page: i,
                            pageView: i,
                            currentPage: i == currentPage
                        });
                    }
                } else {
                    // 总页数大于7，显示部分页码
                    if (currentPage <= 4) {
                        // 当前页在前4页
                        for (var i = 1; i <= 5; i++) {
                            pageList.push({
                                page: i,
                                pageView: i,
                                currentPage: i == currentPage
                            });
                        }
                        pageList.push({
                            page: 0,
                            pageView: '...',
                            currentPage: false
                        });
                        pageList.push({
                            page: total,
                            pageView: total,
                            currentPage: false
                        });
                    } else if (currentPage >= total - 3) {
                        // 当前页在后4页
                        pageList.push({
                            page: 1,
                            pageView: 1,
                            currentPage: false
                        });
                        pageList.push({
                            page: 0,
                            pageView: '...',
                            currentPage: false
                        });
                        for (var i = total - 4; i <= total; i++) {
                            pageList.push({
                                page: i,
                                pageView: i,
                                currentPage: i == currentPage
                            });
                        }
                    } else {
                        // 当前页在中间
                        pageList.push({
                            page: 1,
                            pageView: 1,
                            currentPage: false
                        });
                        pageList.push({
                            page: 0,
                            pageView: '...',
                            currentPage: false
                        });
                        for (var i = currentPage - 1; i <= currentPage + 1; i++) {
                            pageList.push({
                                page: i,
                                pageView: i,
                                currentPage: i == currentPage
                            });
                        }
                        pageList.push({
                            page: 0,
                            pageView: '...',
                            currentPage: false
                        });
                        pageList.push({
                            page: total,
                            pageView: total,
                            currentPage: false
                        });
                    }
                }
                
                $that.moreInfo.paginationInfo.pageList = pageList;
            },
            _changePageSize: function () {
                $that._listData(DEFAULT_PAGE, $that.moreInfo.paginationInfo.rows);
            },
            _goToPage: function (_page) {
                if (!_page || _page < 1 || _page > $that.moreInfo.paginationInfo.total) {
                    return;
                }
                $that._listData(_page, $that.moreInfo.paginationInfo.rows);
            },
            _jumpToPage: function () {
                var page = parseInt($that.moreInfo.jumpPage);
                if (isNaN(page) || page < 1) {
                    page = 1;
                }
                if (page > $that.moreInfo.paginationInfo.total) {
                    page = $that.moreInfo.paginationInfo.total;
                }
                $that._listData(page, $that.moreInfo.paginationInfo.rows);
            },
            _add: function () {
                // 添加功能
                vc.toast('添加功能');
            },
            _export: function () {
                // 导出功能
                vc.toast('导出功能');
            },
            _viewDetail: function (_item) {
                // 查看详情
                vc.toast('查看详情功能');
            },
            _edit: function (_item) {
                // 编辑
                vc.toast('编辑功能');
            },
            _delete: function (_item) {
                vc.confirm('确定要删除这条记录吗？', function () {
                    var param = {
                        params: {
                            id: _item.id
                        }
                    };
                    // 这里需要根据实际API调整
                    vc.http.apiPost('/costDetail/deleteMore',
                        param,
                        function (json, res) {
                            vc.toast('删除成功');
                            $that._listData($that.moreInfo.paginationInfo.currentPage, $that.moreInfo.paginationInfo.rows);
                        },
                        function (errInfo, error) {
                            vc.message(errInfo);
                        }
                    );
                });
            }
        }
    });
})(window.vc);