diff --git a/frontend/src/business/components/settings/common/AddMember.vue b/frontend/src/business/components/settings/common/AddMember.vue
new file mode 100644
index 0000000000..42309a0bab
--- /dev/null
+++ b/frontend/src/business/components/settings/common/AddMember.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogVisible" width="40%"
+             :destroy-on-close="true"
+             @close="close" v-loading="result.loading">
+    <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"
+                    :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="user-select-left">{{ item.name }} ({{ item.id }})</span>
+              <span class="user-select-right">{{ 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">
+          <el-option
+            v-for="item in form.groups"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template v-slot:footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="medium">{{ $t('commons.cancel') }}</el-button>
+        <el-button type="primary" @click="submitForm('form')" @keydown.enter.native.prevent size="medium">
+          {{ $t('commons.confirm') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: "AddMember",
+  data() {
+    return {
+      dialogVisible: false,
+      form: {},
+      rules: {
+        userIds: [
+          {required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
+        ],
+        groupIds: [
+          {required: true, message: this.$t('group.please_select_group'), trigger: ['blur']}
+        ]
+      },
+      userList: [],
+      result: {}
+    }
+  },
+  props: {
+    groupType: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    groupScopeId: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  methods: {
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          let param = {
+            userIds: this.form.userIds,
+            groupIds: this.form.groupIds,
+          };
+          this.$emit("submit", param);
+        }
+      });
+    },
+    open() {
+      this.dialogVisible = true;
+      this.result = this.$get('/user/list/', response => {
+        this.userList = response.data;
+      })
+      this.result = this.$post('/user/group/list', {type: this.groupType, resourceId: this.groupScopeId}, response => {
+        this.$set(this.form, "groups", response.data);
+      })
+    },
+    close() {
+      this.dialogVisible = false;
+      this.form = {};
+    }
+  }
+}
+</script>
+
+<style scoped>
+.user-select-left {
+  float: left;
+}
+
+.user-select-right {
+  float: right;
+  margin-right: 18px;
+  color: #8492a6;
+  font-size: 13px;
+}
+
+.select-width {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index 7c324240a8..378df3aa31 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -48,49 +48,7 @@
                            :total="total"/>
     </el-card>
 
-    <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.please_choose_member'), trigger: 'blur'}">
-          <el-select
-            v-model="form.ids"
-            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="org-member-name">{{item.name}} ({{item.id}})</span>
-                <span class="org-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">
-            <el-option
-              v-for="item in form.groups"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-
-      <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="createVisible = false"
-          @confirm="submitForm('form')"/>
-      </template>
-    </el-dialog>
+    <add-member :group-type="'ORGANIZATION'" :group-scope-id="orgId" ref="addMember" @submit="submitForm"/>
 
     <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
@@ -148,10 +106,12 @@
   import UserCascader from "@/business/components/settings/system/components/UserCascader";
   import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
   import {GROUP_ORGANIZATION} from "@/common/js/constants";
+  import AddMember from "@/business/components/settings/common/AddMember";
 
   export default {
     name: "MsOrganizationMember",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter,
+    components: {
+      AddMember, MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter,
       MsTableHeaderSelectPopover,UserCascader,ShowMoreBtn},
     activated() {
       this.initTableData();
@@ -198,6 +158,11 @@
         userList: []
       }
     },
+    computed: {
+      orgId() {
+        return getCurrentOrganizationId();
+      }
+    },
     methods: {
       currentUser: () => {
         return getCurrentUser();
@@ -303,39 +268,16 @@
         });
       },
       create() {
-        let orgId = this.currentUser().lastOrganizationId;
-        if (!orgId) {
-          this.$warning(this.$t('organization.select_organization'));
-          return false;
-        }
-        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);
-        })
+        this.$refs.addMember.open();
         listenGoBack(this.handleClose);
       },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          let orgId = this.currentUser().lastOrganizationId;
-          if (valid) {
-            let param = {
-              userIds: this.form.ids,
-              groupIds: this.form.groupIds,
-              organizationId: orgId
-            };
-            this.result = this.$post("user/org/member/add", param, () => {
-              this.$success(this.$t('commons.save_success'));
-              this.initTableData();
-              this.createVisible = false;
-            })
-          } else {
-            return false;
-          }
-        });
+      submitForm(param) {
+        param['organizationId'] = this.orgId;
+        this.result = this.$post("user/org/member/add", param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.initTableData();
+          this.$refs.addMember.close();
+        })
       },
       initWorkspaceBatchProcessDataStruct(isShow){
         let organizationId = getCurrentOrganizationId();
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 1a7f20bfeb..ecc4d85633 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -102,51 +102,7 @@
     </el-dialog>
 
     <!-- add workspace member dialog -->
-    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible"
-               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="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')"
-                     class="select-width">
-            <el-option
-              v-for="item in memberForm.groups"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="dialogWsMemberAddVisible = false"
-          @confirm="submitForm('form')"/>
-      </template>
-    </el-dialog>
+    <add-member :group-type="'WORKSPACE'" :group-scope-id="orgId" ref="addMember" @submit="submitForm"/>
 
     <!-- update workspace member dialog -->
     <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible"
@@ -210,6 +166,7 @@ import {
   removeGoBackListener
 } from "../../../../common/js/utils";
 import MsDeleteConfirm from "../../common/components/MsDeleteConfirm";
+import AddMember from "@/business/components/settings/common/AddMember";
 
 export default {
   name: "MsOrganizationWorkspace",
@@ -221,7 +178,8 @@ export default {
     MsRolesTag,
     MsTableOperator,
     MsDialogFooter,
-    MsTableOperatorButton
+    MsTableOperatorButton,
+    AddMember
   },
   activated() {
     this.list();
@@ -232,6 +190,9 @@ export default {
     },
     workspaceId() {
       return getCurrentWorkspaceId();
+    },
+    orgId() {
+      return getCurrentOrganizationId();
     }
   },
   inject: [
@@ -351,14 +312,7 @@ export default {
 
     },
     addMember() {
-      this.dialogWsMemberAddVisible = true;
-      this.memberForm = {};
-      this.result = this.$get('/user/list/', response => {
-        this.userList = response.data;
-      });
-      this.result = this.$post('/user/group/list', {type: GROUP_WORKSPACE, resourceId: getCurrentOrganizationId()}, response => {
-        this.$set(this.memberForm, "groups", response.data);
-      });
+      this.$refs.addMember.open();
       listenGoBack(this.close);
     },
     cellClick(row) {
@@ -408,33 +362,12 @@ export default {
     closeFunc() {
       this.form = {};
     },
-    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 param = {
-            userIds: this.memberForm.userIds,
-            groupIds: this.memberForm.groupIds,
-            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;
-          });
-        } else {
-          return false;
-        }
+    submitForm(param) {
+      param['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.$refs.addMember.close();
       });
     },
     editMember(row) {
diff --git a/frontend/src/business/components/settings/project/EditMember.vue b/frontend/src/business/components/settings/project/EditMember.vue
index e596d17283..a9f8d20cd2 100644
--- a/frontend/src/business/components/settings/project/EditMember.vue
+++ b/frontend/src/business/components/settings/project/EditMember.vue
@@ -1,55 +1,15 @@
 <template>
-  <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="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">
-          <el-option
-            v-for="item in form.groups"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id">
-          </el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <template v-slot:footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false" size="medium">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="submitForm('form')" @keydown.enter.native.prevent size="medium">
-          {{ $t('commons.confirm') }}
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
+  <add-member :group-type="GROUP_PROJECT" :group-scope-id="organizationId" ref="addMember" @submit="submit"/>
 </template>
 
 <script>
 import {GROUP_PROJECT} from "@/common/js/constants";
 import {getCurrentOrganizationId, getCurrentProjectID} from "@/common/js/utils";
+import AddMember from "@/business/components/settings/common/AddMember";
 
 export default {
   name: "EditMember",
+  components: {AddMember},
   data() {
     return {
       dialogVisible: false,
@@ -68,49 +28,30 @@ export default {
   computed: {
     projectId() {
       return getCurrentProjectID();
+    },
+    organizationId() {
+      return getCurrentOrganizationId();
+    },
+    GROUP_PROJECT() {
+      return GROUP_PROJECT;
     }
   },
   methods: {
-    submitForm() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          let param = {
-            userIds: this.form.userIds,
-            groupIds: this.form.groupIds,
-            projectId: this.projectId
-          };
-          this.result = this.$post("user/project/member/add", param, () => {
-            this.$success(this.$t('commons.save_success'));
-            this.$emit("refresh");
-            this.dialogVisible = false;
-          })
-        }
-      });
+    submit(param) {
+      param['projectId'] = this.projectId
+      this.result = this.$post("user/project/member/add", param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.$emit("refresh");
+        this.$refs.addMember.close();
+      })
     },
     open() {
-      this.$get('/user/list/', response => {
-        this.dialogVisible = true;
-        this.userList = response.data;
-      })
-      this.result = this.$post('/user/group/list', {type: GROUP_PROJECT, resourceId: getCurrentOrganizationId()}, response => {
-        this.$set(this.form, "groups", response.data);
-      })
+      this.$refs.addMember.open();
     },
     handleClose() {
       this.dialogVisible = false;
       this.form = {};
-    },
-    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);
-      };
-    },
+    }
   }
 }
 </script>
diff --git a/frontend/src/business/components/settings/workspace/MsProject.vue b/frontend/src/business/components/settings/workspace/MsProject.vue
index 8c31e1a158..d7220c3926 100644
--- a/frontend/src/business/components/settings/workspace/MsProject.vue
+++ b/frontend/src/business/components/settings/workspace/MsProject.vue
@@ -199,52 +199,7 @@
       </template>
     </el-dialog>
 
-
-    <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="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%">
-            <el-option
-              v-for="item in memberForm.groups"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template v-slot:footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogMemberVisible = false" size="medium">{{ $t('commons.cancel') }}</el-button>
-          <el-button type="primary" @click="submitForm('form')" @keydown.enter.native.prevent size="medium">
-            {{ $t('commons.confirm') }}
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <add-member :group-type="'PROJECT'" :group-scope-id="orgId" ref="addMember" @submit="submitForm"/>
 
     <ms-delete-confirm :title="$t('project.delete')" @delete="_handleDelete" ref="deleteConfirm"/>
 
@@ -285,6 +240,7 @@ import MsResourceFiles from "@/business/components/performance/test/components/R
 import TemplateSelect from "@/business/components/settings/workspace/template/TemplateSelect";
 import {PROJECT_CONFIGS} from "@/business/components/common/components/search/search-components";
 import MsRolesTag from "@/business/components/common/components/MsRolesTag";
+import AddMember from "@/business/components/settings/common/AddMember";
 
 export default {
   name: "MsProject",
@@ -298,7 +254,8 @@ export default {
     MsTableOperatorButton,
     MsDeleteConfirm,
     MsMainContainer, MsRolesTag,
-    MsContainer, MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter
+    MsContainer, MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter,
+    AddMember
   },
   inject: [
     'reloadTopMenus'
@@ -367,6 +324,9 @@ export default {
     },
     projectId() {
       return getCurrentProjectID();
+    },
+    orgId() {
+      return getCurrentOrganizationId();
     }
   },
   destroyed() {
@@ -616,33 +576,16 @@ export default {
         }
       });
     },
-    submitForm() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          let param = {
-            userIds: this.memberForm.userIds,
-            groupIds: this.memberForm.groupIds,
-            projectId: this.currentProjectId
-          };
-          this.result = this.$post("user/project/member/add", param, () => {
-            this.$success(this.$t('commons.save_success'));
-            this.dialogSearch();
-            this.dialogMemberVisible = false;
-          });
-        }
+    submitForm(param) {
+      param['projectId'] = this.currentProjectId;
+      this.result = this.$post("user/project/member/add", param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.dialogSearch();
+        this.$refs.addMember.close();
       });
     },
     open() {
-      this.$get('/user/list/', response => {
-        this.dialogMemberVisible = true;
-        this.userList = response.data;
-      });
-      this.result = this.$post('/user/group/list', {
-        type: GROUP_PROJECT,
-        resourceId: getCurrentOrganizationId()
-      }, response => {
-        this.$set(this.memberForm, "groups", response.data);
-      });
+      this.$refs.addMember.open();
     },
     handleMemberClose() {
       this.dialogMemberVisible = false;
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 63c009731e..7ffaefc825 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -49,46 +49,7 @@
                            :total="total"/>
     </el-card>
 
-    <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="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">
-            <el-option
-              v-for="item in form.groups"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="createVisible = false"
-          @confirm="submitForm('form')"/>
-      </template>
-    </el-dialog>
+    <add-member :group-type="'WORKSPACE'" :group-scope-id="orgId" ref="addMember" @submit="submitForm"/>
 
     <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
@@ -150,10 +111,12 @@
   import UserCascader from "@/business/components/settings/system/components/UserCascader";
   import ShowMoreBtn from "@/business/components/track/case/components/ShowMoreBtn";
   import {GROUP_WORKSPACE} from "@/common/js/constants";
+  import AddMember from "@/business/components/settings/common/AddMember";
 
   export default {
     name: "MsMember",
-    components: {MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter,
+    components: {
+      AddMember, MsCreateBox, MsTablePagination, MsTableHeader, MsRolesTag, MsTableOperator, MsDialogFooter,
       MsTableHeaderSelectPopover,UserCascader,ShowMoreBtn},
     data() {
       return {
@@ -191,6 +154,11 @@
         ],
       }
     },
+    computed: {
+      orgId() {
+        return getCurrentOrganizationId();
+      }
+    },
     activated: function () {
       this.initTableData();
     },
@@ -301,7 +269,7 @@
         });
       },
       create() {
-        this.form = {};
+        // this.form = {};
         // let param = {
         //   name: this.condition.name,
         //   organizationId: this.currentUser().lastOrganizationId
@@ -315,31 +283,24 @@
         //   this.createVisible = true;
         //   this.userList = response.data;
         // })
-        this.$get('/user/list/', response => {
-          this.createVisible = true;
-          this.userList = response.data;
-        })
-        this.result = this.$post('/user/group/list', {type: GROUP_WORKSPACE, resourceId: getCurrentOrganizationId()}, response => {
-          this.$set(this.form, "groups", response.data);
-        })
+        // this.$get('/user/list/', response => {
+        //   this.createVisible = true;
+        //   this.userList = response.data;
+        // })
+        // this.result = this.$post('/user/group/list', {type: GROUP_WORKSPACE, resourceId: getCurrentOrganizationId()}, response => {
+        //   this.$set(this.form, "groups", response.data);
+        // })
+        this.$refs.addMember.open();
         listenGoBack(this.handleClose);
       },
-      submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let param = {
-              userIds: this.form.userIds,
-              groupIds: this.form.groupIds,
-              workspaceId: getCurrentWorkspaceId()
-            };
-            this.result = this.$post("user/ws/member/add", param, () => {
-              this.$success(this.$t('commons.save_success'));
-              this.initTableData();
-              this.selectRows.clear();
-              this.createVisible = false;
-            })
-          }
-        });
+      submitForm(param) {
+        param['workspaceId'] = getCurrentWorkspaceId();
+        this.result = this.$post("user/ws/member/add", param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.initTableData();
+          this.selectRows.clear();
+          this.$refs.addMember.close();
+        })
       },
       querySearch(queryString, cb) {
         var userList = this.userList;