企业知识库-人员库

This commit is contained in:
cwchen 2025-10-24 14:03:17 +08:00
parent f6948fae61
commit e93b815634
3 changed files with 127 additions and 198 deletions

View File

@ -29,12 +29,13 @@
<script>
import enterpriseKnowledgeIcon from '@/assets/enterpriseLibrary/enterpriseKnowledgeIcon.png';
import { encryptWithSM4,decryptWithSM4 } from '@/utils/sm'
export default {
name: 'EnterpriseKnowledge',
data() {
return {
enterpriseId: this.$route.query.id,
enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
enterpriseKnowledgeIcon,
knowledgeCards: [
{
@ -106,7 +107,7 @@ export default {
// path: card.path,
name: card.name,
query: {
enterpriseId: this.enterpriseId
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
}
})
} else {

View File

@ -222,7 +222,7 @@ export default {
name: 'EnterpriseKnowledge',
query: {
type: encryptWithSM4('knowledge'),
id: encryptWithSM4(enterprise.id ?? '0'),
enterpriseId: encryptWithSM4(enterprise.enterpriseId + '' ?? '0'),
}
})

View File

@ -15,9 +15,9 @@
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"
<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>
@ -92,103 +92,26 @@
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 } from '@/utils/sm'
import { encryptWithSM4,decryptWithSM4 } from '@/utils/sm'
import { listAPI } 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: '',
position: '',
personnelPosition: '',
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'
}
]
personnelList: [],
}
},
created() {
@ -197,12 +120,18 @@ export default {
methods: {
//
getList() {
console.log('获取人员列表', this.queryParams)
listAPI(this.queryParams).then(res => {
if (res.code === 200) {
this.personnelList = res.rows;
this.total = res.total;
}
})
},
//
handleBack() {
this.$router.go(-1)
const obj = { path: "/enterpriseKnowledge/index" }
this.$tab.closeOpenPage(obj)
},
//
@ -224,7 +153,8 @@ export default {
name: 'PersonnelForm',
query: {
type: encryptWithSM4('add'),
id: encryptWithSM4(''),
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
personnelId: encryptWithSM4('0'),
}
})
},
@ -248,10 +178,12 @@ export default {
//
handleDelete(personnel) {
this.$confirm(`确定删除${personnel.name}吗?`, '提示', {
this.$confirm(`确定删除人员"${personnel.name}"吗?删除后将无法恢复!`, '操作提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
dangerouslyUseHTMLString: true,
customClass: 'delete-confirm-dialog'
}).then(() => {
console.log('删除人员', personnel)
this.$message.success('删除成功')
@ -280,7 +212,7 @@ export default {
.app-container {
padding: 20px;
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
min-height: 100vh;
min-height: calc(100vh - 85px);
display: flex;
flex-direction: column;
}
@ -289,7 +221,7 @@ export default {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 15px;
margin-bottom: 20px;
padding: 0 20px;
.back-btn {
@ -312,10 +244,11 @@ export default {
}
.search-container {
padding: 20px;
padding: 0 20px;
border-radius: 8px;
.search-input {
width: 200px;
width: 300px;
}
.search-select {
@ -323,33 +256,35 @@ export default {
}
.search-btn {
background: #409EFF;
border-color: #409EFF;
color: #fff;
font-weight: 500;
padding: 8px 16px;
border-radius: 4px;
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: #66b1ff;
border-color: #66b1ff;
background: #4A8BFF;
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;
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: #f5f7fa;
border-color: #c0c4cc;
background: #f5f5f5;
color: #409EFF;
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
}
@ -360,10 +295,10 @@ export default {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-bottom: 20px;
padding: 0 20px;
flex: 1;
margin-bottom: 30px;
max-height: calc(100vh - 280px);
overflow-y: auto;
padding: 10px;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
@ -387,19 +322,18 @@ export default {
.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;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s 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);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
&.create-card {
@ -432,35 +366,39 @@ export default {
}
.personnel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
.personnel-name {
font-size: 18px;
font-weight: 600;
color: #333;
font-size: 20px;
font-weight: bold;
color: #424242;
margin: 0;
flex: 1;
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;
color: #888888;
font-size: 14px;
min-width: 100px;
}
.value {
color: #333;
font-weight: 600;
color: #424242;
font-size: 16px;
font-weight: bold;
flex: 1;
}
}
}
@ -468,60 +406,68 @@ export default {
.personnel-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
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;
padding: 12px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
gap: 4px;
cursor: pointer;
min-width: 70px;
height: 60px;
gap: 6px;
i {
font-size: 16px;
img {
width: 20px;
height: 20px;
}
span {
font-size: 12px;
white-space: nowrap;
}
&.detail-btn {
background: #f0f8ff;
border: none;
color: #409EFF;
border: 1px solid #e6f3ff;
&:hover {
background: #e6f3ff;
color: #66b1ff;
box-shadow: 0px 4px 8px rgba(64, 158, 255, 0.2);
}
}
&.edit-btn {
background: #fff7e6;
border: none;
color: #ff9500;
border: 1px solid #fff2d9;
&:hover {
background: #fff2d9;
color: #ffb84d;
box-shadow: 0px 4px 8px rgba(255, 149, 0, 0.2);
}
}
&.delete-btn {
background: #fff1f0;
border: none;
color: #ff4d4f;
border: 1px solid #ffe7e6;
&:hover {
background: #ffe7e6;
color: #ff7875;
box-shadow: 0px 4px 8px rgba(255, 77, 79, 0.2);
}
}
}
@ -531,8 +477,11 @@ export default {
display: flex;
justify-content: center;
padding: 20px;
margin-top: auto;
flex-shrink: 0;
border-radius: 8px;
margin-top: 20px;
position: sticky;
bottom: 0;
z-index: 10;
.el-pagination {
.el-pagination__total {
@ -540,6 +489,15 @@ export default {
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;
@ -563,65 +521,35 @@ export default {
color: #409EFF;
}
}
.el-pagination__jump {
.el-input__inner {
border-color: #dcdfe6;
border-radius: 4px;
}
}
}
}
//
@media (max-width: 1400px) {
.personnel-grid {
grid-template-columns: repeat(4, 1fr);
}
//
::v-deep .delete-confirm-dialog {
.el-message-box__title {
color: #ff4d4f;
font-weight: 600;
}
@media (max-width: 1200px) {
.personnel-grid {
grid-template-columns: repeat(3, 1fr);
}
.el-message-box__content {
color: #666;
font-size: 14px;
}
@media (max-width: 900px) {
.personnel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.el-button--primary {
background-color: #ff4d4f;
border-color: #ff4d4f;
@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;
&:hover {
background-color: #ff7875;
border-color: #ff7875;
}
}
}