375 lines
8.1 KiB
Vue
375 lines
8.1 KiB
Vue
<template>
|
|
<view class="page">
|
|
<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="list.length === 0"
|
|
mode="list"
|
|
:icon-size="80"
|
|
:text="keyword ? '未找到相关档案' : '暂无员工档案'"
|
|
/>
|
|
<block v-else>
|
|
<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>
|
|
<u-icon name="arrow-right" color="#94a3b8" size="16" />
|
|
</view>
|
|
</view>
|
|
<view v-if="hasMore" class="more-tip" @tap="loadMore">
|
|
<text>{{ loadingMore ? '加载中...' : '加载更多' }}</text>
|
|
</view>
|
|
<view v-else class="more-tip end">
|
|
<text>已加载全部 {{ total }} 份档案</text>
|
|
</view>
|
|
</block>
|
|
<view class="bottom-space" />
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* 员工档案（HR 视角）：展示全公司员工的档案列表。
|
|
*
|
|
* 权限口径：租户角色里勾选了「员工档案」菜单即为 HR，可见全公司档案；
|
|
* 未开通该权限的用户自动降级为查看本人档案（跳详情页），与旧版行为一致。
|
|
*/
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import {
|
|
getEmployeeFileAccess,
|
|
fetchEmployeeFiles,
|
|
getEmploymentStatusLabel
|
|
} from '@/api/oa.js'
|
|
// 组织树复用通讯录接口（同一套组织数据，仅用于部门筛选）
|
|
import { fetchContactOrgTree } from '@/api/contact.js'
|
|
import { isLoggedIn } from '@/utils/auth.js'
|
|
|
|
/** 在职状态 tab：全部 / 试用 / 正式 / 离职，索引与 employment_status 对应（0 表示不筛选） */
|
|
const STATUS_TABS = [{ name: '全部' }, { name: '试用' }, { name: '正式' }, { name: '离职' }]
|
|
const STATUS_VALUES = [0, 1, 2, 3]
|
|
|
|
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)
|
|
|
|
onLoad(() => {
|
|
if (!isLoggedIn()) {
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
return
|
|
}
|
|
init()
|
|
})
|
|
|
|
async function init() {
|
|
let canViewAll = false
|
|
try {
|
|
canViewAll = await getEmployeeFileAccess()
|
|
} catch (e) {
|
|
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 = []
|
|
}
|
|
}
|
|
|
|
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 loadMore() {
|
|
if (!hasMore.value || loading.value || loadingMore.value) return
|
|
page.value += 1
|
|
loadFiles(false)
|
|
}
|
|
|
|
function onSearch() {
|
|
loadFiles(true)
|
|
}
|
|
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/src/styles/page-common.scss';
|
|
|
|
.page {
|
|
min-height: 100vh;
|
|
background: $color-bg-page;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.file-list {
|
|
padding: 24rpx $page-padding-x 0;
|
|
}
|
|
|
|
.file-card {
|
|
@include card;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 18rpx;
|
|
|
|
&:active {
|
|
background: $color-bg-page;
|
|
}
|
|
}
|
|
|
|
.file-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.file-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.file-name {
|
|
font-size: 31rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-tag {
|
|
flex-shrink: 0;
|
|
padding: 2rpx 12rpx;
|
|
font-size: 20rpx;
|
|
border-radius: $radius-sm;
|
|
color: $color-text-muted;
|
|
background: $color-bg-page;
|
|
|
|
&.st2 {
|
|
color: $color-primary;
|
|
background: $color-primary-bg;
|
|
}
|
|
|
|
&.st3 {
|
|
color: #94a3b8;
|
|
background: #f1f5f9;
|
|
}
|
|
}
|
|
|
|
.file-sub {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
font-size: 25rpx;
|
|
color: $color-text-secondary;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.file-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
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;
|
|
}
|
|
|
|
.more-tip {
|
|
padding: 12rpx 0 4rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: $color-primary;
|
|
|
|
&.end {
|
|
color: $color-text-muted;
|
|
}
|
|
}
|
|
|
|
.state-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 160rpx 48rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.state-text {
|
|
font-size: 26rpx;
|
|
color: $color-text-muted;
|
|
text-align: center;
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 40rpx;
|
|
}
|
|
</style> |