老产品前端代码
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.
 
 
 
 

868 lines
27 KiB

<template>
<div class="resi-container">
<!-- <el-card class="resi-card"> -->
<div>
<el-form :inline="true" :label-width="'100px'" class="header_form_box" v-for="(item, index) in sliceList(itemList, 4)" :class="boxHeight?'setFormBoxHeightAuto':'setFormBoxHeight'"
:key="index">
<el-form-item v-for="n in item"
:key="n.id"
:span="computdSpan(item.length)"
class="margin0"
>
<div class="resi-cell">
<div class="resi-cell-label"
:class="item.length != 4 && 'resi-cell-label1'">{{ 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]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容">
</el-input>
<template v-else-if="n.itemType == 'inputRange'">
<!-- <el-input
v-model.trim="form[n.columnName]"
class="resi-cell-input"
size="small"
clearable
placeholder="请输入内容"
/> -->
<inputRange v-model="form[n.columnName]"
:type="n.validType"
@change="handleAgeChange" />
</template>
<template v-else-if="n.itemType === 'datepicker'">
<el-date-picker v-if="n.queryType === 'daterange'"
v-model.trim="form[n.columnName]"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="resi-cell--daterange"
size="small"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker v-else
v-model.trim="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.trim="form[n.columnName]"
placeholder="请选择"
size="small"
clearable
class="resi-cell-select"
:collapse-tags="n.multiSelect == 1 ? true : false"
:multiple="n.multiSelect == 1 ? true : false">
<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.trim="form[n.columnName]"
:options="n.options"
:props="{ checkStrictly: true }"
clearable
size="small"
class="resi-cell-select">
</el-cascader>
<template v-else-if="n.itemType === 'checkbox'">
<el-checkbox-group v-model="form[n.columnName]">
<el-checkbox v-for="ns in n.options"
:key="ns.value"
:label="ns.value">{{ns.label}}</el-checkbox>
</el-checkbox-group>
</template>
</div>
</div>
</el-form-item>
<el-form-item label="所属组织" prop="agencyIdArray">
<el-cascader class="item_width_normal"
ref="myCascader"
v-model="agencyIdArray"
:options="orgOptions"
:props="orgOptionProps"
:show-all-levels="false"
@change="handleChangeAgency"></el-cascader>
</el-form-item>
<el-form-item label="所属房屋" prop="VILLAGE_ID">
<div class="resi-cell">
<div class="resi-cell-value">
<el-select v-model.trim="form.VILLAGE_ID"
placeholder="请选择小区"
size="small"
filterable
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.trim="form.BUILD_ID"
placeholder="楼号"
size="small"
filterable
clearable
style="width: 120px;"
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.trim="form.UNIT_ID"
:disabled="changeBDisabled"
placeholder="单元"
size="small"
filterable
clearable
style="width: 120px;"
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.trim="form.HOME_ID"
:disabled="changeDDisabled"
placeholder="房号"
size="small"
filterable
clearable
style="width: 120px;"
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-form-item>
</el-form>
</div>
<el-row v-if="showSmartSearchForm"
class="resi-row-more">
<el-col :span="24">
<el-button v-for="btnItem in btnList"
:key="btnItem.index"
size="small"
:class="selBtnIndex===btnItem.index?'diy-button--blue':'diy-button--gray'"
@click="handelSelSmartBtn(btnItem.index)">{{btnItem.name}}</el-button>
</el-col>
<el-col>
<smart-search-rule ref="ref_rule"
:formType="formType"></smart-search-rule>
</el-col>
</el-row>
<el-row v-if="isArrow"
class="resi-search">
<el-col :span="24">
<el-button type="primary"
size="small"
@click="handleSearch" plain>查询 </el-button>
<el-button style="margin-left:10px"
size="small"
type="primary"
plain
@click="resetForm">重置</el-button>
<el-button type="primary"
size="small"
plain
@click="handleSmartSearch">智能查询</el-button>
<span class="font_color_blue" style="cursor:pointer;" @click="boxHeight = !boxHeight">{{boxHeight?'收起':'展开'}} <i :class="boxHeight?'el-icon-arrow-up':'el-icon-arrow-down'"></i></span>
</el-col>
</el-row>
</div>
</template>
<script>
import inputRange from './rangeInput.vue'
import smartSearchRule from './smartSearchRule.vue'
export default {
name: 'ResiSearch',
components: {
inputRange, smartSearchRule
},
props: {
formList: {
type: Array,
default: () => []
},
columnName: {
type: String,
default: ''
},
showGrid: {
type: Boolean,
default: false
},
isArrow: {
type: Boolean,
default: false
}
},
data () {
let initForm = (arr, columnName) => {
let _form = {}
// console.log('formInfo', obj)
// if (Object.keys(obj).length > 0) {
// _form = { ...obj }
// return _form
// }
arr.forEach((item) => {
if (item.itemType == 'checkbox') _form[item.columnName] = []
else if (item.queryType == 'resi_category' && columnName) {
_form[item.columnName] = [columnName]
} else if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
else if (item.itemType == 'inputRange') _form[item.columnName] = { start: '', end: '' }
else _form[item.columnName] = ''
})
return _form
}
let itemList = this.formList.map(item => {
console.log(item);
if (item.itemType == 'inputRange' && item.funType == 'agetoyear') {
item.columnName = 'age'
}
return {
...item
}
})
let form = initForm(itemList, this.columnName)
let tempFormList = itemList.map(item => {
return {
...item,
isChange: (item.queryType == 'resi_category' && this.columnName) || this.columnName === item.columnName ? true : false
}
})
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
}
let orgOptionProps = {
multiple: false,
value: 'agencyId',
label: 'agencyName',
children: 'subAgencyList',
checkStrictly: true
}
return {
boxHeight:false,
pageLoading: false,
openSearch: false,
optionsV: [],
optionsB: [],
optionsH: [],
optionsD: [],
optionsG: [],
orgOptions: [],
orgOptionProps,
agencyIdArray: [],
value: '',
itemList,
fixedList: [],
fixedForm: {
AGENCY_ID: '',
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
},
constForm,
form: {
...form,
AGENCY_ID: '',
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
},
tempFormList,
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])
}
}
]
},
queryType: {
'AGENCY_ID': 'like'
},
showSmartSearchForm: false,
formType: 'add',
selBtnIndex: 1,
btnList: [
{
name: '智能查询',
index: 1,
},
{
name: '租户',
index: 2,
ruleList: [
{
selSmartType: 'house',
nextLogicalRel: "",
nextLogicalRelName: "",
personRule: {
ruleDesc: '',//规则描述文字,例如:基础信息性别等于女
itemGroupId: '',
itemId: '',
queryType: '',
colTable: '',
colKey: '',
colVal: '',
itemList: [],
colType: '',//详细参数的组件类型
colOption: [],
itemGroupName: '',
itemLabel: '',
queryTypeName: '',
colValLabel: '',
},
houseRule: {
colKey: "RENT_FLAG",
colTable: "ic_house",
colVal: "1",
colValLabel: "出租",
itemGroupId: null,
itemGroupName: "房屋信息",
itemId: null,
itemLabel: "房屋状态",
nextLogicalRel: "",
nextLogicalRelName: "",
queryType: "=",
queryTypeName: "等于",
ruleDesc: "房屋信息房屋状态等于出租",
},
},
]
},
{
name: '第一党支部党员',
index: 3,
ruleList: [
{
selSmartType: 'person',
nextLogicalRel: "",
nextLogicalRelName: "",
personRule: {
colKey: "IS_BDHJ",
colTable: "ic_resi_user",
colVal: "1",
colValLabel: "是",
itemGroupId: "45687aa479955f9d06204d415238f7cc_0",
itemGroupName: "基础信息",
itemId: "20220422102809_1005",
itemLabel: "本地户籍",
queryType: "=",
queryTypeName: "等于",
ruleDesc: "基础信息本地户籍等于是",
},
houseRule: {
ruleDesc: '',
queryType: '',
colTable: '',
colKey: '',
colVal: '',
titleName: '房屋信息',
colType: '',//详细参数的组件类型
colOption: [],
itemGroupName: '房屋信息',
itemLabel: '',
queryTypeName: '',
colValLabel: '',
},
},
]
}
]
}
},
computed: {
sliceList () {
return function (data, count) {
if (data !== undefined) {
let index = 0
let arrTemp = []
for (let i = 0; i < data.length; i++) {
index = parseInt(0)
if (arrTemp.length <= index) {
arrTemp.push([])
}
arrTemp[index].push(data[i])
}
console.log(arrTemp);
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.getOrgTreeList()
this.getGridList()
this.getValiheList()
if (this.columnName) this.handleChangeForm(this.columnName)
},
methods: {
handleSmartSearch () {
this.showSmartSearchForm = !this.showSmartSearchForm
},
handelSelSmartBtn (index) {
this.selBtnIndex = index
},
initForm () {
this.formList.forEach((item) => {
this.$set(this.form, item.columnName, '')
})
console.log('formcccc---', this.form)
},
computdSpan (len) {
return len == 1 ? 24 : 6
},
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 = ''
},
resetForm (formName) {
for (const n in this.form) {
if (n == 'age') {
this.form.age = {
start: '',
end: ''
}
} else if (typeof this.form[n] == 'object') this.form[n] = []
else this.form[n] = ''
}
this.agencyIdArray = []
// let arr3 = [...arr1, ...arr]
this.$emit('search', [])
// this.handleSearch()
// this.orgOptions = [];
},
handleSearch () {
if (this.showSmartSearchForm) {
let refObj = this.$refs['ref_rule']
refObj.getRule()
} else {
// console.log('formmmmm---', this.form)
const itemTypes = ['daterange', 'timerange', 'checkbox']
let a = this.tempFormList.filter(item => item.itemType != 'inputRange')
let arr = a.filter((n) => n.isChange).map((item) => {
return {
queryType: item.queryType,
tableName: item.tableName,
columnName: item.columnName,
// columnValue: []
columnValue: this.form[item.columnName] &&
(itemTypes.includes(item.queryType) ||
itemTypes.includes(item.itemType) || item.multiSelect == 1
? this.form[item.columnName]
: [this.form[item.columnName].toString()])
}
})
const arr2 = arr.filter(item => item.columnValue.length > 0)
let arr1 = this.fixedList
.filter((n) => n.columnValue.length > 0)
.map((item) => {
return {
...item
}
})
let arr3 = [...arr1, ...arr2]
this.$emit('search', arr3)
return arr3
}
},
handleOpenSearch () {
this.openSearch = !this.openSearch
},
handleAgeChange (val) {
console.log('val----age---', val)
if (val.end) {
const s = this.computedBirth(val.end)
const e = this.computedBirth(val.start)
this.form.BIRTHDAY = [s, e]
}
},
handleChangeAgency (val) {
let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
if (obj) {
if (obj.level === 'grid') {
this.form.GRID_ID = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '';
this.form.AGENCY_ID = ''
} else {
this.form.AGENCY_ID = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : '';
this.form.GRID_ID = ''
}
} else {
this.form.AGENCY_ID = ''
this.form.GRID_ID = ''
}
this.form.VILLAGE_ID = ''
this.form.BUILD_ID = ''
this.form.UNIT_ID = ''
this.form.HOME_ID = ''
this.getValiheList()
},
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 = {}
let hasVal = false
this.fixedList.forEach((item, index) => {
if (item.columnName == val) {
hasVal = true
item.columnValue[0] = this.form[val]
if (!this.form[val]) this.fixedList.splice(index, 1)
console.log('fixedList----val', this.fixedList)
} else {
_item = {
queryType: this.queryType[val] ? this.queryType[val] : 'equal',//'equal',
tableName: 'ic_resi_user',
columnName: val,
columnValue: [this.form[val]]
}
console.log('fixedList----else', _item)
// this.$set(this.fixedList, index, _item)
}
})
if (Object.keys(_item).length > 0 && !hasVal) this.fixedList.push(_item)
} else {
this.$set(this.fixedList, 0, {
queryType: this.queryType[val] ? this.queryType[val] : 'equal',//'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
})
},
getOrgTreeList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customeragency/agencygridtree', {})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} else {
console.log('获取组织树成功', res.data)
this.orgOptions = []
this.orgOptions.push(res.data)
}
})
.catch(() => {
return this.$message.error('网络错误')
})
},
getGridList () {
const { user } = this.$store.state
this.$http
.post('/gov/org/customergrid/gridoption', { agencyId: user.agencyId, purpose: 'query' })
.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: this.form.AGENCY_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('网络错误')
})
},
computedBirth (age) {
let now = new Date();
let nowYear = now.getFullYear();
let nowMonth = now.getMonth() + 1;
let nowDay = now.getDate(); // 按照减法原理,先day相减,不够向month借;然后month相减,不够向year借;最后year相减。
let subYear = nowYear - age
if (nowMonth < 10) {
nowMonth = '0' + nowMonth
}
if (nowDay < 10) {
nowDay = '0' + nowDay
}
console.log(subYear + '-' + nowMonth + '-' + nowDay);
return subYear + '-' + nowMonth + '-' + nowDay
}
}
}
</script>
<style lang="scss" scope>
@import "@/assets/scss/modules/management/list-main.scss";
@import "@/assets/scss/modules/visual/communityManage.scss";
.header_form_box{
display: flex;
flex-wrap: wrap;
}
.resi-search {
// padding-right: 20px;
.el-col {
text-align: right;
}
}
.resi-container .resi-cell {
display: flex;
align-items: center;
.resi-cell-label {
flex-shrink: 0;
min-width: 70px;
box-sizing: border-box;
margin-right: 15px;
text-align: right;
// line-height: 32;
}
.resi-cell-label1 {
width: max-content;
}
.resi-cell-value-radio {
display: flex;
align-items: center;
min-height: 32px;
}
.resi-cell-input {
max-width: 200px;
}
.resi-cell--daterange {
max-width: 240px;
}
.resi-cell-select {
max-width: 200px;
box-sizing: border-box;
margin-right: 10px;
&-middle {
width: 130px;
}
&-small {
width: 88px;
}
}
.resi-cell-select:last-child {
margin-right: 0;
}
}
</style>