项目框架:登录跳转页面

运行结果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码整体布局:

在这里插入图片描述
在这里插入图片描述

代码如下:

proj_hr_yzh7.sql :(数据表备份代码)

/*
Navicat MySQL Data Transfer

Source Server         : aaa
Source Server Version : 80012
Source Host           : localhost:3306
Source Database       : proj_hr_yzh7

Target Server Type    : MYSQL
Target Server Version : 80012
File Encoding         : 65001

Date: 2022-08-29 11:12:39
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for tbl_dept
-- ----------------------------
DROP TABLE IF EXISTS `tbl_dept`;
CREATE TABLE `tbl_dept` (
  `dept_id` int(11) NOT NULL AUTO_INCREMENT,
  `dept_name` varchar(20) DEFAULT NULL,
  `dept_desc` varchar(100) DEFAULT NULL,
  `state_flag` int(11) DEFAULT '0',
  `del_flag` int(11) DEFAULT '0',
  `create_by` varchar(20) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_by` varchar(20) DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`dept_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of tbl_dept
-- ----------------------------
INSERT INTO `tbl_dept` VALUES ('1', '人事部', '管理员工', '0', '0', 'admin', '2022-08-29 10:17:41', null, null);
INSERT INTO `tbl_dept` VALUES ('2', 'IT部', '管理系统', '0', '0', 'admin', '2022-08-29 10:17:41', null, null);

-- ----------------------------
-- Table structure for tbl_emp
-- ----------------------------
DROP TABLE IF EXISTS `tbl_emp`;
CREATE TABLE `tbl_emp` (
  `emp_id` int(11) NOT NULL AUTO_INCREMENT,
  `emp_name` varchar(20) NOT NULL COMMENT '姓名',
  `username` varchar(20) DEFAULT NULL COMMENT '账号',
  `password` varchar(200) DEFAULT NULL COMMENT '密码',
  `sex` char(1) NOT NULL COMMENT '性别',
  `birthday` date DEFAULT NULL COMMENT '生日',
  `phone` varchar(11) NOT NULL COMMENT '手机',
  `email` varchar(50) NOT NULL COMMENT '邮箱',
  `address` varchar(100) DEFAULT NULL COMMENT '籍贯',
  `hire_date` date DEFAULT NULL COMMENT '入职日期',
  `leave_date` date DEFAULT NULL COMMENT '离职日期',
  `state_flag` int(11) DEFAULT '0' COMMENT '在职状态:0在职 1离职',
  `del_flag` int(11) DEFAULT '0' COMMENT '是否删除:0未删除 1删除',
  `avatar` varchar(200) DEFAULT NULL COMMENT '头像',
  `dept_id` int(11) DEFAULT NULL COMMENT '部门编号',
  `create_by` varchar(20) DEFAULT NULL COMMENT '创建人',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(20) DEFAULT NULL COMMENT '修改人',
  `update_time` datetime DEFAULT NULL COMMENT '修改时间',
  PRIMARY KEY (`emp_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of tbl_emp
-- ----------------------------
INSERT INTO `tbl_emp` VALUES ('1', '张三', 'zhangsan', '123456', '男', '2000-01-01', '13112345678', '[email protected]', '河南', '2010-10-10', null, '0', '0', null, '1', 'admin', '2022-08-29 10:23:02', null, null);
INSERT INTO `tbl_emp` VALUES ('2', '李四', 'lisi', '123456', '女', '2001-01-01', '13112345677', '[email protected]', '河南', '2013-10-10', null, '0', '0', null, '2', 'admin', '2022-08-29 10:23:02', null, null);

-- ----------------------------
-- Table structure for tbl_emp_role
-- ----------------------------
DROP TABLE IF EXISTS `tbl_emp_role`;
CREATE TABLE `tbl_emp_role` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `emp_id` int(11) NOT NULL,
  `role_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of tbl_emp_role
-- ----------------------------
INSERT INTO `tbl_emp_role` VALUES ('1', '1', '1');
INSERT INTO `tbl_emp_role` VALUES ('2', '2', '2');

-- ----------------------------
-- Table structure for tbl_menu
-- ----------------------------
DROP TABLE IF EXISTS `tbl_menu`;
CREATE TABLE `tbl_menu` (
  `menu_id` int(11) NOT NULL,
  `menu_name` varchar(100) NOT NULL COMMENT '菜单名字',
  `parent_id` int(11) DEFAULT NULL COMMENT '父级菜单编号',
  `menu_type` varchar(10) DEFAULT NULL COMMENT '菜单类型',
  `url` varchar(100) DEFAULT NULL COMMENT '菜单链接',
  `icon` varchar(100) DEFAULT NULL COMMENT '菜单图标',
  `create_by` varchar(20) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_by` varchar(20) DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of tbl_menu
-- ----------------------------
INSERT INTO `tbl_menu` VALUES ('1', '系统管理', '0', 'M', '#', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('2', '性格测试', '0', 'M', '#', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('3', '问卷调查', '0', 'M', '#', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('4', '日志监控', '0', 'M', '#', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('5', '部门管理', '1', 'C', '/forward/toDept', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('6', '员工管理', '1', 'C', '/forward/toEmp', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('7', '角色管理', '1', 'C', '/forward/toRole', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('8', '权限管理', '1', 'C', '/forward/toMenu', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('9', '题目管理', '2', 'C', '/forward/toQuestion', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('10', '测试管理', '2', 'C', '/forward/toQuestionTester', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('11', '报表统计', '2', 'C', '/forward/toQuestionReport', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('12', '问卷管理', '3', 'C', '/forward/toQuestionnaire', null, null, null, null, null);
INSERT INTO `tbl_menu` VALUES ('13', '操作日志', '4', 'C', '/forward/toLog', null, null, null, null, null);

-- ----------------------------
-- Table structure for tbl_role
-- ----------------------------
DROP TABLE IF EXISTS `tbl_role`;
CREATE TABLE `tbl_role` (
  `role_id` int(11) NOT NULL AUTO_INCREMENT,
  `role_name` varchar(20) NOT NULL,
  `role_desc` varchar(200) NOT NULL,
  `state_flag` int(11) DEFAULT '0',
  `del_flag` int(11) DEFAULT '0',
  `create_by` varchar(20) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_by` varchar(20) DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`role_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of tbl_role
-- ----------------------------
INSERT INTO `tbl_role` VALUES ('1', '管理员', '管理员', '0', '0', 'admin', '2022-08-29 10:25:38', null, null);
INSERT INTO `tbl_role` VALUES ('2', '人事经理', '人事经理', '0', '0', 'admin', '2022-08-29 10:25:38', null, null);
INSERT INTO `tbl_role` VALUES ('3', '测试人员', '测试人员', '0', '0', 'admin', '2022-08-29 10:25:38', null, null);

-- ----------------------------
-- Table structure for tbl_role_menu
-- ----------------------------
DROP TABLE IF EXISTS `tbl_role_menu`;
CREATE TABLE `tbl_role_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `role_id` int(11) DEFAULT NULL,
  `menu_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- ----------------------------
-- Records of tbl_role_menu
-- ----------------------------
INSERT INTO `tbl_role_menu` VALUES ('1', '1', '1');
INSERT INTO `tbl_role_menu` VALUES ('2', '1', '2');
INSERT INTO `tbl_role_menu` VALUES ('3', '1', '3');
INSERT INTO `tbl_role_menu` VALUES ('4', '1', '4');
INSERT INTO `tbl_role_menu` VALUES ('5', '1', '5');
INSERT INTO `tbl_role_menu` VALUES ('6', '1', '6');
INSERT INTO `tbl_role_menu` VALUES ('7', '1', '7');
INSERT INTO `tbl_role_menu` VALUES ('8', '1', '8');
INSERT INTO `tbl_role_menu` VALUES ('9', '1', '9');
INSERT INTO `tbl_role_menu` VALUES ('10', '1', '10');
INSERT INTO `tbl_role_menu` VALUES ('11', '1', '11');
INSERT INTO `tbl_role_menu` VALUES ('12', '1', '12');
INSERT INTO `tbl_role_menu` VALUES ('13', '1', '13');
INSERT INTO `tbl_role_menu` VALUES ('16', '2', '1');
INSERT INTO `tbl_role_menu` VALUES ('17', '2', '5');
INSERT INTO `tbl_role_menu` VALUES ('18', '2', '6');
INSERT INTO `tbl_role_menu` VALUES ('19', '2', '7');
INSERT INTO `tbl_role_menu` VALUES ('20', '2', '8');

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>lesson0829_HRProj</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>lesson0829_HRProj Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <maven.compiler.source>8</maven.compiler.source>
    <maven.compiler.target>8</maven.compiler.target>
    <servlet.version>4.0.1</servlet.version>
    <jsp.version>2.2</jsp.version>
    <jstl.version>1.2</jstl.version>
    <spring.version>5.3.14</spring.version>
    <commons-dbcp.version>1.4</commons-dbcp.version>
    <mybatis.version>3.4.6</mybatis.version>
    <mybatis-spring.version>1.3.3</mybatis-spring.version>
    <mysql-connector-java.version>8.0.11</mysql-connector-java.version>
    <fastjson.version>1.2.78</fastjson.version>
  </properties>
  <dependencies>
    <!-- 添加javaEE支持 -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>${servlet.version}</version>
      <!-- provided只在编译时支持,发布时不拷贝文件 -->
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>${jsp.version}</version>
      <!-- provided只在编译时支持,发布时不拷贝文件 -->
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>${jstl.version}</version>
    </dependency>
    <!--引入spring基础模块-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!-- dbcp连接池 -->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>${commons-dbcp.version}</version>
    </dependency>
    <!-- mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>
    <!-- mybatis spring整合 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>${mybatis-spring.version}</version>
    </dependency>
    <!--mybatis插件PageHelper-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.0</version>
    </dependency>
    <dependency>
      <groupId>com.github.abel533</groupId>
      <artifactId>mapper</artifactId>
      <version>3.0.1</version>
    </dependency>
    <!-- mysql驱动类 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>${mysql-connector-java.version}</version>
    </dependency>
    <!--fastjson处理json数据-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>${fastjson.version}</version>
    </dependency>
    <!--lombok 简化实体内容-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>
  </dependencies>
</project>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

  <!--定义spring的配置文件,用于在spring监听器监听网站启动的时候,创建spring容器-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring-mybatis.xml</param-value>
  </context-param>
  <!--配置spring监听器,用于创建spring容器-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>


  <!--配置spring的编码过滤器-->
  <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!--配置springMVC前端控制器-->
  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <!--springMVC需要配置相关的组件(处理器映射器,适配器。。。)
         因此我们要自己定义配置文件,在配置文件中定义这些组件。
         如果自己没有定义这个配置文件,springMVC的前端控制器默认加载 servlet名字+servlet.xml这个文件
         找不到则报错。
         一般情况下,我们要自己在init-param中配置这个文件,param-name固定是contextConfigLocation
      -->
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <!--凡是以.do结尾的请求都让springMVC来处理
    <url-pattern>*.do</url-pattern>
    -->
    <!-- 斜杠配置(/):表示所有的默认请求都交给DisaptherServlet来处理
                     导致的问题就是请求静态资源的时候无法处理
    -->
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

ForwardController :

package com.aaa.hr.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/forward")
public class ForwardController {
    @RequestMapping(path = {"/toLogin","/"})
    public String toLogin(){
        return "login";
    }

    @RequestMapping("/toMain")
    public String toMain(Model model){
        //应该查询左侧菜单数据,渲染到页面上
        return "main";
    }

    @RequestMapping("/toEmp")
    public String toEmp(){
        return "emp";
    }
}

EmpMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.aaa.mapper.EmpMapper">

</mapper>

db.properties:

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/proj_hr_yzh7?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf8&allowPublicKeyRetrieval=true
jdbc.username=root
jdbc.password=123456

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <!-- 配置日志工具 -->
        <setting name="logImpl" value="STDOUT_LOGGING"/>
        <!--配置将下划线字段转为小驼峰-->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
    <!--配置分页插件和通用Mapper插件-->
    <plugins>
        <!--拦截器-->
        <plugin interceptor="com.github.pagehelper.PageInterceptor">

            <property name="offsetAsPageNum" value="true"/>
            <!--配置数据库方言 4.0版本以后不用写-->
            <!--<property name="helperDialect" value="mysql"/>-->
            <!--是否做count查询-->
            <property name="rowBoundsWithCount" value="true"/>
            <!--合理化分页-->
            <property name="reasonable" value="true"/>
        </plugin>
        <plugin interceptor="com.github.abel533.mapperhelper.MapperInterceptor">
            <!--主键自增回写方法,默认值MYSQL -->
            <!--<property name="IDENTITY" value="MYSQL" />-->
            <!--通用Mapper默认接口,我们定义的Mapper需要实现该接口 -->
            <property name="mappers" value="com.github.abel533.mapper.Mapper" />
        </plugin>
    </plugins>
</configuration>

spring-mvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--扫描controller包,管理其中定义的controller类-->
    <context:component-scan base-package="com.aaa.hr.controller"/>
    <!--启用注解方式配置 springMVC请求使用的相关组件
        处理器映射器,处理器适配器,处理器(Controller...其他注解)
    -->
    <mvc:annotation-driven/>
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--配置视图前缀-->
        <property name="prefix" value="/WEB-INF/page/"/>
        <!--配置视图后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--配置DefaultServlet处理其他请求(静态资源)-->
    <mvc:default-servlet-handler/>

</beans>

spring-mybatis.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

    <!--配置spring扫描包-->
    <context:component-scan base-package="com.aaa.hr.service"/>

    <!--通过spring配置数据库的连接属性文件-->
    <context:property-placeholder location="classpath:db.properties"/>
    <!--通过spring来配置数据库连接池的数据源对象-->
    <bean id="ds" class="org.apache.commons.dbcp.BasicDataSource"
          destroy-method="close">
        <!--配置连接池数据源需要使用四大金刚(数据库连接属性)-->
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <!--通过spring来配置mybatis的会话工厂和其他相关配置
        原来的时候,mybatis的会话工厂由程序员来创建,现在通过spring来创建管理
        这个就体现了Spring的IoC特征(控制反转)
    -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--配置SqlSession依赖的数据源对象-->
        <property name="dataSource" ref="ds"/>
        <!--配置mybatis要使用的类型别名定义-->
        <property name="typeAliasesPackage" value="com.aaa.demo.entity"/>
        <!--配置mybatis的主配置文件的路径,spring会自动加载mybatis的配置文件-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--配置mybatis的Mapper文件的路径:spring中Mapper接口和Mapper文件路径可以由区别-->
        <property name="mapperLocations" value="classpath:com/mapper/*.xml"/>

    </bean>
    <!--通过spring来配置Mybatis的Mapper接口
        通过包扫描的方式进行配置
    -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--配置Mybatis的Mapper接口-->
        <property name="basePackage" value="com.aaa.demo.mapper"/>
        <!--配置可以创建Mapper接口对象的SqlSession使用的SqlSessionFactory对象的名字-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>

</beans>

在这里插入图片描述
在这里插入图片描述

emp.jsp:

<%--
  Created by IntelliJ IDEA.
  User: henry
  Date: 2022/8/29
  Time: 10:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/assets/layui/layui.all.js"></script>
</head>
<body style="">

<form style="display: none;" class="layui-form" lay-filter="staffForm" id="staffForm">
    <input name="sfid" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="sfname" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <select name="sfsex" id="sfsex">
                <option value="">-请选择-</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="-请选择-" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">-请选择-</dd><dd lay-value="男" class="">男</dd><dd lay-value="女" class="">女</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-inline">
            <input type="text" name="sfage" id="sfage" placeholder="请输入年龄" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="sfcode" id="sfcode" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话号</label>
        <div class="layui-input-inline">
            <input type="text" name="sftel" id="sftel" placeholder="请输入电话号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="area-picker">
        <div class="layui-input-inline" style="width: 100px;margin-left: 30px">
            <select name="province" class="province-selector" data-value="请选择" lay-filter="province-1" id="province"><option value=""></option><option value="北京市">北京市</option><option value="天津市">天津市</option><option value="河北省">河北省</option><option value="山西省">山西省</option><option value="内蒙古自治区">内蒙古自治区</option><option value="辽宁省">辽宁省</option><option value="吉林省">吉林省</option><option value="黑龙江省">黑龙江省</option><option value="上海市">上海市</option><option value="江苏省">江苏省</option><option value="浙江省">浙江省</option><option value="安徽省">安徽省</option><option value="福建省">福建省</option><option value="江西省">江西省</option><option value="山东省">山东省</option><option value="河南省">河南省</option><option value="湖北省">湖北省</option><option value="湖南省">湖南省</option><option value="广东省">广东省</option><option value="广西壮族自治区">广西壮族自治区</option><option value="海南省">海南省</option><option value="重庆市">重庆市</option><option value="四川省">四川省</option><option value="贵州省">贵州省</option><option value="云南省">云南省</option><option value="西藏自治区">西藏自治区</option><option value="陕西省">陕西省</option><option value="甘肃省">甘肃省</option><option value="青海省">青海省</option><option value="宁夏回族自治区">宁夏回族自治区</option><option value="新疆维吾尔自治区">新疆维吾尔自治区</option><option value="台湾省">台湾省</option><option value="香港特别行政区">香港特别行政区</option><option value="澳门特别行政区">澳门特别行政区</option><option value="海外">海外</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="北京市" class="">北京市</dd><dd lay-value="天津市" class="">天津市</dd><dd lay-value="河北省" class="">河北省</dd><dd lay-value="山西省" class="">山西省</dd><dd lay-value="内蒙古自治区" class="">内蒙古自治区</dd><dd lay-value="辽宁省" class="">辽宁省</dd><dd lay-value="吉林省" class="">吉林省</dd><dd lay-value="黑龙江省" class="">黑龙江省</dd><dd lay-value="上海市" class="">上海市</dd><dd lay-value="江苏省" class="">江苏省</dd><dd lay-value="浙江省" class="">浙江省</dd><dd lay-value="安徽省" class="">安徽省</dd><dd lay-value="福建省" class="">福建省</dd><dd lay-value="江西省" class="">江西省</dd><dd lay-value="山东省" class="">山东省</dd><dd lay-value="河南省" class="">河南省</dd><dd lay-value="湖北省" class="">湖北省</dd><dd lay-value="湖南省" class="">湖南省</dd><dd lay-value="广东省" class="">广东省</dd><dd lay-value="广西壮族自治区" class="">广西壮族自治区</dd><dd lay-value="海南省" class="">海南省</dd><dd lay-value="重庆市" class="">重庆市</dd><dd lay-value="四川省" class="">四川省</dd><dd lay-value="贵州省" class="">贵州省</dd><dd lay-value="云南省" class="">云南省</dd><dd lay-value="西藏自治区" class="">西藏自治区</dd><dd lay-value="陕西省" class="">陕西省</dd><dd lay-value="甘肃省" class="">甘肃省</dd><dd lay-value="青海省" class="">青海省</dd><dd lay-value="宁夏回族自治区" class="">宁夏回族自治区</dd><dd lay-value="新疆维吾尔自治区" class="">新疆维吾尔自治区</dd><dd lay-value="台湾省" class="">台湾省</dd><dd lay-value="香港特别行政区" class="">香港特别行政区</dd><dd lay-value="澳门特别行政区" class="">澳门特别行政区</dd><dd lay-value="海外" class="">海外</dd></dl></div>
        </div>
        <div class="layui-input-inline" style="width: 100px;margin-left: 10px">
            <select name="city" class="city-selector" data-value="请选择" lay-filter="city-1" id="city"><option value=""></option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd></dl></div>
        </div>
        <div class="layui-input-inline" style="width:100px;margin-left: 10px">
            <select name="county" class="county-selector" data-value="请选择" lay-filter="county-1" id="county"><option value=""></option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">家庭住址</label>
        <div class="layui-input-inline">
            <input type="text" name="sfaddress" placeholder="请输入地址" autocomplete="off" class="layui-input" id="address" lay-verify="address">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="sfentry" id="test11" placeholder="yyyy年MM月dd日" lay-key="2">
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="dp">
        <label class="layui-form-label">部门类型</label>
        <div class="layui-input-inline">
            <select name="dpid" id="dpType">
                <option value="">--请选择--</option>
                <option value="1">管理部</option><option value="2">人事部</option><option value="4">盘点部</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="">管理部</dd><dd lay-value="2" class="">人事部</dd><dd lay-value="4" class="">盘点部</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item" id="ps">
        <label class="layui-form-label">职位类型</label>
        <div class="layui-input-inline">
            <select name="rid" id="psType">
                <option value="">--请选择--</option>
                <option value="1">店长</option><option value="2">盘点员</option><option value="7">普通员工</option><option value="8">财务员</option><option value="9">老板</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="">店长</dd><dd lay-value="2" class="">盘点员</dd><dd lay-value="7" class="">普通员工</dd><dd lay-value="8" class="">财务员</dd><dd lay-value="9" class="">老板</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item" id="sta">
        <label class="layui-form-label">员工状态</label>
        <div class="layui-input-inline">
            <select name="sfstatus">
                <option value="">--请选择--</option>
                <option value="1">任职</option>
                <option value="2">冻结</option>
            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="">任职</dd><dd lay-value="2" class="">冻结</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit="" lay-filter="formDemo" style="margin-left: 110px">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary" style="margin: -38px 0 0 210px">重置</button>
        </div>
    </div>
</form>
<form style="display: none;" class="layui-form" lay-filter="branchForm" id="branchForm">
    <input name="sfid" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">平调员工</label>
        <div class="layui-input-inline">
            <input type="text" name="sfname" autocomplete="off" class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属分店</label>
        <div class="layui-input-inline">
            <input type="text" name="brname" id="brone" autocomplete="off" class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属职位</label>
        <div class="layui-input-inline">
            <input type="text" name="pttype" id="rone" autocomplete="off" class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属部门</label>
        <div class="layui-input-inline">
            <input type="text" name="dpname" id="dpone" autocomplete="off" class="layui-input" readonly="readonly">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">平调分店</label>
        <div class="layui-input-inline">
            <select name="brid" id="brType1">
                <option value="">--请选择--</option>
            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">平调部门</label>
        <div class="layui-input-inline">
            <select name="dpid" id="dpType1">
                <option value="">--请选择--</option>
                <option value="1">管理部</option><option value="2">人事部</option><option value="4">盘点部</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="">管理部</dd><dd lay-value="2" class="">人事部</dd><dd lay-value="4" class="">盘点部</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">平调职位</label>
        <div class="layui-input-inline">
            <select name="rid" id="psType1">
                <option value="">--请选择--</option>
                <option value="1">店长</option><option value="2">盘点员</option><option value="7">普通员工</option><option value="8">财务员</option><option value="9">老板</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="">店长</dd><dd lay-value="2" class="">盘点员</dd><dd lay-value="7" class="">普通员工</dd><dd lay-value="8" class="">财务员</dd><dd lay-value="9" class="">老板</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit="" lay-filter="formDemo2" style="margin-left: 150px">提交审核</button>
        </div>
    </div>
</form>


<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">搜索<i class="layui-icon layui-colla-icon"></i></h2>
        <div class="layui-colla-content layui-show">
            <div class="demoTable layui-form">
                <div class="layui-inline">
                    <input class="layui-input" placeholder="请输入员工编号" name="sfid" id="sfid" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <input class="layui-input" placeholder="请输入员工姓名" name="sfname" id="sfname" autocomplete="off">
                </div>
                <div class=" layui-input-inline">
                    <select name="dpid" id="searchType">
                        <option value="">--请选择部门--</option>
                        <option value="1">管理部</option><option value="2">人事部</option><option value="4">盘点部</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择部门--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择部门--</dd><dd lay-value="1" class="">管理部</dd><dd lay-value="2" class="">人事部</dd><dd lay-value="4" class="">盘点部</dd></dl></div>
                </div>
                <div class=" layui-input-inline" id="brths">
                    <select name="brid" id="branchType">
                        <option value="">--请选择分店--</option>
                        <option value="1">总店</option><option value="2">北京二号店</option><option value="14">北京一号店1</option><option value="20">北京朝阳区分店</option><option value="21">河南</option><option value="22">郑州一号店</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择分店--" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择分店--</dd><dd lay-value="1" class="">总店</dd><dd lay-value="2" class="">北京二号店</dd><dd lay-value="14" class="">北京一号店1</dd><dd lay-value="20" class="">北京朝阳区分店</dd><dd lay-value="21" class="">河南</dd><dd lay-value="22" class="">郑州一号店</dd></dl></div>
                </div>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="testtime" id="test10" placeholder="入职日期时间范围" lay-key="1">
                </div>
                <button class="layui-btn" id="staffSearch" data-type="reload">搜索</button>
            </div>
        </div>
    </div>
</div>
<table id="demo" lay-filter="test" style="margin-top: -10px;"></table><div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="test" style=" "><div class="layui-table-tool"><div class="layui-table-tool-temp"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">新增</button> <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button> </div> </div><div class="layui-table-tool-self"><div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i class="layui-icon layui-icon-cols"></i></div><div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i class="layui-icon layui-icon-export"></i></div><div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div></div></div><div class="layui-table-box"><div class="layui-table-header"><table class="layui-table" lay-even="" cellspacing="0" cellpadding="0" border="0"><thead><tr><th data-field="sfid" data-key="1-0-0" class=" layui-unselect"><div class="layui-table-cell laytable-cell-1-0-0" align="center"><span>员工编号</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc" title="升序"></i><i class="layui-edge layui-table-sort-desc" title="降序"></i></span></div></th><th data-field="sfname" data-key="1-0-1" class=""><div class="layui-table-cell laytable-cell-1-0-1" align="center"><span>姓名</span></div></th><th data-field="sfsex" data-key="1-0-2" class=" layui-unselect"><div class="layui-table-cell laytable-cell-1-0-2" align="center"><span>性别</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc" title="升序"></i><i class="layui-edge layui-table-sort-desc" title="降序"></i></span></div></th><th data-field="sfage" data-key="1-0-3" class=""><div class="layui-table-cell laytable-cell-1-0-3" align="center"><span>年龄</span></div></th><th data-field="sfcode" data-key="1-0-4" class=""><div class="layui-table-cell laytable-cell-1-0-4"><span>身份证号</span></div></th><th data-field="sftel" data-key="1-0-5" class=""><div class="layui-table-cell laytable-cell-1-0-5"><span>电话号</span></div></th><th data-field="sfaddress" data-key="1-0-6" class=""><div class="layui-table-cell laytable-cell-1-0-6"><span>家庭住址</span></div></th><th data-field="sfentry" data-key="1-0-7" class=" layui-unselect"><div class="layui-table-cell laytable-cell-1-0-7"><span>入职时间</span><span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc" title="升序"></i><i class="layui-edge layui-table-sort-desc" title="降序"></i></span></div></th><th data-field="sfquit" data-key="1-0-8" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-8"><span>离职时间</span></div></th><th data-field="dpid" data-key="1-0-9" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-9"><span>部门编号</span></div></th><th data-field="rid" data-key="1-0-10" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-10"><span>职位编号</span></div></th><th data-field="position.pttype" data-key="1-0-11" class=""><div class="layui-table-cell laytable-cell-1-0-11" align="center"><span>职位</span></div></th><th data-field="department.dpname" data-key="1-0-12" class=""><div class="layui-table-cell laytable-cell-1-0-12" align="center"><span>部门</span></div></th><th data-field="branch.brname" data-key="1-0-13" class=""><div class="layui-table-cell laytable-cell-1-0-13" align="center"><span>分店</span></div></th><th data-field="sfstatus" data-key="1-0-14" class=""><div class="layui-table-cell laytable-cell-1-0-14" align="center"><span>员工状态</span></div></th><th data-field="15" data-key="1-0-15" class=" layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"><span>操作</span></div></th></tr></thead></table></div><div class="layui-table-body layui-table-main"><table class="layui-table" lay-even="" cellspacing="0" cellpadding="0" border="0"><tbody><tr data-index="0" class=""><td data-field="sfid" data-key="1-0-0" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-0">1</div></td><td data-field="sfname" data-key="1-0-1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-1">老王</div></td><td data-field="sfsex" data-key="1-0-2" data-content="女" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-2">  <span style="color: #F581B1;">女</span>  </div></td><td data-field="sfage" data-key="1-0-3" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-3">19</div></td><td data-field="sfcode" data-key="1-0-4" class=""><div class="layui-table-cell laytable-cell-1-0-4">412569875615356489</div></td><td data-field="sftel" data-key="1-0-5" class=""><div class="layui-table-cell laytable-cell-1-0-5">16359489654</div></td><td data-field="sfaddress" data-key="1-0-6" class=""><div class="layui-table-cell laytable-cell-1-0-6">河南省洛阳市伊川县</div></td><td data-field="sfentry" data-key="1-0-7" class=""><div class="layui-table-cell laytable-cell-1-0-7">2021-07-26 00:00:00</div></td><td data-field="sfquit" data-key="1-0-8" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-8"></div></td><td data-field="dpid" data-key="1-0-9" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-9"></div></td><td data-field="rid" data-key="1-0-10" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-10"></div></td><td data-field="position.pttype" data-key="1-0-11" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-11">老板</div></td><td data-field="department.dpname" data-key="1-0-12" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-12">管理部</div></td><td data-field="branch.brname" data-key="1-0-13" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-13">总店</div></td><td data-field="sfstatus" data-key="1-0-14" data-content="1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-14">  <button class="layui-btn layui-btn-sm" lay-event="add">任职中</button>  </div></td><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="1" class=""><td data-field="sfid" data-key="1-0-0" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-0">29</div></td><td data-field="sfname" data-key="1-0-1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-1">老李</div></td><td data-field="sfsex" data-key="1-0-2" data-content="男" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-2">  <span style="color: #499C54;">男</span>  </div></td><td data-field="sfage" data-key="1-0-3" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-3">2</div></td><td data-field="sfcode" data-key="1-0-4" class=""><div class="layui-table-cell laytable-cell-1-0-4">165635945896535648</div></td><td data-field="sftel" data-key="1-0-5" class=""><div class="layui-table-cell laytable-cell-1-0-5">12313123111</div></td><td data-field="sfaddress" data-key="1-0-6" class=""><div class="layui-table-cell laytable-cell-1-0-6">北京市北京市丰台区</div></td><td data-field="sfentry" data-key="1-0-7" class=""><div class="layui-table-cell laytable-cell-1-0-7">2021-07-15 12:59:50</div></td><td data-field="sfquit" data-key="1-0-8" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-8"></div></td><td data-field="dpid" data-key="1-0-9" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-9"></div></td><td data-field="rid" data-key="1-0-10" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-10"></div></td><td data-field="position.pttype" data-key="1-0-11" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-11">店长</div></td><td data-field="department.dpname" data-key="1-0-12" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-12">管理部</div></td><td data-field="branch.brname" data-key="1-0-13" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-13">北京一号店1</div></td><td data-field="sfstatus" data-key="1-0-14" data-content="1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-14">  <button class="layui-btn layui-btn-sm" lay-event="add">任职中</button>  </div></td><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="2" class=""><td data-field="sfid" data-key="1-0-0" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-0">31</div></td><td data-field="sfname" data-key="1-0-1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-1">老张</div></td><td data-field="sfsex" data-key="1-0-2" data-content="男" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-2">  <span style="color: #499C54;">男</span>  </div></td><td data-field="sfage" data-key="1-0-3" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-3">12</div></td><td data-field="sfcode" data-key="1-0-4" class=""><div class="layui-table-cell laytable-cell-1-0-4">410329200007081514</div></td><td data-field="sftel" data-key="1-0-5" class=""><div class="layui-table-cell laytable-cell-1-0-5">12653654896</div></td><td data-field="sfaddress" data-key="1-0-6" class=""><div class="layui-table-cell laytable-cell-1-0-6">辽宁省沈阳市苏家屯区</div></td><td data-field="sfentry" data-key="1-0-7" class=""><div class="layui-table-cell laytable-cell-1-0-7">2021-07-29 04:34:39</div></td><td data-field="sfquit" data-key="1-0-8" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-8"></div></td><td data-field="dpid" data-key="1-0-9" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-9"></div></td><td data-field="rid" data-key="1-0-10" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-10"></div></td><td data-field="position.pttype" data-key="1-0-11" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-11">店长</div></td><td data-field="department.dpname" data-key="1-0-12" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-12">管理部</div></td><td data-field="branch.brname" data-key="1-0-13" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-13">北京朝阳区分店</div></td><td data-field="sfstatus" data-key="1-0-14" data-content="1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-14">  <button class="layui-btn layui-btn-sm" lay-event="add">任职中</button>  </div></td><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="3" class=""><td data-field="sfid" data-key="1-0-0" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-0">32</div></td><td data-field="sfname" data-key="1-0-1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-1">老白</div></td><td data-field="sfsex" data-key="1-0-2" data-content="男" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-2">  <span style="color: #499C54;">男</span>  </div></td><td data-field="sfage" data-key="1-0-3" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-3">12</div></td><td data-field="sfcode" data-key="1-0-4" class=""><div class="layui-table-cell laytable-cell-1-0-4">213123659458635456</div></td><td data-field="sftel" data-key="1-0-5" class=""><div class="layui-table-cell laytable-cell-1-0-5">15689654532</div></td><td data-field="sfaddress" data-key="1-0-6" class=""><div class="layui-table-cell laytable-cell-1-0-6">河北省石家庄市藁城区</div></td><td data-field="sfentry" data-key="1-0-7" class=""><div class="layui-table-cell laytable-cell-1-0-7">2021-07-29 09:54:18</div></td><td data-field="sfquit" data-key="1-0-8" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-8"></div></td><td data-field="dpid" data-key="1-0-9" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-9"></div></td><td data-field="rid" data-key="1-0-10" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-10"></div></td><td data-field="position.pttype" data-key="1-0-11" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-11">店长</div></td><td data-field="department.dpname" data-key="1-0-12" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-12">管理部</div></td><td data-field="branch.brname" data-key="1-0-13" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-13">北京二号店</div></td><td data-field="sfstatus" data-key="1-0-14" data-content="1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-14">  <button class="layui-btn layui-btn-sm" lay-event="add">任职中</button>  </div></td><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="4" class=""><td data-field="sfid" data-key="1-0-0" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-0">37</div></td><td data-field="sfname" data-key="1-0-1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-1">小王</div></td><td data-field="sfsex" data-key="1-0-2" data-content="男" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-2">  <span style="color: #499C54;">男</span>  </div></td><td data-field="sfage" data-key="1-0-3" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-3">18</div></td><td data-field="sfcode" data-key="1-0-4" class=""><div class="layui-table-cell laytable-cell-1-0-4">413029194551549781</div></td><td data-field="sftel" data-key="1-0-5" class=""><div class="layui-table-cell laytable-cell-1-0-5">18337954615</div></td><td data-field="sfaddress" data-key="1-0-6" class=""><div class="layui-table-cell laytable-cell-1-0-6">辽宁省沈阳市皇姑区</div></td><td data-field="sfentry" data-key="1-0-7" class=""><div class="layui-table-cell laytable-cell-1-0-7">2021-07-28 21:44:45</div></td><td data-field="sfquit" data-key="1-0-8" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-8"></div></td><td data-field="dpid" data-key="1-0-9" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-9"></div></td><td data-field="rid" data-key="1-0-10" class="layui-hide"><div class="layui-table-cell laytable-cell-1-0-10"></div></td><td data-field="position.pttype" data-key="1-0-11" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-11">店长</div></td><td data-field="department.dpname" data-key="1-0-12" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-12">管理部</div></td><td data-field="branch.brname" data-key="1-0-13" data-content="" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-13">总店</div></td><td data-field="sfstatus" data-key="1-0-14" data-content="1" class="" align="center"><div class="layui-table-cell laytable-cell-1-0-14">  <button class="layui-btn layui-btn-sm" lay-event="add">任职中</button>  </div></td><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr></tbody></table></div><div class="layui-table-fixed layui-table-fixed-r" style="right: -1px;"><div class="layui-table-header"><table class="layui-table" lay-even="" cellspacing="0" cellpadding="0" border="0"><thead><tr><th data-field="15" data-key="1-0-15" class=" layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"><span>操作</span></div></th></tr></thead></table><div class="layui-table-mend"></div></div><div class="layui-table-body" style="height: 195px;"><table class="layui-table" lay-even="" cellspacing="0" cellpadding="0" border="0"><tbody><tr data-index="0" class=""><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="1" class=""><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="2" class=""><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="3" class=""><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr><tr data-index="4" class=""><td data-field="15" data-key="1-0-15" data-off="true" class="layui-table-col-special"><div class="layui-table-cell laytable-cell-1-0-15"> <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button> <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>  <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button> </div></td></tr></tbody></table></div></div></div><div class="layui-table-page"><div id="layui-table-page1"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0"><i class="layui-icon"></i></a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" data-page="2">2</a><a href="javascript:;" class="layui-laypage-next" data-page="2"><i class="layui-icon"></i></a><span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button type="button" class="layui-laypage-btn">确定</button></span><span class="layui-laypage-count">共 8 条</span><span class="layui-laypage-limits"><select lay-ignore=""><option value="5" selected="">5 条/页</option><option value="10">10 条/页</option><option value="15">15 条/页</option><option value="20">20 条/页</option></select></span></div></div></div><style>.laytable-cell-1-0-0{  }.laytable-cell-1-0-1{  }.laytable-cell-1-0-2{  }.laytable-cell-1-0-3{  }.laytable-cell-1-0-4{  }.laytable-cell-1-0-5{  }.laytable-cell-1-0-6{  }.laytable-cell-1-0-7{  }.laytable-cell-1-0-8{  }.laytable-cell-1-0-9{  }.laytable-cell-1-0-10{  }.laytable-cell-1-0-11{  }.laytable-cell-1-0-12{  }.laytable-cell-1-0-13{  }.laytable-cell-1-0-14{  }.laytable-cell-1-0-15{ width: 220px; }</style></div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-warm layui-btn-xs" id="pdbranch" lay-event="pdUpdate">平调</button>
    <a class="layui-btn layui-btn-xs" lay-event="updateStaff">编辑</a>
    {{#  if(d.sfstatus == 1){ }}
    <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="upStatus">冻结</button>
    {{#  } else if(d.sfstatus == 2){ }}
    <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="upStatus">解冻</button>
    {{#  } }}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="upQuitStatus">解雇</button>
</script>

<script type="text/html" id="titleTpl">
    {{#  if(d.sfstatus == 1){ }}
    <button class="layui-btn  layui-btn-sm" lay-event="add">任职中</button>
    {{#  } else if(d.sfstatus == 2){ }}
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="add">冻结中</button>
    {{#  } }}
</script>
<script>
    layui.config({
        base: '/huawei/./mods/'
        , version: '1.0'
    });
</script>
<script>
    //地区三级联动
    layui.use(['layer', 'form', 'jquery', 'layarea_lc'], function () {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery
            , layarea_lc = layui.layarea_lc;


        layarea_lc.render({
            elem: '#area-picker',
            data: {
                province: '--选择省--',
                city: '--选择市--',
                county: '--选择区--',
            },
            name: "name"
            , change: function (res) {
                //选择结果
            }
        });
        form.on('select(county-1)', function (data) {
            var p = $("#province").val();
            var c = $("#city").val();
            var a = $("#county").val();
            $("#address").attr("value", p + c + a);
        });
    })
</script>
<script type="text/html" id="sexTpl">
    {{#  if(d.sfsex === '女'){ }}
    <span style="color: #F581B1;">{{ d.sfsex }}</span>
    {{#  } else { }}
    <span style="color: #499C54;">{{ d.sfsex }}</span>
    {{#  } }}
</script>
<script>
    //js方式获取本地时间+1天
    Date.prototype.toLocaleStringTomorrow = function () {
        var dateTime = new Date();
        dateTime = dateTime.setDate(dateTime.getDate() + 1);
        dateTime = new Date(dateTime);
        var y = dateTime.getFullYear();
        var m = dateTime.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = dateTime.getDate();
        d = d < 10 ? ("0" + d) : d;
        return y + "-" + m + "-" + d;
    }

    layui.use(['table', 'form', 'jquery', 'layer', 'laydate', 'element'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var element = layui.element;

        var tomorrowTime = (new Date()).toLocaleStringTomorrow();

        //日期时间范围
        $("#test10").focus(function () {
            $("#test10").val("");
        })
        laydate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true
            , max: tomorrowTime
        });
        //入职时间
        laydate.render({
            elem: '#test11'
            , format: 'yyyy-MM-dd'
            , max: tomorrowTime
        });
        //生效
        function sx() {
            $("#sub").attr("disabled", true)
        }
        //失效
        function xx() {
            $("#sub").attr("disabled", false)
        }
        //身份证验证

        $("#sfcode").blur(function () {
            var aaa2 = $("#sfcode").val();
            var lastIDNum = aaa2.charAt(17);
            if (aaa2.length != 18) {
                layer.msg("身份证号位数有误")
            } else if (isNaN(parseInt(aaa2.charAt(i))) && lastIDNum.toLowerCase() != 'x') {
                layer.msg("您输入的身份证号码最后一位不是数字也不是x");

            }
            for (i = 0; i < aaa2.length - 1; i++) {
                if (isNaN(parseInt(aaa2.charAt(i)))) {
                    bbbb();
                    layer.msg("您输入的身份证号码前17位包含有字母");
                }
            }
        })

        $("#sfage").blur(function () {
            var cc1 = $("#sfage").val();
            if(!(/^[0-9]+$/.test( cc1 ))||cc1<18 || cc1 >60){
                layer.msg("年龄不符合我公司规定呀");
                sx();

            }

        })
        $("#sftel").blur(function () {
            var aaa1 = $("#sftel").val();
            if (aaa1.length != 11) {
                layer.msg("手机号位数有误")
                sub = sub + 1;
            } else if (aaa1.substring(0, 1) != 1) {
                layer.msg("手机号格式错误");
                sub = sub + 1;

            }
        })




        $("#sfcode").bind("input", function () {
            $.post("/huawei/staff/getSfCode", {"sfcode": $("#sfcode").val()}, function (backdata) {
                if (backdata.code == 2) {
                    sub = sub + 1;
                    layer.msg('身份证号重复呢,请重新填写', {icon: 5})
                    sx();
                } else {
                    sub = 0;
                    xx();
                }
            }, 'json')
        });

        /*/!*员手机号验证*!/*/


        $("#sftel").blur(function () {
            var phone = $("#sftel").val();
            $.ajax({
                url:'/huawei/staff/getTel',
                type:"POST",
                data:{"sftel":sftel},
                async: false,
                dataType:"json",
                success:function (result) {
                    if (result.code==1){//手机号不重复
                        xx();

                    }else{//手机号重复
                        layer.msg("手机号重复");
                        sx();
                    }
                }
            })
        })


        //页面加载完后  填充部门类型的下拉框
        $.ajax({
            url: "/huawei/department/getAllDepartment",
            type: "get",
            dataType: "json",
            success: function (dptypes) {

                //将查到的部门类型信息填充到类型下拉框中

                $.each(dptypes, function (i, obj) {

                    $("#dpType").append(
                        $("<option>").attr("value", obj["dpid"]).text(obj["dpname"])
                    )
                    $("#dpType1").append(
                        $("<option>").attr("value", obj["dpid"]).text(obj["dpname"])
                    )
                    $("#searchType").append(
                        $("<option>").attr("value", obj["dpid"]).text(obj["dpname"])
                    )
                })
                //执行表单的更新渲染方法
                form.render('select');

                /*$.each(types,function (i, obj) {

                })*/
            }
        })
        $.ajax({
            url: "/huawei/position/getAllPosition2",
            type: "get",
            dataType: "json",
            success: function (pstypes) {

                //将查到的职位类型信息填充到类型下拉框中

                $.each(pstypes, function (i, obj) {

                    $("#psType").append(
                        $("<option>").attr("value", obj["rid"]).text(obj["pttype"])
                    )
                    $("#psType1").append(
                        $("<option>").attr("value", obj["rid"]).text(obj["pttype"])
                    )
                })
                //执行表单的更新渲染方法
                form.render('select');

                /*$.each(types,function (i, obj) {

                })*/
            }
        })
        $.ajax({
            url: "/huawei/branch/getAllBranch",
            type: "get",
            dataType: "json",
            success: function (brtypes) {
                //将查到的部门类型信息填充到类型下拉框中
                $.each(brtypes, function (i, obj) {
                    $("#brType").append(
                        $("<option>").attr("value", obj["brid"]).text(obj["brname"])
                    )
                    $("#branchType").append(
                        $("<option>").attr("value", obj["brid"]).text(obj["brname"])
                    )

                })
                //执行表单的更新渲染方法
                form.render('select');

                /*$.each(types,function (i, obj) {

                })*/
            }
        })
        //表单的提交事件
        //监听事件
        form.on('submit(formDemo)', function (data) {
            //向后台发送请求
            $.ajax({
                url: '/huawei/staff/addOrUpdStaff',
                type: "POST",
                data: data.field,
                //因为layui 在表单提交时 有时候会自动拦截我们的异步请求
                //所以此处改位同步请求
                async: false,
                dataType: "json",
                success: function (result) {
                    layer.closeAll();
                    if (result.code == 1) {
                        //重载表格
                        layer.msg(result.msg, {icon: 1});
                        table.reload("test");

                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                }
            })
            return false;
        });
        form.on('submit(formDemo2)', function (data) {
            //向后台发送请求
            $.ajax({
                url: '/huawei/move/moveStaff',
                type: "POST",
                data: data.field,
                //因为layui 在表单提交时 有时候会自动拦截我们的异步请求
                //所以此处改位同步请求
                async: false,
                dataType: "json",
                success: function (result) {
                    layer.closeAll();
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1});
                        table.reload("test");
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                }
            })
            return false;
        });

        //搜索时,执行表格的重载事件
        $("#staffSearch").click(function () {
            table.reload('test', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: { //设定异步数据接口的额外参数,任意设
                    sfid: $("#sfid").val(),
                    sfname: $("#sfname").val(),
                    dpid: $("#searchType").val(),
                    testtime: $("#test10").val(),
                    brid: $("#branchType").val()
                }
            }); //只重载数据
        })

        //加载表格的实例
        table.render({
            id: "test",
            //elem element 元素---》表格的容器
            elem: '#demo'//table标签的id属性值
            , cellMinWidth: 80
            , url: '/huawei/staff/getAllStaff' //数据接口
            , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            , cols: [[ //表头
                {field: 'sfid', title: '员工编号', sort: true, align: 'center'}
                , {field: 'sfname', title: '姓名', align: 'center'}
                , {field: 'sfsex', title: '性别', align: 'center', sort: true, templet: '#sexTpl'}
                , {field: 'sfage', title: '年龄', align: 'center'}
                , {field: 'sfcode', title: '身份证号'}
                , {field: 'sftel', title: '电话号'}
                , {field: 'sfaddress', title: '家庭住址'}
                , {field: 'sfentry', title: '入职时间', sort: true}
                , {field: 'sfquit', title: '离职时间', hide: true}
                , {field: 'dpid', title: '部门编号', hide: true}
                , {field: 'rid', title: '职位编号', hide: true}
                , {
                    field: 'position.pttype', title: '职位', align: 'center', templet: function (data) {
                        return data.position.pttype;
                    }
                }
                , {
                    field: 'department.dpname', title: '部门', align: 'center', templet: function (data) {
                        return data.department.dpname;
                    }
                }
                , {
                    field: 'branch.brname', title: '分店', align: 'center', templet: function (data) {
                        return data.branch.brname;
                    }
                }
                , {field: 'sfstatus', title: '员工状态', align: 'center', templet: '#titleTpl'}
                , {fixed: 'right', title: '操作', width: 220, toolbar: '#barDemo'}
            ]],
            even: true,
            page: true,//开启分页
            limit: 5,//默认每页显示的条数
            limits: [5, 10, 15, 20]//自定义分页条数的选择
        });

        //头工具栏事件
        //toolbar()括号中的参数就是  table容器中 lay-filter属性的值
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                /**
                 * case后边的具体字符串跟 toolbarDemo中的 lay-event属性值一样
                 */
                case 'add':
                    $("#area-picker").css("display", "block");
                    $("#dp").css("display", "block");
                    $("#ps").css("display", "block");
                    $("#sta").css("display", "block");
                    //先执行清空表单的方法,再打开弹出框
                    $("#staffForm")[0].reset();
                    layer.open({
                        type: 1,
                        title: '新增员工信息',
                        content: $("#staffForm"), //这里content是一个普通的String
                        area: ['400px', '640px'],
                        offset: 't'
                    });

                    break;
                case 'refresh':

                    table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                    break;
            }
            ;
        });

        //监听行工具事件
        tool()括号中的参数就是  table容器中 lay-filter属性的值
        table.on('tool(test)', function (obj) {
            //取出当前点击的行的数据
            var data = obj.data;
            if (obj.event === 'upStatus') {

                layer.confirm("真的要解冻/冻结吗?", function (index) {
                    $.ajax({
                        type: 'get'
                        , url: '/huawei/staff/updStatus'
                        , data: {"sfid": data.sfid, "sfstatus": data.sfstatus}
                        , dataType: 'json'
                        , success: function (result) {
                            if (result.code == 1) {
                                layer.msg(result.msg, {icon: 5});
                                table.reload("test");
                            }
                            layer.msg(result.msg, {icon: 1});
                        }
                    })
                    layer.close(index);
                })
            } else if (obj.event === 'upQuitStatus') {
                layer.confirm("确定要炒他鱿鱼吗?", function (index) {
                    $.ajax({
                        type: 'get'
                        , url: '/huawei/staff/updQuitStatus'
                        , data: {"sfid": data.sfid, "sfstatus": data.sfstatus}
                        , dataType: 'json'
                        , success: function (result) {
                            if (result.code == 1) {
                                layer.msg(result.msg, {icon: 5});
                                table.reload("test");
                            }
                            layer.msg(result.msg, {icon: 1});
                        }
                    })
                    layer.close(index);
                })
            } else if (obj.event === 'updateStaff') {
                $("#area-picker").css("display", "none");
                $("#dp").css("display", "none");
                $("#ps").css("display", "none");
                $("#sta").css("display", "none");
                //先执行清空表单的方法,再打开弹出框
                $("#staffForm")[0].reset();
                layer.open({
                    type: 1,
                    title: '修改员工信息',
                    content: $("#staffForm"), //这里content是一个普通的String
                    area: ['400px', '480px'],
                    offset: 't'
                });
                //填充表单
                data.dpid = data.department.dpid;
                data.rid = data.position.rid;
                form.val('staffForm', data);

            } else if (obj.event === 'pdUpdate') {
                layer.open({
                    type: 1,
                    title: '员工平调',
                    content: $("#branchForm"), //这里content是一个普通的String
                    area: ['400px', '480px'],
                    offset: 't'
                })
                form.val('branchForm', {
                    "sfid": data.sfid,
                    "brname": data.branch.brname,
                    "sfname": data.sfname,
                    "dpname": data.department.dpname,
                    "pttype": data.position.pttype,
                    "dpid": "",
                    "rid": "",
                    "brid": ""
                });
                $.ajax({
                    url: "/huawei/branch/getAllNotId",
                    type: "get",
                    dataType: "json",
                    data: {"brid":1},
                    success: function (brtypes) {
                        $("#branchType").empty()
                        $("#branchType").append($("<option>").attr("value", "").text('--请选择分店--'))
                        //将查到的部门类型信息填充到类型下拉框中
                        $.each(brtypes, function (i, obj) {
                            $("#brType1").append(
                                $("<option>").attr("value", obj["brid"]).text(obj["brname"])
                            )
                        })
                        //执行表单的更新渲染方法
                        form.render('select');
                    }
                })
            }
        });

    });
</script>


</body>
</html>

login.jsp:

<%--
  Created by IntelliJ IDEA.
  User: henry
  Date: 2022/8/29
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/layui/css/layui.css"/>
    <style type="text/css">
        body{
            background-image: url("assets/img/bj.jpeg");
            background-repeat:no-repeat;
            -moz-background-size:100% 100%;
            background-attachment:fixed;
        }
        .layui-card{
            background:rgba(256,256,256,0.9);
            width: 400px;
            height: 250px;
            box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
            position: absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            margin:auto;
        }
        .layui-card-body{
            width: 350px;
            height: 350px;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header layui-bg-blue">欢迎登录</div>
    <div class="layui-card-body">
        <form class="layui-form" method="post">
            <div class="layui-form-item">

                <label class="layui-form-label">用户名</label>

                <div class="layui-input-inline">

                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="username">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="login">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="${pageContext.request.contextPath}/assets/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(["form","layer"],function(){
        var form = layui.form;
        var layer = layui.layer;
        form.on("submit(login)",function(data){

            //layer.msg(JSON.stringify(data.field),{time:2000});
            //$.ajax({});
            window.location.href="${pageContext.request.contextPath}/forward/toMain";
        })
    })

    // 防止后退
    history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function() {
        history.pushState(null, null, document.URL);
    });
</script>
</body>
</html>

main.jsp:

<%--
  Created by IntelliJ IDEA.
  User: henry
  Date: 2022/8/29
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台主页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css">

</head>
<style>

</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">LayUI后台管理系统</div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="assets/img/tx.jpeg" class="layui-nav-img">
                    张三
                </a>
                <dl class="layui-nav-child">
                    <dd><a class="site-demo-active" data-url="baseData" data-id="baseData" data-title="基本资料" data-type="ltabAdd"
                           href="#">基本资料</a></dd>
                    <dd><a class="site-demo-active" data-url="updPsw" data-id="updPsw" data-title="修改密码" data-type="ltabAdd" href="#">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a id="aaa" href="${pageContext.request.contextPath}/user/exit">退出</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
            <!-- <ul class="layui-nav layui-nav-tree" lay-filter="test">
						<c:forEach var="fatherMenu" items="${requestScope.menus}">
							<li class="layui-nav-item">
								<a class="" href="javascript:;">${fatherMenu.mname}</a>
								<dl class="layui-nav-child">
									<c:forEach items="${fatherMenu.sonMenu}" var="sonmenu">
										<dd><a data-url="${pageContext.request.contextPath}/${sonmenu.murl}" data-id="${sonmenu.mid}" class="site-demo-active"
											 data-title="${sonmenu.mname}" data-type="ltabAdd" href="#">${sonmenu.mname}</a>
										</dd>
									</c:forEach>
								</dl>
							</li>
						</c:forEach>
					</ul> -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">


                <li class="layui-nav-item">
                    <a class="" href="javascript:;">人事管理<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">

                        <dd><a data-url="${pageContext.request.contextPath}/forward/toEmp" data-id="301" class="site-demo-active" data-title="员工信息" data-type="ltabAdd"
                               href="#">员工信息</a>
                        </dd>

                        <dd><a data-url="./page1.html" data-id="201" class="site-demo-active" data-title="部门信息" data-type="ltabAdd"
                               href="#">部门信息</a>
                        </dd>

                        <dd><a data-url="./page3.html" data-id="401" class="site-demo-active" data-title="角色信息" data-type="ltabAdd"
                               href="#">角色信息</a>
                        </dd>

                    </dl>
                </li>


                <li class="layui-nav-item">
                    <a class="" href="javascript:;">商品管理<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">

                        <dd><a data-url="./page4.html" data-id="501" class="site-demo-active" data-title="商品信息" data-type="ltabAdd"
                               href="#">商品信息</a>
                        </dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">统计管理<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">

                        <dd><a data-url="./page5.html" data-id="901" class="site-demo-active" data-title="统计信息" data-type="ltabAdd"
                               href="#">统计信息</a>
                        </dd>

                    </dl>
                </li>

                <span class="layui-nav-bar" style="top: 202.5px; height: 0px; opacity: 0;"></span>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="background-color: #FFFCF5;">
        <!-- 内容主体区域 -->
        <div>
            <div id="tabHead" class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowclose="true">
                <ul class="layui-tab-title">
                    <li class="layui-this layui-icon layui-icon-home" id="home"></li>
                    <!--
                描述:存放tab
            -->
                </ul>
                <!--
            描述:tab右键功能
        -->
                <ul class="rightmenu" class="layui-nav layui-nav-tree" style=" display: none;position: absolute;background: #2F4056;font-family: '微软雅黑';">
                    <li id="yue" style="color: red;cursor:pointer; margin: 10px 10px 10px 10px" data-id="" data-type="closethis"
                        class="layui-nav-item">
                        <a href="#" style="color: #ffffff;cursor:pointer;" data-type="closethis">
                            <span class="layui-badge-dot layui-bg-red"></span> 关闭当前</a>
                        <hr class="layui-bg-red">
                    </li>

                    <li data-type="closeall" class="layui-nav-item" style="color: red;cursor:pointer;margin: 10px 10px 10px 10px">
                        <a href="#" style="color: #ffffff;cursor:pointer;" data-id="" data-type="closeall">
                            <span class="layui-badge-dot layui-bg-orange"></span> 关闭所有
                        </a>
                        <hr class="layui-bg-orange">
                    </li>

                    <li data-type="closeothe" class="layui-nav-item" style="color: red;cursor:pointer; margin: 10px 10px 10px 10px">
                        <a href="#" style="color: #ffffff;cursor:pointer;" data-id="" data-type="closeothe">
                            <span class="layui-badge-dot layui-bg-green"></span> 关闭其他
                        </a>
                        <hr class="layui-bg-green">
                    </li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="./page5.html" frameborder="0" width="95%" height="85%" style="margin-left: 30px"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="test1" data-id="test" class="layui-panel-window">
        <input class="layui-table-box" title="9999999" />
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <h3>LayUI后台管理系统</h3>
    </div>

</div>
<script src="${pageContext.request.contextPath}/assets/layui/layui.all.js"></script>
<script>
    var ids = 0;
    layui.use('element', function() {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function() {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    ,
                    content: '内容' + (Math.random() * 1000 | 0),
                    id: new Date().getTime() //实际使用一般是规定好的id,这里以时间戳模拟下
                })
            },
            tabDelete: function(id) {
                //删除指定Tab项
                element.tabDelete('demo', id); //删除:“商品管理”
                ids = 0;
                //othis.addClass('layui-btn-disabled'); 添加样式
            },
            tabDeleteAll: function(idss) {
                $.each(idss, function(i, item) {
                    element.tabDelete('demo', item); //删除所有
                });
                ids = 0;
            },
            tabChange: function(id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //切换到:用户管理
                //tabDelete(id);
                //ltabAdd();

            },
            ltabAdd: function(url, id, name) {
                //新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
                        '" style="width:100%;height:99%;" ></iframe>',
                    id: id //规定好的id
                });
                CustomRightClick(id); //给tab绑定右击事件
                FrameWH(); //计算ifram层的大小

            }
        };
        $("#aaa").click(function() {
            layer.confirm('是否重新登录?', function(index) {
                top.location.href = "${pageContext.request.contextPath}/login.jsp";
            });
        })
        //当点击有site-demo-active属性的标签时,即左侧菜单栏中内容 ,触发点击事件
        $('.site-demo-active').on('click', function() {
            var dataid = $(this);
            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目,即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小,则直接打开新的tab项
                active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否则判断该tab项是否以及存在

                var isData = false; //初始化一个标志,为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function() {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到,则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.ltabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab,最后都转到要打开的选项页面上
            active.tabChange(dataid.attr("data-id"));
        });
        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

        function FrameWH() {

            // var h = $(window).height() -41- 10 - 60 -10-44 -10;
            var h = $(document).height() - 41 - 10 - 60 - 10 - 44 - 10 - 12;
            //alert(h);
            $("iframe").css("height", h + "px");
        }

        $(window).resize(function() {
            FrameWH();
        });


        function CustomRightClick(id) {
            //取消右键  rightmenu属性开始是隐藏的 ,当右击的时候显示,左击的时候隐藏
            $('.layui-tab-title li').on('contextmenu', function() {
                return false;
            })
            $('.layui-tab-title,.layui-tab-title li').click(function() {
                $('.rightmenu').hide();
                ids = 0;
            });

            //桌面点击右击
            $('.layui-tab-title li').on('contextmenu', function(e) {

                var popupmenu = $(".rightmenu");
                ids += 1;
                if (ids > 1) {
                    return true;
                }
                popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

                //判断右侧菜单的位置
                l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
                t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;

                popupmenu.css({
                    left: l - 190,
                    top: t - 50
                }).show(); //进行绝对定位
                //alert("右键菜单")
                return false;
            });
        }

        $(".rightmenu li").click(function() {
            //右键菜单中的选项被点击之后,判断type的类型,决定关闭所有还是关闭当前。
            if ($(this).attr("data-type") == "closethis") {
                //如果关闭当前,即根据显示右键菜单时所绑定的id,执行tabDelete

                active.tabDelete($(this).attr("data-id"));
            } else if ($(this).attr("data-type") == "closeall") {
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                $.each(tabtitle, function(i) {
                    ids[i] = $(this).attr("lay-id");
                })
                //如果关闭所有 ,即将所有的lay-id放进数组,执行tabDeleteAll
                active.tabDeleteAll(ids);
            } else if ($(this).attr("data-type") == "closeothe") {
                var id = $(this).attr("data-id");
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                $.each(tabtitle, function(i) {
                    if (id != $(this).attr("lay-id")) {
                        ids[i] = $(this).attr("lay-id");
                    }
                })
                active.tabDeleteAll(ids);
            }

            $('.rightmenu').hide(); //最后再隐藏右键菜单
        })

    });
</script>
</body>
</html>

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>