做双端审批流
This commit is contained in:
hero920103 committed
1 parent
5b4dbb2b46
commit
ffaadc26ae
69 files changed
+6662
-1071
No files matched your search
@@ -0,0 +1,496 @@
|
||||
<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>
|
||||
@@ -1,241 +1,233 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view class="body" scroll-y :show-scrollbar="false">
|
||||
<view class="body-inner">
|
||||
<view class="toolbar">
|
||||
<u-search
|
||||
v-model="keyword"
|
||||
placeholder="搜索姓名、账号、手机或档案编号"
|
||||
:show-action="false"
|
||||
shape="round"
|
||||
bg-color="#f1f5f9"
|
||||
color="#0f172a"
|
||||
@search="onSearch"
|
||||
@clear="onSearch"
|
||||
/>
|
||||
<u-tabs
|
||||
:list="STATUS_TABS"
|
||||
:current="statusIndex"
|
||||
:scrollable="false"
|
||||
line-color="#2563eb"
|
||||
:line-width="40"
|
||||
:line-height="6"
|
||||
:active-style="{ color: '#2563eb', fontWeight: '600' }"
|
||||
:inactive-style="{ color: '#475569' }"
|
||||
:item-style="{ height: '84rpx' }"
|
||||
@change="onTabChange"
|
||||
/>
|
||||
<u-dropdown active-color="#2563eb" :height="84">
|
||||
<u-dropdown-item
|
||||
v-model="selectedOrgId"
|
||||
title="部门"
|
||||
:options="deptOptions"
|
||||
height="520rpx"
|
||||
@change="onDeptChange"
|
||||
/>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
|
||||
<scroll-view class="list-scroll" scroll-y :show-scrollbar="false" @scrolltolower="loadMore">
|
||||
<view v-if="loading" class="state-box">
|
||||
<text class="state-text">加载中...</text>
|
||||
</view>
|
||||
<u-empty
|
||||
v-else-if="!file"
|
||||
v-else-if="list.length === 0"
|
||||
mode="list"
|
||||
:icon-size="80"
|
||||
text="您暂无员工档案"
|
||||
:text="keyword ? '未找到相关档案' : '暂无员工档案'"
|
||||
/>
|
||||
<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 class="file-list">
|
||||
<view v-for="item in list" :key="item.id" class="file-card" @tap="openDetail(item.id)">
|
||||
<u-avatar
|
||||
:text="firstChar(item.employee_name)"
|
||||
:size="48"
|
||||
bg-color="#2563eb"
|
||||
font-size="18"
|
||||
/>
|
||||
<view class="file-body">
|
||||
<view class="file-head">
|
||||
<text class="file-name">{{ item.employee_name || '未命名' }}</text>
|
||||
<text class="status-tag" :class="'st' + item.employment_status">
|
||||
{{ getEmploymentStatusLabel(item.employment_status) }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="file-sub">{{ subLine(item) }}</text>
|
||||
<view class="file-foot">
|
||||
<text class="file-no">{{ item.file_no || '暂无编号' }}</text>
|
||||
<text class="file-rate">完整度 {{ item.completeness || 0 }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="hero-sub">{{ positionText }}</text>
|
||||
<u-icon name="arrow-right" color="#94a3b8" size="16" />
|
||||
</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 v-if="hasMore" class="more-tip" @tap="loadMore">
|
||||
<text>{{ loadingMore ? '加载中...' : '加载更多' }}</text>
|
||||
</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 v-else class="more-tip end">
|
||||
<text>已加载全部 {{ total }} 份档案</text>
|
||||
</view>
|
||||
</block>
|
||||
<view class="bottom-space" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
/**
|
||||
* 员工档案（HR 视角）：展示全公司员工的档案列表。
|
||||
*
|
||||
* 权限口径：租户角色里勾选了「员工档案」菜单即为 HR，可见全公司档案；
|
||||
* 未开通该权限的用户自动降级为查看本人档案（跳详情页），与旧版行为一致。
|
||||
*/
|
||||
import { ref, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import {
|
||||
getMyEmployeeFile,
|
||||
getEmploymentStatusLabel,
|
||||
getMaritalStatusLabel,
|
||||
FILE_RECORD_TYPE_OPTIONS
|
||||
getEmployeeFileAccess,
|
||||
fetchEmployeeFiles,
|
||||
getEmploymentStatusLabel
|
||||
} from '@/api/oa.js'
|
||||
// 组织树复用通讯录接口（同一套组织数据，仅用于部门筛选）
|
||||
import { fetchContactOrgTree } from '@/api/contact.js'
|
||||
import { isLoggedIn } from '@/utils/auth.js'
|
||||
import { getBaseURL } from '@/api/request.js'
|
||||
|
||||
const GENDER_TEXT = { 0: '未知', 1: '男', 2: '女' }
|
||||
/** 在职状态 tab：全部 / 试用 / 正式 / 离职，索引与 employment_status 对应（0 表示不筛选） */
|
||||
const STATUS_TABS = [{ name: '全部' }, { name: '试用' }, { name: '正式' }, { name: '离职' }]
|
||||
const STATUS_VALUES = [0, 1, 2, 3]
|
||||
|
||||
const file = ref(null)
|
||||
const records = ref([])
|
||||
const loading = ref(true)
|
||||
const keyword = ref('')
|
||||
const orgs = ref([])
|
||||
const selectedOrgId = ref(0)
|
||||
const statusIndex = ref(0)
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = 20
|
||||
const loading = ref(false)
|
||||
const loadingMore = ref(false)
|
||||
const hasMore = ref(false)
|
||||
|
||||
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)
|
||||
}))
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
onLoad(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
loadFile()
|
||||
init()
|
||||
})
|
||||
|
||||
async function loadFile() {
|
||||
loading.value = true
|
||||
async function init() {
|
||||
let canViewAll = false
|
||||
try {
|
||||
const data = await getMyEmployeeFile()
|
||||
file.value = (data && data.file) || null
|
||||
records.value = (data && data.records) || []
|
||||
canViewAll = await getEmployeeFileAccess()
|
||||
} catch (e) {
|
||||
file.value = null
|
||||
records.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
canViewAll = false
|
||||
}
|
||||
if (!canViewAll) {
|
||||
// 无 HR 权限：保持原有「只能看本人档案」的行为
|
||||
uni.redirectTo({ url: '/pages/oa/employeefile/detail' })
|
||||
return
|
||||
}
|
||||
loadOrgTree()
|
||||
loadFiles(true)
|
||||
}
|
||||
|
||||
/** 部门下拉选项：全部 + 各部门（组织树含子级，展开为平铺列表） */
|
||||
const deptOptions = computed(() => {
|
||||
const options = [{ label: '全部部门', value: 0 }]
|
||||
flattenOrgs(orgs.value, options)
|
||||
return options
|
||||
})
|
||||
|
||||
/** 组织树拍平为部门列表 */
|
||||
function flattenOrgs(nodes, out) {
|
||||
;(nodes || []).forEach((node) => {
|
||||
if (node.org_name) {
|
||||
out.push({ label: node.org_name, value: node.id })
|
||||
}
|
||||
if (node.children && node.children.length) {
|
||||
flattenOrgs(node.children, out)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function loadOrgTree() {
|
||||
try {
|
||||
// 复用通讯录的组织树接口：同一套组织数据，仅用于筛选，不涉及联系人明细
|
||||
const tree = await fetchContactOrgTree()
|
||||
orgs.value = Array.isArray(tree) ? tree : []
|
||||
} catch (e) {
|
||||
orgs.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function fmtDate(value) {
|
||||
if (!value) return ''
|
||||
const text = String(value)
|
||||
return text.length >= 10 ? text.slice(0, 10) : text
|
||||
async function loadFiles(reset) {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
loading.value = true
|
||||
} else {
|
||||
loadingMore.value = true
|
||||
}
|
||||
try {
|
||||
const res = await fetchEmployeeFiles({
|
||||
keyword: keyword.value,
|
||||
status: STATUS_VALUES[statusIndex.value] || 0,
|
||||
orgId: selectedOrgId.value,
|
||||
page: page.value,
|
||||
pageSize
|
||||
})
|
||||
list.value = reset ? res.list : list.value.concat(res.list)
|
||||
total.value = res.total
|
||||
hasMore.value = list.value.length < res.total
|
||||
} catch (e) {
|
||||
if (reset) list.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
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 loadMore() {
|
||||
if (!hasMore.value || loading.value || loadingMore.value) return
|
||||
page.value += 1
|
||||
loadFiles(false)
|
||||
}
|
||||
|
||||
function absoluteUrl(url) {
|
||||
if (!url) return ''
|
||||
if (/^https?:\/\//i.test(url)) return url
|
||||
const base = (getBaseURL() || '').replace(/\/$/, '')
|
||||
return base + (url.startsWith('/') ? url : '/' + url)
|
||||
function onSearch() {
|
||||
loadFiles(true)
|
||||
}
|
||||
|
||||
function openAttachment(url) {
|
||||
const full = absoluteUrl(url)
|
||||
if (!full) return
|
||||
uni.setClipboardData({
|
||||
data: full,
|
||||
success: () => uni.showToast({ title: '链接已复制', icon: 'none' })
|
||||
})
|
||||
function onTabChange(item, index) {
|
||||
statusIndex.value = index
|
||||
loadFiles(true)
|
||||
}
|
||||
|
||||
function onDeptChange() {
|
||||
loadFiles(true)
|
||||
}
|
||||
|
||||
function subLine(item) {
|
||||
const parts = []
|
||||
if (item.position) parts.push(item.position)
|
||||
const dept = item.department_name || item.department
|
||||
if (dept) parts.push(dept)
|
||||
if (item.phone) parts.push(item.phone)
|
||||
return parts.length ? parts.join(' · ') : '暂无职位与联系方式'
|
||||
}
|
||||
|
||||
function firstChar(name) {
|
||||
return String(name || '?').charAt(0)
|
||||
}
|
||||
|
||||
function openDetail(id) {
|
||||
uni.navigateTo({ url: `/pages/oa/employeefile/detail?id=${id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -249,215 +241,117 @@ function openAttachment(url) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.body {
|
||||
.toolbar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
flex-shrink: 0;
|
||||
padding: 20rpx $page-padding-x 0;
|
||||
background: $color-card;
|
||||
box-shadow: $shadow-header;
|
||||
}
|
||||
|
||||
.list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.body-inner {
|
||||
.file-list {
|
||||
padding: 24rpx $page-padding-x 0;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
.file-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;
|
||||
gap: 22rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
&:active {
|
||||
background: $color-bg-page;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.file-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-name-row {
|
||||
.file-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: 36rpx;
|
||||
.file-name {
|
||||
font-size: 31rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
color: $color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 2rpx 12rpx;
|
||||
font-size: 20rpx;
|
||||
border-radius: $radius-sm;
|
||||
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%);
|
||||
}
|
||||
&.st2 {
|
||||
color: $color-primary;
|
||||
background: $color-primary-bg;
|
||||
}
|
||||
|
||||
.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;
|
||||
&.st3 {
|
||||
color: #94a3b8;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.file-sub {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 25rpx;
|
||||
color: $color-text-secondary;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
.file-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
gap: 16rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.file-no {
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-rate {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
font-size: 22rpx;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.record-empty {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
.more-tip {
|
||||
padding: 12rpx 0 4rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: $color-primary;
|
||||
|
||||
.record-empty-text {
|
||||
font-size: 25rpx;
|
||||
color: $color-text-muted;
|
||||
&.end {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.state-box {
|
||||
@@ -465,7 +359,7 @@ function openAttachment(url) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 200rpx 48rpx;
|
||||
padding: 160rpx 48rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
@@ -476,6 +370,6 @@ function openAttachment(url) {
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 48rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user