577 lines
16 KiB
Vue
577 lines
16 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 返回按钮 -->
|
|
<div class="back-container">
|
|
<el-button type="default" @click="handleBack" class="back-btn">
|
|
返回
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 搜索区域 -->
|
|
<div class="search-container">
|
|
<el-form :model="queryParams" ref="queryForm" :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="personnelPosition">
|
|
<el-select v-model="queryParams.personnelPosition" placeholder="请选择职位" clearable
|
|
class="search-select">
|
|
<el-option v-for="item in dict.type.personnel_position" :key="item.value" :label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleQuery" class="search-btn">查询</el-button>
|
|
<el-button @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="item in personnelList" :key="item.personnelId">
|
|
<div class="personnel-header">
|
|
<h3 class="personnel-name">{{ item.personnelName }}</h3>
|
|
</div>
|
|
|
|
<div class="personnel-info">
|
|
<div class="info-item">
|
|
<span class="label">职位</span>
|
|
<span class="value">{{ item.personnelPosition }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">从业年限</span>
|
|
<span class="value">{{ item.employmentYears }}年</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">入职时间</span>
|
|
<span class="value">{{ item.employmentDate }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="personnel-actions">
|
|
<div @click="handleDetail(item)" class="action-btn detail-btn">
|
|
<img :src="EnterpriseDetail" alt="详情" />
|
|
<span>详情</span>
|
|
</div>
|
|
<div @click="handleEdit(item)" class="action-btn edit-btn">
|
|
<img :src="EnterpriseEdit" alt="编辑" />
|
|
<span>编辑</span>
|
|
</div>
|
|
<div @click="handleDelete(item)" 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';
|
|
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
|
|
import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/personnel/personnel'
|
|
export default {
|
|
name: 'Personnel',
|
|
dicts: ['personnel_position'],
|
|
data() {
|
|
return {
|
|
EnterpriseDetail,
|
|
EnterpriseEdit,
|
|
EnterpriseDelete,
|
|
enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
|
|
queryParams: {
|
|
personnelName: '',
|
|
personnelPosition: '',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
enterpriseId: decryptWithSM4(this.$route.query.enterpriseId)
|
|
},
|
|
total: 100,
|
|
personnelList: [],
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
// 获取人员列表
|
|
getList() {
|
|
listAPI(this.queryParams).then(res => {
|
|
if (res.code === 200) {
|
|
this.personnelList = res.rows;
|
|
this.total = res.total;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 返回上一页
|
|
handleBack() {
|
|
const obj = {
|
|
path: "/enterpriseKnowledge/index",
|
|
query: {
|
|
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
|
}
|
|
}
|
|
this.$tab.closeOpenPage(obj)
|
|
},
|
|
|
|
// 查询
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1
|
|
this.getList()
|
|
},
|
|
|
|
// 重置
|
|
resetQuery() {
|
|
this.queryParams.personnelName = ''
|
|
this.queryParams.personnelPosition = ''
|
|
this.handleQuery()
|
|
},
|
|
|
|
// 新增人员
|
|
handleAdd() {
|
|
this.$router.push({
|
|
name: 'PersonnelForm',
|
|
query: {
|
|
type: encryptWithSM4('add'),
|
|
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
|
personnelId: encryptWithSM4('0'),
|
|
}
|
|
})
|
|
},
|
|
|
|
// 人员详情
|
|
handleDetail(personnel) {
|
|
this.$router.push({
|
|
name: 'PersonnelDetail',
|
|
query: {
|
|
type: encryptWithSM4('detail'),
|
|
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
|
personnelId: encryptWithSM4(personnel.personnelId + '' || '0'),
|
|
}
|
|
})
|
|
},
|
|
|
|
// 编辑
|
|
handleEdit(personnel) {
|
|
this.$router.push({
|
|
name: 'PersonnelEditForm',
|
|
query: {
|
|
type: encryptWithSM4('edit'),
|
|
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
|
personnelId: encryptWithSM4(personnel.personnelId + '' || '0'),
|
|
}
|
|
})
|
|
},
|
|
|
|
// 删除
|
|
handleDelete(personnel) {
|
|
this.$confirm(`确定要删除人员"${personnel.personnelName}"吗？删除后将无法恢复！`, '操作提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true,
|
|
customClass: 'delete-confirm-dialog'
|
|
}).then(() => {
|
|
delDataAPI({ enterpriseId: this.enterpriseId, personnelId: personnel.personnelId }).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message.success('删除成功');
|
|
this.getList();
|
|
} else {
|
|
this.$message.error(res.msg || '删除失败');
|
|
}
|
|
}).catch(error => {
|
|
console.error('删除失败:', error);
|
|
});
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
|
|
// 分页大小改变
|
|
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%);
|
|
height: calc(100vh - 85px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.back-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
// margin-bottom: 20px;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
|
|
.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: 0;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
// margin-bottom: 20px;
|
|
|
|
.search-input {
|
|
width: 300px;
|
|
}
|
|
|
|
.search-select {
|
|
width: 200px;
|
|
}
|
|
|
|
.search-btn {
|
|
width: 98px;
|
|
height: 36px;
|
|
background: #1F72EA;
|
|
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
|
border-radius: 4px;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: #4A8BFF;
|
|
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
.reset-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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.personnel-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 24px; // 卡片之间的间距
|
|
padding: 20px 6px 20px 0px; // 网格内边距，右侧留出空间给滚动条
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
align-items: start; // 卡片从顶部对齐，根据内容自适应高度
|
|
|
|
// 自定义滚动条样式
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
.personnel-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 240px; // 设置最小高度，根据内容自适应增长
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&.create-card {
|
|
min-height: 240px;
|
|
border: 2px dashed #ddd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.personnel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 15px;
|
|
|
|
.personnel-name {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #424242;
|
|
margin: 0;
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.personnel-info {
|
|
// margin-bottom: 15px;
|
|
|
|
.info-item {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
|
|
.label {
|
|
color: #888888;
|
|
font-size: 14px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.value {
|
|
color: #424242;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.personnel-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: auto; // 将操作按钮推到底部
|
|
flex-shrink: 0; // 防止被压缩
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 8px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
min-width: 70px;
|
|
height: 60px;
|
|
gap: 6px;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&.detail-btn {
|
|
background: #f0f8ff;
|
|
border: none;
|
|
color: #409EFF;
|
|
|
|
&:hover {
|
|
background: #e6f3ff;
|
|
color: #66b1ff;
|
|
box-shadow: 0px 4px 8px rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
&.edit-btn {
|
|
background: #fff7e6;
|
|
border: none;
|
|
color: #ff9500;
|
|
|
|
&:hover {
|
|
background: #fff2d9;
|
|
color: #ffb84d;
|
|
box-shadow: 0px 4px 8px rgba(255, 149, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
&.delete-btn {
|
|
background: #fff1f0;
|
|
border: none;
|
|
color: #ff4d4f;
|
|
|
|
&:hover {
|
|
background: #ffe7e6;
|
|
color: #ff7875;
|
|
box-shadow: 0px 4px 8px rgba(255, 77, 79, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
flex-shrink: 0;
|
|
|
|
.el-pagination {
|
|
.el-pagination__total {
|
|
color: #606266;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-pagination__sizes {
|
|
.el-select {
|
|
.el-input__inner {
|
|
border-color: #dcdfe6;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.el-pagination__jump {
|
|
.el-input__inner {
|
|
border-color: #dcdfe6;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 删除确认对话框样式
|
|
::v-deep .delete-confirm-dialog {
|
|
.el-message-box__title {
|
|
color: #ff4d4f;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.el-message-box__content {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background-color: #ff4d4f;
|
|
border-color: #ff4d4f;
|
|
|
|
&:hover {
|
|
background-color: #ff7875;
|
|
border-color: #ff7875;
|
|
}
|
|
}
|
|
}
|
|
</style> |