<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<el-form ref="form" :model="form" :rules="rules" label-width="180px" size="small">
|
<!-- 基本信息 -->
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="镇（街道）" prop="street">
|
<el-select v-model="form.street" :disabled="$route.query.type === 'detail'" placeholder="请选择"
|
style="width: 180px">
|
<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 :disabled="$route.query.type === 'detail'" v-model="form.community" placeholder="请输入" clearable
|
style="width:180px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆迁项目名称" prop="projectName">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.projectName" placeholder="请输入"
|
clearable style="width:180px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="拆迁时间" prop="demolitionTime">
|
<el-date-picker :disabled="$route.query.type === 'detail'" v-model="form.demolitionTime" type="date"
|
placeholder="请选择拆迁时间" style="width:180px;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="户主姓名" prop="householdHead">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.householdHead" placeholder="请输入"
|
clearable style="width:180px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="户主身份号" prop="idCard">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.idCard" placeholder="请输入" clearable
|
style="width:180px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话" prop="mobile">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.mobile" placeholder="请输入" clearable
|
style="width:180px;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 本次安置人数 -->
|
<div class="section-title">本次安置人数</div>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="集体经济组织成员" prop="currentCollectiveNum">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.currentCollectiveNum"
|
placeholder="请输入" clearable style="width: 250px;">
|
<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 :disabled="$route.query.type === 'detail'" v-model="form.currentNoCollectiveNum"
|
placeholder="请输入" clearable style="width: 250px;">
|
<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 :disabled="$route.query.type === 'detail'" v-model="form.currentCount" placeholder="自动计算"
|
disabled style="width: 250px;">
|
<template slot="append">人</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="待安置家庭成员姓名" prop="waitFamilyNames">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.waitFamilyNames" placeholder="请输入"
|
clearable style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="待安置人员应安置面积合计" label-width="215px" prop="waitFamilyArea">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.waitFamilyArea" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">㎡</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 补偿金额 -->
|
<div class="section-title">补偿金额</div>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="新建商品住房/商业用房/停车位" label-width="215px" prop="compensationNewAmount"
|
:rules="[{ required: !form.compensationOldAmount, message: '请输入新建商品住房/商业用房/停车位', trigger: 'blur' }]">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.compensationNewAmount"
|
placeholder="请输入" clearable style="width: 250px;">
|
<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"
|
:rules="[{ required: !form.compensationNewAmount, message: '请输入二手住房', trigger: 'blur' }]">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.compensationOldAmount"
|
placeholder="请输入" clearable style="width: 250px;">
|
<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 :disabled="$route.query.type === 'detail'" v-model="form.compensationSum" placeholder="自动计算"
|
disabled style="width: 250px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="25%首付款" label-width="215px" prop="downPaymentAmount">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.downPaymentAmount" placeholder="请输入"
|
clearable style="width: 250px;">
|
<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 :disabled="$route.query.type === 'detail'" v-model="form.quarterPayAmount" placeholder="请输入"
|
clearable style="width: 250px;">
|
<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 :disabled="$route.query.type === 'detail'" v-model="form.subsidyAmount" placeholder="请输入"
|
clearable style="width: 250px;">
|
<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 :disabled="$route.query.type === 'detail'" type="textarea" v-model="form.remark"
|
placeholder="请输入备注信息" :rows="3" style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 凭证发放时间 -->
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="凭证发放时间" label-width="215px" prop="certificateTime">
|
<el-date-picker :disabled="$route.query.type === 'detail'" v-model="form.certificateTime" type="date"
|
placeholder="请选择凭证发放时间" style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 购房信息 -->
|
<div class="section-title">购房信息</div>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="购房时间" prop="buyTime">
|
<el-date-picker :disabled="$route.query.type === 'detail'" v-model="form.buyTime" type="date"
|
placeholder="请选择购房时间" style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="成交金额" prop="dealAmount">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.dealAmount" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="新建商品住房: 楼盘名称" prop="newHousingName"
|
:rules="{ required: (form.newHousingName || form.newHousingArea || form.newHousingNum), message: '请输入楼盘名称', trigger: 'blur' }">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.newHousingName" placeholder="请输入"
|
clearable style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="面积" prop="newHousingArea"
|
:rules="{ required: (form.newHousingName || form.newHousingArea || form.newHousingNum), message: '请输入面积', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.newHousingArea" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">㎡</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="套数" prop="newHousingNum"
|
:rules="{ required: (form.newHousingName || form.newHousingArea || form.newHousingNum), message: '请输入套数', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.newHousingNum" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">套</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="二手住房: 小区名称" prop="oldHousingName"
|
:rules="{ required: (form.oldHousingName || form.oldHousingArea || form.oldHousingNum), message: '请输入小区名称', trigger: 'blur' }">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.oldHousingName" placeholder="请输入"
|
clearable style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="面积" prop="oldHousingArea"
|
:rules="{ required: (form.oldHousingName || form.oldHousingArea || form.oldHousingNum), message: '请输入面积', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.oldHousingArea" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">㎡</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="套数" prop="oldHousingNum"
|
:rules="{ required: (form.oldHousingName || form.oldHousingArea || form.oldHousingNum), message: '请输入套数', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.oldHousingNum" placeholder="请输入"
|
clearable style="width: 160px;">
|
<template slot="append">套</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="新建商业用房: 楼盘名称" prop="buildHousingName"
|
:rules="{ required: (form.buildHousingName || form.buildHousingAmount || form.buildHousingArea || form.buildHousingNum), message: '请输入楼盘名称', trigger: 'blur' }">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.buildHousingName" placeholder="请输入"
|
clearable style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="金额" prop="buildHousingAmount"
|
:rules="{ required: (form.buildHousingName || form.buildHousingAmount || form.buildHousingArea || form.buildHousingNum), message: '请输入金额', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.buildHousingAmount" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="面积" prop="buildHousingArea"
|
:rules="{ required: (form.buildHousingName || form.buildHousingAmount || form.buildHousingArea || form.buildHousingNum), message: '请输入面积', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.buildHousingArea" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">㎡</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="套数" prop="buildHousingNum"
|
:rules="{ required: (form.buildHousingName || form.buildHousingAmount || form.buildHousingArea || form.buildHousingNum), message: '请输入套数', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.buildHousingNum" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">套</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="新建停车位: 楼盘名称" prop="newStopName"
|
:rules="{ required: (form.newStopName || form.newStopArea || form.newStopNum), message: '请输入楼盘名称', trigger: 'blur' }">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.newStopName" placeholder="请输入"
|
clearable style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="金额" prop="newStopArea"
|
:rules="{ required: (form.newStopName || form.newStopArea || form.newStopNum), message: '请输入金额', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.newStopArea" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">万元</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="个数" prop="newStopNum"
|
:rules="{ required: (form.newStopName || form.newStopArea || form.newStopNum), message: '请输入个数', trigger: 'blur' }">
|
<div class="input-with-unit">
|
<el-input :disabled="$route.query.type === 'detail'" v-model="form.newStopNum" placeholder="请输入"
|
clearable style="width: 250px;">
|
<template slot="append">套</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 补偿款支付 -->
|
<div class="section-title">补偿款支付</div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="自主购房协议签订时间" prop="signTime">
|
<el-date-picker :disabled="$route.query.type === 'detail'" v-model="form.signTime" type="date"
|
placeholder="请选择时间" style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="25%补偿款及过渡补贴支付时间" label-width="220px" prop="compensationPayTime">
|
<el-date-picker :disabled="$route.query.type === 'detail'" v-model="form.compensationPayTime" type="date"
|
placeholder="请选择时间" style="width: 250px;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="剩余款项支付时间：">
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<div class="payment-label">第一年</div>
|
<el-form-item prop="remainingTime1">
|
<el-date-picker :disabled="$route.query.type === 'detail'" :value-format="'yyyy-MM-dd'"
|
v-model="form.remainingTime1" type="date" placeholder="请选择时间" style="width: 200px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<div class="payment-label">第二年</div>
|
<el-form-item prop="remainingTime2">
|
<el-date-picker :disabled="$route.query.type === 'detail'" :value-format="'yyyy-MM-dd'"
|
v-model="form.remainingTime2" type="date" placeholder="请选择时间" style="width: 200px;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<div class="payment-label">第三年</div>
|
<el-form-item prop="remainingTime3">
|
<el-date-picker :disabled="$route.query.type === 'detail'" :value-format="'yyyy-MM-dd'"
|
v-model="form.remainingTime3" type="date" placeholder="请选择时间" style="width: 200px;" />
|
</el-form-item>
|
|
</el-col>
|
<el-col :span="4">
|
<div class="payment-label">第四年</div>
|
<el-form-item prop="remainingTime4">
|
<el-date-picker :disabled="$route.query.type === 'detail'" :value-format="'yyyy-MM-dd'"
|
v-model="form.remainingTime4" type="date" placeholder="请选择时间" style="width: 200px;" />
|
</el-form-item>
|
|
</el-col>
|
<el-col :span="4">
|
<div class="payment-label">第五年</div>
|
<el-form-item prop="remainingTime5">
|
<el-date-picker :disabled="$route.query.type === 'detail'" :value-format="'yyyy-MM-dd'"
|
v-model="form.remainingTime5" type="date" placeholder="请选择时间" style="width: 200px;" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 按钮区域 -->
|
<div class="form-footer">
|
<el-button v-if="$route.query.type !== 'detail'" type="primary" @click="submitForm">提交</el-button>
|
<el-button v-else @click="$router.back()">返回</el-button>
|
</div>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { addPlacementBatchHouse, updatePlacementBatchHouse, getPlacementBatchHouseDetail } from '@/api/placement-details'
|
import { getDictData } from '@/api/placement'
|
export default {
|
name: 'ApplayPerson',
|
data() {
|
return {
|
form: {
|
street: '',
|
community: '',
|
projectName: '',
|
demolitionTime: '',
|
householdHead: '',
|
idCard: '',
|
mobile: '',
|
currentCollectiveNum: '',
|
currentNoCollectiveNum: '',
|
currentCount: '',
|
waitFamilyNames: '',
|
waitFamilyArea: '',
|
compensationNewAmount: '',
|
compensationOldAmount: '',
|
compensationSum: '',
|
downPaymentAmount: '',
|
quarterPayAmount: '',
|
subsidyAmount: '',
|
remark: '',
|
certificateTime: '',
|
buyTime: '',
|
dealAmount: '',
|
newHousingName: '',
|
newHousingArea: '',
|
newHousingNum: '',
|
oldHousingName: '',
|
oldHousingArea: '',
|
oldHousingNum: '',
|
buildHousingName: '',
|
buildHousingAmount: '',
|
buildHousingArea: '',
|
buildHousingNum: '',
|
newStopName: '',
|
newStopArea: '',
|
newStopNum: '',
|
signTime: '',
|
compensationPayTime: '',
|
remainingTime1: '',
|
remainingTime2: '',
|
remainingTime3: '',
|
remainingTime4: '',
|
remainingTime5: ''
|
},
|
streetOptions: [],
|
rules: {
|
street: [{ required: true, message: '请输入镇（街道）', trigger: 'blur' }],
|
community: [{ required: true, message: '请输入所在村（社区）', trigger: 'blur' }],
|
projectName: [{ required: true, message: '请输入拆迁项目名称', trigger: 'blur' }],
|
demolitionTime: [{ required: true, message: '请选择拆迁时间', trigger: 'change' }],
|
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' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
currentNoCollectiveNum: [
|
{ required: true, message: '请输入非集体经济组织成员人数', trigger: 'blur' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
waitFamilyNames: [{ required: true, message: '请输入待安置家庭成员姓名', trigger: 'blur' }],
|
waitFamilyArea: [
|
{ required: true, message: '请输入待安置人员应安置面积合计', trigger: 'blur' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
// compensationNewAmount: [
|
// { required: true, message: '请输入新建商品住房/商业用房/停车位金额', trigger: 'blur' },
|
// // { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
// ],
|
// compensationOldAmount: [
|
// { required: true, message: '请输入二手住房金额', trigger: 'blur' },
|
// // { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
// ],
|
downPaymentAmount: [
|
{ required: true, message: '请输入25%首付款', trigger: 'blur' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
quarterPayAmount: [
|
{ required: true, message: '请输入每季度需支付款项', trigger: 'blur' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
subsidyAmount: [
|
{ required: true, message: '请输入过渡补贴', trigger: 'blur' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
certificateTime: [{ required: true, message: '请选择凭证发放时间', trigger: 'change' }],
|
buyTime: [{ required: true, message: '请选择购房时间', trigger: 'change' }],
|
dealAmount: [
|
{ required: true, message: '请输入成交金额', trigger: 'blur' },
|
// { type: 'number', message: '请输入正确的数字', trigger: 'blur' }
|
],
|
signTime: [{ required: true, message: '请选择自主购房协议签订时间', trigger: 'change' }],
|
compensationPayTime: [{ required: true, message: '请选择25%补偿款及过渡补贴支付时间', trigger: 'change' }]
|
}
|
}
|
},
|
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()
|
}
|
}
|
},
|
mounted() {
|
getDictData('street').then(response => {
|
this.streetOptions = response.data
|
})
|
if (this.$route.query.houseId) {
|
// 镇（街道）
|
|
getPlacementBatchHouseDetail({ id: this.$route.query.houseId }).then(res => {
|
this.form = res.data
|
})
|
} else {
|
this.resetForm()
|
}
|
},
|
methods: {
|
// 计算总人数
|
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
|
},
|
// 处理文件上传
|
handleClickUpload() {
|
// 创建文件输入元素
|
const fileInput = document.createElement('input')
|
fileInput.type = 'file'
|
// 设置接受的文件类型
|
fileInput.accept = '.jpg,.jpeg,.png,.pdf,.doc,.docx'
|
|
// 监听文件选择事件
|
fileInput.addEventListener('change', (event) => {
|
const file = event.target.files[0]
|
if (!file) return
|
|
// 创建FileReader实例
|
const reader = new FileReader()
|
|
// 读取完成后的处理
|
reader.onload = (e) => {
|
// 获取二进制数据
|
const binaryData = e.target.result
|
console.log('文件名:', file.name)
|
console.log('文件类型:', file.type)
|
console.log('文件大小:', file.size, 'bytes')
|
// 这里可以将binaryData存储到组件的data中或进行其他处理
|
// this.fileData = binaryData
|
}
|
|
// 读取文件为二进制数据
|
reader.readAsArrayBuffer(file)
|
})
|
|
// 触发文件选择
|
fileInput.click()
|
},
|
// 提交表单
|
submitForm() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
|
if (!this.form.newHousingName && !this.form.oldHousingName && !this.form.buildHousingName && !this.form.newStopName) {
|
this.$message.error('请至少填写一项')
|
return
|
}
|
|
// console.log('////////////////////',this.form);
|
// TODO: 调用接口提交数据
|
if (this.$route.query.houseId) {
|
// 修改
|
updatePlacementBatchHouse({ ...this.form, placementBatchId: this.$route.query.id, id: this.$route.query.houseId }).then(res => {
|
if (res.code === 200) {
|
this.$message.success('修改成功')
|
this.$router.back()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
} else {
|
// 新增
|
addPlacementBatchHouse({ ...this.form, placementBatchId: this.$route.query.id }).then(res => {
|
if (res.code === 200) {
|
this.$message.success('提交成功')
|
this.$router.back()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
}
|
}
|
})
|
},
|
// 重置表单
|
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;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin: 20px 0;
|
padding-left: 10px;
|
border-left: 4px solid #409EFF;
|
}
|
|
.input-with-unit {
|
display: inline-flex;
|
align-items: center;
|
|
.unit {
|
margin-left: 8px;
|
color: #606266;
|
}
|
}
|
|
.form-footer {
|
text-align: center;
|
margin-top: 40px;
|
}
|
|
:deep(.el-textarea__inner) {
|
font-family: Arial, sans-serif;
|
}
|
|
.payment-label {
|
font-size: 14px;
|
color: #606266;
|
margin-bottom: 8px;
|
}
|
</style>
|
