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

合并五大图层

test
jiangyy 3 years ago
parent
50273a1c26
commit
a82f146fc1
1 changed files with 262 additions and 232 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 494
      src/views/components/editResi.vue

494
src/views/components/editResi.vue
View File

@ -1,92 +1,120 @@
<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>
<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" />
<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-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" :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 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-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">
@ -98,7 +126,7 @@
<el-col :span="6">
</el-col> -->
</div>
</div>
</el-form-item>
</el-col>
<!-- <el-col :span="6">
@ -134,37 +162,38 @@
</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]"
: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-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]"
: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"
@ -175,90 +204,92 @@
>
</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
<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"
: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-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-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>
@ -349,7 +380,7 @@ export default {
_form = { ...obj }
// return _form
}
const itemTypes = ['daterange', 'timerange']
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(',')
@ -382,7 +413,7 @@ export default {
}
let form = initForm(this.formInfo, this.formList)
let rules = initRules(this.formList)
let tempFormList = [ ...this.formList ]
let tempFormList = [...this.formList]
let constForm = {
...form
}
@ -526,13 +557,13 @@ export default {
}
})
},
getTreeData(data){
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, children: this.getTreeData(item.children) }
} else {
_item = { ...item }
}
@ -614,9 +645,9 @@ export default {
this.getHouseList()
},
// 为了实现根据房屋类型改版是否租户的需求
handleChangeH(val){
handleChangeH (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'
console.log('item-----', item)
} else this.form.IS_TENANT = '0'
@ -625,7 +656,7 @@ export default {
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() ])
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) })
@ -808,17 +839,16 @@ 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;
}
}
.resi-cell-value .resi-cell-input {
width: 190px;
width: 190px;
}
</style>
<style lang="scss" scoped>
.resi-form .resi-row {
margin-bottom: 0;
}
@ -826,43 +856,43 @@ export default {
// .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-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;
.resi-cell-value .resi-cell-textarea {
width: 300px;
}
.resi-cell-col {
display: flex;
.el-form-item {
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>

Write Preview
Loading…
Cancel
Save