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

This commit is contained in:
shiziyuan9527 2021-06-11 17:26:12 +08:00 committed by 刘瑞斌
parent 80a42c2f8a
commit 5bbee94e00
5 changed files with 113 additions and 147 deletions

View File

@ -48,29 +48,25 @@
:total="total"/> :total="total"/>
</el-card> </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"> @close="handleClose">
<el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small"> <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" <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 <el-select
v-model="form.ids" v-model="form.ids"
multiple multiple
filterable filterable
remote
reserve-keyword
:popper-append-to-body="false" :popper-append-to-body="false"
class="select-width" class="select-width"
:placeholder="$t('member.input_id_or_email')" :placeholder="$t('member.please_choose_member')">
:remote-method="remoteMethod"
:loading="loading">
<el-option <el-option
v-for="item in options" v-for="item in userList"
:key="item.id" :key="item.id"
:label="item.id" :label="item.id"
:value="item.id"> :value="item.id">
<template> <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> <span class="org-member-email">{{item.email}}</span>
</template> </template>
</el-option> </el-option>
@ -199,6 +195,7 @@
// name: this.$t('user.button.add_user_role_batch'), handleClick: this.addUserRoleBatch // name: this.$t('user.button.add_user_role_batch'), handleClick: this.addUserRoleBatch
// } // }
], ],
userList: []
} }
}, },
methods: { methods: {
@ -313,6 +310,9 @@
} }
this.form = {}; this.form = {};
this.createVisible = true; 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.result = this.$post('/user/group/list', {type: GROUP_ORGANIZATION, resourceId: orgId}, response => {
this.$set(this.form, "groups", response.data); 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){ initWorkspaceBatchProcessDataStruct(isShow){
let organizationId = getCurrentOrganizationId(); let organizationId = getCurrentOrganizationId();
this.$get("/user/getWorkspaceDataStruct/"+organizationId, response => { this.$get("/user/getWorkspaceDataStruct/"+organizationId, response => {

View File

@ -103,29 +103,31 @@
<!-- add workspace member dialog --> <!-- add workspace member dialog -->
<el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible"
width="30%" width="40%"
:destroy-on-close="true" :destroy-on-close="true"
@close="closeFunc"> @close="closeFunc">
<el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px" <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px"
size="small"> size="small">
<el-form-item :label="$t('commons.member')" prop="memberSign" <el-form-item :label="$t('commons.member')" prop="userIds"
:rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'change'}"> :rules="{required: true, message: $t('member.please_choose_member'), trigger: 'blur'}">
<el-autocomplete <el-select
class="input-with-autocomplete" v-model="memberForm.userIds"
v-model="memberForm.memberSign" multiple
:placeholder="$t('member.input_id_or_email')" filterable
:trigger-on-focus="false" :popper-append-to-body="false"
:fetch-suggestions="querySearch" class="select-width"
size="small" :placeholder="$t('member.please_choose_member')">
highlight-first-item <el-option
value-key="email" v-for="item in userList"
@select="handleSelect" :key="item.id"
> :label="item.id"
<template v-slot:default="scope"> :value="item.id">
<span class="ws-member-name">{{ scope.item.id }}</span> <template>
<span class="ws-member-email">{{ scope.item.email }}</span> <span class="ws-member-name">{{item.name}} ({{item.id}})</span>
</template> <span class="ws-member-email">{{item.email}}</span>
</el-autocomplete> </template>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.group')" prop="groupIds"> <el-form-item :label="$t('commons.group')" prop="groupIds">
<el-select v-model="memberForm.groupIds" multiple :placeholder="$t('group.please_select_group')" <el-select v-model="memberForm.groupIds" multiple :placeholder="$t('group.please_select_group')"
@ -409,19 +411,19 @@ export default {
submitForm(formName) { submitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
let userIds = []; // let userIds = [];
let userId = this.memberForm.userId; // let userId = this.memberForm.userId;
let email = this.memberForm.memberSign; // let email = this.memberForm.memberSign;
let member = this.userList.find(user => user.id === email || user.email === email); // let member = this.userList.find(user => user.id === email || user.email === email);
if (!member) { // if (!member) {
this.$warning(this.$t('member.no_such_user')); // this.$warning(this.$t('member.no_such_user'));
return false; // return false;
} else { // } else {
userId = member.id; // userId = member.id;
} // }
userIds.push(userId); // userIds.push(userId);
let param = { let param = {
userIds: userIds, userIds: this.memberForm.userIds,
groupIds: this.memberForm.groupIds, groupIds: this.memberForm.groupIds,
workspaceId: this.currentWorkspaceRow.id workspaceId: this.currentWorkspaceRow.id
}; };

View File

@ -1,26 +1,29 @@
<template> <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"> @close="handleClose">
<el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small"> <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-form-item :label="$t('commons.member')" prop="userIds" :rules="{required: true, message: $t('member.please_choose_member'), trigger: 'blur'}">
<el-autocomplete <el-select
class="input-with-autocomplete" v-model="form.userIds"
v-model="form.memberSign" multiple
:placeholder="$t('member.input_id_or_email')" filterable
:trigger-on-focus="false" :popper-append-to-body="false"
:fetch-suggestions="querySearch" class="select-width"
size="small" :placeholder="$t('member.please_choose_member')">
highlight-first-item <el-option
value-key="email" v-for="item in userList"
> :key="item.id"
<template v-slot:default="scope"> :label="item.id"
<span class="workspace-member-name">{{scope.item.id}}</span> :value="item.id">
<span class="workspace-member-email">{{scope.item.email}}</span> <template>
</template> <span class="workspace-member-name">{{item.name}} ({{item.id}})</span>
</el-autocomplete> <span class="workspace-member-email">{{item.email}}</span>
</template>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="用户组" prop="groupIds"> <el-form-item :label="$t('commons.group')" prop="groupIds">
<el-select v-model="form.groupIds" multiple placeholder="请选择用户组" class="select-width"> <el-select v-model="form.groupIds" multiple :placeholder="$t('group.please_select_group')" class="select-width">
<el-option <el-option
v-for="item in form.groups" v-for="item in form.groups"
:key="item.id" :key="item.id"
@ -56,7 +59,7 @@ export default {
{required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']} {required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
], ],
groupIds: [ groupIds: [
{required: true, message: '请选择用户组', trigger: ['blur']} {required: true, message: this.$t('group.please_select_group'), trigger: ['blur']}
] ]
}, },
userList: [], userList: [],
@ -71,19 +74,8 @@ export default {
submitForm() { submitForm() {
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (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 = { let param = {
userIds: userIds, userIds: this.form.userIds,
groupIds: this.form.groupIds, groupIds: this.form.groupIds,
projectId: this.projectId projectId: this.projectId
}; };

View File

@ -200,28 +200,30 @@
</el-dialog> </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" :destroy-on-close="true"
@close="handleMemberClose"> @close="handleMemberClose">
<el-form :model="memberForm" ref="form" :rules="rules" label-position="right" label-width="100px" size="small"> <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" <el-form-item :label="$t('commons.member')" prop="userIds"
:rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'change'}"> :rules="{required: true, message:$t('member.please_choose_member'), trigger: 'blur'}">
<el-autocomplete <el-select
class="input-with-autocomplete" v-model="memberForm.userIds"
v-model="memberForm.memberSign" multiple
:placeholder="$t('member.input_id_or_email')" filterable
:trigger-on-focus="false" :popper-append-to-body="false"
:fetch-suggestions="querySearch" class="select-width"
size="small" :placeholder="$t('member.please_choose_member')">
highlight-first-item <el-option
value-key="email" v-for="item in userList"
style="width: 100%" :key="item.id"
> :label="item.id"
<template v-slot:default="scope"> :value="item.id">
<span class="workspace-member-name">{{ scope.item.id }}</span> <template>
<span class="workspace-member-email">{{ scope.item.email }}</span> <span class="workspace-member-name">{{item.name}} ({{item.id}})</span>
</template> <span class="workspace-member-email">{{item.email}}</span>
</el-autocomplete> </template>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.group')" prop="groupIds" :rules="{required: true, message: $t('group.please_select_group'), trigger: 'blur'}"> <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-select v-model="memberForm.groupIds" multiple :placeholder="$t('group.please_select_group')" style="width: 100%">
@ -616,19 +618,8 @@ export default {
submitForm() { submitForm() {
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (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 = { let param = {
userIds: userIds, userIds: this.memberForm.userIds,
groupIds: this.memberForm.groupIds, groupIds: this.memberForm.groupIds,
projectId: this.currentProjectId projectId: this.currentProjectId
}; };
@ -688,6 +679,10 @@ pre {
padding: 0px; padding: 0px;
} }
.select-width {
width: 100%;
}
.workspace-member-name { .workspace-member-name {
float: left; float: left;
} }

View File

@ -49,26 +49,28 @@
:total="total"/> :total="total"/>
</el-card> </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"> @close="handleClose">
<el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small"> <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-form-item :label="$t('commons.member')" prop="userIds" :rules="{required: true, message: $t('member.please_choose_member'), trigger: 'blur'}">
<el-autocomplete <el-select
class="input-with-autocomplete" v-model="form.userIds"
v-model="form.memberSign" multiple
:placeholder="$t('member.input_id_or_email')" filterable
:trigger-on-focus="false" :popper-append-to-body="false"
:fetch-suggestions="querySearch" class="select-width"
size="small" :placeholder="$t('member.please_choose_member')">
highlight-first-item <el-option
value-key="email" v-for="item in userList"
@select="handleSelect" :key="item.id"
> :label="item.id"
<template v-slot:default="scope"> :value="item.id">
<span class="workspace-member-name">{{scope.item.id}}</span> <template>
<span class="workspace-member-email">{{scope.item.email}}</span> <span class="workspace-member-name">{{item.name}} ({{item.id}})</span>
</template> <span class="workspace-member-email">{{item.email}}</span>
</el-autocomplete> </template>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('commons.group')" prop="groupIds"> <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-select v-model="form.groupIds" multiple :placeholder="$t('group.please_select_group')" class="select-width">
@ -325,19 +327,8 @@
submitForm(formName) { submitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (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 = { let param = {
userIds: userIds, userIds: this.form.userIds,
groupIds: this.form.groupIds, groupIds: this.form.groupIds,
workspaceId: getCurrentWorkspaceId() workspaceId: getCurrentWorkspaceId()
}; };