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

clay : 关于我的基本完成 #21

Merged
clay merged 3 commits from master into pro 2023-02-24 14:32:11 +00:00
Conversation 0 Commits 3 Files Changed 10 +444 -169
8 changed files with 444 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6dc15b6ae0 - Show all commits

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

@ -13,6 +13,13 @@ export function startProcessInstance(param) {
})
}
export function getAboutInstanceList() {
return request({
url: "/flowable/process/instance/about",
method: "get",
})
}
export function getInitiatedInstanceList() {
return request({
url: "/flowable/process/instance/self",
@ -22,7 +29,7 @@ export function getInitiatedInstanceList() {
export function getInitiatedInstanceInfo(processInstanceId) {
return request({
url: "/flowable/process/instance/self/info/"+processInstanceId,
url: "/flowable/process/instance/info/"+processInstanceId,
method: "get",
})
}

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

@ -1,5 +1,5 @@
<template>
<el-form ref="form" class="process-form" label-position="top" :rules="rules" :model="_value">
<el-form ref="form" class="process-form" label-position="top" :model="_value">
<div v-for="(item, index) in formItems" :key="item.name + index">
<el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
:prop="item.id" :label="item.title">
@ -43,11 +43,6 @@ export default {
}
}
},
data() {
return {
rules: {},
}
},
computed: {
_value: {
get() {
@ -71,13 +66,6 @@ export default {
if (this.isPreview){
this.$set(item, 'perm', this.model)
}
if (item.props.required && this.model === "E") {
this.$set(this.rules, item.id, [{
type: item.valueType === 'Array' ? 'array' : undefined,
required: true,
message: `请填写${item.title}`, trigger: 'blur'
}])
}
}
})
}

155
flowable-engine-web/src/views/common/operation/OperationRender.vue Normal file
View File

@ -0,0 +1,155 @@
<template>
<div style="margin: 10px">
<el-timeline>
<el-timeline-item v-for="(operation,index) in operationList"
:key="index" :timestamp="operation.startTime"
:icon="operation.icon"
:color="operation.color"
size="large"
placement="top">
<el-card>
<div style="display: flex;">
<div>
<el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
</div>
<div style="margin-left: 10px;">
<div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
<div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
</div>
</div>
<template v-if="operation.operation === 'comment' || operation.operation === 'refuse'">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ operation.comment.context }}
</div>
<div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
<template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
<el-image
style="width: 100px; height: 100px"
:src="item.url"
:preview-src-list="[item.url]">
</el-image>
</template>
<div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
<el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>
</div>
</div>
</div>
</template>
</el-card>
</el-timeline-item>
<el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
<el-card style="font-size: 16px;font-weight: bold;">
{{ timeline.context }}
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
export default {
name: "OperationRender",
props: {
operationList: {
type: Array,
default: () => {
return []
}
},
state: {
type: String,
default: () => {
return '1'
}
}
},
data() {
return {
timeline: {}
}
},
created() {
switch (this.state) {
case '1':
this.timeline = {
color: '#f78f5f',
icon: 'el-icon-more',
context: '审批进行中'
}
break
case '2':
this.timeline = {
color: '#0bbd87',
icon: 'el-icon-check',
context: '审批通过'
}
break
case '3':
this.timeline = {
color: '#f56c6c',
icon: 'el-icon-close',
context: '审核已驳回'
}
break
case '4':
this.timeline = {
color: '#0bbd87',
icon: 'el-icon-check',
context: '审批通过'
}
break
default:
break
}
for (let operation of this.operationList) {
let state = operation.state
let type = operation.operation
if (state === 'agree') {
this.$set(operation, "icon", "el-icon-check")
this.$set(operation, "color", "#0bbd87")
}
if (state === 'process') {
this.$set(operation, "icon", "el-icon-loading")
this.$set(operation, "color", "#f78f5f")
}
if (state === 'comment') {
this.$set(operation, "icon", "el-icon-chat-dot-round")
this.$set(operation, "color", "#0bbd87")
}
if (state === 'refuse' && type === 'comment') {
this.$set(operation, "icon", "el-icon-chat-dot-round")
this.$set(operation, "color", "#f56c6c")
}
if (state === 'refuse' && type === 'opinion') {
this.$set(operation, "icon", "el-icon-close")
this.$set(operation, "color", "#f56c6c")
}
}
},
methods: {
getAttachmentList(attachments, image) {
let result = [];
for (let attachment of attachments) {
if (attachment.isImage === image) {
result.push(attachment)
}
}
return result;
},
}
}
</script>
<style scoped>
/deep/ .el-card__body, .el-main {
padding: 10px;
}
</style>

106
flowable-engine-web/src/views/common/operation/operationRender.vue
View File

@ -1,106 +0,0 @@
<template>
<div style="margin: 10px">
<el-timeline>
<el-timeline-item v-for="(operation,index) in operationList"
:key="index" :timestamp="operation.startTime"
:icon="operation.icon"
:color="operation.color"
size="large"
placement="top">
<el-card>
<div style="display: flex;">
<div>
<el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
</div>
<div style="margin-left: 10px;">
<div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
<div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
</div>
</div>
<!-- <template v-if="operation.operation == 'opinion'">-->
<!-- <h4>{{operation.operationName}}</h4>-->
<!-- <p>王小虎 提交于 2018/4/12 20:46</p>-->
<!-- </template>-->
<template v-if="operation.operation == 'comment'">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ operation.comment.context }}
</div>
<div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
<template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
<el-image
style="width: 100px; height: 100px"
:src="item.url"
:preview-src-list="[item.url]">
</el-image>
</template>
<div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
<el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document" >{{file.name}}</el-link>
</div>
</div>
</div>
</template>
</el-card>
</el-timeline-item>
<el-timeline-item icon="el-icon-more">
<h2>审批进行中</h2>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
export default {
props:{
operationList:{
type: Array,
default: () => {
return []
}
}
},
name: "operationRender",
created() {
for (let operation of this.operationList) {
switch (operation.state) {
case 'agree' :
this.$set(operation, "icon", "el-icon-check")
this.$set(operation, "color", "#0bbd87")
break;
case 'process' :
this.$set(operation, "icon", "el-icon-loading")
this.$set(operation, "color", "#f78f5f")
break;
case 'comment' :
this.$set(operation, "icon", "el-icon-chat-dot-round")
this.$set(operation, "color", "#0bbd87")
break;
default:
break;
}
}
},
methods: {
getAttachmentList(attachments,image){
let result = [];
for (let attachment of attachments) {
if (attachment.isImage === image){
result.push(attachment)
}
}
return result;
},
}
}
</script>
<style scoped>
/deep/ .el-card__body, .el-main {
padding: 10px;
}
</style>

201
flowable-engine-web/src/views/workspace/AboutInstance.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div>
<el-table :data="tableData"
@row-click="clickRow"
style="width: 100%">
<el-table-column
prop="deploymentName"
label="审批类型"
width="180"/>
<el-table-column
prop="approveName"
label="发起人"
width="180"/>
<el-table-column
prop="submitTime"
label="提交时间"/>
<el-table-column
prop="endTime"
label="结束时间"/>
<el-table-column
prop="taskName"
label="当前节点"/>
<el-table-column
label="处理耗时">
<template slot-scope="scope">
{{ getTimeConsuming(scope.row) }}
</template>
</el-table-column>
<el-table-column
prop="state"
label="状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.state === '1'">进行中</el-tag>
<el-tag v-if="scope.row.state === '4'" type="success">审批通过</el-tag>
<el-tag v-if="scope.row.state === '3'" type="danger">审批驳回</el-tag>
<el-tag v-if="scope.row.state === '2'" type="info">已撤销</el-tag>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer
title="审批详情"
size="500px"
:visible.sync="approveOpen"
direction="rtl">
<div v-loading="loading">
<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>
</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 === '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-tooltip>
</div>
<div>
<span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
</div>
</div>
</div>
<div style="height: 15px;background:#f5f5f5;"></div>
<form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
v-model="processInstanceData.formData"/>
<div style="height: 15px;background:#f5f5f5;"></div>
<operation-render v-if="!loading"
:operation-list="processInstanceData.operationList"
:state="selectProcessInstance.state"/>
<div style="height: 15px;background:#f5f5f5;"></div>
</div>
</el-drawer>
<el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
<process-diagram-viewer v-if="processDiagramViewer"/>
<div style="height: 70px;"></div>
</el-dialog>
</div>
</template>
<script>
import FormRenderView from '@/views/common/form/FormRender'
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},
data() {
return {
approveOpen: false,
processDiagramViewer: false,
selectProcessInstance: {},
tableData: [],
loading: false,
processInstanceData: {
userInfo: {},
formData: {},
formItems: [],
processList: [],
operationList: [],
},
};
},
created() {
this.getList();
},
methods: {
clickRow(row) {
this.approveOpen = true;
this.loadProcessInstance(row.processInstanceId)
this.selectProcessInstance = row
},
loadProcessInstance(processInstanceId) {
let that = this;
this.init();
getInitiatedInstanceInfo(processInstanceId).then(res => {
let data = res.data
that.processInstanceData = data
that.$store.state.design = data;
that.$store.state.runningList = data.runningList;
that.$store.state.endList = data.endList;
that.$store.state.noTakeList = data.noTakeList;
this.loading = false;
console.log(data, "获取到的结果数据")
})
},
init() {
this.processInstanceData = {
userInfo: {},
formData: {},
formItems: [],
processList: [],
operationList: [],
};
this.loading = true;
this.$store.state.design = this.taskData;
this.$store.state.runningList = [];
this.$store.state.endList = [];
this.$store.state.noTakeList = [];
this.$store.state.diagramMode = "viewer";
this.$store.state.preview = false;
},
getList() {
getAboutInstanceList().then(res => {
let data = res.data
this.tableData = data.rows
})
},
getTimeConsuming(instance) {
if (instance.state != 1) {
//dateFormat(开始时间,结束时间)
return timeLength(instance.submitTime,instance.endTime);
}
}
}
}
</script>
<style lang="scss" scoped>
.top {
padding: 0 10px 10px 10px;
display: flex;
.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;
}
}
.state_tag{
font-size: 12px;
//margin-right: 15px;
}
</style>

75
flowable-engine-web/src/views/workspace/DisposalTask.vue
View File

@ -29,10 +29,10 @@
prop="state"
label="状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.state == 1">待处理</el-tag>
<el-tag v-if="scope.row.state == 4" type="success">已同意</el-tag>
<el-tag v-if="scope.row.state == 3" type="danger">已拒绝</el-tag>
<el-tag v-if="scope.row.state == 2" type="warning">已退回</el-tag>
<el-tag v-if="scope.row.state === '1'">待处理</el-tag>
<el-tag v-if="scope.row.state === '4'" type="success">已同意</el-tag>
<el-tag v-if="scope.row.state === '3'" type="danger">已拒绝</el-tag>
<el-tag v-if="scope.row.state === '2'" type="warning">已退回</el-tag>
</template>
</el-table-column>
</el-table>
@ -50,7 +50,12 @@
<div class="top_right">
<div style="margin-bottom: 12px">
<span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
<el-tag style="font-size: 12px" size="mini">进行中</el-tag>
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '1'">进行中</el-tag>
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '4'" type="success">审批通过</el-tag>
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '3'" type="danger">审批驳回</el-tag>
<el-tag class="state_tag" size="mini" v-if="selectTask.state === '2'" type="info">已撤销</el-tag>
<!-- <el-tag style="font-size: 12px" size="mini">进行中</el-tag>-->
</div>
<div>
<span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
@ -59,11 +64,13 @@
</div>
<div style="height: 15px;background:#f5f5f5;"></div>
<div>
<form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
v-model="taskData.formData"/>
<form-render-view v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
v-model="taskData.formData"/>
</div>
<div style="height: 15px;background:#f5f5f5;"></div>
<operation-render v-if="!loading" :operation-list="taskData.operationList"/>
<operation-render v-if="!loading"
:operation-list="taskData.operationList"
:state="selectTask.state"/>
<div style="height: 15px;background:#f5f5f5;"></div>
<el-footer class="footer">
<div class="footer_comment" @click="showCommentBox">
@ -101,14 +108,14 @@
<script>
import Comment from "../../components/common/Comment";
import FormRender from "@/views/common/form/FormRender";
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
import OperationRender from "@/views/common/operation/operationRender";
import OperationRender from "@/views/common/operation/OperationRender";
import FormRenderView from "../common/form/FormRenderView";
export default {
name: "DisposalTask",
components: {OperationRender, Comment, FormRender, ProcessDiagramViewer},
components: {FormRenderView, OperationRender, Comment, ProcessDiagramViewer},
data() {
return {
approveOpen: false,
@ -232,7 +239,28 @@ export default {
this.$refs.comment.show()
},
/**
* 拒绝提交
* 评论回调
* @param data
* @param type
*/
commentConfirm(data, type) {
switch (type) {
case 1:
this.submitComment(data);
break;
case 2:
this.submitRefuse(data);
break;
case 4:
this.submitRollBack(data);
break;
default :
break;
}
},
/**
* 拒绝任务
* @param data
*/
submitRefuse(data) {
@ -247,25 +275,8 @@ export default {
})
},
/**
* 评论回调
* @param data
* @param type
* 回退
*/
commentConfirm(data, type) {
switch (type) {
case 1:
this.submitComment(data);
break;
case 2:
this.submitRollBack(data);
break;
case 3:
this.submitRefuse(data);
break;
default :
break;
}
},
submitRollBack(data) {
let params = {
taskId: this.selectTask.taskId,
@ -273,6 +284,8 @@ export default {
comment: data,
};
rollBackTask(params).then(res => {
this.approveOpen = false;
this.getList();
this.$message.success(res.msg);
})
},
@ -283,6 +296,7 @@ export default {
submitComment(data) {
this.$set(data, "taskId", this.selectTask.taskId);
addComment(data).then(res => {
this.approveOpen = false;
this.$message.success(res.msg);
});
}
@ -291,6 +305,7 @@ export default {
</script>
<style scoped lang="less">
.top {
padding: 0 10px 10px 10px;
display: flex;

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

@ -1,3 +1,4 @@
<script src="../../api/processInstance.js"></script>
<template>
<div>
<el-table :data="tableData"
@ -30,10 +31,10 @@
prop="state"
label="状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.state == 1">进行中</el-tag>
<el-tag v-if="scope.row.state == 4" type="success">审批通过</el-tag>
<el-tag v-if="scope.row.state == 3" type="danger">审批驳回</el-tag>
<el-tag v-if="scope.row.state == 2" type="info">已撤销</el-tag>
<el-tag v-if="scope.row.state === '1'">进行中</el-tag>
<el-tag v-if="scope.row.state === '4'" type="success">审批通过</el-tag>
<el-tag v-if="scope.row.state === '3'" type="danger">审批驳回</el-tag>
<el-tag v-if="scope.row.state === '2'" type="info">已撤销</el-tag>
</template>
</el-table-column>
<el-table-column
@ -51,27 +52,32 @@
<div v-loading="loading">
<div class="top">
<div class="top_left">
<el-avatar size="large" :src="avatar"></el-avatar>
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectProcessInstance.approveName }}</span>
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
<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 style="font-size: 12px;margin:0 15px;" size="mini" type="success" v-if="selectProcessInstance.state==4">审批通过</el-tag>
<el-tag style="font-size: 12px;margin:0 15px;" size="mini" v-else >进行中</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-tooltip>
</div>
<div>
<span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.taskId }}</span>
<span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
</div>
</div>
</div>
<div style="height: 15px;background:#f5f5f5;"></div>
<form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
<form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
v-model="processInstanceData.formData"/>
<!-- <process-diagram-viewer v-if="!loading"/>-->
<div style="height: 15px;background:#f5f5f5;"></div>
<operation-render v-if="!loading"
:operation-list="processInstanceData.operationList"
:state="selectProcessInstance.state"/>
<div style="height: 15px;background:#f5f5f5;"></div>
</div>
</el-drawer>
@ -84,14 +90,14 @@
</template>
<script>
import Comment from "@/components/common/Comment";
import FormRenderView from '@/views/common/form/FormRender'
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
import {timeLength} from '@/utils/date'
import OperationRender from "../common/operation/OperationRender";
export default {
name: "InitiatedInstance",
components: {Comment, FormRenderView, ProcessDiagramViewer},
components: {OperationRender, FormRenderView, ProcessDiagramViewer},
data() {
return {
approveOpen: false,
@ -100,11 +106,12 @@ export default {
tableData: [],
loading: false,
processInstanceData: {
userInfo: {},
formData: {},
formItems: [],
processList: [],
operationList: [],
},
avatar: require("@/assets/image/avatar.png")
};
},
created() {
@ -134,9 +141,11 @@ export default {
init() {
this.processInstanceData = {
userInfo: {},
formData: {},
formItems: [],
processList: []
processList: [],
operationList: [],
};
this.loading = true;
this.$store.state.design = this.taskData;
@ -185,4 +194,9 @@ export default {
}
}
.state_tag{
font-size: 12px;
//margin-right: 15px;
}
</style>

9
flowable-engine-web/src/views/workspace/WorkSpace.vue
View File

@ -41,13 +41,13 @@
</div>
</el-tab-pane>
<el-tab-pane label="待我处理(3)" name="disposalTask">
<disposal-task v-if="active == 'disposalTask'" ref="disposalTask"/>
<disposal-task v-if="active === 'disposalTask'" ref="disposalTask"/>
</el-tab-pane>
<el-tab-pane label="我发起的" name="initiated">
<initiated-instance v-if="active == 'initiated'" ref="InitiatedInstance"/>
<initiated-instance v-if="active === 'initiated'" ref="InitiatedInstance"/>
</el-tab-pane>
<el-tab-pane label="关于我的" name="aboutMe">
<div class="no-data">暂无数据 😀</div>
<about-instance v-if="active === 'aboutMe'" ref="AboutInstance"/>
</el-tab-pane>
</el-tabs>
@ -67,10 +67,11 @@ import InitiatedInstance from "./InitiatedInstance";
import DisposalTask from "./DisposalTask";
import {getProcessDefinitionList} from "@/api/processDefinition";
import {startProcessInstance} from "@/api/processInstance";
import AboutInstance from "./AboutInstance";
export default {
name: "workSpace",
components: {InitiateProcess,DisposalTask,InitiatedInstance},
components: {AboutInstance, InitiateProcess,DisposalTask,InitiatedInstance},
data() {
return {
active: 'disposalTask',