refactor(系统设置): 修改添加成员方式

2021-06-11 17:26:12 +08:00 · 2021-06-11 17:26:12 +08:00 · 5bbee94e00
parent 80a42c2f8a
commit 5bbee94e00
5 changed files with 113 additions and 147 deletions
--- 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 => {
--- 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>
+        <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-autocomplete>
+            </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
          };
--- 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>
+      <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-autocomplete>
+          </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
          };
--- 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>
+        <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-autocomplete>
+            </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;
 }
--- 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>
+        <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-autocomplete>
+            </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()
            };