35 changed files with 1332 additions and 128 deletions
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 249 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<div class='table_box'> |
|||
<p>人员列表 共：{{ total }}</p> |
|||
<div class="loading-container" v-show="preloadVisible && tableData.length === 0"> |
|||
<screen-loading>加载中，请稍后...</screen-loading> |
|||
</div> |
|||
<el-table :data="tableData" style="width: 100%" border v-show="!preloadVisible && tableData.length > 0"> |
|||
<el-table-column type="index" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="residentName" label="居住人姓名" width="180"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="houseHeadAddress" label="房屋地址" width=""> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-row type="flex" justify="center" style="margin-top: 10px;"> |
|||
<el-col :span="24" align="center"> |
|||
<el-pagination style="margin:0 auto;" layout="prev, pager, next" :total="total" @current-change="hadnelCurrenPage" |
|||
@next-click="hadnelCurrenPage" :current-page="page" :page-size="limit"> |
|||
</el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getCityFilterResi } from 'api/screen-content-center' |
|||
|
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
total: 0, |
|||
limit: 10, //每页显示条数\ |
|||
page: 1, //当前页码, |
|||
tableData: [], |
|||
preloadVisible: true, |
|||
}; |
|||
}, |
|||
props: { |
|||
searchValue: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getCityFilterResi() |
|||
}, |
|||
|
|||
//方法 |
|||
methods: { |
|||
hadnelCurrenPage(val) { |
|||
this.page = val |
|||
this.getCityFilterResi() |
|||
}, |
|||
getCityFilterResi() { |
|||
this.preloadVisible = true |
|||
this.tableData = [] |
|||
//请求参数 |
|||
let params = { |
|||
houseAddress: this.searchValue, |
|||
limit: this.limit, |
|||
page: this.page, |
|||
} |
|||
getCityFilterResi(params).then(res => { |
|||
console.log(res); |
|||
this.total = res.data.total |
|||
this.tableData = res.data.list |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}).finally(() => { |
|||
this.preloadVisible = false |
|||
}) |
|||
} |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
p { |
|||
position: relative; |
|||
padding-left: 10px; |
|||
margin-top: 0px; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
left: -5px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background: #0bb6f3; |
|||
top: 3px; |
|||
content: ''; |
|||
} |
|||
|
|||
} |
|||
|
|||
.loading-container { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<div class='main'> |
|||
<h3 style="text-align: center;">{{detailObj.companyName}}</h3> |
|||
<el-row type="flex" justify="" > |
|||
<el-col :span="24"> |
|||
<span class="label">{{typeName}}简介</span>：<span>{{detailObj.companyIntroduction}}</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify="" > |
|||
<el-col :span="24"> |
|||
<span class="label">{{typeName}}联系人</span>：{{detailObj.contactPerson}} |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify="" > |
|||
<el-col :span="24"> |
|||
<span class="label">{{typeName}}联系电话</span>：{{detailObj.mobile}} |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify="" > |
|||
<el-col :span="24"> |
|||
<span class="label">{{typeName}}地址</span>：{{detailObj.companyAddress}} |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify="" > |
|||
<el-col :span="24"> |
|||
<span class="label">{{typeName}}照片</span>： |
|||
<img v-for="item in imageUrl" style="width: 200px;" :src="item"/> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { customDetail} from 'api/screen-content-center' |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
detailObj: {}, |
|||
imageUrl:[] |
|||
}; |
|||
}, |
|||
props: { |
|||
companyId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
formType:{ |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.customDetail() |
|||
|
|||
}, |
|||
mounted(){ |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
customDetail() { |
|||
customDetail(this.companyId).then(res => { |
|||
this.imageUrl= [] |
|||
this.detailObj = res.data |
|||
this.imageUrl = res.data.images.map(item=>item.url) |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: { |
|||
typeName(){ |
|||
return this.formType == 'company'?'企业':this.formType == 'shops'?'商铺':'村居' |
|||
} |
|||
}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
p { |
|||
position: relative; |
|||
padding-left: 10px; |
|||
margin-top: 0px; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
left: -5px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background: #0bb6f3; |
|||
top: 3px; |
|||
content: ''; |
|||
} |
|||
|
|||
} |
|||
|
|||
.main { |
|||
width: 100%; |
|||
height: auto; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
// position: absolute; |
|||
// top: calc(50% - 512px / 2); |
|||
// left: calc(50% - 644px / 2); |
|||
z-index: 200; |
|||
} |
|||
|
|||
.label { |
|||
min-width: 65px; |
|||
color: #a4afc0; |
|||
} |
|||
|
|||
|
|||
.el-col { |
|||
display: flex; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div class='table_box'> |
|||
<p>{{type == 'villageLiving'?'村居':type == 'shops'?'商铺':'企业'}}列表 共：{{ total }}</p> |
|||
<div class="loading-container" v-show="preloadVisible && tableData.length === 0"> |
|||
<screen-loading>加载中，请稍后...</screen-loading> |
|||
</div> |
|||
<el-table :data="tableData" style="width: 100%" border v-show="!preloadVisible && tableData.length > 0"> |
|||
<el-table-column type="index" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="companyName" label="名称" width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="companyIntroduction" label="简介" width="" show-overflow-tooltip> |
|||
</el-table-column> |
|||
<el-table-column prop="contactPerson" label="联系人" width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="mobile" label="联系电话" width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="companyAddress" label="地址" width="100"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="80"> |
|||
<template slot-scope="scope"> |
|||
<span @click="handelClickLook(scope.row)" style="cursor: pointer;">查看</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<el-row type="flex" justify="center" style="margin-top: 10px;"> |
|||
<el-col :span="24" align="center"> |
|||
<el-pagination style="margin:0 auto;" layout="prev, pager, next" :total="total" @current-change="hadnelCurrenPage" |
|||
@next-click="hadnelCurrenPage" :current-page="page" :page-size="limit"> |
|||
</el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { screencompany } from 'api/screen-content-center' |
|||
|
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
total: 0, |
|||
limit: 10, //每页显示条数\ |
|||
page: 1, //当前页码, |
|||
tableData: [], |
|||
preloadVisible: true, |
|||
}; |
|||
}, |
|||
props: { |
|||
searchValue: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
type:{ |
|||
type:String, |
|||
default:'' |
|||
} |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.screencompany() |
|||
}, |
|||
|
|||
//方法 |
|||
methods: { |
|||
handelClickLook(item){ |
|||
this.$emit('handelClickCompanyLook',item.id) |
|||
}, |
|||
hadnelCurrenPage(val) { |
|||
this.page = val |
|||
this.screencompany() |
|||
}, |
|||
screencompany() { |
|||
this.preloadVisible = true |
|||
this.tableData = [] |
|||
//请求参数 |
|||
let params = { |
|||
companyName: this.searchValue, |
|||
houseType: this.type, |
|||
limit: this.limit, |
|||
page: this.page, |
|||
} |
|||
screencompany(params).then(res => { |
|||
this.total = res.data.total |
|||
this.tableData = res.data.list |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}).finally(() => { |
|||
this.preloadVisible = false |
|||
}) |
|||
} |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
p { |
|||
position: relative; |
|||
padding-left: 10px; |
|||
margin-top: 0px; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
left: -5px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background: #0bb6f3; |
|||
top: 3px; |
|||
content: ''; |
|||
} |
|||
|
|||
} |
|||
|
|||
.loading-container { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,361 @@ |
|||
<template> |
|||
<div class='main'> |
|||
<p>房屋信息</p> |
|||
<div> |
|||
<el-row type="flex"> |
|||
<el-col :span="24"> |
|||
<div class="label">房屋位置</div>： |
|||
<div class="value">{{ detailObj.houseAddress }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">面积</div>： |
|||
<div class="value">{{ detailObj.houseArea }}</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">用途</div>： |
|||
<div class="value">{{ detailObj.houseUse == '0' ? '自住' : detailObj.houseUse == '1' ? '租赁' : '经营' }} |
|||
</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">产权人</div>： |
|||
<div class="value">{{ detailObj.propertyOwner }}</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">产权人电话</div>： |
|||
<div class="value">{{ detailObj.propertyOwnerMobile }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<p>人员信息</p> |
|||
<div> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">户主姓名</div>： |
|||
<div class="value">{{ detailObj.residentsName }}</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">户主性别</div>： |
|||
<div class="value">{{ detailObj.residentsSex == '1' ? '男' : '女' }}</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">户主生日</div>： |
|||
<div class="value" v-if="detailObj.residentsBirthday">{{ detailObj.residentsBirthday.substr(0, 11) }} |
|||
</div> |
|||
|
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">户主电话</div>： |
|||
<div class="value">{{ detailObj.residentsPhone }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">家庭类别</div>： |
|||
<div class="value" v-if="detailObj.familyCategory">{{ familyCategory(detailObj.familyCategory) }}</div> |
|||
<div class="value" v-else>--</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">就业情况</div>： |
|||
<div class="value" v-if="detailObj.employmentStatus">{{ employmentStatus(detailObj.employmentStatus) }}</div> |
|||
<div class="value" v-else>--</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">文化程度</div>： |
|||
<div class="value" v-if="detailObj.educationLevel">{{ educationLevel(detailObj.educationLevel) }}</div> |
|||
<div class="value" v-else>--</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">政治面貌</div>： |
|||
<div class="value">{{ detailObj.maritalStatus ? detailObj.maritalStatus == '0' ? '群众' : '党员' : '--' }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex"> |
|||
<el-col :span="12"> |
|||
<div class="label">机动车数量</div>： |
|||
<div class="value">{{ detailObj.motorVehicleNum }}</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="label">宠物犬状况</div>： |
|||
<div class="value">{{ detailObj.dogStatus ? '有' : '无' }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<p>家庭成员</p> |
|||
<el-table :data="tableData" |
|||
style="width: 400px;max-height: 200px;overflow-y: scroll;"> |
|||
<el-table-column type="index" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="houseHeadRelation" |
|||
label="与户主关系" |
|||
width="80"> |
|||
<template slot-scope="scope"> |
|||
<span>{{houseHeadRelation(scope.row.houseHeadRelation)}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="residentsName" |
|||
label="姓名" |
|||
width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="currentAddress" |
|||
label="现居住地" |
|||
show-overflow-tooltip |
|||
width=""> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { housinginformation, getUserInfo ,houseresident} from 'api/screen-content-center' |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
tableData:[], |
|||
detailObj: {}, |
|||
educatiion: [ |
|||
{ |
|||
"dictName": "博士", |
|||
"dictValue": "0", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "硕士", |
|||
"dictValue": "1", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "本科", |
|||
"dictValue": "2", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "大专", |
|||
"dictValue": "3", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "中专或中技", |
|||
"dictValue": "4", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "技工学校", |
|||
"dictValue": "5", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "高中", |
|||
"dictValue": "6", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "初中", |
|||
"dictValue": "7", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "小学", |
|||
"dictValue": "8", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "文盲与半文盲", |
|||
"dictValue": "9", |
|||
"remark": "" |
|||
} |
|||
], |
|||
limit:10, |
|||
page:1, |
|||
familyCategoryList: [ |
|||
{ |
|||
"dictName": "普通家庭", |
|||
"dictValue": "0", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "军烈家庭", |
|||
"dictValue": "1", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "优抚家庭", |
|||
"dictValue": "2", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "困难家庭", |
|||
"dictValue": "3", |
|||
"remark": "" |
|||
} |
|||
], |
|||
employmentStatusList: [ |
|||
{ |
|||
"dictName": "在岗", |
|||
"dictValue": "0", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "失业", |
|||
"dictValue": "1", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "退休", |
|||
"dictValue": "2", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "无业", |
|||
"dictValue": "3", |
|||
"remark": "" |
|||
} |
|||
], |
|||
houseresidentList: [ |
|||
{ |
|||
"dictName": "子女", |
|||
"dictValue": "0", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "夫妻", |
|||
"dictValue": "1", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "父母", |
|||
"dictValue": "2", |
|||
"remark": "" |
|||
}, |
|||
{ |
|||
"dictName": "其他", |
|||
"dictValue": "3", |
|||
"remark": "" |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
props: { |
|||
houseId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.housinginformation() |
|||
this.getUserInfo() |
|||
this.houseresident() |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
educationLevel(val) { |
|||
let str = this.educatiion.filter(item => item.dictValue == val)[0].dictName |
|||
return str || '--' |
|||
}, |
|||
familyCategory(val) { |
|||
let str = this.familyCategoryList.filter(item => item.dictValue == val)[0].dictName |
|||
return str || '--' |
|||
}, |
|||
houseHeadRelation(val){ |
|||
let str = this.houseresidentList.filter(item => item.dictValue == val)[0].dictName |
|||
return str || '--' |
|||
}, |
|||
employmentStatus(val) { |
|||
let str = this.employmentStatusList.filter(item => item.dictValue == val)[0].dictName |
|||
return str || '--' |
|||
}, |
|||
housinginformation() { |
|||
housinginformation(this.houseId).then(res => { |
|||
console.log(res); |
|||
this.detailObj = {...this.detailObj ,...res.data } |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
getUserInfo() { |
|||
let params = { |
|||
id: this.houseId |
|||
} |
|||
getUserInfo(params).then(res => { |
|||
this.detailObj = { ...res.data, ...this.detailObj } |
|||
console.log(this.detailObj); |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
houseresident() { |
|||
let params = { |
|||
houseId: this.houseId, |
|||
limit: this.limit, |
|||
page: this.page, |
|||
} |
|||
houseresident(params).then(res => { |
|||
this.tableData = res.data.list |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: { |
|||
|
|||
}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
p { |
|||
position: relative; |
|||
padding-left: 10px; |
|||
margin-top: 0px; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
left: -5px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background: #0bb6f3; |
|||
top: 3px; |
|||
content: ''; |
|||
} |
|||
|
|||
} |
|||
|
|||
.main { |
|||
width: 410px; |
|||
height: auto; |
|||
padding: 15px; |
|||
// position: absolute; |
|||
// top: calc(50% - 512px / 2); |
|||
// left: calc(50% - 644px / 2); |
|||
z-index: 200; |
|||
} |
|||
|
|||
.label { |
|||
width: 70px; |
|||
color: #a4afc0; |
|||
} |
|||
|
|||
|
|||
.el-col { |
|||
display: flex; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,120 @@ |
|||
<template> |
|||
<div class='table_box'> |
|||
<p>人员列表 共：{{ total }}</p> |
|||
<div class="loading-container" v-show="preloadVisible && tableData.length === 0"> |
|||
<screen-loading>加载中，请稍后...</screen-loading> |
|||
</div> |
|||
<el-table :data="tableData" style="width: 100%" border v-show="!preloadVisible && tableData.length > 0"> |
|||
<el-table-column type="index" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="propertyOwner" label="户主姓名" width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="gridName" label="网格名称" width="180"> |
|||
</el-table-column> |
|||
<el-table-column prop="houseAddress" label="房屋地址" width=""> |
|||
</el-table-column> |
|||
<el-table-column prop="propertyOwnerMobile" label="户主电话" width="100"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="80"> |
|||
<template slot-scope="scope"> |
|||
<span @click="handelClickLook(scope.row)" style="cursor: pointer;">查看</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<el-row type="flex" justify="center" style="margin-top: 10px;"> |
|||
<el-col :span="24" align="center"> |
|||
<el-pagination style="margin:0 auto;" layout="prev, pager, next" :total="total" @current-change="hadnelCurrenPage" |
|||
@next-click="hadnelCurrenPage" :current-page="page" :page-size="limit"> |
|||
</el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { geHouseFilterResi } from 'api/screen-content-center' |
|||
|
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
total: 0, |
|||
limit: 10, //每页显示条数\ |
|||
page: 1, //当前页码, |
|||
tableData: [], |
|||
preloadVisible: true, |
|||
}; |
|||
}, |
|||
props: { |
|||
searchValue: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.geHouseFilterResi() |
|||
}, |
|||
|
|||
//方法 |
|||
methods: { |
|||
handelClickLook(item){ |
|||
this.$emit('handelClickLook',item.id) |
|||
}, |
|||
hadnelCurrenPage(val) { |
|||
this.page = val |
|||
this.geHouseFilterResi() |
|||
}, |
|||
geHouseFilterResi() { |
|||
this.preloadVisible = true |
|||
this.tableData = [] |
|||
//请求参数 |
|||
let params = { |
|||
houseAddress: this.searchValue, |
|||
limit: this.limit, |
|||
page: this.page, |
|||
} |
|||
geHouseFilterResi(params).then(res => { |
|||
console.log(res); |
|||
this.total = res.data.total |
|||
this.tableData = res.data.list |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}).finally(() => { |
|||
this.preloadVisible = false |
|||
}) |
|||
} |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
p { |
|||
position: relative; |
|||
padding-left: 10px; |
|||
margin-top: 0px; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
left: -5px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background: #0bb6f3; |
|||
top: 3px; |
|||
content: ''; |
|||
} |
|||
|
|||
} |
|||
|
|||
.loading-container { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<div class='table_box'> |
|||
<p>人员列表 共：{{ total }}</p> |
|||
<div class="loading-container" v-show="preloadVisible && tableData.length === 0"> |
|||
<screen-loading>加载中，请稍后...</screen-loading> |
|||
</div> |
|||
<el-table :data="tableData" style="width: 100%" border v-show="!preloadVisible && tableData.length > 0"> |
|||
<el-table-column type="index" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="residentsName" label="姓名" width="80"> |
|||
</el-table-column> |
|||
<el-table-column prop="gridNames" show-overflow-tooltip label="辖区范围" width=""> |
|||
</el-table-column> |
|||
<el-table-column prop="residentsNation" label="性别" width="50"> |
|||
</el-table-column> |
|||
<el-table-column prop="residentsPhone" label="联系电话" width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="residentsNation" label="民族" width="50"> |
|||
</el-table-column> |
|||
<el-table-column prop="householdRegistrationPlace" show-overflow-tooltip label="户籍地" width="180"> |
|||
</el-table-column> |
|||
<!-- <el-table-column label="操作" width="80"> |
|||
<template slot-scope="scope"> |
|||
<span @click="handelClickLook(scope.row)" style="cursor: pointer;">查看</span> |
|||
</template> |
|||
</el-table-column> --> |
|||
|
|||
</el-table> |
|||
<el-row type="flex" justify="center" style="margin-top: 10px;"> |
|||
<el-col :span="24" align="center"> |
|||
<el-pagination style="margin:0 auto;" layout="prev, pager, next" :current-page="page" :page-size="limit" :total="total" @current-change="hadnelCurrenPage" |
|||
@next-click="hadnelCurrenPage"> |
|||
</el-pagination> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { geFilterResi } from 'api/screen-content-center' |
|||
|
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
total: 0, |
|||
limit: 10, //每页显示条数\ |
|||
page: 1, //当前页码, |
|||
tableData: [], |
|||
preloadVisible: true, |
|||
}; |
|||
}, |
|||
props: { |
|||
searchValue: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.geFilterResi() |
|||
}, |
|||
|
|||
//方法 |
|||
methods: { |
|||
handelClickLook(item){ |
|||
}, |
|||
hadnelCurrenPage(val) { |
|||
this.page = val |
|||
this.geFilterResi() |
|||
}, |
|||
geFilterResi() { |
|||
this.preloadVisible = true |
|||
this.tableData = [] |
|||
//请求参数 |
|||
let params = { |
|||
residentsName: this.searchValue, |
|||
limit: this.limit, |
|||
page: this.page, |
|||
} |
|||
geFilterResi(params).then(res => { |
|||
console.log(res); |
|||
this.total = res.data.total |
|||
this.tableData = res.data.list |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}).finally(() => { |
|||
this.preloadVisible = false |
|||
}) |
|||
} |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
p { |
|||
position: relative; |
|||
padding-left: 10px; |
|||
margin-top: 0px; |
|||
|
|||
&::after { |
|||
position: absolute; |
|||
left: -5px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background: #0bb6f3; |
|||
top: 3px; |
|||
content: ''; |
|||
} |
|||
|
|||
} |
|||
|
|||
.loading-container { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue