dengjie commit : 样式优化

# Conflicts:
#	flowable-engine-web/src/components/common/Comment.vue
#	flowable-engine-web/src/views/workspace/DisposalTask.vue

flowable-engine-web/package-lock.json

@@ -1824,16 +1824,6 @@
           "integrity": "sha1-4a1IbmxUUBY0xsOXxcEh2qODYHw=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428108619&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1860,34 +1850,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
@@ -1909,25 +1871,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz",
@@ -1992,16 +1935,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1597229595508&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -2018,18 +1951,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -12142,6 +12063,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.3.tgz?cache=0&sync_timestamp=1598983087864&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.3.tgz",

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

@@ -19,3 +19,10 @@ export function getInitiatedInstanceList() {
         method: "get",
     })
 }
+
+export function getInitiatedInstanceInfo(processInstanceId) {
+    return request({
+        url: "/flowable/process/instance/self/info/"+processInstanceId,
+        method: "get",
+    })
+}

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

@@ -22,6 +22,22 @@ export function completeTask(params) {
         data: params
     })
 }
+export function refuseTask(params) {
+    return request({
+        url: "/flowable/process/task/refuse",
+        method: "put",
+        data: params
+    })
+}
+
+export function rollBackTask(params) {
+    return request({
+        url: "/flowable/process/task/rollback",
+        method: "put",
+        data: params
+    })
+}
+
 export function addComment(params) {
     return request({
         url: "/flowable/process/task/comment",

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

@@ -1,21 +1,22 @@
 <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" :click-close="true"
-<!--    <TextareaAndUpload ref="upload" :placeholder="placeholder" :image-size="imageSize" :attachment-max-size="attachmentMaxSize"></TextareaAndUpload>-->
+            @ok="selectConfirm()">
     <!--显示转签弹出框-->
-    <div v-if="showTransfer" style="margin-bottom: 10px">
+    <div v-if="type === 3" 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">
+    <div v-if="type === 4" style="margin-bottom: 10px">
       <span>回退节点：</span>
-      <el-select v-model="select" slot="prepend" placeholder="选择要回退到的节点">
+      <el-select v-if="userTaskOption.length >0 " v-model="backNode" slot="prepend" placeholder="选择要回退到的节点">
-        <!--        <el-option label="餐厅名" value="1"></el-option>-->
+        <el-option v-for="(option,index) in userTaskOption" :key="index"
+                   :label="option.label" :value="option.value"/>
       </el-select>
-      <span style="margin-left: 10px;color: rgb(140, 140, 140);">暂无可回退节点</span>
+      <span v-if="userTaskOption.length <=0 " style="margin-left: 10px;color: rgb(140, 140, 140);">暂无可回退节点</span>
     </div>
     <!--显示增加审批人弹出框-->
-    <div v-if="addApproval" style="margin-bottom: 10px">
+    <div v-if="type === 5" style="margin-bottom: 10px">
       <span>给谁加签：</span>
       <el-button size="mini" icon="el-icon-user">选择人员</el-button>
     </div>
@@ -25,7 +26,7 @@
           :rows="4"
           maxlength="255"
           show-word-limit
-          :placeholder="placeholder"
+          placeholder="评论内容"
           v-model="context">
       </el-input>
     </div>
@@ -62,8 +63,7 @@
                :headers="headers"
                :auto-upload="true"
                :on-success="handleAttachmentUploadSuccess"
-               :before-upload="beforeAttachmentUpload"
+               :before-upload="beforeAttachmentUpload">
-    >
       <el-button size="small" round>
         <i class="el-icon-paperclip"></i>
         <span>选择文件</span>
@@ -78,14 +78,8 @@ import {deleteFile} from "@/api/common";
 import {getBaseUrl} from "../../api/request";
 
 export default {
-  name: "TextareaAndUpload",
+  name: "Comment",
   props: {
-    value: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
     title: {
       type: String,
       default: '添加评论'
@@ -98,6 +92,10 @@ export default {
       type: Number,
       default: 5
     },
+    type: {
+      type: Number,
+      default: 1
+    },
     attachmentMaxSize: {
       type: Number,
       default: 100
@@ -109,6 +107,14 @@ export default {
     },
     attachmentTip() {
       return this.attachmentMaxSize > 0 ? `| 单个附件不超过${this.attachmentMaxSize}MB` : "";
+    },
+    userTaskOption() {
+      let optionList = this.$store.state.userTaskOption;
+      if (optionList) {
+        return optionList
+      } else {
+        return []
+      }
     }
   },
   data() {
@@ -123,53 +129,12 @@ export default {
         authorization: localStorage.getItem("token")
       },
       context: null,
-      showTransfer:false,
+      backNode: null,
-      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);
@@ -238,13 +203,11 @@ export default {
           url: image.url
         })
       })
-
       let data = {
         context: this.context,
         attachments: fileList
       }
-      console.log(this.attachmentList, this.imageList)
+      this.$emit("ok", data, this.type)
-      this.$emit("ok", data)
       this.visible = false;
     }
   }
@@ -256,9 +219,11 @@ export default {
   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/components/common/RolePickerMe.vue

@@ -1,289 +0,0 @@
-<template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
-    <div class="picker">
-      <div class="candidate" v-loading="loading">
-        <div class="role-header">
-          <div>系统角色</div>
-        </div>
-        <div class="org-items">
-          <el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
-          <!-- 系统角色-->
-          <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
-               @click="selectChange(roleItem)">
-            <el-checkbox v-model="roleItem.selected" v-if="showCheckbox" @change="selectChange(roleItem)"></el-checkbox>
-            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
-            <span>{{ roleItem.label }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="selected">
-        <div class="count">
-          <span>已选 {{ selectList.length }} 项</span>
-          <span @click="clearSelected">清空</span>
-        </div>
-        <div class="org-items">
-          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
-          <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
-            <i class="el-icon-user-solid"></i>
-            <span>{{ org.label }}</span>
-            <i class="el-icon-close" @click="noSelected(org)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </w-dialog>
-</template>
-
-<script>
-import {getRole} from "@/api/org";
-
-export default {
-  name: "RolePicker",
-  props: {
-    selected: {
-      default: () => {
-        return [];
-      },
-      type: Array
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      loading: false,
-      title: "请选择",
-      multiple: true,//是否多选
-      showCheckbox: true,//是否显示左侧选择框
-      roleList: [
-        // {
-        //   value: 1,
-        //   label: "超级管理员"
-        // },
-        // {
-        //   value: 2,
-        //   label: "普通角色"
-        // },
-        // {
-        //   value: 100,
-        //   label: "前端开发人员"
-        // },
-        // {
-        //   value: 101,
-        //   label: "图片文件管理员"
-        // },
-        // {
-        //   value: 102,
-        //   label: "附件管理员"
-        // },
-        // {
-        //   value: 103,
-        //   label: "权限测试角色"
-        // }
-      ],
-      selectList: []
-    };
-  },
-  // created() {
-  //   this.getRole();
-  // },
-  methods: {
-    show(){
-      console.log("4444444444444444444")
-      this.visible = true
-      this.getRole();
-    },
-    //获取角色信息
-    getRole() {
-      getRole().then(res => {
-        this.roleList = res.data;
-      });
-    },
-    //选中角色
-    selectChange(roleItem) {
-      // 左侧有选择框
-      if (this.showCheckbox) {
-        // 左侧有选择框 + 多选
-        if (this.multiple) {
-          for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
-              this.selectList.splice(i, 1);
-              break;
-            }
-          }
-          if (roleItem.selected) {
-            this.selectList.push(roleItem);
-          }
-        } else {// 左侧有选择框 + 单选
-          //用于左侧选择框选中取消,引起右侧数据变化
-          for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
-              this.selectList.splice(i, 1);
-              break;
-            }
-          }
-          if (roleItem.selected) {
-            this.selectList = [roleItem];
-          }
-          for (let i = 0; i < this.roleList.length; i++) {
-            for (let j = 0; j < this.selectList.length; j++) {
-              if (this.roleList[i].value !== this.selectList[j].value) {
-                this.roleList[i].selected = false;
-              }
-            }
-          }
-        }
-      } else {// 左侧没有选择框
-        // 左侧没有选择框 + 多选
-        if (this.multiple) {
-          for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
-              this.selectList.splice(i, 1);
-              break;
-            }
-          }
-          this.selectList.push(roleItem);
-        }else {// 左侧没有选择框 + 单选
-          this.selectList = [roleItem];
-        }
-      }
-    },
-    //右侧的×
-    noSelected(org) {
-      for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === org.value) {
-          this.selectList.splice(i, 1);
-          break;
-        }
-      }
-      org.selected = false;
-    },
-    //清空
-    clearSelected() {
-      this.$confirm("您确定要清空已选中的项?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].selected === true) {
-            this.selectList[i].selected = false;
-          }
-        }
-        this.selectList = [];
-      });
-    },
-    //确定按钮
-    selectConfirm() {
-      console.log(this.selectList)
-      this.$emit("ok", Object.assign([], this.selectList.map(item =>{
-        return  {
-          roleId : item.value,
-          roleName: item.label
-        }
-      })));
-      this.visible = false;
-    }
-
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@containWidth: 278px;
-/deep/ .el-dialog__body {
-  padding: 10px 20px;
-}
-
-
-.picker {
-  height: 402px;
-  position: relative;
-  text-align: left;
-
-  .candidate {
-    left: 0;
-    top: 0;
-  }
-
-  .role-header {
-    padding: 10px !important;
-    margin-bottom: 5px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-}
-
-.candidate, .selected {
-  position: absolute;
-  display: inline-block;
-  width: @containWidth;
-  height: 400px;
-  border: 1px solid #e8e8e8;
-}
-
-.selected {
-  border-left: none;
-  right: 0;
-  top: 0;
-
-  .count {
-    width: calc(@containWidth - 20px);
-    padding: 10px;
-    display: inline-block;
-    border-bottom: 1px solid #e8e8e8;
-    margin-bottom: 5px;
-
-    & > span:nth-child(2) {
-      float: right;
-      color: #c75450;
-      cursor: pointer;
-    }
-  }
-
-}
-
-
-.org-items {
-  overflow-y: auto;
-  height: 350px;
-
-  .el-icon-close {
-    position: absolute;
-    right: 5px;
-    cursor: pointer;
-    font-size: larger;
-  }
-
-  .org-role-item {
-    padding: 7px 5px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin: 0 5px;
-    border-radius: 5px;
-    position: relative;
-
-    &:hover {
-      background: #f1f1f1;
-    }
-
-    > span {
-      margin-left: 5px;
-    }
-
-  }
-}
-
-
-::-webkit-scrollbar {
-  float: right;
-  width: 4px;
-  height: 4px;
-  background-color: white;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 16px;
-  background-color: #efefef;
-}
-</style>

flowable-engine-web/src/views/admin/layout/process/ProcessTree.vue

@@ -30,6 +30,7 @@ export default {
       return this.$store.state.parentMap;
     },
     dom() {
+      console.log(this.$store.state.design)
       return this.$store.state.design.process;
     },
     viewer(){

flowable-engine-web/src/views/common/form/FormRender.vue

@@ -78,6 +78,7 @@ export default {
         if (item.name === 'SpanLayout'){
           this.loadFormConfig(item.props.items)
         }else {
+          console.log(item,!item.perm)
           if (!item.perm){
             this.$set(item, 'perm', 'E')
           }

flowable-engine-web/src/views/common/form/components/ImageUpload.vue

@@ -38,7 +38,11 @@
       </template>
       <template v-else-if="perm === 'R'">
         <div v-for="(item , index) in _value" :key="index">
-          <img :src="item.url" alt="" style="width: 65px;height: 65px">
+          <el-image
+              style="width: 100px; height: 100px"
+              :src="item.url"
+              :preview-src-list="[item.url]">
+          </el-image>
         </div>
       </template>
     </template>

flowable-engine-web/src/views/common/form/components/SpanLayout.vue

@@ -23,9 +23,9 @@
         <el-col :span="24 / rows.length" v-for="(item, ri) in rows" :key="ri + '_row'">
           <el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'" :prop="item.id"
                         :label="item.title" :key="item.name + ri">
-            <form-design-render v-model="_value[item.id]" :mode="mode" :config="item"/>
+            <form-design-render v-model="_value[item.id]" :perm="item.perm" :mode="mode" :config="item"/>
           </el-form-item>
-          <form-design-render v-else v-model="_value" :mode="mode" :config="item"/>
+          <form-design-render v-else v-model="_value" :perm="item.perm" :mode="mode" :config="item"/>
         </el-col>
       </el-row>
 

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

@@ -45,64 +45,75 @@
         <div class="top">
           <div class="top_left">
             <el-avatar size="large" :src="avatar"></el-avatar>
-            <span style="text-align: center;color: #19191a;font-size: 14px;">Clay</span>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectTask.initiatorName }}</span>
           </div>
           <div class="top_right">
             <div style="margin-bottom: 12px">
-               <span style="font-size: 15px;margin-right: 15px">财务</span>
+              <span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
               <el-tag style="font-size: 12px" size="mini">进行中</el-tag>
             </div>
             <div>
-              <span style="color: rgb(108, 108, 108);" >编号: d69e9582-873f-11ed-b0e7-fa28000d2c27</span>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
             </div>
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render-view ref="taskViewForm" :form-items="taskData.formItems"
+        <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
                           v-model="taskData.formData"/>
         <!--        <process-diagram-viewer/>-->
         <div style="height: 15px;background:#f5f5f5;"></div>
         <footer class="footer">
-          <div class="footer_comment" @click="$refs.comment.showComment()">
+          <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/>-->
           <div style="margin-right: 20px;">
             <el-dropdown>
               <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" @click.native="$refs.comment.showTransferBox()">转交</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</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-release" @click.native="showBackNodeBox()">退回</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-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="$refs.comment.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">拒绝</el-button>
+            <el-button type="danger" size="mini" plain round style="margin-left: 20px"
+                       @click="showRefuseBox()">拒绝
+            </el-button>
             <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
           </div>
         </footer>
       </div>
     </el-drawer>
-    <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
+    <comment ref="comment"
+             :title="commentInfo.title"
+             :type="commentInfo.type"
+             :max-size="5"
+             :attachment-max-size="20" @ok="commentConfirm"/>
   </div>
 </template>
 
 <script>
 import Comment from "../../components/common/Comment";
-import FormRenderView from "@/views/common/form/FormRender";
+import FormRender from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {addComment, completeTask, getTaskInfo, getTaskList} from "@/api/task";
+import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask,rollBackTask} from "@/api/task";
 
 export default {
   name: "DisposalTask",
-  components: { Comment, FormRenderView, ProcessDiagramViewer},
+  components: { Comment, FormRender, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
       selectTask: {},
       tableData: [],
+      commentInfo: {
+        title: null,
+        type: null, //1 添加评论 2 拒绝
+      },
       loading: false,
       taskData: {
         formData: {},
@@ -135,9 +146,6 @@ export default {
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
-      this.$store.state.runningList = [];
-      this.$store.state.endList = [];
-      this.$store.state.noTakeList = [];
       this.$store.state.diagramMode = "viewer";
       this.$store.state.preview = false;
     },
@@ -147,9 +155,7 @@ export default {
       getTaskInfo(taskId).then(res => {
         that.taskData = res.data;
         that.$store.state.design = that.taskData;
-        that.$store.state.runningList = that.taskData.runningList;
+        that.$store.state.userTaskOption = that.taskData.userTaskOption;
-        that.$store.state.endList = that.taskData.endList;
-        that.$store.state.noTakeList = that.taskData.noTakeList;
         this.loading = false;
       });
     },
@@ -164,7 +170,101 @@ export default {
         this.$message.success(res.msg);
       });
     },
-    commentConfirm(data) {
+    showCommentBox() {
+      this.commentInfo = {
+        title: "添加评论",
+        type: 1
+      }
+      this.commentShow()
+    },
+    showRefuseBox() {
+      this.commentInfo = {
+        title: "拒绝任务",
+        type: 2
+      }
+      this.commentShow()
+    },
+    showTransferBox() {
+      this.commentInfo = {
+        title: "转交给其他人审批",
+        type: 3
+      }
+      this.commentShow()
+    },
+    showBackNodeBox() {
+      this.commentInfo = {
+        title: "退回到之前节点",
+        type: 4
+      }
+      this.commentShow()
+    },
+    showAddApprovalBox() {
+      this.commentInfo = {
+        title: "加签",
+        type: 5
+      }
+      this.commentShow()
+    },
+    showRevocationBox() {
+      this.commentInfo = {
+        title: "撤销当前流程",
+        type: 6
+      }
+      this.commentShow()
+    },
+    commentShow() {
+      this.$refs.comment.show()
+    },
+    /**
+     * 拒绝提交
+     * @param data
+     */
+    submitRefuse(data) {
+      let params = {
+        taskId: this.selectTask.taskId,
+        comment: data
+      };
+      refuseTask(params).then(res => {
+        this.approveOpen = false;
+        this.getList();
+        this.$message.success(res.msg);
+      })
+    },
+    /**
+     * 评论回调
+     * @param data
+     * @param type
+     */
+    commentConfirm(data, type) {
+      switch (type) {
+        case 1:
+          this.submitComment(data);
+          break;
+        case 2:
+          this.submitRollBack(data);
+          break;
+        case 3:
+          this.submitRefuse(data);
+          break;
+        default :
+          break;
+      }
+    },
+    submitRollBack(data){
+      let params = {
+        taskId: this.selectTask.taskId,
+        rollBackId: data.rollBackId,
+        comment: data,
+      };
+      rollBackTask(params).then(res=>{
+        this.$message.success(res.msg);
+      })
+    },
+    /**
+     * 提交评论
+     * @param data
+     */
+    submitComment(data) {
       this.$set(data, "taskId", this.selectTask.taskId);
       addComment(data).then(res => {
         this.$message.success(res.msg);
@@ -178,12 +278,14 @@ export default {
 .top {
   padding: 0 10px 10px 10px;
   display: flex;
+
   .top_left {
     display: flex;
     flex-direction: column;
     width: 50px;
     align-items: center;
   }
+
   .top_right {
     display: flex;
     flex-direction: column;
@@ -220,4 +322,8 @@ export default {
     top: -5px !important;
   }
 }
+
+.el-dropdown-link, .footer_comment {
+  cursor: pointer;
+}
 </style>

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

@@ -45,18 +45,40 @@
     </el-table>
     <el-drawer
         title="审批详情"
-        size="50%"
+        size="500px"
         :visible.sync="approveOpen"
         direction="rtl">
       <div v-loading="loading">
-        <form-render-view ref="taskViewForm" :form-items="taskData.formItems"
+        <div class="top">
-                          v-model="taskData.formData"/>
+          <div class="top_left">
-        <process-diagram-viewer/>
+            <el-avatar size="large" :src="avatar"></el-avatar>
-        <el-button type="success" @click="submitTask()">通过</el-button>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectProcessInstance.approveName }}</span>
-        <el-button type="success" @click="$refs.comment.show()">评论</el-button>
+          </div>
+          <div class="top_right">
+            <div style="margin-bottom: 12px">
+              <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
+              <el-tag style="font-size: 12px;margin:0 15px" size="mini">进行中</el-tag>
+              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
+                <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
+              </el-tooltip>
+            </div>
+            <div>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.taskId }}</span>
+            </div>
+          </div>
+        </div>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
+                          v-model="processInstanceData.formData"/>
+<!--        <process-diagram-viewer v-if="!loading"/>-->
+        <div style="height: 15px;background:#f5f5f5;"></div>
       </div>
     </el-drawer>
-    <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
+
+    <el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
+      <process-diagram-viewer v-if="processDiagramViewer"/>
+      <div style="height: 70px;"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -64,7 +86,7 @@
 import Comment from "@/components/common/Comment";
 import FormRenderView from '@/views/common/form/FormRender'
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {getInitiatedInstanceList} from "@/api/processInstance";
+import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
 
 export default {
   name: "InitiatedInstance",
@@ -72,14 +94,16 @@ export default {
   data() {
     return {
       approveOpen: false,
-      selectTask: {},
+      processDiagramViewer: false,
+      selectProcessInstance: {},
       tableData: [],
       loading: false,
-      taskData: {
+      processInstanceData: {
         formData: {},
         formItems: [],
         processList: [],
-      }
+      },
+      avatar: require("@/assets/image/avatar.png")
     };
   },
   created() {
@@ -87,10 +111,42 @@ export default {
   },
   methods: {
     clickRow(row) {
+      console.log(row)
       this.approveOpen = true;
-      // this.loadProcessTask(row.taskId)
+      this.loadProcessInstance(row.processInstanceId)
-      this.selectTask = row
+      this.selectProcessInstance = row
     },
+    loadProcessInstance(processInstanceId) {
+      let that = this;
+      this.init();
+      getInitiatedInstanceInfo(processInstanceId).then(res => {
+        let data = res.data
+        that.processInstanceData = data
+        that.$store.state.design = data;
+        that.$store.state.runningList = data.runningList;
+        that.$store.state.endList = data.endList;
+        that.$store.state.noTakeList = data.noTakeList;
+        this.loading = false;
+        console.log(data, "获取到的结果数据")
+      })
+    },
+
+
+    init() {
+      this.processInstanceData = {
+        formData: {},
+        formItems: [],
+        processList: []
+      };
+      this.loading = true;
+      this.$store.state.design = this.taskData;
+      this.$store.state.runningList = [];
+      this.$store.state.endList = [];
+      this.$store.state.noTakeList = [];
+      this.$store.state.diagramMode = "viewer";
+      this.$store.state.preview = false;
+    },
+
     getList() {
       getInitiatedInstanceList().then(res => {
         let data = res.data
@@ -108,6 +164,26 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.top {
+  padding: 0 10px 10px 10px;
+  display: flex;
+
+.top_left {
+  display: flex;
+  flex-direction: column;
+  width: 50px;
+  align-items: center;
+}
+
+.top_right {
+  width: 85%;
+  display: flex;
+  flex-direction: column;
+//justify-content: space-between;
+  font-size: 13px;
+  margin-left: 10px;
+}
+}
 
 </style>

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

@@ -65,8 +65,8 @@
 import InitiateProcess from "./InitiateProcess";
 import InitiatedInstance from "./InitiatedInstance";
 import DisposalTask from "./DisposalTask";
-import {getProcessDefinitionList} from "../../api/processDefinition";
+import {getProcessDefinitionList} from "@/api/processDefinition";
-import {startProcessInstance} from "../../api/processInstance";
+import {startProcessInstance} from "@/api/processInstance";
 
 export default {
   name: "workSpace",