rev:流程引擎
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="logicFlowVisible"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
:height="'100%'"
|
||||
title="流程预览"
|
||||
:width="'100%'"
|
||||
:before-close="handleClose">
|
||||
<div class="logic-flow-view">
|
||||
<!-- 画布 -->
|
||||
<div id="LF-view3" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LogicFlow from '@logicflow/core'
|
||||
import '@logicflow/core/dist/style/index.css'
|
||||
import '@logicflow/extension/lib/style/index.css'
|
||||
import {
|
||||
registerStart,
|
||||
registerEnd,
|
||||
registerServerTask,
|
||||
registerScriptTask,
|
||||
registerSendTask,
|
||||
registerFormTask,
|
||||
registerGatewayTask,
|
||||
registerstorInvTask,
|
||||
registerExecuteFlow,
|
||||
sequence,
|
||||
registerSubProcess,
|
||||
} from '../../view_flow/registerNode'
|
||||
|
||||
//const demoData = require('./data.json')
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
logicFlowVisible: false, // 控制流程设计器对话框的可见性
|
||||
lf: null, // LogicFlow实例
|
||||
showAddPanel: false,
|
||||
addPanelStyle: {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
id: null,
|
||||
initNodes: {"nodes": [], "edges": []},
|
||||
nodeData: null,
|
||||
addClickNode: null,
|
||||
clickNode: null,
|
||||
dialogVisible: false,
|
||||
graphData: null,
|
||||
dataVisible: false,
|
||||
config: {
|
||||
background: {
|
||||
color: '#f7f9ff'
|
||||
},
|
||||
grid: {
|
||||
size: 10,
|
||||
visible: false
|
||||
},
|
||||
keyboard: {
|
||||
enabled: true
|
||||
},
|
||||
style: {
|
||||
rect: {
|
||||
radius: 6,
|
||||
},
|
||||
edgeText: { // 边文本样式
|
||||
background: {
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
edgeTextDraggable: true,
|
||||
guards: {
|
||||
beforeClone(data) {
|
||||
console.log('beforeClone', data)
|
||||
return true
|
||||
},
|
||||
beforeDelete(data) {
|
||||
// 可以根据data数据判断是否允许删除，允许返回true,不允许返回false
|
||||
// 文档： http://logic-flow.org/guide/basic/keyboard.html#%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%88%A0%E9%99%A4%E6%88%96%E8%80%85%E6%8B%B7%E8%B4%9D%E8%A1%8C%E4%B8%BA
|
||||
console.log('beforeDelete', data)
|
||||
// _this.$message('不允许删除', 'error')
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
moveData: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化并显示流程设计
|
||||
showLogicFlowDesigner(json, row) {
|
||||
this.logicFlowVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$_initLf(json, row)
|
||||
});
|
||||
},
|
||||
$_initLf(json, row) {
|
||||
// LogicFlow.use(Menu)
|
||||
// LogicFlow.use(Snapshot)
|
||||
const lf = new LogicFlow({container: document.querySelector('#LF-view3'), editable: false,})
|
||||
this.lf = lf
|
||||
// 设置主题
|
||||
lf.setTheme({
|
||||
circle: {
|
||||
r: 20,
|
||||
stroke: '#000000',
|
||||
outlineColor: '#88f',
|
||||
strokeWidth: 1
|
||||
},
|
||||
rect: {
|
||||
outlineColor: '#88f',
|
||||
strokeWidth: 1
|
||||
},
|
||||
polygon: {
|
||||
strokeWidth: 1
|
||||
},
|
||||
polyline: {
|
||||
stroke: '#000000',
|
||||
hoverStroke: '#000000',
|
||||
selectedStroke: '#000000',
|
||||
outlineColor: '#88f',
|
||||
strokeWidth: 1
|
||||
},
|
||||
nodeText: {
|
||||
color: '#000000'
|
||||
},
|
||||
edgeText: {
|
||||
color: '#000000',
|
||||
background: {
|
||||
fill: '#f7f9ff'
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$_registerNode(json, row)
|
||||
},
|
||||
// 自定义
|
||||
$_registerNode(json, row) {
|
||||
this.lf.register(registerStart)
|
||||
this.lf.register(registerEnd)
|
||||
this.lf.register(registerServerTask)
|
||||
this.lf.register(registerScriptTask)
|
||||
this.lf.register(registerSendTask)
|
||||
this.lf.register(registerstorInvTask)
|
||||
this.lf.register(registerFormTask)
|
||||
this.lf.register(registerExecuteFlow)
|
||||
this.lf.register(registerGatewayTask)
|
||||
this.lf.register(registerSubProcess)
|
||||
this.lf.register(sequence)
|
||||
this.lf.setDefaultEdgeType("sequenceFlow");
|
||||
this.$_render(json, row)
|
||||
},
|
||||
/**
|
||||
*这个是加载中间面板数据
|
||||
* 其中 demoData中的nodes是节点信息
|
||||
* edges是连接线信息
|
||||
*/
|
||||
$_render(json, row) {
|
||||
// this.id = row.id
|
||||
if (!json) {
|
||||
this.lf.render(this.initNodes)
|
||||
} else {
|
||||
this.lf.render(JSON.parse(json))
|
||||
}
|
||||
const nodeModel = this.lf.getNodeModelById(row.activity_id);
|
||||
nodeModel.setStyle("stroke", "red")
|
||||
},
|
||||
closeDialog() {
|
||||
this.$data.dialogVisible = false
|
||||
},
|
||||
handleClose() {
|
||||
this.logicFlowVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logic-flow-view {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#LF-view3 {
|
||||
outline: none;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function add(data) {
|
||||
return request({
|
||||
url: 'api/flow',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function del(ids) {
|
||||
return request({
|
||||
url: 'api/flow',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function edit(data) {
|
||||
return request({
|
||||
url: 'api/flow',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTypes(data) {
|
||||
return request({
|
||||
url: '/api/bmFormStruc/getTypes',
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskTypes() {
|
||||
return request({
|
||||
url: '/api/flow/getTaskTypes',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getStrategyList() {
|
||||
return request({
|
||||
url: '/api/strategy/decisionColumns',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function publish(data) {
|
||||
return request({
|
||||
url: 'api/flow/publish',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function queryByParentId(id) {
|
||||
return request({
|
||||
url: '/api/bpmnExecution/queryByParentId/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getDeploymentById(id) {
|
||||
return request({
|
||||
url: '/api/bpmnExecution/getDeploymentById/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default {add, edit, del, getTypes, getTaskTypes, getStrategyList, publish, queryByParentId, getDeploymentById}
|
||||
188
wms_pro/qd/src/views/wms/flow_manage/act/execution/index.vue
Normal file
188
wms_pro/qd/src/views/wms/flow_manage/act/execution/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!--工具栏-->
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
v-model="query.search"
|
||||
clearable
|
||||
style="width: 300px"
|
||||
size="mini"
|
||||
placeholder="输入模型名称"
|
||||
prefix-icon="el-icon-search"
|
||||
class="filter-item"
|
||||
/>
|
||||
<rrOperation/>
|
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||||
<crudOperation :permission="permission"/>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:before-close="crud.cancelCU"
|
||||
:visible.sync="crud.status.cu > 0"
|
||||
:title="crud.status.title"
|
||||
width="500px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
|
||||
<el-form-item label="父流程id" prop="parent_id">
|
||||
<el-input v-model="form.parent_id" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前实例对应版本" prop="deployment_id">
|
||||
<el-input v-model="form.deployment_id" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前实例执行节点" prop="activity_id">
|
||||
<el-input v-model="form.activity_id" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="实例状态" prop="status">
|
||||
<el-input v-model="form.status" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务类型" prop="form_type">
|
||||
<el-input v-model="form.form_type" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务数据" prop="form_data">
|
||||
<el-input v-model="form.form_data" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" style="width: 370px;"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格渲染-->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="crud.loading"
|
||||
:load="load"
|
||||
lazy
|
||||
:data="crud.data"
|
||||
row-key="proc_inst_id"
|
||||
border
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="proc_inst_id" label="当前流程"/>
|
||||
<el-table-column prop="parent_id" label="父流程"/>
|
||||
<el-table-column prop="deployment_id" label="当前实例版本"/>
|
||||
<el-table-column prop="activity_id" label="当前实例节点"/>
|
||||
<el-table-column prop="activity_name" label="当前实例节点名称"/>
|
||||
<el-table-column prop="is_active" label="启用"/>
|
||||
<el-table-column prop="status" label="实例状态"/>
|
||||
<el-table-column prop="remark" show-overflow-tooltip show-tooltip-when-overflow label="备注"/>
|
||||
<el-table-column prop="form_id" label="业务主键"/>
|
||||
<el-table-column prop="form_type" label="业务类型"/>
|
||||
<el-table-column prop="form_data" show-overflow-tooltip show-tooltip-when-overflow label="业务数据"/>
|
||||
<el-table-column prop="create_id" label="创建人" width="135"/>
|
||||
<el-table-column prop="create_time" label="创建时间" width="135"/>
|
||||
<el-table-column prop="update_time" label="修改时间" width="135"/>
|
||||
<el-table-column
|
||||
v-permission="['admin','actDeModel:edit','actDeModel:del']"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="300px"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="viewClick(scope.row)" type="text" icon="el-icon-thumb" size="small">预览</el-button>
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination/>
|
||||
</div>
|
||||
<ViewCurrentFlowDesigner ref="viewCurrentFlowDesigner"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import curdExecution from './curdExecution'
|
||||
import CRUD, {presenter, header, form, crud} from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
import ViewCurrentFlowDesigner from './ViewCurrentFlowDesigner';
|
||||
|
||||
const defaultForm = {
|
||||
proc_inst_id: null,
|
||||
parent_id: null,
|
||||
deployment_id: null,
|
||||
activity_id: null,
|
||||
activity_name: null,
|
||||
is_active: null,
|
||||
status: null,
|
||||
remark: null,
|
||||
create_id: null,
|
||||
create_time: null,
|
||||
update_time: null,
|
||||
form_id: null,
|
||||
form_type: null,
|
||||
form_data: null
|
||||
}
|
||||
export default {
|
||||
dicts: [],
|
||||
name: 'Execution',
|
||||
components: {pagination, crudOperation, rrOperation, udOperation, ViewCurrentFlowDesigner},
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
cruds() {
|
||||
return CRUD({
|
||||
title: '流程实例',
|
||||
url: 'api/bpmnExecution',
|
||||
optShow: {
|
||||
add: true,
|
||||
reset: true
|
||||
},
|
||||
idField: 'proc_inst_id',
|
||||
sort: 'proc_inst_id,desc',
|
||||
crudMethod: {...curdExecution}
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formTypes: [],
|
||||
permission: {},
|
||||
modelJson: '',
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '不能为空', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
viewClick(row) {
|
||||
curdExecution.getDeploymentById(row.deployment_id).then(res => {
|
||||
this.$refs.viewCurrentFlowDesigner.showLogicFlowDesigner(res.model_editor_json,row);
|
||||
})
|
||||
},
|
||||
//logicflow怎么设置当前节点的颜色
|
||||
load(tree, treeNode, resolve) {
|
||||
console.log(tree)
|
||||
console.log(treeNode)
|
||||
setTimeout(() => {
|
||||
curdExecution.queryByParentId(tree.proc_inst_id).then(res => {
|
||||
console.log(res)
|
||||
resolve(res)
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -46,4 +46,12 @@ export function getStrategyList() {
|
||||
})
|
||||
}
|
||||
|
||||
export default {add, edit, del, getTypes, getTaskTypes, getStrategyList}
|
||||
export function publish(data) {
|
||||
return request({
|
||||
url: 'api/flow/publish',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export default {add, edit, del, getTypes, getTaskTypes, getStrategyList, publish}
|
||||
|
||||
@@ -77,6 +77,18 @@
|
||||
<el-table-column prop="model_key" label="模型KEY" width="150"/>
|
||||
<el-table-column prop="description" label="模型描述"/>
|
||||
<el-table-column prop="model_comment" label="模型注释"/>
|
||||
<el-table-column prop="status" label="发布状态">
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-for="(item, index) in publishStatusList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
v-if="scope.row.status == item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="version" label="版本号"/>
|
||||
<el-table-column prop="model_editor_json" label="模型数据" width="300" show-overflow-tooltip
|
||||
show-tooltip-when-overflow/>
|
||||
@@ -94,8 +106,11 @@
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button :disabled="publishDisabled(scope.row)" @click="publishClick(scope.row)" type="text"
|
||||
icon="el-icon-arrow-up" size="small">发布
|
||||
</el-button>
|
||||
<el-button @click="viewClick(scope.row)" type="text" icon="el-icon-thumb" size="small">预览</el-button>
|
||||
<el-button @click="handleClick(scope.row)" type="text" icon="el-icon-thumb" size="small">设计</el-button>
|
||||
<el-button @click="handleClick(scope.row)" type="text" icon="el-icon-set-up" size="small">设计</el-button>
|
||||
<udOperation
|
||||
:data="scope.row"
|
||||
:permission="permission"
|
||||
@@ -131,6 +146,7 @@ const defaultForm = {
|
||||
create_time: null,
|
||||
update_id: null,
|
||||
update_time: null,
|
||||
status: null,
|
||||
version: null,
|
||||
thumbnail: null,
|
||||
model_editor_json: null,
|
||||
@@ -160,6 +176,16 @@ export default {
|
||||
return {
|
||||
formTypes: [],
|
||||
permission: {},
|
||||
publishStatusList: [
|
||||
{
|
||||
value: "30",
|
||||
label: "未发布"
|
||||
},
|
||||
{
|
||||
value: "10",
|
||||
label: "发布"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '不能为空', trigger: 'blur'}
|
||||
@@ -182,10 +208,22 @@ export default {
|
||||
viewClick(row) {
|
||||
this.$refs.viewFlowDesigner.showLogicFlowDesigner(row);
|
||||
},
|
||||
publishClick(row) {
|
||||
curdActDeModel.publish(row).then(res => {
|
||||
this.crud.notify('发布成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.crud.toQuery()
|
||||
})
|
||||
},
|
||||
getTypes() {
|
||||
curdActDeModel.getTypes().then(res => {
|
||||
this.formTypes = res
|
||||
})
|
||||
},
|
||||
publishDisabled(row) {
|
||||
if (row.status !== '30') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user