From 594a1feeafdab3b721d5513561bc2d4fcda81738 Mon Sep 17 00:00:00 2001
From: clay <209192278@qq.com>
Date: Fri, 13 Jan 2023 21:22:08 +0800
Subject: [PATCH] =?UTF-8?q?dengjie=20commit=20:=20=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E8=A7=92=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/DeptPicker.vue      |  72 ++++--------
 .../src/components/common/RolePicker.vue      |  90 +++++++--------
 .../src/components/common/Test.vue            |  77 +++++--------
 .../common/form/components/DeptPicker.vue     |   8 +-
 .../process/config/ApprovalNodeConfig.vue     | 105 +++++++++---------
 5 files changed, 147 insertions(+), 205 deletions(-)

diff --git a/flowable-engine-web/src/components/common/DeptPicker.vue b/flowable-engine-web/src/components/common/DeptPicker.vue
index b272b5d..91d6716 100644
--- a/flowable-engine-web/src/components/common/DeptPicker.vue
+++ b/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: [
-        {
-          value: 1,
-          label: '一级 1',
-          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'
-          }]
-        }
-      ]
+      deptList: [],
+      deptProps:{
+        value:'deptId',
+        label: 'deptName',
+        children: 'children'
+      }
     };
   },
   watch: {
@@ -128,16 +97,19 @@ export default {
     //获取部门信息
     getDepartmentTree() {
       getDepartmentTree().then(res => {
-        console.log("获取部门信息", res);
-        this.deptList = res.data;
+        const jsona = JSON.stringify(res.data) // 把接口返回的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")
     }
   }
diff --git a/flowable-engine-web/src/components/common/RolePicker.vue b/flowable-engine-web/src/components/common/RolePicker.vue
index 35fd913..03ab18a 100644
--- a/flowable-engine-web/src/components/common/RolePicker.vue
+++ b/flowable-engine-web/src/components/common/RolePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
+  <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">
@@ -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>
-            <i class="el-icon-close" @click="noSelected(org)"></i>
+            <span>{{ selectItem.roleName }}</span>
+            <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,//是否多选
-      showCheckbox: true,//是否显示左侧选择框
-      roleList: [
-        // {
-        //   value: 1,
-        //   label: "超级管理员"
-        // },
-        // {
-        //   value: 2,
-        //   label: "普通角色"
-        // },
-        // {
-        //   value: 100,
-        //   label: "前端开发人员"
-        // },
-        // {
-        //   value: 101,
-        //   label: "图片文件管理员"
-        // },
-        // {
-        //   value: 102,
-        //   label: "附件管理员"
-        // },
-        // {
-        //   value: 103,
-        //   label: "权限测试角色"
-        // }
-      ],
+      roleList: [],
       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 => {
-      //   v.avatar = undefined;
-      //   return v;
-      // })));
-      // this.visible = false;
-      // this.recover();
+      this.$emit("ok", this.selectList);
+      this.visible = false;
     }
-
   }
 };
 </script>
diff --git a/flowable-engine-web/src/components/common/Test.vue b/flowable-engine-web/src/components/common/Test.vue
index 849067c..ab6f0e3 100644
--- a/flowable-engine-web/src/components/common/Test.vue
+++ b/flowable-engine-web/src/components/common/Test.vue
@@ -10,12 +10,12 @@
           <!-- 部门 -->
           <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%">
-                   <i class="el-icon-folder-opened" style="margin-right: 5px"></i>{{ node.label }}
-             </div>
+              <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>
           </el-scrollbar>
         </div>
@@ -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: [
-        {
-          value: 1,
-          label: '一级 1',
-          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'
-          }]
-        }
-      ]
+      deptList: [],
+      deptProps:{
+        value:'deptId',
+        label: 'deptName',
+        children: 'children'
+      }
     };
   },
   watch: {
@@ -128,14 +97,18 @@ export default {
     //获取部门信息
     getDepartmentTree() {
       getDepartmentTree().then(res => {
-        console.log("获取部门信息", res);
-        this.deptList = res.data;
+        const jsona = JSON.stringify(res.data) // 把接口返回的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;
@@ -231,13 +204,13 @@ export default {
       }).then(() => {
         this.handleCheckChange("1");
         if(!this.showCheckbox){
-            this.selectList=[]
+          this.selectList=[]
         }
       });
     },
     //确定按钮
     selectConfirm() {
-      // this.$emit("input", this.selectList)
+      this.$emit("input", this.selectList)
       // this.$emit("dengjie")
     }
   }
diff --git a/flowable-engine-web/src/views/common/form/components/DeptPicker.vue b/flowable-engine-web/src/views/common/form/components/DeptPicker.vue
index 0aa1d48..3dd8311 100644
--- a/flowable-engine-web/src/views/common/form/components/DeptPicker.vue
+++ b/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>
-        <org-picker type="dept" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
+        <el-button icon="iconfont icon-map-site" type="primary" size="mini" round @click="selectDept"> 选择部门</el-button>
+        <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
diff --git a/flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue b/flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue
index cd33024..0cc61d9 100644
--- a/flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue
+++ b/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_NODE">驳回到指定节点</el-radio>-->
+          <!--          <el-radio label="TO_BEFORE">驳回到上级审批节点</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 RolePickerMe from "../../../../components/common/RolePickerMe";
+import RolePicker from "@/components/common/RolePicker";
 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,
-      rolePickerSelected: [],
-      orgPickerType: 'user',
+      orgPickerType: "user",
       approvalTypes: [
-        {name: '指定人员', type: 'ASSIGN_USER'},
-        {name: '发起人自选', type: 'SELF_SELECT'},
-        {name: '连续多级主管', type: 'LEADER_TOP'},
-        {name: '主管', type: 'LEADER'},
-        {name: '角色', type: 'ROLE'},
-        {name: '发起人自己', type: 'SELF'},
-        {name: '表单内联系人', type: 'FORM_USER'}
+        {name: "指定人员", type: "ASSIGN_USER"},
+        {name: "发起人自选", type: "SELF_SELECT"},
+        {name: "连续多级主管", type: "LEADER_TOP"},
+        {name: "主管", type: "LEADER"},
+        {name: "角色", type: "ROLE"},
+        {name: "发起人自己", type: "SELF"},
+        {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':
-          return '请选择人员';
-        case 'role':
-          return '请选择系统角色';
+        case "user":
+          return "请选择人员";
+        case "role":
+          return "请选择系统角色";
         default:
           return null;
       }
     },
     nodeOptions() {
-      let values = []
-      const excType = ['ROOT', 'EMPTY', "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"]
+      let values = [];
+      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.orgPickerType = 'user'
-      this.$refs.orgPicker.show()
+      this.orgPickerSelected = this.select;
+      this.orgPickerType = "user";
+      this.$refs.orgPicker.show();
     },
     selectNoSetUser() {
-      this.orgPickerSelected = this.config.nobody.assignedUser
-      this.orgPickerType = 'user'
-      this.$refs.orgPicker.show()
+      this.orgPickerSelected = this.config.nobody.assignedUser;
+      this.orgPickerType = "user";
+      this.$refs.orgPicker.show();
     },
+    //弹出角色选择器,选择系统角色
     selectRole() {
-      this.showRoleSelect = null
-      this.rolePickerSelected =  this.roleList
-      this.$refs.rolePicker.show()
-    },
-    selected(select) {
-
+      this.orgPickerType = "role";
+      this.$refs.rolePicker.showRolePicker();
     },
     selectedRole(select) {
-      console.log(select)
-      this.rolePickerSelected.length = 0
-      select.forEach(val => this.rolePickerSelected.push(val))
+      select.forEach(val => {
+        for (let i = 0; i < this.roleList.length; i++) {
+          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>
-- 
2.40.1