<template>
<el-container>
<el-main>
<el-row>
<el-tabs type="border-card" @tab-click="handleClick">
<el-tab-pane label="执行中">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.processInstanceId " placeholder="实例ID" style="width: 200px" clearable>
<template slot="prepend">实例ID</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryinfo.processDefinitionKey" placeholder="实例关键字" style="width: 220px" clearable>
<template slot="prepend">实例关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getList">查询</el-button>
</el-col>
</el-row>
<el-row>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="right" label-width="120px" style="text-align: left">
<el-row>
<el-form-item label="id：">
<span>{{ props.row.id}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="执行人id：">
<span>{{ props.row.deploymentId}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="变量数量：">
<span>{{ props.row.variableCount}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="瞬时变量：">
<span>{{ JSON.stringify(props.row.transientVariables)}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="流程定义ID：">
<span>{{ props.row.processDefinitionId}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="流程实例ID：">
<span>{{ props.row.processInstanceId}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="流程定义版本：">
<span>{{ props.row.processDefinitionVersion}}</span>
</el-form-item>
</el-row>
</el-form>
</template>
</el-table-column>
<el-table-column
fixed="left"
label="操作">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="chart(scope.$index,scope.row)">流程图</el-button>
<el-button type="warning" size="mini" @click="jobsCancel(scope.$index,scope.row)">停 止</el-button>
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
</template>
</el-table-column>
<el-table-column
label="实例名称"
prop="name"
width="160">
</el-table-column>
<el-table-column
label="发起人"
prop="startUserId"
width="100">
</el-table-column>
<el-table-column
label="开始时间"
prop="startTime"
width="160">
</el-table-column>
<!-- <el-table-column-->
<!-- label="结束时间"-->
<!-- prop="endTime"-->
<!-- width="160">-->
<!-- </el-table-column>-->
<el-table-column
label="执行中"
prop="isActive">
<template slot-scope="scope">
<span v-if="scope.row.isActive ===true">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column
label="是否结束"
prop="isEnded">
<template slot-scope="scope">
<span v-if="scope.row.isEnded ===true">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column
label="流程状态"
prop="suspensionState">
<template slot-scope="scope">
<span v-if="scope.row.suspensionState ===1">活跃</span>
<span v-else>中断</span>
</template>
</el-table-column>
<el-table-column
label="实例关键字"
prop="processDefinitionKey">
</el-table-column>
<!-- <el-table-column-->
<!-- label="用时"-->
<!-- prop="durationInMillis">-->
<!-- <template slot-scope="scope">-->
<!-- <span>-->
<!-- {{ scope.row.durationInMillis | formatSeconds }}-->
<!-- </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
label="流程定义名称"
prop="processDefinitionName"
width="140">
</el-table-column>
<el-table-column
label="isDeleted"
prop="isDeleted">
</el-table-column>
</el-table>
</el-row>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="已完成">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.processInstanceId " placeholder="实例ID" style="width: 200px" clearable>
<template slot="prepend">实例ID</template>
</el-input>
</el-col>
<el-col :span="7">
<el-input v-model="queryinfo.processDefinitionKey" placeholder="实例关键字" style="width: 220px" clearable>
<template slot="prepend">实例关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getHistroyList">查询</el-button>
</el-col>
</el-row>
<el-row>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="right" label-width="120px" style="text-align: left">
<el-row>
<el-form-item label="id：">
<span>{{ props.row.id}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="执行人id：">
<span>{{ props.row.deploymentId}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="变量数量：">
<span>{{ props.row.variableCount}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="瞬时变量：">
<span>{{ JSON.stringify(props.row.transientVariables)}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="流程定义ID：">
<span>{{ props.row.processDefinitionId}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="流程实例ID：">
<span>{{ props.row.processInstanceId}}</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="流程定义版本：">
<span>{{ props.row.processDefinitionVersion}}</span>
</el-form-item>
</el-row>
</el-form>
</template>
</el-table-column>
<el-table-column
fixed="left"
label="操作">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="chart(scope.$index,scope.row)">流程图</el-button>
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
</template>
</el-table-column>
<el-table-column
label="实例名称"
prop="name"
width="160">
</el-table-column>
<el-table-column
label="发起人"
prop="startUserId"
width="100">
</el-table-column>
<el-table-column
label="开始时间"
prop="startTime"
width="160">
</el-table-column>
<el-table-column
label="结束时间"
prop="endTime"
width="160">
</el-table-column>
<el-table-column
label="执行中"
prop="isActive">
<template slot-scope="scope">
<span v-if="scope.row.isActive ===true">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column
label="是否结束"
prop="isEnded">
<template slot-scope="scope">
<span v-if="scope.row.isEnded ===true">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column
label="流程状态"
prop="suspensionState">
<template slot-scope="scope">
<span v-if="scope.row.suspensionState ===1">活跃</span>
<span v-else>中断</span>
</template>
</el-table-column>
<el-table-column
label="实例关键字"
prop="processDefinitionKey">
</el-table-column>
<el-table-column
prop="durationInMillis"
label="用时"
width="140">
<template slot-scope="scope">
<span>
{{ scope.row.durationInMillis | formatSeconds }}
</span>
</template>
</el-table-column>
<el-table-column
label="流程定义名称"
prop="processDefinitionName"
width="140">
</el-table-column>
<el-table-column
label="isDeleted"
prop="isDeleted">
</el-table-column>
</el-table>
</el-row>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
<!-- 流程图弹框-->
<el-row>
<el-dialog title="流程图" :visible.sync="dialogFormVisible" v-loading="dialogloading">
<el-form :model="form">
<el-form-item>
<div class="demo-image__preview">
<el-image
:src="form.url">
</el-image>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
</el-row>
</el-main>
</el-container>
</template>
<script>
import {instanceList,processDiagram,histroyList,jobsCancelApi} from "../../api/technological";
export default {
name: "example",
data(){
return{
queryinfo: {
processInstanceId:'',
processDefinitionKey:'',
pageNum:1,
pageSize:10,
},
total:0,
tableData: [],
tableloading:false,
dialogloading:false,
dialogFormVisible: false,
form: {
url: ''
}
}
},
filters: {
formatSeconds(value) {
console.log(value)
let result = parseInt(value);
let y =
Math.floor(result / 86400000) < 10
? "0" + Math.floor(result / 86400000)
: Math.floor(result / 86400000);
let h =
Math.floor((result / 3600000) % 24) < 10
? "0" + Math.floor((result / 3600000) % 24)
: Math.floor((result / 3600000) % 24);
let m =
Math.floor((result / 60000) % 60) < 10
? "0" + Math.floor((result / 60000) % 60)
: Math.floor((result / 60000) % 60);
let s =
Math.floor(result % 60) < 10
? "0" + Math.floor(result % 60)
: Math.floor(result % 60);
let res = "";
if (y !== "00") res += `${y}天`;
if (h !== "00") res += `${h}时`;
if (m !== "00") res += `${m}分`;
res += `${s}秒`;
return res;
},
},
mounted() {
this.getList();
},
methods: {
jobsCancel(index,row){
let _this = this
let para = {
processInstanceId: row.processInstanceId,
reason: "工单作废"
}
jobsCancelApi(para).then(response =>{
const res = response.data
if (res.code != '200') {
return _this.$message.error('作废失败！')
}
_this.$message.success('作废成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
handleClick(tab){
if (tab.index == 0) {
this.getList();
} else {
this.getHistroyList();
}
},
// 分页
handleSizeChange(val) {
this.queryinfo.pageSize= val
this.getList()
},
handleCurrentChange(val) {
this.queryinfo.pageNum = val
this.getList()
},
getList() {
const _this = this
this.tableloading = true;
instanceList(this.queryinfo).then((response) => {
console.log(response);
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data;
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
getHistroyList() {
const _this = this
this.tableloading = true;
histroyList(this.queryinfo).then((response) => {
console.log(response);
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data;
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
// 打开流程图
chart(index, row) {
this.dialogFormVisible = true
this.dialogloading = true;
processDiagram({processId:row.processInstanceId}).then(res =>{
// eslint-disable-next-line no-console
this.form.url=window.URL.createObjectURL(res.data);
this.dialogloading = false;
});
},
},
}
</script>
<style scoped>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>