clay
/
workflow-engine-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

clay : 流程加外层业务 #43

Merged
clay merged 4 commits from master into pro 2023-03-22 14:52:49 +00:00
Conversation 0 Commits 4 Files Changed 11 +348 -87
11 changed files with 348 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
flowable-engine-web/src/api/processInstance.js
View File

@ -12,6 +12,13 @@ export function startProcessInstance(param) {
data: param
})
}
export function restartProcessInstance(param) {
return request({
url: "/flowable/process/instance/restart",
method: "post",
data: param
})
}
export function getAboutInstanceList() {
return request({
@ -33,3 +40,11 @@ export function getInitiatedInstanceInfo(processInstanceId) {
method: "get",
})
}
export function getInitiatedInstanceReInfo(instanceId) {
return request({
url: "/flowable/process/instance/re/info/"+instanceId,
method: "get",
})
}

6
flowable-engine-web/src/api/request.js
View File

@ -10,8 +10,8 @@ Vue.prototype.$axios = axios;
// 字体图标
export function getBaseUrl(){
return "http://gateway.mytwins.top"
// return "http://192.168.101.7:8000"
// return "http://gateway.mytwins.top"
return "http://192.168.101.7:8000"
// return "http://localhost:8000"
}
@ -51,7 +51,7 @@ service.interceptors.response.use(
console.log("请求", err);
switch (err.response.status) {
case 401:
MessageBox.alert("登陆已过期，请关闭当前窗口重新进入-能臣工作台");
MessageBox.alert("登陆已过期，请关闭当前窗口重新进入");
break;
case 403:
//Message.warning("抱歉，您无权访问！")

2
flowable-engine-web/src/views/common/form/FormRenderView.vue
View File

@ -63,8 +63,6 @@ export default {
},
methods: {
validate(call) {
console.log("我被执行了")
let success = true
this.$refs.formView.validate(valid => {
success = valid

17
flowable-engine-web/src/views/common/operation/OperationRender.vue
View File

@ -11,8 +11,7 @@
<div style="display: flex;">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
<el-avatar size="large" :src="user.avatar"></el-avatar>
<!--v-if="!$slots.dot && operation.userInfo.length > 1" -->
<div v-if="user.icon"
<div v-if="!$slots.dot && operation.userInfo.length > 1"
class="el-timeline-item__node" :style="{
backgroundColor: user.color
}">
@ -127,7 +126,7 @@ export default {
let userList = []
if (operationNew.userInfo){
for (let user of operationNew.userInfo) {
let userNew = this.initUser(user)
let userNew = this.initUser(user,operationNew.operation)
userList.push(userNew)
}
operationNew.userInfo = userList
@ -150,7 +149,7 @@ export default {
}
return result;
},
initUser(user) {
initUser(user,type) {
let state = user.state
//创建节点
if (state === 'CREATE') {
@ -162,6 +161,10 @@ export default {
this.$set(user, "icon", "el-icon-check")
this.$set(user, "color", "#0bbd87")
}
if (type === "CC"){
this.$set(user, "icon", "el-icon-s-promotion")
this.$set(user, "color", "#3395f8")
}
//审批处理中
if (state === 'RUNNING') {
this.$set(user, "icon", "el-icon-loading")
@ -216,6 +219,12 @@ export default {
this.$set(operation, "remark", ' (拒绝)')
}
}
//抄送
if (type === 'CC') {
this.$set(operation, "icon", "el-icon-s-promotion")
this.$set(operation, "color", "#3395f8")
this.$set(operation, "remark", ' (抄送成功)')
}
//评论
if (type === 'COMMENT') {
//评论

2
flowable-engine-web/src/views/common/process/nodes/ApprovalNode.vue
View File

@ -1,5 +1,5 @@
<template>
<node :title="config.name" :show-error="showError" :content="content"
<node :title="config.name" :show-error="showError" :content="content" :node-id="config.id"
:show-avatar="config.props.assignedType === 'ASSIGN_USER'" :user-info="assignedUser"
:error-info="errorInfo"
:select-user="selectUser"

2
flowable-engine-web/src/views/common/process/nodes/CcNode.vue
View File

@ -1,5 +1,5 @@
<template>
<node :title="config.name" :show-error="showError" :select-user="selectUser" :content="content"
<node :title="config.name" :show-error="showError" :select-user="selectUser" :content="content" :node-id="config.id"
:error-info="errorInfo" :show-avatar="true" :user-info="config.props.assignedUser"
@selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
placeholder="请设置抄送人" :header-bgc="headerBgc" header-icon="el-icon-s-promotion"/>

45
flowable-engine-web/src/views/common/process/nodes/Node.vue
View File

@ -43,6 +43,7 @@
</div>
</div>
<user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"
:selected="_userInfo"
@ok="selectedUser"/>
</div>
</template>
@ -60,6 +61,12 @@ export default {
type: Boolean,
default: false
},
nodeId:{
type:String,
default:()=>{
return "";
}
},
//是否显示节点体
show: {
type: Boolean,
@ -76,6 +83,13 @@ export default {
default: ""
},
//节点内容区域文字
userInfo: {
type: Array,
default() {
return []
}
},
//节点内容区域文字
showAvatar: {
type: Boolean,
default: false
@ -123,14 +137,36 @@ export default {
},
},
data() {
return {
userInfo:[]
return {}
},
created() {
let userInfo = this.$store.state.selectUserMap.get(this.nodeId);
console.log(this.nodeId,"sadasdasd",userInfo,this._userInfo)
if (userInfo){
let userInfoList = []
for (let val of userInfo) {
let userInfo = {
id: val.id,
name: val.name,
avatar: val.avatar,
}
userInfoList.push(userInfo)
}
this._userInfo = userInfoList
}
},
computed: {
viewer() {
return this.$store.state.diagramMode === 'viewer'
}
},
_userInfo: {
get() {
return this.userInfo
},
set(val) {
this.userInfo = val
}
},
},
methods: {
selectedUser(select) {
@ -143,7 +179,8 @@ export default {
}
userInfoList.push(userInfo)
}
this.userInfo = userInfoList
//todo 确认是会包错,邓洁处理
this._userInfo = userInfoList
this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id, userInfoList)
},
}

94
flowable-engine-web/src/views/workspace/AboutInstance.vue
View File

@ -1,14 +1,14 @@
<template>
<div>
<el-table :data="tableData"
@row-click="clickRow"
@cell-click="showDetails"
style="width: 100%">
<el-table-column
prop="deploymentName"
label="审批类型"
width="180"/>
<el-table-column
prop="approveName"
prop="initiator"
label="发起人"
width="180"/>
<el-table-column
@ -39,7 +39,15 @@
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
<template v-if="scope.row.isSelf">
<template v-if="scope.row.state === '4'">
<el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">再次提交</el-button>
</template>
<template v-if="scope.row.state === '2' || scope.row.state === '3'">
<el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">重新提交
</el-button>
</template>
</template>
</template>
</el-table-column>
</el-table>
@ -52,17 +60,20 @@
<div class="top">
<div class="top_left">
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
<span style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
</div>
<div class="top_right">
<div style="margin-bottom: 12px">
<span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini">进行中</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过
</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回
</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</el-tag>
<el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
<el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
<el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer"
@click.native="processDiagramViewer = true"></el-icon>
</el-tooltip>
</div>
<div>
@ -85,25 +96,32 @@
<process-diagram-viewer v-if="processDiagramViewer"/>
<div style="height: 70px;"></div>
</el-dialog>
<re-process :code="selectInstanceId" v-if="openItemDl" @submit="resubmit"/>
</div>
</template>
<script>
import FormRenderView from '@/views/common/form/FormRenderView'
import ReProcess from "./ReProcess";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {getAboutInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
import {timeLength} from '@/utils/date'
import OperationRender from "../common/operation/OperationRender";
export default {
name: "AboutInstance",
components: {OperationRender, FormRenderView, ProcessDiagramViewer},
components: {ReProcess, OperationRender, FormRenderView, ProcessDiagramViewer},
data() {
return {
approveOpen: false,
processDiagramViewer: false,
selectProcessInstance: {},
selectInstanceId: null,
tableData: [],
loading: false,
openItemDl: false,
processInstanceData: {
userInfo: {},
formData: {},
@ -117,12 +135,20 @@ export default {
this.getList();
},
methods: {
clickRow(row) {
this.approveOpen = true;
this.loadProcessInstance(row.processInstanceId)
this.selectProcessInstance = row
showDetails(row, column) {
if (column.label !== '操作') {
this.approveOpen = true;
this.loadProcessInstance(row.processInstanceId)
this.selectProcessInstance = row
}
},
resubmitHander(instanceId) {
this.selectInstanceId = instanceId;
this.openItemDl = false
this.$nextTick(() => {
this.openItemDl = true
})
},
loadProcessInstance(processInstanceId) {
let that = this;
this.init();
@ -158,7 +184,11 @@ export default {
this.$store.state.diagramMode = "viewer";
this.$store.state.preview = false;
},
resubmit(flag) {
if (flag) {
this.getList();
}
},
getList() {
getAboutInstanceList().then(res => {
let data = res.data
@ -168,7 +198,7 @@ export default {
getTimeConsuming(instance) {
if (instance.state != 1) {
//dateFormat(开始时间,结束时间)
return timeLength(instance.submitTime,instance.endTime);
return timeLength(instance.submitTime, instance.endTime);
}
}
}
@ -180,24 +210,24 @@ export default {
padding: 0 10px 10px 10px;
display: flex;
.top_left {
display: flex;
flex-direction: column;
width: 50px;
align-items: center;
.top_left {
display: flex;
flex-direction: column;
width: 50px;
align-items: center;
}
.top_right {
width: 85%;
display: flex;
flex-direction: column;
//justify-content: space-between;
font-size: 13px;
margin-left: 10px;
}
}
.top_right {
width: 85%;
display: flex;
flex-direction: column;
//justify-content: space-between;
font-size: 13px;
margin-left: 10px;
}
}
.state_tag{
.state_tag {
font-size: 12px;
//margin-right: 15px;
}

11
flowable-engine-web/src/views/workspace/InitiateProcess.vue
View File

@ -2,17 +2,12 @@
<div v-loading="loading" class="initiate_process">
<div v-if="!loading" style="min-width: 338px;">
<!--渲染表单-->
<form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems" v-model="formData"/>
<form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
v-model="formData"/>
</div>
<div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
<process-diagram-viewer ref="processDiagramViewer"/>
<!--渲染流程执行过程-->
<el-timeline :reverse="false">
<!-- <el-timeline-item v-for="(activity, index) in activities" :key="index">-->
<!-- </el-timeline-item>-->
</el-timeline>
</div>
</div>
</template>

91
flowable-engine-web/src/views/workspace/InitiatedInstance.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<el-table :data="tableData"
@row-click="clickRow"
@cell-click="showDetails"
style="width: 100%">
<el-table-column
prop="deploymentName"
@ -39,7 +39,15 @@
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
<template v-if="scope.row.isSelf">
<template v-if="scope.row.state === '4'">
<el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">再次提交</el-button>
</template>
<template v-if="scope.row.state === '2' || scope.row.state === '3'">
<el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">重新提交
</el-button>
</template>
</template>
</template>
</el-table-column>
</el-table>
@ -52,17 +60,20 @@
<div class="top">
<div class="top_left">
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
<span style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
</div>
<div class="top_right">
<div style="margin-bottom: 12px">
<span style="font-size: 15px;margin-right: 15px">{{ selectProcessInstance.deploymentName }}</span>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini">进行中</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过
</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回
</el-tag>
<el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</el-tag>
<el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
<el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
<el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer"
@click.native="processDiagramViewer = true"></el-icon>
</el-tooltip>
</div>
<div>
@ -85,18 +96,21 @@
<process-diagram-viewer v-if="processDiagramViewer"/>
<div style="height: 70px;"></div>
</el-dialog>
<re-process :code="selectInstanceId" v-if="openItemDl" @submit="resubmit"/>
</div>
</template>
<script>
import FormRenderView from '@/views/common/form/FormRenderView'
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import ReProcess from "./ReProcess";
import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
import {timeLength} from '@/utils/date'
import OperationRender from "../common/operation/OperationRender";
export default {
name: "InitiatedInstance",
components: {OperationRender, FormRenderView, ProcessDiagramViewer},
components: {ReProcess, OperationRender, FormRenderView, ProcessDiagramViewer},
data() {
return {
approveOpen: false,
@ -104,6 +118,8 @@ export default {
selectProcessInstance: {},
tableData: [],
loading: false,
openItemDl: false,
selectInstanceId: null,
processInstanceData: {
userInfo: {},
formData: {},
@ -117,10 +133,12 @@ export default {
this.getList();
},
methods: {
clickRow(row) {
this.approveOpen = true;
this.loadProcessInstance(row.processInstanceId)
this.selectProcessInstance = row
showDetails(row, column) {
if (column.label !== '操作') {
this.approveOpen = true;
this.loadProcessInstance(row.processInstanceId)
this.selectProcessInstance = row
}
},
loadProcessInstance(processInstanceId) {
let that = this;
@ -137,8 +155,11 @@ export default {
this.loading = false;
})
},
resubmit(flag) {
if (flag) {
this.getList();
}
},
init() {
this.processInstanceData = {
userInfo: {},
@ -156,7 +177,13 @@ export default {
this.$store.state.diagramMode = "viewer";
this.$store.state.preview = false;
},
resubmitHander(instanceId) {
this.selectInstanceId = instanceId;
this.openItemDl = false
this.$nextTick(() => {
this.openItemDl = true
})
},
getList() {
getInitiatedInstanceList().then(res => {
let data = res.data
@ -166,7 +193,7 @@ export default {
getTimeConsuming(instance) {
if (instance.state != 1) {
//dateFormat(开始时间,结束时间)
return timeLength(instance.submitTime,instance.endTime);
return timeLength(instance.submitTime, instance.endTime);
}
}
}
@ -178,24 +205,24 @@ export default {
padding: 0 10px 10px 10px;
display: flex;
.top_left {
display: flex;
flex-direction: column;
width: 50px;
align-items: center;
.top_left {
display: flex;
flex-direction: column;
width: 50px;
align-items: center;
}
.top_right {
width: 85%;
display: flex;
flex-direction: column;
//justify-content: space-between;
font-size: 13px;
margin-left: 10px;
}
}
.top_right {
width: 85%;
display: flex;
flex-direction: column;
//justify-content: space-between;
font-size: 13px;
margin-left: 10px;
}
}
.state_tag{
.state_tag {
font-size: 12px;
//margin-right: 15px;
}

150
flowable-engine-web/src/views/workspace/ReProcess.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div>
<el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="true">
<div v-loading="loading" class="initiate_process">
<div v-if="!loading" style="min-width: 338px;">
<!--渲染表单-->
<form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
v-model="formData"/>
</div>
<div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
<span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
<process-diagram-viewer ref="processDiagramViewer"/>
<!--渲染流程执行过程-->
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="openItemDl = false">取 消</el-button>
<el-button size="mini" type="primary" @click="resubmitForm">提 交</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import FormRender from "@/views/common/form/FormRender";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {getInitiatedInstanceReInfo, restartProcessInstance} from "@/api/processInstance";
export default {
name: "ReProcess",
components: {FormRender, ProcessDiagramViewer},
props: {
code: {
type: String,
required: true
}
},
data() {
return {
openItemDl: false,
scale: 100,
loading: true,
formData: {},
processDefinition: {
processDefinitionKey: "",
deploymentName: "",
logo: {},
formItems: [],
process: {},
remark: ""
}
}
},
mounted() {
this.$store.state.preview = true;
this.loadProcessDefinitionReInfo(this.code);
},
created() {
this.$store.state.preview = true;
},
computed: {
forms() {
return this.$store.state.design.formItems;
}
},
destroyed() {
this.$store.state.preview = false;
},
methods: {
loadProcessDefinitionReInfo(instanceId) {
this.openItemDl = true;
getInitiatedInstanceReInfo(instanceId).then(res => {
let processDefinition = res.data;
this.processDefinition = processDefinition;
this.formData = processDefinition.formData
if (processDefinition.optionalUser){
this.$store.state.selectUserMap = new Map();
for (let key in processDefinition.optionalUser) {
this.$store.state.selectUserMap.set(key,processDefinition.optionalUser[key])
}
}
//构建表单及校验规则
this.$store.state.design = processDefinition;
this.loading = false;
}).catch(err => {
this.$message.error(err);
});
},
resubmitForm() {
let selectUserMap = {}
this.$store.state.selectUserMap.forEach(((value, key) => {
selectUserMap[key] = value
}))
let paramsData = {
processDefinitionId: this.code,
formData: JSON.stringify(this.formData),
optionalUser: selectUserMap
}
this.validate(valid => {
if (valid) {
restartProcessInstance(paramsData).then(res => {
this.$emit("submit", true)
this.openItemDl = false
this.$message.success(res.msg)
})
} else {
this.$message.warning("请完善表单😥")
}
})
},
validate(call) {
this.$refs.initiateForm.validate(call);
this.$refs.processDiagramViewer.validate(call);
}
}
}
</script>
<style lang="less" scoped>
@media screen and (max-width: 1545px) {
.initiate_process {
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.initiate_process {
display: flex;
flex: 1;
justify-content: space-around;
}
.process-form {
/deep/ .el-form-item__label {
padding: 0 0;
}
/deep/ .el-divider--horizontal {
margin: 0;
}
}
/deep/ .el-divider__text {
font-size: 16px;
}
</style>