flowable-engine-web/src/api/request.js

@@ -11,8 +11,8 @@ Vue.prototype.$axios = axios;
 // 字体图标
 
 export function getBaseUrl(){
-	return "http://gateway.mytwins.top"
+	// return "http://gateway.mytwins.top"
-	// return "http://localhost:8000"
+	return "http://localhost:8000"
 }
 
 const service = axios.create({

flowable-engine-web/src/views/workspace/DisposalTask.vue

@@ -44,8 +44,8 @@
       <div v-loading="loading">
         <div class="top">
           <div class="top_left">
-            <el-avatar size="large" :src="avatar"></el-avatar>
+            <el-avatar size="large" :src="taskData.userInfo.avatar"></el-avatar>
-            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectTask.initiatorName }}</span>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ taskData.userInfo.name }}</span>
           </div>
           <div class="top_right">
             <div style="margin-bottom: 12px">
@@ -58,15 +58,48 @@
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
+        <div>
-                          v-model="taskData.formData"/>
+          <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
+                       v-model="taskData.formData"/>
+        </div>
+        <div style="margin: 10px">
+          <el-timeline>
+            <el-timeline-item  v-for="(operation,index) in taskData.operationList"
+                               :key="index" :timestamp="operation.startTime"
+                               :icon="operation.icon"
+                               :color="operation.color"
+                               size="large"
+                               placement="top">
+              <el-card>
+                <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
+                <p>{{operation.userInfo.name}}</p>
+                <template v-if="operation.operation == 'opinion'">
+                  <h4>{{operation.operationName}}</h4>
+                  <p>王小虎 提交于 2018/4/12 20:46</p>
+                </template>
+                <template v-if="operation.operation == 'comment'">
+                  {{operation.comment}}
+                </template>
+
+
+
+
+              </el-card>
+            </el-timeline-item>
+            <el-timeline-item icon="el-icon-more">
+              <h2>审批进行中</h2>
+            </el-timeline-item>
+
+
+          </el-timeline>
+        </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
         <el-footer class="footer">
           <div class="footer_comment" @click="showCommentBox">
             <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
             <span style="font-size: 12px;">评论</span>
           </div>
-<!--          <process-diagram-viewer/>-->
+          <!--          <process-diagram-viewer/>-->
           <div style="margin-right: 20px;">
             <el-dropdown>
               <span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
@@ -76,7 +109,7 @@
                 <el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-s-release" @click.native="showBackNodeBox()">退回</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="showRevocationBox()">撤销</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-refresh-left" @click.native="showRevocationBox()">撤销</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
             <el-button type="danger" size="mini" plain round style="margin-left: 20px"
@@ -99,11 +132,11 @@
 import Comment from "../../components/common/Comment";
 import FormRender from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask,rollBackTask} from "@/api/task";
+import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
 
 export default {
   name: "DisposalTask",
-  components: { Comment, FormRender, ProcessDiagramViewer},
+  components: {Comment, FormRender, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -115,9 +148,11 @@ export default {
       },
       loading: false,
       taskData: {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: []
       },
       avatar: require("@/assets/image/avatar.png")
     };
@@ -140,9 +175,11 @@ export default {
     },
     init() {
       this.taskData = {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: []
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
@@ -153,19 +190,42 @@ export default {
       let that = this;
       this.init();
       getTaskInfo(taskId).then(res => {
-        let data=res.data
+        let data = res.data
-        data.formItems.map(item=>{
+        data.formItems.map(item => {
-          if(item.props.required){
+          if (item.props.required) {
-            item.props.required=!item.props.required
+            item.props.required = !item.props.required
           }
           return item
         })
         that.taskData = res.data;
+        for (let operation of that.taskData.operationList) {
+          switch (operation.state) {
+            case 'agree' :
+              this.$set(operation,"icon","el-icon-check")
+              this.$set(operation,"color","#0bbd87")
+              break;
+            case 'process' :
+              this.$set(operation,"icon","el-icon-loading")
+              this.$set(operation,"color","#f78f5f")
+              break;
+            case 'comment' :
+              this.$set(operation,"icon","el-icon-chat-dot-round")
+              this.$set(operation,"color","#0bbd87")
+              break;
+
+            default: break;
+          }
+        }
         that.$store.state.design = that.taskData;
         that.$store.state.userTaskOption = that.taskData.userTaskOption;
         this.loading = false;
       });
     },
+    getTimeLineIcon(operation){
+      switch (operation.state) {
+        case 'agree' : return 'el-icon-check'
+      }
+    },
     submitTask() {
       let params = {
         taskId: this.selectTask.taskId,
@@ -257,13 +317,13 @@ export default {
           break;
       }
     },
-    submitRollBack(data){
+    submitRollBack(data) {
       let params = {
         taskId: this.selectTask.taskId,
         rollBackId: data.rollBackId,
         comment: data,
       };
-      rollBackTask(params).then(res=>{
+      rollBackTask(params).then(res => {
         this.$message.success(res.msg);
       })
     },