liubp
2025-12-19 5bdaf416d66b675131004de1aba5d161772a52b0
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="text" class="form-control queryDate" placeholder="请选择日期" v-model="costDetailInfo.conditions.date" />
        </div>
        <div>
            <label>小区</label>
            <select>
                <option>鱼塘花园A区</option>
            <label>小区:</label>
            <select class="form-control" v-model="costDetailInfo.conditions.communityName" style="text-align: center;line-height: 0px;">
                <option value="">请选择</option>
                <option value="鱼塘花园A区">鱼塘花园A区</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="add-btn" v-on:click="_addCostDetail()" style="line-height: 0px;">
                添加
            </button>
            <button type="button" class="import-btn" v-on:click="_importCostDetail()" style="line-height: 0px;">费用导入</button>
        </div>
    </div>
    <!-- 费用表格 -->
    <table>
        <thead>
            <tr>
            <tr id="costDetailTableHead">
                <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>
                <th>基金类型-一级分类</th>
                <th>基金类型-二级分类</th>
                <th>幢/全体</th>
                <th>维修类型</th>
                <th>操作</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="_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>