<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<title>能辉</title>
	<meta name="decorator" content="base" />
	<link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
	<style>
		.layui-card{box-shadow: none;}
		.layui-btn + .layui-btn {
			margin-left: 35px;
		}
	</style>
</head>
<body>

<div class="layui-fluid">
	<div class="layui-form layui-card">
		<div class="layui-tab  layui-tab-brief">
			<ul class="layui-tab-title">
					<sfTags:pagePermission authFlag="XTSZ_LCSZ_LCSZ_T" html='<li class="layui-this sf-tab"><a href="${ctx}/set/process/settingPage">流程设置</a></li>'/>
				<button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10 " type="reset"  onclick="reset()" >
					<i class="layui-icon fs-12">&#xe9aa;</i>
					重置
				</button>
				<button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10 " lay-submit lay-filter="LAY-user-back-search" data-type="reload">
					<i class="layui-icon fs-12">&#xe615;</i>
					查询
				</button>
			</ul>
		</div>
		<div class="layui-card-body" id="searchForm">
			<div class="layui-form-item">
				<div class="layui-col-lg2 layui-col-sm3">
					<label class="layui-form-label">流程名称：</label>
					<div class="layui-input-block">
						<input type="text" name="name" id="name" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-col-lg2 layui-col-sm3">
					<label class="layui-form-label">流程状态：</label>
					<div class="layui-input-block">
						<select name="status">
							<option value="">请选择</option>
							<option value="0">启用</option>
							<option value="1">禁用</option>
						</select>
					</div>
				</div>

			</div>
		</div>
	</div>

	<div class='layui-card'>
		<div class="layui-card-body">
			<table class="layui-hide" lay-skin="row" id="test" lay-filter="test"></table>
			<script type="text/html" id="toolbarDemo">
				<sfTags:pagePermission authFlag="XTSZ_LCSZ_XZ_T" html='<button class="layui-btn layui-btn-sm" id="add" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>'/>
			</script>
		</div>
	</div>

</div>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/html" id="table-toolbar">
	{{# if(d.status == '0'){ }}
	<sfTags:pagePermission authFlag="XTSZ_LCSZ_XG_T" html='<a class="layui-table-opt-link ml-20" lay-event="edit">编辑</a>'/>
	<sfTags:pagePermission authFlag="XTSZ_LCSZ_JY_T" html='<a class="layui-table-opt-link ml-20" lay-event="disabled">禁用</a>'/>
	{{# }else if(d.status == '1'){ }}
	<sfTags:pagePermission authFlag="XTSZ_LCSZ_JY_T" html='<a class="layui-table-opt-link ml-20" lay-event="canUse">启用</a>'/>
	{{# } }}
	<sfTags:pagePermission authFlag="XTSZ_LCSZ_SC_T" html='<a class="layui-table-opt-link ml-20" lay-event="delete">删除</a>'/>
</script>

<script type="text/javascript">
	var table;
	var $;
	layui.config({
		base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	}).use(['index', 'table', 'jquery', 'layer','laydate','form'], function(){
		$ = layui.jquery;
		table = layui.table;
		var layer = layui.layer;
		var laydate = layui.laydate;
		var  form = layui.form;
		//开始日期
		var insStart = laydate.render({
			elem: '#createTimeSta'
			,type: 'date'
			,done: function(value, date){
				//更新结束日期的最小日期
				insEnd.config.min = lay.extend({}, date, {
					month: date.month - 1
				});
				//自动弹出结束日期的选择器
				insEnd.config.elem[0].focus();
			}
		});
		//结束日期
		var insEnd = laydate.render({
			elem: '#createTimeEnd'
			,type: 'date'
			,done: function(value, date){
				//更新开始日期的最大日期
				insStart.config.max = lay.extend({}, date, {
					month: date.month - 1
				});
			}
		});

		table.render({
			elem: '#test'
			,toolbar : '#toolbarDemo'
			, height: 'full-180'
			,defaultToolbar : false
			, limits : [ 20, 50, 100 ]
			, limit:20
			, page : true //开启分页
			,url: '${ctx}/set/process/processFormList'
			,cols: [[
				{type: 'numbers',title:'序号'}
				,{field:'name', title: '流程名称',align: 'center'}
				,{field:'status', title: '流程状态',align: 'center'
					,templet:function(d){
						if(d.status=='0'){
							return "启用";
						}else if(d.status=='1'){
							return "禁用";
						}else{
							return "";
						}
					}
				}
				,{field:'description', title: '流程描述',align: 'center'}
				,{field:'createName', title: '创建人',align: 'center'}
				,{field:'createTime', title: '创建时间',align: 'center'}
				,{field:'processId', title: '操作',toolbar: '#table-toolbar',align: 'center',minWidth: 150}
			]]
			,done: function(res, curr, count){

			},exportOpt:{                           //导出选项配置
				ele:'#exportBtn',                   //导出的Dom元素
				headerTitle: '员工列表',             //excel表格的标题
				pageData:false,                     //true:导出的数据为页面数据，false:最大导出maxAmount条数据
				maxAmount: 1000,                    //当pageData为false生效
				fileName: '员工导出',
				where: function (){                 //当pageData为false时生效，过滤的条件
					return _serializeJson($("#searchForm"));
				}
			}
		});

		//头工具栏事件
		table.on('toolbar(test)', function (obj) {
			switch (obj.event){
				case 'add':
					layer.open({
						title:'新增',
						type: 2,
						area: ["90%", "90%"],
						content: '${ctx}/set/process/addProcessPage'
					})
					break;

			}
		})

		//监听行工具事件
		table.on('tool(test)', function(obj){
			var data = obj.data;
			var processId = data.processId;
			if(obj.event === 'disabled'){
				layer.confirm('禁用后，该流程不能使用，确认禁用？',{
					btn: ['确定', '取消'],
					success: function (layero, index) {
						this.enterEsc = function (event) {
							if (event.keyCode == 13 ) {
								//确认  执行的代码
								changeProcessStatus(processId,'1');
								//关闭弹窗
								layer.close(index);
								console.log("回车确认时事件")
								//取消连续回车键，导致不断弹出询问框
								$(':focus').blur();
							}
						};
						//监听键盘事件
						$(document).on('keydown', this.enterEsc);
						//esc键触发取消
						this.escQuit = (ev) => {
							let code_val = ev.which;
							if(code_val == 0x1B){
								$('.layui-layer-btn1').click();
								return false;
							}
						};
						$(document).on('keydown', this.escQuit);
					},
					end: function () {
						//取消键盘监听事件
						$(document).off('keydown', this.enterEsc);
						$(document).off('keydown', this.escQuit);
					},
					yes: function () {
						//确认执行的代码
						changeProcessStatus(processId,'1');
					},
					no: function () {

					}
				});
			} else if(obj.event === 'canUse'){
				layer.confirm('确认启用该流程？',{
					btn: ['确定', '取消'],
					success: function (layero, index) {
						this.enterEsc = function (event) {
							if (event.keyCode == 13 ) {
								//确认  执行的代码
								changeProcessStatus(processId,'0');
								//关闭弹窗
								layer.close(index);
								console.log("回车确认时事件")
								//取消连续回车键，导致不断弹出询问框
								$(':focus').blur();
							}
						};
						//监听键盘事件
						$(document).on('keydown', this.enterEsc);
						//esc键触发取消
						this.escQuit = (ev) => {
							let code_val = ev.which;
							if(code_val == 0x1B){
								$('.layui-layer-btn1').click();
								return false;
							}
						};
						$(document).on('keydown', this.escQuit);
					},
					end: function () {
						//取消键盘监听事件
						$(document).off('keydown', this.enterEsc);
						$(document).off('keydown', this.escQuit);
					},
					yes: function () {
						//确认执行的代码
						changeProcessStatus(processId,'0');
					},
					no: function () {

					}
				});
			} else if(obj.event === 'delete'){
				layer.confirm('确认删除该流程？',{
					btn: ['确定', '取消'],
					success: function (layero, index) {
						this.enterEsc = function (event) {
							if (event.keyCode == 13 ) {
								//确认  执行的代码
								changeProcessStatus(processId,'2');
								//关闭弹窗
								layer.close(index);
								console.log("回车确认时事件")
								//取消连续回车键，导致不断弹出询问框
								$(':focus').blur();
							}
						};
						//监听键盘事件
						$(document).on('keydown', this.enterEsc);
						//esc键触发取消
						this.escQuit = (ev) => {
							let code_val = ev.which;
							if(code_val == 0x1B){
								$('.layui-layer-btn1').click();
								return false;
							}
						};
						$(document).on('keydown', this.escQuit);
					},
					end: function () {
						//取消键盘监听事件
						$(document).off('keydown', this.enterEsc);
						$(document).off('keydown', this.escQuit);
					},
					yes: function () {
						//确认执行的代码
						changeProcessStatus(processId,'2');
					},
					no: function () {

					}
				});
			} else if(obj.event === 'edit'){
				layer.open({
					title:'编辑',
					type: 2,
					area: ["90%", "90%"],
					content: '${ctx}/set/process/editProcessPage?processId='+processId
				})
			}
		});

		//监听搜索
		form.on('submit(LAY-user-back-search)', function(data){
			var field = data.field;
			//执行重载
			table.reload('test', {
				where: field,
				page:{
					curr:1
				}
			});
		});



	});

	function changeProcessStatus(processId,type){
		$.post('${ctx}/set/process/changeProcessStatus', {processId: processId,type:type}, function(result){
			if("200" == result.code){
				layer.msg('操作成功', {time: 2000}, function () {
					reload();
				});
			}else{
				layer.msg(result.errMsg);
			}
		});
	}


	function reload(){
		table.reload('test', {
			page:{
				curr:1
			}
		});
	}

	function reset(){
		layui.form.render();
		$("#searchForm").find("select").val("");
		$("#searchForm").find("input").val("");
	}

</script>
</body>
</html>
