Browse Source

证件号码

test
jiangyy 3 years ago
parent
commit
09e4578c8e
  1. 10
      src/utils/validate.js
  2. 199
      src/views/components/resiForm.vue

10
src/utils/validate.js

@ -39,3 +39,13 @@ export function isURL(s) {
export function isCard(s) {
return /^(\d{15}$)|(^\d{17}([0-9]|X)$)/.test(s);
}
/**
* 护照
* @param {*} s
*/
export function isPassport(s) {
let reg=/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/; //护照(包括香港和澳门)
return reg.test(s);
}

199
src/views/components/resiForm.vue

@ -1,27 +1,43 @@
<template>
<div :id="formId" class="resi-container">
<el-form :ref="formId" class="resi-form" :model="form" :rules="rulesForm" :label-width="labelWidth">
<div :id="formId"
class="resi-container">
<el-form :ref="formId"
class="resi-form"
:model="form"
:rules="rulesForm"
:label-width="labelWidth">
<template v-if="supportAdd">
<el-row style="margin-bottom: 10px;">
<el-col :span="24">
<el-button icon="el-icon-plus" size="small" @click="handleAddRow"></el-button>
<el-button icon="el-icon-plus"
size="small"
@click="handleAddRow"></el-button>
</el-col>
</el-row>
<resi-form v-for="(item, index) in addList" :key="index" :ref="'baseForms' + index" :columns="3" :form-list="formList" :form-id="'baseForms' + item" />
<resi-form v-for="(item, index) in addList"
:key="index"
:ref="'baseForms' + index"
:columns="3"
:form-list="formList"
:form-id="'baseForms' + item" />
</template>
<template v-else>
<el-row v-if="fixed" class="resi-row">
<el-row v-if="fixed"
class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6">
<el-form-item prop="GRID_ID" label="所属网格">
<el-form-item prop="GRID_ID"
label="所属网格">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<el-select v-model.trim="form.GRID_ID" placeholder="请选择网格" size="small"
clearable class="resi-cell-select" @change="handleChangeGrid"
>
<el-option
v-for="item in optionsG"
<el-select v-model.trim="form.GRID_ID"
placeholder="请选择网格"
size="small"
clearable
class="resi-cell-select"
@change="handleChangeGrid">
<el-option v-for="item in optionsG"
:key="item.value"
:label="item.label"
:value="item.value">
@ -32,15 +48,18 @@
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="所属房屋" required>
<el-form-item label="所属房屋"
required>
<div class="resi-cell-value">
<div class="resi-cell-col">
<el-form-item prop="VILLAGE_ID">
<el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select" @change="handleChangeV"
>
<el-option
v-for="item in optionsV"
<el-select v-model.trim="form.VILLAGE_ID"
placeholder="请选择小区"
size="small"
clearable
class="resi-cell-select"
@change="handleChangeV">
<el-option v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
@ -48,11 +67,13 @@
</el-select>
</el-form-item>
<el-form-item prop="BUILD_ID">
<el-select v-model.trim="form.BUILD_ID" placeholder="请选择楼号" size="small"
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeB"
>
<el-option
v-for="item in optionsB"
<el-select v-model.trim="form.BUILD_ID"
placeholder="请选择楼号"
size="small"
clearable
class="resi-cell-select resi-cell-select-middle"
@change="handleChangeB">
<el-option v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
@ -60,11 +81,13 @@
</el-select>
</el-form-item>
<el-form-item prop="UNIT_ID">
<el-select v-model.trim="form.UNIT_ID" placeholder="请选择单元" size="small"
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeD"
>
<el-option
v-for="item in optionsD"
<el-select v-model.trim="form.UNIT_ID"
placeholder="请选择单元"
size="small"
clearable
class="resi-cell-select resi-cell-select-middle"
@change="handleChangeD">
<el-option v-for="item in optionsD"
:key="item.value"
:label="item.label"
:value="item.value">
@ -72,12 +95,13 @@
</el-select>
</el-form-item>
<el-form-item prop="HOME_ID">
<el-select v-model.trim="form.HOME_ID" placeholder="请选择房号" size="small"
clearable class="resi-cell-select resi-cell-select-middle"
@change="handleChangeH"
>
<el-option
v-for="item in optionsH"
<el-select v-model.trim="form.HOME_ID"
placeholder="请选择房号"
size="small"
clearable
class="resi-cell-select resi-cell-select-middle"
@change="handleChangeH">
<el-option v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
@ -102,33 +126,34 @@
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, columns)" :key="index" class="resi-row">
<el-row v-for="(item, index) in sliceList(formList, columns)"
:key="index"
class="resi-row">
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)"
<el-col v-for="n in item"
:key="n.itemId"
:span="item.length === 1 ? 24 : (24/columns)"
:style="n.itemType === 'divider' && 'display: none;'">
<el-form-item :prop="n.columnName" :label="n.label">
<el-form-item :prop="n.columnName"
:label="n.label">
<!-- <div class="resi-cell"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value">
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
<el-input
v-if="n.validType"
<el-input v-if="n.validType"
v-model.trim="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
@blur="handleValidBlur(n)"
>
@blur="handleValidBlur(n)">
</el-input>
<el-input
v-else
<el-input v-else
v-model.trim="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
placeholder="请输入内容">
</el-input>
</template>
<!-- <template v-if="n.itemType === 'textarea'">
@ -142,8 +167,7 @@
>
</el-input>
</template> -->
<el-date-picker
v-else-if="n.itemType === 'datepicker'"
<el-date-picker v-else-if="n.itemType === 'datepicker'"
v-model.trim="form[n.columnName]"
class="resi-cell-input"
type="date"
@ -153,8 +177,7 @@
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker
v-else-if="n.itemType === 'daterange'"
<el-date-picker v-else-if="n.itemType === 'daterange'"
v-model.trim="form[n.columnName]"
type="daterange"
align="right"
@ -162,16 +185,13 @@
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
value-format="yyyy-MM-dd">
</el-date-picker>
<el-time-picker
v-else-if="n.itemType === 'timepicker'"
<el-time-picker v-else-if="n.itemType === 'timepicker'"
v-model.trim="form[n.columnName]"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
v-else-if="n.itemType === 'timerange'"
<el-time-picker v-else-if="n.itemType === 'timerange'"
v-model.trim="form[n.columnName]"
is-range
class="resi-cell-range"
@ -180,11 +200,14 @@
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-select v-else-if="n.itemType === 'select'" v-model.trim="form[n.columnName]"
<el-select v-else-if="n.itemType === 'select'"
v-model.trim="form[n.columnName]"
:multiple="n.multiSelect"
placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-option
v-for="item in n.options || options"
placeholder="请选择"
size="small"
clearable
class="resi-cell-select">
<el-option v-for="item in n.options || options"
:key="item.value"
:label="item.label"
:value="item.value">
@ -194,8 +217,7 @@
:options="options"
:props="{ checkStrictly: true }"
clearable></el-cascader> -->
<el-cascader
v-else-if="n.itemType === 'cascader'"
<el-cascader v-else-if="n.itemType === 'cascader'"
v-model.trim="form[n.columnName]"
:options="n.options"
:props="{ emitPath: false }"
@ -204,8 +226,11 @@
class="resi-cell-select">
</el-cascader>
<template v-else-if="n.itemType === 'radio'">
<el-radio v-for="ns in n.options" :key="ns.value" v-model.trim="form[n.columnName]"
:label="ns.value" @change="hanldeChangeRadio(n)">
<el-radio v-for="ns in n.options"
:key="ns.value"
v-model.trim="form[n.columnName]"
:label="ns.value"
@change="hanldeChangeRadio(n)">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> -->
@ -213,7 +238,9 @@
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model.trim="form[n.columnName]">
<template v-for="ns in n.options">
<el-checkbox v-if="ns.value != 'dangyuanzhongxinhu'" :key="ns.value" :label="ns.value">
<el-checkbox v-if="ns.value != 'dangyuanzhongxinhu'"
:key="ns.value"
:label="ns.value">
{{ns.label}}
</el-checkbox>
</template>
@ -231,7 +258,7 @@
</template>
<script>
import { isCard, isMobile } from '@/utils/validate'
import { isCard, isPassport, isMobile } from '@/utils/validate'
import { computedCard } from '@/utils/index'
export default {
@ -286,10 +313,10 @@ export default {
}
let checkIdCard = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入身份证'))
callback(new Error('请输入证件号码'))
} else {
if (!isCard(value)) {
callback(new Error('身份证号格式不正确'))
if (!isCard(value) && !isPassport(value)) {
callback(new Error('证格式不正确'))
}
callback()
}
@ -351,7 +378,7 @@ export default {
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
console.log('rulessss', rules)
let tempFormList = [ ...this.formList ].map(item => {
let tempFormList = [...this.formList].map(item => {
const isChange = (item.itemType == 'radio' && item.defaultValue == '0') && true
return {
...item,
@ -506,19 +533,20 @@ export default {
// }
})
},
hanldeChangeRadio(n) {
hanldeChangeRadio (n) {
this.$emit('changeradio', n)
},
handleValidBlur(n) {
handleValidBlur (n) {
console.log('n---', n)
if (n.columnName !== 'ID_CARD') return
if (!isCard(this.form.ID_CARD)) return
if (!isCard(this.form.ID_CARD) && !isPassport(this.form.ID_CARD)) return
const { user } = this.$store.state
let huji = '', i = 0
if (user.areaCodePath && user.areaCodePath.length > 0) {
i = user.areaCodePath.length - 1
huji = user.areaCodePath[i].length > 6 ? user.areaCodePath[i].substr(0, 6) : user.areaCodePath[i]
}
if (this.form.ID_CARD.length === 18 || this.form.ID_CARD.length === 15) {
const _id = this.form.ID_CARD.substr(0, 6)
const { sex, birth, age } = computedCard(this.form.ID_CARD)
this.form.BIRTHDAY = birth
@ -527,6 +555,8 @@ export default {
this.form.IS_BDHJ = huji == _id ? '1' : ''
this.validateIdcard(this.form.ID_CARD)
console.log('age-----', age, _id)
}
},
handleOpenSearch () {
this.openSearch = !this.openSearch
@ -589,9 +619,9 @@ export default {
this.getHouseList()
},
//
handleChangeH(val){
handleChangeH (val) {
let item = this.optionsH.find(item => item.value === val);
if(item && item.type == '1'){
if (item && item.type == '1') {
this.form.IS_TENANT = '1'
console.log('item-----', item)
} else this.form.IS_TENANT = '0'
@ -619,7 +649,7 @@ export default {
let arr = []
this.addList.forEach(item => {
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm())
arr.push([ ...this.$refs['baseForms' + item][0].handleForm() ])
arr.push([...this.$refs['baseForms' + item][0].handleForm()])
})
// console.log('handlerMuscForm----111', arr)
let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
@ -822,7 +852,8 @@ export default {
<style lang="scss" scoped>
.resi-form {
:deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
:deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100% !important;
}
}
@ -839,22 +870,20 @@ export default {
}
</style>
<style lang="scss" scoped>
.resi-form .resi-row {
margin-bottom: 0;
}
.resi-cell-value .resi-cell-textarea {
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
.resi-cell-col {
}
.resi-cell-col {
display: flex;
.el-form-item {
margin-right: 10px;
}
}
.resi-cell-select {
}
.resi-cell-select {
width: 190px;
box-sizing: border-box;
margin-right: 10px;
@ -864,8 +893,8 @@ export default {
&-small {
width: 88px;
}
}
.resi-cell-select:last-child {
}
.resi-cell-select:last-child {
margin-right: 0;
}
}
</style>

Loading…
Cancel
Save