12 changed files with 590 additions and 83 deletions
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
@ -0,0 +1,194 @@ |
|||||
|
<style lang="less" scoped> |
||||
|
.search{ |
||||
|
position:absolute; |
||||
|
top:120px; |
||||
|
left:40px; |
||||
|
display:flex; |
||||
|
align-items: center; |
||||
|
&>div{ |
||||
|
margin-right:20px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<template> |
||||
|
<div class="search"> |
||||
|
<el-select |
||||
|
filterable |
||||
|
remote |
||||
|
reserve-keyword |
||||
|
:remote-method="getVillage" |
||||
|
:loading="loading" |
||||
|
v-model="formData.villageId" |
||||
|
popper-class="search-popper" |
||||
|
placeholder="选择小区"> |
||||
|
<el-option v-for="(v,k) in villageList" :key="k" :value="v.projectId" :label="v.name"/> |
||||
|
</el-select> |
||||
|
<el-select v-model="formData.buildId" popper-class="search-popper" placeholder="选择楼栋"> |
||||
|
<el-option v-for="(v,k) in buildList" :key="k" :value="v.buildId" :label="v.buildName"/> |
||||
|
</el-select> |
||||
|
<el-select v-model="formData.unitId" popper-class="search-popper" placeholder="选择单元"> |
||||
|
<el-option v-for="(v,k) in unitList" :key="k" :value="v.unitId" :label="v.unitName"/> |
||||
|
</el-select> |
||||
|
<el-select v-model="formData.floorId" popper-class="search-popper" placeholder="选择楼层"> |
||||
|
<el-option v-for="(v,k) in floorList" :key="k" :value="v.floorId" :label="v.floorName"/> |
||||
|
</el-select> |
||||
|
<el-select |
||||
|
v-model="formData.roomId" |
||||
|
@change="emit('update:modelValue',$event);formData.userId=''" |
||||
|
popper-class="search-popper" |
||||
|
placeholder="选择房间"> |
||||
|
<el-option v-for="(v,k) in roomList" :key="k" :value="v.roomId" :label="v.roomName"/> |
||||
|
</el-select> |
||||
|
<el-select |
||||
|
filterable |
||||
|
remote |
||||
|
reserve-keyword |
||||
|
:remote-method="person" |
||||
|
:loading="loading" |
||||
|
v-model="formData.userId" |
||||
|
popper-class="search-popper" |
||||
|
style="--w:80px;" |
||||
|
value-key="userName" |
||||
|
@change="emit('update:modelValue',$event.roomId);formData.roomId=''" |
||||
|
placeholder="请输入住户"> |
||||
|
<el-option class="user" v-for="(v,k) in personList" :key="k" :value="v" :label="v.userName"> |
||||
|
<span style="float:left;margin-right:20px;">{{v.userName}}</span> |
||||
|
<span class="over" style="float:right;max-width:210px;over">{{v.address}}</span> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
popper-class="date-popper" |
||||
|
type="daterange" |
||||
|
:clearable="false" |
||||
|
start-placeholder="开始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
v-model="date" |
||||
|
@change="emit('update:date',$event)"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import request from '@/config/request' |
||||
|
import { inject, onMounted, reactive, ref, shallowRef, watch } from "vue" |
||||
|
|
||||
|
var emit=defineEmits() |
||||
|
var msg=inject("msg") |
||||
|
|
||||
|
var demo=ref([]) |
||||
|
var formData=reactive({ |
||||
|
villageId:"", |
||||
|
buildId:"", |
||||
|
unitId:"", |
||||
|
floorId:"", |
||||
|
roomId:"", |
||||
|
userId:"", |
||||
|
}) |
||||
|
var date=ref([]) |
||||
|
var loading=ref(false) |
||||
|
|
||||
|
var villageList=shallowRef([]) |
||||
|
var buildList=shallowRef([]) |
||||
|
var unitList=shallowRef([]) |
||||
|
var floorList=shallowRef([]) |
||||
|
var roomList=shallowRef([]) |
||||
|
var personList=shallowRef([]) |
||||
|
|
||||
|
//小区 |
||||
|
async function getVillage(e){ |
||||
|
if(e){ |
||||
|
loading.value=true |
||||
|
var res=await request("/project",{ |
||||
|
method:"post", |
||||
|
params:{projectName:e}} |
||||
|
) |
||||
|
loading.value=false |
||||
|
if(res.statu){ |
||||
|
villageList.value=res.data |
||||
|
}else{ |
||||
|
msg.error(res.msg||"获取小区失败！") |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
//楼栋 |
||||
|
watch(()=>formData.villageId, async n=>{ |
||||
|
var res=await request("/build",{ |
||||
|
method:"post", |
||||
|
params:{ |
||||
|
projectId:n, |
||||
|
buildName:'', |
||||
|
} |
||||
|
}) |
||||
|
if(res.statu){ |
||||
|
buildList.value=res.data |
||||
|
}else{ |
||||
|
msg.error(res.msg||"获取小区楼栋失败！") |
||||
|
} |
||||
|
}) |
||||
|
//单元 |
||||
|
watch(()=>formData.buildId, async n=>{ |
||||
|
var res=await request("/unit",{ |
||||
|
method:"post", |
||||
|
params:{ |
||||
|
buildId:n, |
||||
|
unitName:"", |
||||
|
} |
||||
|
}) |
||||
|
if(res.statu){ |
||||
|
unitList.value=res.data |
||||
|
}else{ |
||||
|
msg.error(res.msg||"获取单元失败！") |
||||
|
} |
||||
|
}) |
||||
|
//楼层 |
||||
|
watch(()=>formData.unitId, async n=>{ |
||||
|
var res=await request("/floor",{ |
||||
|
method:"post", |
||||
|
params:{ |
||||
|
unitId:n, |
||||
|
floorName:"", |
||||
|
} |
||||
|
}) |
||||
|
if(res.statu){ |
||||
|
floorList.value=res.data |
||||
|
}else{ |
||||
|
msg.error(res.msg||"获取楼层失败！") |
||||
|
} |
||||
|
}) |
||||
|
//住户 |
||||
|
async function person(e){ |
||||
|
if(e){ |
||||
|
loading.value=true |
||||
|
var res=await request("/roomRelationPerson",{ |
||||
|
method:"post", |
||||
|
params:{userName:e} |
||||
|
}) |
||||
|
loading.value=false |
||||
|
if(res.statu){ |
||||
|
personList.value=res.data.map(v=>({ |
||||
|
...v, |
||||
|
id:`${v.userPhone}_${Math.random()}_${v.roomId}` |
||||
|
})) |
||||
|
}else{ |
||||
|
msg.error(res.msg||"获取住户失败！") |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
//房间 |
||||
|
watch(()=>formData.floorId, async n=>{ |
||||
|
formData.roomId='' |
||||
|
var res=await request("/room",{ |
||||
|
method:"post", |
||||
|
params:{ |
||||
|
floorId:n, |
||||
|
roomName:"", |
||||
|
} |
||||
|
}) |
||||
|
if(res.statu){ |
||||
|
roomList.value=res.data |
||||
|
}else{ |
||||
|
msg.error(res.msg||"获取房间失败！") |
||||
|
} |
||||
|
}) |
||||
|
onMounted(async ()=>{ |
||||
|
|
||||
|
}) |
||||
|
</script> |
||||
Loading…
Reference in new issue