29 changed files with 1338 additions and 464 deletions
@ -0,0 +1,106 @@ |
|||
.g-main{ |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
height:auto; |
|||
padding: 24px 16px 0; |
|||
.left{ |
|||
min-width: 184px; |
|||
margin-right: 16px; |
|||
background: #ffffff; |
|||
.user{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 120px; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 16px; |
|||
width: 152px; |
|||
height: 1px; |
|||
background: #EBEDF0; |
|||
} |
|||
img{ |
|||
width: 50px; |
|||
height: 56px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
} |
|||
.menu{ |
|||
.progress{ |
|||
padding: 0 16px; |
|||
box-sizing: border-box; |
|||
.text{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin:9px 0px 11px 0px; |
|||
font-size: 12px; |
|||
>:nth-child(2){ |
|||
color: #0056D6; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
.list{ |
|||
margin-top:14px ; |
|||
.item{ |
|||
margin-bottom: 8px; |
|||
height: 38px; |
|||
color: #333333; |
|||
padding-left: 16px; |
|||
cursor: pointer; |
|||
line-height: 38px; |
|||
} |
|||
.active{ |
|||
background: #F7FAFF; |
|||
color: #0056D6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
flex: 1; |
|||
height: 100%; |
|||
background: #ffffff; |
|||
position: relative; |
|||
.editBtn{ |
|||
position: absolute; |
|||
right: 16px; |
|||
top: 16px; |
|||
} |
|||
.title-small{ |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
position: relative; |
|||
padding-left: 11px; |
|||
margin-left: 0px; |
|||
margin-top: 22px; |
|||
} |
|||
.f-label { |
|||
width: 100px; |
|||
text-align: right; |
|||
} |
|||
.f-flex{ |
|||
align-items: center; |
|||
} |
|||
.f-m-top23{ |
|||
margin-top: 23px; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .el-button--text{ |
|||
padding: 0; |
|||
} |
|||
::v-deep .el-row{ |
|||
padding-left: 37px; |
|||
} |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<div> |
|||
<h3>新增居民</h3> |
|||
<div class="form"> |
|||
<el-form :model="form" label-width="100px"> |
|||
<h5>选择居住房屋</h5> |
|||
<div class="house"> |
|||
</div> |
|||
<h5>基础信息登记</h5> |
|||
<div class="resiInfo"> |
|||
</div> |
|||
<h5>拓展信息登记</h5> |
|||
<div class="expand"> |
|||
</div> |
|||
<h5>人员标签</h5> |
|||
<div class="label"> |
|||
</div> |
|||
</el-form> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
form: {}, |
|||
result:{ |
|||
|
|||
} |
|||
}; |
|||
}, |
|||
created() { }, |
|||
methods: {}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
//我想做一个关系图谱的功能,要求我可以自定义节点图片包括线条样式 |
|||
h3 { |
|||
background-color: #f2f2f2; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
padding-left: 16px; |
|||
margin-bottom: 0; |
|||
} |
|||
.form{ |
|||
padding:0 16px 16px; |
|||
} |
|||
h5 { |
|||
padding-left: 16px; |
|||
position: relative; |
|||
&::after{ |
|||
content: ""; |
|||
position: absolute; |
|||
display: inline-block; |
|||
left: 4px; |
|||
top: 0px; |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color:#0056d6 ; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>保障房</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>老年人</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>党员</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>公益岗</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>特扶人员</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>统战人员</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>退役军人</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<div class=''>志愿者</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
components:{}, |
|||
computed:{}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
|
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
|
|||
<template> |
|||
<div> |
|||
<div style="height:300px; width: 500px;"> |
|||
<RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" |
|||
:on-line-click="onLineClick" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RelationGraphDemo3', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
graphOptions: { |
|||
disableDragNode: true, |
|||
defaultNodeBorderWidth: 0, |
|||
defaultNodeColor: 'rgba(238, 178, 94, 0)', |
|||
allowSwitchLineShape: true, |
|||
allowSwitchJunctionPoint: true, |
|||
defaultLineShape: 1, |
|||
allowShowMiniToolBar: false, |
|||
layouts: [ |
|||
{ |
|||
label: '中心', |
|||
layoutName: 'center', |
|||
layoutClassName: 'seeks-layout-center' |
|||
} |
|||
], |
|||
defaultJunctionPoint: 'border', |
|||
// 这里可以参考"Graph 图谱"中的参数进行设置 |
|||
} |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.showSeeksGraph(); |
|||
}) |
|||
}, |
|||
methods: { |
|||
showSeeksGraph() { |
|||
const __graph_json_data = { 'rootId': 'N13', 'nodes': [ |
|||
{ 'id': 'N1', 'text': '','borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node1 c-my-node-man"><div class="c-node-name1" style="color:#6cc0ff"></div></div>' }, { 'id': 'N2', 'text': '李*康', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#ff875e">李*康</div></div>' }, { 'id': 'N3', 'text': '祁*伟', 'borderColor': '#6cc0ff', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#6cc0ff">祁*伟</div></div>' }, { 'id': 'N4', 'text': '陈*石', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#ff875e">陈*石</div></div>' }, { 'id': 'N5', 'text': '陆*可', 'data': { 'isGoodMan': true, 'sexType': '女' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#ff875e">陆*可</div></div>' }, { 'id': 'N6', 'text': '高*良', 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#6cc0ff">高*良</div></div>' }, { 'id': 'N7', 'text': '沙*金', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#ff875e">沙*金</div></div>' },{ 'id': 'N9', 'text': '沙*金2', 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2 c-my-node-man" ><div class="c-node-name2" style="color:#ff875e">沙*金2</div></div>' },], 'lines': [{ 'from': 'N1', 'to': 'N6', 'text': '', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '父亲' } },{ 'from': 'N1', 'to': 'N7', 'text': '父亲', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '母亲' } },{ 'from': 'N1', 'to': 'N8', 'text': '母亲', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '儿子' } },{ 'from': 'N1', 'to': 'N2', 'text': '儿子', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '女儿' } },{ 'from': 'N1', 'to': 'N3', 'text': '女儿', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '配偶' } },{ 'from': 'N1', 'to': 'N4', 'text': '配偶', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '岳父' } },{ 'from': 'N1', 'to': 'N5', 'text': '岳父', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '岳母' } },{ 'from': 'N1', 'to': 'N9', 'text': '岳母', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '岳母' } },] };; |
|||
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => { |
|||
// 这些写上当图谱初始化完成后需要执行的代码 |
|||
}); |
|||
}, |
|||
|
|||
onNodeClick(nodeObject, $event) { |
|||
console.log('onNodeClick:', nodeObject); |
|||
}, |
|||
onLineClick(lineObject, $event) { |
|||
console.log('onLineClick:', lineObject); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
.c-my-node2 { |
|||
border: none; |
|||
background-position: center center; |
|||
background-size: 100%; |
|||
height: 74px; |
|||
width: 74px; |
|||
border-radius: 40px; |
|||
} |
|||
|
|||
.c-node-name2 { |
|||
width: 160px; |
|||
margin-left: -40px; |
|||
text-align: center; |
|||
margin-top: 85px; |
|||
position: absolute; |
|||
} |
|||
.c-my-node1 { |
|||
border: none; |
|||
background-size: 100%; |
|||
// height: 100px; |
|||
// width: 100px; |
|||
border-radius: 50px; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
.c-my-node-man { |
|||
height: 100px; |
|||
width: 100px; |
|||
background-image: url(~@/assets/images/index/nan.png) !important; |
|||
} |
|||
.c-my-node-girl { |
|||
background-image: url(~@/assets/images/index/nv.png) !important; |
|||
} |
|||
.c-my-node-son { |
|||
background-image: url(~@/assets/images/index/nv.png) !important; |
|||
} |
|||
.c-my-node-daughter { |
|||
background-image: url(~@/assets/images/index/nv.png) !important; |
|||
} |
|||
.c-my-node-father { |
|||
background-image: url(~@/assets/images/index/nv.png) !important; |
|||
} |
|||
.c-my-node-mother { |
|||
background-image: url(~@/assets/images/index/nv.png) !important; |
|||
} |
|||
|
|||
.c-node-name1 { |
|||
width: 160px; |
|||
margin-left: -30px; |
|||
text-align: center; |
|||
margin-top: 90px; |
|||
position: absolute; |
|||
} |
|||
.rel-node-checked{ |
|||
box-shadow: none !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,104 +0,0 @@ |
|||
<template> |
|||
<div class="enjoy-service"> |
|||
<div class="enjoy-service-item" v-for="(item, index) in data"> |
|||
<div class="num">+{{ item.classificationNum }}</div> |
|||
<div class="info"> |
|||
<div class="title">{{ item.classification }}</div> |
|||
<div class="time">{{ item.recordTime }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
data: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
getData() { |
|||
this.data = []; |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/recorHistory") |
|||
.then(({ data: res }) => { |
|||
if (res.code == 0) { |
|||
this.data = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.enjoy-service { |
|||
padding-left: 26px; |
|||
margin-top: 12px; |
|||
height: 100%; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.enjoy-service-item { |
|||
color: #333333; |
|||
display: flex; |
|||
padding: 14px 16px 14px; |
|||
margin-bottom: 8px; |
|||
background: #fff; |
|||
|
|||
&:hover { |
|||
background: #f5f7fa !important; |
|||
color: #0056D6 !important; |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
// 这将会选择所有子元素和伪元素 |
|||
color: #0056D6 !important; |
|||
} |
|||
} |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 22px; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.info { |
|||
font-size: 14px; |
|||
margin-left: 40px; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.time { |
|||
font-weight: 400; |
|||
color: #000000; |
|||
opacity: 0.65; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<div style="padding-left: 16px;margin-top: 24px;"> |
|||
<el-form ref="formRef" :model="formData"> |
|||
<el-table border ref="tableBox" :data="formData.tableData" :row-style="{ height: '50px' }" |
|||
:cell-style="{ padding: '0px' }"> |
|||
|
|||
<el-table-column prop="province" label="标签" width="120" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="city" label="内容" min-width="70" align="left"> |
|||
<template slot-scope="scope"> |
|||
<el-form-item v-if="scope.row.type == 'radio'"> |
|||
<el-radio-group v-model="scope.row.value" v-for="(item, index) in scope.row.option" :key="index"> |
|||
<el-radio :label="item.value" disabled><span style="margin-right: 50px;">{{ item.label }}</span></el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item :prop="'tableData.' + scope.$index + '.value'" v-if="scope.row.type == 'checkbox'"> |
|||
<el-checkbox-group v-model="scope.row.value"> |
|||
<el-checkbox label="选中且禁用" disabled v-for="(item, index) in scope.row.option" :key="index" |
|||
:label="item.value">{{ item.label }}</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
formData: { |
|||
name: '', |
|||
age: '', |
|||
tableData: [ |
|||
{ |
|||
index: 0, |
|||
province: '政治面貌', |
|||
value: '2', |
|||
type: 'radio', |
|||
option: [ |
|||
{ label: '群众', value: '1' }, |
|||
{ label: '党员', value: '2' }, |
|||
{ label: '共青团员', value: '3' }, |
|||
] |
|||
}, |
|||
{ |
|||
index: 1, |
|||
province: '健康状态', |
|||
value: [ |
|||
'disabilityFlag' |
|||
], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '残疾', |
|||
value: 'disabilityFlag' |
|||
}, |
|||
{ |
|||
label: '大病', |
|||
value: 'seriousIllnessFlag' |
|||
}, |
|||
{ |
|||
label: '慢病', |
|||
value: 'chronicDiseaseFlag' |
|||
}, |
|||
{ |
|||
label: '死亡', |
|||
value: 'siwang' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 2, |
|||
province: '关注人群', |
|||
value: [ |
|||
|
|||
], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '空巢老人', |
|||
value: 'emptyNesterFlag' |
|||
}, |
|||
{ |
|||
label: '独居老人', |
|||
value: 'liveAloneFlag' |
|||
}, |
|||
{ |
|||
label: '失能老人', |
|||
value: 'disabledFlag' |
|||
}, |
|||
{ |
|||
label: '失智老人', |
|||
value: 'dementedFlag' |
|||
}, |
|||
{ |
|||
label: '高龄老人', |
|||
value: 'oldPeopleFlag' |
|||
}, |
|||
{ |
|||
label: '低保', |
|||
value: 'subsistenceAllowanceFlag' |
|||
}, |
|||
{ |
|||
label: '退役军人', |
|||
value: 'veteranFlag' |
|||
}, |
|||
{ |
|||
label: '保障房人员', |
|||
value: 'ensureHouseFlag' |
|||
}, |
|||
{ |
|||
label: '育龄妇女', |
|||
value: 'fertileWomanFlag' |
|||
}, |
|||
{ |
|||
label: '特扶人员', |
|||
value: 'bereavedPersonFlag' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 3, |
|||
province: '特殊人群', |
|||
value: [ |
|||
|
|||
], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: "安置帮教", |
|||
value: "anzhibangjiao", |
|||
children: null |
|||
}, |
|||
{ |
|||
label: "吸毒人员", |
|||
value: "xidurenyuan", |
|||
children: null |
|||
}, |
|||
{ |
|||
label: "社区矫正", |
|||
value: "shequjiaozheng", |
|||
children: null |
|||
}, |
|||
{ |
|||
label: "不良青少年", |
|||
value: "buliangqingshaonian", |
|||
children: null |
|||
}, |
|||
{ |
|||
label: "肇事肇祸精神病", |
|||
value: "zhaoshizhaohuojingshenbing", |
|||
children: null |
|||
}, |
|||
{ |
|||
label: "邪教人员", |
|||
value: "xiejiaorenyuan", |
|||
children: null |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
index: 4, |
|||
province: '身份', |
|||
value: [ |
|||
|
|||
], |
|||
type: 'checkbox', |
|||
option: [ |
|||
{ |
|||
label: '志愿者', |
|||
value: 'disabilityFlag' |
|||
}, |
|||
{ |
|||
label: '楼长', |
|||
value: 'buildingChiefFlag' |
|||
}, |
|||
{ |
|||
label: '单元长', |
|||
value: 'unitChiefFlag' |
|||
}, |
|||
{ |
|||
label: '公益岗', |
|||
value: 'publicWelfareFlag' |
|||
} |
|||
] |
|||
}, |
|||
|
|||
] |
|||
}, |
|||
multipleSelection: [], //复选框勾选的表格数据 |
|||
verify: [] // 表格中勾选的要校验的字段 |
|||
|
|||
}; |
|||
}, |
|||
created() { }, |
|||
methods: {}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
::v-deep .el-form-item { |
|||
margin-bottom: 0px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,57 @@ |
|||
<template> |
|||
<div class="table" style="padding-left: 16px;"> |
|||
|
|||
<el-table class="m-table-item" :data="tableData" border style="width: 100%; margin-top:23px"> |
|||
<el-table-column label="序号" type="index" fixed="left" align="left" width="50"> |
|||
</el-table-column> |
|||
<el-table-column v-for="item in tableHeader" :key="item.columnName" :prop="item.columnName" :label="item.label" |
|||
align="left" :show-overflow-tooltip="true" :width="item.width || ''"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
tableHeader: [ |
|||
{ columnName: "typeName", label: "变更类型", width: 80 }, |
|||
{ columnName: "fieldName", label: "变更信息", width: 150 }, |
|||
{ columnName: "beforeChangeName", label: "变更前", width: 200 }, |
|||
{ columnName: "afterChangeName", label: "变更后", width: 200 }, |
|||
{ columnName: "operatorName", label: "操作人", width: 80 }, |
|||
{ columnName: "changeTime", label: "调整时间", width: 150 }, |
|||
{ columnName: "remark", label: "备注", width: 100 }, |
|||
], |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
computed: { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleFilterSpan(row, item) { |
|||
let _val = ""; |
|||
return _val || row[item.columnName]; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -1,137 +0,0 @@ |
|||
<template> |
|||
<div class="cnt-right"> |
|||
<div class="list"> |
|||
<div class="item f-hflex" :key="index" v-for="(item, index) in list"> |
|||
<el-row type="flex" class="row"> |
|||
<el-col :span="12" align="left">{{item.classification}}</el-col> |
|||
<el-col :span="12" align="right">{{item.classificationNum || 0}}</el-col> |
|||
</el-row> |
|||
<div class="item-progress"> |
|||
<b :style="{ |
|||
width: (item.per == 'NaN'?0:item.per) + '%', |
|||
}"></b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
list: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/serviceNumber?resid=" + this.resiId) |
|||
.then(({ data: res }) => { |
|||
// res.data = [ |
|||
// { |
|||
// "classification": "服务找人", |
|||
// "classificationNum": '12' |
|||
// }, |
|||
// { |
|||
// "classification": "温暖找人", |
|||
// "classificationNum": '15' |
|||
// }, |
|||
// { |
|||
// "classification": "技能找人", |
|||
// "classificationNum": '20' |
|||
// }, |
|||
// { |
|||
// "classification": "岗位找人", |
|||
// "classificationNum": '40' |
|||
// } |
|||
// ] |
|||
let total = res.data.reduce((sum, item) => sum + Number(item.classificationNum), 0); |
|||
res.data = res.data.map(item => ({ |
|||
...item, |
|||
per: (Number(item.classificationNum) / total * 100).toFixed(2) // 保留两位小数 |
|||
})); |
|||
this.list = res.data |
|||
}); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.cnt-right { |
|||
.list { |
|||
.item { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(44, 53, 66, 0.85); |
|||
line-height: 24px; |
|||
cursor: pointer; |
|||
.row{ |
|||
width: 100%; |
|||
margin: 0 0 10px; |
|||
padding: 0 10px 0 0; |
|||
} |
|||
.item-name { |
|||
margin-left: 5px; |
|||
width: 80px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-div { |
|||
width: 1px; |
|||
height: 12px; |
|||
background: #d8d8d8; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.item-count { |
|||
width: 90px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-per { |
|||
min-width: 70px; |
|||
} |
|||
|
|||
.item-progress { |
|||
margin-right: 15px; |
|||
width: 100%; |
|||
height: 24px; |
|||
background: #e6f0ff; |
|||
border-radius: 1px; |
|||
overflow: hidden; |
|||
|
|||
b { |
|||
display: block; |
|||
height: 24px; |
|||
background: #7ba6e6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,112 +1,611 @@ |
|||
<template> |
|||
<div class='g-main'> |
|||
<div class="top"> |
|||
<div class="left"> |
|||
<div class="card"> |
|||
<div class="title"> |
|||
<div><img src="../../../../assets/images/index/title-icon-sqzl.png" alt="">居民档案</div> |
|||
<span class="title f-font14 gray" style="cursor: pointer;" @click="handlerUserInfo">详情 ></span> |
|||
</div> |
|||
<div class="f-top12"> |
|||
<img src="../../../../assets/images/index/resi.png" alt="" width="56px"> {{ userInfo.name }} |
|||
</div> |
|||
<section class="bgC"> |
|||
<left-top :resiId="userInfo.resiId" :key="userInfo.resiId"></left-top> |
|||
</section> |
|||
</div> |
|||
<div class="left"> |
|||
<div class="user"> |
|||
<img src="@/assets/images/index/nan.png" alt=""> |
|||
<span>{{ resiDetailObj.name }}（{{ age }}岁）</span> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="card"> |
|||
<div class="title"> |
|||
<div><img src="../../../../assets/images/index/title-icon-ywjl.png" alt="">各项业务记录</div> |
|||
<div class="menu"> |
|||
<div class="progress"> |
|||
<div class="text"><span>信息完整度</span> <span>50</span> </div> |
|||
<el-progress :percentage="50" :show-text="false"></el-progress> |
|||
</div> |
|||
|
|||
<div class="list"> |
|||
<div :class="{ 'item': true, 'active': index == active }" v-for="(item, index) in menuList" |
|||
@click="handelCLickMenu(index)"> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
<right-top :userInfo="userInfo" :key="userInfo.resiId" :type="'0'"></right-top> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="bottom"> |
|||
<div class="left"> |
|||
<div class="card"> |
|||
<div class="title"> |
|||
<div><img src="../../../../assets/images/index/title-icon-jtgx.png" alt="">家庭关系</div> |
|||
</div> |
|||
<section class="bgC" style="padding: 0;"> |
|||
<left-bto :userInfo="userInfo" :key="userInfo.resiId" :type="'0'"></left-bto> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
<div class="right f-endpoint f-flex"> |
|||
<div class="card f-w50 right16"> |
|||
<div class="title"> |
|||
<div><img src="../../../../assets/images/index/title-icon-xsfw.png" alt="">享受服务次数统计</div> |
|||
<div class="right"> |
|||
<div class="editBtn"><el-button type="primary" size="small">编辑</el-button></div> |
|||
<div class="title-small">基础信息</div> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label ">国籍：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ resiDetailObj.nationalityName ? resiDetailObj.nationalityName : "--" }} |
|||
</div> |
|||
|
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">证件类型：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ resiDetailObj.idTypeName ? resiDetailObj.idTypeName : "--" }} |
|||
</div> |
|||
<div> |
|||
<xiangshoufuwu :key="userInfo.resiId"/> |
|||
|
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">证件号：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
resiDetailObj.showIdNum |
|||
? resiDetailObj.showIdNum |
|||
: resiDetailObj.idNum |
|||
? `${resiDetailObj.idNum.substr(0, 11)}` + |
|||
"******" + |
|||
`${resiDetailObj.idNum.substr(16, 2)}` |
|||
: "--" |
|||
}} |
|||
</div> |
|||
</div> |
|||
<div class="card" style="width: calc(50% - 16px);"> |
|||
<div class="title"> |
|||
<div><img src="../../../../assets/images/index/title-icon-jfjl.png" alt="">积分记录</div> |
|||
<img v-show="showFlagIdCardBtn && resiDetailObj.idNum" src="@/assets/img/yanjing1.png" alt="" |
|||
width="14px" style="margin-left: 10px" /> |
|||
<img v-show="!showFlagIdCardBtn" src="@/assets/img/yanjing2.png" alt="" width="14px" |
|||
style="margin-left: 10px" /> |
|||
<el-button v-if="resiDetailObj.idNum" type="text" class="div-table-button--blue" size="small" |
|||
@click="handleTuomin('idCard')">{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">联系电话：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
resiDetailObj.showMobile |
|||
? resiDetailObj.showMobile |
|||
: resiDetailObj.mobile |
|||
? `${resiDetailObj.mobile.substr(0, 3)}` + |
|||
"****" + |
|||
`${resiDetailObj.mobile.substr(7, 5)}` |
|||
: "--" |
|||
}} |
|||
</div> |
|||
<div class="card"> |
|||
<pointsRecord :resiId="userInfo.resiId" :key="userInfo.resiId" /> |
|||
<img v-show="showFlagMobileBtn && resiDetailObj.mobile" src="@/assets/img/yanjing1.png" alt="" |
|||
width="14px" style="margin-left: 10px" /> |
|||
<img v-show="!showFlagMobileBtn" src="@/assets/img/yanjing2.png" alt="" width="14px" |
|||
style="margin-left: 10px" /> |
|||
<el-button v-if="resiDetailObj.mobile" type="text" class="div-table-button--blue" size="small" |
|||
@click="handleTuomin('mobile')">{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">性别：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
resiDetailObj.gender |
|||
? resiDetailObj.gender == 1 |
|||
? "男" |
|||
: "女" |
|||
: "--" |
|||
}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">出生日期：</div> |
|||
<div class="f-left8 f-font-color">{{ resiDetailObj.birthday }}</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">民族：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ resiDetailObj.nationName ? resiDetailObj.nationName : "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">文化程度：</div> |
|||
<span class="f-left8 f-font-color">{{ educationText }}</span> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">婚姻状况：</div> |
|||
<span class="f-left8 f-font-color">{{ categoryDictText }}</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">配偶情况：</div> |
|||
<span class="f-left8 f-font-color">{{ spouseText }}</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">备注：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ resiDetailObj.remark ? resiDetailObj.remark : "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">创建日期：</div> |
|||
<span class="f-left8 f-font-color">{{ resiDetailObj.createdTime || '--' }}</span> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
<el-col :span="24" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">更新时间：</div> |
|||
<span class="f-left8 f-font-color">{{ resiDetailObj.updatedTime || '--' }}</span> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="title-small">拓展信息</div> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">宗教信仰：</div> |
|||
<span class="f-left8 f-font-color">{{ |
|||
residentReligionObj.religion ? residentReligionObj.religion : "--" |
|||
}}</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">籍贯：</div> |
|||
<span class="f-left8 f-font-color">{{ |
|||
residentResideInfoObj |
|||
? residentResideInfoObj.nativePlace |
|||
? residentResideInfoObj.nativePlace |
|||
: "--" |
|||
: "--" |
|||
}}</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">就业状态:</div> |
|||
<div class="f-left8 f-font-color"> |
|||
-- |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-labels">工作单位:</div> |
|||
<span class="f-left8 f-font-color">{{ |
|||
residentWorkInfoObj |
|||
? residentWorkInfoObj.workUnit |
|||
? residentWorkInfoObj.workUnit |
|||
: "--" |
|||
: "--" |
|||
}}</span> |
|||
</el-col> |
|||
<!-- <el-col :span="6" class="f-flex"> |
|||
<div class="f-label">人房关系:</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ resiDetailObj.remark ? resiDetailObj.remark : "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-labels">人户状况:</div> |
|||
<span class="f-left8 f-font-color">{{ resiDetailObj.createdTime || '--' }}</span> |
|||
</el-col> --> |
|||
</el-row> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">职业：</div> |
|||
<span class="f-left8 f-font-color">{{ |
|||
residentWorkInfoObj |
|||
? residentWorkInfoObj.occupation |
|||
? residentWorkInfoObj.occupation |
|||
: "--" |
|||
: "--" |
|||
}}</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-flex "> |
|||
<div class="f-label">月收入：</div> |
|||
<span class="f-left8 f-font-color">{{ |
|||
resiEconomyObj |
|||
? resiEconomyObj.monthIncome |
|||
? resiEconomyObj.monthIncome |
|||
: "--" |
|||
: "--" |
|||
}}</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">有无赡养人：</div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
residentFamilyInfoObj.elderlyFlag == 1 |
|||
? "有" |
|||
: residentFamilyInfoObj.elderlyFlag == 0 |
|||
? "无" |
|||
: "--" |
|||
}} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="title-small">关系图谱</div> |
|||
<graph /> |
|||
<div class="title-small">人员标签</div> |
|||
<staff-tag></staff-tag> |
|||
<div class="title-small">业务记录</div> |
|||
<business-record :userInfo="resiDetailObj"></business-record> |
|||
<div class="title-small">更新记录</div> |
|||
<change-record :tableData="changeRecordList"></change-record> |
|||
</div> |
|||
<resi-info v-if="showedResiInfo && userInfo.resiId" :resi-id="userInfo.resiId" @close="showedResiInfo = false" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from '@/js/dai/request' |
|||
import leftTop from "./cpts/leftTop"; |
|||
import leftBto from "./cpts/leftBto"; |
|||
import rightTop from "./cpts/rightTop"; |
|||
// import rightBto from "./cpts/rightBto"; |
|||
import resiInfo from "@/views/modules/cpts/resi/info"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import pointsRecord from "./cpts/pointsRecord"; |
|||
import xiangshoufuwu from "./cpts/xiangshoufuwu"; |
|||
import { idTypeList } from "@/js/columns/constants"; |
|||
import graph from './cpts/graph.vue' |
|||
import staffTag from './cpts/staffTag.vue' |
|||
import businessRecord from './cpts/businessRecord.vue' |
|||
import changeRecord from './cpts/table/changeRecord.vue' |
|||
|
|||
|
|||
|
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
userInfo: {}, |
|||
showedResiInfo: false, |
|||
changeRecordList: [],//更新记录 |
|||
|
|||
resiDetailObj: {}, |
|||
eduInfoDto: {},//学历详情 |
|||
residentFamilyInfoObj: {}, //家庭详情 |
|||
residentReligionObj: {},//宗教信仰详情 |
|||
residentResideInfoObj: {}, //居住详情 |
|||
residentWorkInfoObj: {},//工作详情 |
|||
resiEconomyObj: {},//经济状况详情 |
|||
showFlagIdCardBtn: true, |
|||
showFlagMobileBtn: true, |
|||
active: 0, |
|||
menuList: [ |
|||
{ |
|||
name: '基本信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '拓展信息（3/4）' |
|||
}, |
|||
{ |
|||
name: '党员信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '残疾信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '大病信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '慢病信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '退役军人信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '保障房信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '特扶人员信息（7/7）' |
|||
}, |
|||
{ |
|||
name: '业务记录（1）' |
|||
}, { |
|||
name: '更新记录（1）' |
|||
} |
|||
], |
|||
age: null, |
|||
|
|||
idTypeList,//证件类型字典 |
|||
nationalityList: [],//国籍字典 |
|||
educationDictonArr: [],//学历字典 |
|||
marriageArr: [], //婚姻状况字典 |
|||
spouseArr: [],//配偶情况字典 |
|||
careerStatusArr: [],//就业状况字典 |
|||
}; |
|||
}, |
|||
//创建前 |
|||
components: { graph, staffTag, businessRecord,changeRecord }, |
|||
async created() { |
|||
this.userInfo = this.$store.state.huaXiang.userInfo |
|||
this.resiDetailObj = this.$store.state.huaXiang.userInfo |
|||
await this.getNationalityList(); |
|||
this.getResiDetail(); |
|||
this.getEduInfoDtoObj(); |
|||
this.getEducation(); |
|||
this.getFamilyInfoDetail() |
|||
this.getMarriageNation() |
|||
this.getSpouse() |
|||
this.getResidentReligionObj() |
|||
this.getResideInfoDetail() |
|||
this.getResidentWorkInfoObj() |
|||
this.getEconomyDetail() |
|||
this.getChangeRecordDetailById() |
|||
}, |
|||
mounted() { |
|||
}, |
|||
activated() { |
|||
this.userInfo = this.$store.state.huaXiang.userInfo |
|||
async activated() { |
|||
this.resiDetailObj = this.$store.state.huaXiang.userInfo |
|||
await this.getNationalityList(); |
|||
this.getResiDetail(); |
|||
this.getEduInfoDtoObj(); |
|||
this.getEducation(); |
|||
this.getFamilyInfoDetail() |
|||
this.getMarriageNation() |
|||
this.getSpouse() |
|||
this.getResidentReligionObj() |
|||
this.getResideInfoDetail() |
|||
this.getResidentWorkInfoObj() |
|||
this.getEconomyDetail() |
|||
this.getChangeRecordDetailById() |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
async handlerUserInfo() { |
|||
await nextTick(); |
|||
this.showedResiInfo = true; |
|||
// 更新记录 |
|||
async getChangeRecordDetailById() { |
|||
try { |
|||
const { data } = await this.$http.post( |
|||
`/actual/base/residentChangeRecord/getChangeRecordsById/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.changeRecordList = []; |
|||
} else { |
|||
this.changeRecordList = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
// 计算年龄 |
|||
calculateAge(birthdayTimestamp) { |
|||
// 获取当前日期 |
|||
const currentDate = new Date(); |
|||
// 将生日时间戳转换为日期对象 |
|||
const birthdayDate = new Date(birthdayTimestamp); |
|||
// 计算年龄 |
|||
let age = currentDate.getFullYear() - birthdayDate.getFullYear(); |
|||
// 检查是否已经过了生日 |
|||
const currentMonth = currentDate.getMonth(); |
|||
const birthMonth = birthdayDate.getMonth(); |
|||
if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDate.getDate() < birthdayDate.getDate())) { |
|||
age--; |
|||
} |
|||
return age; |
|||
}, |
|||
async getNationalityList() { |
|||
try { |
|||
const { data } = await this.$http.post('sys/dict/data/dictlist', { 'dictType': 'nationality' }); |
|||
this.nationalityList = data.data |
|||
} catch (error) { |
|||
console.log(error, `获取 ${dictType} 字典`); |
|||
} |
|||
}, |
|||
getResiDetail() { |
|||
this.$http |
|||
.post(`/actual/base/residentBaseInfo/detail/${this.resiDetailObj.resiId}`) |
|||
.then((res) => { |
|||
this.resiDetailObj = res.data.data; |
|||
this.resiDetailObj.nationalityName = '' |
|||
const birthdayTimestamp = Date.parse(res.data.data.birthday); |
|||
this.age = this.calculateAge(birthdayTimestamp); |
|||
this.nationalityList.forEach(element => { |
|||
if (element.value === res.data.data.nationality) { |
|||
this.resiDetailObj.nationalityName = element.label |
|||
} |
|||
}); |
|||
// console.log('idTypeList', this.idTypeList) |
|||
this.resiDetailObj.idTypeName = '' |
|||
this.idTypeList.forEach(element => { |
|||
if (element.value === res.data.data.idType) { |
|||
this.resiDetailObj.idTypeName = element.label |
|||
} |
|||
}); |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
handelCLickMenu(index) { |
|||
this.active = index |
|||
}, |
|||
async handleTuomin(type) { |
|||
const url = `/actual/base/residentBaseInfo/getResiUserInfo/${this.resiDetailObj.resiId}`; |
|||
const { data, code, msg } = await requestPost(url); |
|||
if (code === 0) { |
|||
if (type === "mobile") { |
|||
this.$set(this.resiDetailObj, "showMobile", data.mobile); |
|||
this.showFlagMobileBtn = !this.showFlagMobileBtn; |
|||
if (this.showFlagMobileBtn) { |
|||
this.$set( |
|||
this.resiDetailObj, |
|||
"showMobile", |
|||
data.mobile.substr(0, 3) + "****" + data.mobile.substr(7, 4) |
|||
); |
|||
} |
|||
} |
|||
if (type === "idCard") { |
|||
this.$set(this.resiDetailObj, "showIdNum", data.idNum); |
|||
this.showFlagIdCardBtn = !this.showFlagIdCardBtn; |
|||
if (this.showFlagIdCardBtn) { |
|||
this.$set( |
|||
this.resiDetailObj, |
|||
"showIdNum", |
|||
data.idNum.substr(0, 11) + "****" + data.idNum.substr(16, 2) |
|||
); |
|||
} |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getEducation() { |
|||
try { |
|||
let { data } = await this.$http.post("sys/dict/data/education", { |
|||
formCode: "resi_base_info", |
|||
}); |
|||
this.educationDictonArr = data.data; |
|||
} catch (error) { |
|||
console.log(error, "获取学历字典"); |
|||
} |
|||
}, |
|||
// 学历信息 |
|||
async getEduInfoDtoObj() { |
|||
try { |
|||
const { data } = await this.$http.get( |
|||
`/actual/base/residentEduInfo/detail/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.eduInfoDto = {}; |
|||
} else { |
|||
this.eduInfoDto = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
//宗教信仰 |
|||
async getResidentReligionObj() { |
|||
try { |
|||
const { data } = await this.$http.get( |
|||
`/actual/base/residentReligion/detail/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.residentReligionObj = {}; |
|||
} else { |
|||
this.residentReligionObj = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
// 婚姻状况字典 |
|||
async getMarriageNation() { |
|||
try { |
|||
const { data } = await this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: "marriage", |
|||
}); |
|||
this.marriageArr = data.data; |
|||
} catch (error) { |
|||
console.log(error, "获取婚姻状况字典"); |
|||
} |
|||
}, |
|||
// 就业状态字典 |
|||
async getMarriageNation() { |
|||
try { |
|||
const { data } = await this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: "career_status", |
|||
}); |
|||
this.careerStatusArr = data.data; |
|||
} catch (error) { |
|||
console.log(error, "获取就业状态字典"); |
|||
} |
|||
}, |
|||
//家庭信息 |
|||
async getFamilyInfoDetail() { |
|||
try { |
|||
const { data } = await this.$http.post( |
|||
`/actual/base/residentFamilyInfo/getFamilyInfoDetailById/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.residentFamilyInfoObj = {}; |
|||
} else { |
|||
this.residentFamilyInfoObj = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
//获取工作信息 |
|||
async getResidentWorkInfoObj() { |
|||
try { |
|||
const { data } = await this.$http.get( |
|||
`/actual/base/residentWorkInfo/detail/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.residentWorkInfoObj = {}; |
|||
} else { |
|||
this.residentWorkInfoObj = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
//获取经济状况 |
|||
async getEconomyDetail() { |
|||
try { |
|||
const { data } = await this.$http.post( |
|||
`/actual/base/residentEconomy/getEconomyDetailById/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.resiEconomyObj = {}; |
|||
} else { |
|||
this.resiEconomyObj = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
//居住 |
|||
async getResideInfoDetail() { |
|||
try { |
|||
const { data } = await this.$http.post( |
|||
`/actual/base/residentResideInfo/getResideInfoDetailById/${this.resiDetailObj.resiId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.residentResideInfoObj = {}; |
|||
} else { |
|||
this.residentResideInfoObj = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
// 配偶情况 |
|||
async getSpouse() { |
|||
try { |
|||
const { data } = await this.$http.post("sys/dict/data/dictlist", { |
|||
dictType: "spouse_situation", |
|||
}); |
|||
this.spouseArr = data.data; |
|||
} catch (error) { |
|||
console.log(error, "获取配偶情况字典"); |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
educationText() { |
|||
let text = "--"; |
|||
this.educationDictonArr.forEach((item) => { |
|||
if (item.value == this.eduInfoDto.cultureLevel) { |
|||
text = item.label; |
|||
} |
|||
}); |
|||
return text; |
|||
}, |
|||
categoryDictText() { |
|||
let text = "--"; |
|||
this.marriageArr.forEach((item) => { |
|||
if (item.value == this.residentFamilyInfoObj.marriage) { |
|||
text = item.label; |
|||
} |
|||
}); |
|||
return text; |
|||
}, |
|||
changeTotal(val) { |
|||
this.total = val.total |
|||
spouseText() { |
|||
let text = "--"; |
|||
this.spouseArr.forEach((item) => { |
|||
if (item.value == this.residentFamilyInfoObj.spouseSituation) { |
|||
text = item.label; |
|||
} |
|||
}); |
|||
return text; |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: { leftTop, leftBto, resiInfo, rightTop, pointsRecord, xiangshoufuwu }, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/pages/huaxiang"; |
|||
@import "@/assets/scss/pages/resiInfo.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue