flowable/flowable-front/src/components/views/getMyJoinProcint.vue

<template>
	<div style = "margin: 0px 24px;">
		<el-form ref="form" label-width="80px" :inline="true" size = "mini">
			<!-- <el-form-item label="发起人">
				<el-select v-model="userId" placeholder="请选择">
					<el-option
					  v-for="item in users"
					  :key="item.id"
					  :label="item.displayName"
					  :value="item.id">
					</el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item label="任务名称">
				<el-input v-model="excutionName" clearable placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="流程名称">
				<el-input v-model="processDefName" clearable placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="getMyJoinProcint(1)">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table
			:data="tableData"
			stripe
			border
			style="width: 100%">
			<!-- <el-table-column
			prop="id"
			align = "center"
			:show-overflow-tooltip = true
			label="id">
			</el-table-column> -->
			<el-table-column
			prop="name"
			align = "center"
			show-overflow-tooltip
			label="任务名称">
			</el-table-column>
			<el-table-column
			prop="processDefinitionName"
			align = "center"
			show-overflow-tooltip
			label="流程名称">
			</el-table-column>
			<el-table-column
			prop="startTime"
			align = "center"
			show-overflow-tooltip
			label="创建日期">
				<template slot-scope="scope">
					<span>{{ parseTime(new Date(scope.row.startTime), '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column
			  align = "center"
			  label="操作"
			  width="200">
				<template slot-scope="scope">
					<el-button @click="showHisTaskForm(scope.row)" type="text" size="small">流程进度</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination
		  v-show="total != 0"
		  background
		  layout="prev, pager, next"
		  :total="total" 
		  :current-page="pageNum"
		  :page-size = "pageSize"
		  @current-change="getMyJoinProcint">
		</el-pagination>
		
		<el-dialog title="流程进度" :visible.sync="hisTaskForm">
			<div>
				<el-steps direction="vertical" :active="histaskList[histaskList.length-1] && histaskList[histaskList.length-1].activityType == 'endEvent' ? histaskList.length : histaskList.length-1" finish-status="success" space = "60px">
					<el-step :title="item.name" v-for="item in histaskList">
						<template slot="description">
								<span v-if="item.activityType == 'userTask'">办理人:  {{item.displayName}}</span>  节点名称:  {{item.activityName}}   任务接收时间  {{item.startTime}}     任务办结时间  {{item.endTime}}
								  <div v-for="comment in item.commentList" class="text item">
								    {{'审批意见: ' + comment.message }}
								  </div>
						</template>
					</el-step>
				</el-steps>
				<el-image :src="processImgUrl">
				</el-image>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="hisTaskForm = false">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
	  return {
		tableData: [],
		userId : '',
		users : [],
		reason : '',
		hisTaskForm : false,
		tempRow : null,
		histaskList : [],
		processImgUrl : '',
		pageNum : 1,
		pageSize : 10,
		total : 0,
		activeLength : 0,
		excutionName : '',
		processDefName : ''
	  }
	},
	mounted() {
		// this.getUsers();
		this.getMyJoinProcint(1);
	},
	methods: {
		getUsers() {
			var self = this; 
			this.Axios.post('/api/flow/getUserInf').then(response => {
				if (!!response.data) {
					this.users = response.data.userList;
				} else {
					self.users = [];
				}
			}).catch(err => {
				console.log(err)
				self.$message.error('请求失败!');
			})
		},
		getMyJoinProcint(e) {
			this.pageNum = e;
			this.Axios.post('/api/flow/getMyJoinProcint', 'userId='+this.userId +
															'&excutionName='+this.excutionName +
															'&processDefName='+this.processDefName +
															'&pageNum='+this.pageNum+
															'&pageSize='+this.pageSize).then(response => {
				if (!!response.data) {
					this.total = response.data.total;
					this.tableData = response.data.data;
				} else {
					this.tableData = [];
					this.total = 0;
				}
			}).catch(err => {
				console.log(err)
				this.$message.error('请求失败!');
			})
		},
		
		/** 流程进度查看 */
		showHisTaskForm(r) {
			this.hisTaskForm = true;
			this.processImgUrl = '/api/flow/genProcessDiagram?processId=' + r.id;
			this.Axios.post('/api/flow/getProcessHisTaskList', 'processId=' + r.id).then(response => {
				if (!!response.data.data) {
					this.histaskList = response.data.data;
					if (!!this.histaskList[this.histaskList.length-1].endTime) {
						this.activeLength = this.histaskList.length;
					} else {
						this.activeLength = this.histaskList.length - 1;
					}
				}
			}).catch(err => {
				console.log(err)
				this.$message.error('请求失败!');
			})
		},
		reset() {
			this.excutionName = '';
			this.processDefName = '';
			this.getMyJoinProcint(1);
		},
	}
}
</script>

<style>
</style>