<template>
|
<el-dialog
|
:title="type === 'audit' ? '审批安置户申请信息' : '安置户申请信息'"
|
:visible.sync="dialogVisible"
|
width="80%"
|
:close-on-click-modal="false"
|
:append-to-body="true"
|
>
|
<div class="approval-content">
|
<!-- 左侧表格区域 -->
|
<div class="table-container">
|
<el-table
|
v-loading="loading"
|
element-loading-text="加载中..."
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
:data="tableData"
|
border
|
style="width: 100%"
|
:row-class-name="tableRowClassName"
|
height="400"
|
>
|
<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>
|
<el-tooltip
|
v-if="scope.row.waitFamilyNamesNoWarn == 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>
|
<i
|
class="el-icon-warning-outline"
|
style="color: #e6a23c; margin-left: 5px"
|
></i>
|
</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-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>
|
</div>
|
|
<!-- 右侧审核信息 -->
|
<div class="approval-info">
|
<div class="approver-timeline">
|
<!-- 审核状态下显示审批人和等待审核按钮 -->
|
<template v-if="type === 'audit'">
|
<div class="timeline-item">
|
<div class="timeline-icon">
|
<el-avatar
|
size="small"
|
icon="el-icon-user"
|
:style="{ background: '#6d78ff' }"
|
></el-avatar>
|
</div>
|
<div class="timeline-content info-box">
|
<div class="info-line">
|
<div class="approver-info">
|
<div class="approver-title">提交人：</div>
|
<div class="approver-name">
|
{{ approvalInfo.createUser }}
|
</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">提交时间：</div>
|
<div class="approval-time">
|
{{ approvalInfo.createTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="timeline-divider"></div>
|
<div class="timeline-item">
|
<div class="timeline-icon">
|
<el-avatar
|
size="small"
|
icon="el-icon-time"
|
:style="{ background: '#909399' }"
|
></el-avatar>
|
</div>
|
<div class="timeline-content">
|
<el-button size="small" disabled class="waiting-btn"
|
>等待审核</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<!-- 详情状态下显示经办人和审核人 -->
|
<template v-else>
|
<div class="timeline-item">
|
<div class="timeline-icon">
|
<el-avatar
|
size="small"
|
icon="el-icon-user"
|
:style="{ background: '#6d78ff' }"
|
></el-avatar>
|
</div>
|
<div class="timeline-content info-box">
|
<div class="info-line">
|
<div class="approver-info">
|
<div class="approver-title">提交人：</div>
|
<div class="approver-name">
|
{{ approvalInfo.createUser }}
|
</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">提交时间：</div>
|
<div class="approval-time">
|
{{ approvalInfo.createTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="timeline-divider"></div>
|
<div class="timeline-item">
|
<div class="timeline-icon">
|
<el-avatar
|
size="small"
|
icon="el-icon-user"
|
:style="{ background: '#6d78ff' }"
|
></el-avatar>
|
</div>
|
<div class="timeline-content info-box">
|
<div class="info-line">
|
<div class="approver-info">
|
<div class="approver-title">审核人：</div>
|
<div class="approver-name">
|
{{ approvalInfo.approveName }}
|
</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">审核时间：</div>
|
<div class="approval-time">
|
{{ approvalInfo.approveTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
|
<!-- 警告信息 -->
|
<div class="warning-info" v-if="hasWarning && type === 'audit'">
|
<div class="warning-text">
|
注意: 系统检测到该申请表中存在异常数据，请仔细核实!
|
</div>
|
</div>
|
|
<!-- 审核结果区域 -->
|
<div class="audit-section">
|
<div class="audit-result">
|
<div class="result-label">审核结果</div>
|
<div class="result-options">
|
<el-button-group>
|
<el-button
|
:disabled="type === 'detail'"
|
:type="form.auditResult === '通过' ? 'primary' : ''"
|
@click="form.auditResult = '通过'"
|
>通过</el-button
|
>
|
<el-button
|
:disabled="type === 'detail'"
|
:type="form.auditResult === '驳回' ? 'primary' : ''"
|
@click="form.auditResult = '驳回'"
|
>驳回</el-button
|
>
|
</el-button-group>
|
</div>
|
</div>
|
|
<div class="audit-comment">
|
<div class="comment-label">审批意见</div>
|
<el-input
|
type="textarea"
|
:rows="4"
|
placeholder="请输入审批意见"
|
v-model="form.auditComment"
|
:disabled="type === 'detail'"
|
></el-input>
|
</div>
|
</div>
|
|
<!-- 底部按钮 - 仅审核模式显示 -->
|
<div slot="footer" class="dialog-footer" v-if="type === 'audit'">
|
<el-button @click="cancelAudit">取消</el-button>
|
<el-button type="primary" @click="submitAudit">确认</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { geDetailTabletList, approve } from "@/api/application-batch";
|
export default {
|
name: "ApprovalDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "audit", // 'audit' 或 'detail'
|
validator: function (value) {
|
return ["audit", "detail"].indexOf(value) !== -1;
|
},
|
},
|
id: {
|
type: [Number],
|
required: true,
|
default: 0,
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
dialogVisible: false,
|
hasWarning: false,
|
tableData: [],
|
form: {
|
auditResult: "通过",
|
auditComment: "",
|
},
|
// 审批信息
|
approvalInfo: {
|
approver: "",
|
approvalTime: "",
|
operatorName: "",
|
submitTime: "",
|
auditorName: "",
|
auditTime: "",
|
},
|
};
|
},
|
watch: {
|
visible(val) {
|
this.dialogVisible = val;
|
if (val) {
|
this.getTableData();
|
}
|
},
|
dialogVisible(val) {
|
this.$emit("update:visible", val);
|
},
|
},
|
methods: {
|
async getTableData() {
|
this.loading = true;
|
try {
|
const res = await geDetailTabletList({
|
applyId: this.id,
|
pageNum: 1,
|
pageSize: 99999,
|
});
|
if (res.code === 200) {
|
this.tableData = res.data.records.map((item) => ({
|
...item,
|
hasError: Object.keys(item).some(
|
(key) => key.endsWith("Warn") && item[key]
|
),
|
}));
|
this.hasWarning = this.tableData.some((item) => item.hasError);
|
this.approvalInfo = { ...res.data.placementApply };
|
this.form.auditResult =
|
this.approvalInfo.status === 1 ? "通过" : "驳回";
|
this.form.auditComment = this.approvalInfo.reason;
|
}
|
} catch (error) {
|
console.error("获取表格数据失败:", error);
|
this.$message.error("获取数据失败，请稍后重试");
|
} finally {
|
this.loading = false;
|
}
|
},
|
tableRowClassName({ row }) {
|
if (
|
row.compensationAmountWarn == 1 ||
|
row.waitFamilyNamesWarn == 1 ||
|
row.waitFamilyNamesNoWarn == 1 ||
|
row.waitFamilyAreaWarn == 1 ||
|
row.subsidyAmountWarn == 1 ||
|
row.quarterPayAmountWarn == 1 ||
|
row.idCardNoWarn == 1 ||
|
row.idCardExistsWarn == 1 ||
|
row.compensationSumWarn == 1
|
) {
|
return "warning-row";
|
}
|
return "";
|
},
|
cancelAudit() {
|
this.dialogVisible = false;
|
this.resetForm();
|
},
|
async submitAudit() {
|
// if (!this.form.auditComment.trim()) {
|
// this.$message.warning("请输入审批意见");
|
// return;
|
// }
|
|
const params = {
|
applyId: Number(this.id), // 确保是数字类型
|
reason: this.form.auditComment ? this.form.auditComment.trim() : "",
|
status: Number(this.form.auditResult === "通过" ? 1 : 2), // 确保是数字类型
|
};
|
|
try {
|
const res = await approve(params);
|
if (res.code === 200) {
|
this.$message.success("审批成功");
|
this.$emit("refresh");
|
this.dialogVisible = false;
|
this.resetForm();
|
} else {
|
this.$message.error(res.msg || "审批失败");
|
}
|
} catch (error) {
|
console.error("审批失败:", error);
|
this.$message.error(error?.response?.data?.message || "审批失败");
|
}
|
},
|
resetForm() {
|
this.form = {
|
auditResult: "通过",
|
auditComment: "",
|
};
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
::v-deep .warning-row {
|
background: #de868f !important;
|
}
|
.approval-content {
|
display: flex;
|
margin-bottom: 20px;
|
}
|
|
.table-container {
|
flex: 1;
|
margin-right: 20px;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.approval-info {
|
width: 250px;
|
padding: 15px;
|
border-radius: 4px;
|
background-color: #f0f2f5;
|
}
|
|
.approver-timeline {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
.timeline-item {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 15px;
|
}
|
|
.timeline-icon {
|
margin-right: 10px;
|
}
|
|
.timeline-divider {
|
width: 2px;
|
height: 30px;
|
background-color: #dcdfe6;
|
margin-left: 15px;
|
margin-bottom: 15px;
|
}
|
|
.timeline-content {
|
flex: 1;
|
}
|
|
.info-box {
|
background-color: #8e9aff;
|
border-radius: 8px;
|
padding: 6px 8px;
|
color: white;
|
}
|
|
.info-line {
|
display: flex;
|
width: 100%;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
|
.approver-info,
|
.approval-time-info {
|
display: flex;
|
align-items: center;
|
white-space: nowrap;
|
}
|
|
.approver-title,
|
.approval-time-title {
|
font-weight: bold;
|
margin-right: 2px;
|
white-space: nowrap;
|
font-size: 12px;
|
}
|
|
.approver-name,
|
.approval-time {
|
font-size: 12px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.waiting-btn {
|
background-color: #909399;
|
color: white;
|
border: none;
|
}
|
|
.warning-info {
|
background-color: #fef0f0;
|
padding: 10px 15px;
|
border-radius: 4px;
|
margin: 15px 0;
|
}
|
|
.warning-text {
|
color: #f56c6c;
|
}
|
|
.audit-section {
|
margin-top: 20px;
|
padding: 0 20px;
|
display: flex;
|
/* align-items: center; */
|
width: 100%;
|
margin-top: 20px;
|
}
|
|
.audit-result {
|
margin-bottom: 20px;
|
display: flex;
|
/* align-items: center; */
|
}
|
|
.result-label,
|
.comment-label {
|
font-size: 14px;
|
color: #606266;
|
margin-right: 15px;
|
min-width: 70px;
|
}
|
|
.result-options {
|
flex: 1;
|
}
|
|
.result-options .el-button {
|
width: 80px;
|
}
|
|
.audit-comment {
|
display: flex;
|
align-items: flex-start;
|
flex: 1;
|
padding-left: 60px;
|
}
|
|
.audit-comment .el-textarea {
|
flex: 1;
|
}
|
|
.el-button-group {
|
display: inline-block;
|
}
|
|
.el-button-group .el-button {
|
margin-right: 0;
|
}
|
|
.el-button-group .el-button:first-child {
|
border-right: 1px solid #dcdfe6;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
/* 自定义滚动条样式 */
|
.el-table {
|
max-height: 400px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
background-color: #dcdfe6;
|
border-radius: 4px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar-track {
|
background-color: #f5f7fa;
|
}
|
|
/* loading样式优化 */
|
::v-deep .el-loading-spinner .el-icon-loading {
|
font-size: 30px;
|
color: #409eff;
|
}
|
|
::v-deep .el-loading-spinner .el-loading-text {
|
font-size: 14px;
|
margin-top: 8px;
|
color: #409eff;
|
}
|
</style>
|
