first commit
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
{{ formKey }}
|
||||
<el-button type="primary" v-for="item in buttons" :key="item.name" @click="buttonClick(item)" size="small">
|
||||
{{ item.name }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "index",
|
||||
props: {
|
||||
taskId: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
formKey: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
buttons: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getButtons() {
|
||||
$.get("/platform/flow/common/loadSequenceFlows", { taskId: this.taskId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.buttons = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
buttonClick(item) {
|
||||
this.$root.$refs[this.formKey].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm(`您确定要${item.name}吗,${item.name}后将流转到${item.toNode}，是否继续？`, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "info"
|
||||
})
|
||||
.then(() => {
|
||||
this.$emit("confirm", item.name)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
taskId: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.getButtons()
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,242 @@
|
||||
<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>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="visible">
|
||||
<van-tabs v-model="tabActive">
|
||||
<van-tab name="info" title="基本信息">
|
||||
<slot name="businessInfo"></slot>
|
||||
</van-tab>
|
||||
<van-tab name="processRecords" title="审批记录">
|
||||
<slot name="processRecords"></slot>
|
||||
</van-tab>
|
||||
<van-tab name="approvalChart" title="流程跟踪">
|
||||
<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>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<van-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: 10px; margin-bottom: 10px">
|
||||
<van-text-box type="4" style="padding: 0 10px 0" :title="record.processTaskDisplayName"></van-text-box>
|
||||
</div>
|
||||
<slot name="form"></slot>
|
||||
<van-row type="flex" justify="end" class="flow-button-wrap">
|
||||
<van-button
|
||||
style="margin-right: 5px"
|
||||
@click="
|
||||
visible = false
|
||||
$emit('close')
|
||||
"
|
||||
size="middle"
|
||||
>
|
||||
取消
|
||||
</van-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>
|
||||
</van-row>
|
||||
</van-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "flowH5AuditIndex",
|
||||
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.$dialog
|
||||
.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗?"
|
||||
})
|
||||
.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;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card v-if="!visible">
|
||||
<div></div>
|
||||
2222222222222222222222222222222222222222 2222222222222222222222222222222222222222 2222222222222222222222222222222222222222
|
||||
2222222222222222222222222222222222222222 申请需要的说明 流程图等等等等等等等等等等
|
||||
|
||||
<el-row :gutter="10">
|
||||
<el-button type="primary" @click="onStart">开始申请</el-button>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<template v-if="visible">
|
||||
<slot></slot>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "index",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
taskId: parseInt(GetQueryString("TASK_ID"))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onStart() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: "Loading",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)"
|
||||
})
|
||||
|
||||
$.post(loc() + "/startProcess").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$emit("task_id", res.data.taskId)
|
||||
this.$emit("business_id", res.data.businessId)
|
||||
setTimeout(() => {
|
||||
loading.close()
|
||||
this.visible = true
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.taskId) {
|
||||
this.visible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user