You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
11 KiB
346 lines
11 KiB
5 years ago
|
<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="option && option.column && option.column.length > 0"
|
||
|
|
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'">
|
||
|
|
<avue-form v-model="examineForm"
|
||
|
|
ref="examineForm"
|
||
|
|
:option="examineOption">
|
||
|
|
</avue-form>
|
||
|
|
</el-card>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="流转信息"
|
||
|
|
name="second">
|
||
|
|
<el-card shadow="never"
|
||
|
|
style="margin-top: 5px;">
|
||
|
|
<el-row type="flex"
|
||
|
|
class="row-bg">
|
||
|
|
<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.comment">批复意见: [{{item.comment}}]</p>
|
||
|
|
<p v-if="item.endTime">结束时间: [{{item.endTime}}]</p>
|
||
|
|
</el-card>
|
||
|
|
</el-timeline-item>
|
||
|
|
</template>
|
||
|
|
</el-timeline>
|
||
|
|
</el-row>
|
||
|
|
</el-card>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="流程跟踪"
|
||
|
|
name="third">
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<template v-if="activeName == 'third'">
|
||
|
|
<el-card v-if="process && process.xml"
|
||
|
|
shadow="never"
|
||
|
|
style="margin-top: 5px;">
|
||
|
|
<wf-design ref="bpmn"
|
||
|
|
style="height: 500px;"
|
||
|
|
:options="bpmnOption"></wf-design>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
<template v-if="process.status == 'todo'">
|
||
|
|
<div style="height: 120px;"></div>
|
||
|
|
<el-row class="foot-item avue-affix"
|
||
|
|
id="avue-view">
|
||
|
|
<el-button v-if="buttonList.find(b => b.key == 'wf_pass')"
|
||
|
|
type="success"
|
||
|
|
size="medium"
|
||
|
|
v-loading="submitLoading"
|
||
|
|
@click="handleCompleteTask(true)">通过</el-button>
|
||
|
|
<el-button v-if="buttonList.find(b => b.key == 'wf_reject')"
|
||
|
|
type="danger"
|
||
|
|
size="medium"
|
||
|
|
v-loading="submitLoading"
|
||
|
|
@click="handleCompleteTask(false)">驳回</el-button>
|
||
|
|
<el-button v-if="buttonList.find(b => b.key == 'wf_transfer')"
|
||
|
|
type="warning"
|
||
|
|
size="medium"
|
||
|
|
v-loading="submitLoading"
|
||
|
|
@click="handleUserSelect('transfer')">转办</el-button>
|
||
|
|
<el-button v-if="buttonList.find(b => b.key == 'wf_delegate')"
|
||
|
|
type="warning"
|
||
|
|
size="medium"
|
||
|
|
v-loading="submitLoading"
|
||
|
|
@click="handleUserSelect('delegate')">委托</el-button>
|
||
|
|
<el-button v-if="buttonList.find(b => b.key == 'wf_print')"
|
||
|
|
type="warning"
|
||
|
|
size="medium"
|
||
|
|
v-loading="submitLoading"
|
||
|
|
@click="handlePrint()">打印</el-button>
|
||
|
|
<!-- <el-button type="warning"
|
||
|
|
size="medium"
|
||
|
|
v-loading="submitLoading"
|
||
|
|
@click="handleSelect()">选人</el-button> -->
|
||
|
|
</el-row>
|
||
|
|
</template>
|
||
|
|
<user-select ref="user-select"
|
||
|
|
:select-type="selectType"
|
||
|
|
@onClose="handleClose"
|
||
|
|
@onConfirm="handleConfirm"></user-select>
|
||
|
|
</basic-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { detail, completeTask, transferTask, delegateTask } from '@/api/plugin/workflow/process'
|
||
|
|
import userSelect from './user-select'
|
||
|
|
|
||
|
|
import { mapGetters } from 'vuex'
|
||
|
|
import Print from '../../util/print'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { userSelect },
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['tag', 'userInfo']),
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$route.params.params': {
|
||
|
|
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: {
|
||
|
|
menuBtn: false,
|
||
|
|
},
|
||
|
|
examineForm: {},
|
||
|
|
examineOption: {
|
||
|
|
menuBtn: false,
|
||
|
|
column: [{
|
||
|
|
label: '批复意见',
|
||
|
|
prop: 'comment',
|
||
|
|
type: 'textarea',
|
||
|
|
span: 24,
|
||
|
|
}, {
|
||
|
|
label: '抄送人',
|
||
|
|
prop: '$copyUser',
|
||
|
|
placeholder: '请选择 抄送人',
|
||
|
|
readonly: true,
|
||
|
|
append: '➕',
|
||
|
|
span: 24,
|
||
|
|
event: {
|
||
|
|
click: () => {
|
||
|
|
this.$refs['user-select'].visible = true
|
||
|
|
this.selectType = 'checkbox'
|
||
|
|
this.userSelectType = 'copy'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
label: '指定审批人',
|
||
|
|
prop: '$assignee',
|
||
|
|
placeholder: '请选择 下一级审批人，如不选择则使用默认处理人，驳回时无效',
|
||
|
|
readonly: true,
|
||
|
|
span: 24,
|
||
|
|
event: {
|
||
|
|
click: () => {
|
||
|
|
this.$refs['user-select'].visible = true
|
||
|
|
this.selectType = 'radio'
|
||
|
|
this.userSelectType = 'assignee'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
process: {},
|
||
|
|
flow: [],
|
||
|
|
bpmnOption: {
|
||
|
|
mode: 'view'
|
||
|
|
},
|
||
|
|
vars: [],
|
||
|
|
submitLoading: false,
|
||
|
|
buttonList: [],
|
||
|
|
watermarkText: '', //水印文字
|
||
|
|
userSelectType: '', // transfer转办 delegate委托
|
||
|
|
selectType: 'radio'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.watermarkText = this.userInfo.user_name + " " + this.userInfo.real_name
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDetail(taskId, processInsId) {
|
||
|
|
detail({ taskId, processInsId }).then(res => {
|
||
|
|
const { process, form, flow, button } = res.data.data
|
||
|
|
const { variables, status, xml } = process
|
||
|
|
|
||
|
|
let { allForm, taskForm } = form
|
||
|
|
if (allForm) {
|
||
|
|
const option = eval('(' + allForm + ')')
|
||
|
|
option.menuBtn = false
|
||
|
|
if (status != 'todo') option.detail = true
|
||
|
|
else {
|
||
|
|
const arr = []
|
||
|
|
const vars = []
|
||
|
|
taskForm.forEach(task => {
|
||
|
|
const column = option.column.find(c => c.prop == task.id)
|
||
|
|
if (task.readable && column) {
|
||
|
|
if (!task.writable) {
|
||
|
|
column.readonly = true
|
||
|
|
column.disabled = true
|
||
|
|
} else vars.push(column.prop)
|
||
|
|
}
|
||
|
|
arr.push(column)
|
||
|
|
})
|
||
|
|
option.column = arr
|
||
|
|
this.vars = vars
|
||
|
|
}
|
||
|
|
|
||
|
|
this.option = option
|
||
|
|
this.form = variables
|
||
|
|
this.process = process
|
||
|
|
this.flow = flow
|
||
|
|
this.buttonList = button
|
||
|
|
|
||
|
|
const flows = []
|
||
|
|
flow.forEach(f => {
|
||
|
|
const ff = {
|
||
|
|
id: f.historyActivityId
|
||
|
|
}
|
||
|
|
if (f.historyActivityType == 'sequenceFlow') ff.class = "lineWarn"
|
||
|
|
else ff.class = "nodeWarn"
|
||
|
|
flows.push(ff)
|
||
|
|
})
|
||
|
|
|
||
|
|
this.bpmnOption = {
|
||
|
|
mode: 'view',
|
||
|
|
xml,
|
||
|
|
flows
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleCompleteTask(pass) {
|
||
|
|
this.submitLoading = true
|
||
|
|
|
||
|
|
const { comment, copyUser, assignee } = this.examineForm
|
||
|
|
if (!pass && !comment) {
|
||
|
|
this.$message.error("请填写批复意见")
|
||
|
|
this.submitLoading = false
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$refs.form.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
const variables = {}
|
||
|
|
this.vars.forEach(v => {
|
||
|
|
if (v != 'comment' && this.form[v]) variables[v] = this.form[v]
|
||
|
|
})
|
||
|
|
|
||
|
|
const { taskId, processInstanceId, processDefinitionName } = this.process
|
||
|
|
const params = {
|
||
|
|
taskId, processInstanceId, processDefinitionName, pass,
|
||
|
|
comment, copyUser, assignee, variables
|
||
|
|
}
|
||
|
|
|
||
|
|
completeTask(params).then(() => {
|
||
|
|
this.$message.success("处理成功")
|
||
|
|
this.$store.commit('DEL_TAG', this.tag)
|
||
|
|
this.$router.push("/plugin/workflow/process/todo")
|
||
|
|
}).catch(() => {
|
||
|
|
this.submitLoading = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handlePrint() { //打印
|
||
|
|
// this.watermark({ text: this.watermarkText })
|
||
|
|
Print(this.$refs.printBody)
|
||
|
|
},
|
||
|
|
handleUserSelect(type) { //选人
|
||
|
|
this.$refs['user-select'].visible = true
|
||
|
|
this.userSelectType = type
|
||
|
|
},
|
||
|
|
handleClose() { //关闭选人
|
||
|
|
this.$refs['user-select'].visible = false
|
||
|
|
},
|
||
|
|
handleConfirm(id, name) { //选人回调
|
||
|
|
const type = this.userSelectType
|
||
|
|
const param = {
|
||
|
|
taskId: this.process.taskId,
|
||
|
|
assignee: id
|
||
|
|
}
|
||
|
|
if (type == 'transfer') {
|
||
|
|
transferTask(param).then(() => { // 转办
|
||
|
|
this.$message.success("转办成功")
|
||
|
|
this.$store.commit('DEL_TAG', this.tag)
|
||
|
|
this.$router.push("/plugin/workflow/process/todo")
|
||
|
|
})
|
||
|
|
} else if (type == 'delegate') { // 委托
|
||
|
|
delegateTask(param).then(() => {
|
||
|
|
this.$message.success("委托成功")
|
||
|
|
this.$store.commit('DEL_TAG', this.tag)
|
||
|
|
this.$router.push("/plugin/workflow/process/todo")
|
||
|
|
})
|
||
|
|
} else if (type == 'copy') { // 抄送
|
||
|
|
this.examineForm.copyUser = id
|
||
|
|
this.examineForm.$copyUser = name
|
||
|
|
} else if (type == 'assignee') { // 指定下一步审批人
|
||
|
|
this.examineForm.assignee = id
|
||
|
|
this.examineForm.$assignee = name
|
||
|
|
}
|
||
|
|
this.$refs['user-select'].visible = 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;
|
||
|
|
}
|
||
|
|
.foot-item {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
margin-left: -20px;
|
||
|
|
// right: 0;
|
||
|
|
z-index: 101;
|
||
|
|
width: 98%;
|
||
|
|
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>
|