feat(系统设置): 组织菜单下，一次可以添加多个成员

backend/src/main/java/io/metersphere/base/mapper/ext/ExtUserMapper.java

@@ -14,4 +14,6 @@ public interface ExtUserMapper {
 
     String getDefaultLanguage(String paramKey);
 
+    List<User> searchUser(String condition);
+
 }

backend/src/main/java/io/metersphere/base/mapper/ext/ExtUserMapper.xml

@@ -47,4 +47,8 @@
     where param_key=#{paramKey,jdbcType=VARCHAR}
    </select>
 
+    <select id="searchUser" parameterType="java.lang.String" resultType="io.metersphere.base.domain.User">
+        select id, name, email, last_organization_id, last_workspace_id from `user` where name like CONCAT('%', #{condition},'%') or email like CONCAT('%', #{condition},'%') limit 100;
+    </select>
+
 </mapper>

backend/src/main/java/io/metersphere/controller/UserController.java

@@ -284,4 +284,10 @@ public class UserController {
         return userService.getTestManagerAndTestUserList(request);
     }
 
+    @GetMapping("/search/{condition}")
+    @RequiresRoles(value = {RoleConstants.ADMIN, RoleConstants.ORG_ADMIN, RoleConstants.TEST_MANAGER}, logical = Logical.OR)
+    public List<User> searchUser(@PathVariable String condition) {
+        return userService.searchUser(condition);
+    }
+
 }

backend/src/main/java/io/metersphere/service/UserService.java

@@ -384,7 +384,7 @@ public class UserService {
                 userRoleExample.createCriteria().andUserIdEqualTo(userId).andSourceIdEqualTo(request.getOrganizationId());
                 List<UserRole> userRoles = userRoleMapper.selectByExample(userRoleExample);
                 if (userRoles.size() > 0) {
-                    MSException.throwException(Translator.get("user_already_exists"));
+                    MSException.throwException(Translator.get("user_already_exists") + ": " + userId);
                 } else {
                     for (String roleId : request.getRoleIds()) {
                         UserRole userRole = new UserRole();
@@ -568,4 +568,8 @@ public class UserService {
         MSException.throwException(msg);
         return null;
     }
+
+    public List<User> searchUser(String condition) {
+        return extUserMapper.searchUser(condition);
+    }
 }

frontend/src/business/components/settings/organization/OrganizationMember.vue

@@ -28,23 +28,31 @@
     <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small">
-        <el-form-item :label="$t('commons.member')" prop="memberSign" :rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'change'}">
-          <el-autocomplete
-            class="input-with-autocomplete"
-            v-model="form.memberSign"
+
+        <el-form-item :label="$t('commons.member')" prop="ids" :rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'blur'}">
+          <el-select
+            v-model="form.ids"
+            multiple
+            filterable
+            remote
+            reserve-keyword
+            :popper-append-to-body="false"
+            class="select-width"
             :placeholder="$t('member.input_id_or_email')"
-            :trigger-on-focus="false"
-            :fetch-suggestions="querySearch"
-            size="small"
-            highlight-first-item
-            value-key="email"
-            @select="handleSelect"
-          >
-            <template v-slot:default="scope">
-              <span class="org-member-name">{{scope.item.id}}</span>
-              <span class="org-member-email">{{scope.item.email}}</span>
+            :remote-method="remoteMethod"
+            :loading="loading">
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id">
+              <template>
+                <span class="org-member-name">{{item.id}}</span>
+                <span class="org-member-email">{{item.email}}</span>
               </template>
-          </el-autocomplete>
+            </el-option>
+
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('commons.role')" prop="roleIds">
           <el-select v-model="form.roleIds" multiple :placeholder="$t('role.please_choose_role')" class="select-width">
@@ -136,6 +144,9 @@
         currentPage: 1,
         pageSize: 5,
         total: 0,
+        options: [],
+        loading: false,
+        ids: []
       }
     },
     methods: {
@@ -165,6 +176,7 @@
       },
       handleClose() {
         this.form = {};
+        this.options = [];
       },
       edit(row) {
         this.updateVisible = true;
@@ -217,9 +229,9 @@
         }
         this.form = {};
         this.createVisible = true;
-        this.result = this.$get('/user/list/', response => {
-          this.userList = response.data;
-        });
+        // this.result = this.$get('/user/list/', response => {
+        //   this.userList = response.data;
+        // });
         this.result = this.$get('/role/list/org', response => {
           this.$set(this.form, "roles", response.data);
         })
@@ -228,19 +240,8 @@
         this.$refs[formName].validate((valid) => {
           let orgId = this.currentUser().lastOrganizationId;
           if (valid) {
-            let userIds = [];
-            let userId = this.form.userId;
-            let email  = this.form.memberSign;
-            let member = this.userList.find(user => user.id === email || user.email === email);
-            if (!member) {
-              this.$warning(this.$t('member.no_such_user'));
-              return false;
-            } else {
-              userId = member.id;
-            }
-            userIds.push(userId);
             let param = {
-              userIds: userIds,
+              userIds: this.form.ids,
               roleIds: this.form.roleIds,
               organizationId: orgId
             };
@@ -254,21 +255,21 @@
           }
         });
       },
-      querySearch(queryString, cb) {
-        var userList = this.userList;
-        var results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-      createFilter(queryString) {
-        return (user) => {
-          return (user.email.indexOf(queryString.toLowerCase()) === 0 || user.id.indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      handleSelect(item) {
-        this.$set(this.form, "userId", item.id);
+      remoteMethod(query) {
+        query = query.trim()
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.$get("/user/search/" + query, response => {
+              this.options = response.data;
+            })
+          }, 200);
+        } else {
+          this.options = [];
         }
       }
+    },
   }
 </script>