<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" th:href="@{/css/common/base.css}" />
	<link rel="stylesheet" th:href="@{/css/common/page_new.css}" />
	<link rel="stylesheet" th:href="@{/js/plugins/bootstrapselect/css/product_list.css}" />
	<link rel="stylesheet"  th:href="@{/css/layui.css}"  media="all">
</head>
<style type="text/css">
	.box .search_pro .cx input{
		background: #00B983;
		width: 100px;
		height: 39px;
		color:white;
		margin-right: 10px;
		padding: 10px -1px;
	}
	.content p span input{
		background: #00B983;
		color:white;
		margin-right: 10px;
		padding: 10px 20px;
		border:1px solid #EEEEEE;
		text-indent: 5px;
	}
	.layui-table th{
		text-align: center;
	}
	body .demo-class .layui-layer-btn a{background:#005ba7;}
</style>
<body>
<div class="box">
	<h2><span></span>用户列表<button onclick="location.reload()">刷新</button></h2>
	<div class="search">
		<p class="title">条件查询</p>
		<p class="search_pro" style="padding-left: 0px;">
			<label class="layui-form-label">用户名称:</label>
			<input style="width: 200px" type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入用户名称" class="layui-input">
			<span class="cx">
					<button style="background-color: #005ba7;margin-left: 10px" class="layui-btn" onclick="getBargainProduct()">查询</button>
				</span>

			<button id="addMe" class="layui-btn layui-btn-radius" style="background-color: #005ba7;margin-left: 565px" onclick="addUser()">添加人员</button></span>
		</p>



	</div>
	<div class="content">
		<p class="title list_ti"><span>用户列表</span></p>
		<table class="layui-table" lay-size="sm">

		</table>
	</div>
	<div class="footer" style="display: flex;justify-content: space-between;align-items:center;padding:10px 10px;border:1px solid #e4e4e4;font-size:14px;color:#999">
		<div style="flex-grow: 1;display: flex;justify-content: flex-end;">
			<p style="line-height:33px">共<span style="color:#d00" id="pages">0</span>页/<span style="color:#d00" id="total">0</span>条数据</p>
			<div class="pagediv" style="clear:both;"></div>
		</div>
	</div>
</div>
</body>
</html>
<script src="/js/plugins/jquery.min.js"></script>
<script src="/js/plugins/layer/layer.js"></script>
<script type="text/javascript" src="/js/plugins/page_new.js"></script>
<script type="text/javascript">
    $(function(){
        $.post(
            "/bpm/user/userList",
            {
                pageSize:10,
                pageNum:1,
                teamName:"",
                status:""
            },
            function (data) {
                console.log(data)
                var size = data.data.pages;
                if (!data.data.pages){
                    size = 0;
                }
                var current = data.pageNum;
                /*分页*/
                $(".pagediv").createPage({
                    pageNum: size,//总页码
                    current: current,//当前页
                    shownum: 10,//每页显示个数
                    showPageNum: true, //显示总页数
                    showToPage: true, //显示跳转页码
                    backfun: function (page) {
                        flushHtml(page.current);
                    }
                });
            },
            'json'
        );
        flushHtml();
    });
    function flushHtml(current) {
        var pageNum = 1;
        if(current){
            pageNum = current;
        }
        var teamName = $("[name='teamName']").val();
        var status = $("[name='status']").val();
        $.post(
            "/bpm/user/userList",
            {
                pageSize:10,
                pageNum:pageNum,
                teamName:teamName,
                status:status
            },
            function (data) {
                selectListAll(data.data);
            },'json'
        );
    }
    function selectListAll(data) {
        var pages = data.pages;
        var total = data.total;
        data = data.list;
        var content = '';
        content += '<thead><tr><th>用户编号</th><th style="width: 8%">用户名称</th><th>邮箱</th><th>用户描述</th><th style="width: 8%">手机</th><th style="width: 8%">创建时间</th><th>操作</th></tr></thead>';
        if(data!=null){
            for (var i in data) {
                content += '<tr>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].id+'</td>';
                content += '<td class="product_num">'+data[i].username+'</td>';
                content += '<td class="product_num">'+data[i].email+'</td><td class="product_num">'+data[i].content+'</td><td class="product_num">'+data[i].telephone+'</td>';
                content += '<td class="product_num">'+data[i].createTime+'</td>';
                content += '<td class="cao_zuo"><span onclick="toActivityDetail(\''+data[i].username+'\',\''+data[i].email+'\',\''+data[i].telephone+'\',\''+data[i].createTime+'\',\''+data[i].content+'\')">查看</span><span onclick="deleteUser('+data[i].id+',\''+data[i].username+'\')">删除</span></td></tr>';
            }
            $('#pages').text(pages);
            $('#total').text(total);
        }else{
            content+= '<div class="tipImg"><img src="/images/non.png" ><p class="tipNon">暂无数据</p></div>';
            $('#pages').text(0);
            $('#total').text(0);
        }
        $('table').html(content);
    }
    /*条件查询*/
    function getBargainProduct() {
        var name = $("[name='userName']").val();
        $.post("/bpm/user/userList",
            {
                pageSize:10,
                pageNum:1,
                userName:name
            },function (data) {
                selectListAll(data.data);
                var size = data.data.pages;
                if (!data.data.pages){
                    size = 0;
                }
                /*分页*/
                $(".pagediv").createPage({
                    pageNum: size,//总页码
                    current: 1,//当前页
                    shownum: 10,//每页显示个数
                    showPageNum: true, //显示总页数
                    showToPage: true, //显示跳转页码
                    backfun: function (page) {
                        flushHtml(page.current);
                    }
                });
            },'json')
    }

    /*查看用户 */
    function toActivityDetail(username,email,telephone,createTime,content) {
        var content = '<div class="add"><span>用户名称：<span>'+username+'</span></span></div>' +
			'<div class="add"><span>用户邮箱：<span>'+email+'</span></div>' +
            '<div class="add"><span>用户描述：<span>'+content+'</span></span></div>' +
			'<div class="add"><span>用户手机：<span>'+telephone+'</span></span></div>' +
			'<div class="add"><span>创建时间：<span>'+createTime+'</span></span></div>';
        layer.open({
            skin: 'demo-class',
            content:content
        });

    }


    function addUser(){
        layer.open({
            type: 2,
            title: '添加用户',
            closeBtn: 1,
            area: ['400px','500px'],
            shade: 0,
            btnAlign: 'c',
            content: "/web/bpm/user/addUser",
        });
	}

    /*删除用户 */
    function deleteUser(id ,name) {
        layer.open({
            id:1,
            type: 1,
            title:'确认删除吗',
            skin:'layui-layer-rim',
            area:['300px', '165px'],
            content: '<div style="margin-top: 22px;margin-left: 8px;">您确定删除用户'+name+"吗？</div>"
            ,
            btn:['确定','取消'],
            btn1: function (index,layero) {
                $.post("/bpm/user/deleteUser",
                    {
                        id:id
                    },function (data) {
                        if(data.code==200){
                            parent.layer.msg('删除成功!', { icon: 1, time: 1000 }, function () {
                                location.reload();
                            });
                        }else {
                            parent.layer.msg('删除失败!', { icon: 2, time: 1000 }, function () {
                                location.reload();
                            });
                        }
                    },'json')
            },
            btn2:function (index,layero) {
                layer.close(index);
            }
        });
    }
</script>