| | |
| | | <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: {}, |
| | |
| | | processVariables(taskId) { |
| | | if (taskId) { |
| | | // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示 |
| | | getProcessVariables(taskId).then(res => { |
| | | flowTaskFormDetail(taskId).then(res => { |
| | | this.formDataList = res.data |
| | | if (this.formDataList && this.formDataList.length > 0) { |
| | | this.$nextTick(() => { |
| | | // 回显表单 |
| | | this.$refs.vFormRef.setFormJson(res.data.formJson); |
| | | 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(() => { |
| | | // 加载表单填写的数据 |
| | | this.$refs.vFormRef.setFormData(res.data); |
| | | this.$nextTick(() => { |
| | | // 表单禁用 |
| | | this.$refs.vFormRef.disableForm(); |
| | | 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(); |
| | | // }) |
| | | // }) |
| | | // }) |
| | | }); |
| | | } |
| | | }, |
| | |
| | | .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> |