人员库
This commit is contained in:
parent
f264bc7fbf
commit
9c38588a8f
|
|
@ -237,7 +237,7 @@ export const dynamicRoutes = [
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/EnterpriseForm',
|
path: '/enterpriseForm',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
permissions: ['enterpriseLibrary:enterprise:add'],
|
permissions: ['enterpriseLibrary:enterprise:add'],
|
||||||
|
|
@ -251,7 +251,7 @@ export const dynamicRoutes = [
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/EnterpriseDetail',
|
path: '/enterpriseDetail',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
permissions: ['enterpriseLibrary:enterprise:detail'],
|
permissions: ['enterpriseLibrary:enterprise:detail'],
|
||||||
|
|
@ -265,7 +265,7 @@ export const dynamicRoutes = [
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/EnterpriseKnowledge',
|
path: '/enterpriseKnowledge',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
permissions: ['enterpriseLibrary:enterprise:EnterpriseKnowledge'],
|
permissions: ['enterpriseLibrary:enterprise:EnterpriseKnowledge'],
|
||||||
|
|
@ -277,9 +277,22 @@ export const dynamicRoutes = [
|
||||||
meta: { title: '企业知识库', activeMenu: '/enterpriseLibrary/enterprise', noCache: true }
|
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 }
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// 防止连续点击多次路由报错
|
// 防止连续点击多次路由报错
|
||||||
|
|
|
||||||
|
|
@ -9,69 +9,18 @@
|
||||||
|
|
||||||
<!-- 知识库卡片网格 -->
|
<!-- 知识库卡片网格 -->
|
||||||
<div class="knowledge-grid">
|
<div class="knowledge-grid">
|
||||||
<!-- 业绩库 -->
|
<div
|
||||||
<div class="knowledge-card" @click="handleCardClick('performance')">
|
class="knowledge-card"
|
||||||
|
v-for="(card, index) in knowledgeCards"
|
||||||
|
:key="index"
|
||||||
|
@click="handleCardClick(card)"
|
||||||
|
>
|
||||||
<div class="card-icon">
|
<div class="card-icon">
|
||||||
<img :src="enterpriseKnowledgeIcon" alt="业绩库" />
|
<img :src="card.icon" :alt="card.title" />
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h3 class="card-title">业绩库</h3>
|
<h3 class="card-title">{{ card.title }}</h3>
|
||||||
<p class="card-description">业绩库主要管理企业的项目业绩信息, 包括合同、验收报告、中标通知书等</p>
|
<p class="card-description">{{ 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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -86,7 +35,57 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
enterpriseId: this.$route.query.id,
|
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: {
|
methods: {
|
||||||
|
|
@ -96,25 +95,33 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 卡片点击事件
|
// 卡片点击事件
|
||||||
handleCardClick(type) {
|
handleCardClick(card) {
|
||||||
console.log('点击了知识库类型:', type)
|
console.log('点击了知识库类型:', card.type)
|
||||||
// 这里可以根据不同类型跳转到不同的页面
|
|
||||||
this.$message.info(`点击了${this.getCardTitle(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) {
|
getCardTitle(type) {
|
||||||
const titles = {
|
const card = this.knowledgeCards.find(item => item.type === type)
|
||||||
'performance': '业绩库',
|
return card ? card.title : '未知'
|
||||||
'personnel': '人员库',
|
},
|
||||||
'qualification': '资质库',
|
|
||||||
'technical': '技术方案库',
|
},
|
||||||
'tools': '工器具库',
|
|
||||||
'financial': '财务库'
|
|
||||||
}
|
|
||||||
return titles[type] || '未知'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue