dai
3 years ago
17 changed files with 2450 additions and 1058 deletions
@ -1,15 +1,55 @@ |
|||
.m-listbox-main{ |
|||
.g-pgi { |
|||
min-height: 100%; |
|||
box-sizing: border-box; |
|||
margin-left:16px; |
|||
|
|||
.g-listbox{ |
|||
|
|||
} |
|||
padding: 0 25px 50px; |
|||
} |
|||
|
|||
.m-title { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
|
|||
} |
|||
.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%); |
|||
} |
|||
|
|||
.second-select { |
|||
margin: 0 10px 0 10px; |
|||
|
|||
::v-deep .el-input { |
|||
width: 180px; |
|||
height: 36px; |
|||
.el-input__inner { |
|||
height: 100%; |
|||
padding: 0 10px; |
|||
color: #fff; |
|||
line-height: 36px; |
|||
background: #06186d; |
|||
border: 1px solid #1a64cc; |
|||
} |
|||
|
|||
.el-icon-arrow-up:before { |
|||
content: "\e78f"; |
|||
} |
|||
// .el-select__caret:before { |
|||
// content: '\E790' |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
|
|||
File diff suppressed because it is too large
@ -1,431 +1,424 @@ |
|||
<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}" |
|||
<div> |
|||
<div class="m-table"> |
|||
<table class="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="table-header"> |
|||
<th |
|||
class="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> |
|||
<tbody v-if="!loading" class="table-body"> |
|||
<tr |
|||
class="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' |
|||
" |
|||
fixed |
|||
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' |
|||
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); |
|||
}, |
|||
}, |
|||
name: "list", |
|||
components: { |
|||
ScreenLoading, |
|||
}, |
|||
props: { |
|||
//各列对齐方式、宽度等属性 |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
margin-top: 9px; |
|||
// width: 100%; |
|||
overflow: hidden; |
|||
min-height: 300px; |
|||
|
|||
.table { |
|||
box-sizing: border-box; |
|||
width: 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; |
|||
} |
|||
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,241 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
|
|||
<house-details |
|||
@close="displayedHouseId = ''" |
|||
:house-id="displayedHouseId" |
|||
v-if="displayedHouseId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import houseDetails from "@/views/dataBoard/cpts/house-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "house-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
houseDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "房屋列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "房屋列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
houseType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"所属小区", |
|||
"所属楼栋", |
|||
"单元号", |
|||
"门牌号", |
|||
"房屋类型", |
|||
"房屋用途", |
|||
"房屋状态", |
|||
"房主姓名", |
|||
"联系电话", |
|||
"证件号", |
|||
"操作", |
|||
], |
|||
|
|||
displayedHouseId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.houseType = getQueryPara("type"); |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedHouseId = item.house_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, houseType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "house_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
houseType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60068051, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.village ? item.village : "--", |
|||
item.building ? item.building : "--", |
|||
item.unit ? item.unit : "--", |
|||
item.door ? item.door : "--", |
|||
item.house_type ? item.house_type : "--", |
|||
item.house_usage ? item.house_usage : "--", |
|||
item.house_state ? item.house_state : "--", |
|||
item.holder_name ? item.holder_name : "--", |
|||
item.holder_phone ? item.holder_phone : "--", |
|||
item.holder_idcard ? item.holder_idcard : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
|
|||
<div class="second-select"> |
|||
<el-select |
|||
v-model="subclassId" |
|||
:popper-append-to-body="false" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in subclassList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
@click.native="handleChangeDate(item.value)" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民类别", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民类别", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", // 居民类别 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"手机", |
|||
"身份证", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
|
|||
subclassList: [], |
|||
subclassId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.type_id = getQueryPara("type_id"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.getList(); |
|||
this.breadList[1].meta.title = type_name; |
|||
|
|||
if (this.type_id == "6") { |
|||
this.getSubclass(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getSubclass() { |
|||
const { org_id, type_id } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.subclassList = data.map((item, index) => { |
|||
return { |
|||
label: item.label, |
|||
value: item.value, |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
resiType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"手机", |
|||
"身份证", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.resiType = getQueryPara("type"); |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, resiType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
resiType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,223 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div v-if="!displayedId"> |
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-list :building_id="displayedId" v-if="displayedId" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiList from "./resi"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "house-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiList, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
type: "building", |
|||
meta: { |
|||
title: "预警楼栋列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "预警楼栋列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", |
|||
type_name: "", |
|||
level: "", |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"所属网格", |
|||
"所属小区", |
|||
"楼号", |
|||
"预警人数", |
|||
"操作", |
|||
], |
|||
|
|||
displayedId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.level = getQueryPara("level"); |
|||
this.type_id = getQueryPara("type_id"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.breadList[1].meta.title = type_name + "预警楼栋"; |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} else if (item.type == "building") { |
|||
this.displayedId = ""; |
|||
|
|||
const { breadList } = this; |
|||
this.breadList = breadList.slice(0, 2); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedId = building_id; |
|||
|
|||
this.breadList.push({ |
|||
meta: { |
|||
title: "预警人员列表", |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, level, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = |
|||
level == "yellow" |
|||
? "resident_warn_building_y" |
|||
: "resident_warn_building_r"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60071540, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.grid ? item.grid : "--", |
|||
item.building ? item.building : "--", |
|||
item.unit ? item.unit : "--", |
|||
item.door ? item.door : "--", |
|||
|
|||
{ type: "operate", list: ["查看人员"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,199 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
props: { |
|||
building_id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
tableTitle: "预警人员列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", // 预警人员列表 |
|||
|
|||
loading: true, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"手机", |
|||
"身份证", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
|
|||
methods: { |
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
Loading…
Reference in new issue