feat: 分组流程详情查看
This commit is contained in:
tony
36
ruoyi-ui/src/views/flowable/task/myProcess/detail/flow.vue
Normal file
36
ruoyi-ui/src/views/flowable/task/myProcess/detail/flow.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--<bpmn-modeler
|
||||
ref="refNode"
|
||||
:xml="xmlData"
|
||||
:is-view="true"
|
||||
:taskList="taskData"
|
||||
/>-->
|
||||
<flow-view :xmlData="xmlData" :taskList="taskData"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bpmnModeler from '@/components/Process/index'
|
||||
import FlowView from './flowview'
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
bpmnModeler,
|
||||
FlowView
|
||||
},
|
||||
props: {
|
||||
xmlData: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
taskData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
243
ruoyi-ui/src/views/flowable/task/myProcess/detail/flowview.vue
Normal file
243
ruoyi-ui/src/views/flowable/task/myProcess/detail/flowview.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="containers main-box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)">放大</el-button>
|
||||
<el-button type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)">缩小</el-button>
|
||||
<el-button type="info"
|
||||
size="small"
|
||||
icon="el-icon-rank"
|
||||
@click="fitViewport">适中</el-button>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
xmlData: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
taskList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
xmlData: function(val) {
|
||||
if (val) {
|
||||
this.getImg(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: 'calc(100vh - 200px)',
|
||||
});
|
||||
this.getImg(this.xmlData)
|
||||
},
|
||||
methods: {
|
||||
// 获取流程图片
|
||||
async getImg(xmlUrl) {
|
||||
const self = this
|
||||
try {
|
||||
await self.bpmnViewer.importXML(xmlUrl);
|
||||
self.fitViewport()
|
||||
if (self.taskList !==undefined && self.taskList.length > 0 ) {
|
||||
self.fillColor()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 设置高亮颜色的class
|
||||
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||
for (let i = 0; i < nodeCodes.length; i++) {
|
||||
canvas.addMarker(nodeCodes[i], colorClass);
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
|
||||
// 设置高亮颜色的
|
||||
fillColor() {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||
const completeTask = this.taskList.find(m => m.key === n.id)
|
||||
const todoTask = this.taskList.find(m => !m.completed)
|
||||
const endTask = this.taskList[this.taskList.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
|
||||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}else {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === 'bpmn:ParallelGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
else if (n.$type === 'bpmn:StartEvent') {
|
||||
n.outgoing.forEach(nn => {
|
||||
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, 'highlight')
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
214
ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue
Normal file
214
ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">基础信息</span>
|
||||
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
|
||||
<!--流程处理表单模块-->
|
||||
<el-col :span="16" :offset="6">
|
||||
<div>
|
||||
<parser :key="new Date().getTime()" :form-conf="variablesData" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<!--流程流转记录-->
|
||||
<el-card class="box-card" v-if="flowRecordList">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-notebook-1">审批记录</span>
|
||||
</div>
|
||||
<el-col :span="16" :offset="4" >
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item,index ) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item.finishTime)"
|
||||
:color="setColor(item.finishTime)"
|
||||
>
|
||||
<p style="font-weight: 700">{{item.taskName}}</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
|
||||
<template slot="label"><i class="el-icon-user"></i>实际办理</template>
|
||||
{{item.assigneeName}}
|
||||
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.candidate" label-class-name="my-label">
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{item.candidate}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label">
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{item.createTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{item.finishTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.duration" label-class-name="my-label">
|
||||
<template slot="label"><i class="el-icon-time"></i>耗时</template>
|
||||
{{item.duration}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.comment" label-class-name="my-label">
|
||||
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
|
||||
{{item.comment.comment}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<flow :xmlData="xmlData" :taskData="taskList"></flow>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {flowRecord} from "@/api/flowable/finished";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
|
||||
import flow from '@/views/flowable/task/record/flow'
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
components: {
|
||||
Parser,
|
||||
flow
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// 模型xml数据
|
||||
xmlData: "",
|
||||
taskList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
flowRecordList: [], // 流程流转数据
|
||||
taskForm:{
|
||||
multiple: false,
|
||||
comment:"", // 意见内容
|
||||
procInsId: "", // 流程实例编号
|
||||
instanceId: "", // 流程实例编号
|
||||
deployId: "", // 流程定义编号
|
||||
taskId: "" ,// 流程任务编号
|
||||
procDefId: "", // 流程编号
|
||||
},
|
||||
variablesData: {}, // 流程变量数据
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
|
||||
this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
|
||||
this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
|
||||
// 回显流程记录
|
||||
this.getFlowViewer(this.taskForm.procInsId,this.taskForm.executionId);
|
||||
this.getModelDetail(this.taskForm.deployId);
|
||||
// 流程任务重获取变量表单
|
||||
this.processVariables( this.taskForm.taskId)
|
||||
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
|
||||
},
|
||||
methods: {
|
||||
/** xml 文件 */
|
||||
getModelDetail(deployId) {
|
||||
// 发送请求，获取xml
|
||||
readXml(deployId).then(res => {
|
||||
this.xmlData = res.data
|
||||
})
|
||||
},
|
||||
getFlowViewer(procInsId,executionId) {
|
||||
getFlowViewer(procInsId,executionId).then(res => {
|
||||
this.taskList = res.data
|
||||
})
|
||||
},
|
||||
setIcon(val) {
|
||||
if (val) {
|
||||
return "el-icon-check";
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
},
|
||||
setColor(val) {
|
||||
if (val) {
|
||||
return "#2bc418";
|
||||
} else {
|
||||
return "#b3bdbb";
|
||||
}
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
getFlowRecordList(procInsId, deployId) {
|
||||
const that = this
|
||||
const params = {procInsId: procInsId, deployId: deployId}
|
||||
flowRecord(params).then(res => {
|
||||
that.flowRecordList = res.data.flowList;
|
||||
}).catch(res => {
|
||||
this.goBack();
|
||||
})
|
||||
},
|
||||
fillFormData(form, data) {
|
||||
form.fields.forEach(item => {
|
||||
const val = data[item.__vModel__]
|
||||
if (val) {
|
||||
item.__config__.defaultValue = val
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 获取流程变量内容 */
|
||||
processVariables(taskId) {
|
||||
if (taskId) {
|
||||
// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
|
||||
getProcessVariables(taskId).then(res => {
|
||||
this.variablesData = res.data.variables;
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
this.$store.dispatch("tagsView/delView", this.$route);
|
||||
this.$router.go(-1)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.test-form {
|
||||
margin: 15px auto;
|
||||
width: 800px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
</style>
|
||||
401
ruoyi-ui/src/views/flowable/task/myProcess/index.vue
Normal file
401
ruoyi-ui/src/views/flowable/task/myProcess/index.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="deployTime">
|
||||
<el-date-picker clearable size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:deployment:add']"
|
||||
>新增流程</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:deployment:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:deployment:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="myProcessList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程类别" align="center" prop="category" width="100px" />
|
||||
<el-table-column label="流程版本" align="center" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" >v{{ scope.row.procDefVersion }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="提交时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="流程状态" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.finishTime != null" size="mini">已完成</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗时" align="center" prop="duration" width="180"/>
|
||||
<el-table-column label="当前节点" align="center" prop="taskName"/>
|
||||
<el-table-column label="办理" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label v-if="scope.row.assigneeName">{{scope.row.assigneeName}} <el-tag type="info" size="mini">{{scope.row.deptName}}</el-tag></label>
|
||||
<label v-if="scope.row.candidate">{{scope.row.candidate}}</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-tickets" @click.native="handleFlowRecord(scope.row)">
|
||||
详情
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-circle-close" @click.native="handleStop(scope.row)">
|
||||
取消申请
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)" v-hasPermi="['system:deployment:remove']">
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 发起流程 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
|
||||
<el-form :model="queryProcessParams" ref="queryProcessForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryProcessParams.name"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleProcessQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetProcessQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="processLoading" fit :data="definitionList" border >
|
||||
<el-table-column label="流程名称" align="center" prop="name" />
|
||||
<el-table-column label="流程版本" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" >v{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" />
|
||||
<el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleStartProcess(scope.row)"
|
||||
>发起流程</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="processTotal>0"
|
||||
:total="processTotal"
|
||||
:page.sync="queryProcessParams.pageNum"
|
||||
:limit.sync="queryProcessParams.pageSize"
|
||||
@pagination="listDefinition"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDeployment,
|
||||
delDeployment,
|
||||
addDeployment,
|
||||
updateDeployment,
|
||||
exportDeployment,
|
||||
flowRecord
|
||||
} from "@/api/flowable/finished";
|
||||
import { myProcessList,stopProcess } from "@/api/flowable/process";
|
||||
import {listDefinition} from "@/api/flowable/definition";
|
||||
export default {
|
||||
name: "Deploy",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
processLoading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
processTotal:0,
|
||||
// 我发起的流程列表数据
|
||||
myProcessList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
src: "",
|
||||
definitionList:[],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
},
|
||||
// 查询参数
|
||||
queryProcessParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
myProcessList(this.queryParams).then(response => {
|
||||
this.myProcessList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
category: null,
|
||||
key: null,
|
||||
tenantId: null,
|
||||
deployTime: null,
|
||||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleProcessQuery() {
|
||||
this.queryProcessParams.pageNum = 1;
|
||||
this.listDefinition();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetProcessQuery() {
|
||||
this.resetForm("queryProcessForm");
|
||||
this.handleProcessQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.open = true;
|
||||
this.title = "发起流程";
|
||||
this.listDefinition();
|
||||
},
|
||||
listDefinition(){
|
||||
listDefinition(this.queryProcessParams).then(response => {
|
||||
this.definitionList = response.data.records;
|
||||
this.processTotal = response.data.total;
|
||||
this.processLoading = false;
|
||||
});
|
||||
},
|
||||
/** 发起流程申请 */
|
||||
handleStartProcess(row){
|
||||
this.$router.push({ path: '/flowable/task/myProcess/send/index',
|
||||
query: {
|
||||
deployId: row.deploymentId,
|
||||
procDefId: row.id
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 取消流程申请 */
|
||||
handleStop(row){
|
||||
const params = {
|
||||
instanceId: row.procInsId
|
||||
}
|
||||
stopProcess(params).then( res => {
|
||||
this.msgSuccess(res.msg);
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
handleFlowRecord(row){
|
||||
this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
||||
query: {
|
||||
procInsId: row.procInsId,
|
||||
deployId: row.deployId,
|
||||
taskId: row.taskId
|
||||
}})
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getDeployment(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改流程定义";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDeployment(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDeployment(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
// const ids = row.procInsId || this.ids;// 暂不支持删除多个流程
|
||||
const ids = row.procInsId;
|
||||
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delDeployment(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportDeployment(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
36
ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue
Normal file
36
ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--<bpmn-modeler
|
||||
ref="refNode"
|
||||
:xml="xmlData"
|
||||
:is-view="true"
|
||||
:taskList="taskData"
|
||||
/>-->
|
||||
<flow-view :xmlData="xmlData" :taskList="taskData"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bpmnModeler from '@/components/Process/index'
|
||||
import FlowView from './flowview'
|
||||
|
||||
export default {
|
||||
name: "Flow",
|
||||
components: {
|
||||
bpmnModeler,
|
||||
FlowView
|
||||
},
|
||||
props: {
|
||||
xmlData: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
taskData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
243
ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue
Normal file
243
ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="containers main-box">
|
||||
<el-button type="success"
|
||||
size="small"
|
||||
icon="el-icon-zoom-in"
|
||||
@click="zoomViewport(true)">放大</el-button>
|
||||
<el-button type="warning"
|
||||
size="small"
|
||||
icon="el-icon-zoom-out"
|
||||
@click="zoomViewport(false)">缩小</el-button>
|
||||
<el-button type="info"
|
||||
size="small"
|
||||
icon="el-icon-rank"
|
||||
@click="fitViewport">适中</el-button>
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
|
||||
export default {
|
||||
name: "FlowView",
|
||||
props: {
|
||||
xmlData: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
taskList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bpmnViewer: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
xmlData: function(val) {
|
||||
if (val) {
|
||||
this.getImg(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 生成实例
|
||||
this.bpmnViewer && this.bpmnViewer.destroy();
|
||||
this.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: 'calc(100vh - 200px)',
|
||||
});
|
||||
this.getImg(this.xmlData)
|
||||
},
|
||||
methods: {
|
||||
// 获取流程图片
|
||||
async getImg(xmlUrl) {
|
||||
const self = this
|
||||
try {
|
||||
await self.bpmnViewer.importXML(xmlUrl);
|
||||
self.fitViewport()
|
||||
if (self.taskList !==undefined && self.taskList.length > 0 ) {
|
||||
self.fillColor()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings)
|
||||
}
|
||||
},
|
||||
// 设置高亮颜色的class
|
||||
setNodeColor(nodeCodes, colorClass, canvas) {
|
||||
for (let i = 0; i < nodeCodes.length; i++) {
|
||||
canvas.addMarker(nodeCodes[i], colorClass);
|
||||
}
|
||||
},
|
||||
// 让图能自适应屏幕
|
||||
fitViewport() {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
|
||||
},
|
||||
// 放大缩小
|
||||
zoomViewport(zoomIn = true) {
|
||||
this.zoom = this.bpmnViewer.get('canvas').zoom()
|
||||
this.zoom += (zoomIn ? 0.1 : -0.1)
|
||||
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
|
||||
},
|
||||
|
||||
// 设置高亮颜色的
|
||||
fillColor() {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||
const completeTask = this.taskList.find(m => m.key === n.id)
|
||||
const todoTask = this.taskList.find(m => !m.completed)
|
||||
const endTask = this.taskList[this.taskList.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
|
||||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}else {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === 'bpmn:ParallelGateway') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (targetTask) {
|
||||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
else if (n.$type === 'bpmn:StartEvent') {
|
||||
n.outgoing.forEach(nn => {
|
||||
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, 'highlight')
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
|
||||
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
|
||||
.bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.view-mode {
|
||||
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
|
||||
display: none;
|
||||
}
|
||||
.el-loading-mask {
|
||||
background-color: initial;
|
||||
}
|
||||
.el-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
// background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 650px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue
Normal file
194
ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">基础信息</span>
|
||||
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
<!--初始化流程加载表单信息-->
|
||||
<el-col :span="16" :offset="4">
|
||||
<div class="test-form">
|
||||
<parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<!--流程图-->
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<flow :xmlData="xmlData" :taskData="taskList"></flow>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {definitionStart, readXml} from "@/api/flowable/definition";
|
||||
import flow from '@/views/flowable/task/record/flow'
|
||||
import {treeselect} from "@/api/system/dept";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import {listUser} from "@/api/system/user";
|
||||
import {flowFormData} from "@/api/flowable/process";
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
components: {
|
||||
Parser,
|
||||
flow,
|
||||
Treeselect
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// 模型xml数据
|
||||
xmlData: "",
|
||||
taskList: [],
|
||||
// 用户表格数据
|
||||
userList: null,
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label"
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptId: undefined
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
rules: {}, // 表单校验
|
||||
variablesForm: {}, // 流程变量数据
|
||||
taskForm:{
|
||||
multiple: false,
|
||||
comment:"", // 意见内容
|
||||
procInsId: "", // 流程实例编号
|
||||
instanceId: "", // 流程实例编号
|
||||
deployId: "", // 流程定义编号
|
||||
taskId: "" ,// 流程任务编号
|
||||
procDefId: "", // 流程编号
|
||||
vars: "",
|
||||
targetKey:""
|
||||
},
|
||||
formConf: {}, // 默认表单数据
|
||||
variables: [], // 流程变量数据
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
|
||||
// 初始化表单
|
||||
this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId;
|
||||
this.getFlowFormData(this.taskForm.deployId);
|
||||
// 回显流程记录
|
||||
this.loadModelXml(this.taskForm.deployId);
|
||||
},
|
||||
methods: {
|
||||
/** 查询部门下拉树结构 */
|
||||
getTreeselect() {
|
||||
treeselect().then(response => {
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
/** 查询用户列表 */
|
||||
getList() {
|
||||
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||
this.userList = response.rows;
|
||||
this.total = response.total;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** xml 文件 */
|
||||
loadModelXml(deployId) {
|
||||
// 发送请求，获取xml
|
||||
readXml(deployId).then(res => {
|
||||
this.xmlData = res.data
|
||||
})
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFlowFormData(deployId) {
|
||||
const that = this
|
||||
const params = {deployId: deployId}
|
||||
flowFormData(params).then(res => {
|
||||
// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
|
||||
that.formConf = res.data;
|
||||
}).catch(res => {
|
||||
this.goBack();
|
||||
})
|
||||
},
|
||||
/** 返回页面 */
|
||||
goBack() {
|
||||
// 关闭当前标签页并返回上个页面
|
||||
this.$store.dispatch("tagsView/delView", this.$route);
|
||||
this.$router.go(-1)
|
||||
},
|
||||
/** 接收子组件传的值 */
|
||||
getData(data) {
|
||||
if (data) {
|
||||
const variables = [];
|
||||
data.fields.forEach(item => {
|
||||
let variableData = {};
|
||||
variableData.label = item.__config__.label
|
||||
// 表单值为多个选项时
|
||||
if (item.__config__.defaultValue instanceof Array) {
|
||||
const array = [];
|
||||
item.__config__.defaultValue.forEach(val => {
|
||||
array.push(val)
|
||||
})
|
||||
variableData.val = array;
|
||||
} else {
|
||||
variableData.val = item.__config__.defaultValue
|
||||
}
|
||||
variables.push(variableData)
|
||||
})
|
||||
this.variables = variables;
|
||||
}
|
||||
},
|
||||
/** 申请流程表单数据提交 */
|
||||
submitForm(data) {
|
||||
if (data) {
|
||||
const variables = data.valData;
|
||||
const formData = data.formData;
|
||||
formData.disabled = true;
|
||||
formData.formBtns = false;
|
||||
if (this.taskForm.procDefId) {
|
||||
variables.variables = formData;
|
||||
// 启动流程并将表单数据加入流程变量
|
||||
definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
|
||||
this.msgSuccess(res.msg);
|
||||
this.goBack();
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.test-form {
|
||||
margin: 15px auto;
|
||||
width: 800px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user