5.15 改前端界面+小组项目介绍以及前端搭建

最新推荐文章于 2024-09-21 11:29:05 发布

白鹿0820

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量127

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_51170293/article/details/130678242

版权

一：

需求：

把登录和咨询师换成统一款式：

f12 查看宽度

找到对应文件对应按钮位置

对应样式改成相同的

修改完毕。

小组项目:

README.md · JIANGYIFAN/springboot人事管理系统 - Gitee.com

描述前后端分离

前端 nginx搭建及部署_nginx部署_盒子里的加菲猫的博客-CSDN博客

nginx.conf 配置文件详解 - 掘金

#定义Nginx运行的用户和用户组
user www www; 

#nginx进程数，通常设置成和cpu的数量相等
worker_processes 4; 

#全局错误日志定义类型，[debug | info | notice | warn | error | crit]
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;


#进程pid文件
#pid        logs/nginx.pid;


#指定进程可以打开的最大描述符：数目
#工作模式与连接数上限
##这个指令是指当一个nginx进程打开的最多文件描述符数目，理论值应该是最多打开文件数（ulimit -n）与nginx进程数相除，但是nginx分配请求并不是那么均匀，所以最好与ulimit -n 的值保持一致。
#这是因为nginx调度时分配请求到进程并不是那么的均衡，所以假如填写10240，总并发量达到3-4万时就有进程可能超过10240了，这时会返回502错误。
worker_rlimit_nofile 65535;


events {
    #参考事件模型，use [ kqueue | rtsig | epoll | /dev/poll | select | poll ]; epoll模型
    #是Linux 2.6以上版本内核中的高性能网络I/O模型，linux建议epoll，如果跑在FreeBSD上面，就用kqueue模型。
    #补充说明：
    #与apache相类，nginx针对不同的操作系统，有不同的事件模型
    #A）标准事件模型
    #Select、poll属于标准事件模型，如果当前系统不存在更有效的方法，nginx会选择select或poll
    #B）高效事件模型
    #Kqueue：使用于FreeBSD 4.1+, OpenBSD 2.9+, NetBSD 2.0 和 MacOS X.使用双处理器的MacOS X系统使用kqueue可能会造成内核崩溃。
    #Epoll：使用于Linux内核2.6版本及以后的系统。
    #/dev/poll：使用于Solaris 7 11/99+，HP/UX 11.22+ (eventport)，IRIX 6.5.15+ 和 Tru64 UNIX 5.1A+。
    #Eventport：使用于Solaris 10。 为了防止出现内核崩溃的问题， 有必要安装安全补丁。
    use epoll
    
    
    #单个进程最大连接数（最大连接数=连接数+进程数）
    #根据硬件调整，和前面工作进程配合起来用，尽量大，但是别把cup跑到100%就行。
    worker_connections  1024;
    
    #keepalive 超时时间
    keepalive_timeout 60;
    
    #客户端请求头部的缓冲区大小。这个可以根据你的系统分页大小来设置，一般一个请求头的大小不会超过1k，不过由于一般系统分页都要大于1k，所以这里设置为分页大小。
    #分页大小可以用命令getconf PAGESIZE 取得。
    #[root@web001 ~]# getconf PAGESIZE
    #但也有client_header_buffer_size超过4k的情况，但是client_header_buffer_size该值必须设置为“系统分页大小”的整倍数。
    client_header_buffer_size 4k;
    
    #这个将为打开文件指定缓存，默认是没有启用的，max指定缓存数量，建议和打开文件数一致，inactive是指经过多长时间文件没被请求后删除缓存。
    open_file_cache max=65535 inactive=60s;
    
    
    #这个是指多长时间检查一次缓存的有效信息。
    #语法:open_file_cache_valid time 默认值:open_file_cache_valid 60 使用字段:http, server, location 这个指令指定了何时需要检查open_file_cache中缓存项目的有效信息.
    open_file_cache_valid 80s;
    
    
    #open_file_cache指令中的inactive参数时间内文件的最少使用次数，如果超过这个数字，文件描述符一直是在缓存中打开的，如上例，如果有一个文件在inactive时间内一次没被使用，它将被移除。
    #语法:open_file_cache_min_uses number 默认值:open_file_cache_min_uses 1 使用字段:http, server, location  这个指令指定了在open_file_cache指令无效的参数中一定的时间范围内可以使用的最小文件数,如果使用更大的值,文件描述符在cache中总是打开状态.
    open_file_cache_min_uses 1;
    
    #语法:open_file_cache_errors on | off 默认值:open_file_cache_errors off 使用字段:http, server, location 这个指令指定是否在搜索一个文件是记录cache错误.
    open_file_cache_errors on;
}


#设定http服务器，利用它的反向代理功能提供负载均衡支持
http{
    #文件扩展名与文件类型映射表
    include mime.types;
    
    #默认文件类型
    default_type application/octet-stream;
    
    #默认编码
    charset utf-8;
    
    #服务器名字的hash表大小
    #保存服务器名字的hash表是由指令server_names_hash_max_size 和server_names_hash_bucket_size所控制的。参数hash bucket size总是等于hash表的大小，并且是一路处理器缓存大小的倍数。在减少了在内存中的存取次数后，使在处理器中加速查找hash表键值成为可能。如果hash bucket size等于一路处理器缓存的大小，那么在查找键的时候，最坏的情况下在内存中查找的次数为2。第一次是确定存储单元的地址，第二次是在存储单元中查找键 值。因此，如果Nginx给出需要增大hash max size 或 hash bucket size的提示，那么首要的是增大前一个参数的大小.
    server_names_hash_bucket_size 128;
    
    #客户端请求头部的缓冲区大小。这个可以根据你的系统分页大小来设置，一般一个请求的头部大小不会超过1k，不过由于一般系统分页都要大于1k，所以这里设置为分页大小。分页大小可以用命令getconf PAGESIZE取得。
    client_header_buffer_size 32k;
    
    #客户请求头缓冲大小。nginx默认会用client_header_buffer_size这个buffer来读取header值，如果header过大，它会使用large_client_header_buffers来读取。
    large_client_header_buffers 4 64k;
    
    #设定通过nginx上传文件的大小
    client_max_body_size 8m;
    
    #开启高效文件传输模式，sendfile指令指定nginx是否调用sendfile函数来输出文件，对于普通应用设为 on，如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络I/O处理速度，降低系统的负载。注意：如果图片显示不正常把这个改成off。
    #sendfile指令指定 nginx 是否调用sendfile 函数（zero copy 方式）来输出文件，对于普通应用，必须设为on。如果用来进行下载等应用磁盘IO重负载应用，可设置为off，以平衡磁盘与网络IO处理速度，降低系统uptime。
    sendfile on;
    
     #开启目录列表访问，合适下载服务器，默认关闭。
    autoindex on;
    
      #此选项允许或禁止使用socke的TCP_CORK的选项，此选项仅在使用sendfile的时候使用
    tcp_nopush on;
     
    tcp_nodelay on;
    
    #长连接超时时间，单位是秒
    keepalive_timeout 120;
    
    #FastCGI相关参数是为了改善网站的性能：减少资源占用，提高访问速度。下面参数看字面意思都能理解。
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 128k;
    
    #gzip模块设置
    gzip on; #开启gzip压缩输出
    gzip_min_length 1k;    #最小压缩文件大小
    gzip_buffers 4 16k;    #压缩缓冲区
    gzip_http_version 1.0; #压缩版本（默认1.1，前端如果是squid2.5请使用1.0）
    gzip_comp_level 2;     #压缩等级
    gzip_types text/plain application/x-javascript text/css application/xml;    #压缩类型，默认就已经包含textml，所以下面就不用再写了，写上去也不会有问题，但是会有一个warn。
    gzip_vary on;

    #开启限制IP连接数的时候需要使用
    #limit_zone crawler $binary_remote_addr 10m;
    
    
    #负载均衡配置
    upstream piao.jd.com {
     
        #upstream的负载均衡，weight是权重，可以根据机器配置定义权重。weigth参数表示权值，权值越高被分配到的几率越大。
        server 192.168.80.121:80 weight=3;
        server 192.168.80.122:80 weight=2;
        server 192.168.80.123:80 weight=3;

        #nginx的upstream目前支持4种方式的分配
        #1、轮询（默认）
        #每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。
        #2、weight
        #指定轮询几率，weight和访问比率成正比，用于后端服务器性能不均的情况。
        #例如：
        #upstream bakend {
        #    server 192.168.0.14 weight=10;
        #    server 192.168.0.15 weight=10;
        #}
        #2、ip_hash
        #每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session的问题。
        #例如：
        #upstream bakend {
        #    ip_hash;
        #    server 192.168.0.14:88;
        #    server 192.168.0.15:80;
        #}
        #3、fair（第三方）
        #按后端服务器的响应时间来分配请求，响应时间短的优先分配。
        #upstream backend {
        #    server server1;
        #    server server2;
        #    fair;
        #}
        #4、url_hash（第三方）
        #按访问url的hash结果来分配请求，使每个url定向到同一个后端服务器，后端服务器为缓存时比较有效。
        #例：在upstream中加入hash语句，server语句中不能写入weight等其他的参数，hash_method是使用的hash算法
        #upstream backend {
        #    server squid1:3128;
        #    server squid2:3128;
        #    hash $request_uri;
        #    hash_method crc32;
        #}

        #tips:
        #upstream bakend{#定义负载均衡设备的Ip及设备状态}{
        #    ip_hash;
        #    server 127.0.0.1:9090 down;
        #    server 127.0.0.1:8080 weight=2;
        #    server 127.0.0.1:6060;
        #    server 127.0.0.1:7070 backup;
        #}
        #在需要使用负载均衡的server中增加 proxy_pass http://bakend/;

        #每个设备的状态设置为:
        #1.down表示单前的server暂时不参与负载
        #2.weight为weight越大，负载的权重就越大。
        #3.max_fails：允许请求失败的次数默认为1.当超过最大次数时，返回proxy_next_upstream模块定义的错误
        #4.fail_timeout:max_fails次失败后，暂停的时间。
        #5.backup： 其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。

        #nginx支持同时设置多组的负载均衡，用来给不用的server来使用。
        #client_body_in_file_only设置为On 可以讲client post过来的数据记录到文件中用来做debug
        #client_body_temp_path设置记录文件的目录 可以设置最多3层目录
        #location对URL进行匹配.可以进行重定向或者进行新的代理 负载均衡
    }
    
    
    #虚拟主机的配置
    server {
        #监听端口
        listen 80;

        #域名可以有多个，用空格隔开
        server_name www.jd.com jd.com;
        #默认入口文件名称
        index index.html index.htm index.php;
        root /data/www/jd;

        #对******进行负载均衡
        location ~ .*.(php|php5)?$
        {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            include fastcgi.conf;
        }
         
        #图片缓存时间设置
        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires 10d;
        }
         
        #JS和CSS缓存时间设置
        location ~ .*.(js|css)?$
        {
            expires 1h;
        }
         
        #日志格式设定
        #$remote_addr与$http_x_forwarded_for用以记录客户端的ip地址；
        #$remote_user：用来记录客户端用户名称；
        #$time_local： 用来记录访问时间与时区；
        #$request： 用来记录请求的url与http协议；
        #$status： 用来记录请求状态；成功是200，
        #$body_bytes_sent ：记录发送给客户端文件主体内容大小；
        #$http_referer：用来记录从那个页面链接访问过来的；
        #$http_user_agent：记录客户浏览器的相关信息；
        #通常web服务器放在反向代理的后面，这样就不能获取到客户的IP地址了，通过$remote_add拿到的IP地址是反向代理服务器的iP地址。反向代理服务器在转发请求的http头信息中，可以增加x_forwarded_for信息，用以记录原有客户端的IP地址和原来客户端的请求的服务器地址。
        log_format access '$remote_addr - $remote_user [$time_local] "$request" '
        '$status $body_bytes_sent "$http_referer" '
        '"$http_user_agent" $http_x_forwarded_for';
         
        #定义本虚拟主机的访问日志
        access_log  /usr/local/nginx/logs/host.access.log  main;
        access_log  /usr/local/nginx/logs/host.access.404.log  log404;
         
        #对 "/connect-controller" 启用反向代理
        location /connect-controller {
            proxy_pass http://127.0.0.1:88; #请注意此处端口号不能与虚拟主机监听的端口号一样（也就是server监听的端口）
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
             
            #后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             
            #以下是一些反向代理的配置，可选。
            proxy_set_header Host $host;

            #允许客户端请求的最大单文件字节数
            client_max_body_size 10m;

            #缓冲区代理缓冲用户端请求的最大字节数，
            #如果把它设置为比较大的数值，例如256k，那么，无论使用firefox还是IE浏览器，来提交任意小于256k的图片，都很正常。如果注释该指令，使用默认的client_body_buffer_size设置，也就是操作系统页面大小的两倍，8k或者16k，问题就出现了。
            #无论使用firefox4.0还是IE8.0，提交一个比较大，200k左右的图片，都返回500 Internal Server Error错误
            client_body_buffer_size 128k;

            #表示使nginx阻止HTTP应答代码为400或者更高的应答。
            proxy_intercept_errors on;

            #后端服务器连接的超时时间_发起握手等候响应超时时间
            #nginx跟后端服务器连接超时时间(代理连接超时)
            proxy_connect_timeout 90;

            #后端服务器数据回传时间(代理发送超时)
            #后端服务器数据回传时间_就是在规定时间之内后端服务器必须传完所有的数据
            proxy_send_timeout 90;

            #连接成功后，后端服务器响应时间(代理接收超时)
            #连接成功后_等候后端服务器响应时间_其实已经进入后端的排队之中等候处理（也可以说是后端服务器处理请求的时间）
            proxy_read_timeout 90;

            #设置代理服务器（nginx）保存用户头信息的缓冲区大小
            #设置从被代理服务器读取的第一部分应答的缓冲区大小，通常情况下这部分应答中包含一个小的应答头，默认情况下这个值的大小为指令proxy_buffers中指定的一个缓冲区的大小，不过可以将其设置为更小
            proxy_buffer_size 4k;

            #proxy_buffers缓冲区，网页平均在32k以下的设置
            #设置用于读取应答（来自被代理服务器）的缓冲区数目和大小，默认情况也为分页大小，根据操作系统的不同可能是4k或者8k
            proxy_buffers 4 32k;

            #高负荷下缓冲大小（proxy_buffers*2）
            proxy_busy_buffers_size 64k;

            #设置在写入proxy_temp_path时数据的大小，预防一个工作进程在传递文件时阻塞太长
            #设定缓存文件夹大小，大于这个值，将从upstream服务器传
            proxy_temp_file_write_size 64k;
        }
        
        #本地动静分离反向代理配置
        #所有jsp的页面均交由tomcat或resin处理
        location ~ .(jsp|jspx|do)?$ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8080;
        }
    }
}

作者：DreamTruth
链接：https://juejin.cn/post/6844903741678698510
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

nginx配置多个

vscode进行运行

地址：职工人事后台管理系统

Nginx 配置文件主要分成四部分：main（全局设置）、server（主机设置）、upstream（上游服务器设置，主要为反向代理、负载均衡相关配置）和 location（URL匹配特定位置后的设置）。main 部分设置的指令影响其他所有部分的设置；server 部分的指令主要用于制定虚拟主机域名、IP 和端口号；upstream 的指令用于设置一系列的后端服务器，设置反向代理及后端服务器的负载均衡；location 部分用于匹配网页位置（比如，根目录“/”，“/images”，等等）。他们之间的关系：server 继承 main，location 继承 server；upstream 既不会继承指令也不会被继承

薪资管理

薪酬前端代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>职工薪资管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="../../layuimini/lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../../layuimini/css/public.css" media="all" />
  </head>

  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">部门选择</label>
                <div class="layui-input-inline">
                  <select id="selectId" lay-filter="select">
                    <option value="0">请选择部门</option>
                  </select>
                  <input
                    type="hidden"
                    name="departmentName"
                    id="departmentName"
                  />
                </div>

                <label class="layui-form-label">职工选择</label>
                <div class="layui-input-inline">
                  <select
                    name="personalId"
                    id="selectPersonal"
                    lay-filter="selectPersonal"
                  >
                    <option value="0">请选择职工</option>
                  </select>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label">薪资日期:</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      id="searchRewardDate"
                      autocomplete="off"
                      class="layui-input"
                    />
                    <input type="hidden" name="year" id="searchyear" />
                    <input type="hidden" name="month" id="searchmonth" />
                  </div>
                </div>
                <div class="layui-inline">
                  <button
                    type="submit"
                    class="layui-btn layui-btn-primary"
                    lay-submit
                    lay-filter="data-search-btn"
                  >
                    <i class="layui-icon layui-icon-search"></i> 搜 索
                  </button>
                </div>
                <div class="layui-inline">
                  <a
                    type="button"
                    class="layui-btn layui-btn-primary"
                    id="data-reset-btn"
                  >
                    <i class="layui-icon"></i> 重 置
                  </a>
                </div>
              </div>
            </form>
          </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <button
              class="layui-btn layui-btn-normal layui-btn-sm"
              lay-event="add"
            >
              添加
            </button>
            <button
              class="layui-btn layui-btn-sm layui-btn-danger"
              lay-event="delete"
            >
              删除
            </button>
            <button
              class="layui-btn layui-btn-sm layui-btn-sucess"
              lay-event="refresh"
            >
              刷新
            </button>
            <button
              class="layui-btn layui-btn-sm layui-btn-warm"
              lay-event="export"
            >
              导出全部数据
            </button>
          </div>
        </script>

        <table
          class="layui-hide"
          id="currentTableId"
          lay-filter="currentTableFilter"
        ></table>
      </div>
    </div>

    <script type="text/html" id="userEditDialog">
      <form
        id="userEditForm"
        lay-filter="userEditForm"
        class="layui-form layui-form-pane"
        style="padding-left:20px;margin-top: 20px;"
      >
        <div class="layui-row">
          <div class="layui-col-md12">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">职工名称:</label>
                <div class="layui-input-inline">
                  <select
                    name="personalId"
                    id="personalId"
                    lay-search
                    lay-verType="tips"
                    lay-verify="required"
                  >
                    <option value="">请选择职工</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">发薪日期:</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    name="salaryDate"
                    id="salaryDate"
                    autocomplete="off"
                    class="layui-input"
                    lay-verType="tips"
                    lay-verify="required"
                  />
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">基本工资:</label>
                <div class="layui-input-inline">
                  <input
                    name="basisSalary"
                    placeholder="请输入基本工资"
                    class="layui-input"
                    lay-verType="tips"
                    lay-verify="number"
                  />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">补助工资:</label>
                <div class="layui-input-inline">
                  <input
                    name="subsidySalary"
                    placeholder="请输入补助工资"
                    class="layui-input"
                    lay-verType="tips"
                    lay-verify="number"
                  />
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">社保:</label>
                <div class="layui-input-inline">
                  <input
                    name="socialSalary"
                    placeholder="请输入社保"
                    class="layui-input"
                    lay-verType="tips"
                    lay-verify="number"
                  />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">公积金:</label>
                <div class="layui-input-inline">
                  <input
                    name="providentFund"
                    placeholder="请输入公积金"
                    class="layui-input"
                    lay-verType="tips"
                    lay-verify="number"
                  />
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">奖金:</label>
                <div class="layui-input-inline">
                  <input
                    name="bonus"
                    placeholder="请输入奖金"
                    class="layui-input"
                    lay-verType="tips"
                    lay-verify="number"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-input-block">
          <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>
            提交
          </button>
          <button class="layui-btn layui-btn-primary" type="button" id="Cancel">
            取消
          </button>
        </div>
      </form>
    </script>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"
        >编辑</a
      >
      <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"
        >删除</a
      >
    </script>

    <script
      src="../../layuimini/lib/layui-v2.5.5/layui.js"
      charset="utf-8"
    ></script>
    <script src="../../layuimini/js/lay-config.js" charset="utf-8"></script>
    <script>
      var tableIns
      layui.use(
        ['layer', 'form', 'table', 'laydate', 'common', 'excel'],
        function (args) {
          var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            common = layui.common,
            excel = layui.excel

          tableIns = table.render({
            elem: '#currentTableId',
            url: common.api + '/salary/list',
            where: { token: common.getToken },
            toolbar: '#toolbarDemo',
            title: '职工薪资信息',
            limits: [1, 5, 10, 15, 20],
            limit: 15,
            page: true,
            skin: 'row',
            even: true,
            cols: [
              [
                {
                  type: 'checkbox',
                  width: 50,
                },
                {
                  field: 'id',
                  title: 'ID',
                  width: 80,
                  sort: true,
                  align: 'center',
                },
                {
                  field: 'personalName',
                  width: 100,
                  title: '职工姓名',
                  align: 'center',
                },
                {
                  field: 'departmentName',
                  width: 150,
                  title: '所属部门',
                  align: 'center',
                },
                {
                  field: 'positionName',
                  width: 150,
                  title: '所属岗位',
                  align: 'center',
                },
                {
                  field: 'basisSalary',
                  width: 150,
                  title: '基本工资',
                  align: 'center',
                  templet: function (d) {
                    return d.basisSalary + '元'
                  },
                  sort: true,
                },
                {
                  field: 'subsidySalary',
                  width: 100,
                  title: '补助工资',
                  align: 'center',
                  templet: function (d) {
                    return d.subsidySalary + '元'
                  },
                },
                {
                  field: 'socialSalary',
                  width: 100,
                  title: '社保',
                  align: 'center',
                  templet: function (d) {
                    return d.socialSalary + '元'
                  },
                },
                {
                  field: 'providentFund',
                  width: 100,
                  title: '公积金',
                  align: 'center',
                  templet: function (d) {
                    return d.providentFund + '元'
                  },
                },
                {
                  field: 'bonus',
                  width: 100,
                  title: '奖金',
                  align: 'center',
                  templet: function (d) {
                    return d.bonus + '元'
                  },
                },
                {
                  field: 'allSalary',
                  width: 150,
                  title: '应发工资',
                  align: 'center',
                  templet: function (d) {
                    return d.allSalary + '元'
                  },
                  sort: true,
                },
                {
                  field: 'salaryDate',
                  width: 200,
                  title: '发薪日期',
                  align: 'center',
                  templet: function (d) {
                    var time = layui.util.toDateString(
                      d.salaryDate,
                      'yyyy-MM-dd'
                    )
                    return '<div>' + time + '</div>'
                  },
                  sort: true,
                },
                {
                  title: '操作',
                  minWidth: 150,
                  toolbar: '#currentTableBar',
                  align: 'center',
                },
              ],
            ],
            parseData: function (res) {
              if (res.code != 200) {
                common.login()
              }
              return {
                code: res.code, //解析接口状态
                msg: res.msg, //解析提示文本
                count: res.data.total, //解析数据长度
                data: res.data.list, //解析数据列表
              }
            },
            response: {
              statusCode: 200, //重新规定成功的状态码为 200，table 组件默认为 0
            },
            request: {
              pageName: 'page', //页码的参数名称，默认：page
              limitName: 'size', //每页数据量的参数名，默认：limit
            },
          })

          // 监听搜索操作
          form.on('submit(data-search-btn)', function (data) {
            var param = data.field
            console.log(param)
            // 执行搜索重载
            tableIns.reload({
              url: common.api + '/salary/list',
              method: 'get',
              where: param,
            })
            return false
          })

          //监听工具栏添加删除刷新
          table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {
              // 监听添加操作
              showEditModel()
            } else if (obj.event === 'delete') {
              // 监听删除操作
              var data = table.checkStatus('currentTableId').data
              if (data.length === 0) {
                layer.msg('请选择要删除的数据', { icon: 2 })
                return
              }
              var ids = data.map(function (d) {
                return d.id
              })
              doDel(ids)
            } else if (obj.event === 'refresh') {
              tableIns.reload({
                url: common.api + '/salary/list',
                where: { departmentName: '' },
              })
            } else if (obj.event === 'export') {
              common.ajax(common.api + '/salary/all', null, function (res) {
                var data = res.data
                data = common.compare(data)
                console.log(data)
                data = excel.filterExportData(data, [
                  'id',
                  'personalName',
                  'departmentName',
                  'positionName',
                  'basisSalary',
                  'subsidySalary',
                  'socialSalary',
                  'providentFund',
                  'bonus',
                  'allSalary',
                  'salaryDate',
                ])
                data.unshift({
                  id: '薪资编号',
                  personalName: '员工姓名',
                  departmentName: '所属部门',
                  positionName: '所属岗位',
                  basisSalary: '基本工资',
                  subsidySalary: '补助工资',
                  socialSalary: '社保',
                  providentFund: '公积金',
                  bonus: '奖金',
                  allSalary: '应发工资',
                  salaryDate: '发薪日期',
                })
                var timestart = Date.now()
                excel.exportExcel(
                  {
                    sheet1: data,
                  },
                  '薪资信息.xlsx',
                  'xlsx'
                )
                var timeend = Date.now()

                var spent = (timeend - timestart) / 1000
                layer.msg('单纯导出耗时 ' + spent + ' s')
              })
            }
          })

          //监听编辑删除
          table.on('tool(currentTableFilter)', function (obj) {
            if (obj.event === 'edit') {
              showEditModel(obj.data)
            } else if (obj.event === 'delete') {
              doDel([obj.data.id])
            }
          })

          function showEditModel(formData) {
            var idx = layer.open({
              type: 1,
              area: ['50%', '50%'],
              title: formData ? '编辑' : '添加',
              anim: 1,
              shade: 0.6,
              content: $('#userEditDialog').html(),
              success: function (layero, dIndex) {
                // 回显表单数据
                form.val('userEditForm', formData)
                //加载日期
                laydate.render({
                  elem: '#salaryDate',
                  format: 'yyyy-MM-dd',
                  value: formData ? formData.salaryDate : '',
                })
                //职工select加载
                $.each(personalDate, function (index, item) {
                  var option = new Option(item.name, item.id)
                  $('#personalId').append(option)
                })
                //设置select控件指定text的值为选中项
                if (formData) {
                  $('#personalId').val(formData.personalId)
                }
                form.render('select')
                // 表单提交事件
                form.on('submit(userEditSubmit)', function (data) {
                  console.log(formData)
                  common.ajax(
                    formData
                      ? common.api + '/salary/' + formData.id
                      : common.api + '/salary',
                    JSON.stringify(data.field),
                    function (res) {
                      if (res.code === 200) {
                        layer.close(dIndex)
                        layer.msg(res.msg, { icon: 1 })
                        table.reload('currentTableId')
                      } else {
                        layer.msg(res.msg, { icon: 2 })
                      }
                    },
                    formData ? 'put' : 'post',
                    function (data) {
                      layer.msg(data.msg, { icon: 2 })
                    }
                  )
                  return false
                })

                $('#Cancel').click(function () {
                  layer.close(idx)
                })
              },
            })
          }

          function doDel(ids) {
            layer.confirm(
              '确定要删除选中数据吗？',
              {
                skin: 'layui-layer-admin',
                shade: 0.1,
              },
              function (i) {
                common.ajax(
                  common.api + '/salary',
                  JSON.stringify(ids),
                  function (res) {
                    if (res.code === 200) {
                      layer.msg(res.msg, { icon: 1 })
                      tableIns.reload()
                    } else {
                      layer.msg(res.msg, { icon: 2 })
                    }
                  },
                  'DELETE', // 提交方式
                  function (data) {
                    console.log(data)
                    layer.msg(data.msg, { icon: 2, time: 1000 })
                    return
                  }
                )
                layer.close(i)
              }
            )
          }

          form.on('select(select)', function (obj) {
            var txtval = obj.elem[obj.elem.selectedIndex].text
            $('#departmentName').val(txtval)
            $('#selectPersonal').val(0)
            form.render('select')
          })

          form.on('select(selectPersonal)', function (obj) {
            $('#selectId').val(0)
            $('#departmentName').val('')
            form.render('select')
          })

          var selectData, personalDate
          layer.ready(function () {
            //select 框的数据动态加载
            common.ajax(
              common.api + '/department/select',
              null,
              function (data) {
                selectData = data.data
                $.each(selectData, function (index, item) {
                  var option = new Option(item.departmentName, item.id)
                  $('#selectId').append(option)
                })
                form.render('select')
              }
            )
            common.ajax(common.api + '/personal/select', null, function (data) {
              personalDate = data.data
              $.each(personalDate, function (index, item) {
                var option = new Option(item.name, item.id)
                $('#selectPersonal').append(option)
              })
              form.render('select')
            })
            // 监听重置操作
            $('#data-reset-btn').click(function () {
              $('#selectId').val(0)
              $('#selectPersonal').val(0)
              $('#departmentName').val('')
              $('#searchyear').val('')
              $('#searchmonth').val('')
              form.render('select')
              tableIns.reload({
                url: common.api + '/salary/list',
                method: 'get',
                where: {
                  departmentName: '',
                  personalId: 0,
                  year: '',
                  month: '',
                },
              })
            })
            //加载日期
            laydate.render({
              elem: '#searchRewardDate',
              format: 'yyyy-MM',
              type: 'month',
              done: function (value) {
                var date = value.split('-')
                $('#searchyear').val(date[0])
                $('#searchmonth').val(date[1])
              },
            })
          })
        }
      )
    </script>
  </body>
</html>