兰宝车间质量管理系统-前端
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
ahaos
2023-12-13 b06f6a316b6a8293bb8aba6bfff33336b66c032a 
 src/views/system/user/profile/index.vue


@@ -1,87 +1,103 @@


<template>


   <div class="app-container">


      <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-col>


      </el-row>


   </div>


  <div class="p-2">


    <el-row :gutter="20">


      <el-col :span="6" :xs="24">


        <el-card class="box-card">


          <template #header>


            <div class="clearfix">


              <span>个人信息</span>


            </div>


          </template>


          <div>


            <div class="text-center">


              <userAvatar />


            </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 v-if="state.user.dept" class="pull-right">{{ 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 #header>


            <div class="clearfix">


              <span>基本资料</span>


            </div>


          </template>


          <el-tabs v-model="activeTab">


            <el-tab-pane label="基本资料" name="userinfo">


              <userInfo :user="userForm" />


            </el-tab-pane>


            <el-tab-pane label="修改密码" name="resetPwd">


              <resetPwd />


            </el-tab-pane>


            <el-tab-pane label="第三方应用" name="thirdParty">


              <thirdParty :auths="state.auths" />


            </el-tab-pane>


          </el-tabs>


        </el-card>


      </el-col>


    </el-row>


  </div>


</template>




<script setup name="Profile">


import userAvatar from "./userAvatar";


import userInfo from "./userInfo";


import resetPwd from "./resetPwd";


import { getUserProfile } from "@/api/system/user";


<script setup name="Profile" lang="ts">


import UserAvatar from './userAvatar.vue';


import UserInfo from './userInfo.vue';


import ResetPwd from './resetPwd.vue';


import ThirdParty from './thirdParty.vue';


import { getAuthList } from '@/api/system/social/auth';


import { getUserProfile } from '@/api/system/user';




const activeTab = ref("userinfo");


const state = reactive({


const activeTab = ref('userinfo');


const state = ref<Record<string, any>>({


  user: {},


  roleGroup: {},


  postGroup: {}


  roleGroup: '',


  postGroup: '',


  auths: []


});




function getUser() {


  getUserProfile().then(response => {


    state.user = response.data.user;


    state.roleGroup = response.data.roleGroup;


    state.postGroup = response.data.postGroup;


  });


const userForm = ref({});




const getUser = async () => {


  const res = await getUserProfile();


  state.value.user = res.data.user;


  userForm.value = { ...res.data.user };


  state.value.roleGroup = res.data.roleGroup;


  state.value.postGroup = res.data.postGroup;


};




getUser();


const getAuths = async () => {


  const res = await getAuthList();


  state.value.auths = res.data;


};




onMounted(() => {


  getUser();


  getAuths();


});


</script>