|
|
@ -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() |
|
|
|
} |
|
|
@ -512,13 +539,14 @@ export default { |
|
|
|
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 |
|
|
@ -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,12 +870,10 @@ export default { |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
.resi-form .resi-row { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.resi-cell-value .resi-cell-textarea { |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|