<!-- -->
|
<template>
|
<div class="table-box-w">
|
<div class="list-box">
|
<el-table :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
|
element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText" :data="dataList.records"
|
style="width: 100%" @cell-click="cellClick">
|
|
<el-table-column align="center" prop="placeName" label="场所名称"> </el-table-column>
|
<el-table-column align="center" prop="principal" label="场所负责人"> </el-table-column>
|
<el-table-column align="center" prop="principalPhone" label="手机号码"> </el-table-column>
|
<!-- <el-table-column align="center" prop="createTime" label="身份证号码"> </el-table-column> -->
|
<el-table-column align="center" prop="noFraudType" label="无诈分类">
|
<template slot-scope="scope">
|
{{ getNoFraudType(scope.row.noFraudType) }}
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="addressName" show-overflow-tooltip label="地址"> </el-table-column>
|
</el-table>
|
|
<div class="pages">
|
<el-pagination background layout="prev, pager, next" :page-size="100" :total="dataList.total"
|
:current-page="currentPage4" @current-change="handleCurrentChange"></el-pagination>
|
</div>
|
</div>
|
|
<!-- 详情页面 -->
|
<el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false" :append-to-body="true"
|
:visible.sync="detailBox">
|
<div class="detail-box">
|
<div class="detail-title-box">
|
<div class="detail-title">无诈申报详情</div>
|
<div class="close" @click="detailBox = false" title="关闭"></div>
|
</div>
|
|
<div class="detail-content-box">
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">场所名称</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.placeName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">场所负责人</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.principal }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">手机号码</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.principalPhone }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">街道</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="">{{ row.streetName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">社区</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="">{{ row.communityName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">网格</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="">{{ row.gridName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">派出所</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="">{{ row.pcsName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">经纬度</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ row.lng }},{{ row.lat }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">无诈分类</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="detail-row">{{ getNoFraudType(row.noFraudType) }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">地址</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="">{{ row.addressName }}</div>
|
</el-col>
|
</el-row>
|
|
<el-row class="">
|
<el-col :span="6">
|
<div class="detail-row">场所照片</div>
|
</el-col>
|
<el-col :span="18">
|
<div class="mini-code">
|
<el-image fit="contain" style="height: 100px;width: 100px;" :src="row.qrImg"
|
:preview-src-list="[row.qrImg]">
|
<div slot="error" class="image-slot"></div>
|
</el-image>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import {
|
getTaskNoFraudReporting,
|
getTaskNoFraudReportingInfo
|
} from "@/api/dept/newIndex.js"
|
export default {
|
name: 'tableFromPop',
|
|
props: {
|
hushiPeoTy: {
|
type: String,
|
default: ''
|
},
|
residentIdSave: {
|
type: String,
|
default: ''
|
},
|
residentDetailsType: {
|
type: Number,
|
default: 1
|
},
|
},
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
row: {},
|
detailBox: false,
|
residentLoading: false,
|
residentNoDataText: '暂无数据',
|
dataList: {
|
total: 1,
|
records: []
|
},
|
// 无诈分类
|
noFraudTypeList: [
|
{ label: '企业', value: 2 },
|
{ label: '工地', value: 3 },
|
{ label: '学校', value: 4 },
|
{ label: '医院', value: 5 },
|
{ label: '村（社区）', value: 6 },
|
{ label: '厂（园区）', value: 7 },
|
{ label: '单位', value: 8 }
|
|
],
|
pageparm: {
|
pageSize: 10,
|
current: 1
|
}
|
|
}
|
},
|
//监听属性 类似于data概念
|
computed: {
|
},
|
//监控data中的数据变化
|
watch: {},
|
//方法集合
|
methods: {
|
// 获取无诈数据
|
getNoFraudType (val) {
|
let type = ''
|
this.noFraudTypeList.forEach(item => {
|
if (item.value == val) {
|
type = item.label
|
}
|
})
|
return type
|
},
|
|
handleSizeChange (val) {
|
console.log(`每页 ${val} 条`)
|
this.pageparm.pageSize = val
|
this.init()
|
},
|
handleCurrentChange (val) {
|
console.log(`当前页: ${val}`)
|
this.pageparm.current = val
|
this.init()
|
|
},
|
init () {
|
this.residentLoading = true
|
getTaskNoFraudReporting(this.residentDetailsType, this.residentIdSave, this.pageparm.pageSize, this.pageparm.current).then((res) => {
|
this.dataList.total = res.data.data.total
|
this.dataList.records = res.data.data.records
|
this.residentLoading = false
|
}).catch((err) => {
|
this.residentLoading = false
|
})
|
},
|
cellClick (row, column, cell, event) {
|
row.employerImg = this.getImgUrls(row.employerImg)
|
this.row = row
|
this.detailBox = !this.detailBox
|
console.log('cellClick', row, column, cell, event)
|
},
|
// // 图片转换
|
getImgUrls (imageUrls) {
|
if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
|
imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
|
return 'http://10.141.11.11/jczzMedia/' + ele
|
// return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
|
})
|
}
|
return imageUrls || []
|
},
|
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created () {
|
console.log('tableFromPop mounted', this.hushiPeoTy)
|
},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted () {
|
console.log('tableFromPop mounted', this.hushiPeoTy)
|
this.init()
|
|
},
|
beforeCreate () { }, //生命周期 - 创建之前
|
beforeMount () { }, //生命周期 - 挂载之前
|
beforeUpdate () { }, //生命周期 - 更新之前
|
updated () { }, //生命周期 - 更新之后
|
beforeDestroy () { }, //生命周期 - 销毁之前
|
destroyed () { }, //生命周期 - 销毁完成
|
activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
|
|
<style scoped lang="scss">
|
.table-box-w {
|
|
// position: relative;
|
// background-color: rgba(228, 17, 17, 0.5);
|
.btn-box-box {
|
display: flex;
|
|
.btn-box {
|
margin: 2px 5px;
|
}
|
}
|
}
|
</style>
|
