| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-card class="box-card" > |
| | | <div slot="header" class="clearfix" style="display: flex"> |
| | | <div style="flex: 1" class="el-icon-document">{{`任务详情:` + this.processName}}</div> |
| | | <div style="flex: 2; color: #303133">{{projectName + '——' + flowName}}</div> |
| | | <el-button style="float: right;" size="mini" type="danger" @click="goBack">关闭</el-button> |
| | | <div slot="header" class="clearfix header-container"> |
| | | <div class="header-title el-icon-document">{{`任务详情:` + this.processName}}</div> |
| | | <div class="header-subtitle">{{projectName + '——' + flowName}}</div> |
| | | <!-- <el-button class="header-close-btn" size="mini" type="danger" @click="goBack">关闭</el-button> --> |
| | | </div> |
| | | <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick"> |
| | | <!--表单信息--> |
| | |
| | | <div v-if="formDataList && formDataList.length > 0"> |
| | | <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative"> |
| | | <el-row> |
| | | <el-col :span="18"> |
| | | <el-col :xs="24" :sm="18"> |
| | | <div v-if="formDataObj.current"> |
| | | <div class="current">当前阶段:<span>{{formDataObj.beforeNodeName}}</span></div> |
| | | </div> |
| | |
| | | </el-alert> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-col :xs="24" :sm="6"> |
| | | <log-time-line v-if="formDataObj.events.length > 0" :log-list="formDataObj.events"/> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </el-tab-pane> |
| | | <!--流程流转记录--> |
| | | <el-tab-pane label="流转记录" name="2"> |
| | | <el-col :span="16" :offset="4" > |
| | | <el-col :xs="24" :sm="{span: 16, offset: 4}" > |
| | | <div class="block"> |
| | | <el-timeline> |
| | | <el-timeline-item |
| | |
| | | }, |
| | | created() { |
| | | this.initPage() |
| | | |
| | | |
| | | // 流程任务重获取变量表单 |
| | | this.processVariables( this.taskForm.taskId, this.taskForm.procInsId) |
| | | this.getFlowRecordList(this.taskForm.procInsId); |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .header-container { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 10px; |
| | | |
| | | .header-title { |
| | | flex: 1; |
| | | min-width: 150px; |
| | | font-weight: bold; |
| | | color: #409EFF; |
| | | } |
| | | |
| | | .header-subtitle { |
| | | flex: 2; |
| | | min-width: 200px; |
| | | color: #303133; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .header-close-btn { |
| | | margin-left: auto; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 768px) { |
| | | .header-container { |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | |
| | | .header-subtitle { |
| | | min-width: 100%; |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .header-close-btn { |
| | | margin-left: 0; |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | .form-warp { |
| | | min-width: auto !important; |
| | | padding: 10px !important; |
| | | } |
| | | |
| | | ::v-deep .el-descriptions-item__label { |
| | | width: 80px; |
| | | } |
| | | } |
| | | |
| | | .test-form { |
| | | margin: 15px auto; |
| | | width: 800px; |
| | |
| | | } |
| | | |
| | | .form-warp { |
| | | min-width: 700px; |
| | | padding: 20px; |
| | | margin-top: 5px; |
| | | margin-bottom: 20px; |