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

@@ -26,14 +26,7 @@ export function getUserByName(param) {
     params: param
   })
 }
-//获取采取树形控件的部门option
-export function getDepartmentTree() {
-  return request({
-    url: 'admin/dept/option',
-    method: 'get'
-  })
-}
 
 export default {
-  getOrgTree, getUserByName, getRole,getDepartmentTree
+  getOrgTree, getUserByName, getRole
 }

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

@@ -2,16 +2,19 @@
   <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
     <div class="picker">
       <div class="candidate" v-loading="loading">
-        <div style="padding: 5px 8px;">
+        <div class="role-header">
-          <el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
+          <div>系统角色</div>
-                    clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
+        </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="multiple"></el-checkbox>
+            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
+            <span>{{ roleItem.name }}</span>
+          </div>
         </div>
-        <!-- 部门 -->
-        <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
-        <el-scrollbar style="height:350px">
-          <el-tree :data="deptList" ref="tree" empty-text=""  default-expand-all show-checkbox
-                   @check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
-        </el-scrollbar>
       </div>
 
       <div class="selected">
@@ -19,11 +22,12 @@
           <span>已选 {{ selectList.length }} 项</span>
           <span @click="clearSelected">清空</span>
         </div>
-        <div class="org-items" style="height: 350px;">
+        <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-item">
+          <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
-            <i class="el-icon-folder-opened"></i>
+            <i class="el-icon-user-solid"></i>
-            <span>{{ org.label }}</span>
+            <span>{{ org.name }}</span>
+            <i class="el-icon-close" @click="noSelected(org)"></i>
           </div>
         </div>
       </div>
@@ -32,69 +36,88 @@
 </template>
 
 <script>
-import {getDepartmentTree} from "@/api/org";
+import {getRole} from "@/api/org";
 
 export default {
-  name: "departmentPicker",
+  name: "OrgPicker",
   data() {
     return {
       visible: false,
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
-      selectList: [],
+      roleList: [
-      filterText: "",
+        {
-      deptList: []
+          value: 1,
+          name: "超级管理员"
+        },
+        {
+          value: 2,
+          name: "普通角色"
+        },
+        {
+          value: 100,
+          name: "前端开发人员"
+        },
+        {
+          value: 101,
+          name: "图片文件管理员"
+        },
+        {
+          value: 102,
+          name: "附件管理员"
+        },
+        {
+          value: 103,
+          name: "权限测试角色"
+        }
+      ],
+      selectList: []
     };
   },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
   created() {
-    this.getDepartmentTree();
+    this.getRole();
   },
   methods: {
     //获取角色信息
-    getDepartmentTree() {
+    getRole() {
-      getDepartmentTree().then(res => {
+      getRole().then(res => {
-        console.log(res);
+        console.log("获取角色信息:==", res);
-        this.deptList=res.data
       });
     },
-    //通过关键字过滤树节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
     //用于首页选择本次登录者,显示弹窗
     show() {
       this.visible = true;
       this.init();
+      // this.getOrgList();
     },
-    //初始化
+    //选中角色
-    init() {
+    selectChange(userItem) {
-      this.selectList = Object.assign([], this.selected);
-    },
-    //选中部门
-    handleCheckChange(data, checked) {
       //多选
       if (this.multiple) {
         for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].value === data.value) {
+          if (this.selectList[i].value === userItem.value) {
             this.selectList.splice(i, 1);
             break;
           }
         }
-        if (checked) {
+        userItem.selected = true;
-          this.selectList.push(data);
+        this.selectList.push(userItem);
-        }
       } else {//单选
-        checked = true;
+        userItem.selected = true;
-        this.selectList = [data];
+        this.selectList = [userItem];
       }
     },
+    //右侧的×
+    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;
+    },
     //确定按钮
     selectOk() {
       // this.$emit("ok", Object.assign([], this.select.map(v => {
@@ -111,22 +134,11 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.selectList = [];
+        this.recover();
       });
     },
-
+    init() {
-    searchUser() {
+      this.selectList = Object.assign([], this.selected);
-      let userName = this.search.trim();
-      this.searchUsers = [];
-      this.loading = true;
-      // getUserByName({userName: userName}).then(rsp => {
-      //   this.loading = false
-      //   this.searchUsers = rsp.data
-      //   this.selectToLeft()
-      // }).catch(err => {
-      //   this.loading = false
-      //   this.$message.error("接口异常")
-      // })
     }
   }
 };
@@ -134,11 +146,11 @@ export default {
 
 <style lang="less" scoped>
 @containWidth: 278px;
-
 /deep/ .el-dialog__body {
   padding: 10px 20px;
 }
 
+
 .picker {
   height: 402px;
   position: relative;
@@ -148,6 +160,12 @@ export default {
     left: 0;
     top: 0;
   }
+
+  .role-header {
+    padding: 10px !important;
+    margin-bottom: 5px;
+    border-bottom: 1px solid #e8e8e8;
+  }
 }
 
 .candidate, .selected {
@@ -176,20 +194,29 @@ export default {
       cursor: pointer;
     }
   }
+
 }
 
+
 .org-items {
   overflow-y: auto;
   height: 350px;
 
-  .org-item {
+  .el-icon-close {
-    margin: 0 5px;
+    position: absolute;
-    border-radius: 5px;
+    right: 5px;
-    position: relative;
+    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;
@@ -198,12 +225,10 @@ export default {
     > span {
       margin-left: 5px;
     }
+
   }
 }
 
-/deep/ .el-scrollbar .el-scrollbar__wrap {
-  overflow-x: hidden;
-}
 
 ::-webkit-scrollbar {
   float: right;
@@ -216,5 +241,4 @@ export default {
   border-radius: 16px;
   background-color: #efefef;
 }
-
 </style>

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

@@ -10,9 +10,9 @@
           <!-- 系统角色-->
           <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
                @click="selectChange(roleItem)">
-            <el-checkbox v-model="roleItem.selected" v-if="multiple" disabled></el-checkbox>
+            <el-checkbox v-model="roleItem.selected" v-if="multiple"></el-checkbox>
             <i class="el-icon-user-solid" style="margin-left: 5px"></i>
-            <span>{{ roleItem.label }}</span>
+            <span>{{ roleItem.name }}</span>
           </div>
         </div>
       </div>
@@ -26,7 +26,7 @@
           <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>
+            <span>{{ org.name }}</span>
             <i class="el-icon-close" @click="noSelected(org)"></i>
           </div>
         </div>
@@ -46,7 +46,32 @@ export default {
       loading: false,
       title: "请选择",
       multiple: true,//是否多选
-      roleList: [],
+      roleList: [
+        {
+          value: 1,
+          name: "超级管理员"
+        },
+        {
+          value: 2,
+          name: "普通角色"
+        },
+        {
+          value: 100,
+          name: "前端开发人员"
+        },
+        {
+          value: 101,
+          name: "图片文件管理员"
+        },
+        {
+          value: 102,
+          name: "附件管理员"
+        },
+        {
+          value: 103,
+          name: "权限测试角色"
+        }
+      ],
       selectList: []
     };
   },
@@ -57,16 +82,14 @@ export default {
     //获取角色信息
     getRole() {
       getRole().then(res => {
-        this.roleList=res.data
+        console.log("获取角色信息:==", res);
       });
     },
     //用于首页选择本次登录者,显示弹窗
     show() {
       this.visible = true;
       this.init();
-    },
+      // this.getOrgList();
-    init() {
-      this.selectList = Object.assign([], this.selected);
     },
     //选中角色
     selectChange(userItem) {
@@ -111,10 +134,12 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.selectList=[]
+        this.recover();
       });
+    },
+    init() {
+      this.selectList = Object.assign([], this.selected);
     }
-
   }
 };
 </script>

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

@@ -1,220 +0,0 @@
-<template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
-    <div class="picker">
-      <div class="candidate" v-loading="loading">
-        <div style="padding: 5px 8px;">
-          <el-input v-model="filterText" @input="searchUser" style="width: 100%;" size="small"
-                    clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
-        </div>
-        <!-- 部门 -->
-        <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
-        <el-scrollbar style="height:350px">
-          <el-tree :data="deptList" ref="tree" empty-text=""  default-expand-all show-checkbox
-                   @check-change="handleCheckChange" :filter-node-method="filterNode"></el-tree>
-        </el-scrollbar>
-      </div>
-
-      <div class="selected">
-        <div class="count">
-          <span>已选 {{ selectList.length }} 项</span>
-          <span @click="clearSelected">清空</span>
-        </div>
-        <div class="org-items" style="height: 350px;">
-          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
-          <div v-for="(org, index) in selectList" :key="index" class="org-item">
-            <i class="el-icon-folder-opened"></i>
-            <span>{{ org.label }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </w-dialog>
-</template>
-
-<script>
-import {getDepartmentTree} from "@/api/org";
-
-export default {
-  name: "departmentPicker",
-  data() {
-    return {
-      visible: false,
-      loading: false,
-      title: "请选择",
-      multiple: true,//是否多选
-      selectList: [],
-      filterText: "",
-      deptList: []
-    };
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
-  created() {
-    this.getDepartmentTree();
-  },
-  methods: {
-    //获取角色信息
-    getDepartmentTree() {
-      getDepartmentTree().then(res => {
-        console.log(res);
-        this.deptList=res.data
-      });
-    },
-    //通过关键字过滤树节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    //用于首页选择本次登录者,显示弹窗
-    show() {
-      this.visible = true;
-      this.init();
-    },
-    //初始化
-    init() {
-      this.selectList = Object.assign([], this.selected);
-    },
-    //选中部门
-    handleCheckChange(data, checked) {
-      //多选
-      if (this.multiple) {
-        for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].value === data.value) {
-            this.selectList.splice(i, 1);
-            break;
-          }
-        }
-        if (checked) {
-          this.selectList.push(data);
-        }
-      } else {//单选
-        checked = true;
-        this.selectList = [data];
-      }
-    },
-    //确定按钮
-    selectOk() {
-      // this.$emit("ok", Object.assign([], this.select.map(v => {
-      //   v.avatar = undefined;
-      //   return v;
-      // })));
-      // this.visible = false;
-      // this.recover();
-    },
-    //清空
-    clearSelected() {
-      this.$confirm("您确定要清空已选中的项?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        this.selectList = [];
-      });
-    },
-
-    searchUser() {
-      let userName = this.search.trim();
-      this.searchUsers = [];
-      this.loading = true;
-      // getUserByName({userName: userName}).then(rsp => {
-      //   this.loading = false
-      //   this.searchUsers = rsp.data
-      //   this.selectToLeft()
-      // }).catch(err => {
-      //   this.loading = false
-      //   this.$message.error("接口异常")
-      // })
-    }
-  }
-};
-</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;
-  }
-}
-
-.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;
-
-  .org-item {
-    margin: 0 5px;
-    border-radius: 5px;
-    position: relative;
-    padding: 7px 5px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover {
-      background: #f1f1f1;
-    }
-
-    > span {
-      margin-left: 5px;
-    }
-  }
-}
-
-/deep/ .el-scrollbar .el-scrollbar__wrap {
-  overflow-x: hidden;
-}
-
-::-webkit-scrollbar {
-  float: right;
-  width: 4px;
-  height: 4px;
-  background-color: white;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 16px;
-  background-color: #efefef;
-}
-
-</style>