城阳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.
 
 
 

114 lines
3.8 KiB

<template>
<el-popover popper-class="popperClass" placement="right" trigger="hover">
<div class="popperList">
<div style="margin-bottom: 13px">家庭类别</div>
<div class="listMsg" v-for="itm in homeTypeArr" :key="itm">
<img :src="require(`@/assets/images/home/${getHomeTypesMap(itm)[1]}.png`)" alt="" />
<span style="margin-left: 3px">{{ getHomeTypesMap(itm)[0] }}</span>
</div>
</div>
<div @click="gotoPersonnel(item.resiId)" @mouseover="getHomeTypes(item.id)" slot="reference" class="lxjt gotoDesc" :title="item.principalName">
{{ spliceNameFun(item.principalName, 3) }}
<img src="@/assets/images/home/cjr.png" alt="" />
</div>
</el-popover>
</template>
<script>
export default {
name: "principalName",
props: {
item: {
type: Object,
default: () => {},
},
pageName: {
type: String,
default: "",
},
},
data() {
return {
homeTypeArr: [],
};
},
methods: {
// 家庭类别Map
getHomeTypesMap(item) {
const homeTypeMap = new Map([
["partyFlag", { name: "党员", icon: "dy" }],
["subsistenceAllowanceFlag", { name: "低保人员", icon: "dbry" }],
["ensureHouseFlag", { name: "保障房人员", icon: "bzfry" }],
["unemployedFlag", { name: "失业人员", icon: "syry" }],
["fertileWomanFlag", { name: "育龄妇女", icon: "ylfn" }],
["veteranFlag", { name: "退役军人", icon: "tyjr" }],
["unitedFrontFlag", { name: "统战人员", icon: "tzry" }],
["petitionOfficerFlag", { name: "信访人员", icon: "xfry" }],
["volunteerFlag", { name: "志愿者", icon: "zyz" }],
["oldPeopleFlag", { name: "老年人", icon: "lnr" }],
["emptyNesterFlag", { name: "空巢老人", icon: "kclr" }],
["specialSupportFlag", { name: "特扶人员", icon: "tfry" }],
["disabledFlag", { name: "失能人员", icon: "snry" }],
["dementedFlag", { name: "失智人员", icon: "szry" }],
["disabilityFlag", { name: "残疾人", icon: "cjr" }],
["seriousIllnessFlag", { name: "大病人员", icon: "dbry" }],
["chronicDiseaseFlag", { name: "慢性病人员", icon: "mxbry" }],
["specialCrowdFlag", { name: "特殊人群", icon: "tsry" }],
["tenantFlag", { name: "租户", icon: "zh" }],
["floatingFlag", { name: "流动人员", icon: "ldry" }],
["liveAloneFlag", { name: "独居老人", icon: "kclr" }],
["publicWelfareFlag", { name: "公益岗人员", icon: "gyg" }],
]);
return [homeTypeMap.get(item).name, homeTypeMap.get(item).icon];
},
getHomeTypes(id) {
this.$http.get(`/actual/base/organizational/structure/getResidentCategoryByHouseId?houseId=${id}`).then((res) => {
const { code, msg, data } = res.data;
if (code === 0) {
const newItem = data[0];
const itemNumOne = Object.keys(newItem).filter((key) => newItem[key] === 1);
this.homeTypeArr = itemNumOne;
} else {
this.$message.error(msg);
}
});
},
spliceNameFun(row, num) {
if (row && row.length > num) {
return row.substring(0, num) + "...";
}
return row;
},
gotoPersonnel(id) {
if (id && id !== "") {
this.$router.push({ path: `/organizational/orgPersonnel/${this.pageName}`, query: { user_id: id } });
} else {
this.$message.error("无法跳转!");
}
},
},
};
</script>
<style scoped lang="scss">
@mixin spanLevel {
font-size: 14px;
color: #fff;
word-break: break-all;
}
.lxjt {
@include spanLevel;
display: flex;
align-items: center;
justify-content: space-around;
height: 118px;
width: 30px;
writing-mode: tb-rl;
margin-top: -12px;
background-image: url(~@/assets/images/home/dyzxhTree.png);
background-size: 100%;
}
</style>