dai
4 years ago
2 changed files with 826 additions and 0 deletions
@ -0,0 +1,816 @@ |
|||||
|
<template> |
||||
|
<div :id="formId" class="resi-container"> |
||||
|
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :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="form.GRID_ID" label="所属网格" required> |
||||
|
<!-- <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" |
||||
|
> |
||||
|
<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 :prop="form.VILLAGE_ID" label="所属小区" required> |
||||
|
<div class="resi-cell-value"> |
||||
|
<el-select v-model.trim="form.VILLAGE_ID" :disabled="disabled" placeholder="请选择小区" size="small" |
||||
|
clearable class="resi-cell-select" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in optionsV" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-select v-model.trim="form.BUILD_ID" :disabled="disabled" 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-select v-model.trim="form.UNIT_ID" :disabled="disabled" 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-select v-model.trim="form.HOME_ID" :disabled="disabled" placeholder="请选择房号" size="small" |
||||
|
clearable class="resi-cell-select resi-cell-select-middle" |
||||
|
> |
||||
|
<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-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"> |
||||
|
<!-- <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" :required="Boolean(n.required)"> |
||||
|
<!-- <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]" |
||||
|
: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" |
||||
|
:props="{ checkStrictly: true }" |
||||
|
:disabled="disabled" |
||||
|
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-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 } from '@/utils/validate' |
||||
|
|
||||
|
export default { |
||||
|
name: 'editForm', |
||||
|
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 {} |
||||
|
} |
||||
|
}, |
||||
|
mutiList: { |
||||
|
type: Array, |
||||
|
default: function () { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
// 渲染一行几列 |
||||
|
columns: { |
||||
|
type: Number, |
||||
|
default: 4 |
||||
|
}, |
||||
|
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)) { |
||||
|
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 = ['cascader', '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] = [ |
||||
|
{ validator: checkMObile, trigger: 'blur' } |
||||
|
] |
||||
|
} else if (item.validType === 'id_card') { |
||||
|
rules[item.columnName] = [ |
||||
|
{ 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 |
||||
|
} |
||||
|
return { |
||||
|
openSearch: false, |
||||
|
fixedForm: { |
||||
|
GRID_ID: '', |
||||
|
VILLAGE_ID: '', |
||||
|
BUILD_ID: '', |
||||
|
UNIT_ID: '', |
||||
|
HOME_ID: '' |
||||
|
}, |
||||
|
fixedList: {}, |
||||
|
form: { |
||||
|
...form |
||||
|
}, |
||||
|
constForm, |
||||
|
tempFormList, |
||||
|
addCount: 0, |
||||
|
addList: [], |
||||
|
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---ggg', this.form) |
||||
|
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() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
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() |
||||
|
}, |
||||
|
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.$store.state.user.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 |
||||
|
this.$http |
||||
|
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId }) |
||||
|
.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('网络错误') |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</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: 180px; |
||||
|
} |
||||
|
|
||||
|
</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-select { |
||||
|
width: 180px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 10px; |
||||
|
&-middle { |
||||
|
width: 130px; |
||||
|
} |
||||
|
&-small { |
||||
|
width: 88px; |
||||
|
} |
||||
|
} |
||||
|
.resi-cell-select:last-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
// } |
||||
|
</style> |
||||
Loading…
Reference in new issue