<template>
|
<div class="app-container">
|
<!-- 头部信息卡片 -->
|
<div class="batch-info">
|
<div class="header">
|
<div class="batch-title">批次号：{{ batchNo }}</div>
|
<div class="back-btn">
|
<el-button type="primary" size="small" icon="el-icon-back" @click="goBack">返回</el-button>
|
</div>
|
</div>
|
<div class="info-cards">
|
<el-card class="box-card">
|
<div class="card-title">29,183</div>
|
<div class="card-desc">申请总人数</div>
|
</el-card>
|
<el-card class="box-card">
|
<div class="card-title">2,183 万元</div>
|
<div class="card-desc">申请总金额</div>
|
</el-card>
|
<el-card class="box-card">
|
<div class="card-title">2,183 ㎡</div>
|
<div class="card-desc">居安置总面积</div>
|
</el-card>
|
</div>
|
</div>
|
|
<!-- 搜索表单 -->
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="镇街">
|
<el-input v-model="queryParams.town" placeholder="请输入" clearable size="small" />
|
</el-form-item>
|
<el-form-item label="所在村(社区)">
|
<el-input v-model="queryParams.village" placeholder="请输入" clearable size="small" />
|
</el-form-item>
|
<el-form-item label="户主姓名/身份证号">
|
<el-input v-model="queryParams.owner" placeholder="请输入" clearable size="small" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 操作按钮区域 -->
|
<el-row :gutter="10" class="mb8" v-if="status === '待审核'">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
size="small"
|
@click="handleAddHousehold"
|
>新增安置户信息</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="success"
|
size="small"
|
@click="handleDownloadTemplate"
|
>下载导入模板</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
size="small"
|
@click="handleBatchImport"
|
>批量导入</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
size="small"
|
@click="handleExportIssueData"
|
>问题数据导出</el-button>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="10" class="mb8" v-else>
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
size="small"
|
@click="handleExportAll"
|
>全部导出为Excel</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
size="small"
|
@click="handleExportIssueData"
|
>问题数据导出</el-button>
|
</el-col>
|
</el-row>
|
|
<!-- 表格区域 -->
|
<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="projectName"
|
label="城市项目名称"
|
align="center"
|
width="180"
|
/>
|
<el-table-column
|
prop="village"
|
label="所在村（社区）"
|
align="center"
|
/>
|
<el-table-column
|
prop="time"
|
label="拆迁时间"
|
align="center"
|
/>
|
<el-table-column
|
prop="owner"
|
label="产主姓名"
|
align="center"
|
/>
|
<el-table-column
|
prop="idCard"
|
label="身份证号"
|
align="center"
|
width="180"
|
/>
|
<el-table-column
|
prop="contact"
|
label="联系电话"
|
align="center"
|
/>
|
<el-table-column label="家庭安置人数（人）" align="center">
|
<el-table-column
|
prop="resettlementPeople"
|
label="基础安置指标内成员"
|
align="center"
|
width="120"
|
/>
|
<el-table-column
|
prop="additionalPeople"
|
label="非基础指标内成员"
|
align="center"
|
width="120"
|
/>
|
<el-table-column
|
prop="totalPeople"
|
label="合计"
|
align="center"
|
width="80"
|
/>
|
</el-table-column>
|
<el-table-column
|
prop="houseName"
|
label="待安置房屋房名"
|
align="center"
|
/>
|
<el-table-column
|
prop="area"
|
label="面积（㎡）"
|
align="center"
|
/>
|
<el-table-column
|
label="操作"
|
align="center"
|
width="150"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleHouseholdDetail(scope.row)"
|
>详情</el-button>
|
<template v-if="status === '待审核'">
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleHouseholdEdit(scope.row)"
|
>编辑</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleHouseholdDelete(scope.row)"
|
>删除</el-button>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination-container">
|
<el-pagination
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="queryParams.pageNum"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="queryParams.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ApplicationBatchDetail',
|
data() {
|
return {
|
// 批次号
|
batchNo: '',
|
// 批次状态
|
status: '',
|
// 加载状态
|
loading: false,
|
// 总条数
|
total: 0,
|
// 表格数据
|
tableData: [
|
{
|
projectName: '李家窑水库工程征地拆迁',
|
village: '松花社区',
|
time: '',
|
owner: '陈向荣',
|
idCard: '220102198512345678',
|
contact: '',
|
resettlementPeople: 1,
|
additionalPeople: 2,
|
totalPeople: 3,
|
houseName: '陈向荣、李辉',
|
area: '160'
|
},
|
{
|
projectName: '李家窑水库工程征地拆迁',
|
village: '松花社区',
|
time: '',
|
owner: '席娟',
|
idCard: '330105197803120987',
|
contact: '',
|
resettlementPeople: 1,
|
additionalPeople: 1,
|
totalPeople: 2,
|
houseName: '周吉彬',
|
area: '215'
|
},
|
{
|
projectName: '成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示',
|
village: '清泉村',
|
time: '',
|
owner: '周忠心',
|
idCard: '440203199000999876',
|
contact: '',
|
resettlementPeople: 1,
|
additionalPeople: 1,
|
totalPeople: 2,
|
houseName: '周忠心、杨春云',
|
area: '103'
|
},
|
{
|
projectName: '成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示',
|
village: '清泉村',
|
time: '',
|
owner: '李辉',
|
idCard: '440203199000999876',
|
contact: '',
|
resettlementPeople: 2,
|
additionalPeople: 1,
|
totalPeople: 3,
|
houseName: '王强',
|
area: '302'
|
}
|
],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
town: undefined,
|
village: undefined,
|
owner: undefined
|
}
|
}
|
},
|
created() {
|
// 从路由获取批次号和状态
|
const { batchNo, status } = this.$route.query;
|
this.batchNo = batchNo || '';
|
this.status = status || '待审核';
|
|
this.getList();
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
// 这里添加实际的API调用获取数据
|
setTimeout(() => {
|
this.loading = false;
|
this.total = this.tableData.length;
|
}, 500);
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
town: undefined,
|
village: undefined,
|
owner: undefined
|
};
|
this.handleQuery();
|
},
|
/** 返回按钮操作 */
|
goBack() {
|
this.$router.go(-1);
|
},
|
/** 新增安置户信息 */
|
handleAddHousehold() {
|
// 实现新增安置户逻辑
|
},
|
/** 下载导入模板 */
|
handleDownloadTemplate() {
|
// 实现下载模板逻辑
|
},
|
/** 批量导入 */
|
handleBatchImport() {
|
// 实现批量导入逻辑
|
},
|
/** 全部导出 */
|
handleExportAll() {
|
// 实现全部导出逻辑
|
this.$message.success('全部数据导出成功');
|
},
|
/** 问题数据导出 */
|
handleExportIssueData() {
|
// 实现问题数据导出逻辑
|
this.$message.success('问题数据导出成功');
|
},
|
/** 安置户详情 */
|
handleHouseholdDetail(row) {
|
// 实现安置户详情查看逻辑
|
},
|
/** 安置户编辑 */
|
handleHouseholdEdit(row) {
|
// 实现安置户编辑逻辑
|
},
|
/** 安置户删除 */
|
handleHouseholdDelete(row) {
|
this.$confirm('确认删除该安置户信息吗?', '警告', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
// 实现删除逻辑
|
this.$message.success('删除成功');
|
this.getList();
|
}).catch(() => {});
|
},
|
/** 每页显示条数变化 */
|
handleSizeChange(val) {
|
this.queryParams.pageSize = val;
|
this.getList();
|
},
|
/** 当前页变化 */
|
handleCurrentChange(val) {
|
this.queryParams.pageNum = val;
|
this.getList();
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
.batch-info {
|
margin-bottom: 20px;
|
}
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
}
|
.batch-title {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
.info-cards {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
.box-card {
|
width: 32%;
|
background-color: #6f82fb;
|
color: white;
|
text-align: center;
|
border-radius: 5px;
|
}
|
.card-title {
|
font-size: 22px;
|
margin: 10px 0;
|
}
|
.card-desc {
|
font-size: 14px;
|
margin-bottom: 10px;
|
}
|
.search-form {
|
margin-bottom: 20px;
|
background-color: #fff;
|
padding: 20px;
|
border-radius: 4px;
|
}
|
.mb8 {
|
margin-bottom: 15px;
|
}
|
.pagination-container {
|
margin-top: 15px;
|
text-align: right;
|
}
|
</style>
|
