smart-bid-web/src/views/enterpriseLibrary/personnel/index.vue

<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';
import { encryptWithSM4 } from '@/utils/sm'
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('新增人员功能')
            this.$router.push({
                name: 'PersonnelForm',
                query: {
                    type: encryptWithSM4('add'),
                    id: encryptWithSM4(''),
                }
            })
        },

        // 详情
        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>