<template>
|
<basic-container>
|
<div class="dialogwarp">
|
<div class="dialogwarp_tab">
|
<el-card class="dialogwarp_tab_card">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="业务数据信息" name="first">
|
<businesswork ref="businesswork":ids="ids" :templateId="templateId"></businesswork>
|
</el-tab-pane>
|
<el-tab-pane label="流程跟踪" name="second">
|
<avue-crud :data="flowList" :option="option" ref="crud">
|
</avue-crud>
|
<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-tab-pane>
|
</el-tabs>
|
</el-card>
|
</div>
|
<div class="dialogwarp_card">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>当前任务：</span>
|
<span>{{ title }}</span>
|
</div>
|
<div style="width: 100%;">
|
<p>请在下方输入您的审批意见：</p>
|
<el-input type="textarea" :rows="4" placeholder="请输入内容" show-word-limit v-model="opinionVal">
|
</el-input>
|
</div>
|
<div style="width: 100%;">
|
<p>审批意见附件：</p>
|
<el-upload drag action="https://jsonplaceholder.typicode.com/posts/" multiple style="width: 100%;">
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
</el-upload>
|
</div>
|
<div style="width: 100%;">
|
<p>已上传审批文件：</p>
|
<el-card class="box-card">
|
<el-table :data="tableData" stripe style="width: 100%">
|
<el-table-column prop="date" label="文件名">
|
</el-table-column>
|
<el-table-column prop="name" label="上传人 ">
|
</el-table-column>
|
<el-table-column prop="address" label="操作">
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
<div style="margin-top: 20px;">
|
<!-- <el-button type="primary" size="mini" @click="handelRefuse">不同意</el-button>
|
<el-button v-if="!isRefuse" type="primary" size="mini" @click="handelAgree">同意</el-button>
|
<el-button v-if="!isAgree" type="primary" size="mini" @click="handelRefuse">不同意</el-button> -->
|
<el-button type="primary" size="mini" @click="handelExecute(item)" v-for="(item, index) in btnList"
|
:key="index">{{ item.toName === '同意' ? item.toName : `${item.toName}到${item.taskName}` }}</el-button>
|
<!-- <el-button v-if="isRefuse" type="primary" size="mini" @click="handelExecute">执行</el-button> -->
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</basic-container>
|
</template>
|
|
<script>
|
import { historyFlowList } from "@/api/work/process";
|
import { getBtnTask, ExamineTask } from '@/api/template/flowpath.js'
|
import { validatenull } from '@/util/validate'
|
|
export default {
|
data() {
|
return {
|
ids:[],
|
templateId:'',
|
taskId: '',
|
businessId: '',
|
processInstanceId: '',
|
src: '',
|
flowList: [],
|
btnList: [],
|
opinionVal: '',
|
activeName: 'first',
|
option: {
|
menu: false,
|
addBtn: false,
|
refreshBtn: false,
|
columnBtn: false,
|
index: true,
|
header: false,
|
stripe: true,
|
indexLabelClassName: '序号',
|
column: [
|
{ label: '任务名称', prop: 'historyActivityName', minWidth: 120 },
|
{ label: '执行操作', prop: 'pass', minWidth: 80 ,formatter:this.formatterPass},
|
{ label: '任务开始时间', prop: 'createTime', minWidth: 140 },
|
{ label: '审批意见', prop: 'comment', minWidth: 220, overHidden: true },
|
{ label: '执行人', prop: 'assigneeName', minWidth: 80 },
|
{ label: '任务完成时间', prop: 'endTime', minWidth: 140 },
|
{ label: '已上传审批文件', prop: 'sex', minWidth: 220, overHidden: true },
|
]
|
},
|
}
|
},
|
created() {
|
this.init();
|
|
},
|
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;
|
historyFlowList(this.processInstanceId).then(res => {
|
const data = res.data;
|
if (data.success) {
|
this.flowList = data.data;
|
}
|
})
|
this.apiGetBtnTask(this.processInstanceId)
|
},
|
formatterPass(row, value, column) {
|
console.log('value',value)
|
return value?'同意':'驳回'
|
},
|
async apiGetBtnTask(id) {
|
const response = await getBtnTask({ processInstanceId: id })
|
const res = response.data
|
this.ids=res.data.variables.ids;
|
this.templateId=res.data.variables.templateId;
|
if (res.success) {
|
console.log(res)
|
this.btnList = res.data.toTasks
|
}
|
},
|
async apiExamineTask(param) {
|
const response = await ExamineTask(param)
|
const res = response.data
|
if (res.success) {
|
this.$message.success(res.msg);
|
this.$router.$avueRouter.closeTag();
|
this.$router.push({ path: `/work/todo` });
|
} else {
|
this.$message.error(res.msg || '提交失败');
|
}
|
},
|
handelExecute(event) {
|
console.log(event)
|
const { toName, conditionKey, conditionValue } = event
|
let param = {
|
comment: this.opinionVal || '同意',
|
flag: 'ok',
|
processInstanceId: this.processInstanceId,
|
taskId: this.taskId,
|
}
|
if (!validatenull(conditionKey) && !validatenull(conditionValue)) {
|
param = {
|
...param, variables: {
|
[conditionKey]: conditionValue
|
}
|
}
|
}
|
if (toName === '驳回') {
|
if (!this.opinionVal) {
|
this.$alert(`当处理方式为${toName}时，需要填写审批意见`, '提示信息', {
|
confirmButtonText: '确定',
|
}).then(() => {
|
|
});
|
} else this.apiExamineTask(param)
|
} else this.apiExamineTask(param)
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.dialogwarp {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
justify-content: space-between;
|
height: 85vh;
|
|
&_tab {
|
width: 79%;
|
|
|
&_card {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
&_card {
|
// margin-left: 20px;
|
width: 20%;
|
}
|
}
|
|
::v-deep(.el-upload) {
|
width: 100%;
|
height: 120px;
|
}
|
|
::v-deep(.el-upload-dragger) {
|
width: 100%;
|
height: 120px;
|
}
|
|
::v-deep(.el-upload-dragger .el-icon-upload) {
|
margin: 15px 0 16px;
|
}
|
</style>
|
