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