jiangyy
4 years ago
7 changed files with 714 additions and 84 deletions
|
After Width: | Height: | Size: 193 B |
|
Before Width: | Height: | Size: 178 B After Width: | Height: | Size: 178 B |
@ -0,0 +1,168 @@ |
|||||
|
.div_search_list { |
||||
|
margin: 54px auto; |
||||
|
text-align: center; |
||||
|
width: 750px; |
||||
|
height: 53px; |
||||
|
background: #01106800; |
||||
|
border-radius: 8px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.icon { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: 29px; |
||||
|
margin-top: 16px; |
||||
|
|
||||
|
> img { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
text-align: center; |
||||
|
flex: 0 0 113px; |
||||
|
height: 53px; |
||||
|
background: #0082fb; |
||||
|
border-radius: 0px 8px 8px 0px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 53px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.list_box { |
||||
|
margin: 96px auto 0; |
||||
|
box-sizing: border-box; |
||||
|
// width: 70%; |
||||
|
width: 1021px; |
||||
|
|
||||
|
// height: calc(88vh - 200px); |
||||
|
height: 349px; |
||||
|
color: #fff; |
||||
|
background: url('../../../img/modules/visual/warning-box.png') no-repeat |
||||
|
center; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
.info_tip { |
||||
|
padding: 20px 0 0 19px; |
||||
|
display: flex; |
||||
|
|
||||
|
> img { |
||||
|
height: 34px; |
||||
|
width: 46px; |
||||
|
} |
||||
|
|
||||
|
.tip_title { |
||||
|
line-height: 34px; |
||||
|
margin-left: 7px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.warning-table { |
||||
|
margin: 21px 24px auto 24px; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
height: 100%; |
||||
|
|
||||
|
.table { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
&-header { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
background: rgba(8, 37, 134, 0.85); |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
&-body { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: calc(100% - 50px); |
||||
|
font-size: 18px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
&-tr { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
// height: calc(100% / 5); |
||||
|
// padding: 10px auto; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
|
||||
|
.btn_detail:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-tr:nth-child(2n) { |
||||
|
background: rgba(16, 75, 164, 0.24); |
||||
|
} |
||||
|
|
||||
|
&-tr:hover { |
||||
|
background: url('../../../img/modules/visual/hover-bac.png') no-repeat |
||||
|
center; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.td { |
||||
|
text-align: center; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
// width: calc(100% / 5); |
||||
|
} |
||||
|
.td1 { |
||||
|
width: calc(100% / 10); |
||||
|
} |
||||
|
.td2 { |
||||
|
width: calc(100% / 5); |
||||
|
} |
||||
|
.td3 { |
||||
|
width: calc(100% / 4); |
||||
|
} |
||||
|
.pagination { |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
|
background: #0266d1; |
||||
|
color: #000d3f; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .el-pager li { |
||||
|
background: #002e74; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .btn-prev { |
||||
|
background: #002e74; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .btn-next { |
||||
|
background: #002e74; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<div class="div_search_list"> |
||||
|
<el-input size="mini" |
||||
|
WarningColor='warning' |
||||
|
placeholder="请输入姓名" |
||||
|
v-model="searchName"> |
||||
|
<i slot="prefix" |
||||
|
class="icon"> |
||||
|
<img src="../../../../assets/img/modules/visual/sousuo.png" |
||||
|
alt /> |
||||
|
</i> |
||||
|
</el-input> |
||||
|
|
||||
|
<div class="btn" |
||||
|
@click="loadList">搜索</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="list_box"> |
||||
|
<div class="info_tip"> |
||||
|
<img src="../../../../assets/img/shuju/title-tip.png" |
||||
|
alt /> |
||||
|
<div class="tip_title">查询列表</div> |
||||
|
</div> |
||||
|
<div class="warning-table"> |
||||
|
<div class="table"> |
||||
|
<div class="table-header"> |
||||
|
<div class="td td1">序号</div> |
||||
|
<div class="td td2">姓名</div> |
||||
|
<div class="td td3">所属网格</div> |
||||
|
<div class="td td3">所属小区</div> |
||||
|
<div class="td td3">所属楼栋</div> |
||||
|
<div class="td td2">操作</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="table-body"> |
||||
|
<div class="table-body-tr" |
||||
|
v-for="(item,index) in tableData" |
||||
|
:key='index'> |
||||
|
<div class="td td1">{{item.sort}} </div> |
||||
|
<div class="td td2">{{item.name}} </div> |
||||
|
<div class="td td3">{{item.gridName}} </div> |
||||
|
<div class="td td3">{{item.neighborHoodName}} </div> |
||||
|
<div class="td td3">{{item.buildNum}} </div> |
||||
|
<div @click="handelToPeople(index)" |
||||
|
class="td td2 btn_detail">{{'查看'}} </div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination background |
||||
|
layout="prev, pager, next" |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@current-change="pageCurrentChangeHandle"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import People from "./people"; |
||||
|
|
||||
|
export default { |
||||
|
name: "people-list", |
||||
|
components: { |
||||
|
People |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
headerList: [], |
||||
|
tableData: [ |
||||
|
{ |
||||
|
sort: 1, |
||||
|
name: '杨明', |
||||
|
gridName: '市北区第二网格市北区第二网格市北区第二网格市北区第二网格', |
||||
|
neighborHoodName: '南宁路小区', |
||||
|
buildNum: '2号楼', |
||||
|
userId: '1', |
||||
|
}, |
||||
|
{ |
||||
|
sort: 2, |
||||
|
name: '杨明', |
||||
|
gridName: '市北区第二网格', |
||||
|
neighborHoodName: '南宁路小区', |
||||
|
buildNum: '2号楼', |
||||
|
userId: '1', |
||||
|
}, |
||||
|
{ |
||||
|
sort: 3, |
||||
|
name: '杨明', |
||||
|
gridName: '市北区第二网格', |
||||
|
neighborHoodName: '南宁路小区', |
||||
|
buildNum: '2号楼', |
||||
|
userId: '2', |
||||
|
}, |
||||
|
{ |
||||
|
sort: 4, |
||||
|
name: '杨明', |
||||
|
gridName: '市北区第二网格', |
||||
|
neighborHoodName: '南宁路小区', |
||||
|
buildNum: '2号楼', |
||||
|
userId: '3', |
||||
|
}, |
||||
|
], |
||||
|
searchName: '', |
||||
|
pageSize: 4, |
||||
|
pageNo: 1, |
||||
|
total: 0 |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSearch () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
loadByName (searchName) { |
||||
|
this.searchName = searchName |
||||
|
this.loadList() |
||||
|
}, |
||||
|
|
||||
|
async loadList () { |
||||
|
|
||||
|
// const url = "/epmetuser/icresiuser/searchbyname" |
||||
|
const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/searchbyname" |
||||
|
let params = { |
||||
|
name: this.searchName, |
||||
|
pageSize: this.pageSize, |
||||
|
pageNo: this.pageNo |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.total = data.total |
||||
|
this.tableData = data.list |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//点击查看 |
||||
|
handelToPeople (index) { |
||||
|
this.$emit('toSubAgency', 'people', this.tableData[index].userId, this.searchName) |
||||
|
}, |
||||
|
|
||||
|
pageCurrentChangeHandle (val) { |
||||
|
this.pageNo = val |
||||
|
this.loadList() |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/searchPerson.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
|
||||
|
<style lang=scss> |
||||
|
.div_search_list { |
||||
|
.el-input__inner[WarningColor="warning"] { |
||||
|
border-radius: 8px 0 0 8px; |
||||
|
height: 53px; |
||||
|
background-color: #01106800; |
||||
|
border: 2px solid #0082fb; |
||||
|
padding-left: 70px; |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue