<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="6" :xs="24">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>个人信息</span>
|
</div>
|
<div>
|
<div class="text-center">
|
<userAvatar :user="user" />
|
</div>
|
<ul class="list-group list-group-striped">
|
<li class="list-group-item">
|
<svg-icon icon-class="user" />用户名称
|
<div class="pull-right">{{ user.userName }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="phone" />手机号码
|
<div class="pull-right">{{ user.phonenumber }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="email" />用户邮箱
|
<div class="pull-right">{{ user.email }}</div>
|
</li>
|
<li class="list-group-item" v-if="user.belongWards[0]">
|
<svg-icon icon-class="tree" />所属病区
|
<div class="pull-right">
|
<el-popover
|
v-model="showAllWardsPopover"
|
placement="right-start"
|
:width="300"
|
trigger="manual"
|
popper-class="ward-popover"
|
>
|
<div class="popover-content">
|
<p
|
v-for="ward in user.belongWards"
|
:key="ward.districtId"
|
class="popover-item"
|
>
|
{{ ward.districtName }}
|
</p>
|
</div>
|
<!-- 需要一个空元素作为触发器的引用 -->
|
<!-- <div style="display: none" slot="reference"></div> -->
|
<div slot="reference">
|
<el-tag
|
v-for="(ward, index) in displayWards"
|
:key="ward.districtId"
|
size="small"
|
class="ward-tag"
|
>{{ ward.districtName }}</el-tag
|
>
|
<!-- 显示隐藏数量的标签，点击触发Popover -->
|
<el-tag
|
v-if="user.belongWards.length > maxTagCount"
|
size="small"
|
class="more-tag"
|
@click="showAllWardsPopover = !showAllWardsPopover"
|
>+{{ user.belongWards.length - maxTagCount }}</el-tag
|
>
|
</div>
|
</el-popover>
|
</div>
|
</li>
|
<li class="list-group-item" v-else>
|
<svg-icon icon-class="tree" />所属院区
|
<div class="pull-right">未配置</div>
|
</li>
|
<li class="list-group-item" v-if="user.belongDepts[0]">
|
<svg-icon icon-class="tree" />所属科室
|
<div class="pull-right">
|
<el-popover
|
v-model="showAllDeptsPopover"
|
placement="right-start"
|
:width="300"
|
style="top: 130px; left: 0px"
|
trigger="manual"
|
popper-class="dept-popover"
|
>
|
<div class="popover-content">
|
<p
|
v-for="dept in user.belongDepts"
|
:key="dept.deptId"
|
class="popover-item"
|
>
|
{{ dept.deptName }}
|
</p>
|
</div>
|
<!-- <div style="display: none" slot="reference"></div> -->
|
<div slot="reference">
|
<el-tag
|
v-for="(dept, index) in displayDepts"
|
:key="dept.deptId"
|
size="small"
|
class="dept-tag"
|
>{{ dept.deptName }}</el-tag
|
>
|
<el-tag
|
v-if="user.belongDepts.length > maxTagCount"
|
size="small"
|
class="more-tag"
|
@click="showAllDeptsPopover = !showAllDeptsPopover"
|
>+{{ user.belongDepts.length - maxTagCount }}</el-tag
|
>
|
</div>
|
</el-popover>
|
</div>
|
</li>
|
<li class="list-group-item" v-else>
|
<svg-icon icon-class="tree" />所属科室
|
<div class="pull-right">未配置</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="peoples" />所属角色
|
<div class="pull-right">{{ roleGroup }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="date" />创建日期
|
<div class="pull-right">{{ user.createTime }}</div>
|
</li>
|
</ul>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="18" :xs="24">
|
<el-card>
|
<div slot="header" class="clearfix">
|
<span>基本资料</span>
|
</div>
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="基本资料" name="userinfo">
|
<userInfo :user="user" />
|
</el-tab-pane>
|
<el-tab-pane label="修改密码" name="resetPwd">
|
<resetPwd />
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import userAvatar from "./userAvatar";
|
import userInfo from "./userInfo";
|
import resetPwd from "./resetPwd";
|
import { getUserProfile } from "@/api/system/user";
|
|
export default {
|
name: "Profile",
|
components: { userAvatar, userInfo, resetPwd },
|
data() {
|
return {
|
user: {},
|
roleGroup: {},
|
postGroup: {},
|
activeTab: "userinfo",
|
maxTagCount: 3, // 控制默认显示的标签数量
|
showAllWardsPopover: false, // 控制病区Popover的显示
|
showAllDeptsPopover: false, // 控制科室Popover的显示
|
};
|
},
|
computed: {
|
// 计算要显示的病区标签（前maxTagCount个）
|
displayWards() {
|
if (!this.user.belongWards) return [];
|
return this.user.belongWards.slice(0, this.maxTagCount);
|
},
|
// 计算要显示的科室标签（前maxTagCount个）
|
displayDepts() {
|
if (!this.user.belongDepts) return [];
|
return this.user.belongDepts.slice(0, this.maxTagCount);
|
},
|
},
|
created() {
|
this.getUser();
|
},
|
methods: {
|
getUser() {
|
getUserProfile().then((response) => {
|
this.user = response.data;
|
this.roleGroup = response.roleGroup;
|
this.postGroup = response.postGroup;
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
/* 为标签添加一些右边距，使其不紧贴在一起 */
|
.ward-tag,
|
.dept-tag,
|
.more-tag {
|
margin-right: 6px;
|
margin-bottom: 4px;
|
}
|
/* 设置"更多"标签的样式，使其看起来可点击 */
|
.more-tag {
|
cursor: pointer;
|
background-color: #f0f0f0;
|
border-color: #ddd;
|
color: #999;
|
}
|
.list-group-item {
|
display: flex;
|
align-items: center;
|
}
|
.pull-right {
|
flex: 1;
|
text-align: right;
|
}
|
</style>
|
|
<style>
|
/* Popover内容区域样式 */
|
.popover-content {
|
max-height: 200px;
|
overflow-y: auto;
|
padding: 10px;
|
}
|
.popover-item {
|
margin: 8px 0;
|
line-height: 1.4;
|
}
|
/* 病区Popover样式 */
|
.ward-popover.el-popover,
|
.dept-popover.el-popover {
|
max-width: 300px;
|
}
|
/* 调整Popover箭头位置 */
|
.ward-popover[x-placement^="right"],
|
.dept-popover[x-placement^="right"] {
|
margin-left: 10px;
|
}
|
</style>
|
