<template>
|
<div class="app-container">
|
<el-form ref="form" :model="form" :rules="rules" label-width="180px" class="custom-form" label-position="top">
|
<!-- 第一排5个 -->
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="24" class="form-col-container">
|
<div class="form-col">
|
<el-form-item label="项目名称" prop="projectName">
|
<el-input v-model="form.projectName" placeholder="请输入" :disabled="isView" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="项目启动时间" prop="startTime">
|
<el-date-picker v-model="form.startTime" type="date" placeholder="选择日期" :disabled="isView"
|
style="width: 100%" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="镇（街道）" prop="street">
|
<el-select v-model="form.street" placeholder="请选择" :disabled="isView" style="width: 100%">
|
<el-option v-for="item in streetOptions" :key="item.dictCode" :label="item.dictLabel"
|
:value="item.dictLabel" />
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="所在村（社区）" prop="community">
|
<el-input v-model="form.community" placeholder="请输入" :disabled="isView" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="组" prop="groupName">
|
<el-input v-model="form.groupName" placeholder="请输入" :disabled="isView" />
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
|
<!-- 户主信息2个 -->
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="5" class="form-col-container">
|
<div class="form-col-half">
|
<el-form-item label="户主姓名" prop="householdHead">
|
<el-input v-model="form.householdHead" placeholder="请输入" :disabled="isView"
|
style="width: 92%" />
|
</el-form-item>
|
</div>
|
</el-col>
|
<el-col :span="5" class="form-col-container">
|
<div class="form-col-half">
|
<el-form-item label="户主身份证号码" prop="idCard">
|
<el-input v-model="form.idCard" placeholder="请输入" :disabled="isView" style="width: 89%" />
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
|
<!-- 后续每排5个 -->
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="24" class="form-col-container">
|
<div class="form-col">
|
<el-form-item label="家庭成员名字" prop="familyName">
|
<el-input v-model="form.familyName" placeholder="请输入" :disabled="isView" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="关系" prop="relation">
|
<el-select v-model="form.relation" placeholder="请选择" :disabled="isView" style="width: 100%">
|
<el-option v-for="item in relationOptions" :key="item.dictCode" :label="item.dictLabel"
|
:value="item.dictLabel" />
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="人员类型" prop="personType">
|
<el-select v-model="form.personType" placeholder="请选择" :disabled="isView"
|
style="width: 100%">
|
<el-option v-for="item in personTypeOptions" :key="item.dictCode"
|
:label="item.dictLabel" :value="item.dictLabel" />
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="身份证号码" prop="familyIdCard">
|
<el-input v-model="form.familyIdCard" placeholder="请输入" :disabled="isView" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="年龄" prop="age">
|
<el-input v-model="form.age" placeholder="根据身份证自动生成" disabled />
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="24" class="form-col-container">
|
<div class="form-col">
|
<el-form-item label="性别" prop="sex">
|
<el-input v-model="form.sex" placeholder="根据身份证自动生成" disabled />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="出生年月日" prop="birthday">
|
<el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" :disabled="isView"
|
style="width: 100%" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="安置方式" prop="ways">
|
<el-select v-model="form.ways" placeholder="请选择" :disabled="isView"
|
style="width: 100%">
|
<el-option label="统规统建" value="统规统建" />
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="联系电话" prop="mobile">
|
<el-input v-model="form.mobile" placeholder="请输入" :disabled="isView" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="原始拆迁时领取过渡费时间" prop="originCollectionTime">
|
<el-date-picker v-model="form.originCollectionTime" type="date" placeholder="选择日期"
|
:disabled="isView" style="width: 100%" />
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="24" class="form-col-container">
|
<div class="form-col">
|
<el-form-item label="上次过渡费发放时间(起)" prop="lastBeginTime">
|
<el-date-picker v-model="form.lastBeginTime" type="date" placeholder="选择日期"
|
:disabled="isView" style="width: 100%" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="上次过渡费发放时间(止)" prop="lastEndTime">
|
<el-date-picker v-model="form.lastEndTime" type="date" placeholder="选择日期" :disabled="isView"
|
:picker-options="endDateOptions" style="width: 100%" />
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="安置状态">
|
<el-select v-model="form.status" placeholder="请选择" :disabled="isView" style="width: 100%">
|
<el-option label="已安置" :value="1" />
|
<el-option label="未安置" :value="0" />
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="剩余未安置面积" prop="noHouseArea">
|
<el-input v-model="form.noHouseArea" placeholder="请输入" :disabled="isView">
|
<template slot="append">m²</template>
|
</el-input>
|
</el-form-item>
|
</div>
|
<div class="form-col">
|
<el-form-item label="剩余未安置商铺面积" prop="noShopArea">
|
<el-input v-model="form.noShopArea" placeholder="请输入" :disabled="isView">
|
<template slot="append">m²</template>
|
</el-input>
|
</el-form-item>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="24">
|
<el-form-item label="备注">
|
<el-input type="textarea" v-model="form.remark" :disabled="isView" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row type="flex" justify="start" class="form-row">
|
<el-col :span="24">
|
<el-form-item>
|
<el-button v-if="!isView" type="primary" @click="submitForm">保存</el-button>
|
<el-button @click="cancel">返回</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { update, getDetail, add, getDictData } from '@/api/placement'
|
|
export default {
|
name: 'PersonnelForm',
|
data() {
|
// 身份证号码验证
|
const validateIdCard = (rule, value, callback) => {
|
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
|
if (!reg.test(value)) {
|
callback(new Error('请输入正确的身份证号码'))
|
} else {
|
callback()
|
}
|
}
|
|
// 手机号验证
|
const validatePhone = (rule, value, callback) => {
|
const reg = /^1[3-9]\d{9}$/
|
if (!reg.test(value)) {
|
callback(new Error('请输入正确的手机号码'))
|
} else {
|
callback()
|
}
|
}
|
|
// 日期止不能小于日期起
|
const validateEndDate = (rule, value, callback) => {
|
if (value && this.form.lastBeginTime && value < this.form.lastBeginTime) {
|
callback(new Error('结束时间不能早于开始时间'))
|
} else {
|
callback()
|
}
|
}
|
|
return {
|
isView: false,
|
form: {
|
projectName: undefined,
|
startTime: undefined,
|
street: undefined,
|
community: undefined,
|
groupName: undefined,
|
householdHead: undefined,
|
idCard: undefined,
|
familyName: undefined,
|
relation: undefined,
|
personType: undefined,
|
familyIdCard: undefined,
|
age: undefined,
|
sex: undefined,
|
birthday: undefined,
|
ways: undefined,
|
originCollectionTime: undefined,
|
lastBeginTime: undefined,
|
lastEndTime: undefined,
|
noHouseArea: undefined,
|
noShopArea: undefined,
|
mobile: undefined,
|
status: undefined,
|
remark: undefined
|
},
|
endDateOptions: {
|
disabledDate: (time) => {
|
if (this.form.lastBeginTime) {
|
return time.getTime() < this.form.lastBeginTime.getTime()
|
}
|
return false
|
}
|
},
|
streetOptions: [],
|
relationOptions: [],
|
personTypeOptions: [],
|
rules: {
|
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
|
startTime: [{ required: true, message: '请选择项目启动时间', trigger: 'change' }],
|
street: [{ required: true, message: '请输入镇（街道）', trigger: 'blur' }],
|
community: [{ required: true, message: '请输入所在村（社区）', trigger: 'blur' }],
|
groupName: [{ required: true, message: '请输入组', trigger: 'blur' }],
|
householdHead: [{ required: true, message: '请输入户主姓名', trigger: 'blur' }],
|
idCard: [
|
{ required: true, message: '请输入身份证号码', trigger: 'blur' },
|
{ validator: validateIdCard, trigger: 'blur' }
|
],
|
familyName: [{ required: true, message: '请输入家庭成员名字', trigger: 'blur' }],
|
relation: [{ required: true, message: '请选择关系', trigger: 'change' }],
|
personType: [{ required: true, message: '请选择人员类型', trigger: 'change' }],
|
familyIdCard: [
|
{ required: true, message: '请输入身份证号码', trigger: 'blur' },
|
{ validator: validateIdCard, trigger: 'blur' }
|
],
|
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
|
sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
birthday: [{ required: true, message: '请选择出生年月日', trigger: 'change' }],
|
ways: [{ required: true, message: '请选择安置方式', trigger: 'change' }],
|
mobile: [
|
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
{ validator: validatePhone, trigger: 'blur' }
|
],
|
originCollectionTime: [{ required: true, message: '请选择原始拆迁时领取过渡费时间', trigger: 'change' }],
|
lastBeginTime: [{ required: true, message: '请选择上次过渡费发放时间(起)', trigger: 'change' }],
|
lastEndTime: [
|
{ required: true, message: '请选择结束时间', trigger: 'change' },
|
{ validator: validateEndDate, trigger: 'change' }
|
],
|
noHouseArea: [{ required: true, message: '请输入剩余未安置面积', trigger: 'blur' }]
|
}
|
}
|
},
|
created() {
|
// 镇（街道）
|
getDictData('street').then(response => {
|
this.streetOptions = response.data
|
})
|
// 关系
|
getDictData('relation ').then(response => {
|
this.relationOptions = response.data
|
})
|
// 人员类型
|
getDictData('person_type').then(response => {
|
this.personTypeOptions = response.data
|
})
|
const id = this.$route.query.id
|
const type = this.$route.query.type
|
if (id) {
|
this.isView = type === 'view'
|
this.getInfo(id)
|
}
|
},
|
watch: {
|
'form.familyIdCard': {
|
handler(newVal) {
|
if (newVal && this.isValidIdCard(newVal)) {
|
this.form.sex = this.getsexFromIdCard(newVal)
|
this.form.age = this.getAgeFromIdCard(newVal)
|
}
|
},
|
immediate: true
|
},
|
'form.lastBeginTime': {
|
handler(newVal) {
|
// 当开始时间变化时，如果结束时间小于开始时间，清空结束时间
|
if (newVal && this.form.lastEndTime && this.form.lastEndTime < newVal) {
|
this.form.lastEndTime = null
|
}
|
}
|
}
|
},
|
methods: {
|
getInfo(id) {
|
getDetail({ id }).then(response => {
|
this.form = response.data
|
})
|
},
|
submitForm() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
const submitMethod = this.form.id ? update : add
|
submitMethod(this.form).then(() => {
|
this.$modal.msgSuccess('操作成功')
|
this.goBack()
|
})
|
}
|
})
|
},
|
cancel() {
|
this.goBack()
|
},
|
goBack() {
|
this.$router.go(-1)
|
},
|
// 验证身份证号码
|
isValidIdCard(idCard) {
|
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
|
return reg.test(idCard)
|
},
|
// 从身份证号获取性别
|
getsexFromIdCard(idCard) {
|
if (idCard.length === 15) {
|
return parseInt(idCard.charAt(14)) % 2 === 0 ? '女' : '男'
|
} else if (idCard.length === 18) {
|
return parseInt(idCard.charAt(16)) % 2 === 0 ? '女' : '男'
|
}
|
return ''
|
},
|
// 从身份证号获取年龄
|
getAgeFromIdCard(idCard) {
|
let birthYear, birthMonth, birthDay
|
if (idCard.length === 15) {
|
birthYear = '19' + idCard.substring(6, 8)
|
birthMonth = idCard.substring(8, 10)
|
birthDay = idCard.substring(10, 12)
|
} else if (idCard.length === 18) {
|
birthYear = idCard.substring(6, 10)
|
birthMonth = idCard.substring(10, 12)
|
birthDay = idCard.substring(12, 14)
|
} else {
|
return ''
|
}
|
|
const today = new Date()
|
const birthday = new Date(birthYear, birthMonth - 1, birthDay)
|
let age = today.getFullYear() - birthday.getFullYear()
|
const monthDiff = today.getMonth() - birthday.getMonth()
|
|
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthday.getDate())) {
|
age--
|
}
|
|
return age.toString()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.custom-form {
|
width: 100%;
|
}
|
|
.form-row {
|
margin-bottom: 18px;
|
}
|
|
.form-col-container {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: nowrap;
|
gap: 20px;
|
/* 设置列之间的间距 */
|
}
|
|
.form-col {
|
flex: 1;
|
min-width: 0;
|
/* 防止flex项目溢出 */
|
}
|
|
.form-col-half {
|
flex: 1;
|
min-width: 0;
|
}
|
|
/* 确保所有输入控件宽度一致 */
|
:deep(.el-input),
|
:deep(.el-select),
|
:deep(.el-date-picker) {
|
width: 100% !important;
|
}
|
|
:deep(.el-input__inner),
|
:deep(.el-select .el-input__inner),
|
:deep(.el-date-picker .el-input__inner) {
|
width: 100% !important;
|
}
|
|
/* 确保日期选择器的宽度与其他输入框一致 */
|
:deep(.el-date-editor.el-input) {
|
width: 100% !important;
|
}
|
|
/* 确保带单位的输入框宽度一致 */
|
:deep(.el-input-group__append) {
|
padding: 0 10px;
|
}
|
|
/* 设置表单项标签样式 */
|
:deep(.el-form-item__label) {
|
line-height: 20px;
|
padding-bottom: 8px;
|
color: #606266;
|
}
|
|
/* 调整表单项间距 */
|
:deep(.el-form-item) {
|
margin-bottom: 18px;
|
}
|
|
/* 确保textarea的宽度正确 */
|
:deep(.el-textarea) {
|
width: 100%;
|
}
|
</style>
|
