<template>
|
<el-dialog
|
title="安置户申请信息详情"
|
:visible.sync="dialogVisible"
|
width="80%"
|
:close-on-click-modal="false"
|
:append-to-body="true"
|
>
|
<div class="detail-form" v-loading="loading">
|
<el-form :model="formData" label-width="180px" :disabled="true">
|
<!-- 基本信息 -->
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="镇（街道）">
|
<el-input v-model="formData.street"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="所在村（社区）">
|
<el-input v-model="formData.community"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆迁项目名称">
|
<el-input v-model="formData.projectName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆迁时间">
|
<el-input v-model="formData.demolitionTime"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="户主姓名">
|
<el-input v-model="formData.householdHead"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="户主身份号">
|
<el-input v-model="formData.idCard"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话">
|
<el-input v-model="formData.mobile"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 本次安置人数 -->
|
<div class="section-title">本次安置人数</div>
|
<el-row :gutter="24">
|
<el-col :span="8">
|
<el-form-item label="集体经济组织成员">
|
<div class="input-with-unit">
|
<el-input v-model="formData.currentCollectiveNum">
|
<template slot="append">人</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="非集体经济组织成员">
|
<div class="input-with-unit">
|
<el-input v-model="formData.currentNoCollectiveNum">
|
<template slot="append">人</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计">
|
<div class="input-with-unit">
|
<el-input v-model="formData.currentCount">
|
<template slot="append">人</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="待安置家庭成员姓名">
|
<el-input v-model="formData.waitFamilyNames"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="待安置人员应安置面积合计" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.waitFamilyArea">
|
<template slot="append">㎡</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 补偿金额 -->
|
<div class="section-title">补偿金额</div>
|
<el-row :gutter="24">
|
<el-col :span="8">
|
<el-form-item label="新建商品住房/商业用房/停车位" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.compensationNewAmount">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="二手住房" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.compensationOldAmount">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.compensationSum">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="24">
|
<el-col :span="8">
|
<el-form-item label="25%首付款" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.downPaymentAmount">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="每季度需支付款项" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.quarterPayAmount">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="过渡补贴" label-width="215px">
|
<div class="input-with-unit">
|
<el-input v-model="formData.subsidyAmount">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="备注" label-width="215px">
|
<el-input
|
type="textarea"
|
v-model="formData.remark"
|
:rows="3"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="购房差异情况" label-width="215px">
|
<el-input
|
type="textarea"
|
v-model="formData.situation"
|
:rows="3"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="closeDialog">关闭</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { getDetail } from "@/api/application-batch"
|
|
export default {
|
name: "DetailDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
id: {
|
type: [Number, String],
|
required: true
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
dialogVisible: false,
|
formData: {
|
street: '', // 镇（街道）
|
community: '', // 所在村（社区）
|
projectName: '', // 拆迁项目名称
|
demolitionTime: '', // 拆迁时间
|
householdHead: '', // 户主姓名
|
idCard: '', // 户主身份号
|
mobile: '', // 联系电话
|
currentCollectiveNum: '', // 集体经济组织成员
|
currentNoCollectiveNum: '', // 非集体经济组织成员
|
currentCount: '', // 合计人数
|
waitFamilyNames: '', // 待安置家庭成员姓名
|
waitFamilyArea: '', // 待安置人员应安置面积合计
|
compensationNewAmount: '', // 新建商品住房/商业用房/停车位
|
compensationOldAmount: '', // 二手住房
|
compensationSum: '', // 合计金额
|
downPaymentAmount: '', // 25%首付款
|
quarterPayAmount: '', // 每季度需支付款项
|
subsidyAmount: '', // 过渡补贴
|
remark: '', // 备注
|
situation: '', // 购房差异情况
|
}
|
}
|
},
|
watch: {
|
visible(val) {
|
this.dialogVisible = val;
|
if (val) {
|
this.getDetailData();
|
}
|
},
|
dialogVisible(val) {
|
this.$emit('update:visible', val);
|
}
|
},
|
methods: {
|
async getDetailData() {
|
this.loading = true;
|
try {
|
const res = await getDetail({
|
id: this.id,
|
});
|
if (res.code === 200) {
|
this.formData = res.data;
|
}
|
} catch (error) {
|
console.error('获取详情数据失败:', error);
|
this.$message.error('获取详情数据失败，请稍后重试');
|
} finally {
|
this.loading = false;
|
}
|
},
|
closeDialog() {
|
this.dialogVisible = false;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.detail-form {
|
padding: 20px;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin: 30px 0 20px;
|
padding-left: 10px;
|
border-left: 4px solid #409EFF;
|
}
|
|
.input-with-unit {
|
width: 100%;
|
|
:deep(.el-input-group__append) {
|
background-color: #f5f7fa;
|
color: #606266;
|
border-left: 1px solid #dcdfe6;
|
}
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
:deep(.el-form-item) {
|
margin-bottom: 22px;
|
}
|
|
:deep(.el-input.is-disabled .el-input__inner) {
|
color: #606266;
|
background-color: #f5f7fa;
|
}
|
|
:deep(.el-textarea.is-disabled .el-textarea__inner) {
|
color: #606266;
|
background-color: #f5f7fa;
|
}
|
|
:deep(.el-textarea__inner) {
|
font-family: Arial, sans-serif;
|
padding: 10px 15px;
|
line-height: 1.5;
|
}
|
</style>
|
