337 lines
9.0 KiB
Vue
337 lines
9.0 KiB
Vue
<template>
|
|
<div>
|
|
<el-table :data="tableData"
|
|
@row-click="clickRow"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="processName"
|
|
label="审批类型"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="initiatorName"
|
|
label="发起人"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="createdDate"
|
|
label="提交时间">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="taskName"
|
|
label="当前节点">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="arriveDate"
|
|
label="任务到达时间">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="state"
|
|
label="状态">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.state == 1">待处理</el-tag>
|
|
<el-tag v-if="scope.row.state == 4" type="success">已同意</el-tag>
|
|
<el-tag v-if="scope.row.state == 3" type="danger">已拒绝</el-tag>
|
|
<el-tag v-if="scope.row.state == 2" type="warning">已退回</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-drawer
|
|
title="审批详情"
|
|
size="500px"
|
|
:visible.sync="approveOpen"
|
|
direction="rtl">
|
|
<div v-loading="loading">
|
|
<div class="top">
|
|
<div class="top_left">
|
|
<el-avatar size="large" :src="avatar"></el-avatar>
|
|
<span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectTask.initiatorName }}</span>
|
|
</div>
|
|
<div class="top_right">
|
|
<div style="margin-bottom: 12px">
|
|
<span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
|
|
<el-tag style="font-size: 12px" size="mini">进行中</el-tag>
|
|
</div>
|
|
<div>
|
|
<span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 15px;background:#f5f5f5;"></div>
|
|
<form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
|
|
v-model="taskData.formData"/>
|
|
<div style="height: 15px;background:#f5f5f5;"></div>
|
|
<el-footer class="footer">
|
|
<div class="footer_comment" @click="showCommentBox">
|
|
<i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
|
|
<span style="font-size: 12px;">评论</span>
|
|
</div>
|
|
<!-- <process-diagram-viewer/>-->
|
|
<div style="margin-right: 20px;">
|
|
<el-dropdown>
|
|
<span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
|
|
更多<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-s-release" @click.native="showBackNodeBox()">退回</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
|
|
<el-dropdown-item icon="el-icon-refresh-left" @click.native="showRevocationBox()">撤销</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-button type="danger" size="mini" plain round style="margin-left: 20px"
|
|
@click="showRefuseBox()">拒绝
|
|
</el-button>
|
|
<el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
|
|
</div>
|
|
</el-footer>
|
|
</div>
|
|
</el-drawer>
|
|
<comment ref="comment"
|
|
:title="commentInfo.title"
|
|
:type="commentInfo.type"
|
|
:max-size="5"
|
|
:attachment-max-size="20" @ok="commentConfirm"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Comment from "../../components/common/Comment";
|
|
import FormRender from "@/views/common/form/FormRender";
|
|
import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
|
|
import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask,rollBackTask} from "@/api/task";
|
|
|
|
export default {
|
|
name: "DisposalTask",
|
|
components: { Comment, FormRender, ProcessDiagramViewer},
|
|
data() {
|
|
return {
|
|
approveOpen: false,
|
|
selectTask: {},
|
|
tableData: [],
|
|
commentInfo: {
|
|
title: null,
|
|
type: null, //1 添加评论 2 拒绝
|
|
},
|
|
loading: false,
|
|
taskData: {
|
|
formData: {},
|
|
formItems: [],
|
|
processList: []
|
|
},
|
|
avatar: require("@/assets/image/avatar.png")
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
clickRow(row) {
|
|
this.approveOpen = true;
|
|
this.loadProcessTask(row.taskId);
|
|
this.selectTask = row;
|
|
|
|
},
|
|
getList() {
|
|
getTaskList().then(res => {
|
|
let data = res.data;
|
|
this.tableData = data.rows;
|
|
});
|
|
},
|
|
init() {
|
|
this.taskData = {
|
|
formData: {},
|
|
formItems: [],
|
|
processList: []
|
|
};
|
|
this.loading = true;
|
|
this.$store.state.design = this.taskData;
|
|
this.$store.state.diagramMode = "viewer";
|
|
this.$store.state.preview = false;
|
|
},
|
|
loadProcessTask(taskId) {
|
|
let that = this;
|
|
this.init();
|
|
getTaskInfo(taskId).then(res => {
|
|
let data=res.data
|
|
data.formItems.map(item=>{
|
|
if(item.props.required){
|
|
item.props.required=!item.props.required
|
|
}
|
|
return item
|
|
})
|
|
that.taskData = res.data;
|
|
that.$store.state.design = that.taskData;
|
|
that.$store.state.userTaskOption = that.taskData.userTaskOption;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
submitTask() {
|
|
let params = {
|
|
taskId: this.selectTask.taskId,
|
|
formData: JSON.stringify(this.taskData.formData)
|
|
};
|
|
completeTask(params).then(res => {
|
|
this.approveOpen = false;
|
|
this.getList();
|
|
this.$message.success(res.msg);
|
|
});
|
|
},
|
|
showCommentBox() {
|
|
this.commentInfo = {
|
|
title: "添加评论",
|
|
type: 1
|
|
}
|
|
this.commentShow()
|
|
},
|
|
showRefuseBox() {
|
|
this.commentInfo = {
|
|
title: "拒绝任务",
|
|
type: 2
|
|
}
|
|
this.commentShow()
|
|
},
|
|
showTransferBox() {
|
|
this.commentInfo = {
|
|
title: "转交给其他人审批",
|
|
type: 3
|
|
}
|
|
this.commentShow()
|
|
},
|
|
showBackNodeBox() {
|
|
this.commentInfo = {
|
|
title: "退回到之前节点",
|
|
type: 4
|
|
}
|
|
this.commentShow()
|
|
},
|
|
showAddApprovalBox() {
|
|
this.commentInfo = {
|
|
title: "加签",
|
|
type: 5
|
|
}
|
|
this.commentShow()
|
|
},
|
|
showRevocationBox() {
|
|
this.commentInfo = {
|
|
title: "撤销当前流程",
|
|
type: 6
|
|
}
|
|
this.commentShow()
|
|
},
|
|
commentShow() {
|
|
this.$refs.comment.show()
|
|
},
|
|
/**
|
|
* 拒绝提交
|
|
* @param data
|
|
*/
|
|
submitRefuse(data) {
|
|
let params = {
|
|
taskId: this.selectTask.taskId,
|
|
comment: data
|
|
};
|
|
refuseTask(params).then(res => {
|
|
this.approveOpen = false;
|
|
this.getList();
|
|
this.$message.success(res.msg);
|
|
})
|
|
},
|
|
/**
|
|
* 评论回调
|
|
* @param data
|
|
* @param type
|
|
*/
|
|
commentConfirm(data, type) {
|
|
switch (type) {
|
|
case 1:
|
|
this.submitComment(data);
|
|
break;
|
|
case 2:
|
|
this.submitRollBack(data);
|
|
break;
|
|
case 3:
|
|
this.submitRefuse(data);
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
},
|
|
submitRollBack(data){
|
|
let params = {
|
|
taskId: this.selectTask.taskId,
|
|
rollBackId: data.rollBackId,
|
|
comment: data,
|
|
};
|
|
rollBackTask(params).then(res=>{
|
|
this.$message.success(res.msg);
|
|
})
|
|
},
|
|
/**
|
|
* 提交评论
|
|
* @param data
|
|
*/
|
|
submitComment(data) {
|
|
this.$set(data, "taskId", this.selectTask.taskId);
|
|
addComment(data).then(res => {
|
|
this.$message.success(res.msg);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.top {
|
|
padding: 0 10px 10px 10px;
|
|
display: flex;
|
|
|
|
.top_left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50px;
|
|
align-items: center;
|
|
}
|
|
|
|
.top_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
//justify-content: space-between;
|
|
font-size: 13px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 30px;
|
|
padding: 15px 0;
|
|
z-index: 99;
|
|
background: #fff;
|
|
border-top: 1px solid #dcdfe6;
|
|
box-shadow: 0 0 15px 0 #dad8d8;
|
|
|
|
.footer_comment {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/deep/ .el-dropdown-menu {
|
|
top: -5px !important;
|
|
}
|
|
}
|
|
|
|
.el-dropdown-link, .footer_comment {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|