cmc-oa/oa-ui-app/pages/oa/staff/staffDetail.vue

<template>
  <view class="container">
    <!-- 头部信息 -->
    <view class="header-section">
      <view class="avatar-section">
        <uv-avatar 
          :src="staffInfo.avatar || '/static/images/user.png'"
          size="120"
        />
      </view>
      <view class="basic-info">
        <view class="name">{{ staffInfo.nickName }}</view>
        <view class="dept">{{ staffInfo.dept?.deptName || '未分配部门' }}</view>
        <view class="status">
          <uv-tag 
            :text="getStatusText(staffInfo.status)" 
            :type="getStatusType(staffInfo.status)"
          />
        </view>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">姓名</text>
          <text class="value">{{ staffInfo.nickName }}</text>
        </view>
        <view class="info-item">
          <text class="label">年龄</text>
          <text class="value">{{ String(getAgeByIdCard(staffInfo.idCard)).slice(0,2) }}岁</text>
        </view>
        <view class="info-item">
          <text class="label">性别</text>
          <text class="value">{{ staffInfo.sex == 0 ? '男' : '女' }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机号码</text>
          <text class="value">{{ staffInfo.phonenumber || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">身份证</text>
          <text class="value">{{ staffInfo.idCard || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">籍贯</text>
          <text class="value">{{ staffInfo.nativePlace || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">民族</text>
          <text class="value">{{ staffInfo.ethnic || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">政治面貌</text>
          <text class="value">{{ getPoliticalText(staffInfo.politicalAffiliation) || '未填写' }}</text>
        </view>
      </view>
    </view>

    <!-- 工作信息 -->
    <view class="info-section">
      <view class="section-title">工作信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">部门</text>
          <text class="value">{{ staffInfo.dept?.deptName || '未分配部门' }}</text>
        </view>
        <view class="info-item">
          <text class="label">职务</text>
          <text class="value">{{ staffInfo.postNames || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">职称</text>
          <text class="value">{{ getTitleText(staffInfo.titles) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">职业资格</text>
          <text class="value">{{ getCertificateText(staffInfo.certificates) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">岗级</text>
          <text class="value">{{ getPostLevelText(staffInfo.postLevel, staffInfo.salaryLevel) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">入职时间</text>
          <text class="value">{{ formatDate(staffInfo.entryDate) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">合同签订</text>
          <text class="value">{{ formatDate(staffInfo.contractSign) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">合同期满</text>
          <text class="value">{{ formatDate(staffInfo.contractExpire) || '未填写' }}</text>
        </view>
      </view>
    </view>

    <!-- 教育背景 -->
    <view class="info-section">
      <view class="section-title">教育背景</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">最高学历</text>
          <text class="value">{{ getDegreeText(staffInfo.degree) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">最高学历专业</text>
          <text class="value">{{ staffInfo.major || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">最高学历毕业院校</text>
          <text class="value">{{ staffInfo.graduateSchool || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">初始学历</text>
          <text class="value">{{ getDegreeText(staffInfo.initialDegree) || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">初始学历专业</text>
          <text class="value">{{ staffInfo.initialMajor || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">初始学历毕业院校</text>
          <text class="value">{{ staffInfo.initialSchool || '未填写' }}</text>
        </view>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="info-section">
      <view class="section-title">其他信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">家庭住址</text>
          <text class="value">{{ staffInfo.homePlace || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">紧急联系人</text>
          <text class="value">{{ staffInfo.contact || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">紧急联系电话</text>
          <text class="value">{{ staffInfo.telephone || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">备注</text>
          <text class="value">{{ staffInfo.remark || '无' }}</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <uv-button type="primary" @click="handleEdit">编辑信息</uv-button>
    </view>
  </view>
</template>

<script>
import { getUser } from "@/api/system/user";

export default {
  data() {
    return {
      staffInfo: {},
      userId: '',
      nickName: ''
    }
  },
  
  onLoad(options) {
    this.userId = options.userId;
    this.nickName = options.nickName;
    this.getStaffInfo();
  },
  
  methods: {
    // 获取员工信息
    async getStaffInfo() {
      try {
        const res = await getUser(this.userId);
        this.staffInfo = res.data;
      } catch (error) {
        console.error('获取员工信息失败:', error);
        uni.showToast({
          title: '获取员工信息失败',
          icon: 'none'
        });
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '0': '在职',
        '1': '离职',
        '2': '退休',
        '3': '试用',
        '4': '返聘'
      };
      return statusMap[status] || '未知';
    },
    
    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        '0': 'success',
        '1': 'error',
        '2': 'warning',
        '3': 'primary',
        '4': 'info'
      };
      return typeMap[status] || 'default';
    },
    
    // 获取职称文本
    getTitleText(titles) {
      const titleMap = {
        '1': '高级工程师',
        '2': '工程师',
        '3': '助理工程师',
        '4': '技术员'
      };
      return titleMap[titles] || '';
    },
    
    // 获取职业资格文本
    getCertificateText(certificates) {
      if (!certificates) return '';
      const certificateMap = {
        '1': '注册测绘师',
        '2': '注册建筑师',
        '3': '注册结构师',
        '4': '注册造价师'
      };
      const certArray = certificates.split(',');
      return certArray.map(cert => certificateMap[cert] || cert).join('、');
    },
    
    // 获取学历文本
    getDegreeText(degree) {
      const degreeMap = {
        '1': '博士',
        '2': '硕士',
        '3': '本科',
        '4': '专科',
        '5': '高中'
      };
      return degreeMap[degree] || '';
    },
    
    // 获取政治面貌文本
    getPoliticalText(politicalAffiliation) {
      if (!politicalAffiliation) return '';
      const politicalMap = {
        '1': '中共党员',
        '2': '中共预备党员',
        '3': '共青团员',
        '4': '民革党员',
        '5': '民盟盟员',
        '6': '民建会员',
        '7': '民进会员',
        '8': '农工党党员',
        '9': '致公党党员',
        '10': '九三学社社员',
        '11': '台盟盟员',
        '12': '无党派人士',
        '13': '群众'
      };
      const politicalArray = politicalAffiliation.split(',');
      return politicalArray.map(political => politicalMap[political] || political).join('、');
    },
    
    // 获取岗级文本
    getPostLevelText(postLevel, salaryLevel) {
      const postLevelMap = {
        '1': '一级',
        '2': '二级',
        '3': '三级',
        '4': '四级',
        '5': '五级'
      };
      const salaryLevelMap = {
        '1': 'A',
        '2': 'B',
        '3': 'C',
        '4': 'D',
        '5': 'E'
      };
      const postText = postLevelMap[postLevel] || '';
      const salaryText = salaryLevelMap[salaryLevel] || '';
      return postText && salaryText ? `${postText}${salaryText}` : '';
    },
    
    // 根据身份证计算年龄
    getAgeByIdCard(idCard) {
      if (!idCard) return 0;
      const birthStr = idCard.substring(6, 14);
      const birthYear = parseInt(birthStr.substring(0, 4), 10);
      const birthMonth = parseInt(birthStr.substring(4, 6), 10) - 1;
      const birthDay = parseInt(birthStr.substring(6, 8), 10);
      const birthDate = new Date(birthYear, birthMonth, birthDay);
      const now = new Date();
      let age = now.getFullYear() - birthDate.getFullYear();
      const monthDiff = now.getMonth() - birthDate.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    // 编辑信息
    handleEdit() {
      uni.navigateTo({
        url: `/pages/oa/staff/staffEdit?userId=${this.userId}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.header-section {
  background-color: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .avatar-section {
    margin-right: 30rpx;
  }
  
  .basic-info {
    flex: 1;
    
    .name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .dept {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .status {
      display: inline-block;
    }
  }
}

.info-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    border-left: 6rpx solid #007aff;
    padding-left: 20rpx;
  }
  
  .info-grid {
    .info-item {
      display: flex;
      margin-bottom: 25rpx;
      
      .label {
        width: 200rpx;
        font-size: 28rpx;
        color: #666;
      }
      
      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        word-break: break-all;
      }
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  
  .uv-button {
    width: 100%;
  }
}
</style>