城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

586 lines
24 KiB

<template>
<div class='g-main'>
<div class="left">
<div class="user">
<img src="@/assets/images/index/nan.png" alt="">
<span v-if="resiDetailObj.baseInfoDto"> {{ resiDetailObj.baseInfoDto.name
}}{{ age }}</span>
<span v-else> -- </span>
</div>
<div class="menu">
<div class="progress">
2 years ago
<div class="text"><span>信息完整度</span> <span>70</span> </div>
<el-progress :percentage="70" :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><span
:class="{ 'incomplete': index == '2' || index == '3', 'full': index != '2' && index != '3' }">{{
item.num }}</span>
2 years ago
</div>
</div>
</div>
</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">
2 years ago
<div class="f-label "><b>国籍</b></div>
<div class="f-left8 f-font-color">
{{ nationalityText }}
</div>
</el-col>
<el-col :span="6" class="f-flex">
2 years ago
<div class="f-label"><b>证件类型</b></div>
<div class="f-left8 f-font-color">
{{ idTypeText }}
</div>
</el-col>
<el-col :span="6" class="f-flex">
2 years ago
<div class="f-label"><b>证件号</b></div>
<div class="f-left8 f-font-color">
{{
resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.idNum
? resiDetailObj.baseInfoDto.idNum
: "--"
}}
</div>
<img v-show="showFlagIdCardBtn" 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 type="text" class="div-table-button--blue" size="small"
2 years ago
@click="handelCLickShowCheckPassword('idCard')">{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button>
</el-col>
<el-col :span="6" class="f-flex">
2 years ago
<div class="f-label"><b>联系电话</b></div>
<div class="f-left8 f-font-color">
{{
resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.mobile
? resiDetailObj.baseInfoDto.mobile
: "--"
}}
</div>
<img v-show="showFlagMobileBtn" 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 type="text" class="div-table-button--blue" size="small"
2 years ago
@click="handelCLickShowCheckPassword('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.baseInfoDto && resiDetailObj.baseInfoDto.genderName
? resiDetailObj.baseInfoDto.genderName : "--"
}}
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label">出生日期</div>
<div class="f-left8 f-font-color">{{ resiDetailObj.baseInfoDto.birthday }}</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label">民族</div>
<div class="f-left8 f-font-color">
{{ resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.nationName ?
resiDetailObj.baseInfoDto.nationName : "--" }}
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label">文化程度</div>
<span class="f-left8 f-font-color"> {{ resiDetailObj.eduInfoDto &&
resiDetailObj.eduInfoDto.cultureLevelName ?
resiDetailObj.eduInfoDto.cultureLevelName : "--" }}</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.baseInfoDt && resiDetailObj.baseInfoDto.remark ? resiDetailObj.baseInfoDto.remark :
"--" }}
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label">创建日期</div>
<span class="f-left8 f-font-color">
{{ resiDetailObj.baseInfoDt && resiDetailObj.baseInfoDto.createdTime ?
resiDetailObj.baseInfoDto.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.baseInfoDt && resiDetailObj.baseInfoDto.updatedTime ?
resiDetailObj.baseInfoDto.updatedTime : "--" }}</span>
</div>
</el-col>
</el-row>
2 years ago
<div class="title-small">居住信息</div>
<!-- <el-row type="flex" justify="" class="f-m-top23">
2 years ago
<el-col :span="24" class="f-flex">
<div class="f-flex ">
<div class="f-label"><b>所属房屋</b></div>
<span class="f-left8 f-font-color">
2 years ago
{{ resiDetailObj.houseInfo.gridName + '-' + resiDetailObj.houseInfo.homeName || '--' }}
</span>
</div>
</el-col>
</el-row> -->
2 years ago
<el-row type="flex" justify="" class="f-m-top23">
<el-col :span="6" class="f-flex">
<div class="f-flex ">
<div class="f-label"><b>人房关系</b></div>
<span class="f-left8 f-font-color">--</span>
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-flex ">
<div class="f-label"><b>人户状况</b></div>
<span class="f-left8 f-font-color">--</span>
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label"><b>户籍所在地</b></div>
<div class="f-left8 f-font-color">
--
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label"><b>与户主关系</b></div>
<span class="f-left8 f-font-color">--</span>
</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">{{
resiDetailObj.religionDto && resiDetailObj.religionDto.religion ?
resiDetailObj.religionDto.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">{{
resiDetailObj.baseInfoDto
? resiDetailObj.baseInfoDto.nativePlace
? resiDetailObj.baseInfoDto.nativePlace
: "--"
: "--"
}}</span>
</div>
</el-col>
<el-col :span="6" class="f-flex">
2 years ago
<div class="f-label"><b>就业状态:</b></div>
<div class="f-left8 f-font-color">
{{ categoryDictText }}
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-labels">工作单位:</div>
<span class="f-left8 f-font-color">{{
resiDetailObj.workInfoDto
? resiDetailObj.workInfoDto.workUnit
? resiDetailObj.workInfoDto.workUnit
: "--"
: "--"
}}</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">{{
resiDetailObj.workInfoDto
? resiDetailObj.workInfoDto.occupation
? resiDetailObj.workInfoDto.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">{{
resiDetailObj.economyDto
? resiDetailObj.economyDto.monthIncome
? resiDetailObj.economyDto.monthIncome
: "--"
: "--"
}}</span>
</div>
</el-col>
<el-col :span="6" class="f-flex">
<div class="f-label">有无赡养人</div>
<div class="f-left8 f-font-color">
{{
resiDetailObj.familyInfoDto && resiDetailObj.familyInfoDto.elderlyFlag == 1
? "有"
: resiDetailObj.familyInfoDto && resiDetailObj.familyInfoDto.elderlyFlag == 0
? "无"
: "--"
}}
</div>
</el-col>
</el-row>
2 years ago
<div class="title-small">关系图谱</div>
<graph :userInfo="resiDetailObj.baseInfoDto" v-if="resiDetailObj.baseInfoDto" />
<div class="title-small">人员标签</div>
<staff-tag :userInfo="resiDetailObj.baseInfoDto.categoryInfo"
v-if="Object.keys(resiDetailObj).length !== 0"></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>
2 years ago
<el-dialog title="密码验证" :visible.sync="showCheckPassword">
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" autocomplete="off" placeholder="请输入当前账号密码"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="showCheckPassword = false"> </el-button>
<el-button type="primary" @click="handelClickCheckPassword"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
2 years ago
import { requestPost } from '@/js/dai/request'
import graph from './cpts/graph.vue'
import staffTag from './cpts/staffTag.vue'
2 years ago
import businessRecord from './cpts/businessRecord.vue'
import changeRecord from './cpts/table/changeRecord.vue'
import { idTypeList } from "@/js/columns/constants";
2 years ago
export default {
data() {
return {
changeRecordList: [],//更新记录
resiDetailObj: {},//居民详情
showFlagIdCardBtn: true,
showFlagMobileBtn: true,
active: 0,
menuList: [
{
name: '基本信息',
num: '(7/7)'
},
{
name: '居住信息',
num: '(4/4)'
},
{
name: '拓展信息',
num: '(3/4)'
},
{
name: '党员信息',
num: '(0/3)'
},
2 years ago
// {
// name: '残疾信息(0/3)'
// },
// {
// name: '大病信息(0/3)'
// },
// {
// name: '慢病信息(0/3)'
// },
// {
// name: '退役军人信息(0/3)'
// },
// {
// name: '保障房信息(0/3)'
// },
// {
// name: '特扶人员信息(0/3)'
// },
{
name: '业务记录',
num: '(1)'
}, {
name: '更新记录',
num: '(1)'
}
],
age: null,
nationalityList: [],//国籍字典
marriageArr: [], //婚姻状况字典
spouseArr: [],//配偶情况字典
careerStatusArr: [],//就业状况字典
idTypeList,//证件类型字典
2 years ago
showCheckPassword: false,
form: {
password: ''//脱敏确认密码
},
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
]
}
};
},
2 years ago
components: { graph, staffTag, businessRecord, changeRecord },
2 years ago
async created() {
2 years ago
this.resiId = this.$store.state.huaXiang.userInfo.resiId;
console.log(this.$store.state.huaXiang.userInfo);
await this.getNationalityList();
this.getResiDetail();
this.getMarriageNation()
this.getSpouse()
this.getChangeRecordDetailById()
2 years ago
},
mounted() {
},
2 years ago
activated() {
this.resiDetailObj = null
this.resiId = this.$store.state.huaXiang.userInfo.resiId;
this.getNationalityList();
this.getResiDetail();
this.getMarriageNation()
this.getSpouse()
this.getChangeRecordDetailById()
},
methods: {
// 更新记录
async getChangeRecordDetailById() {
try {
const { data } = await this.$http.post(
2 years ago
`/actual/base/residentChangeRecord/getChangeRecordsById/${this.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
.get(`/actual/base/residentIntegratedInfo/detail/masked/1740209624289349634`)
.then((res) => {
console.log(res.data.data, 'resiDetailObj');
this.resiDetailObj = res.data.data || {};
// this.resiDetailObj.nationalityName = ''
const birthdayTimestamp = Date.parse(res.data.data.baseInfoDto.birthday);
this.age = this.calculateAge(birthdayTimestamp);
this.nationalityList.forEach(element => {
if (element.value === res.data.data.nationality) {
this.resiDetailObj.baseInfoDto.nationalityName = element.label
}
});
})
.catch((err) => {
console.log(err);
});
},
handelCLickMenu(index) {
this.active = index
},
2 years ago
handelCLickShowCheckPassword(type) {
this.form.password = '';
if (type === 'idCard') {
if (this.showFlagIdCardBtn) {
this.showCheckPassword = true;
} else {
this.showFlagIdCardBtn = true;
this.$set(
this.resiDetailObj.baseInfoDto,
"idNum",
this.resiDetailObj.baseInfoDto.idNum.substr(0, 11) + "****" + this.resiDetailObj.baseInfoDto.idNum.substr(16, 2)
2 years ago
);
}
} else if (type === 'mobile') {
if (this.showFlagMobileBtn) {
this.showCheckPassword = true;
} else {
this.showFlagMobileBtn = true;
this.$set(
this.resiDetailObj.baseInfoDto,
"mobile",
this.resiDetailObj.baseInfoDto.mobile.substr(0, 3) + "****" + this.resiDetailObj.baseInfoDto.mobile.substr(7, 4)
2 years ago
);
}
}
this.tuominType = type;
},
handelClickCheckPassword() {
this.$refs.form.validate(vali => {
if (vali) {
this.handleSaveTuomin(this.form.password)
} else {
return false
}
})
},
async handleSaveTuomin(password) {
const url = `/actual/base/residentBaseInfo/getResiUserInfo/${this.resiId}`;
let parm = {
password
}
const { data, code, msg } = await requestPost(url, parm);
if (code === 0) {
2 years ago
if (this.tuominType === "mobile") {
this.$set(this.resiDetailObj.baseInfoDto, "mobile", data.mobile);
this.showFlagMobileBtn = !this.showFlagMobileBtn;
}
2 years ago
if (this.tuominType === "idCard") {
this.$set(this.resiDetailObj.baseInfoDto, "idNum", data.idNum);
this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
}
2 years ago
this.showCheckPassword = false
} else {
this.$message.error(msg);
}
},
// 婚姻状况字典
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 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: {
categoryDictText() {
let text = "--";
this.marriageArr.forEach((item) => {
if (item.value == this.resiDetailObj.familyInfoDto.marriage) {
text = item.label;
}
});
return text;
},
spouseText() {
let text = "--";
this.spouseArr.forEach((item) => {
if (item.value == this.resiDetailObj.familyInfoDto.spouseSituation) {
text = item.label;
}
});
return text;
2 years ago
},
nationalityText() {
let text = "--";
this.nationalityList.forEach((item) => {
if (item.value == this.resiDetailObj.baseInfoDto.nationality) {
text = item.label;
}
});
return text;
},
idTypeText() {
let text = "--";
this.idTypeList.forEach((item) => {
if (item.value == this.resiDetailObj.baseInfoDto.idType) {
text = item.label;
}
});
return text;
}
},
watch: {},
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
</style>