<template>
|
<div class="app-container">
|
<!-- 头部信息卡片 -->
|
<div class="batch-info">
|
<div class="header">
|
<div class="batch-title">批次号：{{ batchInfo.batchNumber }}</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">{{ batchInfo.personNum }}</div>
|
<div class="card-desc">申请总人数</div>
|
</el-card>
|
<el-card class="box-card">
|
<div class="card-title">{{ batchInfo.totalAmount }} 万元</div>
|
<div class="card-desc">申请总金额</div>
|
</el-card>
|
<el-card class="box-card">
|
<div class="card-title">{{ batchInfo.waitFamilyArea }}㎡</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.street"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="拆迁项目">
|
<el-input
|
v-model="queryParams.projectName"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="所在村(社区)">
|
<el-input
|
v-model="queryParams.community"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="户主姓名/身份证号">
|
<el-input
|
v-model="queryParams.headOrIdCard"
|
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="batchInfo.status == '0'">
|
<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
|
:data="tableData"
|
border
|
style="width: 100%"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
<el-table-column
|
prop="street"
|
label="镇（街道）"
|
align="center"
|
width="80"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.street }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.street"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.street }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="projectName"
|
label="拆迁项目名称"
|
align="center"
|
width="150"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.projectName }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.projectName"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.projectName }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="community"
|
label="所在村（社区）"
|
align="center"
|
width="100"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.community }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.community"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.community }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column prop="time" label="拆迁时间" align="center" width="100">
|
<template slot-scope="scope">
|
{{ scope.row.time }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.time"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.time }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="headOrIdCard"
|
label="产主姓名"
|
align="center"
|
width="80"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.headOrIdCard }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.headOrIdCard"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.headOrIdCard }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="idCard"
|
label="身份证号"
|
align="center"
|
width="180"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.idCard }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.idCard"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.idCard }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="contact"
|
label="联系电话"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.contact }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.contact"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.contact }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="家庭安置人数（人）" align="center">
|
<el-table-column
|
prop="resettlementPeople"
|
label="集体经济组织成员"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.resettlementPeople }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.resettlementPeople"
|
placement="top"
|
>
|
<div slot="content">
|
{{ scope.row.errors.resettlementPeople }}
|
</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="additionalPeople"
|
label="非集体经济组织成员"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.additionalPeople }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.additionalPeople"
|
placement="top"
|
>
|
<div slot="content">
|
{{ scope.row.errors.additionalPeople }}
|
</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="totalPeople"
|
label="合计"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.totalPeople }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.totalPeople"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.totalPeople }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
prop="houseName"
|
label="待安置家庭成员姓名"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.houseName }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.houseName"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.houseName }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="area"
|
label="待安置人员应安置面积合计（㎡）"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.area }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.area"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.area }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="补偿金额（万元）" align="center">
|
<el-table-column
|
prop="firstPayment"
|
label="新建商品住房、商业用房、停车位"
|
align="center"
|
width="100"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.firstPayment }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.firstPayment"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.firstPayment }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="secondPayment"
|
label="二手住房"
|
align="center"
|
width="80"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.secondPayment }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.secondPayment"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.secondPayment }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="totalPayment"
|
label="合计"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.totalPayment }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.totalPayment"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.totalPayment }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
prop="monthlyPayment"
|
label="25%首付款（万元）"
|
align="center"
|
width="130"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.monthlyPayment }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.monthlyPayment"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.monthlyPayment }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="remainingPayment"
|
label="每季度需支付款项（万元）"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.remainingPayment }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.remainingPayment"
|
placement="top"
|
>
|
<div slot="content">
|
{{ scope.row.errors.remainingPayment }}
|
</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="totalPaid"
|
label="过渡补贴（万元）"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.totalPaid }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.totalPaid"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.totalPaid }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" align="center" width="60">
|
<template slot-scope="scope">
|
{{ scope.row.remark }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.remark"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.remark }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="difference"
|
label="购房差异情况"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.difference }}
|
<el-tooltip
|
v-if="scope.row.errors && scope.row.errors.difference"
|
placement="top"
|
>
|
<div slot="content">{{ scope.row.errors.difference }}</div>
|
<i
|
class="el-icon-warning"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="150" fixed="right">
|
<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>
|
import { geDetailTabletList } from "@/api/application-batch";
|
export default {
|
name: "ApplicationBatchDetail",
|
data() {
|
return {
|
batchInfo: {
|
// 批次id
|
id: "",
|
// 批次号
|
batchNumber: "",
|
// 批次状态
|
status: "",
|
// 安置总户数
|
waitFamilyArea: "",
|
// 安置总人数
|
personNum: "",
|
// 补偿资金总额
|
totalAmount: "",
|
},
|
// 加载状态
|
loading: false,
|
// 总条数
|
total: 0,
|
// 表格数据
|
tableData: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
street: undefined,
|
projectName: undefined,
|
community: undefined,
|
headOrIdCard: undefined,
|
},
|
};
|
},
|
created() {
|
// 从路由获取批次号和状态
|
const { id } = this.$route.query;
|
this.batchInfo = {
|
...this.batchInfo,
|
id: id || "",
|
};
|
this.getList();
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
// 这里添加实际的API调用获取数据
|
setTimeout(() => {
|
this.loading = false;
|
geDetailTabletList({
|
...this.queryParams,
|
applyId: this.batchInfo.id,
|
}).then((res) => {
|
this.tableData = res.data.records;
|
this.total = res.data.total;
|
this.batchInfo = {
|
...res.data.placementApply,
|
};
|
});
|
}, 500);
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
street: undefined,
|
projectName: undefined,
|
community: undefined,
|
headOrIdCard: undefined,
|
};
|
this.getList();
|
},
|
/** 返回按钮操作 */
|
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>
|
