<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<el-form ref="form" :model="form" :rules="rules" label-width="215px" size="small">
|
<!-- 基本信息 -->
|
<div class="form-section">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="拆迁项目名称" prop="projectName">
|
<el-input :disabled="$route.query.type == 'detail'" style="width: 200px;" v-model="form.projectName" placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="镇（街道）" prop="street">
|
<el-input :disabled="$route.query.type == 'detail'" style="width: 200px;" v-model="form.street" placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="所在村（社区）" prop="community">
|
<el-input :disabled="$route.query.type == 'detail'" style="width: 200px;" v-model="form.community" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="户主姓名" prop="householdHead">
|
<el-input :disabled="$route.query.type == 'detail'" style="width: 200px;" v-model="form.householdHead" placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="户主身份号" prop="idCard">
|
<el-input :disabled="$route.query.type == 'detail'" style="width: 200px;" v-model="form.idCard" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="应安置人数" prop="resettledNum">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.resettledNum" :controls="false"
|
controls-position="right" style="width: 200px;">
|
<template slot="append">人</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="所有家庭成员应安置面积" prop="resettledArea">
|
<el-input :disabled="$route.query.type == 'detail'" style="width: 200px;" v-model="form.resettledArea" :controls="false"
|
>
|
<template slot="append">㎡</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 补偿金额标准 -->
|
<div class="form-section">
|
<div class="section-title">补偿金额标准</div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="新建商品住房/商业用房/停车位" prop="priceNewAmount">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.priceNewAmount" :min="0" :controls="false"
|
style="width: 200px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="二手住房" prop="priceOldAmount">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.priceOldAmount" :min="0" :controls="false"
|
style="width: 200px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 补偿金额 -->
|
<div class="form-section">
|
<div class="section-title">补偿金额</div>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="补偿总金额" prop="compensationAmount">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.compensationAmount" :min="0" :controls="false"
|
style="width: 200px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="25%首付款" prop="downPaymentAmount">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.downPaymentAmount" :min="0" :controls="false"
|
style="width: 200px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="每季度需要支付款项" prop="quarterPayAmount">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.quarterPayAmount" :min="0" :controls="false"
|
style="width: 200px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="过渡补贴" prop="subsidyAmount">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.subsidyAmount" :min="0" :controls="false"
|
style="width: 200px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="16">
|
<el-form-item label="备注" prop="remark">
|
<el-input :disabled="$route.query.type == 'detail'" v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 按钮区域 -->
|
<div class="form-footer">
|
<el-button type="primary" v-if="$route.query.type != 'detail'" size="small" @click="submitForm">提交</el-button>
|
<el-button type="primary" v-if="$route.query.type == 'detail'" size="small" @click="$router.back()">返回</el-button>
|
</div>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { addPlacementBatchMoney,getPlacementBatchMoneyDetail,updatePlacementBatchMoney } from '@/api/placement-details'
|
export default {
|
name: 'AddResettle',
|
data() {
|
return {
|
// 表单数据
|
form: {
|
projectName: '', // 拆迁项目名称
|
street: '', // 镇（街道）
|
community: '', // 所在村（社区）
|
householdHead: '', // 户主姓名
|
idCard: '', // 户主身份号
|
resettledNum: 1, // 应安置人数
|
resettledArea: 0, // 所有家庭成员应安置面积
|
priceNewAmount: 0, // 新建商品住房/商业用房/停车位
|
priceOldAmount: 0, // 二手住房
|
compensationAmount: 0, // 补偿总金额
|
downPaymentAmount: 0, // 25%首付款
|
quarterPayAmount: 0, // 每季度需要支付款项
|
subsidyAmount: 0, // 过渡补贴
|
remark: '' // 备注
|
},
|
// 表单校验规则
|
rules: {
|
projectName: [
|
{ required: true, message: '请输入拆迁项目名称', trigger: 'blur' }
|
],
|
street: [
|
{ required: true, message: '请输入镇（街道）', trigger: 'blur' }
|
],
|
community: [
|
{ 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' }
|
],
|
resettledNum: [
|
{ required: true, message: '请输入应安置人数', trigger: 'blur' },
|
],
|
resettledArea: [
|
{ required: true, message: '请输入所有家庭成员应安置面积', trigger: 'blur' },
|
],
|
priceNewAmount: [
|
{ required: true, message: '请输入新建商品住房/商业用房/停车位', trigger: 'blur' },
|
],
|
priceOldAmount: [
|
{ required: true, message: '请输入二手住房', trigger: 'blur' },
|
],
|
compensationSumWarn: [
|
{ required: true, message: '请输入补偿总金额', trigger: 'blur' },
|
],
|
downPaymentAmount: [
|
{ required: true, message: '请输入25%首付款', trigger: 'blur' },
|
],
|
quarterPayAmount: [
|
{ required: true, message: '请输入每季度需要支付款项', trigger: 'blur' },
|
],
|
subsidyAmount: [
|
{ required: true, message: '请输入过渡补贴', trigger: 'blur' },
|
],
|
}
|
}
|
},
|
mounted() {
|
if (this.$route.query.moneyId) {
|
getPlacementBatchMoneyDetail({ id: this.$route.query.moneyId }).then(res => {
|
if (res.code === 200) {
|
this.form = res.data
|
}
|
})
|
} else {
|
this.resetForm()
|
}
|
},
|
methods: {
|
// 提交表单
|
submitForm() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
// TODO: 调用接口提交数据
|
if (this.$route.query.moneyId) {
|
updatePlacementBatchMoney({ ...this.form, placementBatchId: this.$route.query.id,id: this.$route.query.moneyId }).then(res => {
|
if (res.code === 200) {
|
this.$message.success('编辑成功')
|
this.$router.back()
|
}
|
})
|
} else {
|
addPlacementBatchMoney({ ...this.form, placementBatchId: Number(this.$route.query.id) }).then(res => {
|
if (res.code === 200) {
|
this.$message.success('提交成功')
|
this.$router.back()
|
}
|
})
|
}
|
} else {
|
return false
|
}
|
})
|
},
|
// 重置表单
|
resetForm() {
|
this.$refs.form.resetFields()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: calc(100vh - 84px);
|
}
|
|
.box-card {
|
margin-bottom: 20px;
|
|
.form-section {
|
margin-bottom: 30px;
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 20px;
|
padding-left: 10px;
|
border-left: 4px solid #409EFF;
|
}
|
}
|
|
.form-footer {
|
text-align: center;
|
margin-top: 40px;
|
}
|
}
|
|
:deep(.el-input-number) {
|
width: 100%;
|
}
|
|
:deep(.el-textarea__inner) {
|
font-family: Arial, sans-serif;
|
}
|
</style>
|
