Skip to content

Commit

Permalink
fix: admin42 用户管理 / 用户列表页面体验优化 (#1506)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lyzqs
lyzqs authored Aug 2, 2024
1 parent 0467b54 commit 9d8ccab
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 89 deletions.
2 changes: 1 addition & 1 deletion apiserver/paasng/paasng/plat_admin/admin42/serializers/accountmgr.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class UserProfileUpdateFormSLZ(serializers.Serializer):


class UserProfileQueryParamSLZ(serializers.Serializer):
hide_regular_users = serializers.BooleanField(default=False, required=False)
display_regular_users = serializers.BooleanField(default=False, required=False)
filter_key = serializers.CharField(default=None, required=False, allow_null=True)


Expand Down
211 changes: 133 additions & 78 deletions ...rver/paasng/paasng/plat_admin/admin42/templates/admin42/accountmgr/user_profile_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,35 @@

{% block main_content %}
<div id="app-memberships-wrapper">
<bk-dialog v-model="form.visible" theme="primary" width="720" :ok-text="'添加用户'" :confirm-fn="bulkCreate">
<bk-dialog header-position="left" v-model="form.visible" theme="primary" width="550" :ok-text="'确定'" :confirm-fn="form.type === 'create'? bulkCreate : singleEdit">
<div slot="header">$[ form.type === 'create'?'添加':'编辑' ]用户</div>
<bk-form>
<bk-form-item label="用户名">
<user-selector style="min-width: 400px;" v-model="form.usernameList" v-if="form.provider_type === '2' || form.provider_type === '3'"></user-selector>
<bk-tag-input style="min-width: 400px;" v-model="form.usernameList" allow-create v-else></bk-tag-input>
<bk-input v-if="form.type === 'edit'" style="width: 250px;" v-model="form.usernameList" :readonly="true"></bk-input>
<user-selector style="width: 250px;" v-model="form.usernameList" v-else-if="form.provider_type === '2' || form.provider_type === '3'"></user-selector>
<bk-tag-input style="width: 250px;" v-model="form.usernameList" allow-create v-else></bk-tag-input>
</bk-form-item>
<bk-form-item label="角色">
<bk-select v-model="form.role" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom" searchable>
<bk-option v-for="(value, key) in SITE_ROLE"
<bk-form-item label="用户类型">
<bk-input v-if="form.type === 'edit'" style="width: 250px;" :value="getTypeName(form.provider_type)" :readonly="true"></bk-input>
<bk-select v-else v-model="form.provider_type" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom" searchable>
<bk-option v-for="(value, key) in PROVIDER_TYPE"
:key="key"
:id="key"
:name="value">
</bk-option>
</bk-select>
</bk-form-item>
<bk-form-item label="用户类型">
<bk-select v-model="form.provider_type" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom" searchable>
<bk-option v-for="(value, key) in PROVIDER_TYPE"
<bk-form-item label="角色">
<bk-select v-model="form.role" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom" searchable>
<bk-option v-for="(value, key) in SITE_ROLE"
:key="key"
:id="key"
:name="value">
</bk-option>
</bk-select>
</bk-form-item>
<bk-form-item label="已开启的 region" ext-cls="select-custom" ext-popover-cls="select-popover-custom" >
<bk-select multiple display-tag v-model="form.enable_regions">
<bk-select multiple display-tag style="width: 250px;" v-model="form.enable_regions">
<bk-option v-for="region in allRegionList"
:key="region"
:id="region"
Expand All @@ -41,22 +44,21 @@
</bk-dialog>

<div class="toolbar">
<bk-button theme="default" title="添加用户" icon="plus" class="mr10" @click="form.visible = true">添加用户</bk-button>
<bk-button theme="primary" title="添加用户" icon="plus" class="mr10" @click="showAddDialog">添加用户</bk-button>
<div class="toolbar">
<bk-checkbox v-model="hideRegularUsers" @change="fetchData">隐藏所有普通用户</bk-checkbox>
<bk-checkbox v-model="displayRegularUsers" @change="refreshPage">显示所有普通用户</bk-checkbox>
<div class="paas-search">
<bk-input
placeholder="输入用户名，按Enter搜索"
:clearable="true"
:right-icon="'bk-icon icon-search'"
v-model="filterKey"
@enter="fetchData">
@enter="refreshPage">
</bk-input>
</div>
</div>
</div>
<bk-table style="margin-top: 15px;"
:data="userProfileList">
<bk-table style="margin-top: 15px;" :data="userProfileList">
<bk-table-column label="用户类型" prop="user.provider_type" width="100">
<template slot-scope="props">
<span>$[ getTypeName(props.row.user.provider_type) ]</span>
Expand All @@ -72,33 +74,22 @@
</bk-table-column>
<bk-table-column label="角色">
<template slot-scope="props">
<bk-select v-model="props.row.role" style="width: 250px;" ext-cls="select-custom" ext-popover-cls="select-popover-custom" @selected="handleChange(props.row)">
<bk-option v-for="(value, key) in SITE_ROLE"
:key="key"
:id="key"
:name="value">
</bk-option>
</bk-select>
<span>$[ getRoleName(props.row.role) ]</span>
</template>
</bk-table-column>
<bk-table-column label="已开启的 region">
<template slot-scope="props">
<bk-select multiple display-tag v-model="props.row.enable_regions" @selected="handleChange(props.row)">
<bk-option v-for="region in allRegionList"
:key="region"
:id="region"
:name="region">
</bk-option>
</bk-select>
<bk-tag v-for="region in props.row.enable_regions" :key="region">
$[ region ]
</bk-tag>
</template>
</bk-table-column>
<bk-table-column label="状态">
<bk-table-column label="操作">
<template slot-scope="props">
<button v-if="props.row.role === 5 || props.row.banned" class="btn btn-link" @click="handleSwitcher(props.row)">
<span>恢复访问</span>
</button>
<button v-else class="btn btn-link" @click="handleSwitcher(props.row)">
<span style="color: red;">禁止访问</span>
<button class="btn btn-link" @click="showEditDialog(props.row)">修改</button>
<button class="btn btn-link" @click="handleSwitcher(props.row)">
<span v-if="props.row.role === 5 || props.row.banned">恢复访问</span>
<span v-else style="color: red;">禁止访问</span>
</button>
</template>
</bk-table-column>
Expand All @@ -116,7 +107,6 @@
{% block main_script %}
<script type="text/javascript" charset="utf-8">
var URLRouter = {
list: "{% url 'admin.accountmgr.userprofile.api' %}",
bulk_create: "{% url 'admin.accountmgr.userprofile.api' %}",
update: "{% url 'admin.accountmgr.userprofile.api' %}",
destroy: "{% url 'admin.accountmgr.userprofile.api' %}",
Expand Down Expand Up @@ -158,9 +148,10 @@
return {
loading: false,
loaded: false,
hideRegularUsers: true,
displayRegularUsers: false,
filterKey: '',
form: {
type: '',
usernameList: undefined,
role: 2,
provider_type: '2',
Expand All @@ -170,55 +161,90 @@
userProfileList: userProfileList,
SITE_ROLE,
PROVIDER_TYPE,
pagination,
pagination: pagination,
allRegionList: ALL_REGIONS,
}
},
created: function () {
const urlParams = new URLSearchParams(window.location.search)
if (urlParams.has('display_regular_users')) {
this.displayRegularUsers = urlParams.get('display_regular_users') === 'true'
}
if (urlParams.has('filter_key')) {
this.filterKey = urlParams.get('filter_key')
}
},
methods: {
fetchData: function () {
if (this.loading) {
// 報錯
return
}
this.loading = true
this.loaded = false
this.$http.get(URLRouter.list, {
params: {
hide_regular_users: this.hideRegularUsers,
limit: this.pagination.limit,
offset: (this.pagination.curPage - 1) * this.pagination.limit,
filter_key: this.filterKey,
}
}).then(resp => {
this.userProfileList = resp
this.$bkMessage({message: "数据刷新成功", limit: 1})
this.loaded = true
}).finally(err => {
this.loading = false
})
refreshPage: function () {
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('display_regular_users', this.displayRegularUsers);
urlParams.set('limit', this.pagination.limit);
// 更新页面后回到第一页
urlParams.set('offset', '0');
urlParams.set('filter_key', this.filterKey);
window.location.href = '?' + urlParams.toString();
},

showAddDialog: function () {
this.form.type = 'create'
this.form.visible = true
this.form.usernameList = undefined
this.form.role = 2
this.form.provider_type = '2'
this.form.enable_regions = []
},

showEditDialog: function (row) {
this.form.type = 'edit'
this.form.visible = true
this.form.usernameList = row.user.username
this.form.role = row.role
this.form.provider_type = row.user.provider_type
this.form.enable_regions = row.enable_regions
},

handleSwitcher: function (row) {
if (row.role === 5 || row.banned) {
if (row.user.provider_type === 9) {
row.role = 50
const action = (row.role === 5 || row.banned) ? '恢复访问' : '禁止访问'
const confirmAction = () => {
if (row.role === 5 || row.banned) {
if (row.user.provider_type === 9) {
row.role = 50
} else {
row.role = 2
}
this.handleChange(row)
} else {
row.role = 2
}
this.handleChange(row)
} else {
// 禁止用户访问
this.$http.delete(URLRouter.destroy,
{
params: {
username: row.user.username,
provider_type: row.user.provider_type,
// 禁止用户访问
this.$http.delete(URLRouter.destroy,
{
params: {
username: row.user.username,
provider_type: row.user.provider_type,
}
}
}
).then(() => {
this.fetchData()
})
).then(() => {
this.refreshPage()
})
}
}

this.$bkInfo({
title: `确认要${action}？`,
confirmLoading: true,
theme: 'danger',
confirmFn: async () => {
try {
await confirmAction()
} catch (e) {
this.$bkMessage({
theme: 'error',
message: e.response.data.detail,
})
}
}
})
},

bulkCreate: function () {
if (this.form.enable_regions.length === 0) {
this.$bkMessage({message: "至少设置 1 个 region", limit: 1, theme: 'error'})
Expand All @@ -232,7 +258,36 @@
enable_regions: this.form.enable_regions,
}
).then(() => {
this.fetchData()
this.refreshPage()
})
this.form.visible = false
},
singleEdit: function () {
this.$bkInfo({
title: '确定要修改吗？',
confirmLoading: true,
theme: 'danger',
confirmFn: async () => {
try {
if (this.form.enable_regions.length === 0) {
this.$bkMessage({ message: "至少设置 1 个 region", limit: 1, theme: 'error' })
return
}
await this.$http.put(URLRouter.update, {
username: this.form.usernameList,
provider_type: this.form.provider_type,
role: this.form.role,
enable_regions: this.form.enable_regions,
})
this.refreshPage()
this.form.visible = false
} catch (e) {
this.$bkMessage({
theme: 'error',
message: e.response.data.detail,
})
}
}
})
},
handleChange: function (row) {
Expand All @@ -250,7 +305,7 @@
role: row.role,
enable_regions: row.enable_regions,
}).then(() => {
this.fetchData()
this.refreshPage()
})
},
getRoleName,
Expand Down
4 changes: 1 addition & 3 deletions apiserver/paasng/paasng/plat_admin/admin42/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -410,9 +410,7 @@
# 用户管理-用户列表 API
url(
r"^api/accountmgr/userprofiles/$",
accountmgr.UserProfilesManageViewSet.as_view(
{"get": "list", "post": "bulk_create", "put": "update", "delete": "destroy"}
),
accountmgr.UserProfilesManageViewSet.as_view({"post": "bulk_create", "put": "update", "delete": "destroy"}),
name="admin.accountmgr.userprofile.api",
),
# 用户管理-用户特性管理
Expand Down
2 changes: 1 addition & 1 deletion apiserver/paasng/paasng/plat_admin/admin42/utils/filters.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ def filter_queryset(self, request, queryset, view):
slz = UserProfileQueryParamSLZ(data=request.query_params)
slz.is_valid(raise_exception=True)

if slz.validated_data["hide_regular_users"]:
if not slz.validated_data["display_regular_users"]:
queryset = queryset.exclude(role=SiteRole.USER.value)

if slz.validated_data["filter_key"]:
Expand Down
7 changes: 1 addition & 6 deletions apiserver/paasng/paasng/plat_admin/admin42/views/accountmgr.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

class UserProfilesManageView(GenericTemplateView):
name = "用户列表"
queryset = UserProfile.objects.exclude(role=SiteRole.USER.value).order_by("role", "-created")
queryset = UserProfile.objects.order_by("role", "-created")
serializer_class = accountmgr.UserProfileSLZ
permission_classes = [IsAuthenticated, site_perm_class(SiteAction.MANAGE_PLATFORM)]
template_name = "admin42/accountmgr/user_profile_list.html"
Expand Down Expand Up @@ -92,11 +92,6 @@ def bulk_create(self, request):
results.append(obj)
return Response(self.get_serializer(results, many=True).data)

def list(self, request):
queryset = UserProfile.objects.order_by("role", "-created")
queryset = UserProfileFilterBackend().filter_queryset(request, queryset, self)
return Response(self.get_serializer(self.paginate_queryset(queryset), many=True).data)

def update(self, request):
slz = accountmgr.UserProfileUpdateFormSLZ(
data=dict(
Expand Down

0 comments on commit 9d8ccab

Please sign in to comment.