ef0614f987
本次提交完成多项核心功能开发与优化： 1. 修复菜单路径计算逻辑，目录节点路径拼接祖先路径 2. 为绩效相关实体类添加日期格式化注解，统一参数绑定格式 3. 新增10+个绩效系统API接口，覆盖部门、薪资、考核等模块 4. 新增绩效系统首页、部门管理、薪资明细等多个页面组件
143 lines
2.6 KiB
Vue
143 lines
2.6 KiB
Vue
<template>
|
|
<div class="page-header">
|
|
<div class="header-left">
|
|
<span class="breadcrumb">{{ deptName }} · {{ period }}</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="custom-tabs">
|
|
<div
|
|
v-for="tab in tabOptions"
|
|
:key="tab.key"
|
|
class="custom-tab"
|
|
:class="{ active: activeTab === tab.key }"
|
|
@click="$emit('update:activeTab', tab.key)"
|
|
>{{ tab.label }}</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<el-tooltip content="刷新" placement="top">
|
|
<el-button class="refresh-btn" size="mini" icon="el-icon-refresh" circle @click="$emit('refresh')" />
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'PageHeader',
|
|
props: {
|
|
deptName: { type: String, default: '' },
|
|
period: { type: String, default: '' },
|
|
activeTab: { type: String, default: '' },
|
|
tabOptions: {
|
|
type: Array,
|
|
default: () => [
|
|
{ key: 'perfConfig', label: '考核配置' },
|
|
{ key: 'salary', label: '薪资明细' },
|
|
{ key: 'summary', label: '统计' }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
background-color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.breadcrumb {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
white-space: nowrap;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 14px;
|
|
background-color: #409eff;
|
|
border-radius: 2px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.custom-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.custom-tab {
|
|
position: relative;
|
|
padding: 0 16px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #606266;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
color: #409eff;
|
|
}
|
|
|
|
&.active {
|
|
color: #409eff;
|
|
font-weight: 600;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 10px;
|
|
right: 10px;
|
|
height: 2px;
|
|
background-color: #409eff;
|
|
border-radius: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.refresh-btn {
|
|
border: none;
|
|
font-size: 14px;
|
|
color: #909399;
|
|
|
|
&:hover {
|
|
color: #409eff;
|
|
background-color: #f0f5ff;
|
|
}
|
|
}
|
|
</style>
|