修改组织管理员添加成员的方式

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

@@ -27,18 +27,23 @@
     <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="userIds">
-          <el-select v-model="form.userIds" multiple :placeholder="$t('member.please_choose_member')"
-                     class="select-width">
-            <el-option
-              v-for="item in form.userList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-              <span class="org-member-name">{{ item.name }}</span>
-              <span class="org-member-email">{{ item.email }}</span>
-            </el-option>
-          </el-select>
+        <el-form-item :label="$t('commons.member')" prop="memberSign" :rules="{required: true, message: '请先选择正确的信息', trigger: 'change'}">
+          <el-autocomplete
+            class="input-with-autocomplete"
+            v-model="form.memberSign"
+            placeholder="请输入用户 ID , 或者用户邮箱"
+            :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>
+            </template>
+          </el-autocomplete>
         </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">
@@ -113,6 +118,7 @@
         result: {},
         createVisible: false,
         updateVisible: false,
+        userList: [],
         form: {},
         queryPath: "/user/org/member/list",
         condition: {},
@@ -205,9 +211,9 @@
           return false;
         }
         this.form = {};
+        this.createVisible = true;
         this.result = this.$get('/user/besideorg/list/' + this.currentUser().lastOrganizationId, response => {
-          this.createVisible = true;
-          this.$set(this.form, "userList", response.data);
+          this.userList = response.data;
         });
         this.result = this.$get('/role/list/org', response => {
           this.$set(this.form, "roles", response.data);
@@ -217,12 +223,24 @@
         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("未找到该用户信息，请输入正确ID 或者 邮箱！");
+              return false;
+            } else {
+              userId = member.id;
+            }
+            userIds.push(userId);
             let param = {
-              userIds: this.form.userIds,
+              userIds: userIds,
               roleIds: this.form.roleIds,
               organizationId: orgId
             };
             this.result = this.$post("user/org/member/add", param, () => {
+              this.$success(this.$t('commons.save_success'));
               this.initTableData();
               this.createVisible = false;
             })
@@ -230,6 +248,20 @@
             return false;
           }
         });
+      },
+      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);
       }
     }
   }
@@ -247,7 +279,8 @@
     font-size: 13px;
   }
 
-  .select-width {
+  .input-with-autocomplete {
     width: 100%;
   }
+
 </style>