市北互联平台前端仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

804 lines
26 KiB

<template>
<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-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" />
</template>
<template v-else>
<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="所属网格">
<!-- <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"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
<el-col :span="18">
<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"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</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"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</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"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</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"
: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 :span="6">
</el-col>
<el-col :span="6">
</el-col>
<el-col :span="6">
</el-col> -->
</div>
</el-form-item>
</el-col>
</el-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)"
:style="n.itemType === 'divider' && 'display: none;'">
<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"
v-model.trim="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
@blur="handleValidBlur(n)"
>
</el-input>
<el-input
v-else
v-model.trim="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
>
</el-input>
</template>
<!-- <template v-if="n.itemType === 'textarea'">
<el-input
v-model.trim="form[n.columnName]"
class="resi-cell-textarea"
size="small"
type="textarea"
clearable
placeholder="请输入内容"
>
</el-input>
</template> -->
<el-date-picker
v-else-if="n.itemType === 'datepicker'"
v-model.trim="form[n.columnName]"
class="resi-cell-input"
type="date"
size="small"
clearable
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker
v-else-if="n.itemType === 'daterange'"
v-model.trim="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
<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'"
v-model.trim="form[n.columnName]"
is-range
class="resi-cell-range"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<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"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable></el-cascader> -->
<el-cascader
v-else-if="n.itemType === 'cascader'"
v-model.trim="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
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">
{{ ns.label }}
</el-radio>
<!-- <el-radio v-model.trim="form[n.columnName]" label="1">备选项</el-radio> -->
</template>
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model.trim="form[n.columnName]">
<el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
<!-- <el-checkbox label="n.la"></el-checkbox> -->
</el-checkbox-group>
</template>
</div>
<!-- </div> -->
</el-form-item>
</el-col>
</el-row>
</template>
</el-form>
</div>
</template>
<script>
import { isCard, isMobile } from '@/utils/validate'
import { computedCard } from '@/utils/index'
export default {
name: 'resiForm',
props: {
fixed: {
type: Boolean,
default: false
},
labelWidth: {
type: String,
default: '100px'
},
formId: {
type: String,
default: 'resiForm'
},
formList: {
type: Array,
default: function () {
return []
}
},
formInfo: {
type: Object,
default: function () {
return {}
}
},
// 渲染一行几列
columns: {
type: Number,
default: 4
},
supportAdd: { // 单表多条数据
type: Boolean,
default: false
}
},
data () {
// let form = {}
// let rules = {}
let checkMObile = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入手机号'))
} else {
if (!isMobile(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}
}
let checkIdCard = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入身份证'))
} else {
if (!isCard(value)) {
callback(new Error('身份证号格式不正确'))
}
callback()
}
}
let initForm = (obj, arr) => {
let _form = {}
console.log('formInfo---arr', arr)
if (Object.keys(obj).length > 0) {
_form = { ...obj }
return _form
}
arr.forEach(item => {
if (item.multiSelect) _form[item.columnName] = []
else if (item.itemType == 'radio' && item.defaultValue == '0') _form[item.columnName] = item.defaultValue
else _form[item.columnName] = ''
// if (item.optionSourceType === 'remote') {
// this.getOptionsLists(item.optionSourceValue).then(res => {
// item.options = res
// })
// }
})
return _form
}
let initRules = (arr) => {
let rules = {}
arr.forEach(item => {
if (item.required) {
if (item.validType === 'mobile') {
rules[item.columnName] = [
{ required: true, validator: checkMObile, trigger: 'blur' }
]
} else if (item.validType === 'id_card') {
rules[item.columnName] = [
{ required: true, validator: checkIdCard, trigger: 'blur' }
]
} else {
rules[item.columnName] = [
{ required: true, message: `请输入${item.label}`, trigger: 'blur' }
]
}
}
})
return rules
}
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
console.log('rulessss', rules)
let tempFormList = [ ...this.formList ].map(item => {
return {
...item,
isChange: (item.itemType == 'radio' && item.defaultValue == '0') ? true : false
}
})
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
}
return {
openSearch: false,
fixedForm: {
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
},
fixedList: {
AGENCY_ID: this.$store.state.user.agencyId
},
form: {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
},
constForm,
tempFormList,
addCount: 0,
addList: [],
rulesForm: {
...rules,
VILLAGE_ID: [{ required: true, message: `请选择小区`, trigger: 'blur' }],
GRID_ID: [{ required: true, message: `请选择网格`, trigger: 'blur' }],
BUILD_ID: [{ required: true, message: `请选择楼号`, trigger: 'blur' }],
UNIT_ID: [{ required: true, message: `请选择单元`, trigger: 'blur' }],
HOME_ID: [{ required: true, message: `请选择房号`, trigger: 'blur' }]
},
value: '',
optionsV: [],
optionsB: [],
optionsH: [],
optionsD: [],
optionsG: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
computed: {
sliceList () {
return function (data, count) {
if (data !== undefined) {
let index = 0
let arrTemp = []
let arrTemp1 = []
let arr1 = []
let arr2 = []
let _i = 0
let _index = 0
for (let i = 0; i < data.length; i++) {
if (data[i].itemType === 'divider' || data[i].itemType === 'checkbox') {
_i = i + 1
}
}
arr1 = data.slice(0, _i)
arr2 = data.slice(_i, data.length)
for (let i = 0; i < arr1.length; i++) {
index = parseInt(i / count)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(arr1[i])
}
for (let i = 0; i < arr2.length; i++) {
_index = parseInt(i / count)
if (arrTemp1.length <= _index) {
arrTemp1.push([])
}
arrTemp1[_index].push(arr2[i])
}
arrTemp = arrTemp.concat(arrTemp1)
return arrTemp
}
}
}
},
watch: {
form: {
handler (val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
this.handleChangeForm(n)
console.log('nnnnnn', n)
this.handleChangeGroup(n, val[n])
}
}
this.constForm = { ...val }
},
deep: true
}
},
created () {
// this.initForm()
// console.log('formInfo---ggg', this.form)
if (this.supportAdd) this.addList.push(this.addCount++)
if (this.fixed) this.getGridList()
},
methods: {
initForm () {
this.formList.forEach(async item => {
console.log('initform---item', item.label, item.optionSourceType)
// if (item.optionSourceType === 'remote') {
// await this.getOptionsLists(item.optionSourceValue).then(res => {
// item.options = res
// })
// }
})
},
handleValidBlur(n) {
console.log('n---', n)
if (n.columnName !== 'ID_CARD') return
if (!isCard(this.form.ID_CARD)) return
const { sex, birth } = computedCard(this.form.ID_CARD)
this.form.BIRTHDAY = birth
this.form.GENDER = sex == 1 ? '1' : '2'
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
handleAddRow () {
this.addList.push(this.addCount++)
},
// 监听固定四列
handleFiexedForm (val) {
let item = {
[val]: this.fixedForm[val]
}
this.fixedList.push(item)
this.$set(this.fixedList, val, this.fixedForm[val])
},
// 监听分组
handleChangeGroup (columnName, value) {
this.tempFormList.forEach(item => {
// console.log('columnName', item.columnName, columnName)
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) {
console.log('columnName', item.columnName, columnName)
this.$emit('changegroup', { value, childGroup: item.childGroup })
}
})
},
handleChangeGrid (val) {
console.log('val', val)
this.form.VILLAGE_ID = ''
this.form.BUILD_ID = ''
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
this.getValiheList()
if (!val) {
this.getBuildList()
this.getUniList()
this.getHouseList()
}
},
handleChangeV (val) {
console.log('val', val)
this.form.BUILD_ID = ''
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
this.getBuildList()
this.getUniList()
this.getHouseList()
},
handleChangeB (val) {
console.log('val', val)
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
this.getUniList()
this.getHouseList()
},
handleChangeD () {
this.form.HOME_ID = ''
this.getHouseList()
},
// 为了实现根据房屋类型改版是否租户的需求
handleChangeH(val){
let item = this.optionsH.find(item => item.value === val);
if(item && item.type == '1'){
this.form.IS_TENANT = '1'
console.log('item-----', item)
} else this.form.IS_TENANT = '0'
},
// 监听基础form
handleChangeForm (val) {
if (this.fixed) {
// let item = {}
for (let n in this.fixedForm) {
if (n === val) {
// item = {
// [val]: this.form[val]
// }
// this.fixedList.push(item)
this.$set(this.fixedList, val, this.form[val])
}
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
if (item.columnName === val) item.isChange = true
})
},
handlerMuscForm () {
let arr = []
this.addList.forEach(item => {
// console.log('handlerMuscForm----000', 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) })
// console.log('handlerMuscForm----222', arr2)
let hash = {}
let i = 0
let res = []
// let finalArr = []
arr2.forEach((item) => {
let name = item.tableName
if (hash[name]) {
res[hash[name] - 1].list.push(...item.list)
// console.log('hash[name]---', hash[name], res, res[hash[name] - 1], item)
} else {
hash[name] = ++i
res.push({
list: [...item.list],
supportAdd: this.supportAdd,
tableName: name
})
// console.log('hash[name]0000---', hash[name], res)
}
})
// console.log('handlerMuscForm----333', res)
return res
},
resetForm () {
this.$refs[this.formId].resetFields()
},
handleForm () {
let newForm = []
this.$refs[this.formId].validate((valid) => {
if (valid) {
var hash = {}
var i = 0
var res = []
this.tempFormList.forEach(function (item) {
var name = item.tableName
hash[name] ? res[hash[name] - 1].list.push(item) : hash[name] = ++i && res.push({
list: [item],
tableName: name
})
})
const itemTypes = ['cascader', 'daterange', 'timerange']
res.forEach(item => {
let _form = {}
item.list.filter(n => n.isChange).forEach(r => {
_form[r.columnName] = r.multiSelect || itemTypes.includes(r.itemType) ? this.form[r.columnName].toString() : this.form[r.columnName]
// return _form
})
if (this.fixed) {
for (let n in this.fixedList) {
_form[n] = this.fixedList[n]
}
}
newForm.push({
tableName: item.tableName,
supportAdd: this.supportAdd,
list: Object.keys(_form).length > 0 ? [{ ..._form }] : []
})
})
return newForm
} else {
console.log('error submit!!')
return false
}
})
if (this.supportAdd) newForm = this.handlerMuscForm()
return newForm
},
getGridList () {
const { user } = this.$store.state
console.log('agencyId', user)
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'addorupdate' })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsG = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
},
getValiheList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { gridId: this.form.GRID_ID, agencyId: user.agencyId })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsV = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
},
getBuildList () {
this.$http
.post('/gov/org/icbuilding/buildingoption', { neighborHoodId: this.form.VILLAGE_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsB = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
},
getUniList () {
this.$http
.post('/gov/org/icbuildingunit/unitoption', { buildingId: this.form.BUILD_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsD = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
},
getHouseList () {
this.$http
.post('/gov/org/ichouse/houseoption', { unitId: this.form.UNIT_ID })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取查询详情成功', res.data)
this.optionsH = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
},
async getOptionsLists (url) {
let options = []
console.log('getOptionsList----', url)
await this.$http
.post(url, { formCode: 'resi_base_info' })
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
options = res.data
}
})
.catch(() => {
return this.$message.error('网络错误')
})
return options
}
}
}
</script>
<style lang="scss" scoped>
.resi-form {
:deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
.resi-cell-value .resi-cell-input {
max-width: 190px;
}
.resi-cell-value {
:deep .el-col {
margin-right: 20px;
}
// .resi-cell-range {
// width: 180px;
// }
}
</style>
<style lang="scss" scoped>
.resi-form .resi-row {
margin-bottom: 0;
}
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
.resi-cell-col {
display: flex;
.el-form-item {
margin-right: 10px;
}
}
.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>