修改工作空间管理员添加成员的方式

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

@@ -75,18 +75,23 @@
                @close="closeFunc">
       <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px"
                size="small">
-        <el-form-item :label="$t('commons.member')" prop="userIds">
+        <el-form-item :label="$t('commons.member')" prop="memberSign" :rules="{required: true, message: '请先选择正确的信息', trigger: 'change'}">
-          <el-select v-model="memberForm.userIds" multiple :placeholder="$t('member.please_choose_member')"
+          <el-autocomplete
-                     class="select-width">
+            class="input-with-autocomplete"
-            <el-option
+            v-model="memberForm.memberSign"
-              v-for="item in memberForm.userList"
+            placeholder="请输入用户 ID , 或者用户邮箱"
-              :key="item.id"
+            :trigger-on-focus="false"
-              :label="item.name"
+            :fetch-suggestions="querySearch"
-              :value="item.id">
+            size="small"
-              <span class="ws-member-name">{{ item.name }}</span>
+            highlight-first-item
-              <span class="ws-member-email">{{ item.email }}</span>
+            value-key="email"
-            </el-option>
+            @select="handleSelect"
-          </el-select>
+          >
+            <template v-slot:default="scope">
+              <span class="ws-member-name">{{scope.item.id}}</span>
+              <span class="ws-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="memberForm.roleIds" multiple :placeholder="$t('role.please_choose_role')"
@@ -256,7 +261,7 @@
         this.dialogWsMemberAddVisible = true;
         this.memberForm = {};
         this.result = this.$get('/user/list/', response => {
-          this.$set(this.memberForm, "userList", response.data);
+          this.userList = response.data;
         });
         this.result = this.$get('/role/list/test', response => {
           this.$set(this.memberForm, "roles", response.data);
@@ -315,12 +320,24 @@
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
+            let userIds = [];
+            let userId = this.memberForm.userId;
+            let email  = this.memberForm.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.memberForm.userIds,
+              userIds: userIds,
               roleIds: this.memberForm.roleIds,
               workspaceId: this.currentWorkspaceRow.id
             };
             this.result = this.$post("user/ws/member/add", param, () => {
+              this.$success(this.$t('commons.save_success'));
               this.cellClick(this.currentWorkspaceRow);
               this.dialogWsMemberAddVisible = false;
             })
@@ -371,6 +388,20 @@
       buildPagePath(path) {
         return path + "/" + this.dialogCurrentPage + "/" + this.dialogPageSize;
       },
+      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);
+      }
     },
     data() {
       return {
@@ -382,6 +413,7 @@
         condition: {},
         dialogCondition: {},
         items: [],
+        userList: [],
         currentPage: 1,
         pageSize: 5,
         total: 0,
@@ -449,5 +481,9 @@
     padding: 0px;
   }
 
+  .input-with-autocomplete {
+    width: 100%;
+  }
+
 </style>
 

frontend/src/business/components/settings/workspace/WorkspaceMember.vue

@@ -28,18 +28,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-form-item :label="$t('commons.member')" prop="memberSign" :rules="{required: true, message: '请先选择正确的信息', trigger: 'change'}">
-          <el-select v-model="form.userIds" multiple :placeholder="$t('member.please_choose_member')"
+          <el-autocomplete
-                     class="select-width">
+            class="input-with-autocomplete"
-            <el-option
+            v-model="form.memberSign"
-              v-for="item in form.userList"
+            placeholder="请输入用户 ID , 或者用户邮箱"
-              :key="item.id"
+            :trigger-on-focus="false"
-              :label="item.name"
+            :fetch-suggestions="querySearch"
-              :value="item.id">
+            size="small"
-              <span class="workspace-member-name">{{ item.name }}</span>
+            highlight-first-item
-              <span class="workspace-member-email">{{ item.email }}</span>
+            value-key="email"
-            </el-option>
+            @select="handleSelect"
-          </el-select>
+          >
+            <template v-slot:default="scope">
+              <span class="workspace-member-name">{{scope.item.id}}</span>
+              <span class="workspace-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">
@@ -116,6 +121,7 @@
         queryPath: "/user/ws/member/list",
         condition: {},
         tableData: [],
+        userList: [],
         rules: {
           userIds: [
             {required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
@@ -219,7 +225,7 @@
         }
         this.$post('/user/org/member/list/all', param, response => {
           this.createVisible = true;
-          this.$set(this.form, "userList", response.data);
+          this.userList = response.data;
         })
         this.result = this.$get('/role/list/test', response => {
           this.$set(this.form, "roles", response.data);
@@ -228,17 +234,43 @@
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
           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,
               workspaceId: this.currentUser().lastWorkspaceId
             };
             this.result = this.$post("user/ws/member/add", param, () => {
+              this.$success(this.$t('commons.save_success'));
               this.initTableData();
               this.createVisible = 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);
       }
     }
   }
@@ -264,4 +296,8 @@
     font-size: 13px;
   }
 
+  .input-with-autocomplete {
+    width: 100%;
+  }
+
 </style>