test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(系统设置): 优化添加成员

This commit is contained in:
shiziyuan9527 2021-06-11 18:47:19 +08:00 committed by 刘瑞斌
parent efd5d62b84
commit 0ddb35e5bd
6 changed files with 216 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/src/business/components/settings/common/AddMember.vue Normal file
View File

@ -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>

92
frontend/src/business/components/settings/organization/OrganizationMember.vue
View File

@ -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();

95
frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
View File

@ -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) {

95
frontend/src/business/components/settings/project/EditMember.vue
View File

@ -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>

85
frontend/src/business/components/settings/workspace/MsProject.vue
View File

@ -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;

91
frontend/src/business/components/settings/workspace/WorkspaceMember.vue
View File

@ -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;