243 lines
7.2 KiB
Vue
243 lines
7.2 KiB
Vue
<template>
|
|
<div>
|
|
<!-- :is="mode === 'dialog' ? 'el-dialog' : 'div'"-->
|
|
<!-- title="详情" v-bind="$attrs"-->
|
|
<div v-if="visible">
|
|
<el-tabs v-model="tabActive">
|
|
<el-tab-pane name="info" label="基本信息">
|
|
<slot name="businessInfo"></slot>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="processRecords" label="审批记录">
|
|
<slot name="processRecords"></slot>
|
|
</el-tab-pane>
|
|
<el-tab-pane name="approvalChart" label="流程跟踪">
|
|
<snaker-flow-designer
|
|
style="height: 600px"
|
|
v-model="flowData"
|
|
v-if="visible"
|
|
:show-doc="false"
|
|
:viewer="true"
|
|
nodeRenderType="html"
|
|
:wfConfig="{
|
|
showHelp: false
|
|
}"
|
|
:high-light="highLight"
|
|
></snaker-flow-designer>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-row
|
|
class="audit-wrap"
|
|
v-if="visible && isAudit && record && record.processTaskState === $processConstant.TASK_STATE.DOING && tabActive !== 'approvalChart'"
|
|
>
|
|
<div class="left-span-label" style="margin-top: 20px; margin-bottom: 20px">
|
|
{{ record.processTaskDisplayName }}
|
|
</div>
|
|
<slot name="form"></slot>
|
|
<el-row type="flex" justify="end" class="flow-button-wrap">
|
|
<el-button
|
|
@click="
|
|
visible = false
|
|
$emit('close')
|
|
"
|
|
size="small"
|
|
>
|
|
取消
|
|
</el-button>
|
|
<button
|
|
v-for="item in buttons"
|
|
:key="item.type"
|
|
class="task-button"
|
|
:style="buttonStyle(item)"
|
|
@click="buttonClick(item)"
|
|
@mouseenter="buttonMouseEnter($event, item)"
|
|
@mouseleave="buttonMouseLeave($event, item)"
|
|
>
|
|
{{ item.replaceText || item.text }}
|
|
</button>
|
|
</el-row>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "flowAuditIndex",
|
|
props: {
|
|
form_valid_success: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
//监听父组件的表单是否验证成功
|
|
form_valid_success(val) {
|
|
if (val) {
|
|
this.buttonClick(this.currentClickButton)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
tabActive: "info",
|
|
//是否需要审核
|
|
isAudit: false,
|
|
// 回退列表数据
|
|
returnTaskList: [],
|
|
//回退弹窗
|
|
returnOpen: false,
|
|
//任务记录
|
|
record: {},
|
|
//审核按钮列表
|
|
buttons: [],
|
|
//任务表单
|
|
taskForm: {},
|
|
//当前点击的按钮
|
|
currentClickButton: {},
|
|
//流程数据
|
|
flowData: {},
|
|
//高亮数据
|
|
highLight: {}
|
|
}
|
|
},
|
|
methods: {
|
|
buttonStyle(item) {
|
|
return {
|
|
background: item.color
|
|
}
|
|
},
|
|
buttonMouseEnter($event, item) {
|
|
console.log($event)
|
|
console.log(item)
|
|
},
|
|
buttonMouseLeave() {},
|
|
|
|
onOpen(record, isAudit = false) {
|
|
this.isAudit = isAudit
|
|
this.record = record
|
|
this.getApprovalChart(record.processInstId)
|
|
if (isAudit) {
|
|
this.getButtons()
|
|
}
|
|
},
|
|
//关闭
|
|
onClose() {
|
|
this.visible = false
|
|
},
|
|
//流程图数据
|
|
getApprovalChart(id) {
|
|
$.get("/platform/wf/processCommon/processJsonHighLight", { id }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.flowData = res.data.instJson
|
|
this.highLight = res.data.highLight
|
|
this.visible = true
|
|
}
|
|
})
|
|
},
|
|
|
|
getButtons() {
|
|
const { processTaskName, processDefineId } = this.record
|
|
$.get("/platform/wf/processCommon/listButtonByTaskName", {
|
|
defineId: processDefineId,
|
|
taskName: processTaskName
|
|
}).then((res) => {
|
|
if (res.code === 0) {
|
|
this.buttons = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
buttonClick(item) {
|
|
this.currentClickButton = item
|
|
this.$emit("form_valid", item.type)
|
|
if (!this.form_valid_success) return
|
|
|
|
//指定下一节点审批人 只有在同意的情况下
|
|
// if (!["AGREE"].includes(item.type)) {
|
|
// }
|
|
|
|
// if (item.type === "JUMP") {
|
|
// return
|
|
// }
|
|
if (this.form_valid_success) {
|
|
this.submitTask()
|
|
}
|
|
},
|
|
|
|
submitReturn() {
|
|
this.$refs.taskFormRef.validate((valid) => {
|
|
if (valid) {
|
|
this.returnOpen = false
|
|
this.submitTask()
|
|
}
|
|
})
|
|
},
|
|
|
|
submitTask() {
|
|
this.$confirm("您确定要提交吗？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "info"
|
|
})
|
|
.then(() => {
|
|
this.taskForm.processTaskId = this.record.processTaskId
|
|
this.taskForm.processInstId = this.record.processInstId
|
|
this.taskForm.submitType = this.currentClickButton.code
|
|
this.$emit("form_confirm", this.taskForm)
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.audit-wrap {
|
|
margin-top: 20px;
|
|
border-top: 1px solid var(--border-color-lighter);
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.flow-button-wrap {
|
|
margin-top: 20px;
|
|
border-top: 1px solid var(--border-color-lighter);
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.el-tabs__content {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-button + .task-button,
|
|
.task-button + .task-button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.task-button {
|
|
display: inline-block;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
/*background: var(--button-default-background-color);*/
|
|
/*border: 1px solid var(--border-color-base);*/
|
|
border: none;
|
|
color: var(--color-white);
|
|
-webkit-appearance: none;
|
|
text-align: center;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
outline: none;
|
|
margin: 0;
|
|
-webkit-transition: 0.1s;
|
|
transition: 0.1s;
|
|
font-weight: 500;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
padding: 9px 15px;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|