dai
3 years ago
10 changed files with 2146 additions and 179 deletions
@ -0,0 +1,707 @@ |
|||||
|
@import "../../c/config"; |
||||
|
@import "../../c/function"; |
||||
|
// @import "./c/common"; |
||||
|
|
||||
|
|
||||
|
.m-pop { |
||||
|
@include shield; |
||||
|
background: rgba(0,0,0,0.65); |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.wrap { |
||||
|
position: relative; |
||||
|
margin: 120px auto; |
||||
|
background: #00023A; |
||||
|
box-shadow: inset 0px 0px 40px 0px rgba(26,149,255,0.45); |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid #1A95FF; |
||||
|
width: 820px; |
||||
|
padding:24px 16px 24px 16px; |
||||
|
|
||||
|
.g-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
// margin-left: 24px; |
||||
|
|
||||
|
.title_img { |
||||
|
width: 17px; |
||||
|
height: 17px; |
||||
|
} |
||||
|
.tip_title { |
||||
|
margin-left: 8px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFangSC-Medium, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
|
||||
|
.title_line { |
||||
|
margin-left: 8px; |
||||
|
width: 160px; |
||||
|
height: 1px; |
||||
|
background: linear-gradient( |
||||
|
270deg, |
||||
|
rgba(55, 198, 255, 0.1) 0%, |
||||
|
#1995ff 100% |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.g-close { |
||||
|
position: absolute; |
||||
|
top: 24px; |
||||
|
right: 19px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.g-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top:48px; |
||||
|
margin-left:63px; |
||||
|
|
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 8px; |
||||
|
width: 33%; |
||||
|
color: #fff; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 24px; |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
display: flex; |
||||
|
|
||||
|
|
||||
|
.item-field{ |
||||
|
color: rgba(255, 255, 255, 0.85); |
||||
|
flex:0 0 70px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.item1 { |
||||
|
width: 98%; |
||||
|
} |
||||
|
.item2 { |
||||
|
width: 49%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.g-btn{ |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.b-close{ |
||||
|
margin-top:13px; |
||||
|
// margin-right:16px; |
||||
|
text-align: center; |
||||
|
width: 60px; |
||||
|
height: 32px; |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26,149,255,0.45); |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #1A95FF; |
||||
|
line-height: 32px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
margin-top: 30px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-left: 20px; |
||||
|
|
||||
|
.tab-btn { |
||||
|
width: 30px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
@include toe; |
||||
|
margin: 0 5px; |
||||
|
min-width: 80px; |
||||
|
padding: 0 8px; |
||||
|
height: 36px; |
||||
|
background: rgba(255, 255, 255, 0); |
||||
|
border: 1px solid #1257c9; |
||||
|
box-shadow: 0 0 10px 0 inset #1257c9; |
||||
|
border-radius: 2px; |
||||
|
text-align: center; |
||||
|
font-size: 17px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 36px; |
||||
|
cursor: pointer; |
||||
|
transition: all ease 0.5s; |
||||
|
&.z-on { |
||||
|
background: linear-gradient(90deg, #1a5afd, #009cff); |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.g-cpt { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
margin-top: 5px; |
||||
|
|
||||
|
.g-l { |
||||
|
width: 850px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.g-r { |
||||
|
margin-left: 6px; |
||||
|
width: calc(100% - 850px - 6px); |
||||
|
min-width: 850px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-people { |
||||
|
position: relative; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 10px; |
||||
|
padding: 4px 2px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
span { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
// position: absolute; |
||||
|
margin-left: auto; |
||||
|
margin-top: -10px; |
||||
|
width: 90px; |
||||
|
height: 29px; |
||||
|
line-height: 29px; |
||||
|
background: linear-gradient(90deg, #1a5afd, #26c4ff); |
||||
|
border-radius: 15px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.ren { |
||||
|
position: relative; |
||||
|
margin-top: 0; |
||||
|
padding-bottom: 15px; |
||||
|
|
||||
|
.ren-name { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
top: -10px; |
||||
|
width: 400px; |
||||
|
margin: 0 auto; |
||||
|
font-size: 24px; |
||||
|
line-height: 40px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
> span { |
||||
|
@include toe; |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
> img { |
||||
|
display: block; |
||||
|
margin: 3px auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pic-ren { |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.ren-prop { |
||||
|
position: absolute; |
||||
|
width: 100px; |
||||
|
height: 120px; |
||||
|
|
||||
|
&.z-1 { |
||||
|
left: 170px; |
||||
|
top: 10px; |
||||
|
} |
||||
|
&.z-6 { |
||||
|
right: 170px; |
||||
|
top: 10px; |
||||
|
} |
||||
|
&.z-2 { |
||||
|
left: 55px; |
||||
|
top: 110px; |
||||
|
} |
||||
|
&.z-5 { |
||||
|
right: 55px; |
||||
|
top: 110px; |
||||
|
} |
||||
|
&.z-3 { |
||||
|
left: 115px; |
||||
|
top: 245px; |
||||
|
} |
||||
|
&.z-4 { |
||||
|
right: 115px; |
||||
|
top: 245px; |
||||
|
} |
||||
|
|
||||
|
> img { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
> span { |
||||
|
display: block; |
||||
|
font-size: 16px; |
||||
|
line-height: 30px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.ren-cnt { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ren-cnt { |
||||
|
position: absolute; |
||||
|
z-index: 10; |
||||
|
display: none; |
||||
|
box-sizing: border-box; |
||||
|
top: 60px; |
||||
|
left: 90px; |
||||
|
padding: 10px; |
||||
|
width: 162px; |
||||
|
min-height: 60px; |
||||
|
background: rgba(#b7c7e0, 0.24); |
||||
|
line-height: 20px; |
||||
|
|
||||
|
h5 { |
||||
|
margin: 0; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #fefefe; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin: 0; |
||||
|
margin-top: 4px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #fefefe; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.m-relation { |
||||
|
position: relative; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 10px; |
||||
|
padding: 4px 2px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
span { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
position: relative; |
||||
|
width: 410px; |
||||
|
height: 312px; |
||||
|
margin: 0 auto; |
||||
|
.huzhu { |
||||
|
position: relative; |
||||
|
|
||||
|
.huzhu-bg { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.huzhu-ico { |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
top: 90px; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.huzhu-name { |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
top: 170px; |
||||
|
width: 100%; |
||||
|
font-size: 24px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
line-height: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
> p { |
||||
|
position: absolute; |
||||
|
top: 200px; |
||||
|
font-size: 16px; |
||||
|
width: 100%; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.rel { |
||||
|
position: absolute; |
||||
|
width: 128px; |
||||
|
height: 38px; |
||||
|
|
||||
|
.rel-line { |
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.rel-bg { |
||||
|
height: 70px; |
||||
|
width: 128px; |
||||
|
} |
||||
|
|
||||
|
.rel-text { |
||||
|
@include toe; |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
padding: 7px 10px; |
||||
|
line-height: 24px; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.rel-name { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-zuo-2 { |
||||
|
top: 124px; |
||||
|
left: -33px - 128px; |
||||
|
.rel-line { |
||||
|
left: 127px; |
||||
|
top: -8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-you-2 { |
||||
|
top: 124px; |
||||
|
right: -33px - 128px; |
||||
|
.rel-line { |
||||
|
right: 127px; |
||||
|
top: -8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-zuo-1 { |
||||
|
top: 25px; |
||||
|
left: -33px - 128px; |
||||
|
.rel-line { |
||||
|
top: 17px; |
||||
|
left: 131px; |
||||
|
} |
||||
|
} |
||||
|
&.z-you-1 { |
||||
|
top: 25px; |
||||
|
right: -33px - 128px; |
||||
|
.rel-line { |
||||
|
top: 17px; |
||||
|
right: 131px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-zuo-3 { |
||||
|
bottom: 45px; |
||||
|
left: -33px - 128px; |
||||
|
.rel-line { |
||||
|
left: 131px; |
||||
|
bottom: -15px; |
||||
|
} |
||||
|
} |
||||
|
&.z-you-3 { |
||||
|
bottom: 45px; |
||||
|
right: -33px - 128px; |
||||
|
.rel-line { |
||||
|
right: 131px; |
||||
|
bottom: -15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-tb { |
||||
|
.title { |
||||
|
margin-bottom: 10px; |
||||
|
padding: 4px 2px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
span { |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
.tb { |
||||
|
height: 300px; |
||||
|
overflow-y: auto; |
||||
|
@include scrollBar; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-detail-main { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
.m-list { |
||||
|
width: calc(50% - 3px); |
||||
|
|
||||
|
&.z-only { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
margin-bottom: 10px; |
||||
|
padding: 4px 2px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
color: #ffffff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
span { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
display: block; |
||||
|
color: rgba(#fff, 0.5); |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 800; |
||||
|
margin-right: 10px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&.z-on { |
||||
|
color: #fff; |
||||
|
cursor: default; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: rgba(#fff, 0.5); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.list-wrap { |
||||
|
height: 480px; |
||||
|
overflow-y: auto; |
||||
|
@include scrollBar; |
||||
|
|
||||
|
.list { |
||||
|
.item { |
||||
|
position: relative; |
||||
|
background-color: #104ba4; |
||||
|
padding: 10px 20px; |
||||
|
margin-bottom: 4px; |
||||
|
cursor: pointer; |
||||
|
transition: all ease 0.1s; |
||||
|
|
||||
|
.item-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.item-l { |
||||
|
width: 25%; |
||||
|
} |
||||
|
.item-r { |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
width: 6px; |
||||
|
background: linear-gradient(270deg, #0336ff, #01b4ff); |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
display: block; |
||||
|
left: 15px; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto 0; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-width: 10px; |
||||
|
border-style: solid; |
||||
|
border-color: transparent transparent transparent #20edff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-point { |
||||
|
text-align: center; |
||||
|
padding-left: 10%; |
||||
|
height: 16px; |
||||
|
font-size: 22px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
padding: 10px 0; |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
|
||||
|
.item-date { |
||||
|
padding: 10px 0; |
||||
|
border-top: 1px dashed #8398d9; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
opacity: 0.67; |
||||
|
} |
||||
|
&:hover { |
||||
|
box-shadow: 0 0 30px 5px inset #22f; |
||||
|
background-color: darken(#104ba4, 12); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-hint { |
||||
|
position: relative; |
||||
|
height: 300px; |
||||
|
|
||||
|
// 暂无数据 |
||||
|
img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
export default [ |
||||
|
{ |
||||
|
key: 'index', |
||||
|
title: '序号', |
||||
|
display: ['table'], |
||||
|
fixed: false, |
||||
|
block: true, |
||||
|
width: 120 |
||||
|
}, |
||||
|
{ |
||||
|
key: 'neighborHoodName', |
||||
|
title: '所属小区', |
||||
|
display: ['table'], |
||||
|
fixed: false, |
||||
|
block: true, |
||||
|
width: 100 |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
{ |
||||
|
key: 'buildingName', |
||||
|
title: '所属楼宇', |
||||
|
display: [ 'table'], |
||||
|
block: true, |
||||
|
width: 60 |
||||
|
}, |
||||
|
|
||||
|
] |
||||
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<div class="div_people_search"> |
||||
|
|
||||
|
<div class="list_box"> |
||||
|
<div class="info_tip"> |
||||
|
<img src="@/assets/img/shuju/title-tip.png" |
||||
|
alt /> |
||||
|
<div class="tip_title">{{tableTitle}}</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 td2">所属楼栋</div> |
||||
|
<div class="td td1">单元号</div> |
||||
|
<div class="td td1">门牌号</div> |
||||
|
<div class="td td1">房屋类型</div> |
||||
|
<div class="td td1">房屋用途</div> |
||||
|
<div class="td td1">房屋状态</div> |
||||
|
<div class="td td1">房主姓名</div> |
||||
|
<div class="td td2">房主电话</div> |
||||
|
<div class="td td2">证件号</div> |
||||
|
<div class="td td1">操作</div> |
||||
|
|
||||
|
</div> |
||||
|
<div v-if="!loading && tableData.length> 0" |
||||
|
class="table-body"> |
||||
|
<div class="table-body-tr" |
||||
|
v-for="(item,index) in tableData" |
||||
|
:key='index'> |
||||
|
<div class="td td1">{{index+1}} </div> |
||||
|
<div class="td td2">{{item.neighborHoodName}} </div> |
||||
|
<div class="td td2">{{item.buildingName}} </div> |
||||
|
<div class="td td1">{{item.unitNum}} </div> |
||||
|
<!-- <div class="td td1">{{item.buildNum}} </div> --> |
||||
|
<div class="td td1">{{item.doorName}} </div> |
||||
|
<div class="td td1">{{item.houseType==='1'?'楼房':item.houseType==='2'?'平方':'别墅'}} </div> |
||||
|
<div class="td td1">{{item.purpose}} </div> |
||||
|
<div class="td td1">{{item.rentFlag}} </div> |
||||
|
<div class="td td1">{{item.ownerName}} </div> |
||||
|
<div class="td td2">{{item.ownerPhone}} </div> |
||||
|
<div class="td td2">{{item.ownerIdCard}} </div> |
||||
|
<div @click="handleToHouse(item)" |
||||
|
class="td td1 btn_detail">{{'查看'}} </div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-status" |
||||
|
v-if="loading"> |
||||
|
<screen-loading>加载中</screen-loading> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-status" |
||||
|
v-if="tableData.length == 0 && !loading"> |
||||
|
<div class="no-data"> |
||||
|
<img src="@/assets/img/modules/visual/noData.png" |
||||
|
class="no-data-img" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination hide-on-single-page |
||||
|
background |
||||
|
layout="prev, pager, next, total" |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
:total="total" |
||||
|
@current-change="pageCurrentChangeHandle"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<house-more v-show="showedMoreInfo" |
||||
|
:info="info" |
||||
|
@close="showedMoreInfo = false" /> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
import ScreenLoading from "@/views/modules/visual/cpts/loading"; |
||||
|
import houseMore from "./houseMore"; |
||||
|
|
||||
|
export default { |
||||
|
name: "people-list", |
||||
|
components: { |
||||
|
ScreenLoading, houseMore |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
showedMoreInfo: false, |
||||
|
tableTitle: '房屋列表', |
||||
|
loading: false, |
||||
|
|
||||
|
tableData: [], |
||||
|
|
||||
|
pageSize: 10, |
||||
|
pageNo: 1, |
||||
|
total: 0, |
||||
|
info: {} |
||||
|
}; |
||||
|
}, |
||||
|
mounted () { |
||||
|
|
||||
|
this.tableData = [] |
||||
|
|
||||
|
this.loadList() |
||||
|
|
||||
|
}, |
||||
|
deactivated () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async loadList () { |
||||
|
this.loading = true |
||||
|
const url = "/gov/org/house/housestatislistdetail" |
||||
|
let params = { |
||||
|
orgId: this.orgId, |
||||
|
orgType: this.orgType, |
||||
|
rentType: this.rentType, |
||||
|
pageSize: this.pageSize, |
||||
|
pageNo: this.pageNo |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
this.loading = false |
||||
|
if (code === 0) { |
||||
|
this.total = data.total |
||||
|
this.tableData = data.list |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//点击查看 |
||||
|
handleToHouse (item) { |
||||
|
|
||||
|
// this.toSubAgency('people', this.tableData[index].userId) |
||||
|
this.info = { ...item } |
||||
|
this.showedMoreInfo = true |
||||
|
}, |
||||
|
|
||||
|
pageCurrentChangeHandle (val) { |
||||
|
this.pageNo = val |
||||
|
this.loadList() |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
destroyed () { |
||||
|
console.log("我已经离开了！"); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
props: { |
||||
|
orgId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
orgType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
rentType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/basicInfoMain.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/searchPerson.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
.list_box { |
||||
|
width: 100%; |
||||
|
height: 780px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
.warning-table { |
||||
|
height: 640px; |
||||
|
} |
||||
|
.pagination { |
||||
|
padding-right: 0; |
||||
|
margin-top: 0; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.g-bread { |
||||
|
padding: 10px 10px 15px; |
||||
|
::v-deep .el-breadcrumb__item { |
||||
|
font-size: 16px; |
||||
|
.el-breadcrumb__inner { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-breadcrumb__item:first-child { |
||||
|
.el-breadcrumb__inner { |
||||
|
color: #a0c3d9; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,431 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-if="showTitle" |
||||
|
class="m-title"> |
||||
|
<img class="title_img" |
||||
|
src="@/assets/images/index/list-logo.png" |
||||
|
alt /> |
||||
|
<div class="tip_title">{{titleName}}</div> |
||||
|
<div class="title_line"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-table"> |
||||
|
<table class="g-table" |
||||
|
border="0" |
||||
|
cellspacing="0" |
||||
|
cellpadding="0"> |
||||
|
|
||||
|
<col :align="item.align" |
||||
|
:width="item.width" |
||||
|
:key="'col' + index" |
||||
|
v-for="(item, index) in colList" /> |
||||
|
|
||||
|
<thead> |
||||
|
<tr class="g-table-header"> |
||||
|
<th class="g-table-header-th" |
||||
|
v-for="item in header" |
||||
|
:key="item"> |
||||
|
{{ item }} |
||||
|
</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<el-scrollbar :style="{height:treeHeight}" |
||||
|
class="g-scrollar"> |
||||
|
<tbody v-if="!loading" |
||||
|
class="g-table-body"> |
||||
|
<tr class="g-table-body-tr" |
||||
|
v-for="(value, index) in list" |
||||
|
:key="index" |
||||
|
@click="handleClickRow(index)"> |
||||
|
<td class="td" |
||||
|
v-for="(item, indexs) in value" |
||||
|
:key="indexs"> |
||||
|
<div v-if="typeof item === 'string' || typeof item === 'number'" |
||||
|
:title="item"> |
||||
|
{{ item }} |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="typeof item === 'object' && item.type === 'img'"> |
||||
|
<!-- <span>{{ item.type+ item.src}}</span> --> |
||||
|
<img style="width: 18px; height: 18px" |
||||
|
:src="item.src" |
||||
|
alt="" /> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="typeof item === 'object' && item && item.type == 'index'"> |
||||
|
<img v-if="highlightTop3 && index == 0" |
||||
|
src="@/assets/img/shuju/top/1.png" |
||||
|
alt="" /> |
||||
|
<img v-else-if="highlightTop3 && index == 1" |
||||
|
src="@/assets/img/shuju/top/2.png" |
||||
|
alt="" /> |
||||
|
<img v-else-if="highlightTop3 && index == 2" |
||||
|
src="@/assets/img/shuju/top/3.png" |
||||
|
alt="" /> |
||||
|
<span v-else>{{ index + 1 }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<a v-else-if=" |
||||
|
typeof item === 'object' && item && item.type == 'operate' |
||||
|
" |
||||
|
v-for="btn in item.list" |
||||
|
:key="'operate' + index + btn" |
||||
|
@click.stop="handleClickBtn(index, btn)">{{ btn }}</a> |
||||
|
<a v-else-if=" |
||||
|
typeof item === 'object' && item && item.type == 'people' |
||||
|
" |
||||
|
@click="handleClickPeople(item)">{{ item.name }}</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</el-scrollbar> |
||||
|
</table> |
||||
|
|
||||
|
<div class="table-status" |
||||
|
v-if="loading"> |
||||
|
<screen-loading>加载中</screen-loading> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-status" |
||||
|
v-if="list.length == 0 && !loading"> |
||||
|
<div class="no-data"> |
||||
|
<img src="@/assets/img/modules/visual/noData.png" |
||||
|
class="no-data-img" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-pagination"> |
||||
|
<el-pagination :current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
background |
||||
|
:total="total" |
||||
|
layout="total"> |
||||
|
</el-pagination> |
||||
|
<el-pagination :current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
background |
||||
|
:total="total" |
||||
|
layout="prev, pager, next, jumper, sizes" |
||||
|
@current-change="handlePageNoChange" |
||||
|
@size-change="handleSizeChange"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ScreenLoading from "./loading"; |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: "table", |
||||
|
components: { |
||||
|
ScreenLoading, |
||||
|
}, |
||||
|
props: { |
||||
|
//是否显示标题，默认为true |
||||
|
showTitle: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
//列表标题名称 |
||||
|
titleName: { |
||||
|
type: String, |
||||
|
default: "列表" |
||||
|
}, |
||||
|
//各列对齐方式、宽度等属性 |
||||
|
colList: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
// { |
||||
|
// align: "center", |
||||
|
// width: "50%", |
||||
|
// }, |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
//表头 |
||||
|
header: { |
||||
|
type: Array, |
||||
|
required: false, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
//每行数据 |
||||
|
list: { |
||||
|
type: Array, |
||||
|
required: false, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
//数据总数 |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
loading: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
highlightTop3: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
|
||||
|
pageSize: 10, |
||||
|
pageNo: 1, |
||||
|
}; |
||||
|
}, |
||||
|
watch: {}, |
||||
|
computed: { |
||||
|
|
||||
|
|
||||
|
treeHeight () { |
||||
|
return this.$store.state.inIframe ? this.clientHeight - 300 + this.iframeHeight + 'px' : this.clientHeight - 300 + 'px' |
||||
|
|
||||
|
}, |
||||
|
treeWidth () { |
||||
|
return document.documentElement.clientWidth |
||||
|
}, |
||||
|
|
||||
|
...mapGetters(['clientHeight', 'iframeHeight']) |
||||
|
}, |
||||
|
mounted () { }, |
||||
|
|
||||
|
created () { }, |
||||
|
|
||||
|
methods: { |
||||
|
//点击某一行 |
||||
|
handleClickRow (index) { |
||||
|
this.$emit("handleClickRow", index); |
||||
|
}, |
||||
|
handleClickBtn (index, type) { |
||||
|
this.$emit("operate", index, type); |
||||
|
}, |
||||
|
handleClickPeople (item) { |
||||
|
this.$router.push({ |
||||
|
path: `/main-shuju/visual-basicinfo-people/${item.uid}`, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
handlePageNoChange (val) { |
||||
|
this.$emit("handlePageNoChange", val); |
||||
|
}, |
||||
|
handleSizeChange (val) { |
||||
|
this.$emit("handleSizeChange", val); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.m-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
// margin-left: 24px; |
||||
|
|
||||
|
.title_img { |
||||
|
width: 17px; |
||||
|
height: 17px; |
||||
|
} |
||||
|
.tip_title { |
||||
|
margin-left: 8px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFangSC-Medium, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
line-height: 22px; |
||||
|
} |
||||
|
|
||||
|
.title_line { |
||||
|
margin-left: 8px; |
||||
|
width: 244px; |
||||
|
height: 1px; |
||||
|
background: linear-gradient( |
||||
|
270deg, |
||||
|
rgba(55, 198, 255, 0.1) 0%, |
||||
|
#1995ff 100% |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
.m-table { |
||||
|
margin-top: 9px; |
||||
|
width: 100%; |
||||
|
.g-table { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: none; |
||||
|
table-layout: fixed; |
||||
|
|
||||
|
&-header { |
||||
|
width: 100%; |
||||
|
height: 56px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 0.65); |
||||
|
line-height: 20px; |
||||
|
|
||||
|
&-th { |
||||
|
text-align: left; |
||||
|
border: none; |
||||
|
padding: 18px 5px 18px 24px; |
||||
|
// width: calc(100% / 5); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-body { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 20px; |
||||
|
|
||||
|
&-tr { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
min-height: 56px; |
||||
|
|
||||
|
.td { |
||||
|
box-sizing: border-box; |
||||
|
text-align: left; |
||||
|
border: none; |
||||
|
padding: 18px 5px 18px 24px; |
||||
|
|
||||
|
> div { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
word-wrap: normal; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #1a95ff; |
||||
|
line-height: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-tr:nth-child(2n-1) { |
||||
|
background: rgba(26, 149, 255, 0.15); |
||||
|
} |
||||
|
|
||||
|
// &-tr:hover { |
||||
|
// background: url("../../../../assets/img/modules/visual/hover-bac.png") |
||||
|
// no-repeat center; |
||||
|
// background-size: 100% 100%; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-scrollbar__wrap { |
||||
|
width: 100% !important; |
||||
|
overflow-x: hidden !important; |
||||
|
} |
||||
|
} |
||||
|
.g-scrollar { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.table-status { |
||||
|
position: relative; |
||||
|
height: 300px; |
||||
|
|
||||
|
// 暂无数据 |
||||
|
.no-data { |
||||
|
&-img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-pagination { |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 24px; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
|
||||
|
color: #ffffff; |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26, 149, 255, 0.45); |
||||
|
background: #1a95ff; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .el-pager li { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 0.65); |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26, 149, 255, 0.45); |
||||
|
background: #00023a; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .btn-prev { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 0.65); |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26, 149, 255, 0.45); |
||||
|
background: #00023a; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .btn-next { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 0.65); |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26, 149, 255, 0.45); |
||||
|
background: #00023a; |
||||
|
} |
||||
|
/deep/ .el-pagination__editor.el-input .el-input__inner { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 0.65); |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26, 149, 255, 0.45); |
||||
|
background: #00023a; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-pagination .el-select .el-input .el-input__inner { |
||||
|
margin-left: 14px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 0.65); |
||||
|
border-radius: 2px; |
||||
|
border: 1px solid rgba(26, 149, 255, 0.45); |
||||
|
background: #00023a; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,453 @@ |
|||||
|
<template> |
||||
|
<div class="table"> |
||||
|
<el-table id="out-table" |
||||
|
ref="table" |
||||
|
class="tableLimit" |
||||
|
:height="table.height" |
||||
|
:data="tableData" |
||||
|
:style="{width: '100%'}" |
||||
|
border |
||||
|
v-loading="loading" |
||||
|
element-loading-text="正在加载中" |
||||
|
element-loading-spinner="el-icon-loading" |
||||
|
element-loading-background="rgba(255, 255， 255, 0.8)" |
||||
|
@select="handleSelect" |
||||
|
@select-all="handleSelectAll" |
||||
|
@cell-click="handleCellClick" |
||||
|
@row-click="handleRowClick"> |
||||
|
<!--设置index索引--> |
||||
|
<div v-if="columnType==='index'"> |
||||
|
<el-table-column label="序号" |
||||
|
:type="columnType" |
||||
|
width="50"></el-table-column> |
||||
|
</div> |
||||
|
<!--设置checkbox--> |
||||
|
<div v-if="columnType==='selection'"> |
||||
|
<el-table-column :type="columnType"></el-table-column> |
||||
|
</div> |
||||
|
<div v-if="columnType==='radio'"> |
||||
|
<el-table-column label="" |
||||
|
width="35" |
||||
|
center> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-radio :label="scope.row.id" |
||||
|
v-model="templateRadio" |
||||
|
@change.native="getRadioRow(scope.$index,scope.row)"> </el-radio> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
</div> |
||||
|
<template v-for="col in tableColumn"> |
||||
|
<!--渲染列--> |
||||
|
<el-table-column v-if="col.tableType==='span'" |
||||
|
:key="col.key" |
||||
|
:label="col.title" |
||||
|
:min-width="col.width" |
||||
|
:fixed="col.isFrozen" |
||||
|
show-overflow-tooltip |
||||
|
:align="columnAlign" |
||||
|
:header-align="headerAlign"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-html="col.render(scope.row[col.key])"></span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!--图片列--> |
||||
|
<el-table-column v-if="col.tableType==='image'" |
||||
|
:key="col.key" |
||||
|
:label="col.title" |
||||
|
:min-width="col.width" |
||||
|
:fixed="col.isFrozen" |
||||
|
show-overflow-tooltip |
||||
|
:align="'center'" |
||||
|
:header-align="headerAlign" |
||||
|
:formatter="col.formatter"> |
||||
|
<template slot-scope="scope"> |
||||
|
<img v-if="scope.row[col.key]" |
||||
|
:src="scope.row[col.key]" |
||||
|
:style="{width: col.imgWidth?col.imgWidth:'50px',height:col.imgHeight?col.imgHeight:'50px'}" |
||||
|
class="function-icon" |
||||
|
:fit=" col.fill?col.fill:'fill'"> |
||||
|
<span v-else>--</span> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!--普通列--> |
||||
|
<el-table-column v-if="!col.tableType||col.tableType===''" |
||||
|
:key="col.key" |
||||
|
:label="col.title" |
||||
|
:min-width="col.width" |
||||
|
:fixed="col.isFrozen" |
||||
|
:align="columnAlign" |
||||
|
:header-align="headerAlign" |
||||
|
:formatter="col.formatter"></el-table-column> |
||||
|
</template> |
||||
|
<!--操作列--> |
||||
|
<el-table-column v-if="operations.length && operations.length > 0" |
||||
|
label="操作" |
||||
|
fixed="right" |
||||
|
:min-width="operationWidth" |
||||
|
header-align="center" |
||||
|
:align="buttonAlign" |
||||
|
class="operate"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!--传入的操作按钮属性 --> |
||||
|
<el-button v-for="item in operations" |
||||
|
:key="item.lable" |
||||
|
:type="item.type" |
||||
|
:size="item.size" |
||||
|
:class="item.class" |
||||
|
@click.stop="handleMethod(scope.$index, scope.row,item.methodName)">{{item.lable}}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div v-if="false" |
||||
|
class="pagination-diy"> |
||||
|
<div class="pagination-left"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
<div class="pagination-left"> |
||||
|
<el-pagination @size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
@prev-click="handlePrevClick" |
||||
|
@next-click="handleNextClick" |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
layout="jumper, prev, pager, next,sizes, total" |
||||
|
:total="total"></el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
export default { |
||||
|
components: {}, |
||||
|
data () { |
||||
|
return { |
||||
|
tableData: [], |
||||
|
pageSize: 10, |
||||
|
|
||||
|
tableColumn: window.app.service.getColumns(this.keyword, 'table'), |
||||
|
loading: false, |
||||
|
table: { |
||||
|
height: this.tableHeight, |
||||
|
params: { |
||||
|
pageSize: Number, // 当前页数显示记录数 |
||||
|
pageNo: this.pageNo // 当前页数 |
||||
|
} |
||||
|
}, |
||||
|
total: 0, |
||||
|
selected: false, |
||||
|
visiblePopover: false, // 删除弹出层开关 |
||||
|
templateRadio: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
tableHeight (height) { |
||||
|
this.table.height = height |
||||
|
}, |
||||
|
}, |
||||
|
props: { |
||||
|
keyword: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
columnType: { |
||||
|
type: String |
||||
|
}, |
||||
|
columnAlign: { |
||||
|
type: String, |
||||
|
default: 'left' |
||||
|
}, |
||||
|
headerAlign: { |
||||
|
type: String, |
||||
|
default: 'center' |
||||
|
}, |
||||
|
url: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
params: { |
||||
|
type: Object, |
||||
|
default () { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
operations: { |
||||
|
type: Array, |
||||
|
default () { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
pageNo: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
|
||||
|
tableHeight: { |
||||
|
type: Number |
||||
|
}, |
||||
|
pageVisible: { // 是否显示page分页 lyx 20190411 |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
operationWidth: { |
||||
|
type: Number, |
||||
|
default: 120 |
||||
|
}, |
||||
|
filterParams: { |
||||
|
type: Array, |
||||
|
default () { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//操作列对齐模式 |
||||
|
buttonAlign: { |
||||
|
type: String, |
||||
|
default: "center" |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
headerCellStyle ({ row, column, rowIndex, columnIndex }) { |
||||
|
if (rowIndex === 0) return 'backgroundColor:red;color:#fff;' |
||||
|
}, |
||||
|
render () { |
||||
|
this.loadData() |
||||
|
}, |
||||
|
loadData () { |
||||
|
// eslint-disable-next-line |
||||
|
this.loading = true |
||||
|
Object.keys(this.params).forEach(key => { |
||||
|
if (this.params[key] instanceof Array) { |
||||
|
this.params[key] = this.params[key].join(',') |
||||
|
} |
||||
|
}) |
||||
|
Object.assign(this.table.params, this.params) |
||||
|
|
||||
|
// 获取数据 |
||||
|
window.app.ajax.post( |
||||
|
this.url, |
||||
|
this.table.params, |
||||
|
(data, rspMsg) => { |
||||
|
|
||||
|
if (data) { |
||||
|
this.total = data.total |
||||
|
this.tableData = data.list |
||||
|
|
||||
|
// if (this.filterParams.length > 0) { |
||||
|
|
||||
|
// this.filterParams.forEach(paramItem => { |
||||
|
// const key = paramItem.key |
||||
|
// const value = paramItem.value |
||||
|
// this.tableData = this.tableData.filter(item => { |
||||
|
// item[key].indexOf(value) > 0 |
||||
|
// }) |
||||
|
// }) |
||||
|
|
||||
|
// } |
||||
|
|
||||
|
} |
||||
|
|
||||
|
this.loading = false |
||||
|
|
||||
|
}, |
||||
|
(rspMsg, data) => { |
||||
|
this.$message.error(rspMsg) |
||||
|
this.loading = false |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
handleClearSelection () { |
||||
|
// 清空选择 |
||||
|
this.$refs['table'].clearSelection() |
||||
|
}, |
||||
|
// 选中复选框 |
||||
|
handleSelect (selection, row) { |
||||
|
this.$emit('select', selection) |
||||
|
// console.log(selection, row) |
||||
|
}, |
||||
|
// 全选复选框 |
||||
|
handleSelectAll (selection) { |
||||
|
this.$emit('selectAll', selection) |
||||
|
}, |
||||
|
handleCellClick (row, column, cell, event) { }, |
||||
|
handleRowClick (row) { |
||||
|
// 切换该列的勾选状态 |
||||
|
this.selected = !this.selected |
||||
|
this.$refs['table'].toggleRowSelection(row, this.selected) |
||||
|
}, |
||||
|
|
||||
|
handleEdit (index, row) { |
||||
|
// 因为操作列与数据列属于同一行，编辑某一列后会继续触发table的row-click事件，所以在按钮上添加stop修饰符阻止事件的继续传播 |
||||
|
this.handleClearSelection() |
||||
|
this.$refs['table'].toggleRowSelection(row) |
||||
|
this.$emit('update', row) |
||||
|
}, |
||||
|
handleAnalyze (index, row) { |
||||
|
this.handleClearSelection() // 清空选择 |
||||
|
this.$refs['table'].toggleRowSelection(row, true) |
||||
|
this.$emit('analyze', row) |
||||
|
}, |
||||
|
handleDelete (index, row) { |
||||
|
this.handleClearSelection() // 删除选择 |
||||
|
this.$refs['table'].toggleRowSelection(row, true) |
||||
|
this.$emit('delete', row) |
||||
|
}, |
||||
|
handleDeleteCancel (scope) { |
||||
|
// 关闭popover弹出层 |
||||
|
scope._self.$refs[`popover-${scope.$index}`].doClose() |
||||
|
}, |
||||
|
handleSizeChange (pageSize) { |
||||
|
|
||||
|
this.table.params.pageSize = pageSize |
||||
|
|
||||
|
this.table.params.pageNo = 1 |
||||
|
this.$nextTick(() => { |
||||
|
this.loadData() |
||||
|
}) |
||||
|
}, |
||||
|
// 改变当前页 |
||||
|
handleCurrentChange (pageNo) { |
||||
|
this.table.params.pageNo = pageNo |
||||
|
this.$nextTick(() => { |
||||
|
this.loadData() |
||||
|
}) |
||||
|
}, |
||||
|
// 点击上一页 |
||||
|
handlePrevClick (pageNo) { |
||||
|
}, |
||||
|
// 点击下一页 |
||||
|
handleNextClick (pageNo) { |
||||
|
}, |
||||
|
|
||||
|
// 单选选中 |
||||
|
getRadioRow (index, row) { // 获取选中数据 |
||||
|
this.$emit('selectRadioRow', row) |
||||
|
}, |
||||
|
// 导出表格 |
||||
|
handleOutTable (name) { |
||||
|
// app.util.exportExcel(name, '#out-table') |
||||
|
}, |
||||
|
// exportExcel (tHeader, filterVal) { |
||||
|
// require.ensure([], () => { |
||||
|
// const { export_json_to_excel } = require('@js/excel/Export2Excel') |
||||
|
|
||||
|
// const list = this.tableData |
||||
|
// const data = this.formatJson(filterVal, list) |
||||
|
// export_json_to_excel(tHeader, data, '列表excel') |
||||
|
// }) |
||||
|
// }, |
||||
|
formatJson (filterVal, jsonData) { |
||||
|
return jsonData.map(v => filterVal.map(j => v[j])) |
||||
|
}, |
||||
|
// 操作列点击实现方法 lyx 20190411 |
||||
|
handleMethod (index, row, methodName) { |
||||
|
this.handleClearSelection() |
||||
|
this.$refs['table'].toggleRowSelection(row, true) |
||||
|
this.$emit(methodName, row) |
||||
|
}, |
||||
|
// 解决表格错位 |
||||
|
doLayout () { |
||||
|
this.$refs['table'].doLayout() |
||||
|
}, |
||||
|
getTableData () { |
||||
|
return this.tableData |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.table { |
||||
|
::v-deep .el-form-item { |
||||
|
margin: 0 5px !important; |
||||
|
// padding: 20px; |
||||
|
// background-color: ; |
||||
|
} |
||||
|
::v-deep .el-table, |
||||
|
.el-table__expanded-cell { |
||||
|
padding: 20px !important; |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
::v-deep .el-table th { |
||||
|
background-color: transparent !important; |
||||
|
border-bottom: 1px solid #5078fc !important; |
||||
|
color: #fefefe !important; |
||||
|
} |
||||
|
::v-deep .el-table tr { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
::v-deep .el-table--enable-row-transition .el-table__body td, |
||||
|
::v-deep .el-table .cell { |
||||
|
background-color: transparent !important; |
||||
|
color: rgba(255, 255, 255, 0.7) !important; |
||||
|
border: none !important; |
||||
|
padding-left: 0 !important; |
||||
|
padding-right: 0 !important; |
||||
|
} |
||||
|
::v-deep .el-table th > .cell { |
||||
|
color: rgba(254, 254, 254, 1) !important; |
||||
|
font-weight: 700 !important; |
||||
|
} |
||||
|
.el-table::before { |
||||
|
//去除底部白线 |
||||
|
left: 0 !important; |
||||
|
bottom: 0 !important; |
||||
|
width: 100% !important; |
||||
|
height: 0px !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-form-item__label { |
||||
|
color: white !important; |
||||
|
} |
||||
|
/deep/ .el-table__row > td { |
||||
|
border: none; |
||||
|
} |
||||
|
/* 去掉上面的线 */ |
||||
|
/deep/ .el-table th.is-leaf { |
||||
|
border: none; |
||||
|
} |
||||
|
/* 去掉最下面的那一条线 */ |
||||
|
/deep/ .el-table::before { |
||||
|
height: 0px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-table td { |
||||
|
padding: 6px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.page { |
||||
|
padding: 0 6px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.operate { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.tableLimit tr td .cell { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; /*可以显示的行数，超出部分用...表示 */ |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
.el-table .cell { |
||||
|
white-space: pre-line; /*保留换行符*/ |
||||
|
} |
||||
|
.pagination-diy { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue