From 5bbee94e001dd69d22911a2a2ffe1dc81f3b9a25 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Fri, 11 Jun 2021 17:26:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):?=
 =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E6=B7=BB=E5=8A=A0=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organization/OrganizationMember.vue       | 32 +++-------
 .../organization/OrganizationWorkspace.vue    | 64 ++++++++++---------
 .../settings/project/EditMember.vue           | 56 +++++++---------
 .../settings/workspace/MsProject.vue          | 57 ++++++++---------
 .../settings/workspace/WorkspaceMember.vue    | 51 ++++++---------
 5 files changed, 113 insertions(+), 147 deletions(-)

diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index ebd21fbb6a..7c324240a8 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -48,29 +48,25 @@
                            :total="total"/>
     </el-card>
 
-    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="createVisible" width="40%" :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="ids"
-                      :rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'blur'}">
+                      :rules="{required: true, message: $t('member.please_choose_member'), 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')"
-            :remote-method="remoteMethod"
-            :loading="loading">
+            :placeholder="$t('member.please_choose_member')">
             <el-option
-              v-for="item in options"
+              v-for="item in userList"
               :key="item.id"
               :label="item.id"
               :value="item.id">
               <template>
-                <span class="org-member-name">{{item.id}}</span>
+                <span class="org-member-name">{{item.name}} ({{item.id}})</span>
                 <span class="org-member-email">{{item.email}}</span>
               </template>
             </el-option>
@@ -199,6 +195,7 @@
           //   name: this.$t('user.button.add_user_role_batch'), handleClick: this.addUserRoleBatch
           // }
         ],
+        userList: []
       }
     },
     methods: {
@@ -313,6 +310,9 @@
         }
         this.form = {};
         this.createVisible = true;
+        this.result = this.$get('/user/list/', response => {
+          this.userList = response.data;
+        });
         this.result = this.$post('/user/group/list', {type: GROUP_ORGANIZATION, resourceId: orgId}, response => {
           this.$set(this.form, "groups", response.data);
         })
@@ -337,20 +337,6 @@
           }
         });
       },
-      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 = [];
-        }
-      },
       initWorkspaceBatchProcessDataStruct(isShow){
         let organizationId = getCurrentOrganizationId();
         this.$get("/user/getWorkspaceDataStruct/"+organizationId, response => {
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index d642940476..1a7f20bfeb 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -103,29 +103,31 @@
 
     <!-- add workspace member dialog -->
     <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible"
-               width="30%"
+               width="40%"
                :destroy-on-close="true"
                @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="memberSign"
-                      :rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'change'}">
-          <el-autocomplete
-            class="input-with-autocomplete"
-            v-model="memberForm.memberSign"
-            :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="ws-member-name">{{ scope.item.id }}</span>
-              <span class="ws-member-email">{{ scope.item.email }}</span>
-            </template>
-          </el-autocomplete>
+        <el-form-item :label="$t('commons.member')" prop="userIds"
+                      :rules="{required: true, message: $t('member.please_choose_member'), trigger: 'blur'}">
+          <el-select
+            v-model="memberForm.userIds"
+            multiple
+            filterable
+            :popper-append-to-body="false"
+            class="select-width"
+            :placeholder="$t('member.please_choose_member')">
+            <el-option
+              v-for="item in userList"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id">
+              <template>
+                <span class="ws-member-name">{{item.name}} ({{item.id}})</span>
+                <span class="ws-member-email">{{item.email}}</span>
+              </template>
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('commons.group')" prop="groupIds">
           <el-select v-model="memberForm.groupIds" multiple :placeholder="$t('group.please_select_group')"
@@ -409,19 +411,19 @@ export default {
     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(this.$t('member.no_such_user'));
-            return false;
-          } else {
-            userId = member.id;
-          }
-          userIds.push(userId);
+          // 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(this.$t('member.no_such_user'));
+          //   return false;
+          // } else {
+          //   userId = member.id;
+          // }
+          // userIds.push(userId);
           let param = {
-            userIds: userIds,
+            userIds: this.memberForm.userIds,
             groupIds: this.memberForm.groupIds,
             workspaceId: this.currentWorkspaceRow.id
           };
diff --git a/frontend/src/business/components/settings/project/EditMember.vue b/frontend/src/business/components/settings/project/EditMember.vue
index fa486e75e5..e596d17283 100644
--- a/frontend/src/business/components/settings/project/EditMember.vue
+++ b/frontend/src/business/components/settings/project/EditMember.vue
@@ -1,26 +1,29 @@
 <template>
-  <el-dialog :close-on-click-modal="false" title="添加成员" :visible.sync="dialogVisible" width="30%" :destroy-on-close="true"
+  <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogVisible" width="40%" :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"
-          :placeholder="$t('member.input_id_or_email')"
-          :trigger-on-focus="false"
-          :fetch-suggestions="querySearch"
-          size="small"
-          highlight-first-item
-          value-key="email"
-        >
-          <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 :label="$t('commons.member')" prop="userIds" :rules="{required: true, message: $t('member.please_choose_member'), trigger: 'blur'}">
+        <el-select
+          v-model="form.userIds"
+          multiple
+          filterable
+          :popper-append-to-body="false"
+          class="select-width"
+          :placeholder="$t('member.please_choose_member')">
+          <el-option
+            v-for="item in userList"
+            :key="item.id"
+            :label="item.id"
+            :value="item.id">
+            <template>
+              <span class="workspace-member-name">{{item.name}} ({{item.id}})</span>
+              <span class="workspace-member-email">{{item.email}}</span>
+            </template>
+          </el-option>
+        </el-select>
       </el-form-item>
-      <el-form-item label="用户组" prop="groupIds">
-        <el-select v-model="form.groupIds" multiple placeholder="请选择用户组" class="select-width">
+      <el-form-item :label="$t('commons.group')" prop="groupIds">
+        <el-select v-model="form.groupIds" multiple :placeholder="$t('group.please_select_group')" class="select-width">
           <el-option
             v-for="item in form.groups"
             :key="item.id"
@@ -56,7 +59,7 @@ export default {
           {required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
         ],
         groupIds: [
-          {required: true, message: '请选择用户组', trigger: ['blur']}
+          {required: true, message: this.$t('group.please_select_group'), trigger: ['blur']}
         ]
       },
       userList: [],
@@ -71,19 +74,8 @@ export default {
     submitForm() {
       this.$refs['form'].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(this.$t('member.no_such_user'));
-            return false;
-          } else {
-            userId = member.id;
-          }
-          userIds.push(userId);
           let param = {
-            userIds: userIds,
+            userIds: this.form.userIds,
             groupIds: this.form.groupIds,
             projectId: this.projectId
           };
diff --git a/frontend/src/business/components/settings/workspace/MsProject.vue b/frontend/src/business/components/settings/workspace/MsProject.vue
index 04849c9864..9ba6a20e47 100644
--- a/frontend/src/business/components/settings/workspace/MsProject.vue
+++ b/frontend/src/business/components/settings/workspace/MsProject.vue
@@ -200,28 +200,30 @@
     </el-dialog>
 
 
-    <el-dialog :close-on-click-modal="false" title="添加成员" :visible.sync="dialogMemberVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogMemberVisible" width="40%"
                :destroy-on-close="true"
                @close="handleMemberClose">
       <el-form :model="memberForm" 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="memberForm.memberSign"
-            :placeholder="$t('member.input_id_or_email')"
-            :trigger-on-focus="false"
-            :fetch-suggestions="querySearch"
-            size="small"
-            highlight-first-item
-            value-key="email"
-            style="width: 100%"
-          >
-            <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 :label="$t('commons.member')" prop="userIds"
+                      :rules="{required: true, message:$t('member.please_choose_member'), trigger: 'blur'}">
+          <el-select
+            v-model="memberForm.userIds"
+            multiple
+            filterable
+            :popper-append-to-body="false"
+            class="select-width"
+            :placeholder="$t('member.please_choose_member')">
+            <el-option
+              v-for="item in userList"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id">
+              <template>
+                <span class="workspace-member-name">{{item.name}} ({{item.id}})</span>
+                <span class="workspace-member-email">{{item.email}}</span>
+              </template>
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('commons.group')" prop="groupIds" :rules="{required: true, message: $t('group.please_select_group'), trigger: 'blur'}">
           <el-select v-model="memberForm.groupIds" multiple :placeholder="$t('group.please_select_group')" style="width: 100%">
@@ -616,19 +618,8 @@ export default {
     submitForm() {
       this.$refs['form'].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(this.$t('member.no_such_user'));
-            return false;
-          } else {
-            userId = member.id;
-          }
-          userIds.push(userId);
           let param = {
-            userIds: userIds,
+            userIds: this.memberForm.userIds,
             groupIds: this.memberForm.groupIds,
             projectId: this.currentProjectId
           };
@@ -688,6 +679,10 @@ pre {
   padding: 0px;
 }
 
+.select-width {
+  width: 100%;
+}
+
 .workspace-member-name {
   float: left;
 }
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index b28a329259..63c009731e 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -49,26 +49,28 @@
                            :total="total"/>
     </el-card>
 
-    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="createVisible" width="40%" :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"
-            :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="workspace-member-name">{{scope.item.id}}</span>
-              <span class="workspace-member-email">{{scope.item.email}}</span>
-            </template>
-          </el-autocomplete>
+        <el-form-item :label="$t('commons.member')" prop="userIds" :rules="{required: true, message: $t('member.please_choose_member'), trigger: 'blur'}">
+          <el-select
+            v-model="form.userIds"
+            multiple
+            filterable
+            :popper-append-to-body="false"
+            class="select-width"
+            :placeholder="$t('member.please_choose_member')">
+            <el-option
+              v-for="item in userList"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id">
+              <template>
+                <span class="workspace-member-name">{{item.name}} ({{item.id}})</span>
+                <span class="workspace-member-email">{{item.email}}</span>
+              </template>
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('commons.group')" prop="groupIds">
           <el-select v-model="form.groupIds" multiple :placeholder="$t('group.please_select_group')" class="select-width">
@@ -325,19 +327,8 @@
       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(this.$t('member.no_such_user'));
-              return false;
-            } else {
-              userId = member.id;
-            }
-            userIds.push(userId);
             let param = {
-              userIds: userIds,
+              userIds: this.form.userIds,
               groupIds: this.form.groupIds,
               workspaceId: getCurrentWorkspaceId()
             };