<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" >
|
<!-- <el-input v-model="form.street" placeholder="请输入" clearable style="width: 100%;" /> -->
|
|
<el-select
|
v-model="form.street"
|
placeholder="请选择镇街"
|
clearable
|
size="small"
|
>
|
<el-option
|
v-for="item in streetOptions"
|
:key="item.dictCode"
|
:label="item.dictLabel"
|
:value="item.dictLabel"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="所在村（社区）" prop="community" >
|
<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" >
|
<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" >
|
<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" >
|
<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" >
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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"
|
|
>
|
<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,getDictList } 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,
|
},
|
streetOptions:[],
|
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: /^[0-9]\d*$/, message: "请输入正整数", trigger: "blur" },
|
],
|
currentNoCollectiveNum: [
|
{
|
required: true,
|
message: "请输入非集体经济组织成员人数",
|
trigger: "blur",
|
},
|
{ pattern: /^[0-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: false, 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();
|
this.getStreetOptions();
|
},
|
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: {
|
/** 获取镇街选项 */
|
getStreetOptions() {
|
getDictList().then((res) => {
|
this.streetOptions = res.data;
|
});
|
},
|
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>
|
