mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-03 20:49:56 +08:00
组织菜单下工作空间添加成员列
This commit is contained in:
shiziyuan9527
parent
715f654a6f
commit
5a9d52a1b0
@ -16,6 +16,11 @@
|
||||
<el-table :data="items" style="width: 100%">
|
||||
<el-table-column prop="name" label="名称"/>
|
||||
<el-table-column prop="description" label="描述"/>
|
||||
<el-table-column :label="$t('commons.member')">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" class="member-size" @click="cellClick(scope.row)">{{scope.row.memberSize}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
|
||||
@ -55,6 +60,120 @@
|
||||
<el-button type="primary" @click="submit('form')" size="medium">创建</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- dialog of workspace member -->
|
||||
<el-dialog :visible.sync="memberVisible" width="70%" :destroy-on-close="true" @close="closeMemberFunc">
|
||||
<el-row type="flex" justify="space-between" align="middle">
|
||||
<span class="member-title">{{$t('commons.member')}}
|
||||
<ms-create-box :tips="addTips" :exec="addMember"/>
|
||||
</span>
|
||||
<span class="search">
|
||||
<el-input type="text" size="small"
|
||||
:placeholder="$t('organization.search_by_name')"
|
||||
prefix-icon="el-icon-search"
|
||||
maxlength="60" v-model="condition" clearable/>
|
||||
</span>
|
||||
</el-row>
|
||||
<!-- organization member table -->
|
||||
<el-table :data="memberLineData" style="width: 100%">
|
||||
<el-table-column prop="name" :label="$t('commons.username')"/>
|
||||
<el-table-column prop="email" :label="$t('commons.email')"/>
|
||||
<el-table-column prop="phone" :label="$t('commons.phone')"/>
|
||||
<el-table-column :label="$t('commons.role')" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-for="(role, index) in scope.row.roles" :key="index" size="mini" effect="dark" type="success">
|
||||
{{ role.name }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('commons.operating')">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="editMember(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
|
||||
<el-button @click="delMember(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<div class="table-page">
|
||||
<el-pagination
|
||||
@size-change="handleMemberSizeChange"
|
||||
@current-change="handleMemberCurrentChange"
|
||||
:current-page.sync="currentMemberPage"
|
||||
:page-sizes="[5, 10, 20, 50, 100]"
|
||||
:page-size="pageMemberSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="memberTotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- add workspace member dialog -->
|
||||
<el-dialog :title="$t('member.create')" :visible.sync="addMemberVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
|
||||
<el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="left" label-width="100px" size="small">
|
||||
<el-form-item :label="$t('commons.member')" prop="userIds">
|
||||
<el-select v-model="memberForm.userIds" multiple :placeholder="$t('member.please_choose_member')" class="select-width">
|
||||
<el-option
|
||||
v-for="item in memberForm.userList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
<span class="ws-member-name">{{ item.name }}</span>
|
||||
<span class="ws-member-email">{{ item.email }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.role')" prop="roleIds">
|
||||
<el-select v-model="memberForm.roleIds" multiple :placeholder="$t('role.please_choose_role')" class="select-width">
|
||||
<el-option
|
||||
v-for="item in memberForm.roles"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm('form')" size="medium">{{$t('commons.save')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- update workspace member dialog -->
|
||||
<el-dialog :title="$t('member.modify')" :visible.sync="updateMemberVisible" width="30%" :destroy-on-close="true" @close="closeFunc">
|
||||
<el-form :model="memberForm" label-position="left" label-width="100px" size="small" ref="updateUserForm">
|
||||
<el-form-item label="ID" prop="id">
|
||||
<el-input v-model="memberForm.id" autocomplete="off" :disabled="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.username')" prop="name">
|
||||
<el-input v-model="memberForm.name" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.email')" prop="email">
|
||||
<el-input v-model="memberForm.email" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.phone')" prop="phone">
|
||||
<el-input v-model="memberForm.phone" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.role')" prop="roleIds">
|
||||
<el-select v-model="memberForm.roleIds" multiple :placeholder="$t('role.please_choose_role')" class="select-width">
|
||||
<el-option
|
||||
v-for="item in memberForm.allroles"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="updateOrgMember('updateUserForm')" size="medium">{{$t('commons.save')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -132,6 +251,17 @@
|
||||
this.result = this.$post(url, {name: this.condition}, response => {
|
||||
let data = response.data;
|
||||
this.items = data.listObject;
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
let param = {
|
||||
name: '',
|
||||
workspaceId: this.items[i].id
|
||||
}
|
||||
let path = "user/member/list/all";
|
||||
this.$post(path, param, res => {
|
||||
let member = res.data;
|
||||
this.$set(this.items[i], "memberSize", member.length);
|
||||
})
|
||||
}
|
||||
this.total = data.itemCount;
|
||||
});
|
||||
} else {
|
||||
@ -149,18 +279,144 @@
|
||||
this.currentPage = current;
|
||||
this.list();
|
||||
},
|
||||
addMember() {
|
||||
this.addMemberVisible = true;
|
||||
this.memberForm = {};
|
||||
this.result = this.$get('/user/list/', response => {
|
||||
this.$set(this.memberForm, "userList", response.data);
|
||||
});
|
||||
this.result = this.$get('/role/list/test', response => {
|
||||
this.$set(this.memberForm, "roles", response.data);
|
||||
})
|
||||
},
|
||||
cellClick(row){
|
||||
// 保存当前点击的组织信息到currentRow
|
||||
this.currentWorkspaceRow = row;
|
||||
this.memberVisible = true;
|
||||
let param = {
|
||||
name: '',
|
||||
workspaceId: row.id
|
||||
};
|
||||
let path = "/user/member/list";
|
||||
this.result = this.$post(this.buildPagePath(path), param, res => {
|
||||
let data = res.data;
|
||||
this.memberLineData = data.listObject;
|
||||
let url = "/userrole/list/ws/" + row.id;
|
||||
// 填充角色信息
|
||||
for (let i = 0; i < this.memberLineData.length; i++) {
|
||||
this.$get(url + "/" + this.memberLineData[i].id, response => {
|
||||
let roles = response.data;
|
||||
this.$set(this.memberLineData[i], "roles", roles);
|
||||
})
|
||||
}
|
||||
this.memberTotal = data.itemCount;
|
||||
});
|
||||
},
|
||||
closeFunc() {
|
||||
this.form = {};
|
||||
},
|
||||
closeMemberFunc() {
|
||||
this.memberLineData = [];
|
||||
this.list();
|
||||
},
|
||||
handleMemberSizeChange(size) {
|
||||
this.pageMemberSize = size;
|
||||
this.cellClick(this.currentWorkspaceRow);
|
||||
},
|
||||
handleMemberCurrentChange(current) {
|
||||
this.currentMemberPage = current;
|
||||
this.cellClick(this.currentWorkspaceRow);
|
||||
},
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
let param = {
|
||||
userIds: this.memberForm.userIds,
|
||||
roleIds: this.memberForm.roleIds,
|
||||
workspaceId: this.currentWorkspaceRow.id
|
||||
};
|
||||
this.result = this.$post("user/member/add", param,() => {
|
||||
this.cellClick(this.currentWorkspaceRow);
|
||||
this.addMemberVisible = false;
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
editMember(row) {
|
||||
this.updateMemberVisible = true;
|
||||
this.memberForm = row;
|
||||
let roleIds = this.memberForm.roles.map(r => r.id);
|
||||
this.result = this.$get('/role/list/test', response => {
|
||||
this.$set(this.memberForm, "allroles", response.data);
|
||||
})
|
||||
// 编辑时填充角色信息
|
||||
this.$set(this.memberForm, 'roleIds', roleIds);
|
||||
},
|
||||
delMember(row) {
|
||||
this.$confirm(this.$t('member.delete_confirm'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
cancelButtonText: this.$t('commons.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.result = this.$get('/user/member/delete/' + this.currentWorkspaceRow.id + '/' + row.id, () => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('commons.delete_success')
|
||||
});
|
||||
this.cellClick(this.currentWorkspaceRow);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: this.$t('commons.delete_cancel')
|
||||
});
|
||||
});
|
||||
},
|
||||
updateOrgMember() {
|
||||
let param = {
|
||||
id: this.memberForm.id,
|
||||
name: this.memberForm.name,
|
||||
email: this.memberForm.email,
|
||||
phone: this.memberForm.phone,
|
||||
roleIds: this.memberForm.roleIds,
|
||||
workspaceId: this.currentWorkspaceRow.id
|
||||
}
|
||||
this.result = this.$post("/workspace/member/update", param,() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('commons.modify_success')
|
||||
});
|
||||
this.updateMemberVisible = false;
|
||||
this.cellClick(this.currentWorkspaceRow);
|
||||
});
|
||||
},
|
||||
buildPagePath(path) {
|
||||
return path + "/" + this.currentPage + "/" + this.pageSize;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
loading: false,
|
||||
createVisible: false,
|
||||
btnTips: "添加工作空间",
|
||||
btnTips: this.$t('workspace.add'),
|
||||
addTips: this.$t('member.create'),
|
||||
condition: "",
|
||||
items: [],
|
||||
currentPage: 1,
|
||||
pageSize: 5,
|
||||
total: 0,
|
||||
updateVisible: false,
|
||||
memberVisible: false,
|
||||
addMemberVisible: false,
|
||||
updateMemberVisible: false,
|
||||
currentMemberPage: 1,
|
||||
pageMemberSize: 5,
|
||||
memberTotal: 0,
|
||||
memberLineData: [],
|
||||
memberForm: {},
|
||||
form: {
|
||||
// name: "",
|
||||
// description: ""
|
||||
@ -171,6 +427,15 @@
|
||||
{min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
wsMemberRule: {
|
||||
userIds: [
|
||||
{required: true, message: this.$t('member.please_choose_member'), trigger: ['blur']}
|
||||
],
|
||||
roleIds: [
|
||||
{required: true, message: this.$t('role.please_choose_role'), trigger: ['blur']}
|
||||
]
|
||||
},
|
||||
currentWorkspaceRow: {},
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -194,5 +459,29 @@
|
||||
margin-right: -9px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.member-size {
|
||||
text-decoration:underline;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.member-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.select-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ws-member-name {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ws-member-email {
|
||||
float: right;
|
||||
color: #8492a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user