jiangyy
3 years ago
2 changed files with 600 additions and 0 deletions
@ -0,0 +1,193 @@ |
|||||
|
<template> |
||||
|
<div class="epidemic-form"> |
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
|
||||
|
<!-- <div v-if="view_real_data" |
||||
|
class="div_tuomin"> |
||||
|
<el-button size="mini" |
||||
|
class="diy-button--search" |
||||
|
@click="handleTuomin">显示脱敏信息</el-button> |
||||
|
</div> --> |
||||
|
<div v-if="initLoading" |
||||
|
class="m-row"> |
||||
|
<div class="m-info"> |
||||
|
<div class="info-prop"> |
||||
|
<span class="info-title-2">姓名：</span> |
||||
|
<span>{{ formData.realName||'--' }}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span class="info-title-2">昵称：</span> |
||||
|
<span>{{ formData.nickname||'--' }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-prop"> |
||||
|
<span class="info-title-2">证件号：</span> |
||||
|
<span>{{ formData.idNum||'--' }}</span> |
||||
|
</div> |
||||
|
<div v-if="!isXiaozhaizi" |
||||
|
class="info-prop"> |
||||
|
<span class="info-title-2">路牌号：</span> |
||||
|
<span>{{ formData.street||'--' }}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span class="info-title-2">小区名称：</span> |
||||
|
<span>{{ formData.district||'--' }}</span> |
||||
|
</div> |
||||
|
<div class="info-prop"> |
||||
|
<span class="info-title-2">详细地址：</span> |
||||
|
<span>{{ formData.buildingAddress||'--' }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="info-prop" |
||||
|
v-if="formData.headImgUrl"> |
||||
|
<span class="info-title-2">头像：</span> |
||||
|
|
||||
|
<div class="info-pics"> |
||||
|
|
||||
|
<img style="width:80px;height:80px" |
||||
|
:src="formData.headImgUrl" |
||||
|
@click="watchImg(formData.headImgUrl)"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="div-btn"> |
||||
|
<el-button size="small" |
||||
|
@click="handleCancle">关 闭</el-button> |
||||
|
<!-- <el-button v-if="formType != 'detail'" |
||||
|
size="small" |
||||
|
type="primary" |
||||
|
:disabled="btnDisable" |
||||
|
@click="handleComfirm">确 定</el-button> --> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost } from '@/js/dai/request' |
||||
|
import { dateFormats } from '@/utils/index' |
||||
|
|
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
initLoading: false, |
||||
|
|
||||
|
|
||||
|
formData: {}, |
||||
|
|
||||
|
fileList: [], |
||||
|
|
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: {}, |
||||
|
async mounted () { |
||||
|
const { user } = this.$store.state |
||||
|
this.agencyId = user.agencyId |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
async handleTuomin () { |
||||
|
const url = "/data/aggregator/epmetuser/detailByType"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
id: this.icNatId, |
||||
|
type: "natRecord", |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$set(this.formData, 'showMobile', data.mobile) |
||||
|
this.$set(this.formData, 'showIdCard', data.idCard) |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async initForm (row) { |
||||
|
this.startLoading() |
||||
|
this.formData.agencyId = this.agencyId |
||||
|
|
||||
|
this.formData = JSON.parse(JSON.stringify(row)); |
||||
|
|
||||
|
|
||||
|
this.initLoading = true |
||||
|
this.endLoading() |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleCancle () { |
||||
|
// this.resetData() |
||||
|
this.$emit('dialogCancle') |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
watchImg (src) { |
||||
|
window.open(src); |
||||
|
}, |
||||
|
|
||||
|
resetData () { |
||||
|
|
||||
|
this.formData = {} |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
view_real_data: {//显示【显示脱敏信息】按钮 |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
isXiaozhaizi: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/management/detail-main.scss"; |
||||
|
|
||||
|
.div_tuomin { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 40px; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,407 @@ |
|||||
|
<template> |
||||
|
<div class="div_main"> |
||||
|
|
||||
|
<div class="div_search"> |
||||
|
<el-form :inline="true" |
||||
|
:model="formData" |
||||
|
ref="ref_searchform" |
||||
|
:label-width="'80px'"> |
||||
|
<div> |
||||
|
|
||||
|
<el-form-item label="所属组织" |
||||
|
prop="gridId"> |
||||
|
|
||||
|
<el-cascader class="customer_cascader" |
||||
|
size="small" |
||||
|
ref="myCascader" |
||||
|
v-model="agencyIdArray" |
||||
|
:options="orgOptions" |
||||
|
:props="orgOptionProps" |
||||
|
:show-all-levels="false" |
||||
|
@change="handleChangeAgency"></el-cascader> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="注册时间" |
||||
|
prop="regStartTime"> |
||||
|
<el-date-picker v-model="formData.regStartTime" |
||||
|
:picker-options="startPickerOptions" |
||||
|
class="item_width_2" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyyMMdd" |
||||
|
placeholder="开始时间"> |
||||
|
</el-date-picker> |
||||
|
<span class="data-tag">至</span> |
||||
|
<el-date-picker v-model="formData.regEndTime" |
||||
|
:picker-options="endPickerOptions" |
||||
|
class="item_width_2 data-tag" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyyMMdd" |
||||
|
placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="姓名" |
||||
|
prop="name"> |
||||
|
<el-input v-model="formData.name" |
||||
|
size="small" |
||||
|
class="item_width_2" |
||||
|
clearable |
||||
|
placeholder="请输入姓名"> |
||||
|
</el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-button style="margin-left:30px" |
||||
|
size="small" |
||||
|
class="diy-button--search" |
||||
|
@click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left:10px" |
||||
|
size="small" |
||||
|
class="diy-button--reset" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_table"> |
||||
|
|
||||
|
<el-table :data="tableData" |
||||
|
border |
||||
|
v-loading="tableLoading" |
||||
|
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
||||
|
class="table" |
||||
|
style="width: 100%" |
||||
|
:height="maxTableHeight"> |
||||
|
|
||||
|
<el-table-column label="序号" |
||||
|
fixed="left" |
||||
|
type="index" |
||||
|
align="center" |
||||
|
width="50" /> |
||||
|
|
||||
|
<el-table-column prop="realName" |
||||
|
min-width="100" |
||||
|
align="center" |
||||
|
label="姓名" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nickname" |
||||
|
min-width="100" |
||||
|
align="center" |
||||
|
label="昵称" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="imageList" |
||||
|
align="center" |
||||
|
width="80" |
||||
|
label="头像"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-image v-if="scope.row.headImgUrl" |
||||
|
style="width: 40px; height: 40px" |
||||
|
:src="scope.row.headImgUrl"> |
||||
|
</el-image> |
||||
|
<span v-else></span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="showIdNum" |
||||
|
label="证件号" |
||||
|
min-width="170" |
||||
|
align="center" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="street" |
||||
|
align="center" |
||||
|
min-width="170" |
||||
|
label="路牌号" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="district" |
||||
|
align="center" |
||||
|
min-width="170" |
||||
|
label="小区名称" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="buildingAddress" |
||||
|
align="center" |
||||
|
min-width="170" |
||||
|
label="详细地址" |
||||
|
:show-overflow-tooltip="true"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column fixed="right" |
||||
|
label="操作" |
||||
|
align="center" |
||||
|
width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-button @click="handleWatch(scope.row)" |
||||
|
type="text" |
||||
|
size="small">查看</el-button> |
||||
|
|
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div> |
||||
|
<el-pagination @size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="parseInt(pageSize)" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<!-- 修改弹出框 --> |
||||
|
<el-dialog :visible.sync="detailShow" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:title="'信息详情'" |
||||
|
width="650px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
@closed="detailFormCancle"> |
||||
|
<user-info-detail ref="ref_form_detail" |
||||
|
@dialogCancle="detailFormCancle"></user-info-detail> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import userInfoDetail from './userInfoDetail' |
||||
|
|
||||
|
import axios from "axios"; |
||||
|
|
||||
|
export default { |
||||
|
components: { userInfoDetail }, |
||||
|
|
||||
|
data () { |
||||
|
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() |
||||
|
if (this.formData.regStartTime) { |
||||
|
let regStartTime = new Date(this.formData.regStartTime) |
||||
|
return time.getTime() > nowData || time.getTime() < regStartTime || time.getTime() === regStartTime |
||||
|
} else { |
||||
|
return time.getTime() > nowData |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() |
||||
|
return time.getTime() > nowData |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
tableLoading: false, |
||||
|
|
||||
|
user: {}, |
||||
|
|
||||
|
agencyIdArray: [], |
||||
|
orgOptions: [], |
||||
|
orgOptionProps: { |
||||
|
multiple: false, |
||||
|
value: 'agencyId', |
||||
|
label: 'agencyName', |
||||
|
children: 'subAgencyList', |
||||
|
checkStrictly: true |
||||
|
}, |
||||
|
tableData: [], |
||||
|
|
||||
|
formData: { |
||||
|
agencyId: '',//组织id 不填查询所有 |
||||
|
gridId: '', |
||||
|
regStartTime: '',//开始时间 可不填 |
||||
|
regEndTime: '',//结束时间 可不填 |
||||
|
name: '' |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
pageNo: 1, |
||||
|
pageSize: window.localStorage.getItem("pageSize") || 20, |
||||
|
total: 1, |
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate |
||||
|
}, |
||||
|
startPickerOptions: { |
||||
|
disabledDate: startDisabledDate |
||||
|
}, |
||||
|
eventId: '', |
||||
|
|
||||
|
eventDetailData: {}, |
||||
|
detailShow: false, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
maxTableHeight () { |
||||
|
return this.$store.state.inIframe |
||||
|
? this.clientHeight - 320 + this.iframeHeigh |
||||
|
: this.clientHeight - 320; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "iframeHeight"]), |
||||
|
}, |
||||
|
watch: { |
||||
|
// "formData.regEndTime": function (val) { |
||||
|
// if (val && val != '') { |
||||
|
// let arrayTemp = val.split(' ') |
||||
|
// this.formData.regEndTime = arrayTemp[0] + ' 23:59:59' |
||||
|
// } |
||||
|
|
||||
|
// }, |
||||
|
}, |
||||
|
mounted () { |
||||
|
console.log(this.$store.state) |
||||
|
this.user = this.$store.state.user |
||||
|
|
||||
|
this.formData.agencyId = this.user.agencyId |
||||
|
|
||||
|
this.getOrgTreeList(); |
||||
|
this.getTableData(); |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
handleChangeAgency (val) { |
||||
|
let obj = this.$refs["myCascader"].getCheckedNodes()[0].data |
||||
|
if (obj) { |
||||
|
if (obj.level === 'grid') { |
||||
|
this.formData.gridId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''; |
||||
|
this.formData.agencyId = '' |
||||
|
} else { |
||||
|
this.formData.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''; |
||||
|
this.formData.gridId = '' |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
this.formData.agencyId = this.user.agencyId |
||||
|
this.formData.gridId = '' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleSearch (val) { |
||||
|
console.log(this.formData); |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
getOrgTreeList () { |
||||
|
const { user } = this.$store.state |
||||
|
this.$http |
||||
|
.post('/gov/org/customeragency/agencygridtree', {}) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
console.log('获取组织树成功', res.data) |
||||
|
this.orgOptions = [] |
||||
|
this.orgOptions.push(res.data) |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error('网络错误') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
async handleWatch (row) { |
||||
|
this.detailShow = true |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form_detail.initForm(row) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
replayOk () { |
||||
|
this.detailShow = false |
||||
|
this.getTableData() |
||||
|
|
||||
|
}, |
||||
|
detailFormCancle () { |
||||
|
|
||||
|
this.detailShow = false |
||||
|
}, |
||||
|
|
||||
|
async getTableData () { |
||||
|
this.tableLoading = true |
||||
|
const url = "/epmetuser/userbaseinfo/page-reguser"; |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/list"; |
||||
|
const { pageSize, pageNo, formData } = this; |
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
pageSize, |
||||
|
pageNo, |
||||
|
...formData, |
||||
|
}); |
||||
|
|
||||
|
this.tableLoading = false |
||||
|
if (code === 0) { |
||||
|
|
||||
|
this.total = data.total || 0; |
||||
|
this.tableData = data.list |
||||
|
|
||||
|
|
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
handleSizeChange (val) { |
||||
|
|
||||
|
this.pageSize = val; |
||||
|
window.localStorage.setItem("pageSize", val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange (val) { |
||||
|
|
||||
|
this.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
|
||||
|
resetSearch () { |
||||
|
this.agencyIdArray = [] |
||||
|
this.formData = { |
||||
|
agencyId: this.user.agencyId,//组织id 不填默认工作人员所属组织id |
||||
|
gridId: '', |
||||
|
regStartTime: '',//开始时间 可不填 |
||||
|
regEndTime: '',//结束时间 可不填 |
||||
|
name: '' |
||||
|
} |
||||
|
|
||||
|
|
||||
|
this.pageNo = 1 |
||||
|
this.getTableData(); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/buttonstyle.scss"; |
||||
|
@import "@/assets/scss/modules/management/list-main.scss"; |
||||
|
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
||||
|
.div_search { |
||||
|
.item_width_2 { |
||||
|
width: 200px; |
||||
|
} |
||||
|
} |
||||
|
.myNote { |
||||
|
display: -webkit-box; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
-webkit-line-clamp: 3; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue