软件工程-人事管理系统（三）

最新推荐文章于 2024-02-23 13:18:15 发布

mky-ze

最新推荐文章于 2024-02-23 13:18:15 发布

阅读量857

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/EZNGUP/article/details/122274940

版权

本文是关于人事管理系统第三部分的介绍，主要内容包括部门管理的界面设计和实现，以及前端分页技术的应用。部门管理界面采用黑金风格，并提供了增删改查功能，前端分页技术用于处理大量数据，代码已上传至码云仓库，作者分享了项目经验并鼓励读者在学习道路上不断进步。

摘要由CSDN通过智能技术生成

人事管理系统（三）

寄语

转眼间已经2022年了，先跟大家道一声新年快乐哇，新的一年有新的气象，但是突然想起去年CSDN的尾巴一直没有结掉，偶然间看到有人收藏了之前的人事管理系统二，或许写的文章也对其他人也能有帮助，那我就来把他更完啦，希望在学习的路上大家能够一起进步，获得自己想要的未来~

部门管理

依旧是大气的黑金界面（这可能是本次项目我自己能找出来的唯一的亮点，哈哈哈）

html部分

<template>
    <div class="deptbgc">
            <div class="depttitle">
                部门管理
            </div> 
        <div class="btncl">
            <el-button class="deptbtn1" type="primary" @click="addDialogVisible = true">新建部门</el-button>
            <el-button class="deptbtn" type="primary" @click="deleteDialogVisible = true">删除部门</el-button>
            <el-button class="deptbtn" type="primary" @click="editDialogVisible = true">修改部门</el-button>
            <el-button class="deptbtn" type="primary" @click="showstDialogVisible = true">查询部门下员工</el-button>
        </div>

        <el-form ref="form" :model="form">
        <div class="tableborder">
        <el-table :data="DepartmentList.slice((currentPage-1)*pageSize,currentPage*pageSize)" class="tablestyle" :header-cell-style="{background:'#000',color:'gold'}" :row-style="{background:'rgba(0,0,0,0.1)',color:'gold'}">
                <el-table-column prop="dpnum" label="编号" ></el-table-column>
                <el-table-column prop="dpna" label="名称" ></el-table-column>
                <el-table-column prop="dptp" label="类型" ></el-table-column>
                <el-table-column prop="dptel" label="电话" ></el-table-column>
                <el-table-column prop="dped" label="成立日期" ></el-table-column>
        </el-table>
        <div class="block" style="margin-top:60px">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[1,5,10,20]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="DepartmentList.length">
            </el-pagination>
        </div>
        </div>

            <el-dialog title="新建部门" :visible.sync="addDialogVisible" :append-to-body="true" @close="addDeptClosed" >
                <el-form :model="query" ref="addDeptRef">
                    <el-form-item label="部门编号" :label-width="formLabelWidth" prop="dpnum">
                        <el-input v-model="query.dpnum" ></el-input>
                    </el-form-item>