任务详情页面 - 查看任务信息和操作
<template>
<div style='' class='formBox'>
<rx-error :message='errorMessage' v-if='!taskStatus'></rx-error>
<rx-fit v-if='taskStatus' style='padding: 0px;'>
<!--任务工具栏-->
<div slot='toolheader' border='true' foldheader='true' foldbtn='false' align='right'>
<div style='padding: 10px '>
<task-tool-bar :bpmTaskDetail='bpmTaskDetail' :taskConfig='taskConfig'/>
</div>
</div>
<div class='fitContainer'>
<div class='contents' style='text-align: left;'>
<pre><code> <!--单据实例信息-->
<bpm-inst-info :bpmInst='bpmInst' />
<!-- 流程状态图 -->
<bpm-status class='contentsStatus' :status='status'></bpm-status>
<!--显示提交的沟通-->
<task-commu :task-linkup-param.sync='taskLinkupParam'
@commuTaskRevoked='reloadTaskInfo()' />
<!--表单-->
<!--<rx-forms ref='rxForms' />-->
<rx-forms ref='rxForms' v-if='processConfig.formType=='online' '> </rx-forms>
<component ref='customForm' :is='formComponent' :pk='pk' v-else></component>
<!--审批历史-->
<bpm-check-history
:inst-id='instId'
:bpm-task='bpmTask'
:historyShow.sync='historyShow' />
<!--留言-->
<bpm-inst-msgs :instId='instId' :msg-show.sync='msgShow'/>
<bpm-inst-logs :instId='instId' :log-show='logShow' />
</div>
</div>
</rx-fit>
</code></pre>
</div>
</template>
<script>
import {RxDialog, Util, RxFit,RxTextBoxList,RxUserInfo} from 'jpaas-common-lib';
import BpmtaskApi from '@/api/bpm/core/bpmTask';
import BpmInstMsgs from './BpmInstMsgs'
import BpmInstLogs from './BpmInstLogs';
import TaskToolBar from './TaskToolBar';
<p>import RxForms from './RxForms';
import BpmInstInfo from './BpmInstInfo';
import BpmCheckHistory from './BpmCheckHistory';
import TaskCommu from './TaskCommu';
import TaskCommuReply from './TaskCommuReply';
import FormPcApi from '@/api/form/core/formPc.js';
import userState from '@/assets/js/userState';
import RxError from '../../share/rx-error';
import BpmStatus from '@/views/modules/bpm/core/component/BpmStatus';</p>
<p>export default {
name: 'BpmTaskStart',
mixins:[userState],
components:{
RxError,
TaskCommuReply,
TaskCommu,
BpmCheckHistory,
BpmInstInfo,
RxDialog,
TaskToolBar,
BpmInstMsgs,
BpmInstLogs,
RxFit,
RxTextBoxList,
RxForms,
RxUserInfo,
BpmStatus
},
props:{
taskId:{
type:String,
required:true
},
instId:{
type:String,
required:true
},
layerid: String,
lydata: Object,
destroy:Function
},
data() {
return {
title:'任务详情',
msgTypes: '',
opinion: '',
checkType: 'AGREE',
historyShow: false,
msgShow: false,
bpmInst: {instId: ''},
bpmTask: {taskId: this.taskId},
isCanBack: false,
canCheck: true,
canRecorveLinkup: false,
bpmCmTaskInfos: [],
isAllowLinkup: true,
backPathResult: {},
nodeExecutors: [],
processConfig: {
formType:'online'
},
taskConfig: {},
bpmTaskDetail:{},
msgSubmitting: false,
logShow: false,
//任务沟通参数
taskLinkupParam: {
canStartLinkup: false,
canRevokeLinkup: false,
canReplyLinkup: false,
bpmCmTaskInfos: []
},
//回复沟通任务
taskLinkupReply: {
msgTypes: '',
opinion: '',
lpReplyVisible: false,
},
formComponent:'',
pk:'',
taskStatus:true,
errorMessage:'',
//根实例
rootVm:true,
status:''
}
},</p>
<pre><code>created() {
this.loadTaskInfo();
},
methods:{
//刷新任务
async loadTaskInfo(){
let self=this;
if(!this.taskId){
this.taskId=this.$route.params.taskId;
}
if(!this.instId){
this.instId=this.$route.params.instId;
}
let res =await BpmtaskApi.getAllDetail(this.taskId);
if(!res.success){
this.taskStatus=false;
this.errorMessage=res.message;
return;
}
this.status = res.data.bpmInst.status;
this.bpmTaskDetail=res.data;
if(res.data.bpmTask==null){
if(self.destroy){
this.$notification.open({
message: '操作提示',
description:
'当前任务已经完成或删除，请刷新数据界面再操作！',
icon: <a-icon type='smile' style='color: #108ee9' />,
});
Util.closeWindow(self,'ok',{});
return;
}else {
alert('当前任务已经完成或删除，请刷新数据界面再操作!');
window.close();
}
}
var result = this.bpmTaskDetail.allowApprove;
if(!result.success){
this.$notification.open({
message: '操作提示',
description:
result.message,
icon: <a-icon type='smile' style='color: #108ee9' />
});
}
Object.assign(self,res.data);
var curUser=this.user;
var contextData={
type:'usetask',
curUserId:curUser.userId,
curUserName:curUser.fullName,
account:curUser.account,
deptId:curUser.deptId,
nodeId:self.bpmTask.key,
nodeName:self.bpmTask.name,
instId:self.instId,
defId:self.bpmInst.defId,
instNo:self.bpmInst.billNo,
taskId:self.taskId,
tenantId: curUser.tenantId,
tenantLabel:curUser.tenantLabel,
opinionHistorys:res.data.bpmCheckHistories
};
self.handFormConfig(res.data.processConfig,res.data.taskConfig,res.data.bpmInst);
if(this.processConfig.formType=='online') {
self.$refs.rxForms.setData(res.data.formData.data, false, contextData);
}
},
loadView(view) { // 路由懒加载
return () => import(`@/views/${view}`);
},
//处理表单配置。
handFormConfig(conf,taskConfig,bpmInst){
debugger
var config=Util.deepClone(this.processConfig);
this.processConfig=Object.assign(config,conf);
if(!this.processConfig.formType){
var form= taskConfig.form;
console.log(form)
this.processConfig.formType='online'
this.formComponent=this.loadView(form.component);
}
//startForm
if( taskConfig.form.formpc && taskConfig.form.formpc.length>0){
var form= taskConfig.form.formpc[0];
if(form && form.type=='custom'){
this.pk=bpmInst.busKey;
this.processConfig.formType='custom';
this.formComponent=this.loadView(form.component) ;
return;
}
}
//获取全局。
if( conf.globalForm.formpc && conf.globalForm.formpc.length>0){
var form= conf.globalForm.formpc[0];
if(form && form.type=='custom'){
this.pk=bpmInst.busKey;
this.processConfig.formType='custom';
this.formComponent=this.loadView(form.component);
return;
}
}
},
}
</code></pre>
<p>}
</script></p>
<style scoped>
.formBox{
width: 100%;
height: 100%;
box-sizing: border-box;
}
.formBox >>> .divdefault{
overflow: hidden;
}
.fitContainer{
background: #fff;
padding: 10px;
padding-right: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
overflow: auto;
}
.contents{
background: #fff;
min-height: 100%;
padding: 0px 10px;
box-sizing: border-box;
width: 1301px;
margin: 0 auto;
border: solid 1px #dadde0;
position: relative;
}
.formBox >>> .fit-header{
box-shadow: 0px 1px 4px #dddddd;
}
.contents >>> .table-form>tbody>tr>td{
border:1px solid #dadde0!important;
}
.contents >>> .previewBox{
padding: 10px 0 0 0 ;
}
.contents >>> .table-form>tbody>tr>td:nth-child(odd){
color: #8a9199;
}
.contents >>> .table-form>tbody>tr>td:nth-child(even){
color: #46494d;
}
.contentsStatus{
position: absolute;
z-index: 2;
top: 0px;
right: 10px;
}
</style>
原文地址: https://www.cveoy.top/t/topic/qEBL 著作权归作者所有。请勿转载和采集!