elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

改造原本的人员查询

shibei_master
zhangyuan 3 years ago
parent
6e715e136d
commit
2003057c2f
2 changed files with 650 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 649
      src/views/components/blackSearch.vue
  2. 2
      src/views/modules/plugins/rent/resi.vue

649
src/views/components/blackSearch.vue
View File

@ -0,0 +1,649 @@
<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.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"
>
</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.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"
>
</el-option>
</el-select>
<el-select
v-model.trim="form.BUILD_ID"
placeholder="楼号"
size="small"
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"
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"
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-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.trim="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.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"
>
<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>
</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="small" @click="handleSearch">查询</el-button>
<el-button class="diy-button--reset" size="small" @click="resetForm">重置</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: () => []
},
columnName: {
type: String,
default: ''
}
},
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 (columnName && columnName === item.columnName) _form[item.columnName] = '1'
else _form[item.columnName] = ''
})
return _form
}
let form = initForm(this.formList, this.columnName)
let tempFormList = this.formList.map(item => {
return {
...item,
isChange: this.columnName && this.columnName === item.columnName ? true : false
}
})
let constForm = {
...form,
GRID_ID: '',
VILLAGE_ID: '',
BUILD_ID: '',
UNIT_ID: '',
HOME_ID: ''
}
return {
pageLoading: false,
openSearch: false,
optionsV: [],
optionsB: [],
optionsH: [],
optionsD: [],
optionsG: [],
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,
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()
this.getValiheList()
if (this.columnName) this.handleChangeForm(this.columnName)
},
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 = ''
},
resetForm(formName) {
for(const n in this.form) {
this.form[n] = ''
}
this.handleSearch()
},
handleSearch() {
// console.log('formmmmm---', this.form)
const itemTypes = ['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].toString()]
}
})
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 = {}
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: '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: '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, 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: ''
// 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" scope>
.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 0.5s;
}
.resi-row-more {
height: max-content;
transition: height 0.5s;
}
.resi-row {
margin-bottom: 20px;
}
.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;
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: 200px;
}
.resi-cell--daterange {
width: 200px;
}
.resi-cell-select {
width: 200px;
box-sizing: border-box;
margin-right: 10px;
&-middle {
width: 130px;
}
&-small {
width: 88px;
}
}
.resi-cell-select:last-child {
margin-right: 0;
}
}
</style>

2
src/views/modules/plugins/rent/resi.vue
View File

@ -269,7 +269,7 @@
<script> <script>
import nextTick from 'dai-js/tools/nextTick' import nextTick from 'dai-js/tools/nextTick'
import resiSearch from '../../../components/resiSearch.vue' import resiSearch from '../../../components/blackSearch.vue'
import resiForm from '../../../components/resiForm.vue' import resiForm from '../../../components/resiForm.vue'
import editResi from '../../../components/editResi.vue' import editResi from '../../../components/editResi.vue'
import axios from 'axios' import axios from 'axios'

Write Preview
Loading…
Cancel
Save