smart-bid-web/src/views/enterpriseLibrary/personnel/index.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" 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="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%);
    min-height: calc(100vh - 85px);
    display: flex;
    flex-direction: column;
}

.back-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    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: 0 20px;
    border-radius: 8px;

    .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 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding: 10px;

    /* 自定义滚动条样式 */
    &::-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-radius: 8px;
    padding: 20px;
    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 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    &.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 {
    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;

    .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: center;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    position: sticky;
    bottom: 0;
    z-index: 10;

    .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>