| | |
| | | <!--表单信息--> |
| | | <el-tab-pane label="表单信息" name="1"> |
| | | <!--初始化流程加载表单信息--> |
| | | <el-col :span="16" :offset="4"> |
| | | <el-col :span="16" :offset="4" v-loading="formLoading" class="tab-min-height"> |
| | | <div v-if="formDataList && formDataList.length > 0"> |
| | | <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative"> |
| | | <div v-if="formDataObj.current"> |
| | | <!-- 当前节点可协同、转办等操作 --> |
| | | <div style="position: absolute; top: 4px; right: 4px; display: flex;justify-content: center; align-items: center;"> |
| | | <el-button size="small" type="primary" @click="submitForm">确认并提交</el-button> |
| | | <el-button size="small" type="primary" disabled @click="submitForm">协同办理(功能开发中)</el-button> |
| | | <el-button size="small" type="primary" @click="openDelegation(formDataList[0].beforeNodeName)">转办</el-button> |
| | | </div> |
| | | <div style="margin-bottom: 15px;color: #E6A23C">当前阶段:<span style="color: #409EFF">{{formDataObj.beforeNodeName}}</span></div> |
| | | <div class="current">当前阶段:<span>{{formDataObj.beforeNodeName}}</span></div> |
| | | </div> |
| | | <div v-else-if="formDataList.length > 1"> |
| | | <!-- 前置节点可驳回 --> |
| | | <div style="position: absolute; top: 4px; right: 4px"> |
| | | <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeDefId)">驳 回</el-button> |
| | | </div> |
| | | <div style="margin-bottom: 15px;color: #E6A23C">前置阶段:<span style="color: #F56C6C">{{formDataObj.beforeNodeName}}</span></div> |
| | | <div class="before">前置阶段:<span>{{formDataObj.beforeNodeName}}</span></div> |
| | | </div> |
| | | <div v-if="formDataObj.formJson !== null && formDataObj.formJson !== ''"> |
| | | <v-form-render :form-data="formDataObj.formJson" :ref="'form' + index"/> |
| | | <div v-if="formDataObj != null && formDataObj.formJsonObj != null"> |
| | | <v-form-render :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/> |
| | | </div> |
| | | <div v-else> |
| | | <el-alert |
| | | title="节点未绑定表单" |
| | | title="未绑定表单" |
| | | type="warning" |
| | | :closable="false" |
| | | > |
| | | </el-alert> |
| | | </div> |
| | | <div v-if="formDataList.length <= 1"> |
| | | <div class="before_none">前置阶段:<span>不存在前置阶段</span></div> |
| | | <el-alert |
| | | title="不存在前置节点" |
| | | title="不存在前置阶段" |
| | | type="warning" |
| | | :closable="false" |
| | | > |
| | |
| | | </el-tab-pane> |
| | | <!--流程图--> |
| | | <el-tab-pane label="流程图" name="3"> |
| | | <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/> |
| | | <div class="tab-min-height" v-loading="imgLoading"> |
| | | <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-card> |
| | |
| | | props: {}, |
| | | data() { |
| | | return { |
| | | formLoading: false, // 加载表单 |
| | | imgLoading: false, // 加载流程图 |
| | | projectName: '', |
| | | flowName: '', |
| | | // 模型xml数据 |
| | |
| | | methods: { |
| | | handleClick(tab, event) { |
| | | if (tab.name === '3'){ |
| | | this.imgLoading = true |
| | | flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => { |
| | | this.imgLoading = false |
| | | this.flowData = res.data; |
| | | }) |
| | | } |
| | |
| | | /** 获取流程变量内容 */ |
| | | processVariables(taskId) { |
| | | if (taskId) { |
| | | this.formLoading = true |
| | | // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示 |
| | | flowTaskFormDetail(taskId).then(res => { |
| | | this.formDataList = res.data |
| | |
| | | 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); |
| | | |
| | |
| | | // this.formJson = this.formDataList[0].formJsonObj.formJson |
| | | }) |
| | | } |
| | | this.formLoading = false |
| | | // this.$nextTick(() => { |
| | | // // 回显表单 |
| | | // this.$refs.vFormRef.setFormJson(res.data.formJson); |
| | |
| | | margin-bottom: 20px; |
| | | box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; |
| | | } |
| | | .before { |
| | | span { |
| | | color: #F56C6C |
| | | } |
| | | margin-bottom: 15px; |
| | | color: #E6A23C |
| | | } |
| | | .before_none { |
| | | span { |
| | | color: #F56C6C |
| | | } |
| | | margin-bottom: 15px; |
| | | margin-top: 15px; |
| | | color: #E6A23C |
| | | } |
| | | .reject-but { |
| | | position: absolute; |
| | | top: 4px; |
| | | right: 4px |
| | | } |
| | | .current { |
| | | span { |
| | | color: #409EFF |
| | | } |
| | | margin-bottom: 15px; |
| | | color: #E6A23C |
| | | } |
| | | .op-list { |
| | | position: absolute; |
| | | top: 4px; |
| | | right: 4px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .tab-min-height { |
| | | min-height: 500px; |
| | | } |
| | | </style> |