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