<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 :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
|
<el-table-column type="index" label="序号" width="50" align="center" />
|
<el-table-column prop="town" label="镇（街道）" align="center" width="80">
|
<template slot-scope="scope">
|
{{ scope.row.town }}
|
<el-tooltip v-if="scope.row.errors && scope.row.errors.town" placement="top">
|
<div slot="content">{{ scope.row.errors.town }}</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="village" label="所在村（社区）" align="center" width="100">
|
<template slot-scope="scope">
|
{{ scope.row.village }}
|
<el-tooltip v-if="scope.row.errors && scope.row.errors.village" placement="top">
|
<div slot="content">{{ scope.row.errors.village }}</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="owner" label="产主姓名" align="center" width="80">
|
<template slot-scope="scope">
|
{{ scope.row.owner }}
|
<el-tooltip v-if="scope.row.errors && scope.row.errors.owner" placement="top">
|
<div slot="content">{{ scope.row.errors.owner }}</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>
|
</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">{{ approver }}</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">审批时间：</div>
|
<div class="approval-time">{{ approvalTime }}</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">{{ operatorName }}</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">提交时间：</div>
|
<div class="approval-time">{{ submitTime }}</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">{{ auditorName }}</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">审核时间：</div>
|
<div class="approval-time">{{ auditTime }}</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" v-if="type === 'audit'">
|
<div class="result-title">审核结果</div>
|
<div class="result-options">
|
<el-radio-group v-model="form.auditResult">
|
<el-radio label="pass">通过</el-radio>
|
<el-radio label="reject">驳回</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
|
<div class="audit-comment">
|
<div class="comment-title">审批意见</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>
|
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;
|
},
|
},
|
rowData: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
hasWarning: true,
|
approver: "李四",
|
approvalTime: "2025-1-17 09:35:24",
|
operatorName: "张三",
|
submitTime: "2025-1-17 09:35:24",
|
auditorName: "王五",
|
auditTime: "2025-1-17 09:35:24",
|
approvalStatus: "", // 'passed', 'rejected', ''
|
form: {
|
auditResult: "pass",
|
auditComment: "",
|
},
|
tableData: [
|
{
|
town: "松花社区",
|
projectName: "李家窑水库工程征地拆迁",
|
village: "松花社区",
|
time: "",
|
owner: "陈向荣",
|
idCard: "220102198512345678",
|
contact: "",
|
resettlementPeople: 1,
|
additionalPeople: 2,
|
totalPeople: 3,
|
houseName: "陈向荣、李辉",
|
ownerName: "",
|
area: "160",
|
totalCompensation: "54",
|
firstPayment: "10",
|
secondPayment: "46",
|
totalPayment: "30",
|
monthlyPayment: "38",
|
remainingPayment: "69",
|
totalPaid: "",
|
hasError: false,
|
},
|
{
|
town: "松花社区",
|
projectName: "李家窑水库工程征地拆迁",
|
village: "松花社区",
|
time: "",
|
owner: "席娟",
|
idCard: "330105197803120987",
|
contact: "",
|
resettlementPeople: 1,
|
additionalPeople: 1,
|
totalPeople: 2,
|
houseName: "周吉彬",
|
ownerName: "",
|
area: "215",
|
totalCompensation: "43",
|
firstPayment: "14",
|
secondPayment: "2",
|
totalPayment: "81",
|
monthlyPayment: "41",
|
remainingPayment: "17",
|
totalPaid: "",
|
hasError: true,
|
errors: {
|
idCard: "身份证号不合法",
|
totalPayment: "金额计算异常",
|
},
|
},
|
{
|
town: "清泉村",
|
projectName:
|
"成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示",
|
village: "清泉村",
|
time: "",
|
owner: "周忠心",
|
idCard: "440203199000999876",
|
contact: "",
|
resettlementPeople: 1,
|
additionalPeople: 1,
|
totalPeople: 2,
|
houseName: "周忠心、杨春云",
|
ownerName: "",
|
area: "103",
|
totalCompensation: "88",
|
firstPayment: "42",
|
secondPayment: "14",
|
totalPayment: "61",
|
monthlyPayment: "35",
|
remainingPayment: "26",
|
totalPaid: "",
|
hasError: false,
|
},
|
{
|
town: "清泉村",
|
projectName:
|
"成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示",
|
village: "清泉村",
|
time: "",
|
owner: "李辉",
|
idCard: "440203199000999876",
|
contact: "",
|
resettlementPeople: 2,
|
additionalPeople: 1,
|
totalPeople: 3,
|
houseName: "王强",
|
ownerName: "",
|
area: "302",
|
totalCompensation: "49",
|
firstPayment: "28",
|
secondPayment: "10",
|
totalPayment: "56",
|
monthlyPayment: "29",
|
remainingPayment: "4",
|
totalPaid: "",
|
hasError: false,
|
},
|
],
|
};
|
},
|
watch: {
|
visible(val) {
|
this.dialogVisible = val;
|
},
|
dialogVisible(val) {
|
this.$emit("update:visible", val);
|
},
|
rowData: {
|
handler(newVal) {
|
if (newVal && Object.keys(newVal).length > 0) {
|
// 如果有传入数据，可以在这里处理
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
tableRowClassName({ row, rowIndex }) {
|
if (row.hasError) {
|
return "error-row";
|
}
|
return "";
|
},
|
cancelAudit() {
|
this.dialogVisible = false;
|
this.resetForm();
|
},
|
submitAudit() {
|
// 提交审核
|
this.$emit("audit-submit", {
|
result: this.form.auditResult,
|
comment: this.form.auditComment,
|
});
|
this.dialogVisible = false;
|
this.resetForm();
|
},
|
resetForm() {
|
this.form = {
|
auditResult: "pass",
|
auditComment: "",
|
};
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.approval-content {
|
display: flex;
|
margin-bottom: 20px;
|
}
|
|
.table-container {
|
flex: 1;
|
margin-right: 20px;
|
overflow-x: auto;
|
}
|
|
.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;
|
}
|
|
.audit-result {
|
margin-bottom: 15px;
|
}
|
|
.result-title,
|
.comment-title {
|
font-weight: bold;
|
margin-bottom: 10px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
|
<style>
|
/* 全局样式 */
|
.error-row {
|
background-color: #ffecec !important;
|
}
|
</style>
|
