496 lines
11 KiB
Vue
496 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<scroll-view class="body" scroll-y :show-scrollbar="false">
|
|
<view class="body-inner">
|
|
<view v-if="loading" class="state-box">
|
|
<text class="state-text">加载中...</text>
|
|
</view>
|
|
<u-empty
|
|
v-else-if="!file"
|
|
mode="list"
|
|
:icon-size="80"
|
|
:text="fileId ? '该员工暂无档案' : '您暂无员工档案'"
|
|
/>
|
|
<block v-else>
|
|
<view class="hero-card">
|
|
<view class="hero-avatar">
|
|
<text>{{ avatarText }}</text>
|
|
</view>
|
|
<view class="hero-info">
|
|
<view class="hero-name-row">
|
|
<text class="hero-name">{{ file.employee_name || '本人' }}</text>
|
|
<u-tag
|
|
:text="getEmploymentStatusLabel(file.employment_status)"
|
|
size="mini"
|
|
bg-color="rgba(255,255,255,0.22)"
|
|
color="#ffffff"
|
|
border-color="rgba(255,255,255,0.22)"
|
|
class="status-tag"
|
|
/>
|
|
</view>
|
|
<text class="hero-sub">{{ positionText }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="group-card">
|
|
<view class="group-head">
|
|
<view class="group-bar" />
|
|
<text class="group-title">档案完整度</text>
|
|
<text class="group-extra">{{ file.completeness || 0 }}%</text>
|
|
</view>
|
|
<view class="progress-track">
|
|
<view class="progress-fill" :style="{ width: (file.completeness || 0) + '%' }" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="group-card">
|
|
<view class="group-head">
|
|
<view class="group-bar" />
|
|
<text class="group-title">基本信息</text>
|
|
</view>
|
|
<view v-for="row in baseInfo" :key="row.label" class="row">
|
|
<text class="row-label">{{ row.label }}</text>
|
|
<text class="row-text">{{ row.value || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="group-card">
|
|
<view class="group-head">
|
|
<view class="group-bar" />
|
|
<text class="group-title">联系方式</text>
|
|
</view>
|
|
<view v-for="row in contactInfo" :key="row.label" class="row">
|
|
<text class="row-label">{{ row.label }}</text>
|
|
<text class="row-text">{{ row.value || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="group-card">
|
|
<view class="group-head">
|
|
<view class="group-bar" />
|
|
<text class="group-title">紧急联系人</text>
|
|
</view>
|
|
<view v-for="row in emergencyInfo" :key="row.label" class="row">
|
|
<text class="row-label">{{ row.label }}</text>
|
|
<text class="row-text">{{ row.value || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-for="group in recordGroups" :key="group.type" class="group-card">
|
|
<view class="group-head">
|
|
<view class="group-bar" />
|
|
<text class="group-title">{{ group.label }}</text>
|
|
<text class="group-extra">{{ group.list.length }}</text>
|
|
</view>
|
|
<view v-if="group.list.length === 0" class="record-empty">
|
|
<text class="record-empty-text">暂无记录</text>
|
|
</view>
|
|
<view v-else v-for="record in group.list" :key="record.id" class="record-item">
|
|
<view class="record-top">
|
|
<text class="record-title">{{ record.title || group.label }}</text>
|
|
<text v-if="record.sub_title" class="record-sub">{{ record.sub_title }}</text>
|
|
</view>
|
|
<view v-if="recordDate(record)" class="record-date">
|
|
<text>{{ recordDate(record) }}</text>
|
|
</view>
|
|
<text v-if="record.extra" class="record-extra">{{ record.extra }}</text>
|
|
<text v-if="record.description" class="record-desc">{{ record.description }}</text>
|
|
<view v-if="record.attachment_url" class="record-file" @tap="openAttachment(record.attachment_url)">
|
|
<FaIcon name="paperclip" color="#2563eb" :size="13" />
|
|
<text>查看附件</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="bottom-space" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import {
|
|
getMyEmployeeFile,
|
|
getEmployeeFileDetail,
|
|
getEmploymentStatusLabel,
|
|
getMaritalStatusLabel,
|
|
FILE_RECORD_TYPE_OPTIONS
|
|
} from '@/api/oa.js'
|
|
import { isLoggedIn } from '@/utils/auth.js'
|
|
import { getBaseURL } from '@/api/request.js'
|
|
|
|
const GENDER_TEXT = { 0: '未知', 1: '男', 2: '女' }
|
|
|
|
const file = ref(null)
|
|
const records = ref([])
|
|
const loading = ref(true)
|
|
|
|
/**
|
|
* 档案 ID。
|
|
* 带 id（HR 从列表进入）看指定员工档案；不带 id 则看本人档案。
|
|
*/
|
|
const fileId = ref(0)
|
|
|
|
const avatarText = computed(() => {
|
|
const name = (file.value && file.value.employee_name) || '我'
|
|
return name.slice(0, 1)
|
|
})
|
|
|
|
const positionText = computed(() => {
|
|
if (!file.value) return ''
|
|
const parts = [file.value.department_name || file.value.department, file.value.position].filter(Boolean)
|
|
return parts.join(' · ')
|
|
})
|
|
|
|
const baseInfo = computed(() => {
|
|
const f = file.value || {}
|
|
return [
|
|
{ label: '档案编号', value: f.file_no },
|
|
{ label: '员工账号', value: f.employee_account },
|
|
{ label: '性别', value: GENDER_TEXT[Number(f.gender)] || '未知' },
|
|
{ label: '生日', value: f.birthday },
|
|
{ label: '身份证号', value: f.id_card },
|
|
{ label: '学历', value: f.education },
|
|
{ label: '民族', value: f.nation },
|
|
{ label: '政治面貌', value: f.political_status },
|
|
{ label: '婚姻状况', value: getMaritalStatusLabel(f.marital_status) },
|
|
{ label: '籍贯', value: f.native_place },
|
|
{ label: '所属部门', value: f.department_name || f.department },
|
|
{ label: '职位', value: f.position },
|
|
{ label: '入职日期', value: f.hire_date },
|
|
{ label: '转正日期', value: f.regular_date },
|
|
{ label: '离职日期', value: f.leave_date },
|
|
{ label: '户籍地址', value: f.household_address },
|
|
{ label: '现居住地', value: f.current_address }
|
|
]
|
|
})
|
|
|
|
const contactInfo = computed(() => {
|
|
const f = file.value || {}
|
|
return [
|
|
{ label: '手机号码', value: f.phone },
|
|
{ label: '工作邮箱', value: f.work_email },
|
|
{ label: '个人邮箱', value: f.email },
|
|
{ label: '家庭住址', value: f.home_address }
|
|
]
|
|
})
|
|
|
|
const emergencyInfo = computed(() => {
|
|
const f = file.value || {}
|
|
return [
|
|
{ label: '联系人', value: f.emergency_contact },
|
|
{ label: '联系电话', value: f.emergency_phone },
|
|
{ label: '关系', value: f.emergency_relation }
|
|
]
|
|
})
|
|
|
|
const recordGroups = computed(() => {
|
|
return FILE_RECORD_TYPE_OPTIONS.map(option => ({
|
|
type: option.value,
|
|
label: option.label,
|
|
list: records.value.filter(r => Number(r.type) === option.value)
|
|
}))
|
|
})
|
|
|
|
onLoad((options) => {
|
|
if (!isLoggedIn()) {
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
return
|
|
}
|
|
// 带 id 进入（HR 从档案列表进入）看指定员工档案；不带 id 则看本人档案
|
|
fileId.value = Number((options && options.id) || 0)
|
|
loadFile()
|
|
})
|
|
|
|
async function loadFile() {
|
|
loading.value = true
|
|
try {
|
|
const data = fileId.value
|
|
? await getEmployeeFileDetail(fileId.value)
|
|
: await getMyEmployeeFile()
|
|
file.value = (data && data.file) || null
|
|
records.value = (data && data.records) || []
|
|
if (fileId.value && file.value && file.value.employee_name) {
|
|
uni.setNavigationBarTitle({ title: `${file.value.employee_name}的档案` })
|
|
}
|
|
} catch (e) {
|
|
file.value = null
|
|
records.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function fmtDate(value) {
|
|
if (!value) return ''
|
|
const text = String(value)
|
|
return text.length >= 10 ? text.slice(0, 10) : text
|
|
}
|
|
|
|
function recordDate(record) {
|
|
const start = fmtDate(record.start_date)
|
|
const end = fmtDate(record.end_date)
|
|
if (!start && !end) return ''
|
|
if (start && end) return `${start} ~ ${end}`
|
|
return start || end
|
|
}
|
|
|
|
function absoluteUrl(url) {
|
|
if (!url) return ''
|
|
if (/^https?:\/\//i.test(url)) return url
|
|
const base = (getBaseURL() || '').replace(/\/$/, '')
|
|
return base + (url.startsWith('/') ? url : '/' + url)
|
|
}
|
|
|
|
function openAttachment(url) {
|
|
const full = absoluteUrl(url)
|
|
if (!full) return
|
|
uni.setClipboardData({
|
|
data: full,
|
|
success: () => uni.showToast({ title: '链接已复制', icon: 'none' })
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/src/styles/page-common.scss';
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: $color-bg-page;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
}
|
|
|
|
.body-inner {
|
|
padding: 24rpx $page-padding-x 0;
|
|
}
|
|
|
|
.hero-card {
|
|
@include card;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
padding: 32rpx 28rpx;
|
|
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
|
|
box-shadow: $shadow-float;
|
|
}
|
|
|
|
.hero-avatar {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: $radius-full;
|
|
background: rgba(255, 255, 255, 0.22);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hero-avatar text {
|
|
font-size: 44rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.hero-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.hero-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.hero-name {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
min-width: 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.status-tag {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hero-sub {
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.group-card {
|
|
@include card;
|
|
margin-top: 20rpx;
|
|
padding: 24rpx 28rpx;
|
|
}
|
|
|
|
.group-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.group-bar {
|
|
width: 6rpx;
|
|
height: 26rpx;
|
|
border-radius: 3rpx;
|
|
background: $color-primary;
|
|
}
|
|
|
|
.group-title {
|
|
font-size: 29rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
}
|
|
|
|
.group-extra {
|
|
margin-left: auto;
|
|
font-size: 24rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.progress-track {
|
|
height: 14rpx;
|
|
margin-top: 20rpx;
|
|
border-radius: $radius-full;
|
|
background: $color-bg-page;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
border-radius: $radius-full;
|
|
background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
padding: 22rpx 0;
|
|
border-bottom: 1rpx solid $color-divider;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.row-label {
|
|
font-size: 27rpx;
|
|
color: $color-text-secondary;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.row-text {
|
|
font-size: 27rpx;
|
|
color: $color-text;
|
|
text-align: right;
|
|
flex: 1;
|
|
min-width: 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-item {
|
|
padding: 22rpx 0;
|
|
border-bottom: 1rpx solid $color-divider;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.record-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14rpx;
|
|
}
|
|
|
|
.record-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
min-width: 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-sub {
|
|
font-size: 24rpx;
|
|
color: $color-text-secondary;
|
|
min-width: 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-date {
|
|
margin-top: 10rpx;
|
|
font-size: 23rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.record-extra {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: $color-text-secondary;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-desc {
|
|
display: block;
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.6;
|
|
color: $color-text-muted;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.record-file {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
margin-top: 14rpx;
|
|
font-size: 24rpx;
|
|
color: $color-primary;
|
|
}
|
|
|
|
.record-empty {
|
|
padding: 24rpx 0;
|
|
}
|
|
|
|
.record-empty-text {
|
|
font-size: 25rpx;
|
|
color: $color-text-muted;
|
|
}
|
|
|
|
.state-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 200rpx 48rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 26rpx;
|
|
color: $color-text-muted;
|
|
text-align: center;
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 48rpx;
|
|
}
|
|
</style> |