<template>
|
<el-dialog :title="type === 'audit' ? '审批安置户申请信息' : '安置户申请信息'" @open="openDialog" :visible.sync="dialogVisible"
|
width="80%" :close-on-click-modal="false" :append-to-body="true">
|
<!-- Tab切换区域 -->
|
<div class="tab-container">
|
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
<el-tab-pane label="资金表" name="1"></el-tab-pane>
|
<el-tab-pane label="购房信息表" name="2"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="approval-content">
|
<!-- 左侧表格区域 -->
|
<div class="table-container">
|
<div v-if="activeTab == '1'">
|
<!-- 表格区域 -->
|
<el-table v-loading="loading" :data="tableData" border style="width: 100%" max-height="300px"
|
:row-class-name="tableRowClassName">
|
<el-table-column type="index" label="序号" key="table_A" width="50" align="center" />
|
<el-table-column prop="street" label="镇（街道）" key="table_A" min-width="120" align="center" />
|
<el-table-column prop="projectName" label="拆迁项目名称" key="table_A" min-width="180" align="center" />
|
<el-table-column prop="community" label="所在村（社区）" key="table_A" min-width="120" align="center" />
|
<el-table-column prop="householdHead" label="户主姓名" key="table_A" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.householdHead }}
|
<el-tooltip v-if="scope.row.householdHeadWarn == 1" class="item" effect="dark" content="用户信息未通过安置申请"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="idCard" label="身份证号" key="table_A" min-width="180" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.idCard || "-" }}
|
<el-tooltip v-if="scope.row.idCardWarn == 1" class="item" effect="dark" content="身份信息不存在于待安置人员库"
|
placement="top">
|
<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="resettledNum" key="table_A" label="应安置人数（人）" min-width="140" align="center" />
|
<el-table-column label="所有家庭人员应安置面积（㎡）" key="table_A" prop="resettledArea" min-width="160" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.resettledArea }}
|
<el-tooltip v-if="scope.row.waitFamilyAreaWarn == 1" class="item" effect="dark" content="应补偿面积数据异常"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column label="补偿单位标准（万元）" key="table_A" min-width="160" align="center">
|
<el-table-column prop="priceNewAmount" key="table_A" label="新建商品住房、商业用房、停车位" min-width="160"
|
align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.priceNewAmount }}
|
<el-tooltip v-if="scope.row.priceAmountWarn == 1" class="item" effect="dark" content="补充标准数据异常"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="priceOldAmount" key="table_A" label="二手住房" min-width="150" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.priceOldAmount }}
|
<el-tooltip v-if="scope.row.twoPriceWarn == 1" class="item" effect="dark" content="检测到多个购房情况请人工核对"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column prop="compensationAmount" key="table_A" label="补偿资金总额（万元）" min-width="160" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.compensationAmount }}
|
<el-tooltip v-if="scope.row.compensationSumWarn == 1" class="item" effect="dark" content="补偿总金额数据异常"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="downPaymentAmount" key="table_A" label="25%首付款（㎡）" min-width="150" align="center" >
|
<template slot-scope="scope">
|
<span>{{ scope.row.downPaymentAmount }}</span>
|
<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" key="table_A" v-if="activeTab == '1'" label="每季度需支付款项（万元）"
|
min-width="180" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.quarterPayAmount }}
|
<el-tooltip v-if="scope.row.quarterPayAmountWarn == 1" class="item" effect="dark" content="季度款金额数据异常"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="subsidyAmount" key="table_A" label="过渡补贴（万元）" min-width="180" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.subsidyAmount }}
|
<el-tooltip v-if="scope.row.subsidyAmountWarn == 1" class="item" effect="dark" content="过渡补贴金额数据异常"
|
placement="top">
|
<el-image style="width: 12px; height: 12px; margin-left: 5px"
|
:src="require('../../../assets/logo/warning.png')" :fit="fit"></el-image> </el-tooltip></span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div v-else>
|
<!-- 购房信息表格 -->
|
<el-table v-loading="loading" :data="tableData" border style="width: 100%" max-height="300px"
|
:row-class-name="tableRowClassName1">
|
<el-table-column type="index" key="table_B" label="序号" width="50" align="center" />
|
<el-table-column prop="street" key="table_B" label="镇（街道）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.street }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="projectName" key="table_B" label="拆迁项目名称" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.projectName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="community" label="所在村（社区）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.community }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="demolitionTime" label="拆迁时间" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.demolitionTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="householdHead" label="户主姓名" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.householdHead }} <el-tooltip v-if="scope.row.householdHeadWarn == 1" class="item"
|
effect="dark" content="户主信息不存在于待安置人员库" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="idCard" label="身份证号" min-width="180" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.idCard || '-' }} <el-tooltip v-if="scope.row.idCardWarn == 1" class="item" effect="dark"
|
content="身份信息不存在于待安置人员库" placement="top">
|
<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 key="table_B" prop="mobile" label="联系电话" min-width="100" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.mobile || '-' }}
|
</template>
|
</el-table-column>
|
|
<el-table-column key="table_B" label="本次安置人数（人）" min-width="100" align="center">
|
<el-table-column key="table_B" prop="currentCollectiveNum" label="集体经济组织成员" min-width="100"
|
align="center">
|
<template slot-scope="scope">
|
{{ scope.row.currentCollectiveNum || '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="currentNoCollectiveNum" label="非集体经济组织成员" min-width="100"
|
align="center">
|
<template slot-scope="scope">
|
{{ scope.row.currentNoCollectiveNum || '-' }}
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="currentCount" label="合计" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.currentCount }}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column key="table_B" prop="waitFamilyNames" label="待安置家庭成员姓名" min-width="100" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.waitFamilyNames || '-' }} <el-tooltip v-if="scope.row.waitFamilyNamesWarn == 1"
|
class="item" effect="dark" content="身份信息存在重复数据" placement="top">
|
<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" key="table_B" label="集体成员面积" align="center" width="150">
|
<template slot-scope="scope">
|
{{ scope.row.orgArea }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="noOrgArea" key="table_B" label="非集体成员面积" align="center" width="150">
|
<template slot-scope="scope">
|
{{ scope.row.noOrgArea }}
|
</template>
|
</el-table-column>
|
|
|
<el-table-column key="table_B" prop="waitFamilyArea" label="待安置人员应安置面积合计（㎡）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.waitFamilyArea }} <el-tooltip v-if="scope.row.waitFamilyAreaWarn == 1" class="item"
|
effect="dark" content="应补偿面积数据异常" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" label="补偿金额（万元）" min-width="100" align="center">
|
<el-table-column key="table_B" prop="compensationNewAmount" label="新建商品住房、商业用房、停车位" min-width="100"
|
align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.compensationNewAmount }} <el-tooltip v-if="scope.row.compensationAmountWarn == 1"
|
class="item" effect="dark" content="检测到多个购房情况请人工核对" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="compensationOldAmount" label="二手住房" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.compensationOldAmount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="compensationSum" label="合计" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.compensationSum }} <el-tooltip v-if="scope.row.compensationSumWarn == 1"
|
class="item" effect="dark" content="补偿总金额数据异常" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column key="table_B" prop="downPaymentAmount" label="25%首付款（万元）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.downPaymentAmount }}</span>
|
<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 key="table_B" prop="quarterPayAmount" v-if="activeTab == '2'" label="每季度需支付款项（万元）"
|
min-width="180" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.quarterPayAmount }} <el-tooltip v-if="scope.row.quarterPayAmountWarn == 1"
|
class="item" effect="dark" content="季度款金额数据异常" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="subsidyAmount" label="过渡补贴（万元）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.subsidyAmount }} <el-tooltip v-if="scope.row.subsidyAmount == 1" class="item"
|
effect="dark" content="过渡补贴金额数据异常" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="remark" label="备注" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.remark }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="certificateTime" label="凭证发放时间" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.certificateTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="buyTime" label="购房时间" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.buyTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="dealAmount" label="成交金额（万元）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.dealAmount }}</span>
|
</template>
|
</el-table-column>
|
|
|
<el-table-column key="table_B" label="新建商品住房" min-width="100" align="center">
|
<el-table-column key="table_B" prop="newHousingName" label="楼盘名称" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.newHousingName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="newHousingArea" label="面积（㎡）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.newHousingArea }} <el-tooltip v-if="scope.row.areaWarn == 1" class="item"
|
effect="dark" content="面积数据异常" placement="top">
|
<el-image style="width: 12px; height: 12px;margin-left:5px"
|
:src="require('../../../assets/logo/warning.png')" fit="fit"></el-image>
|
</el-tooltip></span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="newHousingNum" label="套数（套）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.newHousingNum }}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
|
<el-table-column key="table_B" label="二手住房" min-width="100" align="center">
|
<el-table-column key="table_B" prop="oldHousingName" label="小区名称" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.oldHousingName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="oldHousingArea" label="面积（㎡）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.oldHousingArea }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="oldHousingNum" label="套数（套）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.oldHousingNum }}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
|
|
<el-table-column key="table_B" prop="householdHead" label="新建商业用房" min-width="100" align="center">
|
<el-table-column key="table_B" prop="buildHousingName" label="楼盘名称" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.buildHousingName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="buildHousingArea" label="面积（㎡）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.buildHousingArea }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="buildHousingNum" label="套数（套）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.buildHousingNum }}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
|
|
<el-table-column key="table_B" label="新建停车位" min-width="100" align="center">
|
<el-table-column key="table_B" prop="newStopName" label="楼盘名称" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.newStopName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="newStopArea" label="金额（万元）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.newStopArea }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="newStopNum" label="个数（个）" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.newStopNum }}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
|
<el-table-column key="table_B" prop="signTime" label="自主购房协议签订时间" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.signTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="compensationPayTime" label="25%补偿款及过渡补贴支付时间" min-width="100"
|
align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.compensationPayTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" label="剩余款项支付时间" min-width="100" align="center">
|
<el-table-column key="table_B" prop="remainingTime1" label="第一年" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.remainingTime1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="remainingTime2" label="第二年" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.remainingTime2 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="remainingTime3" label="第三年" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.remainingTime3 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="remainingTime4" label="第四年" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.remainingTime4 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column key="table_B" prop="remainingTime5" label="第四年" min-width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.remainingTime5 }}</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
</div>
|
</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">
|
{{ detailData.createUser || "-" }}
|
</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">提交时间：</div>
|
<div class="approval-time">
|
{{ detailData.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">
|
{{ detailData.createUser || "-" }}
|
</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">提交时间：</div>
|
<div class="approval-time">
|
{{ detailData.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">
|
{{ detailData.approveName || "-" }}
|
</div>
|
</div>
|
<div class="approval-time-info">
|
<div class="approval-time-title">审核时间：</div>
|
<div class="approval-time">
|
{{ detailData.approveTime | formatDate }}
|
</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-title">审核结果</div>
|
<div class="result-options">
|
<el-radio-group :disabled="type === 'detail'" v-model="form.status">
|
<el-radio label="1">通过</el-radio>
|
<el-radio label="2">驳回</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.reason"
|
: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 dayjs from 'dayjs';
|
import { getPlacementBatchDetail } from "@/api/placement-details";
|
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: () => ({}),
|
},
|
placementBatchId: {
|
type: Number,
|
default: "",
|
},
|
},
|
filters: {
|
formatDate(date) {
|
if (date) {
|
return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
|
} else {
|
return "-";
|
}
|
},
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
hasWarning: true,
|
activeTab: "1",
|
detailData: {},
|
loading: false,
|
form: {
|
status: "pass",
|
reason: "",
|
},
|
queryParams: {
|
pageNum: 1,
|
pageSize: 1000000,
|
},
|
tableData: [],
|
};
|
},
|
|
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: {
|
openDialog() {
|
this.getList();
|
},
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
// TODO: 调用接口获取数据
|
getPlacementBatchDetail({
|
...this.queryParams,
|
placementBatchId: this.placementBatchId,
|
type: this.activeTab,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.tableData =
|
this.activeTab == "1" ? res.data.assetList : res.data.householdList;
|
this.detailData = res.data.placementBatch;
|
this.total = res.data.total;
|
res.data.placementBatch.status =
|
res.data.placementBatch.status.toString();
|
this.form = res.data.placementBatch;
|
this.loading = false;
|
}
|
});
|
},
|
/** Tab切换操作 */
|
handleTabClick(tab) {
|
this.activeTab = tab.name;
|
this.getList();
|
},
|
tableRowClassName({ row, rowIndex }) {
|
if (row.compensationSumWarn == 1 || row.householdHeadWarn == 1 || row.idCardWarn == 1 || row.priceAmountWarn == 1 || row.quarterPayAmountWarn == 1 || row.subsidyAmountWarn == 1 || row.twoPriceWarn == 1 || row.waitFamilyAreaWarn == 1 || row.downPaymentAmountWarn == 1) {
|
return 'warning-row'
|
}
|
return ''
|
},
|
tableRowClassName1({ row, rowIndex }) {
|
if (row.areaWarn == 1 || row.compensationAmountWarn == 1 || row.compensationSumWarn == 1 || row.householdHeadWarn == 1 || row.idCardWarn == 1 || row.waitFamilyAreaWarn == 1 || row.waitFamilyNamesWarn == 1 || row.subsidyAmountWarn == 1 || row.quarterPayAmountWarn == 1 || row.downPaymentAmountWarn) {
|
return 'warning-row'
|
}
|
return ''
|
},
|
|
cancelAudit() {
|
this.$emit("close");
|
this.resetForm();
|
},
|
submitAudit() {
|
// 提交审核
|
this.$emit("audit-submit", {
|
status: this.form.status,
|
reason: this.form.reason,
|
id: this.placementBatchId,
|
});
|
this.resetForm();
|
},
|
resetForm() {
|
this.form = {
|
status: "pass",
|
reason: "",
|
};
|
},
|
},
|
};
|
</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-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>
|
