397 lines
9.1 KiB
Vue
397 lines
9.1 KiB
Vue
<template>
|
|
<div class="AppMonitoringObject">
|
|
<div v-if="isAdmin">
|
|
<AiTopFixed>
|
|
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bar-width="150" @change="change"></u-tabs>
|
|
<div class="search-obj">
|
|
<div class="selectBox" @click="showType = true">
|
|
<span v-if="!status">全部类型</span>
|
|
<span v-else>{{ $dict.getLabel('fpPrtpStatus', status) }}</span>
|
|
<u-icon name="arrow-down"></u-icon>
|
|
</div>
|
|
<u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名/身份证号" :show-action="false" bg-color="#F5F5F5"
|
|
search-icon-color="#E2E8F1" color="#666" height="58" @search="handerSearch" @clear="handerClear">
|
|
</u-search>
|
|
</div>
|
|
</AiTopFixed>
|
|
<div class="list-data" v-if="list.length > 0">
|
|
<div class="item" v-for="(item, iindex) in list" :key="iindex" @click="toDetail(item)">
|
|
<div class="left">
|
|
<img :src="item.photo" alt="" v-if="item.photo"/>
|
|
<img src="./components/img/user-img.png" alt="" v-else/>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right-top">
|
|
<span class="name">{{ item.name }}</span>
|
|
<span class="status" :class="`status${item.status}`">{{ $dict.getLabel('fpPrtpStatus', item.status) }}</span>
|
|
</div>
|
|
<div class="right-bottom">
|
|
<p>{{ item.idNumber || '' }}</p>
|
|
<p>{{ item.countyName + item.townName + item.villageName }}{{ item.currentAddress || '' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiEmpty class="emptyWrap" v-else></AiEmpty>
|
|
|
|
<u-select v-model="showType" :list="typelist" label-name="dictName" value-name="dictValue"
|
|
@confirm="confirmTypeSelect"/>
|
|
|
|
<AiFixedBtn v-if="checkType == 1 && currentTabs==0">
|
|
<div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd" v-if="$permissions('app_apppreventionreturntopoverty_edit')"></div>
|
|
</AiFixedBtn>
|
|
</div>
|
|
<div v-else class="empty">
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/h5/no-admin.png" alt="">
|
|
<p>没有网格员权限<br/>无法查看监测信息哦~</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex";
|
|
|
|
export default {
|
|
name: 'AppMonitoringObject',
|
|
appName: '监测对象',
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
list: [],
|
|
current: 1,
|
|
total: 0,
|
|
tabList: [
|
|
{
|
|
name: '监测对象',
|
|
},
|
|
{
|
|
name: '脱贫人口',
|
|
},
|
|
],
|
|
currentTabs: 0,
|
|
areaId: '',
|
|
areaName: '',
|
|
showType: false,
|
|
typelist: [],
|
|
status: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
checkType: v => v.user.girdCheckType,
|
|
isAdmin: v => v.user.girdCheckType > 0
|
|
},
|
|
onShow() {
|
|
document.title = '监测对象'
|
|
this.areaId = this.user.areaId
|
|
this.areaName = this.user.areaName
|
|
this.$dict.load('fpPrtpStatus').then(() => {
|
|
this.isAdmin && this.getList()
|
|
this.typelist = this.$dict.getDict('fpPrtpStatus').filter((e) => e.dictValue != 5)
|
|
this.typelist.unshift({dictName: '全部类型', dictValue: ''})
|
|
})
|
|
|
|
uni.$on('reload', () => {
|
|
this.getListInit()
|
|
})
|
|
},
|
|
methods: {
|
|
confirmTypeSelect(val) {
|
|
this.status = val?.[0].value
|
|
this.$nextTick(() => {
|
|
this.current = 1,
|
|
this.list = []
|
|
this.getList()
|
|
})
|
|
},
|
|
|
|
getListInit() {
|
|
this.current = 1
|
|
this.list = []
|
|
this.getList()
|
|
},
|
|
|
|
getList() {
|
|
// if (this.list.length >= this.total && this.total > 0) return
|
|
this.$http.post('/app/appgirdmemberpoverty/listByGirdMember', null, {
|
|
params: {
|
|
current: this.current,
|
|
status: this.status,
|
|
provertyStatus: this.currentTabs,
|
|
name: this.keyword,
|
|
},
|
|
}).then((res) => {
|
|
if (res?.data) {
|
|
res.data.records.map((item) => {
|
|
if (item.idNumber) {
|
|
item.idNumber = item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2')
|
|
}
|
|
})
|
|
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
|
|
this.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
change(index) {
|
|
this.currentTabs = index
|
|
if (this.currentTabs == 1) {
|
|
this.typelist = this.$dict.getDict('fpPrtpStatus')
|
|
this.typelist.unshift({dictName: '全部类型', dictValue: ''})
|
|
} else if (this.currentTabs == 0) {
|
|
this.typelist = this.$dict.getDict('fpPrtpStatus').filter((e) => e.dictValue != 5)
|
|
this.typelist.unshift({dictName: '全部类型', dictValue: ''})
|
|
}
|
|
this.status = ''
|
|
this.getListInit()
|
|
|
|
},
|
|
|
|
toDetail(item) {
|
|
uni.navigateTo({url: `./Detail?id=${item.id}`})
|
|
},
|
|
|
|
seachObj(e) {
|
|
this.areaId = e
|
|
this.getListInit()
|
|
},
|
|
|
|
handerSearch(e) {
|
|
this.keyword = e
|
|
this.getListInit()
|
|
},
|
|
|
|
handerClear() {
|
|
this.keyword = ''
|
|
this.getListInit()
|
|
},
|
|
toAdd() {
|
|
uni.navigateTo({url: './Add'})
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
this.current++
|
|
this.getList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppMonitoringObject {
|
|
height: 100%;
|
|
|
|
.area {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0 32px;
|
|
height: 112px;
|
|
color: #333333;
|
|
font-size: 30px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
|
|
.separat {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
i {
|
|
color: #3F8DF5;
|
|
font-size: 30px;
|
|
font-style: normal;
|
|
}
|
|
|
|
span {
|
|
color: #333333;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
height: 16px;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.search-obj {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid #f5f5f5;
|
|
border-top: 2px solid #f5f5f5;
|
|
padding: 20px 32px;
|
|
background: #fff;
|
|
|
|
.selectBox {
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-form {
|
|
width: 100%;
|
|
|
|
.areaIds {
|
|
.u-form-item__body {
|
|
.u-form-item--right {
|
|
.u-form-item--right__content {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.u-form-item--right__content__slot {
|
|
.AiAreaPicker {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.areaSelector {
|
|
.location {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-form-item--right__content__icon {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-data {
|
|
background: #fff;
|
|
|
|
.item {
|
|
display: flex;
|
|
padding: 24px 0 0 32px;
|
|
box-sizing: border-box;
|
|
|
|
.left {
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 32px;
|
|
width: 100%;
|
|
border-bottom: 2px solid #E4E5E6;
|
|
padding-right: 32px;
|
|
|
|
.right-top {
|
|
font-size: 36px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 44px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
|
|
.status {
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.status0 {
|
|
color: #F82;
|
|
}
|
|
|
|
.status1 {
|
|
color: #3975C6;
|
|
}
|
|
|
|
.status2, .status4 {
|
|
color: #F46;
|
|
}
|
|
|
|
.status3 {
|
|
color: #2EA222;
|
|
}
|
|
}
|
|
|
|
.right-bottom {
|
|
p {
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
line-height: 36px;
|
|
word-break: break-all;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
p:nth-of-type(1) {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.emptyWrap {
|
|
margin: 0;
|
|
}
|
|
|
|
::v-deep .AiTopFixed .content {
|
|
padding: 0;
|
|
}
|
|
|
|
::v-deep .u-tab-bar {
|
|
bottom: -6px !important;
|
|
}
|
|
|
|
.addBtn {
|
|
width: 96px;
|
|
height: 96px;
|
|
flex-shrink: 0;
|
|
background: $uni-color-primary;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
font-size: 48px;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
|
|
img {
|
|
width: 282px;
|
|
height: 306px;
|
|
margin: 136px auto 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.add-btn {
|
|
width: 400px;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
text-align: center;
|
|
border-radius: 8px;
|
|
background-color: #3267f0;
|
|
color: #fff;
|
|
font-size: 30px;
|
|
margin: 200px auto 0;
|
|
}
|
|
}
|
|
|
|
::v-deep .u-search {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
</style>
|