<template>
|
<basic-container>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-row type="flex" class="row-bg" justify="end">
|
<el-form-item>
|
<!-- <el-button type="primary" @click="handleAgree">同意</el-button>-->
|
<!-- <el-button type="success" @click="handlePolish">完善</el-button>-->
|
<!-- <el-button type="danger" @click="handleDisagree">驳回</el-button>-->
|
<el-button @click="handleCancel">关闭</el-button>
|
</el-form-item>
|
</el-row>
|
<el-card shadow="hover">
|
<div slot="header">
|
<span>审批信息</span>
|
</div>
|
<avue-form :option="option" v-model="form"/>
|
|
<el-tabs type="border-card">
|
<el-tab-pane label="同意">
|
<avue-form ref="form" v-model="agreeModel" :option="agreeOption" @submit="handleAgree"/>
|
</el-tab-pane>
|
|
<el-tab-pane label="完善">
|
<avue-form ref="form" v-model="polishModel" :option="polishOption" @submit="handlePolish"/>
|
</el-tab-pane>
|
|
<el-tab-pane label="驳回">
|
<avue-form ref="form" v-model="rejectModel" :option="rejectOption" @submit="handleDisagree"/>
|
</el-tab-pane>
|
</el-tabs>
|
|
|
</el-card>
|
|
<el-card shadow="hover">
|
<div slot="header">
|
<span>流程信息</span>
|
</div>
|
<el-row type="flex" class="row-bg">
|
<el-timeline>
|
<el-timeline-item :key="flow.id" :timestamp="flow.createTime" v-for="flow in flowList" placement="top">
|
<el-card shadow="hover">
|
<p>{{ flow.assigneeName }} 在 [{{ flow.createTime }}] 开始处理 [{{ flow.historyActivityName }}] 环节</p>
|
<p v-if="flow.historyActivityDurationTime!==''">任务历时 [{{ flow.historyActivityDurationTime }}]</p>
|
<p v-if="flow.comment!==''">批复意见: [{{ flow.comment }}]</p>
|
<p v-if="flow.endTime!==''">结束时间: [{{ flow.endTime }}]</p>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</el-row>
|
</el-card>
|
|
<el-card shadow="hover">
|
<div slot="header">
|
<span>流程跟踪</span>
|
</div>
|
<el-row class="row-bg">
|
<flow-design :is-display="true" :process-instance-id="processInstanceId"></flow-design>
|
</el-row>
|
</el-card>
|
</el-form>
|
</basic-container>
|
</template>
|
|
<script>
|
import {historyFlowList, leaveDetail} from "@/api/work/process";
|
import option from "@/const/application/application";
|
import {applicationDetail,completeTask} from "@/api/application/application";
|
|
export default {
|
name: "handle",
|
data() {
|
return {
|
taskId: '',
|
businessId: '',
|
processInstanceId: '',
|
src: '',
|
flowList: [],
|
form: {
|
flow: {
|
assigneeName: '',
|
},
|
startTime: '',
|
endTime: '',
|
reason: '',
|
comment: '',
|
},
|
option: option,
|
//批复相关数据
|
agreeModel: {},
|
agreeOption: {
|
emptyBtn: false,
|
submitText: "提交",
|
gutter: 30,
|
column: [
|
{
|
label: "批复意见",
|
prop: "comment",
|
span:24,
|
type:'textarea',
|
hide: true,
|
rules: [{
|
required: true,
|
message: "请输入批复意见",
|
trigger: "blur"
|
}]
|
},
|
]
|
},
|
polishModel: {},
|
polishOption: {
|
emptyBtn: false,
|
submitText: "提交",
|
gutter: 30,
|
column: [
|
{
|
label: "完善意见",
|
prop: "suggestion",
|
type:'textarea',
|
span:24,
|
hide: true,
|
rules: [{
|
required: true,
|
message: "请输入完善意见",
|
trigger: "blur"
|
}]
|
},
|
{
|
label: "批复意见",
|
prop: "comment",
|
type:'textarea',
|
span:24,
|
hide: true,
|
rules: [{
|
required: true,
|
message: "请输入批复意见",
|
trigger: "blur"
|
}]
|
},
|
]
|
},
|
rejectModel: {},
|
rejectOption: {
|
emptyBtn: false,
|
submitText: "提交",
|
gutter: 30,
|
column: [
|
{
|
label: "理由",
|
prop: "rejectReason",
|
type: "select",
|
dicUrl: "/api/blade-system/dict-biz/dictionary?code=reject_reason",
|
props: {
|
label: "dictValue",
|
value: "dictKey"
|
},
|
hide: true,
|
rules: [{
|
required: true,
|
message: "请选择理由",
|
trigger: "blur"
|
}]
|
},
|
{
|
label: "备注",
|
prop: "remark",
|
type: "textarea",
|
span: 24
|
}
|
]
|
}
|
}
|
},
|
created() {
|
this.init();
|
},
|
beforeDestroy() {
|
this.controlOption("close")
|
},
|
beforeRouteUpdate(to, from, next) {
|
// 在当前路由改变，但是该组件被复用时调用
|
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
|
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
|
// 可以访问组件实例 `this`
|
if (to.fullPath !== from.fullPath) {
|
next();
|
this.init();
|
}
|
},
|
methods: {
|
init() {
|
this.taskId = this.$route.params.taskId;
|
this.processInstanceId = this.$route.params.processInstanceId;
|
this.businessId = this.$route.params.businessId;
|
|
this.controlOption('open')
|
|
historyFlowList(this.processInstanceId).then(res => {
|
const data = res.data;
|
if (data.success) {
|
this.flowList = data.data;
|
}
|
})
|
applicationDetail(this.businessId).then(res => {
|
const data = res.data;
|
if (data.success) {
|
this.form = data.data;
|
this.initForm()
|
}
|
})
|
},
|
//同意
|
handleAgree() {
|
if (!this.agreeModel.comment) {
|
this.$message.warning('请先填写批复意见');
|
return;
|
}
|
const params = {
|
taskId: this.taskId,
|
processInstanceId: this.processInstanceId,
|
flag: 'ok',
|
comment: this.agreeModel.comment,
|
};
|
completeTask(params).then(res => {
|
const data = res.data;
|
if (data.success) {
|
this.$message.success(data.msg);
|
this.$router.$avueRouter.closeTag();
|
this.$router.push({path: `/work/start`});
|
} else {
|
this.$message.error(data.msg || '提交失败');
|
}
|
})
|
},
|
//驳回
|
handleDisagree() {
|
if (!this.form.comment) {
|
this.$message.warning('请先填写批复意见');
|
return;
|
}
|
const params = {
|
taskId: this.taskId,
|
processInstanceId: this.processInstanceId,
|
comment: this.form.comment,
|
};
|
completeTask(params).then(res => {
|
const data = res.data;
|
if (data.success) {
|
this.$message.success(data.msg);
|
this.$router.$avueRouter.closeTag();
|
this.$router.push({path: `/work/start`});
|
} else {
|
this.$message.error(data.msg || '提交失败');
|
}
|
})
|
},
|
//完善
|
handlePolish() {
|
},
|
handleCancel() {
|
this.$router.$avueRouter.closeTag();
|
this.$router.push({path: `/work/start`});
|
},
|
//给form表单中的字段赋值
|
initForm() {
|
let basic = this.form.basicInfoEntity
|
let basicId = basic.id
|
let plan = this.form.planEntity
|
let planId = plan.id
|
let scheme = this.form.schemeEntity
|
let schemeId = scheme.id
|
let car = this.form.carEntity
|
let catId = car.id
|
let goods = this.form.goodsEntity
|
let goodsId = goods.id
|
let form = this.form
|
//保留原form中的字段
|
let common = Object.assign({}, form)
|
|
form = Object.assign(form, basic)
|
form = Object.assign(form, plan)
|
form = Object.assign(form, scheme)
|
form = Object.assign(form, car)
|
form = Object.assign(form, goods)
|
|
//覆盖回原form
|
form = Object.assign(form, common)
|
|
this.form.basicInfoEntity.id = basicId
|
this.form.planEntity.id = planId
|
this.form.schemeEntity.id = schemeId
|
this.form.carEntity.id = catId
|
this.form.goodsEntity.id = goodsId
|
},
|
|
//对option进行操作
|
controlOption(arg) {
|
if (arg == 'open') {
|
//设置group内全为禁用状态
|
this.option.group.forEach(group => {
|
group.column.forEach(item => {
|
item.disabled = true
|
})
|
})
|
|
//隐藏提交 清空按钮
|
this.option.submitBtn = false
|
this.option.emptyBtn = false
|
|
} else if (arg == 'close') {
|
//解除禁用状态
|
this.option.group.forEach(group => {
|
group.column.forEach(item => {
|
item.disabled = false
|
})
|
})
|
|
//显示提交 清空按钮
|
this.option.submitBtn = true
|
this.option.emptyBtn = true
|
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
