TMS/plg-tms-std-web-vue/public/jq/pages/bpm/activitiInstance.html

<div class="plg-tab-container">
<div id="activitiInstance">

			<!-- <img id="bpmn"> -->
		
		<div id="activitiProcessInstanceDIV" style="height:600px;">
			<div id="activitiProcessInstance" ></div>
		</div>
		
	      
		<form id="form1" style="display: none;margin-top: 10px;">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="text" value="删除原因"><input type="text" id="reason" name="reason" lay-verify="required" placeholder="必填" autocomplete="off" class="layui-input">
					</div>
				</div>
		</form>

		<!--实例详情-->
			<div id="test111" style="display: none;height: 100%;width: 100%;">
				<div id="AIdetailinfo" ></div>
				<div>
					<img id="png">
				</div>
			</div>
			
		</div>

  </div>

	<script type="text/javascript">

	(function($){

		var parent=	$("#activitiInstance");
		var form=parent.find("#form1");
		

		//渲染流程实例信息页面
		var opts = {
			skin: "terrace",
			columns: [
				{id: "id",name: "状态",type: 'ro',width: 150,render:function(v,record){
					
					if(record.endTime == null || record.endTime ==''){
						return "进行中";
					}else{
						return "已完成";
					}
				}},
				{id: "id",name: "id",type: "txt",width: 150},
				{id: "name",name: "流程实例名称",type: "ro",width: 150},
				{id: "businessKey",name: "业务键",type: 'ro',width: 150},
				{id: "processDefinitionId",name: "流程定义id",type: 'ro',width: 150},
				{id: "processDefinitionName",name: "流程定义名称",type: 'ro',width: 150},
				{id: "processDefinitionKey",name: "流程定义key",type: 'ro',width: 150},
				{id: "processDefinitionVersion",name: "流程定义版本",type: 'ro',width: 150},
				{id: "startTime",name: "流程开始时间",type: 'ro',width: 150},
				{id: "endTime",name: "流程结束时间",type: 'ro',width: 150},
				{id: "deleteReason",name: "删除原因",type: 'ro',width: 150},
				{id: "description",name: "描述",type: 'ro',width: 150}
			],
			imagePath: "/prologui/assets/PlgGrid",
			url: "/api/service-activiti/activiti/historyInstanceAll", //数据接口
			type: "get", //数据提交方式，默认为get
			params: {
						pageNum: 1,
						pageSize: 10,
						instanceName: null,
						status:null
					}, //查询提交参数，分页参数默认为pageNum,pageSize
			multiselect: false, //是否支持多选
			page: true, //是否启用分页
			toolbar:[
        {type:"button", name:"detailBtn", className: "normal", value:"<i class='layui-icon layui-icon-form'></i>详情"},{type: "newcolumn"},
        {type:"button", name:"downLoad", className: "normal", value:"<i class='layui-icon layui-icon-download-circle'></i>下载bpmn"},{type: "newcolumn"},
        {type:"button", name:"delBtn", className: "danger", value:"<i class='layui-icon layui-icon-delete'></i>删除"},{type: "newcolumn"},
        {type: "input", name: 'instanceName', label: '流程定义名称:', placeholder: '请输入流程定义名称', offsetLeft:10},{type: "newcolumn"},
        {type: "select", name: "status", label: "完成状态", options:[
            {value: "", text: ""},
            {value: "running", text: "未完成"},
            {value: "over", text: "已完成"}
          ], offsetLeft:10},{type: "newcolumn"},
        {type:"button", name:"searchBtn", value:"查询", offsetLeft:10 },{type: "newcolumn"}
      ],
			totalCount: "totalCount" //总记录数字段，默认totalCount
		}

		var activitiProcessInstance = new PlgGrid(opts);
		activitiProcessInstance.renderTo("activitiProcessInstance");
		activitiProcessInstance.loadData();

		activitiProcessInstance.attachToolBarEvent("onButtonClick", function(name){
					if(name == "delBtn"){
						delInstance();
					}else if(name == "detailBtn"){
						detail();
					}else if(name == "searchBtn"){
						search();
					}else if(name == "downLoad"){
						downLoadBPMN();
					}
		});
		
		function downLoadBPMN(){
			var processInstanceId = activitiProcessInstance.getSelectedRowId();

			if(!processInstanceId){
				layer.msg("请选择一条数据");
				return;
			}
			window.location.href = "/api/service-activiti/activiti/resource?modelId="+processInstanceId;
//			$.ajax({
//              url:"/api/service-activiti/activiti/resource?modelId="+processInstanceId,
//              type:"get",
//              success:function(res){
//                  layer.msg("成功");
//                      },
//              error:function(e){
//                  layer.msg("error");
//              }
//          });
		}

		function delInstance(){
			var processInstanceId = activitiProcessInstance.getSelectedRowId();

			if(!processInstanceId){
				layer.msg("请选择一条数据");
				return;
			}
			
			
		  layer.prompt({title: '请输入删除原因', formType: 2}, function(text, index){
		    layer.close(index);
		    $.ajax({
					type: 'POST',
					url: "/api/service-activiti/activiti/deleteInstance",
					data: {
						processInstanceId:processInstanceId,
						deleteReason:text
					},
					async: false,
					success: function(data) {
						layer.closeAll();
						activitiProcessInstance.reload();
						layer.msg(data.message);
				}
			});
		  });
			
			
		}

		var detailOpt = {
				skin: "terrace",
				columns: [
//					{id: "taskDefinitionKey",name: "流程活动",type: "txt",width: 50}, 
					{id: "taskId",name: "id",type: "txt",width: 50}, 
					{id: "taskName",name: "流程活动名称",type: 'ro',width: 150},
					{id: "assignee",name: "流程活动定义的处理人",type: 'ro',width: 150},
					{id: "startTime",name: "开始时间",type: 'ro',width: 150},
					{id: "endTime",name: "结束时间",type: 'ro',width: 150},
					{id: "description",name: "描述",type: 'ro',width: '*'}
				],
				imagePath: "/prologui/assets/PlgGrid",
				url: "/api/service-activiti/activiti/activityInstance", //数据接口
				type: "get", //数据提交方式，默认为get
				params: {
						instanceId:null
						}, //查询提交参数，分页参数默认为pageNum,pageSize
				multiselect: false, //是否支持多选
				page: true, //是否启用分页
				totalCount: "totalCount" //总记录数字段，默认totalCount
			}
			
		//双击
		activitiProcessInstance.on("onRowDblClicked",function(){
			detail();
		});	
				
		//查看流程实例详情信息
		function detail(){
			
			var processInstanceId = activitiProcessInstance.getSelectedRowId();
			var detailForm = parent.find("#AIdetailinfo");
			if(!processInstanceId){
				layer.msg("请选择一条数据");
				return;
			}

			//获取png图片路径
			var png = null;
			$.ajax({
					type: 'get',
					url: "/api/service-activiti/activiti/png",
					data: {
						instanceId:processInstanceId,
					},
					async: false,
					success: function(data) {
						// alert(data.data);
						png = data.data;
						//$("#png").attr('src',"file://"+pngsrc);
						//$("#png").attr('src',"data:image/png;base64,"+png);
					}
			});
			layer.open({
				type:1,
				title: '详情页'
				,content: `<div id="activitiInstance-alert-from" style="height:50%;"></div> <div id="png" style="display: inline-block; margin-top: 40px; width: 100%; height: 100%; overflow: auto;"><img id="activitipng" style="height:100%;"></div>`
				,area: ['900px', '600px']
				,anim: 2
				,shadeClose: true
				,success :function(index, layero){
					
						detailOpt.params={
							instanceId:processInstanceId
						}
						//console.log(index)
						var detailV9 = new PlgGrid(detailOpt);
						detailV9.renderTo("activitiInstance-alert-from");
						detailV9.loadData();

						//加载图片
						$("#activitipng").attr('src',"data:image/png;base64,"+png);
				},
				yes:function(index, layero){
					layer.close(index);
				}
				
				
			}); 
		}

		function downpng(){
			
		}

		function search(){
			// var instanceName = parent.find("#instanceName").val();
			// var am = activitiProcessInstance.getParams();
			// am.deployName = deployName;
			// activitiProcessInstance.loadData();
			var instanceName = $("input[name='instanceName']").val();
			var status = $("select[name='status']").val();
			var am = activitiProcessInstance.getParams();
			am.instanceName = instanceName;
			if(!(status == null || status == "")){
				am.status = status;
			}
			activitiProcessInstance.reload();
		}

		})($)			
	</script>