<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-col :span="1.5">
|
<el-button type="primary" size="small" @click="autoAudit">自动纠错</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="orgArea" label="集体成员面积" align="center" width="150">
|
<template slot-scope="scope">
|
{{ scope.row.orgArea }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="noOrgArea" label="非集体成员面积" align="center" width="150">
|
<template slot-scope="scope">
|
{{ scope.row.noOrgArea }}
|
</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 }} <el-tooltip v-if="scope.row.downPaymentAmountWarn == 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="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="200" 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>
|
<el-button size="mini" type="text" @click="handleCheck(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,
|
autoApprove,
|
dataCheck
|
} 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: {
|
/**自动审核*/
|
autoAudit() {
|
this.$confirm('是否确认自动纠错', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
autoApprove({ id: this.batchInfo.id }).then((res) => {
|
this.getList();
|
})
|
})
|
},
|
|
handleCheck(row) {
|
this.$confirm('是否确认已核对', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
dataCheck({ id: row.id }).then((res) => {
|
this.getList();
|
})
|
})
|
},
|
|
/** 获取镇街选项 */
|
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 ||
|
row.downPaymentAmountWarn == 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>
|
