<template>
|
<div class="app-container" style="background-color: #FEF7FC;">
|
<el-row :gutter="20">
|
<el-col :span="8" :xs="24" >
|
<el-card class="box-card" style="background-color: #EBF4FE;">
|
<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">
|
用户名称
|
<div class="pull-right">{{ user.nickName }}</div>
|
</li>
|
<li class="list-group-item">
|
手机号码
|
<div class="pull-right">{{ user.phoneNumber }}</div>
|
</li>
|
<li class="list-group-item">
|
用户邮箱
|
<div class="pull-right">{{ user.email }}</div>
|
</li>
|
<li class="list-group-item">
|
所属家庭
|
<div class="pull-right" >{{ user.familyName }} </div>
|
</li>
|
<li class="list-group-item">
|
所属角色
|
<div class="pull-right">{{ user.roleName }}</div>
|
</li>
|
<li class="list-group-item">
|
创建日期
|
<div class="pull-right">{{ user.createTime }}</div>
|
</li>
|
</ul>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="16" :xs="24" >
|
<el-card style="background-color: #FFF5F7;">
|
<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 style="padding-top: 20px; background-color: #F4FFF8;">
|
<div class="container">
|
<div>
|
<span style="font-family: Microsoft YaHei-Regular, Microsoft YaHei; padding-left: 10px;">权限情况</span>
|
</div>
|
<div style="padding-left: 10px;">
|
<el-dropdown v-model="selectedFamily" @command="handleDropdownCommand">
|
<span class="el-dropdown-link">
|
{{ selectedFamily || '下拉菜单' }}<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="一号家庭">一号家庭</el-dropdown-item>
|
<el-dropdown-item command="二号家庭">二号家庭</el-dropdown-item>
|
<el-dropdown-item command="三号家庭">三号家庭</el-dropdown-item>
|
<el-dropdown-item command="四号家庭">四号家庭</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<el-divider></el-divider>
|
<div >
|
<el-tabs v-model="activeTab1" style="padding-left: 25px;" @tab-click="handleTabClick">
|
<el-tab-pane label="家根网" prop="家根网">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="家大事记">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
|
</el-tab-pane>
|
<el-tab-pane label="家庭资产">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="家庭设备">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="收藏荣誉">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="小医生">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="保洁收纳">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="通讯录">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="魅宠">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
<el-tab-pane label="家庭收支台账">
|
<span >查看权限</span>
|
<span style="padding-left: 1200px;">{{SelfPermissionList.search === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>新增权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.insert === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>删除权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.delete === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
<span>修改权限</span>
|
<span style="padding-left: 1200px;">{{ SelfPermissionList.update === 0 ? '未持有' : '持有' }}</span>
|
<el-divider></el-divider>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<div style="padding-top: 25px;">
|
<div v-if="user.roleName==='家庭管理员'" style=" padding-top: 25px;background-color: #F4FFF8;" >
|
<div class="container">
|
<div>
|
<span style="font-family: Microsoft YaHei-Regular, Microsoft YaHei; padding-left: 10px;">其他家庭权限管理</span>
|
</div>
|
<div style="padding-left: 10px;">
|
<el-dropdown v-model="selectedFamily" @command="handleDropdownCommand1">
|
<span class="el-dropdown-link">
|
{{ command1 ||'下拉菜单' }}<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="一号家庭">一号家庭</el-dropdown-item>
|
<el-dropdown-item command="二号家庭">二号家庭</el-dropdown-item>
|
<el-dropdown-item command="三号家庭">三号家庭</el-dropdown-item>
|
<el-dropdown-item command="四号家庭">四号家庭</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<el-divider></el-divider>
|
<div v-if="FaimlyList && FaimlyList.length > 0">
|
<el-tabs v-model="activeTab2" style="padding-left: 25px;" @tab-click="handleTabClick1">
|
<el-tab-pane label="家根网" prop="家根网">
|
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
</el-tab-pane>
|
<el-tab-pane label="家大事记">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="家庭资产">
|
<span>
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</span>
|
</el-tab-pane>
|
<el-tab-pane label="家庭设备">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="收藏荣誉">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="小医生">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="保洁收纳">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="通讯录">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="魅宠">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
<el-tab-pane label="家庭收支台账">
|
<span v-for="member in FaimlyList" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
|
<div style="padding-top: 20px">
|
<div v-if="user.roleName==='家庭管理员'" style=" padding-top: 25px;background-color: #F4FFF8;" >
|
<div>
|
<span style="font-family: Microsoft YaHei-Regular, Microsoft YaHei; padding-left: 10px;">家庭成员管理</span><el-divider></el-divider>
|
</div>
|
<div style="padding-left: 20px;padding-top: 10px">
|
<span v-for="member in FaimlyList1" :key="member.id">{{ member.name }}<el-divider></el-divider></span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import userAvatar from "./userAvatar";
|
import userInfo from "./userInfo";
|
import resetPwd from "./resetPwd";
|
import { getUserProfile ,getSelfPermission,getFamilyids} from "@/api/system/user";
|
import { getIndividualList } from "@/api/self";
|
import {updateFamilyevent} from "@/api/bignote";
|
|
export default {
|
name: "Profile",
|
components: { userAvatar, userInfo, resetPwd },
|
data() {
|
return {
|
formDat: {
|
familyName: undefined,
|
modelName: undefined,
|
},
|
FaimlyList:undefined,
|
FaimlyList1:undefined,
|
selectedFamily: "一号家庭",
|
id:'',
|
command1:undefined,
|
selectedTab:"家根网",// 初始化选中的家庭为空字符串
|
selectedTab1:"家根网",// 初始化选中的家庭为空字符串
|
SelfPermission:undefined,
|
SelfPermissionList:{
|
insert:undefined,
|
delete:undefined,
|
search:undefined,
|
update:undefined,
|
},
|
user: {},
|
roleGroup: {},
|
postGroup: {},
|
activeTab: "userinfo",
|
activeTab1:"家根网"
|
};
|
},
|
|
created() {
|
this.getUser();
|
this.getList();
|
},
|
methods: {
|
handleTabClick(tab) {
|
this.selectedTab = tab.label;
|
if (this.selectedFamily && this.selectedTab) {
|
this.getList();
|
}
|
},
|
handleTabClick1(tab) {
|
this.selectedTab1 = tab.label;
|
},
|
handleDropdownCommand(command) {
|
this.selectedFamily = command; // 更新选中的家庭
|
console.log(this.selectedFamily)
|
// 检查下拉菜单和切片页面是否都被选中
|
if (this.selectedFamily && this.selectedTab) {
|
this.getList();
|
}
|
},
|
handleDropdownCommand1(command1) {
|
this.command1= command1;
|
console.log(command1)
|
let id = null;
|
if (command1 == '一号家庭') {
|
id = 1;
|
} else if (command1 == '二号家庭') {
|
id = 2;
|
} else if (command1 == '三号家庭') {
|
id = 3;
|
} else if (command1 == '四号家庭') {
|
id = 4;
|
}
|
if (id) {
|
this.getUser(parseInt(id)); // 将id转换为数字类型
|
}
|
},
|
|
|
getUser(id) {
|
|
// getUserProfile().then(response => {
|
// this.user = response.data;
|
// this.roleGroup = response.roleGroup;
|
// this.postGroup = response.postGroup;
|
// });
|
|
getFamilyids(id).then(response => {
|
console.log(id)
|
this.FaimlyList = response.data;
|
console.log("打印家庭成员序列"+id)
|
console.log(this.FaimlyList)
|
});
|
getIndividualList().then(response => {
|
this.user = response.data;
|
|
this.roleGroup = response.roleGroup;
|
this.postGroup = response.postGroup;
|
});
|
if (this.user.familyName='一号家庭'){
|
id=1;
|
getFamilyids(id).then(response => {
|
console.log(id)
|
this.FaimlyList1 = response.data;
|
console.log("打印家庭成员序列"+id)
|
console.log(this.FaimlyList)
|
});
|
}
|
|
|
|
},
|
getList() {
|
|
var formData ={
|
"familyName": this.selectedFamily,
|
"modelName":this.selectedTab,
|
}
|
|
var jsonString = JSON.stringify(formData);
|
// console.log(jsonString);
|
|
getSelfPermission(jsonString).then(response => {
|
this.SelfPermissionList = response.data;
|
console.log(this.SelfPermissionList)
|
});
|
|
}
|
}
|
|
};
|
</script>
|
<style>
|
.container {
|
display: flex;
|
}
|
|
.el-icon-arrow-down {
|
font-size: 12px;
|
}
|
</style>
|
