13 changed files with 2768 additions and 976 deletions
File diff suppressed because it is too large
@ -0,0 +1,950 @@ |
|||
<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> |
|||
<edit-form v-for="(item, index) in addList" |
|||
:key="index" |
|||
:ref="'baseForms' + index" |
|||
:columns="3" |
|||
:form-list="item.itemList || formList" |
|||
:form-id="'baseForms' + item.row" /> |
|||
</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" |
|||
:disabled="disabled" |
|||
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" |
|||
:disabled="disabled" |
|||
@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 |
|||
:disabled="disabled" |
|||
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 |
|||
:disabled="disabled" |
|||
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 |
|||
:disabled="disabled" |
|||
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-col :span="6"> |
|||
<el-form-item :prop="form.BUILD_ID" label="所属楼宇"> |
|||
<div class="resi-cell-value"> |
|||
<el-select v-model.trim="form.BUILD_ID" :disabled="disabled" placeholder="请选择楼号" size="small" |
|||
clearable class="resi-cell-select" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsB" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item :prop="form.HOME_ID" label="所属家庭"> |
|||
<div class="resi-cell-value"> |
|||
<el-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择" size="small" |
|||
clearable class="resi-cell-select" |
|||
> |
|||
<el-option |
|||
v-for="item in optionsH" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
</el-row> |
|||
<el-row v-for="(item, index) in sliceList(formList, columns)" |
|||
:key="index" |
|||
class="resi-row" :class="{'width-40':index==3||index==2||index==4||index==5}"> |
|||
<!-- <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.itemType != 'radio'?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'"> |
|||
<!-- <span v-if="n.columnName==='MOBILE'||n.columnName==='ID_CARD'">{{ form[n.columnName]||'--'}}</span> --> |
|||
<el-input v-if="n.columnName==='MOBILE'||n.columnName==='ID_CARD'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
|
|||
<el-input v-else-if="n.validType" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
class="resi-cell-input" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入内容"> |
|||
</el-input> |
|||
<el-input v-else |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
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]" |
|||
:disabled="disabled" |
|||
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]" |
|||
:disabled="disabled" |
|||
type="daterange" |
|||
align="right" |
|||
unlink-panels |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期"> |
|||
</el-date-picker> |
|||
<el-time-picker v-else-if="n.itemType === 'timepicker'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
placeholder="任意时间点"> |
|||
</el-time-picker> |
|||
<el-time-picker v-else-if="n.itemType === 'timerange'" |
|||
v-model.trim="form[n.columnName]" |
|||
:disabled="disabled" |
|||
is-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" |
|||
:disabled="disabled" |
|||
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" |
|||
:disabled="disabled" |
|||
:props="{ emitPath: false }" |
|||
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]" |
|||
:disabled="disabled" |
|||
:label="ns.value"> |
|||
{{ ns.label }} |
|||
</el-radio> --> |
|||
<el-checkbox-group v-model.trim="form[n.columnName]"> |
|||
<el-checkbox |
|||
:key="n.value" |
|||
:label="n.value" |
|||
:disabled="disabled">{{n.label}}</el-checkbox> |
|||
<!-- <el-checkbox label="n.la"></el-checkbox> --> |
|||
</el-checkbox-group> |
|||
<!-- <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" |
|||
:disabled="disabled">{{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, isPhone } from '@/utils/validate' |
|||
import { requestPost } from "@/js/dai/request"; |
|||
|
|||
|
|||
export default { |
|||
name: 'editForm', |
|||
props: { |
|||
editUserId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
fixed: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
labelWidth: { |
|||
type: String, |
|||
default: '100px' |
|||
}, |
|||
formId: { |
|||
type: String, |
|||
default: 'resiForm' |
|||
}, |
|||
agencyId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
formList: { |
|||
type: Array, |
|||
default: function () { |
|||
return [] |
|||
} |
|||
}, |
|||
formInfo: { |
|||
type: Object, |
|||
default: function () { |
|||
return {} |
|||
} |
|||
}, |
|||
mutiList: { |
|||
type: Array, |
|||
default: function () { |
|||
return [] |
|||
} |
|||
}, |
|||
// 渲染一行几列 |
|||
columns: { |
|||
type: Number, |
|||
default: 3 |
|||
}, |
|||
supportAdd: { // 单表多条数据 |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
disabled: { // 单表多条数据 |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data () { |
|||
// let form = {} |
|||
// let rules = {} |
|||
let checkMObile = (rule, value, callback) => { |
|||
if (value === '') { |
|||
callback(new Error('请输入联系电话')) |
|||
} else { |
|||
if (!isMobile(value) && !isPhone(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', obj) |
|||
if (Object.keys(obj).length > 0) { |
|||
_form = { ...obj } |
|||
// return _form |
|||
} |
|||
const itemTypes = ['daterange', 'timerange'] |
|||
arr.forEach(item => { |
|||
if (item.multiSelect || itemTypes.includes(item.itemType)) { |
|||
if (item.columnValue && item.columnValue.indexOf(',') > -1) _form[item.columnName] = item.columnValue.split(',') |
|||
else _form[item.columnName] = (item.columnValue && [item.columnValue]) || [] |
|||
} else _form[item.columnName] = item.columnValue || '' |
|||
}) |
|||
// console.log('_from0000---', arr) |
|||
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) |
|||
let tempFormList = [...this.formList] |
|||
let constForm = { |
|||
...form |
|||
} |
|||
console.log('-----------------哈哈哈哈哈哈rules', rules) |
|||
return { |
|||
openSearch: false, |
|||
fixedForm: { |
|||
GRID_ID: '', |
|||
VILLAGE_ID: '', |
|||
BUILD_ID: '', |
|||
UNIT_ID: '', |
|||
HOME_ID: '' |
|||
}, |
|||
fixedList: {}, |
|||
form: { |
|||
...form |
|||
}, |
|||
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' }] |
|||
}, |
|||
// rules, |
|||
value: '', |
|||
optionsV: [], |
|||
optionsB: [], |
|||
optionsH: [], |
|||
optionsG: [], |
|||
optionsD: [], |
|||
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---gggreg', this.rulesForm) |
|||
console.log('formList', this.formList) |
|||
if (this.supportAdd) { |
|||
this.addList = [...this.mutiList] |
|||
// console.log('addList----111', this.addList) |
|||
} |
|||
if (this.fixed) { |
|||
this.getGridList() |
|||
this.getValiheList() |
|||
this.getBuildList() |
|||
this.getUniList() |
|||
this.getHouseList() |
|||
} |
|||
|
|||
}, |
|||
mounted () { |
|||
console.log('this.editUserId', this.editUserId) |
|||
if (this.editUserId) { |
|||
this.handleTuomin() |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
async handleTuomin () { |
|||
|
|||
const url = "/data/aggregator/epmetuser/detailByType"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
id: this.editUserId, |
|||
type: "checkIcResiUser", |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.$set(this.form, 'MOBILE', data.mobile) |
|||
this.$set(this.form, 'ID_CARD', data.idCard) |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
|
|||
|
|||
}, |
|||
initForm () { |
|||
this.formList.forEach(async item => { |
|||
if (item.optionSourceType === 'remote') { |
|||
await this.getOptionsLists(item.optionSourceValue).then(res => { |
|||
item.options = this.getTreeData(res) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
getTreeData (data) { |
|||
if (!Array.isArray(data)) return [] |
|||
let arr = data.map(item => { |
|||
let _item = {} |
|||
if (item.children) { |
|||
if (item.children.length === 0) _item = { ...item, children: undefined } |
|||
else _item = { ...item, children: this.getTreeData(item.children) } |
|||
} else { |
|||
_item = { ...item } |
|||
} |
|||
return _item |
|||
}) |
|||
return arr |
|||
}, |
|||
handleOpenSearch () { |
|||
this.openSearch = !this.openSearch |
|||
}, |
|||
handleAddRow () { |
|||
this.addList.push({ |
|||
row: this.addList.length, |
|||
itemList: this.formList |
|||
}) |
|||
}, |
|||
// 监听固定四列 |
|||
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 => { |
|||
if (item.columnName === columnName && item.itemType === 'radio' && item.childGroup) { |
|||
console.log('columnName', item.columnName, columnName) |
|||
this.$emit('changegroup', { value, childGroup: item.childGroup }) |
|||
} |
|||
}) |
|||
}, |
|||
// 监听基础form |
|||
handleChangeForm (val) { |
|||
if (this.fixed) { |
|||
for (let n in this.fixedForm) { |
|||
if (n === val) { |
|||
this.$set(this.fixedList, val, this.form[val]) |
|||
} |
|||
} |
|||
} |
|||
this.tempFormList.forEach(item => { |
|||
if (item.columnName === val) item.isChange = true |
|||
}) |
|||
}, |
|||
handleChange () { |
|||
// this.handleForm() |
|||
}, |
|||
handleChangeGrid (val) { |
|||
console.log('val', val) |
|||
this.form.VILLAGE_ID = '' |
|||
this.form.BUILD_ID = '' |
|||
this.form.UNIT_ID = '' |
|||
this.form.HOME_ID = '' |
|||
this.getValiheList() |
|||
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' |
|||
}, |
|||
handlerMuscForm () { |
|||
let arr = [] |
|||
this.addList.forEach(item => { |
|||
// console.log('handlerMuscForm----000', this.$refs['baseForms' + item.row || item][0].handleForm()) |
|||
arr.push([...this.$refs['baseForms' + item.row][0].handleForm()]) |
|||
}) |
|||
if (arr.length === 0) return arr |
|||
let arr2 = arr.reduce(function (a, b) { return a.concat(b) }) |
|||
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) |
|||
} else { |
|||
hash[name] = ++i |
|||
res.push({ |
|||
list: [...item.list], |
|||
supportAdd: this.supportAdd, |
|||
tableName: name |
|||
}) |
|||
} |
|||
}) |
|||
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 = [] |
|||
let ID = this.tempFormList[0].ID |
|||
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], |
|||
ID: item.ID, |
|||
tableName: name |
|||
}) |
|||
}) |
|||
// console.log('resssssss', res) |
|||
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] |
|||
if (r.ID) { |
|||
_form.ID = r.ID |
|||
} |
|||
// return _form |
|||
}) |
|||
if (this.fixed) { |
|||
for (let n in this.fixedList) { |
|||
_form[n] = this.fixedList[n] |
|||
} |
|||
if (Object.keys(_form).length > 0) { |
|||
if (!_form.AGENCY_ID) _form.AGENCY_ID = this.agencyId |
|||
} |
|||
if (!_form.ID) _form.ID = ID |
|||
} |
|||
console.log('objeckeyssss', Object.keys(_form), _form) |
|||
newForm.push({ |
|||
tableName: item.tableName, |
|||
supportAdd: this.supportAdd, |
|||
ID: item.ID, |
|||
list: Object.keys(_form).length > 0 ? [{ ..._form }] : [] |
|||
}) |
|||
}) |
|||
console.log('newFormhhhhh', newForm) |
|||
return newForm |
|||
} else { |
|||
console.log('error submit!!') |
|||
return false |
|||
} |
|||
}) |
|||
if (this.supportAdd) newForm = this.handlerMuscForm() |
|||
return newForm |
|||
}, |
|||
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 |
|||
}, |
|||
getGridList () { |
|||
const { user } = this.$store.state |
|||
let purpose = 'query' |
|||
if (this.disabled) purpose = 'query' |
|||
else purpose = 'addorupdate' |
|||
this.$http |
|||
.post('/gov/org/customergrid/gridoption', { agencyId: this.agencyId, purpose }) |
|||
.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('/actual/base/communityQuarters/listQuartersOptions', { gridId: this.form.GRID_ID, agencyId: this.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('/actual/base/communityBuilding/buildingoption', { quartersId: 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('/actual/base/communityBuildingUnit/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('/actual/base/communityHouse/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('网络错误') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</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 { |
|||
width: 168px; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.resi-form .resi-row { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
// .resi-form .resi-cell { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// .resi-cell-label { |
|||
// width: 70px; |
|||
// box-sizing: border-box; |
|||
// margin-right: 15px; |
|||
// text-align: right; |
|||
// } |
|||
// .resi-cell-value-radio { |
|||
// display: flex; |
|||
// align-items: center; |
|||
// min-height: 36px; |
|||
// } |
|||
// .resi-cell-value .resi-cell-input { |
|||
// width: 180px; |
|||
// } |
|||
|
|||
.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> |
|||
@ -0,0 +1,331 @@ |
|||
<template> |
|||
<div class='g-main'> |
|||
<el-form :model="form"> |
|||
<div v-for="itemH in formList"> |
|||
<h5>{{ itemH.title }}</h5> |
|||
<template v-for="itemj in itemH.form"> |
|||
<section class="f-flex" style="flex-wrap: wrap;"> |
|||
<el-form-item v-for="(itemk, index) in itemj.children" :key="index" label-width="160px" |
|||
:label="itemk.label" :class="itemk.itemType == 'textarea' ? 'textareaDidth' : ''"> |
|||
<template v-if="itemk.itemType == 'radio1'"> |
|||
<section class="list_item_width_1"> |
|||
<el-radio v-for="ns in itemk.opction" :key="ns.value" size="small" |
|||
v-model.trim="form[itemj.id][itemk.formName]" :label="ns.value"> |
|||
{{ ns.label }} |
|||
</el-radio> |
|||
</section> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'select1' && itemk.showFlag !== '0'"> |
|||
<el-select v-model="form[itemj.id][itemk.formName]" :placeholder="`请选择${itemk.label}`" |
|||
size="small" :multiple="itemk.multiple" :collapse-tags="itemk.collapseTags" clearable |
|||
:style="{ 'width': itemk.formName == 'specialCategoryCode' ? '183px' : '' }" |
|||
class="list_item_width_1"> |
|||
<el-option v-for="items in itemk.opction" :key="items.value" :label="items.label" |
|||
:value="items.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'textarea1'"> |
|||
<el-input type="textarea" :placeholder="`请输入${itemk.label}`" class="item-width-textarea" |
|||
maxlength="120" size="small" show-word-limit resize="none" rows="3" |
|||
v-model.trim="form[itemj.id][itemk.formName]"> |
|||
</el-input> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'input1'"> |
|||
<el-input :placeholder="`请输入${itemk.label}`" class="list_item_width_1" size="small" |
|||
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
|||
v-model.trim="form[itemj.id][itemk.formName]" clearable> |
|||
</el-input> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'inputNum'"> |
|||
<el-input :placeholder="`请输入${itemk.label}`" size="small" class="list_item_width_1-text" |
|||
:style="{ 'margin-right': itemk.label == '备注' ? '50px' : '' }" |
|||
v-model.trim="form[itemj.id][itemk.formName]" clearable |
|||
@blur="checkNumberInput(itemj.id, itemk.formName)"> |
|||
</el-input><span class="u-data-tag">元</span> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'checkbox'"> |
|||
<el-checkbox-group size="small" v-model="form[itemj.id][itemk.formName]"> |
|||
<el-checkbox v-for="items in itemk.opction" :label="items.value" |
|||
:style="{ 'margin-right': items.label != itemk.label ? '' : '19px' }" |
|||
:key="items.value" :value="items.value">{{ items.label }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'datepicker1' && itemk.showFlag !== '0'"> |
|||
<el-date-picker v-model.trim="form[itemj.id][itemk.formName]" class="list_item_width_1" |
|||
type="date" size="small" clearable placeholder="选择日期" format="yyyy 年 MM 月 dd 日" |
|||
value-format="yyyy-MM-dd"> |
|||
</el-date-picker> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'cascader1'"> |
|||
<el-cascader v-model="form[itemj.id].partyOrgId" :props="casProps" :options="itemk.opction" |
|||
class="list_item_width_1" clearable size="small" |
|||
@change="handlePartyOrgCascadarChange"></el-cascader> |
|||
</template> |
|||
<template v-else-if="itemk.itemType == 'number'"> |
|||
<el-input-number class="list_item_width_1" size="small" :min="1" :max="10" |
|||
v-model.trim="form[itemj.id][itemk.formName]"></el-input-number> |
|||
</template> |
|||
|
|||
</el-form-item> |
|||
</section> |
|||
</template> |
|||
</div> |
|||
|
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
formType: null, |
|||
formList: [], |
|||
form: { |
|||
// 党员信息 |
|||
parymemberInfoDto: { |
|||
joinTime: null, |
|||
positiveTime: null, |
|||
partyOrgId: null, |
|||
flowFlag: null, |
|||
flowActNum: null, |
|||
partyJob: null, |
|||
duty: null, |
|||
retiredFlag: null, |
|||
centerFlag: null, |
|||
studyNotNeed: null, |
|||
joinBranchName: null, |
|||
joinCommunityTime: null |
|||
}, |
|||
// 残疾信息 |
|||
healthDto: { |
|||
disabilityCategoryCode: null, |
|||
disabilityLevel: null, |
|||
disabilityNum: null, |
|||
disabilityDesc: null, |
|||
guardianFlag: null, |
|||
guardianName: null, |
|||
specialSkillFlag: null, |
|||
workCapacityFlag: null |
|||
}, |
|||
// 大病信息 |
|||
seriousIllnessDto: { |
|||
illnessCodes: [] |
|||
}, |
|||
// 慢病信息 |
|||
chronicDiseaseDto: { |
|||
chronicDiseaseCodes: [] |
|||
}, |
|||
// 死亡信息 |
|||
deathDto: { |
|||
deathTime: null |
|||
}, |
|||
// 老年人 |
|||
oldPeopleDto: { |
|||
oldPeopleCategories: [], |
|||
resideSituation: null, |
|||
oldSubsidy: null |
|||
}, |
|||
// 低保人员 |
|||
subsistenceAllowanceDto: { |
|||
reasons: null, |
|||
category:[] |
|||
}, |
|||
// 退役军人 |
|||
veteranDto: { |
|||
joinArmyTime: null, |
|||
leaveArmyTime: null, |
|||
serviceUnit: null, |
|||
receiveUnit: null, |
|||
settlementAmount: null, |
|||
trainDesc: null, |
|||
employmentSituation: null, |
|||
pubWelfareJobFlag: null |
|||
}, |
|||
|
|||
// 保障房人员 |
|||
ensureHouseDto: { |
|||
liveCommunity: null, |
|||
housingNature: null |
|||
}, |
|||
// 统战人员 |
|||
unitedFrontDto: { |
|||
unitedFrontType: null |
|||
}, |
|||
//特扶人员 |
|||
specialSupportDto: { |
|||
specialSupportType: null,//特扶类别 |
|||
childName: null,//子女姓名 |
|||
childGender: null,//子女性别 |
|||
childDeathDate: null,//子女死亡日期 |
|||
childDisabilityCategoryCode: null,//伤残类别 |
|||
childDisabilityLevel: null,//伤残等级 |
|||
}, |
|||
// 志愿者 |
|||
volunteerDto: { |
|||
volunteerCategory: [] |
|||
}, |
|||
|
|||
}, |
|||
casProps: { |
|||
value: 'id', |
|||
label: 'partyOrgName', |
|||
lazy: true, |
|||
lazyLoad: (node, resolve) => { |
|||
this.handleNextOrgTreeClick(node, resolve) |
|||
}, |
|||
isLeaf: (data, node) => { |
|||
console.log(data); |
|||
//根据后台返回的数据判断是否还有下级 是否显示箭头图标 |
|||
//el-tree懒加载无子级数据时去掉下拉箭头 |
|||
if (data.partyOrgLevel == 7 || data.childrenQty == 0) { |
|||
return true |
|||
} |
|||
}, |
|||
checkStrictly: true, |
|||
multiple: false, |
|||
}, |
|||
}; |
|||
}, |
|||
props: { |
|||
}, |
|||
created() { |
|||
this.getOrgTree() |
|||
}, |
|||
activated() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
checkNumberInput(itemj, itemk) { |
|||
if (this.form[itemj][itemk]) { |
|||
if (isNaN(this.form[itemj][itemk])) { |
|||
this.$message.error("请输入数字"); |
|||
this.form[itemj][itemk] = ""; |
|||
} else { |
|||
this.form[itemj][itemk] = parseFloat( |
|||
this.form[itemj][itemk] |
|||
); |
|||
} |
|||
} |
|||
}, |
|||
showForm() { |
|||
this.$nextTick(() => { |
|||
const promises = this.formList.forEach((item) => { |
|||
item.form.map(async (group) => { |
|||
return group.children.reduce(async (accPromise, item) => { |
|||
const acc = await accPromise; |
|||
acc[item.formName] = null; |
|||
if(item.itemType == 'checkbox'){ |
|||
this.form[item.pformName][item.formName] =item.value || [] |
|||
}else{ |
|||
this.form[item.pformName][item.formName] =item.value ||null |
|||
} |
|||
if (item.opctionUrl) { |
|||
try { |
|||
item.opction = await this.getDictDataForm(item.opctionUrl, item.opctionParams); |
|||
} catch (error) { |
|||
console.error('Error fetching options:', error); |
|||
} |
|||
} |
|||
return acc; |
|||
}, Promise.resolve({})); |
|||
}) |
|||
}) |
|||
Promise.all(promises).then((results) => { |
|||
}).catch((error) => { |
|||
console.error('Error fetching options:', error); |
|||
}); |
|||
console.log(this.form, '子组件form'); |
|||
console.log(this.formList, '子组件formList'); |
|||
}) |
|||
}, |
|||
async getDictDataForm(url, params) { |
|||
try { |
|||
const { data } = await this.$http.post(url, params); |
|||
return data.data; |
|||
} catch (error) { |
|||
console.log(error, `获取 ${opctionParams.dictType} 字典`); |
|||
} |
|||
}, |
|||
|
|||
handlePartyOrgCascadarChange(selectedNode) { |
|||
this.form.parymemberInfoDto.partyOrgId = selectedNode[selectedNode.length - 1]; |
|||
}, |
|||
async handleNextOrgTreeClick(node, resolve) { |
|||
await this.getTreeChildenList(node, resolve) |
|||
}, |
|||
async getTreeChildenList(node, resolve) { |
|||
if (node.data.partyOrgLevel === 7) { |
|||
resolve(null); |
|||
return; |
|||
} |
|||
const url = "/actual/base/party/org/listNextLevelPartyOrgTreeNodesByPid" |
|||
let params = { |
|||
partyOrgPid: node.data.id |
|||
} |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
if (code === 0) { |
|||
data.forEach(item => { |
|||
item.children = null; |
|||
item.leaf = item.partyOrgLevel === 7 || item.childrenQty === 0 |
|||
}); |
|||
resolve(data) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getOrgTree() { |
|||
try { |
|||
const { data } = await requestGet('/actual/base/party/org/listPartyOrgTreeRoot4Select', { depth: 8 }) |
|||
this.formList.forEach(c => { |
|||
for (let i of c.children) { |
|||
if (i.formName == 'partyOrgId') { |
|||
i.opction = [data]; |
|||
} |
|||
} |
|||
}) |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: { |
|||
'form': { |
|||
handler(newVal, oldVal) { |
|||
this.$emit('submitExpand', this.form) |
|||
}, |
|||
deep: true, |
|||
immediate: true |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
h5 { |
|||
position: relative; |
|||
font-size: 16px; |
|||
margin: 22px 0; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-block; |
|||
left: -15px; |
|||
top: -0px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #0056d6; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue