Element UI框架学习篇(七)

最新推荐文章于 2024-05-22 11:23:12 发布

SSS4362

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量792

点赞数 2

分类专栏： ElementUI学习篇文章标签： elementui Vue2 新增员工

本文链接：https://blog.csdn.net/SSS4362/article/details/128993396

版权

ElementUI学习篇专栏收录该内容

7 篇文章 7 订阅

订阅专栏

Element UI框架学习篇(七)

1 新增员工

1.1 前台部分

1.1.1 在vue实例的data里面准备好需要的对象以及属性

addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示
       depts:[],//部门信息
       mgrs:[],//上级领导信息
       jobs:[],//工作岗位信息
       //新增用户所需要的对象
      newEmp:{
        ename:null,//员工姓名
        hiredate:null,//员工入职日期
        job:null,//员工工作
        sal:null,//员工薪水
        comm:null,//员工奖金
        mgr:null,//上级领导编号
        deptno:null,//部门编号
     },

1.1.2 在el-table上方写下如下代码

 <el-button type="primary">新增员工</el-button>

1.1.3 新增用户的弹窗界面

 <el-dialog title="新增员工信息界面" :visible.sync="addStatus" center>
          <!-- 如果相对对话框中的表单居中,直接套上一个center标签即可 -->
          <center>
            <el-form :model="emp" inline label-width="80px">
              <el-form-item label="姓名">
               <el-input v-model="newEmp.ename"></el-input>     
              </el-form-item>
              <el-form-item label="入职日期">
               <el-date-picker v-model="newEmp.hiredate" placeholder="请选择日期" value-format="yyyy-MM-dd"></el-date-picker>   
              </el-form-item>
              <el-form-item label="职位">
                <el-select v-model="newEmp.job">
                  <el-option v-for="j in jobs" :value="j.job" :label="j.job"></el-option>
                </el-select>    
              </el-form-item>
              <el-form-item label="上级领导">
                  <el-select v-model="newEmp.mgr" placeholder="">
                    <el-option v-for=" m in mgrs" :value="m.empno" :label="m.ename"></el-option>
                  </el-select>
               </el-form-item>
              <el-form-item label="工资">
               <el-input v-model="newEmp.sal"></el-input>     
              </el-form-item>
              <el-form-item label="奖金">
               <el-input v-model="newEmp.comm"></el-input>     
              </el-form-item>
              <el-form-item label="部门">
                  <!-- 默认值以v-model为准 -->
                  <el-select v-model="newEmp.deptno">
                    <el-option v-for="d in depts" :value="d.deptno" :label="d.dname"></el-option>
                  </el-select> 
              </el-form-item>
              <br>
              <el-form-item>
               <el-button type="success" @click="addEmp()">新增</el-button>
               <el-button type="info" native-type="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </center>
       </el-dialog>

1.1.4 进入添加界面的方法addView

 addView(){
          axios.post("http://127.0.0.1:8080/dept/find").
          then(jg=>{
            this.depts=jg.data;
            console.log(this.depts);
          })
          axios.post("http://127.0.0.1:8080/emp/findAllMgrs").
          then(jg=>{
              console.log("上级领导信息");
              console.log(jg.data);
              this.mgrs=jg.data;
          })
          axios.post("http://localhost:8080/emp/findAllJobs").
          then(jg=>{
            this.jobs=jg.data;
          })
          this.addStatus=true;

       },

1.1.5 新增方法addEmp

 addEmp(){
          axios.post("http://127.0.0.1:8080/emp/add",this.newEmp).
          then(jg=>{
              if(jg.data==true){
                this.find();//新增员工后需要重新执行查询方法
                this.addStatus=false;//添加成功,就关闭弹窗
                this.$message({
                  type: 'success',
                  message: '新增员工成功!'
                });
              }else{
                 this.$message({
                    type:"info",
                    mesaage:"新增员工失败"
                 })
              }
          })
       },

1.1.4 把新增员工按钮绑定addView方法

   <el-button type="primary" @click="addView()">新增员工</el-button>

1.1.5 把添加员工弹窗中的新增按钮绑定addEmp方法

<el-button type="success" @click="addEmp()">新增</el-button>

1.1.6 完整的前台代码

a 网页文件addEmp.html

<!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">
    <!-- ①导入文件: 1.1需要导入el相关样式和vue.js文件 ②需要导入element的js文件③导入异步提交的css文件 -->
    <link rel="stylesheet" href="../elementUI/elementUI.min.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../elementUI/elementUI.min.js"></script>
    <title>新增页面</title>
</head>
<body>
    <div id="app">
        <el-form inline :model="empDTO">
          <el-form-item label="按照姓名搜索">
               <!-- 这里一定要写v-model 不然就不能在里面输入值 这个里面的值需要和对象实例中的值保持一致-->
               <el-input v-model="empDTO.name" placeholder="请输入姓名" ></el-input>
          </el-form-item>
          <el-form-item label="按照职位搜索">
            <el-input v-model="empDTO.zhiwei" placeholder="请输入职位"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="find()">搜索</el-button>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="findAll()">全部搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addView()">新增员工</el-button>
        <!-- ②el-table代表表格  el-table-column代表表格中的每一列
          :data需要对应vue实例中的对象数组,lable表示每一列列名,prop是保证能填入每一条数据中对象的字段值 -->
         <el-table :data="emps" :cell-style="{'text-align':'center'}"
         :header-cell-style="{'text-align':'center'}" border >
            <el-table-column label="编号" prop="empno"></el-table-column>
            <el-table-column label="姓名" prop="ename"></el-table-column>
            <el-table-column label="工作" prop="job"></el-table-column>
            <el-table-column label="工资" prop="sal"></el-table-column>
            <el-table-column label="奖金" prop="comm"></el-table-column>
            <el-table-column label="入职日期" prop="hiredate"></el-table-column>
            <el-table-column  label="操作">
              <!-- slot-scope可以用来得到当前行的数据 里面的值自定义
                需要得到特定行需要使用template标签
              -->
              <template slot-scope="s">
                  <el-button type="success" @click="showEmp(s.row.empno)">编辑</el-button>
                  <el-button type="danger" @click="del(s.row)">删除</el-button>
              </template>
           </el-table-column> 
         </el-table>
         <!--layout是用于显示分页插件所要展示的部分 total总页码数 sizes每页条数 prev前箭头
          pager点点点 next后箭头 jumper跳页  -->
         <el-pagination background :total="total" :current-page.sync="current" 
         :page-size.sync="size" @current-change="find()" layout="total,prev, pager, next, jumper">            
         </el-pagination>
         <!-- visible的条件为true就显示,为false就不显示 -->
         <el-dialog title="编辑员工信息界面" :visible.sync="editStatus" center>
            <!-- 如果相对对话框中的表单居中,直接套上一个center标签即可 -->
            <center>
              <el-form :model="emp" inline label-width="80px">
                <el-form-item label="编号">
                     <el-input readonly v-model="emp.empno"></el-input>     
                </el-form-item>
                <el-form-item label="姓名">
                 <el-input v-model="emp.ename"></el-input>     
                </el-form-item>
                <el-form-item label="入职日期">
                 <el-input v-model="emp.hiredate"></el-input>     
                </el-form-item>
                <el-form-item label="职位">
                 <el-input v-model="emp.job"></el-input>     
                </el-form-item>
                <el-form-item label="工资">
                 <el-input v-model="emp.sal"></el-input>     
                </el-form-item>
                <el-form-item label="奖金">
                 <el-input v-model="emp.comm"></el-input>     
                </el-form-item>
                <el-form-item>
                 <el-button type="success" @click="editEmp()">修改</el-button>
                 <el-button type="info" @click="showEmp(emp.empno)">重置</el-button>
                </el-form-item>
              </el-form>
            </center>
         </el-dialog>

         <!-- 新增员工界面 -->
         <el-dialog title="新增员工信息界面" :visible.sync="addStatus" center>
          <!-- 如果相对对话框中的表单居中,直接套上一个center标签即可 -->
          <center>
            <el-form :model="emp" inline label-width="80px">
              <el-form-item label="姓名">
               <el-input v-model="newEmp.ename"></el-input>     
              </el-form-item>
              <el-form-item label="入职日期">
               <el-date-picker v-model="newEmp.hiredate" placeholder="请选择日期" value-format="yyyy-MM-dd"></el-date-picker>   
              </el-form-item>
              <el-form-item label="职位">
                <el-select v-model="newEmp.job">
                  <el-option v-for="j in jobs" :value="j.job" :label="j.job"></el-option>
                </el-select>    
              </el-form-item>
              <el-form-item label="上级领导">
                  <el-select v-model="newEmp.mgr" placeholder="">
                    <el-option v-for=" m in mgrs" :value="m.empno" :label="m.ename"></el-option>
                  </el-select>
               </el-form-item>
              <el-form-item label="工资">
               <el-input v-model="newEmp.sal"></el-input>     
              </el-form-item>
              <el-form-item label="奖金">
               <el-input v-model="newEmp.comm"></el-input>     
              </el-form-item>
              <el-form-item label="部门">
                  <!-- 默认值以v-model为准 -->
                  <el-select v-model="newEmp.deptno">
                    <el-option v-for="d in depts" :value="d.deptno" :label="d.dname"></el-option>
                  </el-select> 
              </el-form-item>
              <br>
              <el-form-item>
               <el-button type="success" @click="addEmp()">新增</el-button>
               <el-button type="info" native-type="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </center>
       </el-dialog>
    </div>
    <script src="../js/edit01.js"></script>
</body>
</html>

b js文件

var v=new Vue({
    el:"#app",
    data:{
       emps:[],
       current:0,//当前页码数
       size:0,//每页显示条数
       total:0,//总条数
       editStatus:false,//editStatus为false时,只是隐藏该标签,实例并没有取消
       emp:{
          empno:null,//员工编号,需要与数据库字段对应
          ename:null,//员工姓名
          hiredate:null,//员工入职日期
          job:null,//员工工作
          sal:null,//员工薪水
          comm:null,//员工奖金
       },
       //empDTO对象,用于传输数据到后台
       empDTO:{
          name:null,
          zhiwei:null,
       },

       addStatus:false,//判断是否弹出新增用户弹窗dailog,为true就显示
       depts:[],//部门信息
       mgrs:[],//上级领导信息
       jobs:[],//工作岗位信息
       //新增用户所需要的对象
      newEmp:{
        ename:null,//员工姓名
        hiredate:null,//员工入职日期
        job:null,//员工工作
        sal:null,//员工薪水
        comm:null,//员工奖金
        mgr:null,//上级领导编号
        deptno:null,//部门编号
     },
    },
    mounted(){
      //④钩子函数里面调用自定义查询方法 如果要调用本实例的自定义方法,需要使用this.
      this.find();
    },
    methods:{
       //③创建自定义查询方法,减少冗余,注意:地址里面的find需要加上斜杠
       //因为加上了自定义条件,所以这里需要传入查询对象过去
       find(){
         axios.post("http://127.0.0.1:8080/emp/find/"+this.current,this.empDTO)
         .then(jg=>{
            //jg.data是后台返回的Ipage对象,其中.records才是对应的数据
            console.log(jg.data);
            this.current=jg.data.current;
            this.size=jg.data.size;
            this.total=jg.data.total;
            this.emps=jg.data.records;
         })
       },
       //查询所有方法
       findAll(){
          this.empDTO.name=null,
          this.empDTO.zhiwei=null,
          //设置全部搜素后回到首页
          this.current=1;
          this.find();
       },
       showEmp(empid){
        //带上map集合过去,需要使用{key:value}的形式
         axios.post("http://localhost:8080/emp/findid",{id:empid})
         .then(jg=>{
            this.emp=jg.data;
            this.editStatus=true;
         })
       },
       
       editEmp(){
          this.$confirm('此操作将修改员工信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //第二个参数带{}的是map集合,直接逗号的是后台可以直接接收的 
          axios.post("http://127.0.0.1:8080/emp/update",this.emp).
          then(jg=>{
             if(jg.data==true){
                this.editStatus=false;  
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                // 方法与方法之间使用this.调用
                this.find();
             }else{
                this.$message({
                    type: 'info',
                    message: '修改失败!'
                });   
             }
          })   
        
        }).catch(() => {
          this.showEmp(this.emp.empno);
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
       },
       del(t){
         // t指的是当前行对象(点击删除时)
         // alert("进入了方法没有");
         console.log(t);
         this.$confirm('确定删除员工编号为:'+t.empno+',姓名为'+t.ename+'的员工吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //异步提交的地址写在这
            axios.post("http://127.0.0.1:8080/emp/delete/"+t.empno).
            then(jg=>{
                 if(jg.data==true){
                   //需要再次去查询一次
                   this.find();
                   this.$message({
                     type: 'success',
                     message: '删除成功'
                   });     
                 }else{
                   this.$message({
                     type: 'danger',
                     message: '删除失败'
                   });   
                 }
            })
          }).catch(() => {
            //取消修改时候的处理逻辑写这里
            this.showEmp(this.emp.empno);
            this.$message({
              type: 'info',
              message: '已取消修改'
            });          
          });
       },
       addView(){
          axios.post("http://127.0.0.1:8080/dept/find").
          then(jg=>{
            this.depts=jg.data;
            console.log(this.depts);
          })
          axios.post("http://127.0.0.1:8080/emp/findAllMgrs").
          then(jg=>{
              console.log("上级领导信息");
              console.log(jg.data);
              this.mgrs=jg.data;
          })
          axios.post("http://localhost:8080/emp/findAllJobs").
          then(jg=>{
            this.jobs=jg.data;
          })
          this.addStatus=true;

       },
       addEmp(){
          axios.post("http://127.0.0.1:8080/emp/add",this.newEmp).
          then(jg=>{
              if(jg.data==true){
                this.find();//新增员工后需要重新执行查询方法
                this.addStatus=false;//添加成功,就关闭弹窗
                this.$message({
                  type: 'success',
                  message: '新增员工成功!'
                });
              }else{
                 this.$message({
                    type:"info",
                    mesaage:"新增员工失败"
                 })
              }
          })
       },
    }
})

1.2 后台核心代码

1.2.1 配置自定义查询方法findAllMgr

a 在EmpMapper.xml文件写入如下代码

 <select id="findAllMgr" resultType="emp">
        SELECT distinct e2.ename,e2.empno
        FROM Emp e1
        INNER JOIN Emp e2
        ON e1.mgr=e2.empno
</select>

b 在EmpMapper接口中写入如下代码

List<Emp> findAllMgr();

c 在IEmpService接口中写入如下代码

 List<Emp> findAllMgr();

d 在EmpServiceImpl类中写入如下代码

 @Autowired
    EmpMapper empMapper;
    @Override
    public List<Emp> findAllMgr() {
        return empMapper.findAllMgr();
    }

1.2.2 新增页面中数据的展示的核心代码

a 查询所有工作(职位)

//查询所有职位
    @RequestMapping("findAllJobs")
    public List<Emp> findAllJobs(){
        QueryWrapper qw = new QueryWrapper<>();
        //查询去重的指定列的信息
        //ne是不等于的条件
        qw.select("distinct job").ne("job","president");
        return empService.list(qw);
    }

b 查询所有领导信息

//查询所有上级领导
@RequestMapping("findAllMgrs")
public List<Emp> findAllMgrs(){
    return empService.findAllMgr();
}

c 查询所有部门

@Autowired
IDeptService deptService;
@RequestMapping("find")
public List<Dept> find(){
    return deptService.list();
}

1.2.3 新增方法

 //增加界面
    @RequestMapping("add")
    public boolean add(@RequestBody Emp emp){
        empService.save(emp);
        return true;
    }

1.2.4 完整的后台代码

a EmpController类

package com.zlz.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.zlz.dto.EmpDTO;
import com.zlz.entity.Emp;
import com.zlz.service.IEmpService;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/emp")
//解决跨域
@CrossOrigin
public class EmpController {
    //先按照名字,再按照类型
    @Resource
    IEmpService empService;
//    @RequestMapping("find")
//    public List<Emp> find(){
//        return empService.list();
//    }
    @RequestMapping({"find","find/{page}"})
    //引用数据类型为空
    public IPage<Emp> find(@PathVariable(required = false) Integer page, @RequestBody EmpDTO empDTO){
        //使用mybatis-plus的后端插件
        System.out.println(page+"当前页码");
        System.out.println(empDTO);
        if(page==null) {
            page = 1;
        }
        IPage<Emp> iPage=new Page<>(page,3);
        //带上条件构造器
        QueryWrapper<Emp> qw = new QueryWrapper<>();
        //写的是列名,满足条件就查询,qw默认是and
        qw.like(empDTO.getName()!=null,"ename",empDTO.getName());
        //qw.or().like是或者 单元测试里面测试sql语句
        qw.like(empDTO.getZhiwei()!=null,"job",empDTO.getZhiwei());
        return empService.page(iPage,qw);
    }
    //增删改查用vue的方式也可以,用之前的方式也行
    @RequestMapping("findid")
    //json格式的数据
    public Emp findid(@RequestBody Map<String,Object> map){
        return  empService.getById(map.get("id").toString());
    }
    //修改界面
    @RequestMapping("update")
    //json格式的数据接收只能用requestBody
    public boolean update(@RequestBody Emp emp){
        //try---catch的方式在控制器
//        System.out.println(emp);
        return  empService.updateById(emp);
    }
    //删除界面,随便取的,是自定义的,但是需要保持一致
    @RequestMapping("delete/{empno}")
//json格式的数据接收只能用requestBody
    public boolean delete(@PathVariable Integer empno){
        //try---catch的方式在控制器
//        System.out.println(emp);
//        System.out.println(empno);
        return  empService.removeById(empno);
//        return true;
    }
    //增加界面
    @RequestMapping("add")
    public boolean add(@RequestBody Emp emp){
        empService.save(emp);
//        System.out.println(emp);
        return true;
    }
    //查询所有上级领导
    @RequestMapping("findAllMgrs")
    public List<Emp> findAllMgrs(){
        return empService.findAllMgr();
    }

    //查询所有职位
    @RequestMapping("findAllJobs")
    public List<Emp> findAllJobs(){
        QueryWrapper qw = new QueryWrapper<>();
        //查询去重的指定列的信息
        //ne是不等于的条件
        qw.select("distinct job").ne("job","president");
        return empService.list(qw);
    }
}

b DeptController类

package com.zlz.controller;

import com.zlz.entity.Dept;
import com.zlz.service.IDeptService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
@RestController
@RequestMapping("/dept")
@CrossOrigin
public class DeptController {
    @Autowired
    IDeptService deptService;
    @RequestMapping("find")
    public List<Dept> find(){
        return deptService.list();
    }
}