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