ssc
5 years ago
parent
9d941dd805
commit
7411f1d692
19 changed files with 1272 additions and 539 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,265 @@ |
|||||||
|
import { getFormByProcessId, startProcess, detail, completeTask, transferTask, delegateTask, rollbackTask, terminateProcess } from '@/api/plugin/workflow/process' |
||||||
|
|
||||||
|
import Layout from '@/page/index/' |
||||||
|
import defaultValues from './default-values' |
||||||
|
|
||||||
|
import Print from '../util/print' |
||||||
|
|
||||||
|
import { mapGetters } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
mixins: [defaultValues], |
||||||
|
computed: { |
||||||
|
...mapGetters(['tag', 'userInfo']), |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
process: {}, // 流程定义/流程实例信息
|
||||||
|
buttonList: [], // 配置按钮信息
|
||||||
|
flow: [], // 流转信息
|
||||||
|
userSelectType: '', // 人员选择类型 transfer转办 delegate委托 copy抄送 assignee审核人
|
||||||
|
checkType: 'radio', // 人员选择check类型 radio单选 checkbox多选
|
||||||
|
comment: '', // 评论
|
||||||
|
bpmnOption: {}, // 流程图配置信息
|
||||||
|
watermarkText: '', //水印文字
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.watermarkText = this.userInfo.user_name + " " + this.userInfo.real_name |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 动态路由跳转
|
||||||
|
dynamicRoute(row, type) { |
||||||
|
const { id, taskId, processInstanceId, formKey, formUrl } = row |
||||||
|
let param = Buffer.from(JSON.stringify({ |
||||||
|
processId: id, |
||||||
|
taskId, |
||||||
|
processInsId: processInstanceId |
||||||
|
})).toString('base64') |
||||||
|
|
||||||
|
if (formKey && formKey.startsWith('wf_ex_')) { |
||||||
|
if (formUrl) { // 配置了自定义路由
|
||||||
|
this.$router.push(formUrl + `?p=${param}`) |
||||||
|
} else { // 动态添加路由
|
||||||
|
this.$router.addRoutes([{ |
||||||
|
path: `/workflow/process/external`, |
||||||
|
component: Layout, |
||||||
|
children: [{ |
||||||
|
path: `${formKey.substring(6)}/${type}`, |
||||||
|
name: type == 'start' ? '发起流程' : '流程详情', |
||||||
|
component: () => |
||||||
|
import( /* webpackChunkName: "views" */ `@/views/plugin/workflow/process/external/${formKey.substring(6)}/${type}.vue`), |
||||||
|
}] |
||||||
|
}]) |
||||||
|
this.$router.push(`/workflow/process/external/${formKey.substring(6)}/${type}?p=${param}`) |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.$router.push(`/workflow/process/${type}/${param}`) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 根据可读可写，过滤avue column
|
||||||
|
filterAvueColumn(column, taskForm, props = { label: 'label', prop: 'prop' }) { |
||||||
|
if (!column || column.length == 0) return { column } |
||||||
|
|
||||||
|
const values = [] |
||||||
|
const vars = [] |
||||||
|
column.forEach(col => { |
||||||
|
let c = taskForm.find(s => s.id == col[props.prop]) |
||||||
|
if (c && c.readable) { |
||||||
|
if (c.writable) { // 可写，记录需要提交的字段、处理字段默认值
|
||||||
|
vars.push(col[props.prop]) |
||||||
|
if (col.value) col.value = this.getDefaultValues(col.value) |
||||||
|
} else { // 不可写，清除校验与默认值
|
||||||
|
if (col.type == 'dynamic') { |
||||||
|
col.children.addBtn = false |
||||||
|
col.children.delBtn = false |
||||||
|
} else { |
||||||
|
col.readonly = true |
||||||
|
col.disabled = true |
||||||
|
} |
||||||
|
delete col.rules |
||||||
|
delete col.value |
||||||
|
} |
||||||
|
if (col.type == 'dynamic') { // 处理子表单
|
||||||
|
col.children.column = this.filterAvueColumn(col.children.column, taskForm).column |
||||||
|
} |
||||||
|
values.push(col) |
||||||
|
} |
||||||
|
}) |
||||||
|
return { column: values, vars } |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 获取流程发起表单 |
||||||
|
* @param processId 流程定义id |
||||||
|
* @returns Promise({"process": "流程定义信息", "startForm": "开始节点表单"}) |
||||||
|
*/ |
||||||
|
getStartForm(processId) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
getFormByProcessId({ processId }).then(res => { |
||||||
|
const { process } = res.data.data |
||||||
|
this.process = process |
||||||
|
this.tag.label = '发起流程 - ' + process.name |
||||||
|
resolve(res.data.data) |
||||||
|
}).catch(() => { |
||||||
|
reject() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 发起流程 |
||||||
|
* @param form {"processId": "流程定义id", ...表单自定义字段变量} |
||||||
|
*/ |
||||||
|
handleStartProcess(form) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
startProcess(form).then(() => { |
||||||
|
resolve() |
||||||
|
}).catch(() => { |
||||||
|
reject() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 获取流程任务详情 |
||||||
|
* @param taskId 任务id |
||||||
|
* @param processInsId 流程实例id |
||||||
|
* @returns Promise({"process": "流程实例信息", "form": "表单信息", "flow": "流转信息", "button": "配置按钮信息", "bpmnOption": "流程图配置"}) |
||||||
|
*/ |
||||||
|
getTaskDetail(taskId, processInsId) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
detail({ taskId, processInsId }).then(res => { |
||||||
|
const { process, form, flow, button } = res.data.data |
||||||
|
const { xml } = process |
||||||
|
|
||||||
|
const flows = [] |
||||||
|
flow.forEach(f => { |
||||||
|
const ff = { |
||||||
|
id: f.historyActivityId |
||||||
|
} |
||||||
|
if (f.historyActivityType == 'sequenceFlow') ff.class = "lineWarn" |
||||||
|
else ff.class = "nodeWarn" |
||||||
|
flows.push(ff) |
||||||
|
}) |
||||||
|
|
||||||
|
const bpmnOption = { |
||||||
|
mode: 'view', xml, flows |
||||||
|
} |
||||||
|
this.process = process |
||||||
|
this.flow = flow |
||||||
|
this.buttonList = button |
||||||
|
this.bpmnOption = bpmnOption |
||||||
|
this.tag.label = '流程详情 - ' + process.processDefinitionName |
||||||
|
resolve({ process, form, flow, button, bpmnOption }) |
||||||
|
}).catch(() => { |
||||||
|
reject() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 任务审核 |
||||||
|
* @param pass 驳回/通过 |
||||||
|
*/ |
||||||
|
handleCompleteTask(pass, variables) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
const { comment, copyUser, assignee } = this.$refs.examineForm.examineForm |
||||||
|
if (!pass && !comment) { |
||||||
|
this.$message.error("请填写批复意见") |
||||||
|
this.submitLoading = false |
||||||
|
reject() |
||||||
|
return |
||||||
|
} |
||||||
|
const { taskId, processInstanceId, processDefinitionName, processDefinitionId } = this.process |
||||||
|
const param = { |
||||||
|
taskId, processInstanceId, processDefinitionName, processDefinitionId, pass, |
||||||
|
comment, copyUser, assignee, variables |
||||||
|
} |
||||||
|
completeTask(param).then(() => { |
||||||
|
resolve() |
||||||
|
}).catch(() => { |
||||||
|
reject() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 驳回到指定节点 |
||||||
|
* @param nodeId 节点id |
||||||
|
*/ |
||||||
|
handleRollbackTask(nodeId) { |
||||||
|
const { taskId } = this.process |
||||||
|
rollbackTask({ comment: this.comment, nodeId, taskId }).then(() => { |
||||||
|
this.$message.success("回退成功") |
||||||
|
this.handleCloseTag('/plugin/workflow/process/todo') |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 终止流程 |
||||||
|
*/ |
||||||
|
handleTerminateProcess() { |
||||||
|
const comment = this.comment |
||||||
|
if (!comment) { |
||||||
|
this.$message.error("请填写批复意见") |
||||||
|
return |
||||||
|
} |
||||||
|
this.$confirm('确定要终止此流程吗?', '警告', { |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
const { taskId } = this.process |
||||||
|
|
||||||
|
terminateProcess({ taskId, comment }).then(() => { |
||||||
|
this.$message.success("操作成功") |
||||||
|
this.handleCloseTag('/plugin/workflow/process/todo') |
||||||
|
}) |
||||||
|
}).catch(() => { |
||||||
|
|
||||||
|
}) |
||||||
|
}, |
||||||
|
// 人员选择弹窗
|
||||||
|
handleUserSelect({ type, checkType }) { |
||||||
|
if (!this.comment && ['transfer', 'delegate'].includes(type)) { |
||||||
|
this.$message.error("请填写批复意见") |
||||||
|
return |
||||||
|
} |
||||||
|
this.$refs['user-select'].visible = true |
||||||
|
this.userSelectType = type |
||||||
|
this.checkType = checkType |
||||||
|
}, |
||||||
|
// 选人回调
|
||||||
|
handleUserSelectConfirm(id, name) { |
||||||
|
const { comment, copyUser } = this.$refs.examineForm.examineForm |
||||||
|
const { taskId, processInstanceId, processDefinitionName, processDefinitionId } = this.process |
||||||
|
|
||||||
|
const type = this.userSelectType |
||||||
|
const param = { |
||||||
|
taskId, processInstanceId, processDefinitionName, processDefinitionId, |
||||||
|
assignee: id, |
||||||
|
comment, copyUser |
||||||
|
} |
||||||
|
if (type == 'transfer') { |
||||||
|
transferTask(param).then(() => { // 转办
|
||||||
|
this.$message.success("转办成功") |
||||||
|
this.handleCloseTag('/plugin/workflow/process/todo') |
||||||
|
}) |
||||||
|
} else if (type == 'delegate') { // 委托
|
||||||
|
delegateTask(param).then(() => { |
||||||
|
this.$message.success("委托成功") |
||||||
|
this.handleCloseTag('/plugin/workflow/process/todo') |
||||||
|
}) |
||||||
|
} else if (type == 'copy') { // 抄送
|
||||||
|
this.$refs.examineForm.examineForm.copyUser = id |
||||||
|
this.$refs.examineForm.examineForm.$copyUser = name |
||||||
|
} else if (type == 'assignee') { // 指定下一步审批人
|
||||||
|
this.$refs.examineForm.examineForm.assignee = id |
||||||
|
this.$refs.examineForm.examineForm.$assignee = name |
||||||
|
} |
||||||
|
this.$refs['user-select'].visible = false |
||||||
|
}, |
||||||
|
handlePrint() { //打印
|
||||||
|
// this.watermark({ text: this.watermarkText })
|
||||||
|
Print(this.$refs.printBody) |
||||||
|
}, |
||||||
|
// 关闭当前tag，并跳转
|
||||||
|
handleCloseTag(path) { |
||||||
|
this.$store.commit('DEL_TAG', this.tag) |
||||||
|
if (path) this.$router.push(path) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div style="height: 120px;"></div> |
||||||
|
<el-row class="foot-item avue-affix" |
||||||
|
:style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }" |
||||||
|
id="avue-view"> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_pass')" |
||||||
|
type="success" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="$emit('examine', true)">通过</el-button> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_reject')" |
||||||
|
type="danger" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="$emit('examine', false)">驳回</el-button> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_transfer')" |
||||||
|
type="primary" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="$emit('user-select', {type: 'transfer', checkType: 'radio'})">转办</el-button> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_delegate')" |
||||||
|
type="warning" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="$emit('user-select', {type: 'delegate', checkType: 'radio'})">委托</el-button> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_print')" |
||||||
|
type="info" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="$emit('print')">打印</el-button> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_print')" |
||||||
|
type="success" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="handleRollback">指定回退</el-button> |
||||||
|
<el-button v-if="buttonList.find(b => b.key == 'wf_terminate')" |
||||||
|
type="danger" |
||||||
|
size="medium" |
||||||
|
v-loading="loading" |
||||||
|
@click="$emit('terminate')">终止</el-button> |
||||||
|
</el-row> |
||||||
|
<el-dialog :visible.sync="nodeVisible" |
||||||
|
append-to-body |
||||||
|
title="选择回退节点"> |
||||||
|
<avue-form v-if="nodeVisible" |
||||||
|
v-model="nodeForm" |
||||||
|
:option="nodeOption" |
||||||
|
@submit="handleNodeSubmit"></avue-form> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { backNodes } from '@/api/plugin/workflow/process' |
||||||
|
|
||||||
|
import { mapGetters } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'wf-button', |
||||||
|
computed: { |
||||||
|
...mapGetters(['isCollapse']), |
||||||
|
}, |
||||||
|
props: { |
||||||
|
loading: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
buttonList: { |
||||||
|
type: Array, |
||||||
|
default: () => { |
||||||
|
return [] |
||||||
|
} |
||||||
|
}, |
||||||
|
process: Object, |
||||||
|
comment: String |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
nodeVisible: false, |
||||||
|
nodeForm: {}, |
||||||
|
nodeOption: { |
||||||
|
column: [{ |
||||||
|
label: '节点', |
||||||
|
prop: 'nodeId', |
||||||
|
type: 'select', |
||||||
|
props: { |
||||||
|
label: 'nodeName', |
||||||
|
value: 'nodeId' |
||||||
|
}, |
||||||
|
span: 24, |
||||||
|
rules: [{ required: true, message: '请选择回退节点', trigger: 'change' }] |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleRollback() { // 指定回退 |
||||||
|
if (!this.comment) { |
||||||
|
this.$message.error("请填写批复意见") |
||||||
|
return |
||||||
|
} |
||||||
|
const { taskId } = this.process |
||||||
|
backNodes({ taskId }).then(res => { |
||||||
|
this.findObject(this.nodeOption.column, 'nodeId').dicData = res.data.data |
||||||
|
this.nodeVisible = true |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleNodeSubmit() { // 指定回退确定 |
||||||
|
const { nodeId } = this.nodeForm |
||||||
|
this.$emit('rollback', nodeId) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.foot-item { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
margin-left: -20px; |
||||||
|
// right: 0; |
||||||
|
z-index: 101; |
||||||
|
height: 66px; |
||||||
|
background-color: #fff; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
-webkit-transition: 0.3s; |
||||||
|
transition: 0.3s; |
||||||
|
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
<template> |
||||||
|
<avue-form v-model="examineForm" |
||||||
|
ref="examineForm" |
||||||
|
:option="examineOption"></avue-form> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'wf-exam-form', |
||||||
|
props: { |
||||||
|
process: { |
||||||
|
type: Object, |
||||||
|
default: () => { |
||||||
|
return {} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
process: { |
||||||
|
handler(val) { |
||||||
|
if (!val) return |
||||||
|
if (val.hideCopy) { |
||||||
|
this.findObject(this.examineOption.column, '$copyUser').display = false |
||||||
|
} |
||||||
|
if (val.hideExamine) { |
||||||
|
this.findObject(this.examineOption.column, '$assignee').display = false |
||||||
|
} |
||||||
|
}, |
||||||
|
deep: true, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
examineForm: {}, |
||||||
|
examineOption: { |
||||||
|
menuBtn: false, |
||||||
|
column: [{ |
||||||
|
label: '批复意见', |
||||||
|
prop: 'comment', |
||||||
|
type: 'textarea', |
||||||
|
span: 24, |
||||||
|
event: { |
||||||
|
change: (val) => { |
||||||
|
this.$emit('update:comment', val) |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
label: '抄送人', |
||||||
|
prop: '$copyUser', |
||||||
|
placeholder: '请选择 抄送人', |
||||||
|
readonly: true, |
||||||
|
append: '+', |
||||||
|
span: 24, |
||||||
|
event: { |
||||||
|
click: () => { |
||||||
|
this.$emit('user-select', { type: 'copy', checkType: 'checkbox' }) |
||||||
|
} |
||||||
|
} |
||||||
|
}, { |
||||||
|
label: '指定审批人', |
||||||
|
prop: '$assignee', |
||||||
|
placeholder: '请选择 下一级审批人，如不选择则使用默认处理人，驳回时无效', |
||||||
|
readonly: true, |
||||||
|
append: '+', |
||||||
|
span: 24, |
||||||
|
event: { |
||||||
|
click: () => { |
||||||
|
this.$emit('user-select', { type: 'assignee', checkType: 'radio' }) |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getComment() { |
||||||
|
return this.examineForm.comment |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<template> |
||||||
|
<el-row type="flex"> |
||||||
|
<el-timeline> |
||||||
|
<template v-for="item in flow"> |
||||||
|
<el-timeline-item v-if="item.historyActivityType != 'sequenceFlow'" |
||||||
|
:key="item.id" |
||||||
|
:timestamp="item.endTime || item.createTime" |
||||||
|
placement="top"> |
||||||
|
<el-card shadow="never"> |
||||||
|
<p>{{item.assigneeName}} 在 [{{item.createTime}}] 开始处理 [{{item.historyActivityName}}] 环节</p> |
||||||
|
<p v-if="item.historyActivityDurationTime">任务历时 [{{item.historyActivityDurationTime}}]</p> |
||||||
|
<p v-if="item.commentObj && item.commentObj.type == 'transferComment'">转办意见: [{{item.comment}}]</p> |
||||||
|
<p v-if="item.commentObj && item.commentObj.type == 'delegateComment'">委托意见: [{{item.comment}}]</p> |
||||||
|
<p v-if="item.commentObj && item.commentObj.type == 'rollbackComment'">驳回意见: [{{item.comment}}]</p> |
||||||
|
<p v-if="item.commentObj && item.commentObj.type == 'terminateComment'">终止意见: [{{item.comment}}]</p> |
||||||
|
<p v-if="item.commentObj && item.commentObj.type == 'comment'">审批意见: [{{item.comment}}]</p> |
||||||
|
<p v-if="item.endTime">结束时间: [{{item.endTime}}]</p> |
||||||
|
</el-card> |
||||||
|
</el-timeline-item> |
||||||
|
</template> |
||||||
|
</el-timeline> |
||||||
|
</el-row> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'wf-flow', |
||||||
|
props: { |
||||||
|
flow: { |
||||||
|
type: Array, |
||||||
|
default: () => { |
||||||
|
return [] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
@ -0,0 +1,230 @@ |
|||||||
|
<template> |
||||||
|
<basic-container> |
||||||
|
<avue-affix id="avue-view" |
||||||
|
:offset-top="116"> |
||||||
|
<div class="header"> |
||||||
|
<avue-title :value="process.processDefinitionName"></avue-title> |
||||||
|
</div> |
||||||
|
</avue-affix> |
||||||
|
<el-tabs v-model="activeName"> |
||||||
|
<el-tab-pane label="申请信息" |
||||||
|
name="first"> |
||||||
|
<el-card shadow="never"> |
||||||
|
<div ref="printBody"> |
||||||
|
<avue-form v-if="showForm" |
||||||
|
v-model="form" |
||||||
|
ref="form" |
||||||
|
:option="option"> |
||||||
|
</avue-form> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<el-card shadow="never" |
||||||
|
style="margin-top: 20px" |
||||||
|
v-if="process.status == 'todo'"> |
||||||
|
<wf-examine-form ref="examineForm" |
||||||
|
:comment.sync="comment" |
||||||
|
@user-select="handleUserSelect"></wf-examine-form> |
||||||
|
</el-card> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="流转信息" |
||||||
|
name="second"> |
||||||
|
<el-card shadow="never" |
||||||
|
style="margin-top: 5px;"> |
||||||
|
<wf-flow :flow="flow"></wf-flow> |
||||||
|
</el-card> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="流程跟踪" |
||||||
|
name="third"> |
||||||
|
<template v-if="activeName == 'third'"> |
||||||
|
<el-card shadow="never" |
||||||
|
style="margin-top: 5px;"> |
||||||
|
<wf-design ref="bpmn" |
||||||
|
style="height: 500px;" |
||||||
|
:options="bpmnOption"></wf-design> |
||||||
|
</el-card> |
||||||
|
</template> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
|
||||||
|
<!-- 底部按钮 --> |
||||||
|
<template v-if="process.status == 'todo'"> |
||||||
|
<wf-button :loading="submitLoading" |
||||||
|
:button-list="buttonList" |
||||||
|
:process="process" |
||||||
|
:comment="comment" |
||||||
|
@examine="handleExamine" |
||||||
|
@user-select="handleUserSelect" |
||||||
|
@print="handlePrint" |
||||||
|
@rollback="handleRollbackTask" |
||||||
|
@terminate="handleTerminateProcess"></wf-button> |
||||||
|
</template> |
||||||
|
<!-- 人员选择弹窗 --> |
||||||
|
<user-select ref="user-select" |
||||||
|
:check-type="checkType" |
||||||
|
@onConfirm="handleUserSelectConfirm"></user-select> |
||||||
|
<!-- 选择回退节点弹窗 --> |
||||||
|
<el-dialog :visible.sync="nodeVisible" |
||||||
|
append-to-body |
||||||
|
title="选择回退节点"> |
||||||
|
<avue-form v-model="nodeForm" |
||||||
|
:option="nodeOption" |
||||||
|
@submit="handleNodeSubmit"></avue-form> |
||||||
|
</el-dialog> |
||||||
|
</basic-container> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import WfExamineForm from '@/views/plugin/workflow/process/components/examForm.vue' |
||||||
|
import WfButton from '@/views/plugin/workflow/process/components/button.vue' |
||||||
|
import WfFlow from '@/views/plugin/workflow/process/components/flow.vue' |
||||||
|
import userSelect from '@/views/plugin/workflow/process/components/user-select' |
||||||
|
|
||||||
|
import exForm from '@/views/plugin/workflow/mixins/ex-form' |
||||||
|
|
||||||
|
export default { |
||||||
|
mixins: [exForm], |
||||||
|
components: { userSelect, WfExamineForm, WfButton, WfFlow }, |
||||||
|
watch: { |
||||||
|
'$route.query.p': { |
||||||
|
handler(val) { |
||||||
|
if (val) { |
||||||
|
const param = JSON.parse(Buffer.from(val, 'base64').toString()) |
||||||
|
const { taskId, processInsId } = param |
||||||
|
if (taskId && processInsId) this.getDetail(taskId, processInsId) |
||||||
|
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: 'first', |
||||||
|
showForm: false, |
||||||
|
form: {}, |
||||||
|
option: { |
||||||
|
column: [{ |
||||||
|
label: '请假时间', |
||||||
|
prop: 'datetime', |
||||||
|
type: 'datetimerange', |
||||||
|
format: 'yyyy-MM-dd HH:mm:ss', |
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss', |
||||||
|
rules: [{ required: true, message: '请选择请假时间' }] |
||||||
|
}, { |
||||||
|
label: '请假天数', |
||||||
|
prop: 'days', |
||||||
|
type: 'number', |
||||||
|
rules: [{ required: true, message: '请输入请假天数' }] |
||||||
|
}, { |
||||||
|
label: '请假理由', |
||||||
|
prop: 'reason', |
||||||
|
type: 'textarea', |
||||||
|
span: 24, |
||||||
|
rules: [{ required: true, message: '请输入请假理由' }] |
||||||
|
}] |
||||||
|
}, |
||||||
|
vars: [], // 需要提交的字段 |
||||||
|
submitLoading: false, // 提交时按钮loading |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取任务详情 |
||||||
|
getDetail(taskId, processInsId) { |
||||||
|
this.getTaskDetail(taskId, processInsId).then(res => { |
||||||
|
const { process, form } = res |
||||||
|
const { variables, status } = process |
||||||
|
|
||||||
|
let { taskForm } = form |
||||||
|
const option = this.option |
||||||
|
option.menuBtn = false |
||||||
|
const { column, group } = option |
||||||
|
if (status != 'todo') { // 已办，删除字段默认值 |
||||||
|
option.detail = true |
||||||
|
if (column && column.length > 0) { // 处理column |
||||||
|
column.forEach(col => { |
||||||
|
if (col.type == 'dynamic') col.children.column.forEach(cc => delete cc.value) |
||||||
|
else delete col.value |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (group && group.length > 0) { // 处理group |
||||||
|
group.forEach(gro => { |
||||||
|
if (gro.column && gro.column.length > 0) { |
||||||
|
gro.column.forEach(col => { |
||||||
|
if (col.type == 'dynamic') col.children.column.forEach(cc => delete cc.value) |
||||||
|
else delete col.value |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} else { |
||||||
|
const columnFilter = this.filterAvueColumn(column, taskForm) |
||||||
|
const columnArr = columnFilter.column |
||||||
|
let vars = columnFilter.vars |
||||||
|
|
||||||
|
const groupArr = [] |
||||||
|
if (group && group.length > 0) { // 处理group |
||||||
|
group.forEach(gro => { |
||||||
|
const groupFilter = this.filterAvueColumn(gro.column, taskForm) |
||||||
|
gro.column = groupFilter.column |
||||||
|
vars = vars.conact(groupFilter.vars) |
||||||
|
if (gro.column.length > 0) groupArr.push(gro) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (process.variables && process.variables.serialNumber) { |
||||||
|
columnArr.unshift({ |
||||||
|
label: '流水号', |
||||||
|
prop: 'serialNumber', |
||||||
|
span: 24, |
||||||
|
detail: true, |
||||||
|
}) |
||||||
|
} |
||||||
|
option.column = columnArr |
||||||
|
option.group = groupArr |
||||||
|
this.vars = vars |
||||||
|
} |
||||||
|
for (let key in variables) { |
||||||
|
if (!variables[key]) delete variables[key] |
||||||
|
} |
||||||
|
|
||||||
|
this.option = option |
||||||
|
this.form = variables |
||||||
|
this.showForm = true |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 审核 |
||||||
|
handleExamine(pass) { |
||||||
|
this.submitLoading = true |
||||||
|
this.$refs.form.validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
const variables = {} |
||||||
|
this.vars.forEach(v => { |
||||||
|
if (v != 'comment' && this.form[v]) variables[v] = this.form[v] |
||||||
|
}) |
||||||
|
|
||||||
|
this.handleCompleteTask(pass, variables).then(() => { |
||||||
|
this.$message.success("处理成功") |
||||||
|
this.handleCloseTag('/plugin/workflow/process/todo') |
||||||
|
}).catch(() => { |
||||||
|
this.submitLoading = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.submitLoading = false |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.header { |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0 10px 10px 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<template> |
||||||
|
<basic-container> |
||||||
|
<avue-title style="margin-bottom: 20px; " |
||||||
|
:styles="{fontSize: '20px'}" |
||||||
|
:value="process.name"></avue-title> |
||||||
|
<!-- 自定义表单区域 --> |
||||||
|
<avue-form v-if="option && ((option.column && option.column.length > 0) || (option.group && option.group.length > 0))" |
||||||
|
v-model="form" |
||||||
|
ref="form" |
||||||
|
:option="option" |
||||||
|
@submit="handleSubmit"> |
||||||
|
</avue-form> |
||||||
|
<!-- 自定义表单区域 --> |
||||||
|
</basic-container> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import exForm from '@/views/plugin/workflow/mixins/ex-form' |
||||||
|
|
||||||
|
export default { |
||||||
|
mixins: [exForm], |
||||||
|
watch: { |
||||||
|
'$route.query.p': { |
||||||
|
handler(val) { |
||||||
|
if (val) { |
||||||
|
const param = JSON.parse(Buffer.from(val, 'base64').toString()) |
||||||
|
const { processId } = param |
||||||
|
if (processId) this.getForm(processId) |
||||||
|
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: {}, |
||||||
|
option: { |
||||||
|
column: [{ |
||||||
|
label: '请假时间', |
||||||
|
prop: 'datetime', |
||||||
|
type: 'datetimerange', |
||||||
|
format: 'yyyy-MM-dd HH:mm:ss', |
||||||
|
valueFormat: 'yyyy-MM-dd HH:mm:ss', |
||||||
|
rules: [{ required: true, message: '请选择请假时间' }] |
||||||
|
}, { |
||||||
|
label: '请假天数', |
||||||
|
prop: 'days', |
||||||
|
type: 'number', |
||||||
|
rules: [{ required: true, message: '请输入请假天数' }] |
||||||
|
}, { |
||||||
|
label: '请假理由', |
||||||
|
prop: 'reason', |
||||||
|
type: 'textarea', |
||||||
|
span: 24, |
||||||
|
rules: [{ required: true, message: '请输入请假理由' }] |
||||||
|
}] |
||||||
|
}, |
||||||
|
process: {} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getForm(processId) { |
||||||
|
this.getStartForm(processId).then(res => { |
||||||
|
let { process, startForm } = res |
||||||
|
this.process = process |
||||||
|
this.form.processId = process.id |
||||||
|
|
||||||
|
if (startForm && startForm.length > 0) { |
||||||
|
const option = this.option |
||||||
|
const { column, group } = option |
||||||
|
|
||||||
|
const groupArr = [] |
||||||
|
const columnArr = this.filterAvueColumn(column, startForm).column |
||||||
|
if (group && group.length > 0) { // 处理group |
||||||
|
group.forEach(gro => { |
||||||
|
gro.column = this.filterAvueColumn(gro.column, startForm).column |
||||||
|
if (gro.column.length > 0) groupArr.push(gro) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
option.column = columnArr |
||||||
|
option.group = groupArr |
||||||
|
this.option = option |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleSubmit(form, done) { |
||||||
|
this.handleStartProcess(form).then(() => { |
||||||
|
this.$message.success("发起成功") |
||||||
|
done() |
||||||
|
this.handleCloseTag('/plugin/workflow/process/send') |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
<template> |
||||||
|
<basic-container> |
||||||
|
<avue-affix id="avue-view" |
||||||
|
:offset-top="116"> |
||||||
|
<div class="header"> |
||||||
|
<avue-title :value="process.processDefinitionName"></avue-title> |
||||||
|
</div> |
||||||
|
</avue-affix> |
||||||
|
<el-tabs v-model="activeName"> |
||||||
|
<el-tab-pane label="申请信息" |
||||||
|
name="first"> |
||||||
|
<el-card shadow="never"> |
||||||
|
<div ref="printBody"> |
||||||
|
<!-- 自定义表单区域 --> |
||||||
|
|
||||||
|
<!-- 自定义表单区域 --> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
<!-- 审批意见表单 --> |
||||||
|
<el-card shadow="never" |
||||||
|
style="margin-top: 20px" |
||||||
|
v-if="process.status == 'todo'"> |
||||||
|
<wf-examine-form ref="examineForm" |
||||||
|
:comment.sync="comment" |
||||||
|
@user-select="handleUserSelect"></wf-examine-form> |
||||||
|
</el-card> |
||||||
|
</el-tab-pane> |
||||||
|
<!-- 流转信息 --> |
||||||
|
<el-tab-pane label="流转信息" |
||||||
|
name="second"> |
||||||
|
<el-card shadow="never" |
||||||
|
style="margin-top: 5px;"> |
||||||
|
<wf-flow :flow="flow"></wf-flow> |
||||||
|
</el-card> |
||||||
|
</el-tab-pane> |
||||||
|
<!-- 流程图 --> |
||||||
|
<el-tab-pane label="流程跟踪" |
||||||
|
name="third"> |
||||||
|
<template v-if="activeName == 'third'"> |
||||||
|
<el-card shadow="never" |
||||||
|
style="margin-top: 5px;"> |
||||||
|
<wf-design ref="bpmn" |
||||||
|
style="height: 500px;" |
||||||
|
:options="bpmnOption"></wf-design> |
||||||
|
</el-card> |
||||||
|
</template> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
|
||||||
|
<!-- 底部按钮 --> |
||||||
|
<template v-if="process.status == 'todo'"> |
||||||
|
<wf-button :loading="submitLoading" |
||||||
|
:button-list="buttonList" |
||||||
|
:process="process" |
||||||
|
:comment="comment" |
||||||
|
@examine="handleExamine" |
||||||
|
@user-select="handleUserSelect" |
||||||
|
@print="handlePrint" |
||||||
|
@rollback="handleRollbackTask" |
||||||
|
@terminate="handleTerminateProcess"></wf-button> |
||||||
|
</template> |
||||||
|
<!-- 人员选择弹窗 --> |
||||||
|
<user-select ref="user-select" |
||||||
|
:check-type="checkType" |
||||||
|
@onConfirm="handleUserSelectConfirm"></user-select> |
||||||
|
</basic-container> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import WfExamineForm from '@/views/plugin/workflow/process/components/examForm.vue' |
||||||
|
import WfButton from '@/views/plugin/workflow/process/components/button.vue' |
||||||
|
import WfFlow from '@/views/plugin/workflow/process/components/flow.vue' |
||||||
|
import userSelect from '@/views/plugin/workflow/process/components/user-select' |
||||||
|
|
||||||
|
import exForm from '@/views/plugin/workflow/mixins/ex-form' |
||||||
|
|
||||||
|
export default { |
||||||
|
mixins: [exForm], |
||||||
|
components: { userSelect, WfExamineForm, WfButton, WfFlow }, |
||||||
|
watch: { |
||||||
|
'$route.query.p': { |
||||||
|
handler(val) { |
||||||
|
if (val) { |
||||||
|
const param = JSON.parse(Buffer.from(val, 'base64').toString()) |
||||||
|
const { taskId, processInsId } = param |
||||||
|
if (taskId && processInsId) this.getDetail(taskId, processInsId) |
||||||
|
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: 'first', |
||||||
|
form: {}, |
||||||
|
option: {}, // 表单配置 |
||||||
|
vars: [], // 需要提交的字段 |
||||||
|
submitLoading: false, // 提交时按钮loading |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取任务详情 |
||||||
|
getDetail(taskId, processInsId) { |
||||||
|
this.getTaskDetail(taskId, processInsId).then(res => { |
||||||
|
const { process, form } = res |
||||||
|
const { variables, status } = process |
||||||
|
|
||||||
|
let { taskForm } = form |
||||||
|
console.log("process", process) |
||||||
|
console.log("taskForm", taskForm) |
||||||
|
console.log("variables", variables) |
||||||
|
console.log("status", status) // todo待办 done已办 |
||||||
|
|
||||||
|
// 自行处理相关逻辑 |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 审核 |
||||||
|
handleExamine(pass) { |
||||||
|
this.submitLoading = true |
||||||
|
this.$refs.form.validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
const variables = {} |
||||||
|
this.vars.forEach(v => { |
||||||
|
if (v != 'comment' && this.form[v]) variables[v] = this.form[v] |
||||||
|
}) |
||||||
|
|
||||||
|
this.handleCompleteTask(pass, variables).then(() => { |
||||||
|
this.$message.success("处理成功") |
||||||
|
this.handleCloseTag('/plugin/workflow/process/todo') |
||||||
|
}).catch(() => { |
||||||
|
this.submitLoading = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.submitLoading = false |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.header { |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0 10px 10px 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
<template> |
||||||
|
<basic-container> |
||||||
|
<avue-title style="margin-bottom: 20px; " |
||||||
|
:styles="{fontSize: '20px'}" |
||||||
|
:value="process.name"></avue-title> |
||||||
|
<!-- 自定义表单区域 --> |
||||||
|
|
||||||
|
|
||||||
|
<!-- 自定义表单区域 --> |
||||||
|
</basic-container> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import exForm from '@/views/plugin/workflow/mixins/ex-form' |
||||||
|
|
||||||
|
export default { |
||||||
|
mixins: [exForm], |
||||||
|
watch: { |
||||||
|
'$route.query.p': { |
||||||
|
handler(val) { |
||||||
|
if (val) { |
||||||
|
const param = JSON.parse(Buffer.from(val, 'base64').toString()) |
||||||
|
const { processId } = param |
||||||
|
if (processId) this.getForm(processId) |
||||||
|
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: {}, |
||||||
|
option: {}, |
||||||
|
process: {} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getForm(processId) { |
||||||
|
this.getStartForm(processId).then(res => { |
||||||
|
let { process, startForm } = res |
||||||
|
console.log("process", process) |
||||||
|
console.log("startForm", startForm) |
||||||
|
// 自行处理相关逻辑 |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleSubmit(form, done) { |
||||||
|
this.handleStartProcess(form).then(() => { |
||||||
|
this.$message.success("发起成功") |
||||||
|
done() |
||||||
|
this.handleCloseTag('/plugin/workflow/process/send') |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
Loading…
Reference in new issue