bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员库

This commit is contained in:
cwchen 2025-10-21 10:37:49 +08:00
parent f264bc7fbf
commit 9c38588a8f
4 changed files with 717 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/router/index.js
View File

@ -237,7 +237,7 @@ export const dynamicRoutes = [
]
},
{
path: '/EnterpriseForm',
path: '/enterpriseForm',
component: Layout,
hidden: true,
permissions: ['enterpriseLibrary:enterprise:add'],
@ -251,7 +251,7 @@ export const dynamicRoutes = [
]
},
{
path: '/EnterpriseDetail',
path: '/enterpriseDetail',
component: Layout,
hidden: true,
permissions: ['enterpriseLibrary:enterprise:detail'],
@ -265,7 +265,7 @@ export const dynamicRoutes = [
]
},
{
path: '/EnterpriseKnowledge',
path: '/enterpriseKnowledge',
component: Layout,
hidden: true,
permissions: ['enterpriseLibrary:enterprise:EnterpriseKnowledge'],
@ -277,9 +277,22 @@ export const dynamicRoutes = [
meta: { title: '企业知识库', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
}
]
},
{
path: '/personnel',
component: Layout,
hidden: true,
permissions: ['enterpriseLibrary:personnel:list'],
children: [
{
path: 'index',
component: () => import('@/views/enterpriseLibrary/personnel/index'),
name: 'Personnel',
meta: { title: '人员库', activeMenu: '/enterpriseLibrary/personnel', noCache: true }
}
]
}
]
// 防止连续点击多次路由报错

159
src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue
View File

@ -9,69 +9,18 @@
<!-- 知识库卡片网格 -->
<div class="knowledge-grid">
<!-- 业绩库 -->
<div class="knowledge-card" @click="handleCardClick('performance')">
<div
class="knowledge-card"
v-for="(card, index) in knowledgeCards"
:key="index"
@click="handleCardClick(card)"
>
<div class="card-icon">
<img :src="enterpriseKnowledgeIcon" alt="业绩库" />
<img :src="card.icon" :alt="card.title" />
</div>
<div class="card-content">
<h3 class="card-title">业绩库</h3>
<p class="card-description">业绩库主要管理企业的项目业绩信息, 包括合同、验收报告、中标通知书等</p>
</div>
</div>
<!-- 人员库 -->
<div class="knowledge-card" @click="handleCardClick('personnel')">
<div class="card-icon">
<img :src="enterpriseKnowledgeIcon" alt="人员库" />
</div>
<div class="card-content">
<h3 class="card-title">人员库</h3>
<p class="card-description">人员库主要管理企业的人员资质信息, 包括岗位、工作经验、员工证书等</p>
</div>
</div>
<!-- 资质库 -->
<div class="knowledge-card" @click="handleCardClick('qualification')">
<div class="card-icon">
<img :src="enterpriseKnowledgeIcon" alt="资质库" />
</div>
<div class="card-content">
<h3 class="card-title">资质库</h3>
<p class="card-description">资质库主要管理企业的资质证书信息, 包括软著、专利、荣誉等</p>
</div>
</div>
<!-- 技术方案库 -->
<div class="knowledge-card" @click="handleCardClick('technical')">
<div class="card-icon">
<img :src="enterpriseKnowledgeIcon" alt="技术方案库" />
</div>
<div class="card-content">
<h3 class="card-title">技术方案库</h3>
<p class="card-description">解决方案库主要用于管理企业内部技术方案、产品方案、项目方案等</p>
</div>
</div>
<!-- 工器具库 -->
<div class="knowledge-card" @click="handleCardClick('tools')">
<div class="card-icon">
<img :src="enterpriseKnowledgeIcon" alt="工器具库" />
</div>
<div class="card-content">
<h3 class="card-title">工器具库</h3>
<p class="card-description">工器具库主要用于登记工器具资料信息, 统一管理工器具清单等</p>
</div>
</div>
<!-- 财务库 -->
<div class="knowledge-card" @click="handleCardClick('financial')">
<div class="card-icon">
<img :src="enterpriseKnowledgeIcon" alt="财务库" />
</div>
<div class="card-content">
<h3 class="card-title">财务库</h3>
<p class="card-description">财务库主要管理企业的财务报告文档, 包括审计报告、年报等</p>
<h3 class="card-title">{{ card.title }}</h3>
<p class="card-description">{{ card.description }}</p>
</div>
</div>
</div>
@ -86,7 +35,57 @@ export default {
data() {
return {
enterpriseId: this.$route.query.id,
enterpriseKnowledgeIcon
enterpriseKnowledgeIcon,
knowledgeCards: [
{
type: 'performance',
title: '业绩库',
description: '业绩库主要管理企业的项目业绩信息, 包括合同、验收报告、中标通知书等',
icon: enterpriseKnowledgeIcon,
path: '/enterpriseLibrary/enterprise/performance',
name: 'Performance'
},
{
type: 'personnel',
title: '人员库',
description: '人员库主要管理企业的人员资质信息, 包括岗位、工作经验、员工证书等',
icon: enterpriseKnowledgeIcon,
path: '/enterpriseLibrary/enterprise/personnel',
name: 'Personnel'
},
{
type: 'qualification',
title: '资质库',
description: '资质库主要管理企业的资质证书信息, 包括软著、专利、荣誉等',
icon: enterpriseKnowledgeIcon,
path: '/enterpriseLibrary/enterprise/qualification',
name: 'Qualification'
},
{
type: 'technical',
title: '技术方案库',
description: '解决方案库主要用于管理企业内部技术方案、产品方案、项目方案等',
icon: enterpriseKnowledgeIcon,
path: '/enterpriseLibrary/enterprise/technical',
name: 'Technical'
},
{
type: 'tools',
title: '工器具库',
description: '工器具库主要用于登记工器具资料信息, 统一管理工器具清单等',
icon: enterpriseKnowledgeIcon,
path: '/enterpriseLibrary/enterprise/tools',
name: 'Tools'
},
{
type: 'financial',
title: '财务库',
description: '财务库主要管理企业的财务报告文档, 包括审计报告、年报等',
icon: enterpriseKnowledgeIcon,
path: '/enterpriseLibrary/enterprise/financial',
name: 'Financial'
}
]
}
},
methods: {
@ -96,25 +95,33 @@ export default {
},
// 卡片点击事件
handleCardClick(type) {
console.log('点击了知识库类型:', type)
// 这里可以根据不同类型跳转到不同的页面
this.$message.info(`点击了${this.getCardTitle(type)}`)
handleCardClick(card) {
console.log('点击了知识库类型:', card.type)
// 查找对应的卡片数据
if (card && card.path) {
// 如果有路径，则跳转到对应页面
this.$router.push({
// path: card.path,
name: card.name,
query: {
enterpriseId: this.enterpriseId
}
})
} else {
// 否则显示提示信息
this.$message.info(`点击了${this.getCardTitle(type)}`)
}
},
// 获取卡片标题
getCardTitle(type) {
const titles = {
'performance': '业绩库',
'personnel': '人员库',
'qualification': '资质库',
'technical': '技术方案库',
'tools': '工器具库',
'financial': '财务库'
}
return titles[type] || '未知'
}
}
const card = this.knowledgeCards.find(item => item.type === type)
return card ? card.title : '未知'
},
},
}
</script>

52
src/views/enterpriseLibrary/enterprise/index.vue
View File

@ -681,56 +681,4 @@ export default {
}
}
}
// 响应式设计
@media (max-width: 1200px) {
.enterprise-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.enterprise-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.search-container {
.search-content {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.search-right {
width: 100%;
.search-input {
width: 100%;
max-width: 300px;
}
}
}
.enterprise-grid {
grid-template-columns: 1fr;
}
.enterprise-actions {
flex-direction: column;
.el-button {
width: 100%;
margin-bottom: 8px;
}
}
.pagination-container {
.el-pagination {
flex-wrap: wrap;
justify-content: center;
}
}
}
</style>

617
src/views/enterpriseLibrary/personnel/index.vue Normal file
View File

@ -0,0 +1,617 @@
<template>
<div class="app-container">
<!-- 返回按钮 -->
<div class="back-container">
<el-button type="default" size="small" @click="handleBack" class="back-btn">
返回
</el-button>
</div>
<!-- 搜索区域 -->
<div class="search-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item prop="personnelName">
<el-input v-model="queryParams.personnelName" placeholder="请输入姓名" clearable maxlength="32"
class="search-input" @keyup.enter.native="handleQuery">
</el-input>
</el-form-item>
<el-form-item prop="position">
<el-select v-model="queryParams.position" placeholder="请选择职位" clearable class="search-select">
<el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery" class="search-btn">查询</el-button>
<el-button size="small" @click="resetQuery" class="reset-btn">重置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 人员卡片网格 -->
<div class="personnel-grid">
<!-- 新增人员卡片 -->
<div class="personnel-card create-card" @click="handleAdd">
<div class="create-icon">
<i class="el-icon-plus"></i>
</div>
<div class="create-text">新增人员</div>
</div>
<!-- 人员信息卡片 -->
<div class="personnel-card" v-for="(personnel, index) in personnelList" :key="index">
<div class="personnel-header">
<h3 class="personnel-name">{{ personnel.name }}</h3>
</div>
<div class="personnel-info">
<div class="info-item">
<span class="label">职位</span>
<span class="value">{{ personnel.position }}</span>
</div>
<div class="info-item">
<span class="label">从业年限</span>
<span class="value">{{ personnel.experience }}</span>
</div>
<div class="info-item">
<span class="label">入职时间</span>
<span class="value">{{ personnel.entryDate }}</span>
</div>
</div>
<!-- 操作按钮 -->
<div class="personnel-actions">
<div @click="handleDetail(personnel)" class="action-btn detail-btn">
<img :src="EnterpriseDetail" alt="详情" />
<span>详情</span>
</div>
<div @click="handleEdit(personnel)" class="action-btn edit-btn">
<img :src="EnterpriseEdit" alt="编辑" />
<span>编辑</span>
</div>
<div @click="handleDelete(personnel)" class="action-btn delete-btn">
<img :src="EnterpriseDelete" alt="删除" />
<span>删除</span>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
</template>
<script>
import EnterpriseDetail from '@/assets/enterpriseLibrary/enterprise/enterprise-detail.png';
import EnterpriseEdit from '@/assets/enterpriseLibrary/enterprise/enterprise-edit.png';
import EnterpriseDelete from '@/assets/enterpriseLibrary/enterprise/enterprise-delete.png';
export default {
name: 'Personnel',
data() {
return {
EnterpriseDetail,
EnterpriseEdit,
EnterpriseDelete,
queryParams: {
personnelName: '',
position: '',
pageNum: 1,
pageSize: 10
},
total: 100,
positionOptions: [
{ label: '项目经理', value: '项目经理' },
{ label: '技术总监', value: '技术总监' },
{ label: '产品经理', value: '产品经理' },
{ label: '开发工程师', value: '开发工程师' },
{ label: '测试工程师', value: '测试工程师' },
{ label: 'UI设计师', value: 'UI设计师' },
{ label: '运维工程师', value: '运维工程师' },
{ label: '销售经理', value: '销售经理' }
],
personnelList: [
{
id: 1,
name: '王德发',
position: '项目经理',
experience: '10年',
entryDate: '2022/03/07'
},
{
id: 2,
name: '李小明',
position: '技术总监',
experience: '8年',
entryDate: '2021/05/15'
},
{
id: 3,
name: '张小红',
position: '产品经理',
experience: '6年',
entryDate: '2023/01/10'
},
{
id: 4,
name: '刘大华',
position: '开发工程师',
experience: '5年',
entryDate: '2022/08/20'
},
{
id: 5,
name: '陈小芳',
position: '测试工程师',
experience: '4年',
entryDate: '2023/03/01'
},
{
id: 6,
name: '赵大强',
position: 'UI设计师',
experience: '7年',
entryDate: '2021/11/15'
},
{
id: 7,
name: '孙小丽',
position: '运维工程师',
experience: '3年',
entryDate: '2023/06/01'
},
{
id: 8,
name: '周大伟',
position: '销售经理',
experience: '9年',
entryDate: '2020/09/01'
},
{
id: 9,
name: '吴小敏',
position: '开发工程师',
experience: '2年',
entryDate: '2023/09/01'
},
{
id: 10,
name: '郑大龙',
position: '项目经理',
experience: '12年',
entryDate: '2019/12/01'
}
]
}
},
created() {
this.getList()
},
methods: {
// 获取人员列表
getList() {
console.log('获取人员列表', this.queryParams)
},
// 返回上一页
handleBack() {
this.$router.go(-1)
},
// 查询
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
// 重置
resetQuery() {
this.queryParams.personnelName = ''
this.queryParams.position = ''
this.handleQuery()
},
// 新增人员
handleAdd() {
console.log('新增人员')
this.$message.info('新增人员功能')
},
// 详情
handleDetail(personnel) {
console.log('查看详情', personnel)
this.$message.info(`查看${personnel.name}的详情`)
},
// 编辑
handleEdit(personnel) {
console.log('编辑人员', personnel)
this.$message.info(`编辑${personnel.name}的信息`)
},
// 删除
handleDelete(personnel) {
this.$confirm(`确定删除${personnel.name}吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('删除人员', personnel)
this.$message.success('删除成功')
this.getList()
}).catch(() => {
this.$message.info('已取消删除')
})
},
// 分页大小改变
handleSizeChange(val) {
this.queryParams.pageSize = val
this.getList()
},
// 当前页改变
handleCurrentChange(val) {
this.queryParams.pageNum = val
this.getList()
}
}
}
</script>
<style scoped lang="scss">
.app-container {
padding: 20px;
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.back-container {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 15px;
padding: 0 20px;
.back-btn {
width: 98px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
border-radius: 4px;
border: none;
color: #666;
font-size: 14px;
transition: all 0.3s ease;
&:hover {
background: #f5f5f5;
color: #409EFF;
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
}
}
}
.search-container {
padding: 20px;
.search-input {
width: 200px;
}
.search-select {
width: 200px;
}
.search-btn {
background: #409EFF;
border-color: #409EFF;
color: #fff;
font-weight: 500;
padding: 8px 16px;
border-radius: 4px;
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
&:hover {
background: #66b1ff;
border-color: #66b1ff;
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
}
}
.reset-btn {
background: #fff;
border-color: #dcdfe6;
color: #606266;
font-weight: 500;
padding: 8px 16px;
border-radius: 4px;
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
&:hover {
background: #f5f7fa;
border-color: #c0c4cc;
color: #409EFF;
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
}
}
}
.personnel-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-bottom: 20px;
padding: 0 20px;
flex: 1;
overflow-y: auto;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #a8a8a8;
}
}
}
.personnel-card {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
cursor: pointer;
min-height: 200px;
display: flex;
flex-direction: column;
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
&.create-card {
border: 2px dashed #ddd;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
border-color: #409EFF;
background: #f0f8ff;
}
.create-icon {
font-size: 48px;
color: #999;
margin-bottom: 10px;
}
.create-text {
font-size: 16px;
color: #666;
font-weight: 500;
}
}
}
.personnel-header {
margin-bottom: 15px;
.personnel-name {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.4;
}
}
.personnel-info {
flex: 1;
margin-bottom: 15px;
.info-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
.label {
color: #888;
font-weight: 500;
}
.value {
color: #333;
font-weight: 600;
}
}
}
.personnel-actions {
display: flex;
gap: 8px;
justify-content: space-between;
.action-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
gap: 4px;
i {
font-size: 16px;
}
span {
font-size: 12px;
}
&.detail-btn {
background: #f0f8ff;
color: #409EFF;
border: 1px solid #e6f3ff;
&:hover {
background: #e6f3ff;
color: #66b1ff;
}
}
&.edit-btn {
background: #fff7e6;
color: #ff9500;
border: 1px solid #fff2d9;
&:hover {
background: #fff2d9;
color: #ffb84d;
}
}
&.delete-btn {
background: #fff1f0;
color: #ff4d4f;
border: 1px solid #ffe7e6;
&:hover {
background: #ffe7e6;
color: #ff7875;
}
}
}
}
.pagination-container {
display: flex;
justify-content: center;
padding: 20px;
margin-top: auto;
flex-shrink: 0;
.el-pagination {
.el-pagination__total {
color: #606266;
font-weight: 500;
}
.el-pager li {
border-radius: 4px;
margin: 0 2px;
&.active {
background: #409EFF;
color: #fff;
}
&:hover {
color: #409EFF;
}
}
.btn-prev,
.btn-next {
border-radius: 4px;
margin: 0 2px;
&:hover {
color: #409EFF;
}
}
}
}
// 响应式设计
@media (max-width: 1400px) {
.personnel-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 1200px) {
.personnel-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.personnel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.app-container {
padding: 15px;
}
.back-container {
margin-bottom: 10px;
}
.search-container {
padding: 15px;
.search-input,
.search-select {
width: 100%;
margin-bottom: 10px;
}
}
.personnel-grid {
grid-template-columns: 1fr;
gap: 16px;
padding: 0 10px;
}
.personnel-card {
padding: 16px;
min-height: 180px;
}
.personnel-actions {
flex-direction: column;
gap: 8px;
.action-btn {
flex-direction: row;
padding: 10px;
}
}
}
</style>