dengjie commit : 审批详情footer更多的弹出框

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/9

flowable-engine-web/src/components/common/Comment.vue

@@ -1,12 +1,31 @@
 <template>
-  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible" @ok="selectConfirm">
+  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible" @ok="selectConfirm()">
+<!--    <TextareaAndUpload ref="upload" :placeholder="placeholder" :image-size="imageSize" :attachment-max-size="attachmentMaxSize"></TextareaAndUpload>-->
+    <!--显示转签弹出框-->
+    <div v-if="showTransfer" style="margin-bottom: 10px">
+      <span>转交给谁：</span>
+      <el-button size="mini" icon="el-icon-user">选择人员</el-button>
+    </div>
+    <!--显示退回节点弹出框-->
+    <div v-if="showBackNode" style="margin-bottom: 10px">
+      <span>回退节点：</span>
+      <el-select v-model="select" slot="prepend" placeholder="选择要回退到的节点">
+        <!--        <el-option label="餐厅名" value="1"></el-option>-->
+      </el-select>
+      <span style="margin-left: 10px;color: rgb(140, 140, 140);">暂无可回退节点</span>
+    </div>
+    <!--显示增加审批人弹出框-->
+    <div v-if="addApproval" style="margin-bottom: 10px">
+      <span>给谁加签：</span>
+      <el-button size="mini" icon="el-icon-user">选择人员</el-button>
+    </div>
     <div class="el-textarea">
       <el-input
           type="textarea"
           :rows="4"
           maxlength="255"
           show-word-limit
-          placeholder="评论内容"
+          :placeholder="placeholder"
           v-model="context">
       </el-input>
     </div>
@@ -59,14 +78,22 @@ import {deleteFile} from "@/api/common";
 import {getBaseUrl} from "../../api/request";
 
 export default {
-  name: "Comment",
+  name: "TextareaAndUpload",
   props: {
-    // value: {
+    value: {
-    //   type: Array,
+      type: Array,
-    //   default: () => {
+      default: () => {
-    //     return [];
+        return [];
-    //   }
+      }
-    // },
+    },
+    title: {
+      type: String,
+      default: '添加评论'
+    },
+    placeholder: {
+      type: String,
+      default: '评论内容'
+    },
     imageSize: {
       type: Number,
       default: 5
@@ -84,12 +111,9 @@ export default {
       return this.attachmentMaxSize > 0 ? `| 单个附件不超过${this.attachmentMaxSize}MB` : "";
     }
   },
-  created() {
-  },
   data() {
     return {
       visible: false,
-      title: "添加评论",
       imageList: [],
       attachmentList: [],
       disabled: false,
@@ -98,13 +122,54 @@ export default {
       headers: {
         authorization: localStorage.getItem("token")
       },
-      context: null
+      context: null,
+      showTransfer:false,
+      showBackNode:false,
+      addApproval:false
     };
   },
-
   methods: {
-    show() {
+    //显示评论弹出框
+    showComment() {
       this.visible = true
+      this.showTransfer=false
+      this.showBackNode=false
+    },
+    //显示转签弹出框
+    showTransferBox(){
+      this.visible = true
+      this.showTransfer=true
+      this.showBackNode=false
+      this.addApproval=false
+      this.title="转交给其他人审批"
+      this.placeholder="转交意见"
+    },
+    //显示退回节点弹出框
+    showBackNodeBox(){
+      this.visible = true
+      this.showTransfer=false
+      this.showBackNode=true
+      this.addApproval=false
+      this.title="退回到之前节点"
+      this.placeholder="退回意见"
+    },
+    //显示增加审批人弹出框
+    showAddApprovalBox(){
+      this.visible = true
+      this.showTransfer=false
+      this.showBackNode=false
+      this.addApproval=true
+      this.title="后方增加审批人"
+      this.placeholder="加签意见"
+    },
+    //显示撤销当前流程弹出框
+    showRevocationBox(){
+      this.visible = true
+      this.showTransfer=false
+      this.showBackNode=false
+      this.addApproval=false
+      this.title="撤销当前流程"
+      this.placeholder="撤销原因"
     },
     handleChange(file, imageList) {
       this.imageList = imageList.slice(-3);
@@ -187,6 +252,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/.el-select .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+}
+/deep/.el-select .el-input .el-select__caret {
+  line-height: 32px;
+}
 /deep/ .el-upload--picture-card {
   width: 65px;
   height: 65px;

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

@@ -63,27 +63,25 @@
         <!--        <process-diagram-viewer/>-->
         <div style="height: 15px;background:#f5f5f5;"></div>
         <footer class="footer">
-          <div class="footer_comment" @click="$refs.comment.show()">
+          <div class="footer_comment" @click="$refs.comment.showComment()">
             <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
             <span style="font-size: 12px;">评论</span>
           </div>
           <div style="margin-right: 20px;">
             <el-dropdown>
-              <span class="el-dropdown-link" style="color: #2a99ff">
+              <span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
                 更多<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item icon="el-icon-s-custom">转交</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-custom" @click.native="$refs.comment.showTransferBox()">转交</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-s-release">退回</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-release" @click.native="$refs.comment.showBackNodeBox()">退回</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-s-check">加签</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-check" @click.native="$refs.comment.showAddApprovalBox()">加签</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-refresh-left">撤销</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="$refs.comment.showRevocationBox()">撤销</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
             <el-button type="danger" size="mini" plain round style="margin-left: 20px">拒绝</el-button>
             <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
           </div>
-          <!--          <el-button type="success" @click="submitTask()">通过</el-button>-->
-          <!--          <el-button type="success" @click="$refs.comment.show()">评论</el-button>-->
         </footer>
       </div>
     </el-drawer>
@@ -99,7 +97,7 @@ import {addComment, completeTask, getTaskInfo, getTaskList} from "@/api/task";
 
 export default {
   name: "DisposalTask",
-  components: {Comment, FormRenderView, ProcessDiagramViewer},
+  components: { Comment, FormRenderView, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -215,6 +213,7 @@ export default {
     display: flex;
     flex-direction: column;
     margin-left: 20px;
+    cursor: pointer;
   }
 
   /deep/ .el-dropdown-menu {