员工列表页面

已于 2023-04-10 14:46:33 修改
阅读量86 收藏
点赞数
分类专栏： XXXX系统（自用） 文章标签： javascript 前端 html
于 2023-03-28 17:52:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51173747/article/details/129821418
版权

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXXX系统</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">
    <link rel="stylesheet" href="../../styles/common.css">
    <link rel="stylesheet" href="../../styles/page.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>
    <style>
        #employee-app .notAdmin::after{
            border:0 !important;
        }
    </style>
</head>
<body>
    <div class="dashboard-container" id="employee-app">
        <div class="container">
            <div class="tableBar">
                <el-input
                    v-model="input"
                    placeholder="请输入员工姓名"
                    style="width:250px"
                    clearable
                     @keyup.enter.native="handleQuery"    
                >
                    <i
                        slot="prefix"
                        class="el-input__icon el-icon-search"
                        style="cursor:pointer"
                        @click="handleQuery"
                    ></i>
                </el-input>
                <div class="tableLab">
                    <span style="margin-right: 14px" class="delBut non" @click="deleteEmployeeHandle('批量', null)" :disabled="this.checkList.length === 0">批量删除</span>
                    <el-button
                        type="primary"
                        @click="addEmployeeHandle('add')"
                    >
                        + 添加员工
                    </el-button>
                </div>
            </div>
            <el-table
                :data="tableData"
                stripe
                class="tableBox"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="40"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="jobName"
                    label="职位"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="phone"
                    label="电话"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="email"
                    label="电邮"
                    width="155"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="storeName"
                    label="工作门店"
                    align="center"
                ></el-table-column>
                <el-table-column
                        label="偏好"
                        width="140"
                        align="center"
                >
                    <template v-slot="scope">
                        <el-button
                                type="text"
                                size="small"
                                class="greenBug non"
                                @click.native="showFlavor(scope.row)"
                        >
                            查看偏好
                        </el-button>
                    </template>
                </el-table-column>
                <el-dialog
                        title="偏好详细信息"
                        :visible.sync="DialogVisible"
                        width="30%"
                        :before-close="handleClose"
                        :append-to-body="true"
                >
                    <div class="form">
                        <el-form ref="flavorForm" :model="flavorForm">
                            <el-form-item label="工作日偏好：">{{workday}}</el-form-item>
                            <el-form-item label="工作时间偏好：">{{startWorktime}}-{{endWorktime}}</el-form-item>
                            <el-form-item label="班次时长偏好：">{{duration}}个小时</el-form-item>
                        </el-form>
                    </div>
                </el-dialog>

                <el-table-column
                        label="账号状态"
                        align="center"
                >
                    <template v-slot="scope">
                      {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="160"
                    align="center"
                >
                    <template v-slot="scope">
                        <el-button
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="addEmployeeHandle(scope.row.id)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="text"
                            size="small"
                            class="delBut non"
                            @click="statusHandle(scope.row)"
                            v-if="user === 'admin'"
                        >
                            {{ scope.row.status == '1' ? '禁用' : '启用' }}
                        </el-button>
                        <el-button
                            type="text"
                            size="small"
                            class="delBut non"
                            @click="deleteEmployeeHandle('单删',scope.row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pageList"
                :page-sizes="[10,20,30,40]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="counts"
                :current-page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
    <script src="../../plugins/vue/vue.js"></script>
    <script src="../../plugins/element-ui/index.js"></script>
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/employee.js"></script>
</body>
    <script>
        new Vue({
            el:'#employee-app',
            data(){
                return{
                    input:'',
                    counts:0,
                    page:1,
                    pageSize:10,
                    tableData:[],
                    checkList:[],
                    id:'',
                    status:'',
                    show:false,
                    DialogVisible:false,
                    flavorForm:{
                        checkWorkday:[],
                        startTime:'',
                        endTime:'',
                        checkDuration:''
                    },
                    workdayOption:[
                        {id:1,value:'星期一'},
                        {id:2,value:'星期二'},
                        {id:3,value:'星期三'},
                        {id:4,value:'星期四'},
                        {id:5,value:'星期五'},
                        {id:6,value:'星期六'},
                        {id:7,value:'星期日'},
                    ],
                    startWorktime:'',
                    endWorktime:'',
                    duration:'',
                    workday:[],
                }
            },
            computed:{},
            created(){
                this.init()
                this.user = JSON.parse(localStorage.getItem('userInfo')).username
            },
            mounted(){},
            methods: {
                async init () {
                    const params = {
                        page: this.page,
                        pageSize: this.pageSize,
                        name: this.input ? this.input : undefined
                    }
                    await getEmployeeList(params).then(res => {
                        console.log(res.data);
                        if (String(res.code) === '1') {
                            this.tableData = res.data.records || []
                            this.counts = res.data.total
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                },
                handleQuery() {
                    this.page = 1;
                    this.init();
                },
                handleClose(done){
                    this.$confirm('确定关闭吗').then(() => {
                        // function(done)，done 用于关闭 Dialog
                        this.workday=[]
                        done();
                    }).catch(() => {
                        console.log("点击确定时触发");
                    });
                },
                //添加
                addEmployeeHandle(st){
                    console.log('这里'+st)
                    if(st === 'add'){
                        window.parent.menuHandle({
                            id:'2',
                            url:'../page/employee/add.html',
                            name:'添加员工'
                        },true)
                    }else{
                        window.parent.menuHandle({
                            id:'2',
                            url:'../page/employee/add.html?id='+st,
                            name:'修改员工'
                        },true)
                    }
                },
                showFlavor(row){
                    this.id = row.id
                    getFlavorById(this.id).then(res=>{
                        this.DialogVisible=true
                        if(String(res.code) === '1'){
                            this.flavorForm = {...res.data}
                            console.log(this.flavorForm)
                            let tempWorkday = []
                            let strCheckWorkday = this.flavorForm.checkWorkday.split(',').map(Number)
                            for (let i = 0; i < strCheckWorkday.length; i++) {
                                tempWorkday[strCheckWorkday[i]]=true
                            }
                            for (let i = 0; i < this.workdayOption.length; i++) {
                                if(tempWorkday[this.workdayOption[i].id]){
                                    this.workday.push(this.workdayOption[i].value)
                                }
                            }
                            this.startWorktime = this.flavorForm.startTime
                            this.endWorktime = this.flavorForm.endTime
                            this.duration = this.flavorForm.checkDuration
                            console.log(this.workday)
                        }else{
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                },
                //状态修改
                statusHandle(row) {
                    this.id = row.id
                    this.status = row.status
                    this.$confirm('确认调整该员工的状态?', '提示', {
                      'confirmButtonText': '确定',
                      'cancelButtonText': '取消',
                      'type': 'warning'
                      }).then(() =>{
                      enableOrDisableEmployee({'id': this.id, 'status': !this.status ? 1 : 0 }).then(res => {
                        console.log('id是'+this.id)
                        if (String(res.code) === '1') {
                          this.$message.success('员工状态更改成功！')
                          this.handleQuery()
                        }
                      }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                      })
                    })
                },
                //删除
                deleteEmployeeHandle(type,id){
                    if(type === '批量' && id === null){
                        if(this.checkList.length === 0){
                            return this.$message.error('请选择删除对象')
                        }
                    }
                    this.$confirm('确认删除该员工，是否继续？','确定删除',{
                        'confirmButtonText':'确定',
                        'cancelButtonText':'取消',
                    }).then(()=>{
                        deleteEmployee(type === '批量' ? this.checkList.join(',') : id).then(res => {
                            if(res.code === 1){
                                this.$message.success('删除成功！')
                                this.handleQuery()
                            }else{
                                this.$message.error(res.msg || '操作失败')
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了:'+err)
                        })
                    })
                },
                // 全部操作
                handleSelectionChange (val){
                  let checkArr = []
                  val.forEach((n) => {
                    checkArr.push(n.id)
                  })
                  this.checkList = checkArr
                },
                handleSizeChange(val){
                    this.pageSize=val
                    this.init()
                },
                handleCurrentChange(val){
                    this.page=val
                    this.init()
                }
            },
        })
    </script>
</html>

平平无奇小码手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui在table分页的情况下实现多页筛选(单列/多列)
Dreamlxx的博客
04-19 6411
element-ui官网提供的筛选样例只能对当前页的数据进行筛选 我这里是在表头上嵌入popover实现多页筛选，效果如下 代码如下 <template> <div> <!-- 表格 --> <el-table :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) " style="
员工管理列表
12-27
页面布局应清晰，提供友好的用户体验，使用户能方便地浏览、添加、编辑或删除员工信息。 6. **安全与权限管理**：系统需要实现用户认证和授权，例如使用Spring Security框架，可以实现登录验证、角色分配以及访问...
js 下载文件
F小钱的博客
01-28 98
const code = this.checkList.join() const a = document.createElement('a') a.href = `/mystical/backstage/imageData/imageExport?imageCodes=` + code document.body.appendChild(a) a.click() // 下载 URL.revokeObjectURL(a.hr.
解决form表单数据提交时，字符串数组JSON.stringfy()后内部引号转译“//“，
旧忆时光的博客
03-27 1174
data(){ return{ //表单提交数据 formDate:{ ..., checkList: ['email','SMS'],//通知方式 } } } //在提交的时候，由于后端需要接受的是字符串所以我第一解决思路是 add(){ this.formDate.checkList = JSON.stringfy(this.formDate.checkList) // "['email','SMS']" //提交请求 addFrom(this.formDate).t
大数据elementUI项目总结
m0_59239420的博客
12-08 3412
利用elementUI做了一个简单的学生管理系统，主要包括基础的增删改查，模糊搜索以及分页，若本文对你有所帮助，请一键三连。 首先搭建Maven项目，导入相关的包以及配置文件 前端： <!DOCTYPE html> <html lang="en"> <title>Title</title> <head> <meta charset="UTF-8"> <script src="js/node...
jquery 取消全选和全选功能 不全选
weixin_30906425的博客
11-06 79
代码如下 function ckSelectAll() { if ($('#ckSelectAll').is(':checked') == true) { $("INPUT[name='checkList']").each(function () { if (false == $(this).is(':checked')) { ...
Vue实战之实现员工列表案例（结合后端服务接口）
9.冄2.7.號的博客
07-30 968
演示 后端服务接口 @RestController @CrossOrigin public class EmpController { private static final Logger log = LoggerFactory.getLogger(EmpController.class); /** * 服务对象 */ @Resource private EmpService empService; /** * 通过主键查询单条数据
移动端列表页面
三十而立
08-31 3217
变色的栏目导航 &amp;amp;lt;ul&amp;amp;gt; {dede:channel type='son' row='10' currentstyle=&amp;quot; &amp;amp;lt;li class='hover'&amp;amp;gt;&amp;amp;lt;a href='list.php?tid=~id~' ~rel~&amp;amp;gt;&amp;amp
Vue + Spring Boot 项目实战:人事管理系统——(2)员工管理页面及方法实现
weixin_45331887的博客
05-13 2284
员工信息管理目录前言一、前端页面的编写1.编写员工管理vue页面二、后端接口的方法实现1.编写实体类2.读入数据总结 前言 项目登录方法已经实现了，布局已经规划好了，现在在准备员工管理页面的工作 提示：以下是本篇文章正文内容，下面案例可供参考 一、前端页面的编写 1.编写员工管理vue页面 项目目录结构如下 二、后端接口的方法实现 1.编写实体类 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as p
MVC员工管理系统
12-22
在本系统中，视图文件可能包括员工列表页面、员工详情页面、编辑员工页面等，它们展示从控制器获取的数据，并渲染成用户友好的格式。 3. **控制器（Controller）层**：控制器是模型和视图之间的桥梁，它接收用户的...
员工后台管理系统页面原型
03-20
在这个项目中，HTML将用于创建各种管理页面的骨架，如部门列表、职位列表和员工信息表。通过使用不同的HTML标签，可以创建表格、表单、链接等，使用户能够浏览和操作数据。 2. **页面布局**：设计合理的页面布局是...
SpringBoot员工管理系统页面素材
03-06
8. **前端页面设计**：使用HTML、CSS和JavaScript创建员工列表、添加、编辑和删除员工的界面。Thymeleaf表达式用于动态插入数据，如`th:text="${employee.name}"`等。 9. **错误处理与国际化**：了解如何配置...
SpingBoot项目，员工管理静态页面
11-25
这些页面可能包括登录界面、员工列表、添加、编辑和删除员工的表单等。HTML通过链接到CSS（层叠样式表）和JavaScript文件来控制页面布局和交互性。 Spring Boot可以通过Thymeleaf、Freemarker或JSP（JavaServer ...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 345
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 376
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 168
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 332
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 692
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间
员工列表展示：用户登录后可以看到员工列表，包括员工的姓名、工号、性别、联系方式、所属部门等信息。
05-21
3. 创建一个员工列表页面，该页面只有在用户登录状态下才能访问。在该页面中，系统从数据库中读取员工信息，并将其显示在列表中。 4. 可以在员工列表页面中添加一些筛选、排序和搜索功能，使用户可以更方便地查找所...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值