<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.town" size="small" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="所在村(社区)">
|
<el-input v-model="queryParams.village" size="small" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="项目名称">
|
<el-input v-model="queryParams.projectName" size="small" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="户主姓名">
|
<el-input v-model="queryParams.householderName" size="small" placeholder="请输入" clearable></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
|
<el-button type="primary" plain size="small" @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- Tab切换区域 -->
|
<div class="tab-container">
|
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
<el-tab-pane label="资金表" name="fullReport"></el-tab-pane>
|
<el-tab-pane label="购房信息表" name="houseInfo"></el-tab-pane>
|
</el-tabs>
|
</div>
|
|
<!-- 统计卡片区域 -->
|
<div class="statistics-container">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-card class="statistics-card" shadow="hover">
|
<div class="card-amount">2,183万元</div>
|
<div class="card-title">补偿资金总金额</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="statistics-card" shadow="hover">
|
<div class="card-amount">2,183万元</div>
|
<div class="card-title">首付款总金额</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="statistics-card" shadow="hover">
|
<div class="card-amount">2,183万元</div>
|
<div class="card-title">过渡补贴总金额</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="statistics-card" shadow="hover">
|
<div class="card-amount">2,183万元</div>
|
<div class="card-title">季度款总金额</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 功能按钮区域 -->
|
<div class="button-container">
|
<el-button type="primary" size="small" @click="handleExport">新增安置户记录</el-button>
|
<el-button type="success" size="small" @click="handleDownloadTemplate">下载导入模板</el-button>
|
<el-button type="primary" size="small" @click="handleImport">批量导入</el-button>
|
<el-button type="danger" size="small" @click="handleExportSelected">问题数据导出</el-button>
|
</div>
|
|
<div v-if="activeTab === 'fullReport'">
|
<!-- 表格区域 -->
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
border
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
<el-table-column prop="town" label="镇（街道）" min-width="120" align="center" />
|
<el-table-column prop="projectName" label="拆迁项目名称" min-width="180" align="center" />
|
<el-table-column prop="village" label="所在村（社区）" min-width="120" align="center" />
|
<el-table-column prop="householderName" label="户主姓名" min-width="100" align="center" />
|
<el-table-column prop="idCard" label="身份证号" min-width="180" align="center" />
|
<el-table-column prop="familySize" label="应安置人数（人）" min-width="140" align="center" />
|
<el-table-column label="所有家庭人员应安置面积（㎡）" min-width="160" align="center"/>
|
<el-table-column label="补偿单位标准（万元）" min-width="160" align="center">
|
<el-table-column prop="compensationAmount" label="新建商品住房、商业用房、停车位" min-width="160" align="center" />
|
<el-table-column prop="buildingArea" label="二手住房" min-width="150" align="center" />
|
</el-table-column>
|
<el-table-column prop="compensationAmount" label="补偿资金总额（万元）" min-width="160" align="center" />
|
<el-table-column prop="buildingArea" label="25%首付款（㎡）" min-width="150" align="center" />
|
<el-table-column prop="temporaryAmount" label="每季度需支付款项（万元）" min-width="180" align="center" />
|
<el-table-column prop="temporaryAmount" label="过渡补贴（万元）" min-width="180" align="center" />
|
<el-table-column label="操作" fixed="right" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
|
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @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"
|
/>
|
</div>
|
<div v-if="activeTab === 'houseInfo'">
|
<!-- 购房信息表格 -->
|
<el-table
|
v-loading="loading"
|
:data="houseTableData"
|
border
|
style="width: 100%"
|
>
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
<el-table-column prop="batchNo" label="镇（街道）" min-width="100" align="center" />
|
<el-table-column prop="batchNo" label="拆迁项目名称" min-width="100" align="center" />
|
<el-table-column prop="batchNo" label="所在村（社区）" min-width="100" align="center" />
|
<el-table-column prop="batchNo" label="拆迁时间" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="户主姓名" min-width="100" align="center" />
|
<el-table-column prop="idCard" label="身份证号" min-width="180" align="center" />
|
<el-table-column prop="householderName" label="联系电话" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="本次安置人数（人）" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="集体经济组织成员" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="非集体经济组织成员" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="合计" min-width="100" align="center" />
|
</el-table-column>
|
<el-table-column prop="householderName" label="待安置家庭成员姓名" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="待安置人员应安置面积合计（㎡）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="补偿金额（万元）" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="新建商品住房、商业用房、停车位" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="二手住房" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="合计" min-width="100" align="center" />
|
</el-table-column>
|
<el-table-column prop="householderName" label="25%首付款（万元）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="每季度需支付款项（万元）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="过渡补贴（万元）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="备注" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="凭证发放时间" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="购房时间" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="成交金额（万元）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="新建商品住房" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="楼盘名称" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="面积（㎡）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="套数（套）" min-width="100" align="center" />
|
</el-table-column>
|
<el-table-column prop="householderName" label="二手住房" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="小区名称" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="面积（㎡）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="套数（套）" min-width="100" align="center" />
|
</el-table-column>
|
<el-table-column prop="householderName" label="新建商业用房" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="楼盘名称" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="面积（㎡）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="套数（套）" min-width="100" align="center" />
|
</el-table-column>
|
<el-table-column prop="householderName" label="新建停车位" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="楼盘名称" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="金额（万元）" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="个数（个）" min-width="100" align="center" />
|
</el-table-column>
|
<el-table-column prop="householderName" label="自主购房协议签订时间" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="25%补偿款及过渡补贴支付时间" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="剩余款项支付时间" min-width="100" align="center" >
|
<el-table-column prop="householderName" label="第一年" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="第二年" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="第三年" min-width="100" align="center" />
|
<el-table-column prop="householderName" label="第四年" min-width="100" align="center" />
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" min-width="80" align="center">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.status === '已通过' ? 'success' : 'info'">
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
|
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="text" size="small" @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="getHouseList"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'PlacementPerson',
|
components: {},
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 选中数组
|
selectedRows: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 总条数
|
total: 0,
|
// 表格数据
|
tableData: [
|
{
|
town: '长洲社区',
|
projectName: '长洲水利工程征地拆迁',
|
village: '和兴社区',
|
householderName: '张三',
|
idCard: '220102198512345678',
|
familySize: 3,
|
totalArea: 160,
|
registeredArea: 120,
|
measuredArea: 120,
|
courtArea: 40,
|
compensationAmount: 30,
|
buildingArea: 38,
|
temporaryAmount: 5
|
}
|
],
|
// 当前激活的tab
|
activeTab: 'fullReport',
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
town: undefined,
|
village: undefined,
|
projectName: undefined,
|
householderName: undefined
|
},
|
// 购房信息表格数据
|
houseTableData: [
|
{
|
householderName: '张三',
|
idCard: '220102198512345678',
|
familySize: 3,
|
houseAddress: '长洲社区XX街道',
|
houseType: '住宅',
|
houseArea: 160,
|
landArea: 100,
|
compensationArea: 160,
|
compensationAmount: 30,
|
temporaryAmount: 5,
|
temporaryPeriod: '12个月',
|
newHouseArea: 0,
|
secondHandArea: 160,
|
totalArea: 160,
|
status: '已通过'
|
}
|
],
|
}
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true
|
// TODO: 调用接口获取数据
|
setTimeout(() => {
|
this.tableData = [
|
{
|
town: '长洲社区',
|
projectName: '长洲水利工程征地拆迁',
|
village: '和兴社区',
|
householderName: '张三',
|
idCard: '220102198512345678',
|
familySize: 3,
|
totalArea: 160,
|
registeredArea: 120,
|
measuredArea: 120,
|
courtArea: 40,
|
compensationAmount: 30,
|
buildingArea: 38,
|
temporaryAmount: 5
|
}
|
]
|
this.total = 4
|
this.loading = false
|
}, 1000)
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1
|
this.getList()
|
},
|
/** 重置按钮操作 */
|
handleReset() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
town: undefined,
|
village: undefined,
|
projectName: undefined,
|
householderName: undefined
|
}
|
this.getList()
|
},
|
/** Tab切换操作 */
|
handleTabClick(tab) {
|
if (tab.name === 'houseInfo') {
|
this.getHouseList()
|
} else {
|
this.getList()
|
}
|
},
|
/** 选择框变更 */
|
handleSelectionChange(selection) {
|
this.selectedRows = selection
|
this.single = selection.length !== 1
|
this.multiple = !selection.length
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
// TODO: 实现新增逻辑
|
},
|
/** 导出操作 */
|
handleExport() {
|
// TODO: 实现导出逻辑
|
},
|
/** 下载模板 */
|
handleDownloadTemplate() {
|
// TODO: 实现下载模板逻辑
|
},
|
/** 导入操作 */
|
handleImport() {
|
// TODO: 实现导入逻辑
|
},
|
/** 导出选中记录 */
|
handleExportSelected() {
|
// TODO: 实现导出选中记录逻辑
|
},
|
/** 查看详情按钮操作 */
|
handleView(row) {
|
// TODO: 实现查看详情逻辑
|
},
|
/** 编辑按钮操作 */
|
handleEdit(row) {
|
// TODO: 实现编辑逻辑
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
// TODO: 实现删除逻辑
|
},
|
/** 获取购房信息列表 */
|
getHouseList() {
|
this.loading = true
|
// TODO: 调用接口获取购房信息数据
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
.filter-container {
|
margin-bottom: 20px;
|
}
|
.tab-container {
|
margin-bottom: 20px;
|
}
|
.statistics-container {
|
margin-bottom: 20px;
|
}
|
.statistics-card {
|
text-align: center;
|
color: #666;
|
}
|
.card-amount {
|
font-size: 24px;
|
color: #409EFF;
|
margin-bottom: 10px;
|
}
|
.card-title {
|
font-size: 14px;
|
}
|
.button-container {
|
margin-bottom: 20px;
|
}
|
.area-value {
|
cursor: pointer;
|
color: #409EFF;
|
text-decoration: underline;
|
}
|
.el-table {
|
margin-bottom: 20px;
|
}
|
</style>
|
