elink-star
/
epmet-oper-gov
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

证件号码

test
jiangyy 3 years ago
parent
14af9a12e2
commit
09e4578c8e
2 changed files with 272 additions and 233 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/utils/validate.js
  2. 495
      src/views/components/resiForm.vue

10
src/utils/validate.js
View File

@ -39,3 +39,13 @@ export function isURL(s) {
export function isCard(s) { export function isCard(s) {
return /^(\d{15}$)|(^\d{17}([0-9]|X)$)/.test(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);
}

495
src/views/components/resiForm.vue
View File

@ -1,91 +1,115 @@
<template> <template>
<div :id="formId" class="resi-container"> <div :id="formId"
<el-form :ref="formId" class="resi-form" :model="form" :rules="rulesForm" :label-width="labelWidth"> class="resi-container">
<el-form :ref="formId"
class="resi-form"
:model="form"
:rules="rulesForm"
:label-width="labelWidth">
<template v-if="supportAdd"> <template v-if="supportAdd">
<el-row style="margin-bottom: 10px;"> <el-row style="margin-bottom: 10px;">
<el-col :span="24"> <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-col>
</el-row> </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>
<template v-else> <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 v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-col :span="6"> <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"> -->
<!-- <div class="resi-cell-label">{{n.label}}</div> --> <!-- <div class="resi-cell-label">{{n.label}}</div> -->
<div class="resi-cell-value"> <div class="resi-cell-value">
<el-select v-model.trim="form.GRID_ID" placeholder="请选择网格" size="small" <el-select v-model.trim="form.GRID_ID"
clearable class="resi-cell-select" @change="handleChangeGrid" placeholder="请选择网格"
> size="small"
<el-option clearable
v-for="item in optionsG" class="resi-cell-select"
:key="item.value" @change="handleChangeGrid">
:label="item.label" <el-option v-for="item in optionsG"
:value="item.value"> :key="item.value"
</el-option> :label="item.label"
</el-select> :value="item.value">
</div> </el-option>
</el-select>
</div>
<!-- </div> --> <!-- </div> -->
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<el-form-item label="所属房屋" required> <el-form-item label="所属房屋"
<div class="resi-cell-value"> required>
<div class="resi-cell-col"> <div class="resi-cell-value">
<el-form-item prop="VILLAGE_ID"> <div class="resi-cell-col">
<el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small" <el-form-item prop="VILLAGE_ID">
clearable class="resi-cell-select" @change="handleChangeV" <el-select v-model.trim="form.VILLAGE_ID"
> placeholder="请选择小区"
<el-option size="small"
v-for="item in optionsV" clearable
:key="item.value" class="resi-cell-select"
:label="item.label" @change="handleChangeV">
:value="item.value"> <el-option v-for="item in optionsV"
</el-option> :key="item.value"
</el-select> :label="item.label"
</el-form-item> :value="item.value">
<el-form-item prop="BUILD_ID"> </el-option>
<el-select v-model.trim="form.BUILD_ID" placeholder="请选择楼号" size="small" </el-select>
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeB" </el-form-item>
> <el-form-item prop="BUILD_ID">
<el-option <el-select v-model.trim="form.BUILD_ID"
v-for="item in optionsB" placeholder="请选择楼号"
:key="item.value" size="small"
:label="item.label" clearable
:value="item.value"> class="resi-cell-select resi-cell-select-middle"
</el-option> @change="handleChangeB">
</el-select> <el-option v-for="item in optionsB"
</el-form-item> :key="item.value"
<el-form-item prop="UNIT_ID"> :label="item.label"
<el-select v-model.trim="form.UNIT_ID" placeholder="请选择单元" size="small" :value="item.value">
clearable class="resi-cell-select resi-cell-select-middle" @change="handleChangeD" </el-option>
> </el-select>
<el-option </el-form-item>
v-for="item in optionsD" <el-form-item prop="UNIT_ID">
:key="item.value" <el-select v-model.trim="form.UNIT_ID"
:label="item.label" placeholder="请选择单元"
:value="item.value"> size="small"
</el-option> clearable
</el-select> class="resi-cell-select resi-cell-select-middle"
</el-form-item> @change="handleChangeD">
<el-form-item prop="HOME_ID"> <el-option v-for="item in optionsD"
<el-select v-model.trim="form.HOME_ID" placeholder="请选择房号" size="small" :key="item.value"
clearable class="resi-cell-select resi-cell-select-middle" :label="item.label"
@change="handleChangeH" :value="item.value">
> </el-option>
<el-option </el-select>
v-for="item in optionsH" </el-form-item>
:key="item.value" <el-form-item prop="HOME_ID">
:label="item.label" <el-select v-model.trim="form.HOME_ID"
:value="item.value"> placeholder="请选择房号"
</el-option> size="small"
</el-select> clearable
</el-form-item> class="resi-cell-select resi-cell-select-middle"
</div> @change="handleChangeH">
<!-- <el-col :span="6"> <el-option v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<!-- <el-col :span="6">
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@ -97,41 +121,42 @@
<el-col :span="6"> <el-col :span="6">
</el-col> --> </el-col> -->
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </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)"
<!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> --> :key="index"
<el-col v-for="n in item" :key="n.itemId" :span="item.length === 1 ? 24 : (24/columns)" class="resi-row">
:style="n.itemType === 'divider' && 'display: none;'"> <!-- <el-col v-for="n in item" :key="n.id" :span="n.itemType === 'textarea'&&24 || (24/columns)"> -->
<el-form-item :prop="n.columnName" :label="n.label"> <el-col v-for="n in item"
<!-- <div class="resi-cell"> --> :key="n.itemId"
<!-- <div class="resi-cell-label">{{n.label}}</div> --> :span="item.length === 1 ? 24 : (24/columns)"
<div class="resi-cell-value"> :style="n.itemType === 'divider' && 'display: none;'">
<template v-if="n.itemType === 'input' || n.itemType === 'textarea'"> <el-form-item :prop="n.columnName"
<el-input :label="n.label">
v-if="n.validType" <!-- <div class="resi-cell"> -->
v-model.trim="form[n.columnName]" <!-- <div class="resi-cell-label">{{n.label}}</div> -->
class="resi-cell-input" <div class="resi-cell-value">
size="small" <template v-if="n.itemType === 'input' || n.itemType === 'textarea'">
clearable <el-input v-if="n.validType"
placeholder="请输入内容" v-model.trim="form[n.columnName]"
@blur="handleValidBlur(n)" class="resi-cell-input"
> size="small"
</el-input> clearable
<el-input placeholder="请输入内容"
v-else @blur="handleValidBlur(n)">
v-model.trim="form[n.columnName]" </el-input>
class="resi-cell-input" <el-input v-else
size="small" v-model.trim="form[n.columnName]"
clearable class="resi-cell-input"
placeholder="请输入内容" size="small"
> clearable
</el-input> placeholder="请输入内容">
</template> </el-input>
<!-- <template v-if="n.itemType === 'textarea'"> </template>
<!-- <template v-if="n.itemType === 'textarea'">
<el-input <el-input
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
class="resi-cell-textarea" class="resi-cell-textarea"
@ -142,88 +167,90 @@
> >
</el-input> </el-input>
</template> --> </template> -->
<el-date-picker <el-date-picker v-else-if="n.itemType === 'datepicker'"
v-else-if="n.itemType === 'datepicker'" v-model.trim="form[n.columnName]"
v-model.trim="form[n.columnName]" class="resi-cell-input"
class="resi-cell-input" type="date"
type="date" size="small"
size="small" clearable
clearable placeholder="选择日期"
placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
value-format="yyyy-MM-dd"> </el-date-picker>
</el-date-picker> <el-date-picker v-else-if="n.itemType === 'daterange'"
<el-date-picker v-model.trim="form[n.columnName]"
v-else-if="n.itemType === 'daterange'" type="daterange"
v-model.trim="form[n.columnName]" align="right"
type="daterange" unlink-panels
align="right" range-separator="至"
unlink-panels start-placeholder="开始日期"
range-separator="至" end-placeholder="结束日期"
start-placeholder="开始日期" value-format="yyyy-MM-dd">
end-placeholder="结束日期" </el-date-picker>
value-format="yyyy-MM-dd" <el-time-picker v-else-if="n.itemType === 'timepicker'"
> v-model.trim="form[n.columnName]"
</el-date-picker> placeholder="任意时间点">
<el-time-picker </el-time-picker>
v-else-if="n.itemType === 'timepicker'" <el-time-picker v-else-if="n.itemType === 'timerange'"
v-model.trim="form[n.columnName]" v-model.trim="form[n.columnName]"
placeholder="任意时间点"> is-range
</el-time-picker> class="resi-cell-range"
<el-time-picker range-separator="至"
v-else-if="n.itemType === 'timerange'" start-placeholder="开始时间"
v-model.trim="form[n.columnName]" end-placeholder="结束时间"
is-range placeholder="选择时间范围">
class="resi-cell-range" </el-time-picker>
range-separator="至" <el-select v-else-if="n.itemType === 'select'"
start-placeholder="开始时间" v-model.trim="form[n.columnName]"
end-placeholder="结束时间" :multiple="n.multiSelect"
placeholder="选择时间范围"> placeholder="请选择"
</el-time-picker> size="small"
<el-select v-else-if="n.itemType === 'select'" v-model.trim="form[n.columnName]" clearable
:multiple="n.multiSelect" class="resi-cell-select">
placeholder="请选择" size="small" clearable class="resi-cell-select"> <el-option v-for="item in n.options || options"
<el-option :key="item.value"
v-for="item in n.options || options" :label="item.label"
:key="item.value" :value="item.value">
:label="item.label" </el-option>
:value="item.value"> </el-select>
</el-option> <!-- <el-cascader
</el-select>
<!-- <el-cascader
:options="options" :options="options"
:props="{ checkStrictly: true }" :props="{ checkStrictly: true }"
clearable></el-cascader> --> clearable></el-cascader> -->
<el-cascader <el-cascader v-else-if="n.itemType === 'cascader'"
v-else-if="n.itemType === 'cascader'" v-model.trim="form[n.columnName]"
v-model.trim="form[n.columnName]" :options="n.options"
:options="n.options" :props="{ emitPath: false }"
:props="{ emitPath: false }" clearable
clearable size="small"
size="small" class="resi-cell-select">
class="resi-cell-select"> </el-cascader>
</el-cascader> <template v-else-if="n.itemType === 'radio'">
<template v-else-if="n.itemType === 'radio'"> <el-radio v-for="ns in n.options"
<el-radio v-for="ns in n.options" :key="ns.value" v-model.trim="form[n.columnName]" :key="ns.value"
:label="ns.value" @change="hanldeChangeRadio(n)"> v-model.trim="form[n.columnName]"
{{ ns.label }} :label="ns.value"
</el-radio> @change="hanldeChangeRadio(n)">
<!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> --> {{ ns.label }}
</template> </el-radio>
<template v-else-if="n.itemType === 'checkbox'"> <!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> -->
<el-checkbox-group v-model.trim="form[n.columnName]"> </template>
<template v-for="ns in n.options"> <template v-else-if="n.itemType === 'checkbox'">
<el-checkbox v-if="ns.value != 'dangyuanzhongxinhu'" :key="ns.value" :label="ns.value"> <el-checkbox-group v-model.trim="form[n.columnName]">
{{ns.label}} <template v-for="ns in n.options">
</el-checkbox> <el-checkbox v-if="ns.value != 'dangyuanzhongxinhu'"
</template> :key="ns.value"
<!-- <el-checkbox label="n.la"></el-checkbox> --> :label="ns.value">
</el-checkbox-group> {{ns.label}}
</el-checkbox>
</template> </template>
</div> <!-- <el-checkbox label="n.la"></el-checkbox> -->
<!-- </div> --> </el-checkbox-group>
</el-form-item> </template>
</el-col> </div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row> </el-row>
</template> </template>
</el-form> </el-form>
@ -231,7 +258,7 @@
</template> </template>
<script> <script>
import { isCard, isMobile } from '@/utils/validate' import { isCard, isPassport, isMobile } from '@/utils/validate'
import { computedCard } from '@/utils/index' import { computedCard } from '@/utils/index'
export default { export default {
@ -286,10 +313,10 @@ export default {
} }
let checkIdCard = (rule, value, callback) => { let checkIdCard = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('请输入身份证')) callback(new Error('请输入证件号码'))
} else { } else {
if (!isCard(value)) { if (!isCard(value) && !isPassport(value)) {
callback(new Error('身份证号格式不正确')) callback(new Error('证件号码格式不正确'))
} }
callback() callback()
} }
@ -311,13 +338,13 @@ export default {
_form[item.columnName] = obj[item.columnName] _form[item.columnName] = obj[item.columnName]
item.isChange = true item.isChange = true
} }
} else { } else {
if (item.multiSelect) _form[item.columnName] = [] if (item.multiSelect) _form[item.columnName] = []
else if (item.itemType == 'radio' && item.defaultValue == '0') _form[item.columnName] = item.defaultValue else if (item.itemType == 'radio' && item.defaultValue == '0') _form[item.columnName] = item.defaultValue
else _form[item.columnName] = '' else _form[item.columnName] = ''
} }
// if (item.optionSourceType === 'remote') { // if (item.optionSourceType === 'remote') {
// this.getOptionsLists(item.optionSourceValue).then(res => { // this.getOptionsLists(item.optionSourceValue).then(res => {
@ -351,7 +378,7 @@ export default {
let form = initForm(this.formInfo, this.formList) let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList) let rules = initRules(this.formList)
console.log('rulessss', rules) 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 const isChange = (item.itemType == 'radio' && item.defaultValue == '0') && true
return { return {
...item, ...item,
@ -506,27 +533,30 @@ export default {
// } // }
}) })
}, },
hanldeChangeRadio(n) { hanldeChangeRadio (n) {
this.$emit('changeradio', n) this.$emit('changeradio', n)
}, },
handleValidBlur(n) { handleValidBlur (n) {
console.log('n---', n) console.log('n---', n)
if (n.columnName !== 'ID_CARD') return 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 const { user } = this.$store.state
let huji = '', i = 0 let huji = '', i = 0
if (user.areaCodePath && user.areaCodePath.length > 0) { if (user.areaCodePath && user.areaCodePath.length > 0) {
i = user.areaCodePath.length - 1 i = user.areaCodePath.length - 1
huji = user.areaCodePath[i].length > 6 ? user.areaCodePath[i].substr(0, 6) : user.areaCodePath[i] huji = user.areaCodePath[i].length > 6 ? user.areaCodePath[i].substr(0, 6) : user.areaCodePath[i]
} }
const _id = this.form.ID_CARD.substr(0, 6) if (this.form.ID_CARD.length === 18 || this.form.ID_CARD.length === 15) {
const { sex, birth, age } = computedCard(this.form.ID_CARD) const _id = this.form.ID_CARD.substr(0, 6)
this.form.BIRTHDAY = birth const { sex, birth, age } = computedCard(this.form.ID_CARD)
this.form.GENDER = sex == 1 ? '1' : '2' this.form.BIRTHDAY = birth
this.form.IS_OLD_PEOPLE = age >= 60 ? '1' : '0' this.form.GENDER = sex == 1 ? '1' : '2'
this.form.IS_BDHJ = huji == _id ? '1' : '' this.form.IS_OLD_PEOPLE = age >= 60 ? '1' : '0'
this.validateIdcard(this.form.ID_CARD) this.form.IS_BDHJ = huji == _id ? '1' : ''
console.log('age-----', age, _id) this.validateIdcard(this.form.ID_CARD)
console.log('age-----', age, _id)
}
}, },
handleOpenSearch () { handleOpenSearch () {
this.openSearch = !this.openSearch this.openSearch = !this.openSearch
@ -551,7 +581,7 @@ export default {
if (this.isParty) { if (this.isParty) {
this.$emit('changegroup', { value, partyInfo: this.partyInfo, childGroup: item.childGroup }) this.$emit('changegroup', { value, partyInfo: this.partyInfo, childGroup: item.childGroup })
} else this.$emit('changegroup', { value, childGroup: item.childGroup }) } else this.$emit('changegroup', { value, childGroup: item.childGroup })
} }
}) })
}, },
@ -589,9 +619,9 @@ export default {
this.getHouseList() this.getHouseList()
}, },
// 为了实现根据房屋类型改版是否租户的需求 // 为了实现根据房屋类型改版是否租户的需求
handleChangeH(val){ handleChangeH (val) {
let item = this.optionsH.find(item => item.value === 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' this.form.IS_TENANT = '1'
console.log('item-----', item) console.log('item-----', item)
} else this.form.IS_TENANT = '0' } else this.form.IS_TENANT = '0'
@ -619,7 +649,7 @@ export default {
let arr = [] let arr = []
this.addList.forEach(item => { this.addList.forEach(item => {
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item][0].handleForm()) // 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) // console.log('handlerMuscForm----111', arr)
let arr2 = arr.reduce(function (a, b) { return a.concat(b) }) let arr2 = arr.reduce(function (a, b) { return a.concat(b) })
@ -698,19 +728,19 @@ export default {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} else { } else {
console.log('获取查询详情成功', res.data) console.log('获取查询详情成功', res.data)
if (res.data.isVolunteer == '1') this.form.IS_VOLUNTEER = '1' if (res.data.isVolunteer == '1') this.form.IS_VOLUNTEER = '1'
else this.form.IS_VOLUNTEER = '0' else this.form.IS_VOLUNTEER = '0'
if (res.data.isPartyMember == '1') { if (res.data.isPartyMember == '1') {
this.form.IS_PARTY = '1' this.form.IS_PARTY = '1'
this.isParty = true this.isParty = true
this.partyInfo = res.data.detail.ic_party_member this.partyInfo = res.data.detail.ic_party_member
} else this.form.IS_PARTY = '0' } else this.form.IS_PARTY = '0'
// if (type == 'vol') { // if (type == 'vol') {
// this.isParty = false // this.isParty = false
// } else if (res.data.isPartyMember == '1' && val == 'party') { // } else if (res.data.isPartyMember == '1' && val == 'party') {
// this.isParty = true // this.isParty = true
// } // }
@ -822,12 +852,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.resi-form { .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; width: 100% !important;
} }
} }
.resi-cell-value .resi-cell-input { .resi-cell-value .resi-cell-input {
width: 190px; width: 190px;
} }
.resi-cell-value { .resi-cell-value {
:deep .el-col { :deep .el-col {
@ -839,33 +870,31 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.resi-form .resi-row { .resi-form .resi-row {
margin-bottom: 0; margin-bottom: 0;
} }
.resi-cell-value .resi-cell-textarea {
.resi-cell-value .resi-cell-textarea { width: 300px;
width: 300px; }
} .resi-cell-col {
.resi-cell-col { display: flex;
display: flex; .el-form-item {
.el-form-item {
margin-right: 10px;
}
}
.resi-cell-select {
width: 190px;
box-sizing: border-box;
margin-right: 10px; margin-right: 10px;
&-middle {
width: 130px;
}
&-small {
width: 88px;
}
} }
.resi-cell-select:last-child { }
margin-right: 0; .resi-cell-select {
width: 190px;
box-sizing: border-box;
margin-right: 10px;
&-middle {
width: 130px;
}
&-small {
width: 88px;
} }
}
.resi-cell-select:last-child {
margin-right: 0;
}
</style> </style>

Write Preview
Loading…
Cancel
Save