主要更新uniapp相关功能
This commit is contained in:
hero920103 committed
1 parent
aa92ca40a2
commit
5b4dbb2b46
65 files changed
+8532
-1921
No files matched your search
@@ -0,0 +1,481 @@
|
||||
<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="您暂无员工档案"
|
||||
/>
|
||||
<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, onMounted } from 'vue'
|
||||
import {
|
||||
getMyEmployeeFile,
|
||||
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)
|
||||
|
||||
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(() => {
|
||||
if (!isLoggedIn()) {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
loadFile()
|
||||
})
|
||||
|
||||
async function loadFile() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await getMyEmployeeFile()
|
||||
file.value = (data && data.file) || null
|
||||
records.value = (data && data.records) || []
|
||||
} 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>
|
||||
Reference in new issue
Block a user