项目框架：登录跳转页面
运行结果：
代码整体布局：
代码如下：
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', 'aaa@qq.com', '河南', '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', 'a22@qq.com', '河南', '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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118037.html
