<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>
|
