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.
557 lines
16 KiB
557 lines
16 KiB
<template>
|
|
<div class="resi-container">
|
|
<el-card class="resi-card">
|
|
<el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
|
|
<el-row class="resi-row">
|
|
<el-col :span="6">
|
|
<div class="resi-cell">
|
|
<div class="resi-cell-label">所属网格</div>
|
|
<div class="resi-cell-value">
|
|
<el-select v-model="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-col>
|
|
<el-col :span="18">
|
|
<div class="resi-cell">
|
|
<div class="resi-cell-label">所属小区</div>
|
|
<div class="resi-cell-value">
|
|
<el-select v-model="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">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select v-model="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">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select v-model="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">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select v-model="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">
|
|
</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-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'">
|
|
<el-input
|
|
v-if="n.itemType === 'input' || n.itemType === 'textarea'"
|
|
v-model="form[n.columnName]"
|
|
class="resi-cell-input"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入内容"
|
|
>
|
|
</el-input>
|
|
<template v-else-if="n.itemType === 'datepicker'">
|
|
<el-date-picker
|
|
v-if="n.queryType === 'daterange'"
|
|
v-model="form[n.columnName]"
|
|
type="daterange"
|
|
align="right"
|
|
unlink-panels
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
class="resi-cell-input"
|
|
size="small"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
:picker-options="pickerOptions">
|
|
</el-date-picker>
|
|
<el-date-picker
|
|
v-else
|
|
v-model="form[n.columnName]"
|
|
class="resi-cell-input"
|
|
type="date"
|
|
size="small"
|
|
clearable
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期">
|
|
</el-date-picker>
|
|
</template>
|
|
<el-select v-else-if="n.itemType === 'select' || n.itemType === 'radio'" v-model="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">
|
|
</el-option>
|
|
</el-select>
|
|
<el-cascader
|
|
v-else-if="n.itemType === 'cascader'"
|
|
v-model="form[n.columnName]"
|
|
:options="n.options"
|
|
:props="{ checkStrictly: true }"
|
|
clearable
|
|
size="small"
|
|
class="resi-cell-select">
|
|
</el-cascader>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-row>
|
|
<el-row class="resi-search">
|
|
<!-- <el-col :span="20">
|
|
<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-col>
|
|
</el-row>
|
|
<div class="resi-down" @click="handleOpenSearch">
|
|
<img v-if="openSearch" src="../../assets/img/arrow-up.png" />
|
|
<img v-else src="../../assets/img/arrow-down.png" />
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ResiSearch',
|
|
props: {
|
|
formList: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data () {
|
|
let initForm = (arr) => {
|
|
let _form = {}
|
|
// console.log('formInfo', obj)
|
|
// if (Object.keys(obj).length > 0) {
|
|
// _form = { ...obj }
|
|
// return _form
|
|
// }
|
|
arr.forEach(item => {
|
|
_form[item.columnName] = ''
|
|
})
|
|
return _form
|
|
}
|
|
let form = initForm(this.formList)
|
|
let tempFormList = [ ...this.formList ]
|
|
let constForm = {
|
|
...form,
|
|
GRID_ID: '',
|
|
VILLAGE_ID: '',
|
|
BUILD_ID: '',
|
|
UNIT_ID: '',
|
|
HOME_ID: ''
|
|
}
|
|
return {
|
|
pageLoading: false,
|
|
openSearch: false,
|
|
optionsV: [],
|
|
optionsB: [],
|
|
optionsH: [],
|
|
optionsD: [],
|
|
optionsG: [],
|
|
options: [{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}, {
|
|
value: '选项3',
|
|
label: '蚵仔煎'
|
|
}, {
|
|
value: '选项4',
|
|
label: '龙须面'
|
|
}, {
|
|
value: '选项5',
|
|
label: '北京烤鸭'
|
|
}],
|
|
value: '',
|
|
fixedList: [],
|
|
fixedForm: {
|
|
GRID_ID: '',
|
|
VILLAGE_ID: '',
|
|
BUILD_ID: '',
|
|
UNIT_ID: '',
|
|
HOME_ID: ''
|
|
},
|
|
constForm,
|
|
form: {
|
|
...form,
|
|
GRID_ID: '',
|
|
VILLAGE_ID: '',
|
|
BUILD_ID: '',
|
|
UNIT_ID: '',
|
|
HOME_ID: ''
|
|
},
|
|
tempFormList,
|
|
checkList: ['选中且禁用', '复选框 A'],
|
|
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 = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
index = parseInt(i / count)
|
|
if (arrTemp.length <= index) {
|
|
arrTemp.push([])
|
|
}
|
|
arrTemp[index].push(data[i])
|
|
}
|
|
return arrTemp
|
|
}
|
|
}
|
|
},
|
|
changeVDisabled () {
|
|
return !this.form.VILLAGE_ID
|
|
},
|
|
changeBDisabled () {
|
|
return !this.form.BUILD_ID
|
|
},
|
|
changeDDisabled () {
|
|
return !this.form.UNIT_ID
|
|
}
|
|
},
|
|
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.constForm = { ...val }
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
created () {
|
|
// this.initForm()
|
|
// console.log('formcccc---', this.form)
|
|
this.getGridList()
|
|
},
|
|
methods: {
|
|
initForm () {
|
|
this.formList.forEach(item => {
|
|
this.$set(this.form, item.columnName, '')
|
|
})
|
|
console.log('formcccc---', this.form)
|
|
},
|
|
handleClearVillage () {
|
|
this.form.BUILD_ID = ''
|
|
this.form.HOME_ID = ''
|
|
},
|
|
handleClearBuild () {
|
|
this.form.BUILD_ID = ''
|
|
this.form.UNIT_ID = ''
|
|
this.form.HOME_ID = ''
|
|
},
|
|
handleClearDan () {
|
|
this.form.UNIT_ID = ''
|
|
this.form.HOME_ID = ''
|
|
},
|
|
handleSearch () {
|
|
// console.log('formmmmm---', this.form)
|
|
const itemTypes = ['cascader', 'daterange', 'timerange']
|
|
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]]
|
|
}
|
|
})
|
|
let arr1 = this.fixedList.filter(n => n.columnValue.length > 0).map(item => {
|
|
return {
|
|
...item
|
|
}
|
|
})
|
|
let arr3 = [ ...arr1, ...arr ]
|
|
this.$emit('search', arr3)
|
|
},
|
|
handleOpenSearch () {
|
|
this.openSearch = !this.openSearch
|
|
},
|
|
handleChangeGrid (val) {
|
|
console.log('val', val)
|
|
this.form.VILLAGE_ID = ''
|
|
this.form.BUILD_ID = ''
|
|
this.form.UNIT_ID = ''
|
|
this.form.HOME_ID = ''
|
|
this.getValiheList()
|
|
},
|
|
handleChangeV (val) {
|
|
console.log('val', val)
|
|
this.form.BUILD_ID = ''
|
|
this.form.UNIT_ID = ''
|
|
this.form.HOME_ID = ''
|
|
this.getBuildList()
|
|
},
|
|
handleChangeB (val) {
|
|
console.log('val', val)
|
|
this.form.UNIT_ID = ''
|
|
this.form.HOME_ID = ''
|
|
this.getUniList()
|
|
},
|
|
handleChangeD (val) {
|
|
console.log('val', val)
|
|
this.form.HOME_ID = ''
|
|
this.getHouseList()
|
|
},
|
|
// 监听基础form
|
|
handleChangeForm (val) {
|
|
for (let n in this.fixedForm) {
|
|
if (n === val) {
|
|
if (this.fixedList.length > 0) {
|
|
let _item = {}
|
|
this.fixedList.forEach((item, index) => {
|
|
if (item.columnName === val) {
|
|
item.columnValue[0] = this.form[val]
|
|
} else {
|
|
_item = {
|
|
queryType: 'equal',
|
|
tableName: 'ic_resi_user',
|
|
columnName: val,
|
|
columnValue: [this.form[val]]
|
|
}
|
|
// this.$set(this.fixedList, index, _item)
|
|
}
|
|
})
|
|
if (Object.keys(_item).length > 0) this.fixedList.push(_item)
|
|
} else {
|
|
this.$set(this.fixedList, 0, {
|
|
queryType: 'equal',
|
|
tableName: 'ic_resi_user',
|
|
columnName: val,
|
|
columnValue: [this.form[val]]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
console.log('fixedList----999', this.fixedList)
|
|
this.tempFormList.forEach(item => {
|
|
if (item.columnName === val) item.isChange = true
|
|
})
|
|
},
|
|
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">
|
|
.resi-container .resi-card {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
.resi-down {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 46px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
margin-left: -23rpx;
|
|
cursor: pointer;
|
|
background: #FFFFFF;
|
|
border-radius: 0 0 10px 10px;
|
|
img {
|
|
display: block;
|
|
}
|
|
}
|
|
.resi-row-box {
|
|
height: 104px;
|
|
overflow: hidden;
|
|
transition: height .5s;
|
|
}
|
|
.resi-row-more {
|
|
height: max-content;
|
|
transition: height .5s;
|
|
}
|
|
.resi-row {
|
|
margin-bottom: 20px;
|
|
}
|
|
.resi-search {
|
|
padding-right: 140px;
|
|
.el-col {
|
|
text-align: right;
|
|
}
|
|
}
|
|
.resi-container .resi-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
.resi-cell-label {
|
|
width: 70px;
|
|
box-sizing: border-box;
|
|
margin-right: 15px;
|
|
text-align: right;
|
|
// line-height: 32;
|
|
}
|
|
.resi-cell-value-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 32px;
|
|
}
|
|
.resi-cell-input {
|
|
width: 180px;
|
|
}
|
|
.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>
|
|
|