<div class="cost-detail-container">
|
<h2>费用明细表</h2>
|
|
<!-- 搜索栏 -->
|
<div class="search-bar">
|
<div>
|
<label>日期：</label>
|
<input type="text" class="form-control queryDate" placeholder="请选择日期" v-model="costDetailInfo.conditions.date" />
|
</div>
|
<div>
|
<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" class="form-control" placeholder="请输入" v-model="costDetailInfo.conditions.communityCode" />
|
</div>
|
<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 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>
|
</tr>
|
</thead>
|
<tbody>
|
<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 v-if="costDetailInfo.costDetails.length == 0">
|
<td colspan="17" style="text-align: center; color: #999;">暂无数据</td>
|
</tr>
|
</tbody>
|
</table>
|
|
<!-- 分页栏 -->
|
<div class="pagination">
|
<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>
|
