|
|
|
<template>
|
|
|
|
<el-container>
|
|
|
|
<el-main>
|
|
|
|
<!--检索条件-->
|
|
|
|
<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="变量数量：">
|
|
|
|
<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="startTime"
|
|
|
|
width="160">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="执行中"
|
|
|
|
prop="isActive">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="是否结束"
|
|
|
|
prop="isEnded">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="租户"
|
|
|
|
prop="tenantId">
|
|
|
|
</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>
|
|
|
|
</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-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="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="startTime"
|
|
|
|
width="160">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="结束时间"
|
|
|
|
prop="endTime"
|
|
|
|
width="160">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="执行中"
|
|
|
|
prop="isActive">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="是否结束"
|
|
|
|
prop="isEnded">
|
|
|
|
</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="startTime"
|
|
|
|
width="160">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="结束时间"
|
|
|
|
prop="endTime"
|
|
|
|
width="160">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="执行中"
|
|
|
|
prop="isActive">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
|
|
label="是否结束"
|
|
|
|
prop="isEnded">
|
|
|
|
</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="用时">
|
|
|
|
<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>
|
|
...
|
...
|
@@ -139,7 +321,7 @@ |
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {instanceList,processDiagram} from "../../api/technological";
|
|
|
|
import {instanceList,processDiagram,histroyList} from "../../api/technological";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "example",
|
|
...
|
...
|
@@ -160,10 +342,55 @@ |
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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: {
|
|
|
|
|
|
|
|
handleClick(tab){
|
|
|
|
if (tab.index == 0) {
|
|
|
|
this.getList();
|
|
|
|
} else {
|
|
|
|
this.getHistroyList();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 分页
|
|
|
|
handleSizeChange(val) {
|
|
|
|
this.queryinfo.pageSize= val
|
|
...
|
...
|
@@ -197,6 +424,30 @@ |
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
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
|
|
...
|
...
|
@@ -208,7 +459,8 @@ |
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
...
|
...
|
|
