员工增加页面

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

<!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">
    <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>
</head>
<body>
    <div class="addBrand-container" id="employee-add-app">
        <div class="container">
            <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                :inline="false"
                label-width="180px"
                class="demo-ruleForm"
            >
                <div>
                    <el-form-item
                        label="员工姓名："
                        prop="name"
                    >
                        <el-input 
                            v-model="ruleForm.name"
                            placeholder="请输入员工姓名"
                            maxlength="20"
                        />
                    </el-form-item>

                    <el-form-item
                        label="电话："
                        prop="phone"
                    >
                        <el-input 
                            v-model="ruleForm.phone"
                            placeholder="请输入手机号"
                            maxlength="20"
                        />
                    </el-form-item>

                    <el-form-item
                        label="电邮："
                        prop="email"
                    >
                        <el-input 
                            v-model="ruleForm.email"
                            placeholder="请输入电子邮件地址"
                            maxlength="20"
                        />
                    </el-form-item>

                    <el-form-item
                        label="职位："
                        prop="jobId"
                    >
                        <el-select
                            v-model="ruleForm.jobId"
                            placeholder="请选择职位"
                        >
                            <el-option v-for="(item,index) in jobList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>   
                    </el-form-item>
                    <el-form-item
                        label="工作门店："
                        prop="storeId"
                    >
                        <el-select
                            v-model="ruleForm.storeId"
                            placeholder="请选择工作门店"
                        >
                            <el-option v-for="(item,index) in storeList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>   
                    </el-form-item>
                </div>
<!--                偏好-->
                    <el-form-item label="工作日偏好：">
                        <el-checkbox
                            class="all_t"
                            :indeterminate="isIndeterminate"
                            v-model="checkAll"
                            @change="handleCheckAllChangeWorkdays"
                        >全选</el-checkbox>
                        <el-checkbox-group v-model="checkedWorkday" @change="handleCheckColumnChangeWorkdays">
                            <el-checkbox
                                    v-for="item in workdayOption"
                                    :key="item.id"
                                    :label="item.id"
                            >{{item.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="工作时间偏好：">
                        <el-time-select
                                v-model="ruleForm.startTime"
                                :picker-options="{start: '07:00',step: '01:00',end: '22:00'}"
                                placeholder="开始工作时间"
                        ></el-time-select>
                        -
                        <el-time-select
                                v-model="ruleForm.endTime"
                                :picker-options="{start: '09:00',step: '01:00',end: '23:00',minTime:ruleForm.startTime}"
                                placeholder="结束工作时间"
                        ></el-time-select>
                    </el-form-item>
                    <el-form-item label="班次时长偏好（小时）：">
                        <el-radio-group v-model="ruleForm.checkDuration">
                            <el-radio-button label="2">2小时</el-radio-button>
                            <el-radio-button label="3">3小时</el-radio-button>
                            <el-radio-button label="4">4小时</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                <div class="subBox prefer">
                    <el-form-item>
                        <el-button @click="goBack()">
                            取消
                        </el-button>
                        <el-button
                            type="primary"
                            @click="submitForm('ruleForm')"
                        >
                            保存
                        </el-button>
                        <el-button
                            v-if="actionType == 'add'"
                            type="primary"
                            class="continue"
                            @click="submitForm('ruleForm','goAnd')"
                        >
                            保存并继续添加员工
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </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="../../js/validate.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../api/employee.js"></script>
</body>
    <script>
        new Vue({
            el:'#employee-add-app',
            data(){
                return{
                    id:'',
                    restKey:0,
                    textarea:'',
                    value:'',
                    actionType:'',
                    jobList:[],
                    storeList:[],
                    workdayOption:[
                        {id:1,value:'星期一'},
                        {id:2,value:'星期二'},
                        {id:3,value:'星期三'},
                        {id:4,value:'星期四'},
                        {id:5,value:'星期五'},
                        {id:6,value:'星期六'},
                        {id:7,value:'星期日'},
                    ],
                    isIndeterminate:true,
                    checkAll:false,
                    vueRest:'1',
                    index:0,
                    inputStyle:{'flex':1},
                    ruleForm:{
                        'name':'',
                        'phone':'',
                        'email':'',
                        'status':true,
                        jobId:'',
                        storeId:'',
                        checkWorkday:[],
                        checkDuration:'',
                        startTime:'',
                        endTime:'',
                    },
                    checkedWorkday:[],
                    mak:false
                }
            },
            computed:{
                rules(){
                    const validateEmail = (rule,value,callback) => {
                        if (value.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/)) {
                            callback()
                        } else {
                            callback(new Error('邮箱格式错误！'))
                        }
                    }
                    const validatePhone = (rule,value,callback) =>{
                        if(value.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)){
                            callback()
                        }else{
                            callback(new Error('手机格式错误！'))
                        }
                    }
                    return{
                        'name':[
                            {'required':true,'message':'请填写员工名称','trigger':'blur'}
                        ],
                        'phone':[
                            {'required':true,'message':'请填写手机号码','trigger':'blur'},
                            { validator:validatePhone,trigger:'blur'}
                        ],
                        'jobId':[
                            {'required':true,'message':'请选择职位','trigger':'change'}
                        ],
                        'storeId':[
                            {'required':true,'message':'请选择所属门店','trigger':'change'}
                        ],
                        'email':[
                            {'required':true,'message':'请填写电子邮件地址','trigger':'blur'},
                            { validator:validateEmail,trigger: 'blur'}
                        ],
                    }
                }
            },
            created(){
                this.id=requestUrlParam('id')
                this.getJobsList()
                this.getStoresList()
                this.names=this.workdayOption
                this.actionType=this.id ? 'edit' : 'add'
                if(this.id){
                    this.init();
                }
            },
            mounted(){
            },
            methods: {
                async init(){
                    queryEmployeeById(this.id).then(res => {
                        console.log(res)
                        if(String(res.code) === '1'){
                            this.ruleForm = {...res.data}
                            let strCheckWorkday =(this.ruleForm.checkWorkday || '').split(',')
                            this.checkedWorkday = strCheckWorkday.map(Number)
                            console.log(this.checkedWorkday)
                        }else{
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                },

                //获取职位
                getJobsList(){
                    getJobList().then(res => {
                        if(res.code === 1){
                            this.jobList=res.data
                        }else{
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                },
                //获取门店
                getStoresList(){
                    getStoreList().then(res => {
                        if(res.code === 1){
                            this.storeList=res.data
                        }else{
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                },

                handleCheckAllChangeWorkdays(val) {
                    let checkedsItem = val ? this.workdayOption : []
                    if (checkedsItem.length > 0) {
                        checkedsItem.map(item => {
                            this.ruleForm.checkWorkday.push(item.id)
                        })
                    } else {
                        this.ruleForm.checkWorkday = []
                    }
                    this.isIndeterminate = false
                },
                handleCheckColumnChangeWorkdays(value) {
                    let checkedCount = value.length
                    this.checkAll = checkedCount === this.names.length
                    this.ruleForm.checkWorkday = value
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.names.length
                },
                inputHandle(val,index){},
                submitForm(formName,st){
                    this.$refs[formName].validate((valid)=>{
                        if(valid){
                            let params = {...this.ruleForm}
                            params.status = this.ruleForm ? 1:0
                            params.jobId=this.ruleForm.jobId
                            params.storeId=this.ruleForm.storeId
                            params.checkDuration=this.ruleForm.checkDuration
                            params.checkWorkday=this.ruleForm.checkWorkday.toString()
                            params.startTime=this.ruleForm.startTime
                            params.endTime=this.ruleForm.endTime
                            console.log(params)
                            if(this.actionType == 'add'){
                                delete params.id
                                addEmployee(params).then(res=>{
                                    if(res.code === 1){
                                        this.$message.success('员工添加成功！')
                                        if(!st){
                                            this.goBack()
                                        }else{
                                            this.checkWorkday=[].toString()
                                            this.ruleForm={
                                                'name':'',
                                                'phone':'',
                                                'email':'',
                                                'status':true,
                                                jobId:'',
                                                storeId:'',
                                                checkWorkday:[],
                                                checkDuration:'',
                                                startTime:'',
                                                endTime:'',
                                            }
                                        }
                                    }else{
                                        this.$message.error(res.msg || '操作失败')
                                    }
                                }).catch(err=>{
                                    this.$message.error('请求出错了：'+err)
                                })
                            }else{
                                delete params.updateTime
                                editEmployee(params).then(res=>{
                                    if(res.code == 1){
                                        this.$message.success('员工信息修改成功！')
                                        this.goBack()
                                    }else{
                                        this.$message.error(res.msg || '操作失败')
                                    }
                                }).catch(err=>{
                                    this.$message.error('请求出错了：'+err)
                                })
                            }
                        }else{
                            return false
                        }
                    })
                },

                handleAvatarSuccess (response, file, fileList) {
                    // 拼接down接口预览
                    if(response.code === 0 && response.msg === '未登录'){
                      window.top.location.href = '../../page/login.html'
                    }else{
                       this.ruleForm.image = response.data
                    }
                },
                goBack(){
                    window.parent.menuHandle({
                        id:'2',
                        url:'../../page/employee/list.html',
                        name:'员工管理'
                    },false)
                }
            },
        });
    </script>
</html>

平平无奇小码手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
员工工资管理系统
03-18
增加新员工信息，删除离职员工数据，修改在职员工的工资数据，查询特定员工或全体员工的工资详情。 4. **报表生成**：自动生成各种工资报表，如个人工资单、部门工资汇总表、工资条目统计等，以便于财务审核和员工...
一个员工管理系统
08-10
在系统开发完成后，可以根据实际使用情况进行优化，例如增加权限控制，防止数据泄露；引入缓存技术，提高数据访问速度；或者添加移动应用支持，方便员工随时随地查看个人信息。 总结，构建基于MySQL和MyEclipse的...
Day37——员工添加页面
Android_la的博客
07-10 505
文章目录一. 回顾二. 效果三. 后台返回部门数据给前台展示 一. 回顾 前面学习了Day36——链接高亮以及完成列表展示数据，今天完成员工添加页面 二. 效果 三. 后台返回部门数据给前台展示 后台controller方法，如下： //来到员工添加页面 @GetMapping(value="/emp") public String toAddPage(Model model){ //查出所有的部门信息,在页面显示 Collection<Depart
JavaWeb EMS员工信息管理系统 添加员工界面(JSP)
gezongbo的博客
03-26 1295
添加员工界面 <%@page pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>添加员工</title> <meta http-equiv="Content-Type" cont
完成增加员工信息页面（注意，所有请求都以Servlet发出)
最新发布
weixin_35752122的博客
02-09 157
要完成增加员工信息页面，您需要使用Servlet实现以下步骤： 创建一个Servlet，处理接收到的HTTP请求。 在Servlet中，使用HTML表单元素创建一个页面，让用户输入员工信息，例如姓名、电话号码、邮箱等。 在Servlet中，使用Java代码获取用户输入的员工信息，并将其存储到数据库中。 在Servlet中，使用Java代码创建一个响应页面，告诉用户已成功地将员工信息存储到数...
html页面其中有添加员工的,Springboot：员工管理之添加员工（十（7））
weixin_33060753的博客
06-05 307
构建员工添加请求com\springboot\controller\EmployeeController.java/*调转到员工添加页 携带部门信息 restful风格*/@GetMapping("/emp")public String toAddPage(Model model){//获取所有的部门Collection departments = departmentDao.getDepartm...
后台管理添加和编辑的功能
GikQxx21_wen的博客
11-30 324
新增编辑
员工登录框网页模板
01-22
6. **多因素认证**：为了增加安全性，可考虑采用多因素认证，如短信验证码或生物识别，进一步验证用户身份。 7. **用户体验**：登录过程应尽可能快速和流畅。提供“自动填充”功能，让用户能快速输入信息。另外，...
EXCEL报表打印之员工档案.rar
08-12
5. **页眉和页脚**：在打印报表时，页眉通常用来放置报表标题，页脚可以包含页码、日期或公司标识等信息，增加报表的专业感。 6. **打印设置**：在“页面布局”选项卡中，可以调整页边距、纸张大小、方向（横向或...
java员工管理信息系统
07-26
3. 控制器：Servlet在此扮演控制器的角色，接收前端JSP页面的请求，调用相应的业务逻辑方法，处理完后将结果返回给JSP页面。例如，当用户点击“添加员工”按钮，Servlet会接收到请求，创建新员工对象，执行插入...
Vue项目实战之人力资源平台系统（七）员工管理模块
小陈工的博客
09-19 1712
在后续的业务开发中，经常会用到一个类似下图的工具栏： 在src/components/PageTools目录下新建index.vue组件： 1.3 全局注册组件 首先在src/componets/目录下新建index.vue文件，该文件负责所有的公共的组件的全局注册： 然后在项目入口文件src/main.js中进行注册： 二、员工列表展示 2.1 员工列表页面效果图 在src/employees/index.vue中添加如下代码： 2.3 获取员工列表数据并分页展示 首先，在src/api/employee
用户管理系统——(三)添加用户
weixin_45554007的博客
08-28 1391
添加用户
瑞吉外卖项目学习笔记：P4-新增员工功能开发
qq_45498432的博客
05-16 655
瑞吉外卖项目学习笔记：P4-新增员工功能开发
基于SSM的订餐系统 ---- 回显员工信息 编译员工信息
博客
04-17 894
需求分析： 在员工管理列表页面点击编辑按钮，跳转到编辑页面，在编辑页面回显员工信息并进行修改，最后点击保存按钮完成编辑操作 1.点击编辑按钮，页面跳转到add.html，并在url中携带参数员工id 2.在add.html页面获取url中的参数 员工id 3.发送ajax请求，请求服务端，同时提交员工id参数 4.服务端接收请求，根据员工id查询员工信息，将员工信息以json形式相应给页面 5.页面接收服务端响应的json数据，通过vue的数据绑定进行员工信息回显 6.点击保存按钮，发送ajax请求，将页面
瑞吉外卖项目学习笔记：P15-新增套餐功能开发
qq_45498432的博客
05-19 850
瑞吉外卖项目学习笔记：P15-新增套餐功能开发
瑞吉点餐项目系列
qq_42888661的博客
05-07 1356
瑞吉项目流程大纲 系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录瑞吉项目流程大纲系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示
基于Django简单实现一个员工管理系统
努力下来就凸头
04-21 4977
基于Django简单实现一个员工管理系统，这是Django框架从入门到精通（第四章用户管理）内附源码
课设第三天：员工信息添加界面
qq_44509739的博客
12-21 1012
添加员工 ①. 显示表单页面: 需要先查询所有的部门信息 在index.jsp中添加链接 <a href="emp-input">Add New Employee</a> 在actions中添加 public String input(){ request.put("departments", departmentService.getAll()); return...
实现分页，添加部门，添加员工
weixin_44174536的博客
04-20 757
1.创建数据库，并且主外键约束 CREATE DATABASE companydb; USE companydb; CREATE TABLE department( dept_no VARCHAR(10) NOT NULL PRIMARY KEY, dept_name VARCHAR(10) NOT NULL ) INSERT INTO department(dept_no,dept_na...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值