From b61dbfe1078040d6b577431657b596a7672635b7 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Tue, 26 May 2020 16:13:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B7=A5=E4=BD=9C=E7=A9=BA?=
 =?UTF-8?q?=E9=97=B4=E7=AE=A1=E7=90=86=E5=91=98=E6=B7=BB=E5=8A=A0=E6=88=90?=
 =?UTF-8?q?=E5=91=98=E7=9A=84=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organization/OrganizationWorkspace.vue    | 64 +++++++++++++++----
 .../settings/workspace/WorkspaceMember.vue    | 64 +++++++++++++++----
 2 files changed, 100 insertions(+), 28 deletions(-)

diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 5d6ab25502..77700810d6 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/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-select v-model="memberForm.userIds" multiple :placeholder="$t('member.please_choose_member')"
-                     class="select-width">
-            <el-option
-              v-for="item in memberForm.userList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-              <span class="ws-member-name">{{ item.name }}</span>
-              <span class="ws-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="memberForm.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="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>
 
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 262f5ab49d..ddd649a076 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/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-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="workspace-member-name">{{ item.name }}</span>
-              <span class="workspace-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="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>