<template>
|
<div
|
class="app-container"
|
v-loading="loading"
|
element-loading-text="加载中..."
|
>
|
<!-- 头部信息卡片 -->
|
<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 || 0 }}</div>
|
<div class="card-desc">申请总人数</div>
|
</el-card>
|
<el-card class="box-card">
|
<div class="card-title">{{ batchInfo.totalAmount || 0 }} 万元</div>
|
<div class="card-desc">申请总金额</div>
|
</el-card>
|
<el-card class="box-card">
|
<div class="card-title">{{ batchInfo.waitFamilyArea || 0 }}㎡</div>
|
<div class="card-desc">应安置总面积</div>
|
</el-card>
|
</div>
|
</div>
|
|
<!-- 搜索表单 -->
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="镇街">
|
<el-select
|
v-model="queryParams.street"
|
placeholder="请选择镇街"
|
clearable
|
filterable
|
size="small"
|
>
|
<el-option
|
v-for="item in streetOptions"
|
:key="item.dictCode"
|
:label="item.dictLabel"
|
:value="item.dictLabel"
|
/>
|
</el-select>
|
</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 }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="projectName"
|
label="拆迁项目名称"
|
align="center"
|
width="150"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.projectName }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="community"
|
label="所在村（社区）"
|
align="center"
|
width="100"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.community }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="demolitionTime"
|
label="拆迁时间"
|
align="center"
|
width="100"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.demolitionTime }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="householdHead"
|
label="户主名称"
|
align="center"
|
width="80"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.householdHead }}
|
</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.idCardExistsWarn == 1" placement="top">
|
<div slot="content">{{ "身份证不在安置库" }}</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
<el-tooltip v-if="scope.row.idCardNoWarn == 1" placement="top">
|
<div slot="content">{{ "身份证重复" }}</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="mobile"
|
label="联系电话"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.mobile }}
|
</template>
|
</el-table-column>
|
<el-table-column label="本次安置人数（人）" align="center">
|
<el-table-column
|
prop="currentCollectiveNum"
|
label="集体经济组织成员"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.currentCollectiveNum }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="currentNoCollectiveNum"
|
label="非集体经济组织成员"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.currentNoCollectiveNum }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="currentCount"
|
label="合计"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.currentCount }}
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
prop="waitFamilyNames"
|
label="待安置家庭成员姓名"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.waitFamilyNames }}
|
<el-tooltip v-if="scope.row.waitFamilyNamesWarn == 1" placement="top">
|
<div slot="content">{{ "身份信息存在重复数据" }}</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="waitFamilyArea"
|
label="待安置人员应安置面积合计（㎡）"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.waitFamilyArea }}
|
<el-tooltip v-if="scope.row.waitFamilyAreaWarn == 1" placement="top">
|
<div slot="content">{{ "应补偿面积数据异常" }}</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="补偿金额（万元）" align="center">
|
<el-table-column
|
prop="compensationNewAmount"
|
label="新建商品住房、商业用房、停车位"
|
align="center"
|
width="100"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.compensationNewAmount }}
|
<!-- 重新对接字段 -->
|
<el-tooltip
|
v-if="scope.row.compensationAmountWarn == 1"
|
placement="top"
|
>
|
<div slot="content">{{ "检测到多个购房情况，请人工核对" }}</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="compensationOldAmount"
|
label="二手住房"
|
align="center"
|
width="80"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.compensationOldAmount }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="compensationSum"
|
label="合计"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.compensationSum }}
|
<el-tooltip
|
v-if="scope.row.compensationSumWarn == 1"
|
placement="top"
|
>
|
<div slot="content">{{ "补偿标准金额异常" }}</div>
|
<!-- <i
|
class="el-icon-warning-outline"
|
style="color: #e6a23c; margin-left: 5px"
|
></i> -->
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column
|
prop="downPaymentAmount"
|
label="25%首付款（万元）"
|
align="center"
|
width="130"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.downPaymentAmount }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="quarterPayAmount"
|
label="每季度需支付款项（万元）"
|
align="center"
|
width="120"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.quarterPayAmount }}
|
<el-tooltip
|
v-if="scope.row.quarterPayAmountWarn == 1"
|
placement="top"
|
>
|
<div slot="content">
|
{{ "季度款金额异常" }}
|
</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="subsidyAmount"
|
label="过渡补贴（万元）"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.subsidyAmount }}
|
<el-tooltip v-if="scope.row.subsidyAmountWarn == 1" placement="top">
|
<div slot="content">{{ "过度补贴数据异常" }}</div>
|
<el-image
|
style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../assets/logo/warning.png')"
|
:fit="fit"
|
></el-image>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" align="center" width="60">
|
<template slot-scope="scope">
|
{{ scope.row.remark }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="situation"
|
label="购房差异情况"
|
align="center"
|
width="60"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.situation }}
|
</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="batchInfo.status == '0'">
|
<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>
|
|
<!-- 上传组件 -->
|
<upload-dialog
|
ref="uploadDialog"
|
:info="batchInfo"
|
:visible.sync="uploadDialogVisible"
|
@success="handleUploadSuccess"
|
/>
|
|
<!-- 详情弹窗 -->
|
<DetailDialog :visible.sync="detailDialogVisible" :id="currentId" />
|
</div>
|
</template>
|
|
<script>
|
import {
|
geDetailTabletList,
|
delDetail,
|
getDictList,
|
} from "@/api/application-batch";
|
import { downLoad, exportExcell } from "@/utils";
|
import UploadDialog from "./components/UploadDialog.vue";
|
import DetailDialog from "./components/DetailDialog.vue";
|
|
export default {
|
name: "ApplicationBatchDetail",
|
components: {
|
UploadDialog,
|
DetailDialog,
|
},
|
data() {
|
return {
|
batchInfo: {
|
// 批次id
|
id: "",
|
// 批次号
|
batchNumber: "",
|
// 批次状态
|
status: "",
|
// 安置总户数
|
waitFamilyArea: "",
|
// 安置总人数
|
personNum: "",
|
// 补偿资金总额
|
totalAmount: "",
|
},
|
// 加载状态
|
loading: false,
|
// 上传组件
|
uploadDialogVisible: false,
|
// 总条数
|
total: 0,
|
// 表格数据
|
tableData: [],
|
// 镇街选项
|
streetOptions: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
street: undefined,
|
projectName: undefined,
|
community: undefined,
|
headOrIdCard: undefined,
|
},
|
// 详情弹窗
|
detailDialogVisible: false,
|
// 当前记录的ID
|
currentId: "",
|
};
|
},
|
created() {
|
// 从路由获取批次号和状态
|
const { id } = this.$route.query;
|
this.batchInfo = {
|
...this.batchInfo,
|
id: id || "",
|
};
|
this.getList();
|
this.getStreetOptions();
|
},
|
methods: {
|
/** 获取镇街选项 */
|
getStreetOptions() {
|
getDictList().then((res) => {
|
this.streetOptions = res.data;
|
});
|
},
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
geDetailTabletList({
|
...this.queryParams,
|
applyId: this.batchInfo.id,
|
})
|
.then((res) => {
|
this.tableData = res.data.records;
|
this.total = res.data.total;
|
this.batchInfo = {
|
...res.data.placementApply,
|
};
|
})
|
.finally(() => {
|
this.loading = false;
|
});
|
},
|
/** 搜索按钮操作 */
|
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() {
|
// 实现新增安置户逻辑
|
this.$router.push({
|
path: "/applicationBatchList/detailInfo",
|
query: {
|
parentId: this.batchInfo.id,
|
type: "add",
|
},
|
});
|
},
|
/** 下载导入模板 */
|
handleDownloadTemplate() {
|
// 实现下载模板逻辑
|
downLoad("/placement-apply/download-template", "安置申请表.xlsx");
|
},
|
/** 批量导入 */
|
handleBatchImport() {
|
// 实现批量导入逻辑
|
this.uploadDialogVisible = true;
|
},
|
/** 全部导出 */
|
async handleExportAll() {
|
// 实现全部导出逻辑 /api/placement-apply/problem-export
|
let res = await exportExcell(
|
"安置数据表.xlsx",
|
{ ...this.queryParams, applyId: this.batchInfo.id },
|
"/placement-apply/exports"
|
);
|
if (res) {
|
this.$message.success("全部数据导出成功");
|
}
|
},
|
/** 问题数据导出 */
|
async handleExportIssueData() {
|
// 实现问题数据导出逻辑
|
let res = await exportExcell(
|
"安置数据表.xlsx",
|
{ ...this.queryParams, applyId: this.batchInfo.id },
|
"/placement-apply/problem-export"
|
);
|
if (res) {
|
this.$message.success("问题数据导出成功");
|
}
|
},
|
/** 安置户详情 */
|
handleHouseholdDetail(row) {
|
if (this.batchInfo.status == "0") {
|
this.$router.push({
|
path: "/applicationBatchList/detailInfo",
|
query: {
|
parentId: this.batchInfo.id,
|
type: "detail",
|
id: row.id,
|
},
|
});
|
} else {
|
this.currentId = row.id;
|
this.detailDialogVisible = true;
|
}
|
},
|
/** 安置户编辑 */
|
handleHouseholdEdit(row) {
|
// 实现安置户编辑逻辑
|
this.$router.push({
|
path: "/applicationBatchList/detailInfo",
|
query: {
|
parentId: this.batchInfo.id,
|
type: "edit",
|
id: row.id,
|
},
|
});
|
},
|
/** 安置户删除 */
|
handleHouseholdDelete(row) {
|
this.$confirm("确认删除该安置户信息吗?", "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 实现删除逻辑
|
delDetail({ id: row.id }).then((res) => {
|
if (res) {
|
this.$message.success("删除成功");
|
this.getList();
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
/** 每页显示条数变化 */
|
handleSizeChange(val) {
|
this.queryParams.pageSize = val;
|
this.getList();
|
},
|
/** 当前页变化 */
|
handleCurrentChange(val) {
|
this.queryParams.pageNum = val;
|
this.getList();
|
},
|
/** 设置行的className */
|
tableRowClassName({ row }) {
|
console.log(row, "11111111111");
|
if (
|
row.compensationAmountWarn == 1 ||
|
row.waitFamilyNamesWarn == 1 ||
|
row.waitFamilyAreaWarn == 1 ||
|
row.subsidyAmountWarn == 1 ||
|
row.quarterPayAmountWarn == 1 ||
|
row.idCardNoWarn == 1 ||
|
row.idCardExistsWarn == 1 ||
|
row.compensationSumWarn == 1
|
) {
|
return "warning-row";
|
}
|
return "";
|
},
|
/** 上传成功 */
|
handleUploadSuccess() {
|
this.uploadDialogVisible = false;
|
this.getList();
|
this.$message({
|
type: "success",
|
message: "导入成功！",
|
});
|
},
|
},
|
};
|
</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;
|
}
|
|
::v-deep .warning-row {
|
background: #de868f !important;
|
}
|
|
/* ::v-deep .warning-row:hover > td {
|
background-color: #faa2a2 !important;
|
}
|
|
::v-deep .warning-row .el-button--text {
|
color: #000 !important;
|
}
|
|
::v-deep .warning-row .el-button--text:hover {
|
color: #000 !important;
|
background-color: #faa2a2 !important;
|
} */
|
</style>
|
