费用明细表，查询，编辑，删除，添加接口对接，公益金表接口对接，页面样式优化

liubp

2025-12-25 c1fd6952f42461bc7e83c97f594a52fc1af934eb

 public/pages/property/costDetail/costDetail.html

@@ -1,132 +1,115 @@
<div class="container">
<div class="cost-detail-container">
    <h2>费用明细表</h2>

    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <div>
            <label>日期</label>
            <input type="datetime-local" value="2023-08-08T12:12:12">
            <label>年份：</label>
            <input type="date" class="form-control queryDate" placeholder="请输入年份" v-model="costDetailInfo.conditions.year" min="2000" max="2099" />
        </div>
        <div>
            <label>小区</label>
            <select>
                <option>鱼塘花园A区</option>
            <label>小区：</label>
            <select class="form-control" v-model="costDetailInfo.conditions.communityName">
                <option value="">请选择</option>
                <option v-for="community in costDetailInfo.communityList" :value="community.name">{{community.name}}</option>
            </select>
        </div>
        <div>
            <label>小区编码</label>
            <input type="text" placeholder="请输入">
            <label>小区编码：</label>
            <input type="text" class="form-control" placeholder="请输入" v-model="costDetailInfo.conditions.communityCode" />
        </div>
        <button>查询</button>
        <button>重置</button>
        <div style="margin-left: auto;">
            <button class="add-btn">添加</button>
            <button class="import-btn">费用导入</button>
        <button type="button" class="query-btn" v-on:click="_queryCostDetails()" style="line-height: 0px;">查询</button>
        <button type="button" class="reset-btn" v-on:click="_resetQuery()" style="line-height: 0px;">重置</button>
        <div class="action-buttons">
            <button type="button" class="download-btn" v-on:click="_downloadTemplate()" style="line-height: 0px; ">模板下载</button>
            <button type="button" class="import-btn" v-on:click="_importCostDetail()" style="line-height: 0px;">费用导入</button>
            <button type="button" class="add-btn" v-on:click="_addCostDetail()" style="line-height: 0px;">添加</button>
        </div>
    </div>

    <!-- 费用表格 -->
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>流转编码</th>
                <th>小区编码</th>
                <th>小区名称</th>
                <th>日期</th>
                <th>工程内容</th>
                <th>管理处金额(元)</th>
                <th>是否盖章</th>
                <th>业委会金额(元)</th>
                <th>审价金额(元)</th>
                <th>是否盖章</th>
                <th>签报部门</th>
                <th>基金类型一级分类</th>
                <th>基金类型二级分类</th>
                <th>幢/全体</th>
                <th>维修类型</th>
                <th>操作</th>
            <tr id="costDetailTableHead">
                <th style="width: 8px;">序号</th>
                <th style="width: 15px;">流转编码</th>
                <th style="width: 6px;">小区编码</th>
                <th style="width: 8px;">小区名称</th>
                <th style="width: 35px;">日期</th>
                <th style="width: 200px;">工程内容</th>
                <th style="width: 6px;">管理处金额 (元)</th>
                <th style="width: 6px;">是否盖章</th>
                <th style="width: 12px;">业委会金额 (元)</th>
                <th style="width: 20px;">审价金额 (元)</th>
                <th style="width: 6px;">是否盖章</th>
                <th style="width: 8px;">签报部门</th>
                <th style="width: 12px;">基金类型-一级分类</th>
                <th style="width: 12px;">基金类型-二级分类</th>
                <th style="width: 6px;">幢/全体</th>
                <th style="width: 8px;">维修类型</th>
                <th style="width: 220px;">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>118652</td>
                <td>A-15-1-6</td>
                <td>鱼塘花园</td>
                <td>2025-10-10</td>
                <td>路面道牙、墙面大理石</td>
                <td>50000.00</td>
                <td>是</td>
                <td>50000.00</td>
                <td>50000.00</td>
                <td>是</td>
                <td>工程部</td>
                <td>维修基金</td>
                <td>防水</td>
                <td>全体</td>
                <td>道路</td>
                <td><a href="#">更多</a> <a href="#">编辑</a> <a href="#">删除</a></td>
            <tr v-for="(item, index) in costDetailInfo.costDetails">
                <td>{{(costDetailInfo.paginationInfo.currentPage - 1) * costDetailInfo.paginationInfo.rows + index + 1}}</td>
                <td>{{item.flowCode || '--'}}</td>
                <td>{{item.communityCode || '--'}}</td>
                <td>{{item.communityName || '--'}}</td>
                <td>{{item.date || '--'}}</td>
                <td>{{item.projectContent || '--'}}</td>
                <td>{{item.managementAmount || '--'}}</td>
                <td>{{item.managementStamped == '1' ? '是' : '否'}}</td>
                <td>{{item.committeeAmount || '--'}}</td>
                <td>{{item.appraisalAmount || '--'}}</td>
                <td>{{item.committeeStamped == '1' ? '是' : '否'}}</td>
                <td>{{item.approvalDepartment || '--'}}</td>
                <td>{{item.fundTypeLevel1 || '--'}}</td>
                <td>{{item.fundTypeLevel2 || '--'}}</td>
                <td>{{item.buildingType || '--'}}</td>
                <td>{{item.maintenanceType || '--'}}</td>
                <td>
                    <a href="javascript:void(0)" v-on:click="_viewCostDetail(item)">详情</a>
                    <a href="javascript:void(0)" v-on:click="_viewMore(item)">更多</a>
                    <a href="javascript:void(0)" v-on:click="_editCostDetail(item)">编辑</a>
                    <a href="javascript:void(0)" v-on:click="_deleteCostDetail(item)">删除</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>118407</td>
                <td>A-15-1-5</td>
                <td>鱼塘花园</td>
                <td>2025-10-10</td>
                <td>路面道牙、墙面大理石</td>
                <td>50000.00</td>
                <td>是</td>
                <td>50000.00</td>
                <td>50000.00</td>
                <td>是</td>
                <td>工程部</td>
                <td>维修基金</td>
                <td>房屋维修</td>
                <td>全体</td>
                <td>道路</td>
                <td><a href="#">更多</a> <a href="#">编辑</a> <a href="#">删除</a></td>
            <tr v-if="costDetailInfo.costDetails.length == 0">
                <td colspan="17" style="text-align: center; color: #999;">暂无数据</td>
            </tr>
            <tr>
                <td>3</td>
                <td>118652</td>
                <td>A-15-1-4</td>
                <td>鱼塘花园</td>
                <td>2025-10-10</td>
                <td>路面道牙、墙面大理石</td>
                <td>50000.00</td>
                <td>否</td>
                <td>50000.00</td>
                <td>50000.00</td>
                <td>否</td>
                <td>工程部</td>
                <td>公共收益金</td>
                <td>系统外</td>
                <td>全体</td>
                <td>道路</td>
                <td><a href="#">更多</a> <a href="#">编辑</a> <a href="#">删除</a></td>
            </tr>
            <!-- 可继续添加其他行（示例仅展示前3行） -->
        </tbody>
    </table>

    <!-- 分页栏 -->
    <div class="pagination">
        <span>共100条记录</span>
        <div style="margin-left: auto;">
            <span>45/页</span>
            <button>&lt;</button>
            <button>1</button>
            <button class="active">2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
            <span>...</span>
            <button>99</button>
            <button>&gt;</button>
            <span>跳转至</span>
            <input type="text" value="2">
            <span>页</span>
        <span class="pagination-info">共{{costDetailInfo.paginationInfo.dataCount || 0}}条记录</span>
        <div class="pagination-controls">
            <select class="page-size-select" v-model="costDetailInfo.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(costDetailInfo.paginationInfo.currentPage - 1)" 
                    :disabled="costDetailInfo.paginationInfo.currentPage == 1">‹</button>
            <button class="page-btn" v-for="page in costDetailInfo.paginationInfo.pageList" 
                    :class="{active: page.currentPage}" 
                    v-on:click="_goToPage(page.page)"
                    v-if="page.pageView != '...'">
                {{page.pageView}}
            </button>
            <span v-for="page in costDetailInfo.paginationInfo.pageList" 
                  v-if="page.pageView == '...'"
                  class="page-ellipsis">...</span>
            <button class="page-btn" v-on:click="_goToPage(costDetailInfo.paginationInfo.currentPage + 1)" 
                    :disabled="costDetailInfo.paginationInfo.currentPage == costDetailInfo.paginationInfo.total">›</button>
            <span class="jump-label">跳转至</span>
            <input type="number" class="jump-input" v-model="costDetailInfo.jumpPage" min="1" :max="costDetailInfo.paginationInfo.total" />
            <span class="page-label">页</span>
            <button class="page-btn" v-on:click="_jumpToPage()">确定</button>
        </div>
    </div>
</div>
</div>