<!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">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</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;
	}
	button{

	}
	body .layui-layer-rim .layui-layer-btn a{
		background-color:#005ba7;
		color: white;
	}
</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>
			<select name="interest" style="    margin-left: 0px;width: 150px;" lay-filter="aihao" id="taskStatus" class="layui-input-block">
				<option value="1">已审批</option>
				<option value="2">待审批</option>
				<option value="3">全部</option>
			</select>
			<span class="cx">
				<button style="background-color: #005ba7;margin-left: 16px;" class="layui-btn" onclick="getBargainProduct()">查询</button>
			</span>
		</p>




	</div>
	<div class="content">
		<p class="title list_ti"><span>流程列表</span></p>
		<table class="layui-table" lay-size="sm">
            <input type="hidden" id="userId" th:value="${userId}">
		</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 src="/js/layui.js"></script>
<script type="text/javascript" src="/js/plugins/page_new.js"></script>
<script type="text/javascript">
    var userId=$("#userId").val();
    $(function(){
        $.post(
            "/api/bpm/task/queryStartedPiByUserId",
            {
                userId:userId,
                taskStatus:3,
				pageNumber:0,
				pageSize:10,

            },
            function (data) {
                var size=0;
                var current=0;
                if(data.data!=null){
                    size = data.data.pages;
                    if (!data.data.pages){
                        size = 0;
                    }
                    current = data.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,taskStatus) {
        if (taskStatus==undefined){
            taskStatus=3;
		}
        var pageNum = 0;
        if(current){
            pageNum = current;
        }
        $.post(
            "/api/bpm/task/queryStartedPiByUserId",
            {
                userId:userId,
                taskStatus:taskStatus,
				pageNumber:pageNum,
				pageSize:10

            },
            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>流程实例Id</th><th>流程名称</th><th style="width: 8%">业务密钥</th><th>当前审批人</th><th style="width: 8%">审批节点名称</th><th style="width: 8%">审批开始时间</th><th style="width: 8%">审批结束时间</th><th style="width: 8%">操作</th></tr></thead>';
        if(data!=null){
            for (var i in data) {
                if(data[i].endTime==null){
                    data[i].endTime='暂无审批';
                }
                content += '<tbody><tr>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].processInstanceId+'</td>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].processDefinitionName+'</td>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].businessKey+'</td>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].name+'</td>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].processNodeName+'</td>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].startTime+'</td>';
                content += '<td class="product_name" style="width: 5%;">'+data[i].endTime+'</td>';
               	if(data[i].name=='已审批完成'){
                    content += '<td class="cao_zuo" disabled><span style="width: 16%">完成</span>';
				}else {
                    content += '<td class="cao_zuo"><span style="width: 16%" onclick="toActivityDetail('+data[i].taskId+',\''+data[i].executionId+'\')">查看</span>';
				}
                content += '</tr></tbody>';
            }
            $('#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 taskStatus = $("#taskStatus").val();
        $.post("/api/bpm/task/queryStartedPiByUserId",
            {
                pageSize:10,
                pageNum:1,
                userId:userId,
                taskStatus:taskStatus
            },function (data) {
                var size=0;
                var current=0;
                if(data.data!=null){
                    size = data.data.pages;
                    if (!data.data.pages){
                        size = 0;
                    }
                    current = data.data.pageNum;
                }
                /*分页*/
                $(".pagediv").createPage({
                    pageNum: size,//总页码
                    current: current,//当前页
                    shownum: 10,//每页显示个数
                    showPageNum: true, //显示总页数
                    showToPage: true, //显示跳转页码
                    backfun: function (page) {
                        flushHtml(page.current);
                    }
                });
            },'json')
        flushHtml(null,taskStatus);
    }


    /*查看流程 */
    function toActivityDetail(taskId,executionId) {
		location.href="/web/bpm/user/toSee?taskId="+taskId+"&executionId="+executionId
    }

</script>



