| | |
| | | <div class="app-container"> |
| | | <el-card class="box-card" > |
| | | <div slot="header" class="clearfix"> |
| | | <span class="el-icon-document">已发任务</span> |
| | | <span class="el-icon-document">已完成任务</span> |
| | | <el-button style="float: right;" size="mini" type="danger" @click="goBack">关闭</el-button> |
| | | </div> |
| | | <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick"> |
| | | <!--表单信息--> |
| | | <el-tab-pane label="表单信息" name="1"> |
| | | <el-col :span="16" :offset="4"> |
| | | <v-form-render ref="vFormRef"/> |
| | | <el-col :span="16" :offset="4" v-if="formDataList && formDataList.length > 0"> |
| | | <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp"> |
| | | <div v-if="formDataObj.current" style="margin-bottom: 15px;color: #409eff">当前阶段:<span style="color: red">{{formDataObj.beforeNodeName}}</span></div> |
| | | <div v-else style="margin-bottom: 15px;color: #409eff">前置阶段:<span style="color: #d5904b">{{formDataObj.beforeNodeName}}</span></div> |
| | | <v-form-render :form-data="formDataObj.formJson" :ref="'form' + index"/> |
| | | </div> |
| | | </el-col> |
| | | </el-tab-pane> |
| | | <!--流程流转记录--> |
| | |
| | | <script> |
| | | import {flowRecord} from "@/api/flowable/finished"; |
| | | import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition"; |
| | | import {flowTaskForm, flowTaskFormDetail} from "@/api/flowable/todo"; |
| | | import BpmnViewer from '@/components/Process/viewer'; |
| | | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
| | | |
| | |
| | | return { |
| | | // 模型xml数据 |
| | | flowData: {}, |
| | | formDataList: [], // 表单列表 |
| | | activeName: '1', |
| | | // 查询参数 |
| | | queryParams: {}, |
| | | // 遮罩层 |
| | | loading: true, |
| | | flowRecordList: [], // 流程流转数据 |
| | | goBackParams: {}, |
| | | taskForm:{ |
| | | multiple: false, |
| | | comment:"", // 意见内容 |
| | |
| | | this.taskForm.deployId = this.$route.query && this.$route.query.deployId; |
| | | this.taskForm.taskId = this.$route.query && this.$route.query.taskId; |
| | | this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId; |
| | | this.goBackParams = this.$route.query && this.$route.query.goBackParams; |
| | | // 流程任务重获取变量表单 |
| | | this.processVariables( this.taskForm.taskId) |
| | | this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId); |
| | |
| | | processVariables(taskId) { |
| | | if (taskId) { |
| | | // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示 |
| | | getProcessVariables(taskId).then(res => { |
| | | this.$nextTick(() => { |
| | | // 回显表单 |
| | | this.$refs.vFormRef.setFormJson(res.data.formJson); |
| | | flowTaskFormDetail(taskId).then(res => { |
| | | this.formDataList = res.data |
| | | if (this.formDataList && this.formDataList.length > 0) { |
| | | this.$nextTick(() => { |
| | | // 加载表单填写的数据 |
| | | this.$refs.vFormRef.setFormData(res.data); |
| | | this.$nextTick(() => { |
| | | // 表单禁用 |
| | | this.$refs.vFormRef.disableForm(); |
| | | this.formDataList.forEach((formDataObj, index) => { |
| | | console.log("表单数据列表", formDataObj.formJson) |
| | | let that = this |
| | | console.log(eval("that.$refs.form" + index)[0]) |
| | | if (formDataObj.formJsonObj) { |
| | | eval("that.$refs.form" + index)[0].setFormJson(formDataObj.formJsonObj.formJson); |
| | | |
| | | eval("that.$refs.form" + index)[0].setFormData(formDataObj.formJsonObj); |
| | | this.$nextTick(() => { |
| | | eval("that.$refs.form" + index)[0].disableForm(); |
| | | }) |
| | | } |
| | | }) |
| | | // this.formJson = this.formDataList[0].formJsonObj.formJson |
| | | }) |
| | | }) |
| | | } |
| | | // this.$nextTick(() => { |
| | | // // 回显表单 |
| | | // this.$refs.vFormRef.setFormJson(res.data.formJson); |
| | | // this.$nextTick(() => { |
| | | // // 加载表单填写的数据 |
| | | // this.$refs.vFormRef.setFormData(res.data); |
| | | // this.$nextTick(() => { |
| | | // // 表单禁用 |
| | | // this.$refs.vFormRef.disableForm(); |
| | | // }) |
| | | // }) |
| | | // }) |
| | | }); |
| | | } |
| | | }, |
| | | /** 返回页面 */ |
| | | goBack() { |
| | | // // 关闭当前标签页并返回上个页面 |
| | | // const obj = { path: "/task/process", query: { t: Date.now()} }; |
| | | // this.$tab.closeOpenPage(obj); |
| | | this.$tab.closePage() |
| | | this.$router.push({ |
| | | path: '/projectFlow/detail', |
| | | query: this.goBackParams |
| | | }) |
| | | }, |
| | | } |
| | | }; |
| | |
| | | .my-label { |
| | | background: #E1F3D8; |
| | | } |
| | | |
| | | .form-warp { |
| | | padding: 20px; |
| | | margin-bottom: 20px; |
| | | box-shadow: |
| | | inset 0 -3em 3em rgba(0, 0, 0, 0.1), |
| | | 0 0 0 2px rgb(239, 239, 239), |
| | | 0.3em 0.3em 1em rgba(0, 0, 0, 0.3); |
| | | } |
| | | </style> |