yifengyide/src/views/file_bag/index.vue

<template>
    <div class="file-detail-container">
        <lay-card title="员工档案详情" shadow="always">
            <template #title>
                <div class="card-title">
                    <div>员工档案详情</div>
                    <lay-button type="primary" size="sm" @click="goBack">返回</lay-button>
                </div>
            </template>
            <div  class="user-detail">
                <!-- 基本信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">基本信息</h3>
                    <div class="user-header">
                        <div class="avatar-container">
                            <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="user-avatar">
                        </div>
                        <div class="basic-info">
                            <div class="info-grid">
                                <div class="info-item">
                                    <span class="label">姓名：</span>
                                    <span class="value">{{ userInfo.nickname || '暂无' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">工号：</span>
                                    <span class="value">{{ userInfo.work_number || userInfo.code || '暂无' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">性别：</span>
                                    <span class="value">{{ genderText }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">手机号：</span>
                                    <span class="value">{{ userInfo.mobile || '暂无' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">邮箱：</span>
                                    <span class="value">{{ userInfo.email || '暂无' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">生日：</span>
                                    <span class="value">{{ userInfo.birthday || '暂无' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工作信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">工作信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">科室：</span>
                            <span class="value">{{ groupName || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">科室级别：</span>
                            <span class="value">{{ userInfo.group_level || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">党支部：</span>
                            <span class="value">{{ partyName || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">党支部级别：</span>
                            <span class="value">{{ userInfo.party_level || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">岗位名称：</span>
                            <span class="value">{{ userInfo.position || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">行政职务：</span>
                            <span class="value">{{ userInfo.administrative_position || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">业务性质：</span>
                            <span class="value">{{ userInfo.business_nature || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">角色：</span>
                            <span class="value">{{ roleName || '暂无' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 证件信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">证件信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">身份证号码：</span>
                            <span class="value">{{ userInfo.member_code || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">资格证编码：</span>
                            <span class="value">{{ userInfo.certificate_code || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">执业证编码：</span>
                            <span class="value">{{ userInfo.license_code || '暂无' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 系统信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">系统信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">账户名：</span>
                            <span class="value">{{ userInfo.username || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">状态：</span>
                            <span class="value">
                                <lay-tag :type="userInfo.status === 'normal' ? 'success' : 'danger'">
                                    {{ userInfo.status === 'normal' ? '正常' : '禁用' }}
                                </lay-tag>
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="label">创建时间：</span>
                            <span class="value">{{ formatDate(userInfo.createtime) }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">更新时间：</span>
                            <span class="value">{{ formatDate(userInfo.updatetime) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </lay-card>
        <lay-card>
          
        </lay-card>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const userId = ref(route.query.id || '1');
const userInfo = ref({});
const loading = ref(true);
const defaultAvatar = ref('/src/assets/default-avatar.png');
const groupName = ref('');
const partyName = ref('');
const roleName = ref('');

// 计算性别显示文本
const genderText = computed(() => {
    if (userInfo.value.gender === 1) {
        return '男';
    } else if (userInfo.value.gender === 2) {
        return '女';
    } else {
        return '未知';
    }
});

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return '暂无';
    return dateString;
};

// 获取用户详情（使用模拟数据）
const getUserDetail = () => {
    // 模拟用户数据
    userInfo.value = {
        id: 1,
        code: 'GH001',
        auth_group_id: 2,
        group_id: 3,
        party_id: 1,
        work_number: 'GH001',
        nickname: '张医生',
        email: 'zhangdoctor@example.com',
        mobile: '13800138000',
        avatar: 'https://picsum.photos/200',
        member_code: '110101199001011234',
        gender: 1,
        birthday: '1990-01-01',
        createtime: '2023-01-01 08:00:00',
        updatetime: '2023-06-15 14:30:00',
        token: 'abcdef123456',
        status: 'normal',
        username: 'zhangdoctor',
        password: '******',
        group_level: '三级',
        party_level: '二级',
        position: '主治医师',
        business_nature: '临床',
        certificate_code: 'ZG20150001',
        license_code: 'ZY20150001',
        administrative_position: '科室副主任'
    };

    // 模拟科室、党支部和角色信息
    groupName.value = '内科';
    partyName.value = '医院第一党支部';
    roleName.value = '医生';

    loading.value = false;
};

// 返回上一页
const goBack = () => {
    router.go(-1);
};

// 使用模拟数据，延迟一秒模拟加载效果
onMounted(() => {
    getUserDetail();
});
</script>

<style scoped>
.file-detail-container {
    padding: 20px;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.loading-container {
    padding: 20px;
}

.user-detail {
    padding: 10px;
}

.detail-section {
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.user-header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.avatar-container {
    margin-right: 20px;
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.basic-info {
    flex: 1;
}

.info-row {
    display: flex;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.label {
    color: #666;
    min-width: 90px;
    display: inline-block;
    font-weight: 500;
}

.value {
    color: #333;
    word-break: break-all;
}

@media (max-width: 768px) {
    .user-header {
        flex-direction: column;
        align-items: center;
    }

    .avatar-container {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .info-row {
        flex-direction: column;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}
</style>