opensource/rustfs-console
3
0
Fork 0
mirror of https://github.com/rustfs/console.git synced 2026-09-19 01:47:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat : user and group

Browse Source
This commit is contained in:
cxymds
2024-12-17 19:03:04 +08:00
parent 6591ee2675
commit f1e9bfefb4
7 changed files with 207 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
composables/useGroups.ts
+56
View File
@@ -0,0 +1,56 @@
const { $api } = useNuxtApp();
export const useGroups = () => {
/**
* Get all groups
*
* @returns
*/
const groupList = async () => {
return await $api.get('/groups');
};
/**
* get group info
* @param name
* @returns
*/
const getGroupInfo = async (name: string) => {
return await $api.get(`/group/${encodeURIComponent(name)}`);
};
/**
* add group
* @param data
* @returns
*/
const groupAdd = async (data: any) => {
return await $api.post('/groups', data);
};
/**
* delete group
* @param name
* @returns
*/
const groupDelete = async (name: string) => {
return await $api.delete(`/group/${encodeURIComponent(name)}`, {});
};
/**
* update group
* @param name
* @param data
* @returns
*/
const groupUpdate = async (name: string, data: any) => {
return await $api.put(`/group/${encodeURIComponent(name)}`, data);
};
return {
groupList,
getGroupInfo,
groupAdd,
groupDelete,
groupUpdate,
};
};
composables/usePolicies.ts
+57
View File
@@ -0,0 +1,57 @@
const { $api } = useNuxtApp();
export const usePolicies = () => {
/**
* 获取策略列表
* @returns
*/
const ListPolicies = async () => {
return await $api.get('/policies');
};
/**
* 添加策略
* @param data
* @returns
*/
const addPolicy = async (data: any) => {
return await $api.post('/policies', data);
};
/**
* 获取策略详情
* @param policyName
* @returns
*/
const getPolicyInfo = async (policyName: string) => {
return await $api.get(`/policy/${encodeURIComponent(policyName)}`);
};
/**
* 获取策略用户列表
* @param policyName
* @returns
*/
const listUsersForPolicy = async (policyName: string) => {
return await $api.get(`/policy/${encodeURIComponent(policyName)}/users`);
};
/**
* 获取策略组列表
* @param policyName
* @returns
*/
const listGroupsForPolicy = async (policyName: string) => {
return await $api.get(`/policy/${encodeURIComponent(policyName)}/groups`);
};
/**
* 删除策略
* @param policyName
* @returns
*/
const deletePolicy = async (policyName: string) => {
return await $api.delete(`/policy/${encodeURIComponent(policyName)}`, {});
};
return { ListPolicies, getPolicyInfo, addPolicy, deletePolicy, listUsersForPolicy, listGroupsForPolicy };
};
composables/useUsers.ts
+7
View File
@@ -0,0 +1,7 @@
const { $api } = useNuxtApp();
export const useUsers = () => {
const ListUsers = async () => {
return await $api.get('/users');
};
return { ListUsers };
};
pages/users/components/newGroup.vue
+22 -4
View File
@@ -7,6 +7,8 @@ interface Props {
const { visible } = defineProps<Props>();
const message = useMessage();
const { $api } = useNuxtApp();
const group = useGroups();
const user = useUsers();
const emit = defineEmits<Emits>();
const defaultFormModal = {
@@ -20,7 +22,20 @@ interface Emits {
(e: 'search'): void;
}
// 用户列表
const users = ref([]);
const getUserList = async () => {
// const res = await user.ListUsers();
const res = await $api.get('/users');
users.value = res.users.map((item: any) => {
return {
label: item.accessKey,
value: item.accessKey,
};
});
};
getUserList();
const modalVisible = computed({
get() {
@@ -35,10 +50,13 @@ function closeModal(visible = false) {
}
async function submitForm() {
if (formModel.value.group.trim() === '') {
message.error('请输入用户组名称');
return;
}
try {
const res = await $api.post('/group', {
body: formModel.value,
});
const res = await group.groupAdd({ ...formModel.value });
message.success('添加成功');
closeModal();
emit('search');
@@ -61,7 +79,7 @@ async function submitForm() {
}">
<n-form label-placement="left" :model="formModel" label-align="right" :label-width="130">
<n-grid :cols="24" :x-gap="18">
<n-form-item-grid-item :span="24" label="名称" path="group">
<n-form-item-grid-item :span="24" label="名称" path="group" required>
<n-input v-model:value="formModel.group" />
</n-form-item-grid-item>
<n-form-item-grid-item :span="24" label="用户" path="members">
pages/users/index.vue
+1 -1
View File
@@ -6,7 +6,7 @@
</template>
</page-header>
<page-content>
<n-tabs type="card" :size="size">
<n-tabs type="card">
<n-tab-pane name="users" tab="用户">
<userTab></userTab>
</n-tab-pane>
pages/users/tabs/groupTab.vue
+39 -6
View File
@@ -31,18 +31,35 @@
</n-flex>
</n-form>
</n-card>
<n-data-table ref="tableRef" :columns="columns" :data="listData" :pagination="false" :bordered="false" max-height="calc(100vh - 320px)" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
<n-data-table
ref="tableRef"
:columns="columns"
:data="listData"
:pagination="false"
:bordered="false"
max-height="calc(100vh - 320px)"
:row-key="rowKey"
@update:checked-row-keys="handleCheck" />
<newGroup v-model:visible="newItemVisible" @search="getDataList" ref="newItemRef"></newGroup>
</div>
</template>
<script setup lang="ts">
import { type DataTableColumns, type DataTableInst, type DataTableRowKey, NButton, NPopconfirm, NSpace } from 'naive-ui';
import {
type DataTableColumns,
type DataTableInst,
type DataTableRowKey,
NButton,
NPopconfirm,
NSpace,
} from 'naive-ui';
import { Icon } from '#components';
// import { ChangePassword, EditItem, NewItem } from './components';
import { newGroup } from '../components';
const { $api } = useNuxtApp();
const dialog = useDialog();
const message = useMessage();
const group = useGroups();
const searchForm = reactive({
name: '',
@@ -66,7 +83,7 @@ const columns: DataTableColumns<RowData> = [
{
title: '操作',
key: 'actions',
width: 180,
width: 320,
render: (row: any) => {
return h(
NSpace,
@@ -84,7 +101,20 @@ const columns: DataTableColumns<RowData> = [
onClick: () => openEditItem(row),
},
{
default: () => '编辑',
default: () => '分配策略',
icon: () => h(Icon, { name: 'ri:edit-2-line' }),
}
),
h(
NButton,
{
type: 'info',
size: 'small',
secondary: true,
onClick: () => openEditItem(row),
},
{
default: () => '成员管理',
icon: () => h(Icon, { name: 'ri:edit-2-line' }),
}
),
@@ -127,6 +157,7 @@ onMounted(() => {
// 获取数据
const getDataList = async () => {
try {
// const res = await group.groupList();
const res = await $api.get('/groups');
listData.value =
res.groups.map((item: string) => {
@@ -159,6 +190,7 @@ function openEditItem(row: any) {
/** ***********************************删除 */
async function deleteItem(row: any) {
try {
// const res = await group.groupDelete(row.name);
const res = await $api.delete(`/group/${encodeURIComponent(row.name)}`, {});
message.success('删除成功');
getDataList();
@@ -189,7 +221,8 @@ function deleteByList() {
return;
}
checkedKeys.value.forEach(async (element: any) => {
const res = await $api.delete(`/group/${encodeURIComponent(element)}`, {});
// const res = await group.groupDelete(element);
const res = $api.delete(`/group/${encodeURIComponent(element)}`, {});
});
getDataList();
pages/users/tabs/userTab.vue
+25 -16
View File
@@ -31,24 +31,40 @@
</n-flex>
</n-form>
</n-card>
<n-data-table ref="tableRef" :columns="columns" :data="listData" :pagination="false" :bordered="false" max-height="calc(100vh - 320px)" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
<n-data-table
ref="tableRef"
:columns="columns"
:data="listData"
:pagination="false"
:bordered="false"
max-height="calc(100vh - 320px)"
:row-key="rowKey"
@update:checked-row-keys="handleCheck" />
</div>
</template>
<script setup lang="ts">
import { type DataTableColumns, type DataTableInst, type DataTableRowKey, NButton, NPopconfirm, NSpace } from 'naive-ui';
import {
type DataTableColumns,
type DataTableInst,
type DataTableRowKey,
NButton,
NPopconfirm,
NSpace,
} from 'naive-ui';
import { Icon } from '#components';
// import { ChangePassword, EditItem, NewItem } from './components';
const { $api } = useNuxtApp();
const user = useUsers();
const dialog = useDialog();
const message = useMessage();
const searchForm = reactive({
name: '',
accessKey: '',
});
interface RowData {
name: string;
accessKey: string;
}
const columns: DataTableColumns<RowData> = [
@@ -58,7 +74,7 @@ const columns: DataTableColumns<RowData> = [
{
title: '名称',
align: 'left',
key: 'name',
key: 'accessKey',
},
{
title: '操作',
@@ -113,7 +129,7 @@ const tableRef = ref<DataTableInst>();
function filterName(value: string) {
tableRef.value &&
tableRef.value.filter({
name: [value],
accessKey: [value],
});
}
const listData = ref<any[]>([]);
@@ -124,8 +140,9 @@ onMounted(() => {
// 获取数据
const getDataList = async () => {
try {
const res = await $api.get('service-accounts');
listData.value = res || [];
const res = await $api.get('/users');
// const res = await user.ListUsers();
listData.value = res.users || [];
} catch (error) {
message.error('获取数据失败');
}
@@ -147,14 +164,6 @@ const editItemRef = ref();
function openEditItem(row: any) {
editItemRef.value.openDialog(row.accessKey);
}
/** **********************************修改密码 */
const changePasswordModalRef = ref();
const changePasswordVisible = ref(false);
function changePassword() {
changePasswordVisible.value = true;
}
/** ***********************************删除 */
async function deleteItem(row: any) {
try {