企业知识库-人员库

src/views/enterpriseLibrary/enterprise/components/EnterpriseKnowledge.vue

@@ -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 {

src/views/enterpriseLibrary/enterprise/index.vue

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

src/views/enterpriseLibrary/personnel/index.vue

@@ -15,9 +15,9 @@
                         class="search-input" @keyup.enter.native="handleQuery">
                     </el-input>
                 </el-form-item>
-                <el-form-item prop="position">
+                <el-form-item prop="personnelPosition">
-                    <el-select v-model="queryParams.position" placeholder="请选择职位" clearable class="search-select">
+                    <el-select v-model="queryParams.personnelPosition" placeholder="请选择职位" clearable class="search-select">
-                        <el-option v-for="item in positionOptions" :key="item.value" :label="item.label"
+                        <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: [
+            personnelList: [],
-                { 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() {
@@ -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;
+        width: 98px;
-        border-color: #409EFF;
+        height: 36px;
-        color: #fff;
+        background: #1F72EA;
-        font-weight: 500;
-        padding: 8px 16px;
-        border-radius: 4px;
         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;
+            background: #4A8BFF;
-            border-color: #66b1ff;
             box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
         }
     }
 
     .reset-btn {
-        background: #fff;
+        width: 98px;
-        border-color: #dcdfe6;
+        height: 36px;
-        color: #606266;
+        background: #FFFFFF;
-        font-weight: 500;
-        padding: 8px 16px;
-        border-radius: 4px;
         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;
+            background: #f5f5f5;
-            border-color: #c0c4cc;
             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;
+    margin-bottom: 30px;
-    padding: 0 20px;
+    max-height: calc(100vh - 280px);
-    flex: 1;
     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);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all 0.2s ease;
+    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);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        transform: translateY(-1px);
+        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-size: 20px;
-        font-weight: 600;
+        font-weight: bold;
-        color: #333;
+        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;
+            color: #888888;
-            font-weight: 500;
+            font-size: 14px;
+            min-width: 100px;
         }
 
         .value {
-            color: #333;
+            color: #424242;
-            font-weight: 600;
+            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;
+        padding: 12px 8px;
-        border-radius: 4px;
+        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 {
+        img {
-            font-size: 16px;
+            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;
+    border-radius: 8px;
-    flex-shrink: 0;
+    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) {
+::v-deep .delete-confirm-dialog {
-    .personnel-grid {
+    .el-message-box__title {
-        grid-template-columns: repeat(4, 1fr);
+        color: #ff4d4f;
-    }
+        font-weight: 600;
     }
     
-@media (max-width: 1200px) {
+    .el-message-box__content {
-    .personnel-grid {
+        color: #666;
-        grid-template-columns: repeat(3, 1fr);
+        font-size: 14px;
-    }
     }
     
-@media (max-width: 900px) {
+    .el-button--primary {
-    .personnel-grid {
+        background-color: #ff4d4f;
-        grid-template-columns: repeat(2, 1fr);
+        border-color: #ff4d4f;
-    }
-}
         
-@media (max-width: 768px) {
+        &:hover {
-    .app-container {
+            background-color: #ff7875;
-        padding: 15px;
+            border-color: #ff7875;
-    }
-
-    .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;
         }
     }
 }