43069d8dc6
1. 新增部门产线绑定字段，优化部门列表展示 2. 添加薪资、考核、维度明细的批量新增/修改接口与实现 3. 新增绩效考核得分计算引擎与WMS数据拉取服务 4. 新增一键生成薪资与考核记录的弹窗功能 5. 优化配置页面UI与新增批量导入项目功能 6. 隐藏 coil/ship.vue 页面的校正按钮
144 lines
2.7 KiB
Vue
144 lines
2.7 KiB
Vue
<template>
|
|
<div class="page-header">
|
|
<div class="header-left">
|
|
<span class="breadcrumb">{{ deptName }}<template v-if="productionLine"> · {{ productionLine }}</template> · {{ 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: '' },
|
|
productionLine: { 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>
|