dengjie commit : 选择系统角色

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

flowable-engine-web/src/App.vue

@@ -15,8 +15,10 @@
     data() {
       return {}
     },
-    mounted() {
+    created() {
       getToken()
+    },
+    mounted() {
       let beforeUrl = sessionStorage.getItem('router-path')
       if(beforeUrl === undefined || beforeUrl === ''){
         //this.$router.push("/workPanel")

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

@@ -12,3 +12,10 @@ export function startProcessInstance(param) {
         data: param
     })
 }
+
+export function getInitiatedInstanceList() {
+    return request({
+        url: "/flowable/process/instance/self",
+        method: "get",
+    })
+}

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

@@ -5,16 +5,19 @@ import { Notification, MessageBox, Message } from "element-ui";
 
 // 第三方插件
 import "element-ui/lib/theme-chalk/index.css";
-import da from "element-ui/src/locale/lang/da";
 import {getToken} from "../main";
-import th from "element-ui/src/locale/lang/th";
 
 Vue.prototype.$axios = axios;
 // 字体图标
 
+export function getBaseUrl(){
+	// return "http://gateway.mytwins.top"
+	return "http://localhost:8000"
+}
+
 const service = axios.create({
-	baseURL: "http://localhost:8000",
+	baseURL: getBaseUrl(),
-	// baseURL: "http://security-react.mytwins.top",
+	// baseURL: "http://gateway.mytwins.top",
 	// baseURL: "http://gateway.odliken.cn",
 	timeout: 50000
 });

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

@@ -8,6 +8,7 @@ export function getTaskList() {
         method: "get",
     })
 }
+
 export function getTaskInfo(taskId) {
     return request({
         url: "/flowable/process/task/"+taskId,
@@ -21,3 +22,12 @@ export function completeTask(params) {
         data: params
     })
 }
+export function addComment(params) {
+    return request({
+        url: "/flowable/process/task/comment",
+        method: "post",
+        data: params
+    })
+}
+
+

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

@@ -1,5 +1,5 @@
 <template>
-  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible">
+  <w-dialog :border="false" closeFree width="500px" :title="title" v-model="visible" @ok="selectConfirm">
     <div class="el-textarea">
       <el-input
           type="textarea"
@@ -7,18 +7,18 @@
           maxlength="255"
           show-word-limit
           placeholder="评论内容"
-          v-model="textarea">
+          v-model="context">
       </el-input>
     </div>
     <div style="margin: 20px 0">
-      <el-upload :file-list="fileList" action="#"
+      <el-upload :file-list="imageList" action="#"
-                 :limit="maxSize" with-credentials
+                 :limit="imageSize" with-credentials
-                 :multiple="maxSize > 0"
+                 :multiple="imageSize > 0"
                  :data="uploadParams"
                  list-type="picture-card"
                  :action="uploadFileUrl"
                  :headers="headers"
-                 :auto-upload="false"
+                 :auto-upload="true"
                  :on-success="handleUploadSuccess"
                  :before-upload="beforeUpload">
         <i slot="default" class="el-icon-plus"></i>
@@ -41,9 +41,9 @@
                :multiple="attachmentMaxSize > 0"
                :action="uploadFileUrl"
                :headers="headers"
-               :auto-upload="false"
+               :auto-upload="true"
-               :on-success="handleUploadSuccess"
+               :on-success="handleAttachmentUploadSuccess"
-               :before-upload="beforeUpload"
+               :before-upload="beforeAttachmentUpload"
     >
       <el-button size="small" round>
         <i class="el-icon-paperclip"></i>
@@ -56,17 +56,18 @@
 
 <script>
 import {deleteFile} from "@/api/common";
+import {getBaseUrl} from "../../api/request";
 
 export default {
   name: "Comment",
   props: {
-    value: {
+    // value: {
-      type: Array,
+    //   type: Array,
-      default: () => {
+    //   default: () => {
-        return [];
+    //     return [];
-      }
+    //   }
-    },
+    // },
-    maxSize: {
+    imageSize: {
       type: Number,
       default: 10
     },
@@ -77,51 +78,65 @@ export default {
   },
   computed: {
     sizeTip() {
-      return this.maxSize > 0 ? `| 每张图不超过${this.maxSize}MB` : "";
+      return this.imageSize > 0 ? `| 每张图不超过${this.imageSize}MB` : "";
     },
     attachmentTip() {
       return this.attachmentMaxSize > 0 ? `| 单个附件不超过${this.attachmentMaxSize}MB` : "";
     }
   },
   created() {
-    this.fileList = this._value;
-    console.log(this.value, "images");
   },
   data() {
     return {
       visible: false,
       title: "添加评论",
-      fileList: [],
+      imageList: [],
       attachmentList: [],
       disabled: false,
       uploadParams: {},
-      uploadFileUrl: "http://security-react.mytwins.top/flowable/process/file",
+      uploadFileUrl: getBaseUrl() + "/flowable/process/file",
       headers: {
         authorization: localStorage.getItem("token")
       },
-      textarea:''
+      context: null
     };
   },
 
   methods: {
-    handleChange(file, fileList) {
+    show() {
-      this.fileList = fileList.slice(-3);
+      this.visible = true
+    },
+    handleChange(file, imageList) {
+      this.imageList = imageList.slice(-3);
     },
     handleUploadSuccess(res, file) {
       if (res.code !== 1000) {
         this.$message.error("上传失败");
       }
       let data = res.data;
-      this.fileList.push(data);
+      this.imageList.push(data);
-      this.$emit("input", this.fileList);
+    },
-      console.log(res, file, this.fileList);
+    handleAttachmentUploadSuccess(res, file) {
+      if (res.code !== 1000) {
+        this.$message.error("上传失败");
+      }
+      let data = res.data;
+      this.attachmentList.push(data);
+    },
+    beforeAttachmentUpload(file) {
+      if (this.attachmentMaxSize > 0 && file.size / 1024 / 1024 > this.attachmentMaxSize) {
+        this.$message.warning(`单张图片最大不超过 ${this.attachmentMaxSize}MB`);
+        return false;
+      } else {
+        return true;
+      }
     },
     beforeUpload(file) {
       const alows = ["image/jpeg", "image/png", "image/gif", "image/jpg"];
       if (alows.indexOf(file.type) === -1) {
         this.$message.warning("存在不支持的图片格式");
-      } else if (this.maxSize > 0 && file.size / 1024 / 1024 > this.maxSize) {
+      } else if (this.imageSize > 0 && file.size / 1024 / 1024 > this.imageSize) {
-        this.$message.warning(`单张图片最大不超过 ${this.maxSize}MB`);
+        this.$message.warning(`单张图片最大不超过 ${this.imageSize}MB`);
       } else {
         return true;
       }
@@ -133,10 +148,39 @@ export default {
     handleDownload(file) {
       console.log(file);
     },
-    handleRemove(file, fileList) {
+    handleRemove(file, imageList) {
       deleteFile(file.id).then(res => {
         this.$message.success("删除成功");
       });
+    },
+    selectConfirm() {
+      let fileList = []
+      this.attachmentList.forEach((attachment) => {
+        fileList.push({
+          id: attachment.id,
+          name:attachment.name,
+          isImage: attachment.isImage,
+          size: attachment.size,
+          url: attachment.url
+        })
+      })
+      this.imageList.forEach((image) => {
+        fileList.push({
+          id: image.id,
+          name:image.name,
+          isImage: image.isImage,
+          size: image.size,
+          url: image.url
+        })
+      })
+
+      let data = {
+        context: this.context,
+        attachments:fileList
+      }
+      console.log(this.attachmentList, this.imageList)
+      this.$emit("ok", data)
+      this.visible = false;
     }
   }
 };
@@ -148,10 +192,11 @@ export default {
   height: 65px;
   line-height: 70px;
 }
-/deep/ .el-upload-list--picture-card{
+
+/deep/ .el-upload-list--picture-card {
   .is-ready {
-    width: 65px!important;
+    width: 65px !important;
-    height: 65px!important;
+    height: 65px !important;
   }
 }
 

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

@@ -10,10 +10,10 @@
           <!-- 部门 -->
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
-            <el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
+            <el-tree :data="deptList" ref="tree"  :props="deptProps" empty-text=""  node-key="deptId" default-expand-all
                      :show-checkbox="showCheckbox" check-strictly highlight-current
                      @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"  :filter-node-method="filterNode">
-              <div class="custom-tree-node" slot-scope="{ node, data }"  style="width: 100%">
+              <div class="custom-tree-node" slot-scope="{ node }"  style="width: 100%">
                 <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
               </div>
             </el-tree>
@@ -29,7 +29,7 @@
             <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
             <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
               <i class="el-icon-folder-opened"></i>
-              <span>{{ selectItem.label }}</span>
+              <span>{{ selectItem.deptName }}</span>
               <i class="el-icon-close" @click="noSelected(selectItem)" v-if="showCheckbox===false"></i>
             </div>
           </div>
@@ -67,43 +67,12 @@ export default {
       title: "请选择",
       selectList: [],
       filterText: "",
-      deptList: [
+      deptList: [],
-        {
+      deptProps:{
-          value: 1,
+        value:'deptId',
-          label: '一级 1',
+        label: 'deptName',
-          children: [{
+        children: 'children'
-            value: 4,
-            label: '二级 1-1',
-            children: [{
-              value: 9,
-              label: '31'
-            }, {
-              value: 10,
-              label: '三级 1-1-2'
-            }]
-          }]
-        }, {
-          value: 2,
-          label: '一级 2',
-          children: [{
-            value: 5,
-            label: '二级 2-1'
-          }, {
-            value: 6,
-            label: '二级 2-2'
-          }]
-        }, {
-          value: 3,
-          label: '一级 3',
-          children: [{
-            value: 7,
-            label: '二级 3-1'
-          }, {
-            value: 8,
-            label: '二级 3-2'
-          }]
       }
-      ]
     };
   },
   watch: {
@@ -128,16 +97,19 @@ export default {
     //获取部门信息
     getDepartmentTree() {
       getDepartmentTree().then(res => {
-        console.log("获取部门信息", res);
+        const jsona = JSON.stringify(res.data) // 把接口返回的res.data数据转成字符串
-        this.deptList = res.data;
+        const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
+        const jsonc = jsonb.replace(/"label"/g, '"deptName"')
+        this.deptList=JSON.parse(jsonc)
+        console.log("获取部门信息===========", this.deptList);
       });
     },
     //通过关键字过滤树节点
     filterNode(value, data) {
       if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      return data.deptName.indexOf(value) !== -1;
     },
-    //用于部门选择
+    //用于弹开部门选择
     showDeptPicker() {
       this.visible = true;
     },
@@ -153,7 +125,7 @@ export default {
         if (this.multiple) {
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === data.value) {
+            if (this.selectList[i].deptId === data.deptId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -167,7 +139,7 @@ export default {
         } else {// 左侧有选择框 + 单选
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === data.value) {
+            if (this.selectList[i].deptId === data.deptId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -186,7 +158,7 @@ export default {
 
     //左侧没有选择框时,点击tree-item
     /**
-     * 可以点击树节点label,进行选择
+     * 可以点击树节点deptName,进行选择
      * @param node 选择的每个节点item
      * @param check checked(checkbox选择框)是否选中
      */
@@ -194,7 +166,7 @@ export default {
       if(this.multiple){
         //不添加重复的数据到右边
         for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].value === node.value) {
+          if (this.selectList[i].deptId === node.deptId) {
             this.selectList.splice(i, 1);
             break;
           }
@@ -209,7 +181,7 @@ export default {
     //左侧无选择框时,右侧显示×
     noSelected(selectItem) {
       for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === selectItem.value) {
+        if (this.selectList[i].deptId === selectItem.deptId) {
           this.selectList.splice(i, 1);
           this.$refs.tree.setCheckedKeys(i);
           break;
@@ -237,7 +209,7 @@ export default {
     },
     //确定按钮
     selectConfirm() {
-      // this.$emit("input", this.selectList)
+      this.$emit("input", this.selectList)
       // this.$emit("dengjie")
     }
   }

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

@@ -12,7 +12,7 @@
                @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>
+            <span>{{ roleItem.roleName }}</span>
           </div>
         </div>
       </div>
@@ -24,10 +24,10 @@
         </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">
+          <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-role-item">
             <i class="el-icon-user-solid"></i>
-            <span>{{ org.label }}</span>
+            <span>{{ selectItem.roleName }}</span>
-            <i class="el-icon-close" @click="noSelected(org)"></i>
+            <i class="el-icon-close" @click="noSelected(selectItem)"></i>
           </div>
         </div>
       </div>
@@ -46,6 +46,24 @@ export default {
         return [];
       },
       type: Array
+    },
+    multiple: { //是否多选
+      default: true,
+      type: Boolean
+    },
+    showCheckbox: { //是否显示左侧选择框
+      default: true,
+      type: Boolean
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit("input", val)
+      }
     }
   },
   data() {
@@ -53,34 +71,7 @@ export default {
       visible: false,
       loading: false,
       title: "请选择",
-      multiple: true,//是否多选
+      roleList: [],
-      showCheckbox: true,//是否显示左侧选择框
-      roleList: [
-        // {
-        //   value: 1,
-        //   label: "超级管理员"
-        // },
-        // {
-        //   value: 2,
-        //   label: "普通角色"
-        // },
-        // {
-        //   value: 100,
-        //   label: "前端开发人员"
-        // },
-        // {
-        //   value: 101,
-        //   label: "图片文件管理员"
-        // },
-        // {
-        //   value: 102,
-        //   label: "附件管理员"
-        // },
-        // {
-        //   value: 103,
-        //   label: "权限测试角色"
-        // }
-      ],
       selectList: []
     };
   },
@@ -91,9 +82,16 @@ export default {
     //获取角色信息
     getRole() {
       getRole().then(res => {
-        this.roleList = res.data;
+        console.log('系统角色',res.data);
+        this.roleList= res.data.map(function (val){
+          return {roleId:val.value,roleName:val.label}
+        })
       });
     },
+    //用于弹出角色选择器
+    showRolePicker() {
+      this.visible = true;
+    },
     //选中角色
     selectChange(roleItem) {
       // 左侧有选择框
@@ -101,7 +99,7 @@ export default {
         // 左侧有选择框 + 多选
         if (this.multiple) {
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
+            if (this.selectList[i].roleId === roleItem.roleId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -112,7 +110,7 @@ export default {
         } else {// 左侧有选择框 + 单选
           //用于左侧选择框选中取消,引起右侧数据变化
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
+            if (this.selectList[i].roleId === roleItem.roleId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -122,7 +120,7 @@ export default {
           }
           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) {
+              if (this.roleList[i].roleId !== this.selectList[j].roleId) {
                 this.roleList[i].selected = false;
               }
             }
@@ -132,7 +130,7 @@ export default {
         // 左侧没有选择框 + 多选
         if (this.multiple) {
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
+            if (this.selectList[i].roleId === roleItem.roleId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -142,16 +140,17 @@ export default {
           this.selectList = [roleItem];
         }
       }
+      this._value = this.selectList
     },
     //右侧的×
-    noSelected(org) {
+    noSelected(selectItem) {
       for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === org.value) {
+        if (this.selectList[i].roleId === selectItem.roleId) {
           this.selectList.splice(i, 1);
           break;
         }
       }
-      org.selected = false;
+      selectItem.selected = false;
     },
     //清空
     clearSelected() {
@@ -170,14 +169,9 @@ export default {
     },
     //确定按钮
     selectConfirm() {
-      // this.$emit("ok", Object.assign([], this.select.map(v => {
+      this.$emit("ok", this.selectList);
-      //   v.avatar = undefined;
+      this.visible = false;
-      //   return v;
-      // })));
-      // this.visible = false;
-      // this.recover();
     }
-
   }
 };
 </script>

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

@@ -10,10 +10,10 @@
           <!-- 部门 -->
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
-            <el-tree :data="deptList" ref="tree" empty-text="" node-key="value" default-expand-all
+            <el-tree :data="deptList" ref="tree"  :props="deptProps" empty-text=""  node-key="deptId" default-expand-all
                      :show-checkbox="showCheckbox" check-strictly highlight-current
                      @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"  :filter-node-method="filterNode">
-             <div class="custom-tree-node" slot-scope="{ node, data }"  style="width: 100%">
+              <div class="custom-tree-node" slot-scope="{ node }"  style="width: 100%">
                 <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
               </div>
             </el-tree>
@@ -29,7 +29,7 @@
             <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
             <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
               <i class="el-icon-folder-opened"></i>
-              <span>{{ selectItem.label }}</span>
+              <span>{{ selectItem.deptName }}</span>
               <i class="el-icon-close" @click="noSelected(selectItem)" v-if="showCheckbox===false"></i>
             </div>
           </div>
@@ -67,43 +67,12 @@ export default {
       title: "请选择",
       selectList: [],
       filterText: "",
-      deptList: [
+      deptList: [],
-        {
+      deptProps:{
-          value: 1,
+        value:'deptId',
-          label: '一级 1',
+        label: 'deptName',
-          children: [{
+        children: 'children'
-            value: 4,
-            label: '二级 1-1',
-            children: [{
-              value: 9,
-              label: '31'
-            }, {
-              value: 10,
-              label: '三级 1-1-2'
-            }]
-          }]
-        }, {
-          value: 2,
-          label: '一级 2',
-          children: [{
-            value: 5,
-            label: '二级 2-1'
-          }, {
-            value: 6,
-            label: '二级 2-2'
-          }]
-        }, {
-          value: 3,
-          label: '一级 3',
-          children: [{
-            value: 7,
-            label: '二级 3-1'
-          }, {
-            value: 8,
-            label: '二级 3-2'
-          }]
       }
-      ]
     };
   },
   watch: {
@@ -128,14 +97,18 @@ export default {
     //获取部门信息
     getDepartmentTree() {
       getDepartmentTree().then(res => {
-        console.log("获取部门信息", res);
+        const jsona = JSON.stringify(res.data) // 把接口返回的res.data数据转成字符串
-        this.deptList = res.data;
+        const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
+        const jsonc = jsonb.replace(/"label"/g, '"deptName"')
+        const endjson = JSON.parse(jsonc)
+        this.deptList=endjson
+        console.log("获取部门信息===========", this.deptList);
       });
     },
     //通过关键字过滤树节点
     filterNode(value, data) {
       if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      return data.deptName.indexOf(value) !== -1;
     },
     //用于部门选择
     showDeptPicker() {
@@ -153,7 +126,7 @@ export default {
         if (this.multiple) {
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === data.value) {
+            if (this.selectList[i].deptId === data.deptId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -167,7 +140,7 @@ export default {
         } else {// 左侧有选择框 + 单选
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === data.value) {
+            if (this.selectList[i].deptId === data.deptId) {
               this.selectList.splice(i, 1);
               break;
             }
@@ -186,7 +159,7 @@ export default {
 
     //左侧没有选择框时,点击tree-item
     /**
-     * 可以点击树节点label,进行选择
+     * 可以点击树节点deptName,进行选择
      * @param node 选择的每个节点item
      * @param check checked(checkbox选择框)是否选中
      */
@@ -194,7 +167,7 @@ export default {
       if(this.multiple){
         //不添加重复的数据到右边
         for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].value === node.value) {
+          if (this.selectList[i].deptId === node.deptId) {
             this.selectList.splice(i, 1);
             break;
           }
@@ -209,7 +182,7 @@ export default {
     //左侧无选择框时,右侧显示×
     noSelected(selectItem) {
       for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === selectItem.value) {
+        if (this.selectList[i].deptId === selectItem.deptId) {
           this.selectList.splice(i, 1);
           this.$refs.tree.setCheckedKeys(i);
           break;
@@ -237,7 +210,7 @@ export default {
     },
     //确定按钮
     selectConfirm() {
-      // this.$emit("input", this.selectList)
+      this.$emit("input", this.selectList)
       // this.$emit("dengjie")
     }
   }

flowable-engine-web/src/main.js

@@ -16,6 +16,7 @@ import Ellipsis from '@/components/common/Ellipsis'
 import WDialog from '@/components/common/WDialog'
 import Tip from '@/components/common/Tip'
 import axios from "axios";
+import {getBaseUrl} from "./api/request";
 
 Vue.use(ElementUI);
 Vue.use(Ellipsis);
@@ -54,8 +55,9 @@ export function getToken() {
     // }
     axios.post(
         // "http://security-react.mytwins.top/auth/login",
-        // "http://gateway.odliken.cn/auth/login",
+        // getBaseUrl()+"/auth/login",
-        "http://localhost:8000/auth/login",
+        "http://gateway.mytwins.top/auth/login",
+        // "http://localhost:8000/auth/login",
         {
             code: "string",
             password: "926425",

flowable-engine-web/src/utils/CustomUtil.js

@@ -23,3 +23,5 @@ Array.prototype.toMap = function (key) {
 }
 
 
+
+

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

@@ -6,8 +6,8 @@
     </template>
     <template v-else>
       <template v-if="perm === 'E'">
-        <el-button icon="iconfont icon-map-site" type="primary" size="mini" round @click="$refs.orgPicker.show()"> 选择部门</el-button>
+        <el-button icon="iconfont icon-map-site" type="primary" size="mini" round @click="selectDept"> 选择部门</el-button>
-        <org-picker type="dept" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
+        <org-picker type="dept" :multiple="multiple" ref="deptPicker" :selected="_value" @ok="selected"/>
         <span class="placeholder"> {{placeholder}}</span>
         <div style="margin-top: 5px">
           <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.name}}</el-tag>
@@ -54,6 +54,10 @@ export default {
     }
   },
   methods: {
+    //弹出部门选择器,选择部门
+    selectDept() {
+      this.$refs.deptPicker.showDeptPicker()
+    },
     selected(values){
       this.showOrgSelect = false
       this._value = values

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

@@ -48,6 +48,7 @@
 <script>
 import componentMinxins from '../ComponentMinxins'
 import {deleteFile} from "../../../../api/common";
+import {getBaseUrl} from "../../../../api/request";
 
 export default {
   mixins: [componentMinxins],
@@ -90,7 +91,7 @@ export default {
     return {
       fileList:[],
       disabled: false,
-      uploadFileUrl: "http://security-react.mytwins.top/flowable/process/file",
+      uploadFileUrl: getBaseUrl()+"/flowable/process/file",
       headers: {
         authorization: localStorage.getItem("token")
       },

flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue

@@ -119,40 +119,38 @@
       <el-form-item label="🙅‍ 如果审批被驳回 👇">
         <el-radio-group v-model="nodeProps.refuse.type">
           <el-radio label="TO_END">直接结束流程</el-radio>
-<!--          <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
+          <!--          <el-radio label="TO_BEFORE">驳回到上级审批节点</el-radio>-->
-<!--          <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
+          <!--          <el-radio label="TO_NODE">驳回到指定节点</el-radio>-->
         </el-radio-group>
         <div v-if="nodeProps.refuse.type === 'TO_NODE'">
           <span>指定节点:</span>
-          <el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转步骤" size="small" v-model="nodeProps.refuse.target">
+          <el-select style="margin-left: 10px; width: 150px;" placeholder="选择跳转步骤" size="small"
+                     v-model="nodeProps.refuse.target">
             <el-option v-for="(node, i) in nodeOptions" :key="i" :label="node.name" :value="node.id"></el-option>
           </el-select>
         </div>
 
       </el-form-item>
     </el-form>
-<!--    <org-picker :title="pickerTitle" multiple :type="orgPickerType" ref="orgPicker" :selected="orgPickerSelected"-->
-<!--                @ok="selected"/>-->
 
-    <role-picker-me :title="pickerTitle" multiple  ref="rolePicker" :selected="rolePickerSelected" @ok="selectedRole"/>
+    <role-picker :title="pickerTitle" multiple ref="rolePicker" :v-model="select" @ok="selectedRole"/>
 
   </div>
 </template>
 
 <script>
-import OrgPicker from "@/components/common/Test";
+import RolePicker from "@/components/common/RolePicker";
-import RolePickerMe from "../../../../components/common/RolePickerMe";
 import RoleItems from "../RoleItems";
 import OrgItems from "../OrgItems";
 
 export default {
   name: "ApprovalNodeConfig",
-  components: {RoleItems, OrgPicker, OrgItems,RolePickerMe},
+  components: {RoleItems, OrgItems, RolePicker},
   props: {
     config: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       }
     }
   },
@@ -160,54 +158,52 @@ export default {
     return {
       showOrgSelect: false,
       orgPickerSelected: [],
-      showRoleSelect: false,
+      orgPickerType: "user",
-      rolePickerSelected: [],
-      orgPickerType: 'user',
       approvalTypes: [
-        {name: '指定人员', type: 'ASSIGN_USER'},
+        {name: "指定人员", type: "ASSIGN_USER"},
-        {name: '发起人自选', type: 'SELF_SELECT'},
+        {name: "发起人自选", type: "SELF_SELECT"},
-        {name: '连续多级主管', type: 'LEADER_TOP'},
+        {name: "连续多级主管", type: "LEADER_TOP"},
-        {name: '主管', type: 'LEADER'},
+        {name: "主管", type: "LEADER"},
-        {name: '角色', type: 'ROLE'},
+        {name: "角色", type: "ROLE"},
-        {name: '发起人自己', type: 'SELF'},
+        {name: "发起人自己", type: "SELF"},
-        {name: '表单内联系人', type: 'FORM_USER'}
+        {name: "表单内联系人", type: "FORM_USER"}
       ]
-    }
+    };
   },
   computed: {
     nodeProps() {
-      return this.$store.state.selectedNode.props
+      return this.$store.state.selectedNode.props;
     },
     select() {
-      return this.config.assignedUser || []
+      return this.config.assignedUser || [];
     },
     roleList() {
-      return this.config.roleList || []
+      return this.config.roleList || [];
     },
     forms() {
       return this.$store.state.design.formItems.filter(f => {
-        return f.name === 'UserPicker'
+        return f.name === "UserPicker";
-      })
+      });
     },
     pickerTitle() {
       switch (this.orgPickerType) {
-        case 'user':
+        case "user":
-          return '请选择人员';
+          return "请选择人员";
-        case 'role':
+        case "role":
-          return '请选择系统角色';
+          return "请选择系统角色";
         default:
           return null;
       }
     },
     nodeOptions() {
-      let values = []
+      let values = [];
-      const excType = ['ROOT', 'EMPTY', "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"]
+      const excType = ["ROOT", "EMPTY", "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"];
       this.$store.state.nodeMap.forEach((v) => {
         if (excType.indexOf(v.type) === -1) {
-          values.push({id: v.id, name: v.name})
+          values.push({id: v.id, name: v.name});
         }
-      })
+      });
-      return values
+      return values;
     },
     showMode() {
       switch (this.nodeProps.assignedType) {
@@ -216,7 +212,7 @@ export default {
         case "SELF_SELECT":
           return this.nodeProps.selfSelect.multiple;
         case "LEADER_TOP":
-          return this.nodeProps.formUser !== '';
+          return this.nodeProps.formUser !== "";
         case "FORM_USER":
           return true;
         case "ROLE":
@@ -228,33 +224,36 @@ export default {
   },
   methods: {
     selectUser() {
-      this.orgPickerSelected = this.select
+      this.orgPickerSelected = this.select;
-      this.orgPickerType = 'user'
+      this.orgPickerType = "user";
-      this.$refs.orgPicker.show()
+      this.$refs.orgPicker.show();
     },
     selectNoSetUser() {
-      this.orgPickerSelected = this.config.nobody.assignedUser
+      this.orgPickerSelected = this.config.nobody.assignedUser;
-      this.orgPickerType = 'user'
+      this.orgPickerType = "user";
-      this.$refs.orgPicker.show()
+      this.$refs.orgPicker.show();
     },
+    //弹出角色选择器,选择系统角色
     selectRole() {
-      this.showRoleSelect = null
+      this.orgPickerType = "role";
-      this.rolePickerSelected =  this.roleList
+      this.$refs.rolePicker.showRolePicker();
-      this.$refs.rolePicker.show()
-    },
-    selected(select) {
-
     },
     selectedRole(select) {
-      console.log(select)
+      select.forEach(val => {
-      this.rolePickerSelected.length = 0
+        for (let i = 0; i < this.roleList.length; i++) {
-      select.forEach(val => this.rolePickerSelected.push(val))
+          if (this.roleList[i].roleId === val.roleId) {
+            this.roleList.splice(i, 1);
+            break;
+          }
+        }
+        this.roleList.push(val);
+      });
     },
     removeOrgItem(index) {
-      this.select.splice(index, 1)
+      this.select.splice(index, 1);
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>

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

@@ -26,10 +26,13 @@
           label="任务到达时间">
       </el-table-column>
       <el-table-column
-          prop="status"
+          prop="state"
           label="状态">
         <template slot-scope="scope">
-          <el-tag type="success">{{ scope.row.status }}</el-tag>
+          <el-tag v-if="scope.row.state == 1" >待处理</el-tag>
+          <el-tag v-if="scope.row.state == 4" type="success">已同意</el-tag>
+          <el-tag v-if="scope.row.state == 3" type="danger">已拒绝</el-tag>
+          <el-tag v-if="scope.row.state == 2" type="warning">已退回</el-tag>
         </template>
       </el-table-column>
     </el-table>
@@ -38,27 +41,33 @@
         size="50%"
         :visible.sync="approveOpen"
         direction="rtl">
+      <div v-loading="loading">
         <form-render-view ref="taskViewForm" :form-items="taskData.formItems"
                           v-model="taskData.formData"/>
-      <process-diagram-viewer/>
+<!--        <process-diagram-viewer/>-->
         <el-button type="success" @click="submitTask()">通过</el-button>
+        <el-button type="success" @click="$refs.comment.show()">评论</el-button>
+      </div>
     </el-drawer>
+    <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
   </div>
 </template>
 
 <script>
+import Comment from "../../components/common/Comment";
 import FormRenderView from '@/views/common/form/FormRender'
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {completeTask, getTaskInfo, getTaskList} from "../../api/task";
+import {addComment, completeTask, getTaskInfo, getTaskList} from "../../api/task";
 
 export default {
   name: "DisposalTask",
-  components: {FormRenderView,ProcessDiagramViewer},
+  components: {Comment, FormRenderView, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
       selectTask: {},
       tableData: [],
+      loading: false,
       taskData: {
         formData: {},
         formItems: [],
@@ -81,28 +90,48 @@ export default {
         this.tableData = data.rows
       })
     },
+    init() {
+      this.taskData = {
+        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;
+    },
     loadProcessTask(taskId) {
       let that = this
+      this.init()
       getTaskInfo(taskId).then(res => {
-        this.$store.state.preview = 'viewer'
-        this.$store.state.preview = false;
         that.taskData = res.data
         that.$store.state.design = that.taskData
         that.$store.state.runningList = that.taskData.runningList
         that.$store.state.endList = that.taskData.endList
         that.$store.state.noTakeList = that.taskData.noTakeList
+        this.loading = false
       })
     },
-    submitTask(){
+    submitTask() {
       let params = {
         taskId: this.selectTask.taskId,
-        formData : JSON.stringify(this.taskData.formData)
+        formData: JSON.stringify(this.taskData.formData)
       }
-      completeTask(params).then(res =>{
+      completeTask(params).then(res => {
         this.approveOpen = false
         this.getList()
         this.$message.success(res.msg)
       })
+    },
+    commentConfirm(data) {
+      this.$set(data, "taskId", this.selectTask.taskId)
+      addComment(data).then(res => {
+        this.$message.success(res.msg)
+      })
     }
   }
 };

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

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-table :data="tableData"
+              @row-click="clickRow"
+              style="width: 100%">
+      <el-table-column
+          prop="deploymentName"
+          label="审批类型"
+          width="180"/>
+      <el-table-column
+          prop="approveName"
+          label="审批人"
+          width="180"/>
+      <el-table-column
+          prop="submitTime"
+          label="提交时间"/>
+      <el-table-column
+          prop="endTime"
+          label="结束时间"/>
+      <el-table-column
+          prop="taskName"
+          label="当前节点"/>
+      <el-table-column
+          label="处理耗时">
+        <template slot-scope="scope">
+          {{ getTimeConsuming(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+          prop="state"
+          label="状态">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.state == 1" >进行中</el-tag>
+          <el-tag v-if="scope.row.state == 4" type="success">审批通过</el-tag>
+          <el-tag v-if="scope.row.state == 3" type="danger">审批驳回</el-tag>
+          <el-tag v-if="scope.row.state == 2" type="info">已撤销</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="操作">
+        <template slot-scope="scope">
+          <el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-drawer
+        title="审批详情"
+        size="50%"
+        :visible.sync="approveOpen"
+        direction="rtl">
+      <div v-loading="loading">
+        <form-render-view ref="taskViewForm" :form-items="taskData.formItems"
+                          v-model="taskData.formData"/>
+        <process-diagram-viewer/>
+        <el-button type="success" @click="submitTask()">通过</el-button>
+        <el-button type="success" @click="$refs.comment.show()">评论</el-button>
+      </div>
+    </el-drawer>
+    <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
+  </div>
+</template>
+
+<script>
+import Comment from "../../components/common/Comment";
+import FormRenderView from '@/views/common/form/FormRender'
+import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
+import {getInitiatedInstanceList} from "../../api/processInstance";
+
+export default {
+  name: "InitiatedInstance",
+  components: {Comment, FormRenderView, ProcessDiagramViewer},
+  data() {
+    return {
+      approveOpen: false,
+      selectTask: {},
+      tableData: [],
+      loading: false,
+      taskData: {
+        formData: {},
+        formItems: [],
+        processList: [],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    clickRow(row) {
+      this.approveOpen = true;
+      // this.loadProcessTask(row.taskId)
+      this.selectTask = row
+    },
+    getList() {
+      getInitiatedInstanceList().then(res => {
+        let data = res.data
+        this.tableData = data.rows
+      })
+    },
+    getTimeConsuming(instance) {
+      if (instance.state != 1) {
+        let submitTime = new Date(instance.submitTime)
+        let endTime = new Date(instance.endTime)
+        return endTime - submitTime;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -41,10 +41,10 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="待我处理(3)" name="disposalTask">
-        <disposal-task ref="disposalTask"/>
+        <disposal-task v-if="active == 'disposalTask'" ref="disposalTask"/>
       </el-tab-pane>
       <el-tab-pane label="我发起的" name="initiated">
-        <div class="no-data">暂无数据 😀</div>
+        <initiated-instance v-if="active == 'initiated'"  ref="InitiatedInstance"/>
       </el-tab-pane>
       <el-tab-pane label="关于我的"  name="aboutMe">
         <div class="no-data">暂无数据 😀</div>
@@ -63,13 +63,14 @@
 
 <script>
 import InitiateProcess from "./InitiateProcess";
+import InitiatedInstance from "./InitiatedInstance";
 import DisposalTask from "./DisposalTask";
 import {getProcessDefinitionList} from "../../api/processDefinition";
 import {startProcessInstance} from "../../api/processInstance";
 
 export default {
   name: "workSpace",
-  components: {InitiateProcess,DisposalTask},
+  components: {InitiateProcess,DisposalTask,InitiatedInstance},
   data() {
     return {
       active: 'disposalTask',