<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<el-form ref="form" :model="form" :rules="rules" label-width="180px" size="small" :disabled="isViewMode">
|
<!-- 基本信息 -->
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="镇（街道）" prop="street" required>
|
<el-input v-model="form.street" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="所在村（社区）" prop="community" required>
|
<el-input v-model="form.community" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆迁项目名称" prop="projectName" required>
|
<el-input v-model="form.projectName" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆迁时间" prop="demolitionTime">
|
<el-date-picker
|
v-model="form.demolitionTime"
|
type="date"
|
placeholder="请选择拆迁时间"
|
style="width: 100%;"
|
value-format="yyyy-MM-dd"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="户主姓名" prop="householdHead" required>
|
<el-input v-model="form.householdHead" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="户主身份号" prop="idCard" required>
|
<el-input v-model="form.idCard" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话" prop="mobile" required>
|
<el-input v-model="form.mobile" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 本次安置人数 -->
|
<div class="section-title">本次安置人数</div>
|
<el-row :gutter="24">
|
<el-col :span="8">
|
<el-form-item label="集体经济组织成员" prop="currentCollectiveNum" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.currentCollectiveNum" placeholder="请输入" clearable style="width: 100%;" >
|
<template slot="append">人</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="非集体经济组织成员" prop="currentNoCollectiveNum" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.currentNoCollectiveNum" placeholder="请输入" clearable style="width: 100%;" >
|
<template slot="append">人</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计" prop="currentCount">
|
<div class="input-with-unit">
|
<el-input v-model="form.currentCount" placeholder="自动计算" disabled style="width: 100%;" >
|
<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="待安置家庭成员姓名" prop="waitFamilyNames" required>
|
<el-input v-model="form.waitFamilyNames" placeholder="请输入" clearable style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="待安置人员应安置面积合计" label-width="215px" prop="waitFamilyArea" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.waitFamilyArea" placeholder="请输入" clearable style="width: 100%;" >
|
<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" prop="compensationNewAmount" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.compensationNewAmount" placeholder="请输入" clearable style="width: 100%;" >
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="二手住房" label-width="215px" prop="compensationOldAmount" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.compensationOldAmount" placeholder="请输入" clearable style="width: 100%;" >
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="合计" label-width="215px" prop="compensationSum">
|
<div class="input-with-unit">
|
<el-input v-model="form.compensationSum" placeholder="自动计算" disabled style="width: 100%;" >
|
<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" prop="downPaymentAmount" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.downPaymentAmount" placeholder="请输入" clearable style="width: 100%;" >
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="每季度需支付款项" label-width="215px" prop="quarterPayAmount" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.quarterPayAmount" placeholder="请输入" clearable style="width: 100%;" >
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="过渡补贴" label-width="215px" prop="subsidyAmount" required>
|
<div class="input-with-unit">
|
<el-input v-model="form.subsidyAmount" placeholder="请输入" clearable style="width: 100%;" >
|
<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" prop="remark">
|
<el-input
|
type="textarea"
|
v-model="form.remark"
|
placeholder="请输入备注信息"
|
:rows="3"
|
style="width: 100%;"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="购房差异情况" label-width="215px" prop="situation">
|
<el-input
|
type="textarea"
|
v-model="form.situation"
|
placeholder="请输入购房差异情况说明"
|
:rows="3"
|
style="width: 100%;"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<!-- 按钮区域 -->
|
<div class="form-footer">
|
<el-button v-if="isAddMode" type="primary" @click="submitForm">提交</el-button>
|
<el-button v-if="isEditMode" type="primary" @click="submitForm">保存</el-button>
|
<el-button @click="goBack">返回</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { addDetail, getDetail, editDetail } from '@/api/application-batch'
|
export default {
|
name: 'ApplayPerson',
|
data() {
|
return {
|
form: {
|
street: '', // 镇（街道）
|
community: '', // 所在村（社区）
|
projectName: '', // 拆迁项目名称
|
demolitionTime: '', // 拆迁时间
|
householdHead: '', // 户主姓名
|
idCard: '', // 户主身份号
|
mobile: '', // 联系电话
|
currentCollectiveNum: '', // 集体经济组织成员
|
currentNoCollectiveNum: '', // 非集体经济组织成员
|
currentCount: '', // 合计人数
|
waitFamilyNames: '', // 待安置家庭成员姓名
|
waitFamilyArea: '', // 待安置人员应安置面积合计
|
compensationNewAmount: '', // 新建商品住房/商业用房/停车位
|
compensationOldAmount: '', // 二手住房
|
compensationSum: '', // 合计金额
|
downPaymentAmount: '', // 25%首付款
|
quarterPayAmount: '', // 每季度需支付款项
|
subsidyAmount: '', // 过渡补贴
|
remark: '', // 备注
|
situation: '', // 购房差异情况
|
placementApplyId: this.$route.query.parentId,
|
},
|
rules: {
|
street: [{ required: true, message: '请输入镇（街道）', trigger: 'blur' }],
|
community: [{ required: true, message: '请输入所在村（社区）', trigger: 'blur' }],
|
projectName: [{ required: true, message: '请输入拆迁项目名称', trigger: 'blur' }],
|
householdHead: [{ required: true, message: '请输入户主姓名', trigger: 'blur' }],
|
idCard: [
|
{ required: true, message: '请输入户主身份号', trigger: 'blur' },
|
{ pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
|
],
|
mobile: [
|
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
],
|
currentCollectiveNum: [
|
{ required: true, message: '请输入集体经济组织成员人数', trigger: 'blur' },
|
{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
|
],
|
currentNoCollectiveNum: [
|
{ required: true, message: '请输入非集体经济组织成员人数', trigger: 'blur' },
|
{ pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
|
],
|
waitFamilyNames: [{ required: true, message: '请输入待安置家庭成员姓名', trigger: 'blur' }],
|
waitFamilyArea: [
|
{ required: true, message: '请输入待安置人员应安置面积合计', trigger: 'blur' },
|
{ pattern: /^[0-9]+(\.[0-9]*)?$/, message: '请输入数字', trigger: 'blur' }
|
],
|
compensationNewAmount: [
|
{ required: true, message: '请输入新建商品住房/商业用房/停车位金额', trigger: 'blur' },
|
{ pattern: /^[0-9]+(\.[0-9]*)?$/, message: '请输入数字', trigger: 'blur' }
|
],
|
compensationOldAmount: [
|
{ required: true, message: '请输入二手住房金额', trigger: 'blur' },
|
{ pattern: /^[0-9]+(\.[0-9]*)?$/, message: '请输入数字', trigger: 'blur' }
|
],
|
downPaymentAmount: [
|
{ required: true, message: '请输入25%首付款', trigger: 'blur' },
|
{ pattern: /^[0-9]+(\.[0-9]*)?$/, message: '请输入数字', trigger: 'blur' }
|
],
|
quarterPayAmount: [
|
{ required: true, message: '请输入每季度需支付款项', trigger: 'blur' },
|
{ pattern: /^[0-9]+(\.[0-9]*)?$/, message: '请输入数字', trigger: 'blur' }
|
],
|
subsidyAmount: [
|
{ required: true, message: '请输入过渡补贴', trigger: 'blur' },
|
{ pattern: /^[0-9]+(\.[0-9]*)?$/, message: '请输入数字', trigger: 'blur' }
|
],
|
situation: [{ required: true, message: '请输入购房差异情况', trigger: 'blur' }]
|
},
|
originalForm: null // 用于存储编辑前的原始数据
|
}
|
},
|
computed: {
|
// 从路由获取参数
|
parentId() {
|
return this.$route.query.parentId
|
},
|
type() {
|
return this.$route.query.type || 'add'
|
},
|
id() {
|
return this.$route.query.id
|
},
|
// 判断是否是查看模式
|
isViewMode() {
|
return this.type === 'detail'
|
},
|
// 判断是否是编辑模式
|
isEditMode() {
|
return this.type === 'edit'
|
},
|
// 判断是否是添加模式
|
isAddMode() {
|
return this.type === 'add'
|
}
|
},
|
created() {
|
this.initData()
|
},
|
watch: {
|
// 监听集体和非集体成员人数，自动计算总人数
|
'form.currentCollectiveNum': {
|
handler(val) {
|
this.calculateTotalMember()
|
}
|
},
|
'form.currentNoCollectiveNum': {
|
handler(val) {
|
this.calculateTotalMember()
|
}
|
},
|
// 监听新建和二手房金额，自动计算总金额
|
'form.compensationNewAmount': {
|
handler(val) {
|
this.calculateTotalAmount()
|
}
|
},
|
'form.compensationOldAmount': {
|
handler(val) {
|
this.calculateTotalAmount()
|
}
|
}
|
},
|
methods: {
|
async initData() {
|
if (this.id && (this.isEditMode || this.isViewMode)) {
|
try {
|
const response = await getDetail({id: this.id})
|
if (response.code === 200) {
|
this.form = response.data
|
this.originalForm = JSON.parse(JSON.stringify(response.data))
|
} else {
|
this.$message.error(response.msg || '获取详情数据失败')
|
}
|
} catch (error) {
|
this.$message.error('获取详情数据失败')
|
console.error('获取详情数据失败:', error)
|
}
|
}
|
},
|
async submitForm() {
|
this.$refs.form.validate(async valid => {
|
if (valid) {
|
try {
|
const params = {
|
...this.form,
|
placementApplyId: this.parentId
|
}
|
|
let response
|
if (this.isAddMode) {
|
response = await addDetail(params)
|
this.$message.success('添加成功')
|
} else if (this.isEditMode) {
|
response = await editDetail({...params, id: this.id})
|
this.$message.success('编辑成功')
|
}
|
|
if (response.code === 200) {
|
this.goBack()
|
} else {
|
this.$message.error(response.msg || (this.isAddMode ? '添加失败' : '编辑失败'))
|
}
|
} catch (error) {
|
this.$message.error(this.isAddMode ? '添加失败' : '编辑失败')
|
console.error('提交表单失败:', error)
|
}
|
} else {
|
this.$message.error('请填写完整信息')
|
}
|
})
|
},
|
goBack() {
|
this.$router.go(-1)
|
},
|
// 计算总人数
|
calculateTotalMember() {
|
const collective = parseFloat(this.form.currentCollectiveNum) || 0
|
const nonCollective = parseFloat(this.form.currentNoCollectiveNum) || 0
|
this.form.currentCount = collective + nonCollective
|
},
|
// 计算总金额
|
calculateTotalAmount() {
|
const newBuilding = parseFloat(this.form.compensationNewAmount) || 0
|
const secondHand = parseFloat(this.form.compensationOldAmount) || 0
|
this.form.compensationSum = newBuilding + secondHand
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: calc(100vh - 84px);
|
}
|
|
.box-card {
|
margin-bottom: 20px;
|
padding: 20px;
|
|
:deep(.el-form-item) {
|
margin-bottom: 22px;
|
|
|
}
|
|
:deep(.el-input-group__append) {
|
padding: 0 15px;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.form-footer {
|
text-align: center;
|
margin-top: 40px;
|
|
.el-button {
|
padding: 12px 35px;
|
margin: 0 10px;
|
}
|
}
|
|
:deep(.el-textarea__inner) {
|
font-family: Arial, sans-serif;
|
padding: 10px 15px;
|
line-height: 1.5;
|
}
|
|
:deep(.el-date-editor) {
|
width: 100% !important;
|
}
|
</style>
|
