<template>
|
<div class="app-container">
|
<!-- 搜索区域 -->
|
<div class="filter-container">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form-item label="批次号">
|
<el-input v-model="queryParams.batchNumber" size="small" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select v-model="queryParams.status" placeholder="请选择" clearable>
|
<el-option label="待审核" value="0"></el-option>
|
<el-option label="已通过" value="1"></el-option>
|
<el-option label="已驳回" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
|
<el-button type="primary" size="small" @click="handleAdd">添加</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 功能按钮区域 -->
|
<div class="button-container">
|
<el-button type="primary" size="small" @click="handleImportAll">新增资金批次</el-button>
|
<el-button type="success" size="small" @click="handleExportTemplate">下载资金导入模版</el-button>
|
<el-button type="success" size="small" @click="handleImportTemplate">下载购房信息表导入模版</el-button>
|
</div>
|
|
<!-- 表格区域 -->
|
<el-table v-loading="loading" :data="tableData" border style="width: 100%">
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
<el-table-column prop="batchNumber" label="批次号" align="center" />
|
<el-table-column prop="householdsNum" label="申请总户数" align="center" />
|
<el-table-column prop="personNum" label="申请总人数" align="center" />
|
<el-table-column prop="totalAmount" width="120" label="补偿资金总额（万元）" align="center" />
|
<el-table-column prop="downPaymentAmount" label="25%首付款（万元）" align="center" />
|
<el-table-column prop="quarterPayAmount" label="每季度需支付款项（万元）" align="center" />
|
<el-table-column prop="subsidyAmount" label="过渡补贴（万元）" align="center" />
|
<el-table-column prop="businessArea" label="新建商品房（㎡）" align="center" />
|
<el-table-column prop="oldArea" label="二手住房（㎡）" align="center" />
|
<el-table-column prop="newArea" label="新建商业用房（㎡）" align="center" />
|
<el-table-column prop="parkingArea" label="新建停车位（个）" align="center" />
|
<el-table-column prop="status" label="状态" align="center">
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.status == '0'" type="warning">待审核</el-tag>
|
<el-tag v-if="scope.row.status == '1'" type="success">已通过</el-tag>
|
<el-tag v-if="scope.row.status == '2'" type="danger">已驳回</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" @click="handleView(scope.row)">详情</el-button>
|
<el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
|
<el-button size="mini" type="text" @click="handleApproval(scope.row)">审核</el-button>
|
<el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页区域 -->
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
@pagination="getList" />
|
|
<export-money-applay :visible.sync="dialogVisible" />
|
<approval-dialog :visible.sync="approvalDialogVisible" />
|
</div>
|
</template>
|
|
<script>
|
import ExportMoneyApplay from './components/exportMoneyApplay.vue'
|
import ApprovalDialog from './components/ApprovalDialog.vue'
|
import {
|
getPlacementBatchList,
|
downloadTemplate
|
} from '@/api/placement-details'
|
|
export default {
|
name: 'PlacementBatch',
|
components: {
|
ExportMoneyApplay,
|
ApprovalDialog
|
},
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 弹窗
|
dialogVisible: false,
|
// 总条数
|
total: 0,
|
// 表格数据
|
tableData: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
batchNo: undefined,
|
status: undefined
|
},
|
dialogVisible: false
|
}
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true
|
getPlacementBatchList(this.queryParams).then(res => {
|
this.tableData = res.data.records || []
|
this.total = res.data.total
|
this.loading = false
|
|
})
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1
|
this.getList()
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
// TODO: 实现新增逻辑
|
},
|
/** 导入资金批次 */
|
handleImportAll() {
|
// TODO: 实现导出逻辑
|
this.dialogVisible = true
|
},
|
/** 下载模板 */
|
handleExportTemplate() {
|
// TODO: 实现下载模板逻辑
|
downloadTemplate(3).then(res => {
|
window.open(res.data)
|
})
|
|
|
},
|
/** 下载临时安置模板 */
|
handleImportTemplate() {
|
// TODO: 实现下载临时安置模板逻辑
|
},
|
/** 查看详情按钮操作 */
|
handleView(row) {
|
// TODO: 实现查看详情逻辑
|
},
|
/** 审核按钮操作 */
|
handleApproval(row) {
|
// TODO: 实现编辑逻辑
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
// TODO: 实现删除逻辑
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.filter-container {
|
margin-bottom: 20px;
|
}
|
|
.button-container {
|
margin-bottom: 20px;
|
}
|
</style>
|
