|
|
@ -2,42 +2,34 @@ |
|
|
<div class="app-container"> |
|
|
<div class="app-container"> |
|
|
<el-card class="box-card" > |
|
|
<el-card class="box-card" > |
|
|
<div slot="header" class="clearfix"> |
|
|
<div slot="header" class="clearfix"> |
|
|
<span class="el-icon-document">基础信息</span> |
|
|
<span class="el-icon-document">发起任务</span> |
|
|
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button> |
|
|
<el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<el-tabs tab-position="top" @tab-click="handleClick"> |
|
|
|
|
|
<!--表单信息--> |
|
|
|
|
|
<el-tab-pane label="表单信息"> |
|
|
<!--初始化流程加载表单信息--> |
|
|
<!--初始化流程加载表单信息--> |
|
|
<el-col :span="16" :offset="4"> |
|
|
<el-col :span="16" :offset="4"> |
|
|
<div class="test-form"> |
|
|
<div class="test-form"> |
|
|
<parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" /> |
|
|
<parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" /> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
</el-col> |
|
|
</el-card> |
|
|
</el-tab-pane> |
|
|
|
|
|
<!--流程图--> |
|
|
<!--审批正常流程--> |
|
|
<el-tab-pane label="流程图"> |
|
|
<el-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body> |
|
|
<flow :xmlData="xmlData"></flow> |
|
|
<el-form ref="taskForm" :model="taskForm"> |
|
|
</el-tab-pane> |
|
|
<el-form-item prop="targetKey"> |
|
|
</el-tabs> |
|
|
<!-- <el-row :gutter="24">--> |
|
|
<el-button style="position: absolute;right:35px;top:35px;" type="primary" @click="goBack">关闭</el-button> |
|
|
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user> |
|
|
<!--选择流程接收人--> |
|
|
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role> |
|
|
<el-dialog :title="taskTitle" :visible.sync="taskOpen" width="65%" append-to-body> |
|
|
<!-- </el-row>--> |
|
|
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"/> |
|
|
</el-form-item> |
|
|
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"/> |
|
|
<el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]"> |
|
|
|
|
|
<el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/> |
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
</el-form> |
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
<el-button @click="completeOpen = false">取 消</el-button> |
|
|
<el-button @click="taskOpen = false">取 消</el-button> |
|
|
<el-button type="primary" @click="taskComplete">确 定</el-button> |
|
|
<el-button type="primary" @click="submitTask">提 交</el-button> |
|
|
</span> |
|
|
</span> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
<!--流程图--> |
|
|
|
|
|
<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> |
|
|
</el-card> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -45,26 +37,25 @@ |
|
|
<script> |
|
|
<script> |
|
|
import Parser from '@/components/parser/Parser' |
|
|
import Parser from '@/components/parser/Parser' |
|
|
import {definitionStart, readXml} from "@/api/flowable/definition"; |
|
|
import {definitionStart, readXml} from "@/api/flowable/definition"; |
|
|
import flow from '@/views/flowable/task/record/flow' |
|
|
import flow from '@/views/flowable/task/myProcess/send/flow' |
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
|
|
|
|
|
import {listUser} from "@/api/system/user"; |
|
|
|
|
|
import {flowFormData} from "@/api/flowable/process"; |
|
|
import {flowFormData} from "@/api/flowable/process"; |
|
|
import {getNextFlowNodeByStart} from "@/api/flowable/todo"; |
|
|
import {getNextFlowNodeByStart} from "@/api/flowable/todo"; |
|
|
|
|
|
import FlowUser from '@/components/flow/User' |
|
|
|
|
|
import FlowRole from '@/components/flow/Role' |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: "Record", |
|
|
name: "Record", |
|
|
components: { |
|
|
components: { |
|
|
Parser, |
|
|
Parser, |
|
|
flow, |
|
|
flow, |
|
|
|
|
|
FlowUser, |
|
|
|
|
|
FlowRole, |
|
|
}, |
|
|
}, |
|
|
props: {}, |
|
|
props: {}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
// 模型xml数据 |
|
|
// 模型xml数据 |
|
|
xmlData: "", |
|
|
xmlData: "", |
|
|
taskList: [], |
|
|
|
|
|
// 用户表格数据 |
|
|
|
|
|
userList: null, |
|
|
|
|
|
defaultProps: { |
|
|
defaultProps: { |
|
|
children: "children", |
|
|
children: "children", |
|
|
label: "label" |
|
|
label: "label" |
|
|
@ -75,45 +66,32 @@ export default { |
|
|
}, |
|
|
}, |
|
|
// 遮罩层 |
|
|
// 遮罩层 |
|
|
loading: true, |
|
|
loading: true, |
|
|
rules: {}, // 表单校验 |
|
|
|
|
|
variablesForm: {}, // 流程变量数据 |
|
|
|
|
|
taskForm:{ |
|
|
|
|
|
multiple: false, |
|
|
|
|
|
comment:"", // 意见内容 |
|
|
|
|
|
procInsId: "", // 流程实例编号 |
|
|
|
|
|
instanceId: "", // 流程实例编号 |
|
|
|
|
|
deployId: "", // 流程定义编号 |
|
|
deployId: "", // 流程定义编号 |
|
|
taskId: "" ,// 流程任务编号 |
|
|
procDefId: "", // 流程实例编号 |
|
|
procDefId: "", // 流程编号 |
|
|
|
|
|
vars: "", |
|
|
|
|
|
targetKey:"" |
|
|
|
|
|
}, |
|
|
|
|
|
formConf: {}, // 默认表单数据 |
|
|
formConf: {}, // 默认表单数据 |
|
|
variables: [], // 流程变量数据 |
|
|
variables: [], // 流程变量数据 |
|
|
completeTitle: null, |
|
|
taskTitle: null, |
|
|
completeOpen: false, |
|
|
taskOpen: false, |
|
|
checkSendUser: false, // 是否展示人员选择模块 |
|
|
checkSendUser: false, // 是否展示人员选择模块 |
|
|
checkSendRole: false,// 是否展示角色选择模块 |
|
|
checkSendRole: false,// 是否展示角色选择模块 |
|
|
checkType: 'single', // 选择类型 |
|
|
checkType: 'single', // 选择类型 |
|
|
|
|
|
checkValues: null, // 选中任务接收人员数据 |
|
|
|
|
|
formData: {}, // 填写的表单数据, |
|
|
|
|
|
activeValue: 1, // 切换tab标签 |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
this.taskForm.deployId = this.$route.query && this.$route.query.deployId; |
|
|
this.deployId = this.$route.query && this.$route.query.deployId; |
|
|
// 初始化表单 |
|
|
// 初始化表单 |
|
|
this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId; |
|
|
this.procDefId = this.$route.query && this.$route.query.procDefId; |
|
|
this.getNextFlowNode(this.taskForm.deployId); |
|
|
// this.getNextFlowNodeByStart(this.deployId); |
|
|
this.getFlowFormData(this.taskForm.deployId); |
|
|
this.getFlowFormData(this.deployId); |
|
|
// 回显流程记录 |
|
|
// 回显流程记录 |
|
|
this.loadModelXml(this.taskForm.deployId); |
|
|
this.loadModelXml(this.deployId); |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
/** 查询用户列表 */ |
|
|
handleClick(tab, event) { |
|
|
getList() { |
|
|
console.log(tab, event); |
|
|
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
|
|
|
|
|
this.userList = response.rows; |
|
|
|
|
|
this.total = response.total; |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
}, |
|
|
/** xml 文件 */ |
|
|
/** xml 文件 */ |
|
|
loadModelXml(deployId) { |
|
|
loadModelXml(deployId) { |
|
|
@ -162,27 +140,78 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
/** 申请流程表单数据提交 */ |
|
|
/** 申请流程表单数据提交 */ |
|
|
submitForm(data) { |
|
|
submitForm(formData) { |
|
|
|
|
|
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况 |
|
|
|
|
|
getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => { |
|
|
|
|
|
const data = res.data; |
|
|
if (data) { |
|
|
if (data) { |
|
|
const variables = data.valData; |
|
|
if (data.type === 'assignee') { // 指定人员 |
|
|
const formData = data.formData; |
|
|
this.checkSendUser = true; |
|
|
|
|
|
this.checkType = "single"; |
|
|
|
|
|
} else if (data.type === 'candidateUsers') { // 候选人员(多个) |
|
|
|
|
|
this.checkSendUser = true; |
|
|
|
|
|
this.checkType = "multiple"; |
|
|
|
|
|
} else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务) |
|
|
|
|
|
this.checkSendRole = true; |
|
|
|
|
|
} else if (data.type === 'multiInstance') { // 会签? |
|
|
|
|
|
this.checkSendUser = true; |
|
|
|
|
|
} |
|
|
|
|
|
if (this.checkSendUser || this.checkSendRole){ |
|
|
|
|
|
this.taskOpen = true; |
|
|
|
|
|
this.taskTitle = "选择任务接收"; |
|
|
|
|
|
this.formData = formData; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// else { |
|
|
|
|
|
// 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(); |
|
|
|
|
|
// }) |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
}, |
|
|
|
|
|
/** 提交流程 */ |
|
|
|
|
|
submitTask() { |
|
|
|
|
|
if (!this.checkValues && this.checkSendUser){ |
|
|
|
|
|
this.$modal.msgError("请选择任务接收!"); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (!this.checkValues && this.checkSendRole){ |
|
|
|
|
|
this.$modal.msgError("请选择流程接收角色组!"); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
if (this.formData) { |
|
|
|
|
|
const variables = this.formData.valData; |
|
|
|
|
|
const formData = this.formData.formData; |
|
|
|
|
|
// 表单是否禁用 |
|
|
formData.disabled = true; |
|
|
formData.disabled = true; |
|
|
|
|
|
// 是否显示按钮 |
|
|
formData.formBtns = false; |
|
|
formData.formBtns = false; |
|
|
if (this.taskForm.procDefId) { |
|
|
|
|
|
variables.variables = formData; |
|
|
variables.variables = formData; |
|
|
|
|
|
variables.approval = this.checkValues; |
|
|
|
|
|
console.log(variables,"流程发起提交表单数据") |
|
|
// 启动流程并将表单数据加入流程变量 |
|
|
// 启动流程并将表单数据加入流程变量 |
|
|
definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => { |
|
|
definitionStart(this.procDefId, JSON.stringify(variables)).then(res => { |
|
|
this.msgSuccess(res.msg); |
|
|
this.$modal.msgSuccess(res.msg); |
|
|
this.goBack(); |
|
|
this.goBack(); |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
/** 根据当前任务获取流程设计配置的下一步节点 */ |
|
|
/** 根据当前任务获取流程设计配置的下一步节点 */ |
|
|
getNextFlowNode(deploymentId) { |
|
|
getNextFlowNodeByStart(deploymentId,variables) { |
|
|
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况 |
|
|
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况 |
|
|
const params = {deploymentId: deploymentId} |
|
|
getNextFlowNodeByStart({deploymentId: deploymentId,variables:variables}).then(res => { |
|
|
getNextFlowNodeByStart(params).then(res => { |
|
|
|
|
|
const data = res.data; |
|
|
const data = res.data; |
|
|
if (data) { |
|
|
if (data) { |
|
|
if (data.type === 'assignee') { // 指定人员 |
|
|
if (data.type === 'assignee') { // 指定人员 |
|
|
@ -202,15 +231,11 @@ export default { |
|
|
// 用户信息选中数据 |
|
|
// 用户信息选中数据 |
|
|
handleUserSelect(selection) { |
|
|
handleUserSelect(selection) { |
|
|
if (selection) { |
|
|
if (selection) { |
|
|
|
|
|
if (selection instanceof Array) { |
|
|
const selectVal = selection.map(item => item.userId); |
|
|
const selectVal = selection.map(item => item.userId); |
|
|
if (selectVal instanceof Array) { |
|
|
this.checkValues = selectVal.join(',') |
|
|
this.taskForm.values = { |
|
|
|
|
|
"approval": selectVal.join(',') |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.taskForm.values = { |
|
|
this.checkValues = selection.userId; |
|
|
"approval": selectVal |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -219,13 +244,9 @@ export default { |
|
|
if (selection) { |
|
|
if (selection) { |
|
|
if (selection instanceof Array) { |
|
|
if (selection instanceof Array) { |
|
|
const selectVal = selection.map(item => item.roleId); |
|
|
const selectVal = selection.map(item => item.roleId); |
|
|
this.taskForm.values = { |
|
|
this.checkValues = selectVal.join(',') |
|
|
"approval": selectVal.join(',') |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
this.taskForm.values = { |
|
|
this.checkValues = selection; |
|
|
"approval": selection |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
tony
3 years ago