Browse Source

ff

shibei_master
13176889840 4 years ago
parent
commit
e6d5424295
  1. 218
      src/views/components/resiSearch.vue

218
src/views/components/resiSearch.vue

@ -7,13 +7,20 @@
<div class="resi-cell">
<div class="resi-cell-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-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">
:value="item.value"
>
</el-option>
</el-select>
</div>
@ -23,50 +30,91 @@
<div class="resi-cell">
<div class="resi-cell-label">所属小区</div>
<div class="resi-cell-value">
<el-select v-model.trim="form.VILLAGE_ID" placeholder="请选择小区" size="small"
clearable class="resi-cell-select"
@clear="handleClearVillage" @change="handleChangeV">
<el-select
v-model.trim="form.VILLAGE_ID"
placeholder="请选择小区"
size="small"
clearable
class="resi-cell-select"
@clear="handleClearVillage"
@change="handleChangeV"
>
<el-option
v-for="item in optionsV"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model.trim="form.BUILD_ID" placeholder="楼号" size="small" clearable
class="resi-cell-select" :disabled="changeVDisabled" @clear="handleClearBuild" @change="handleChangeB">
<el-select
v-model.trim="form.BUILD_ID"
placeholder="楼号"
size="small"
clearable
class="resi-cell-select"
:disabled="changeVDisabled"
@clear="handleClearBuild"
@change="handleChangeB"
>
<el-option
v-for="item in optionsB"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model.trim="form.UNIT_ID" :disabled="changeBDisabled" placeholder="单元" size="small" clearable class="resi-cell-select" @click="handleClearDan" @change="handleChangeD">
<el-select
v-model.trim="form.UNIT_ID"
:disabled="changeBDisabled"
placeholder="单元"
size="small"
clearable
class="resi-cell-select"
@click="handleClearDan"
@change="handleChangeD"
>
<el-option
v-for="item in optionsD"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model.trim="form.HOME_ID" :disabled="changeDDisabled" placeholder="楼号" size="small" clearable class="resi-cell-select">
<el-select
v-model.trim="form.HOME_ID"
:disabled="changeDDisabled"
placeholder="楼号"
size="small"
clearable
class="resi-cell-select"
>
<el-option
v-for="item in optionsH"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
</el-col>
</el-row>
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
<el-row
v-for="(item, index) in sliceList(formList, 4)"
:key="index"
class="resi-row"
>
<el-col v-for="n in item" :key="n.id" :span="6">
<div class="resi-cell">
<div class="resi-cell-label">{{n.label}}</div>
<div class="resi-cell-value" :class="n.itemType === 'radio' && 'resi-cell-value-radio'">
<div class="resi-cell-label">{{ n.label }}</div>
<div
class="resi-cell-value"
:class="n.itemType === 'radio' && 'resi-cell-value-radio'"
>
<el-input
v-if="n.itemType === 'input' || n.itemType === 'textarea'"
v-model.trim="form[n.columnName]"
@ -90,7 +138,8 @@
size="small"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
:picker-options="pickerOptions"
>
</el-date-picker>
<el-date-picker
v-else
@ -101,15 +150,24 @@
clearable
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期">
placeholder="选择日期"
>
</el-date-picker>
</template>
<el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'" v-model.trim="form[n.columnName]" placeholder="请选择" size="small" clearable class="resi-cell-select">
<el-select
v-else-if="n.itemType === 'select' || n.itemType === 'radio'"
v-model.trim="form[n.columnName]"
placeholder="请选择"
size="small"
clearable
class="resi-cell-select"
>
<el-option
v-for="item in n.options"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<el-cascader
@ -119,12 +177,12 @@
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
class="resi-cell-select"
>
</el-cascader>
</div>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="resi-search">
@ -132,7 +190,9 @@
<el-button type="primary" size="mini">查询</el-button>
</el-col> -->
<el-col :span="24">
<el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
<el-button type="primary" size="mini" @click="handleSearch"
>查询</el-button
>
</el-col>
</el-row>
<div class="resi-down" @click="handleOpenSearch">
@ -152,7 +212,7 @@ export default {
default: () => []
}
},
data () {
data() {
let initForm = (arr) => {
let _form = {}
// console.log('formInfo', obj)
@ -160,13 +220,13 @@ export default {
// _form = { ...obj }
// return _form
// }
arr.forEach(item => {
arr.forEach((item) => {
_form[item.columnName] = ''
})
return _form
}
let form = initForm(this.formList)
let tempFormList = [ ...this.formList ]
let tempFormList = [...this.formList]
let constForm = {
...form,
GRID_ID: '',
@ -203,36 +263,40 @@ export default {
},
tempFormList,
pickerOptions: {
shortcuts: [{
shortcuts: [
{
text: '最近一周',
onClick (picker) {
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) {
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) {
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 () {
sliceList() {
return function (data, count) {
if (data !== undefined) {
let index = 0
@ -248,19 +312,19 @@ export default {
}
}
},
changeVDisabled () {
changeVDisabled() {
return !this.form.VILLAGE_ID
},
changeBDisabled () {
changeBDisabled() {
return !this.form.BUILD_ID
},
changeDDisabled () {
changeDDisabled() {
return !this.form.UNIT_ID
}
},
watch: {
form: {
handler (val, val2) {
handler(val, val2) {
// console.log('valpppp----', val, val2)
for (let n in val) {
if (this.constForm[n] !== val[n]) {
@ -273,55 +337,64 @@ export default {
deep: true
}
},
created () {
created() {
// this.initForm()
// console.log('formcccc---', this.form)
this.getGridList()
this.getValiheList()
},
methods: {
initForm () {
this.formList.forEach(item => {
initForm() {
this.formList.forEach((item) => {
this.$set(this.form, item.columnName, '')
})
console.log('formcccc---', this.form)
},
handleClearVillage () {
handleClearVillage() {
this.form.BUILD_ID = ''
this.form.HOME_ID = ''
},
handleClearBuild () {
handleClearBuild() {
this.form.BUILD_ID = ''
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
},
handleClearDan () {
handleClearDan() {
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
},
handleSearch () {
handleSearch() {
// console.log('formmmmm---', this.form)
const itemTypes = ['daterange', 'timerange']
let arr = this.tempFormList.filter(n => n.isChange).map(item => {
let arr = this.tempFormList
.filter((n) => n.isChange)
.map((item) => {
return {
queryType: item.queryType,
tableName: item.tableName,
columnName: item.columnName,
// columnValue: []
columnValue: (itemTypes.includes(item.queryType) || itemTypes.includes(item.itemType)) ? this.form[item.columnName] : [this.form[item.columnName].toString()]
columnValue:
itemTypes.includes(item.queryType) ||
itemTypes.includes(item.itemType)
? this.form[item.columnName]
: [this.form[item.columnName].toString()]
}
})
let arr1 = this.fixedList.filter(n => n.columnValue.length > 0).map(item => {
let arr1 = this.fixedList
.filter((n) => n.columnValue.length > 0)
.map((item) => {
return {
...item
}
})
let arr3 = [ ...arr1, ...arr ]
let arr3 = [...arr1, ...arr]
this.$emit('search', arr3)
},
handleOpenSearch () {
handleOpenSearch() {
this.openSearch = !this.openSearch
},
handleChangeGrid (val) {
handleChangeGrid(val) {
console.log('val', val)
this.form.VILLAGE_ID = ''
this.form.BUILD_ID = ''
@ -329,26 +402,26 @@ export default {
this.form.HOME_ID = ''
this.getValiheList()
},
handleChangeV (val) {
handleChangeV(val) {
console.log('val', val)
this.form.BUILD_ID = ''
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
this.getBuildList()
},
handleChangeB (val) {
handleChangeB(val) {
console.log('val', val)
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
this.getUniList()
},
handleChangeD (val) {
handleChangeD(val) {
console.log('val', val)
this.form.HOME_ID = ''
this.getHouseList()
},
// form
handleChangeForm (val) {
handleChangeForm(val) {
for (let n in this.fixedForm) {
if (n === val) {
if (this.fixedList.length > 0) {
@ -378,11 +451,11 @@ export default {
}
}
console.log('fixedList----999', this.fixedList)
this.tempFormList.forEach(item => {
this.tempFormList.forEach((item) => {
if (item.columnName === val) item.isChange = true
})
},
getGridList () {
getGridList() {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId })
@ -398,10 +471,13 @@ export default {
return this.$message.error('网络错误')
})
},
getValiheList () {
getValiheList() {
const { user } = this.$store.state
this.$http
.post('/gov/org/icneighborhood/neighborhoodoption', { gridId: this.form.GRID_ID, agencyId: user.agencyId })
.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)
@ -414,9 +490,11 @@ export default {
return this.$message.error('网络错误')
})
},
getBuildList () {
getBuildList() {
this.$http
.post('/gov/org/icbuilding/buildingoption', { neighborHoodId: this.form.VILLAGE_ID })
.post('/gov/org/icbuilding/buildingoption', {
neighborHoodId: this.form.VILLAGE_ID
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
@ -429,9 +507,11 @@ export default {
return this.$message.error('网络错误')
})
},
getUniList () {
getUniList() {
this.$http
.post('/gov/org/icbuildingunit/unitoption', { buildingId: this.form.BUILD_ID })
.post('/gov/org/icbuildingunit/unitoption', {
buildingId: this.form.BUILD_ID
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
@ -444,7 +524,7 @@ export default {
return this.$message.error('网络错误')
})
},
getHouseList () {
getHouseList() {
this.$http
.post('/gov/org/ichouse/houseoption', { unitId: this.form.UNIT_ID })
.then(({ data: res }) => {
@ -458,7 +538,7 @@ export default {
.catch(() => {
return this.$message.error('网络错误')
})
},
}
}
}
</script>
@ -480,7 +560,7 @@ export default {
box-sizing: border-box;
margin-left: -23rpx;
cursor: pointer;
background: #FFFFFF;
background: #ffffff;
border-radius: 0 0 10px 10px;
img {
display: block;
@ -489,11 +569,11 @@ export default {
.resi-row-box {
height: 104px;
overflow: hidden;
transition: height .5s;
transition: height 0.5s;
}
.resi-row-more {
height: max-content;
transition: height .5s;
transition: height 0.5s;
}
.resi-row {
margin-bottom: 20px;

Loading…
Cancel
Save