project-manager-ui/src/views/system/user/view/index.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="12">
      <!-- 左侧个人信息 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6" class="mb-12">
        <el-card class="user-info-card card-box" shadow="hover">
          <div slot="header" class="card-header">
            <span>个人信息</span>
          </div>
          <div class="avatar-box">
            <avatar :src="detail.avatar" :size="64" :name="detail.nickName" :char-index="-1"/>
            <div class="name">{{ detail.nickName | dv}}</div>
          </div>
          <div>
            <line-field label="账号" :value="detail.userName" />
            <line-field label="所属部门" :value="detail.deptName" />
            <line-field label="角色">
              {{ detail.roles.map(role => role.roleName).join(',') }}
            </line-field>
            <line-field label="手机号" :value="detail.phonenumber" />
            <line-field label="邮箱" :value="detail.email" />
            <collapse-panel title="更多信息" :value="false">
              <line-field label="入职时间" :value="detail.employDate" />
              <line-field label="离职时间" :value="detail.resignDate" />
              <line-field label="最后登录IP" :value="detail.loginIp" />
              <line-field label="最后登录时间" :value="detail.loginDate" />
            </collapse-panel>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧统计信息 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="18">
        <!-- 统计数据 -->
        <user-statistics  class="mb-12" v-if="detail.userId" :user-id="detail.userId" />
        
        <!-- 数据曲线图 -->
        <el-card class="card-box" shadow="hover">
          <el-tabs>
            <el-tab-pane label="客户统计">
              <performance-chart v-if="detail.userId" :query="{followId: detail.userId}" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="card-box" style="margin-top: 12px;" shadow="hover" v-if="detail.userId">
      <el-tabs>
        <el-tab-pane label="参与项目" v-if="checkPermi(['bst:project:list'])">
          <project :query="{joinUserId: detail.userId}" />
        </el-tab-pane>
        <el-tab-pane label="任务列表" v-if="checkPermi(['bst:task:list'])">
          <task :query="{ownerId: detail.userId}" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUser } from '@/api/system/user'
import PerformanceChart from './components/PerformanceChart'
import LineField from '@/components/LineField'
import Avatar from '@/components/Avatar'
import Project from '@/views/bst/project/index.vue'
import Task from '@/views/bst/task/index.vue'
import { checkPermi } from '@/utils/permission'
import UserStatistics from '@/views/system/user/view/components/UserStatistics'
import CollapsePanel from '@/components/CollapsePanel'
export default {
  name: 'UserView',
  components: {
    PerformanceChart,
    LineField,
    Avatar,
    Project,
    Task,
    UserStatistics,
    CollapsePanel
  },
  data() {
    return {
      detail: {
        roles: []
      },
      loading: false,
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    checkPermi,
    /**
     * 获取用户详细信息
     */
    getDetail() {
      this.loading = true
      getUser(this.$route.params.id).then(res => {
        this.detail = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 12px;
  
  .user-info-card {
    .card-header {
      display: flex;
      align-items: center;
    }
  }
  
  .mb-12 {
    margin-bottom: 12px;
  }

  .login-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    
    span {
      line-height: 1.4;
    }
  }
  
  :deep(.el-descriptions-item__label) {
    color: #606266;
    width: auto;
    font-size: 13px;
  }

  :deep(.el-descriptions-item__content) {
    font-size: 13px;
  }

  :deep(.el-card__body) {
    padding: 10px;
  }

  :deep(.el-descriptions-item) {
    padding-bottom: 8px;
  }

  :deep(.el-tag--small) {
    height: 22px;
    line-height: 20px;
  }
}
.avatar-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  .name {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 12px;  
    color: #303133;
  }
}

// 移动端适配
@media screen and (max-width: 767px) {
  .app-container {
    padding: 8px;
    
    .mb-12 {
      margin-bottom: 8px;
    }
    
    :deep(.el-card__body) {
      padding: 8px;
    }
  }
}
</style>