<template>
	<div style="text-align: center;">
	  
		<el-table :data="tableData" border style="width: 99%">
			<el-table-column prop="id" label="id" v-if="isShow" width="100">
			</el-table-column>
			<el-table-column prop="name" label="流程名称" width="180">
			</el-table-column>
			<el-table-column prop="processDefinitionId" label="流程定义ID" width="180">
			</el-table-column>
			<el-table-column prop="processInstanceId" label="流程实例ID" width="100">
			</el-table-column>
			<!-- <el-table-column prop="startUserId" label="流程发起人" width="100">
					</el-table-column>
					<el-table-column prop="assignee" label="当前任务处理人" width="100">
					</el-table-column> -->
			<el-table-column prop="startTime" label="开始时间" width="100">
			</el-table-column>
			<el-table-column prop="endTime" label="结束时间" width="100">
			</el-table-column>
			<el-table-column prop="duration" label="耗时" width="100">
			</el-table-column>
			<el-table-column prop="startUserId" label="发起人" width="100">
			</el-table-column>


			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="" @click="handleHistory(scope.row)">历史操作</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
		</el-pagination>


	</div>
</template>

<script>
	import axios from '@/axios';
	export default {
		data() {
			return {
				//表格初始化参数
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [10, 50, 100, 200],
				pageSize: 10,
				//查询条件
				queryProcessName: '',
				//录入框
				dialogVisible: false,

				isShow: true
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {
			this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				//console.log("获取table数据getTableData")
				var url = 'ProcessHistory/queryHistoryProcInst.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					userId: sessionStorage.getItem("userId")
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.list
					this.totalRows = response.data.total
				});
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
		  
			// 删除按钮事件
			handleHistory(row) {
				this.$router.push({
					path: '/process/historyActInst',
					query: {
						instanceId: row.processInstanceId,
					},
					mate: {
						keepAlive: false
					}
				})
			},
			// 查询按钮事件
			search() {
				this.getTableData()
			},
			 

		},
		beforeRouteLeave(to, from, next) {
			to.meta.keepAlive = false;
			next();
		}
	}
</script>
<style>
	
</style>
