YZProjectCloud/yanzhu-ui-vue3/src/views/system/user/profile/index.vue

<template>
   <div class="app-container user-profile">
      <el-row :gutter="20">
         <el-col :span="6" :xs="24">
            <el-card class="box-card">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>个人信息</span>
                 </div>
               </template>
               <div>
                  <div class="text-center">
                     <userAvatar :user="state.user" />
                  </div>
                  <ul class="list-group list-group-striped">
                     <li class="list-group-item">
                        <svg-icon icon-class="user" />用户名称
                        <div class="pull-right">{{ state.user.userName }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="phone" />手机号码
                        <div class="pull-right">{{ state.user.phonenumber }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="email" />用户邮箱
                        <div class="pull-right">{{ state.user.email }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="tree" />所属部门
                        <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="peoples" />所属角色
                        <div class="pull-right">{{ state.roleGroup }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="date" />创建日期
                        <div class="pull-right">{{ state.user.createTime }}</div>
                     </li>
                  </ul>
               </div>
            </el-card>
         </el-col>
         <el-col :span="18" :xs="24">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>基本资料</span>
                 </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>

            <el-card style="margin-top:10px;">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>租户信息</span>
                 </div>
               </template>
               <div class="user-coms">
                  <div v-for="(it,idx) in state.coms" :key="idx" class="user-com" :class="it.isActive==1?'is-active':''">
                     <span style="display: inline-block;margin-right:10px;"> 
                        {{ it.comName }}
                     </span>
                     <el-tag  type="success" class="is-active-tag" v-if="it.isActive==1">已激活</el-tag>
                     <el-button  v-else type="primary" @click="toggleCom(it)">切换</el-button>
                     
                  </div>
               </div>
               </el-card>
         </el-col>
      </el-row>
   </div>
</template>

<script setup name="Profile">
import useUserStore from '@/store/modules/user'
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile ,getUserComs,activeUserCom} from "@/api/system/user";

const { proxy } = getCurrentInstance();
const userStore = useUserStore()
const activeTab = ref("userinfo");
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
  coms:[]
});

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
};
function loadUserComs(){
   let userId=userStore.uid;
   if(!userId){
      return;
   }
   getUserComs(userId).then(d=>{
      state.coms=d.data||[];
   });
}

function toggleCom(com){
   activeUserCom(com).then(d=>{
      if(d.code==200){
         location.reload();
      }
   });
}

loadUserComs();
getUser();
</script>
<style lang="scss">
.app-container.user-profile{
   .user-coms{
      .user-com{
         &.is-active{
            color: #00a4e6;
         }
         line-height:40px;
         .is-active-tag{
            font-size: 12px;
            
         }
      }
   }
}
</style>