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

feat(系统设置): 用户组静态页面

This commit is contained in:
RubyLiu 2023-06-12 15:31:28 +08:00 committed by rubylliu
parent e8fa426f91
commit 3177886653
10 changed files with 241 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/components.d.ts vendored
View File

@ -5,57 +5,11 @@
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'
export {}
export {};
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AAffix: typeof import('@arco-design/web-vue')['Affix']
AAlert: typeof import('@arco-design/web-vue')['Alert']
AAvatar: typeof import('@arco-design/web-vue')['Avatar']
ABadge: typeof import('@arco-design/web-vue')['Badge']
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
AButton: typeof import('@arco-design/web-vue')['Button']
ACard: typeof import('@arco-design/web-vue')['Card']
ACardMeta: typeof import('@arco-design/web-vue')['CardMeta']
ACol: typeof import('@arco-design/web-vue')['Col']
AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
ADivider: typeof import('@arco-design/web-vue')['Divider']
ADoption: typeof import('@arco-design/web-vue')['Doption']
ADrawer: typeof import('@arco-design/web-vue')['Drawer']
ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
ALayout: typeof import('@arco-design/web-vue')['Layout']
ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter']
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
ALink: typeof import('@arco-design/web-vue')['Link']
AList: typeof import('@arco-design/web-vue')['List']
AListItem: typeof import('@arco-design/web-vue')['ListItem']
AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
AMenu: typeof import('@arco-design/web-vue')['Menu']
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
AModal: typeof import('@arco-design/web-vue')['Modal']
AOption: typeof import('@arco-design/web-vue')['Option']
APagination: typeof import('@arco-design/web-vue')['Pagination']
APopover: typeof import('@arco-design/web-vue')['Popover']
AResult: typeof import('@arco-design/web-vue')['Result']
ARow: typeof import('@arco-design/web-vue')['Row']
ASelect: typeof import('@arco-design/web-vue')['Select']
ASkeleton: typeof import('@arco-design/web-vue')['Skeleton']
ASkeletonLine: typeof import('@arco-design/web-vue')['SkeletonLine']
ASkeletonShape: typeof import('@arco-design/web-vue')['SkeletonShape']
ASpace: typeof import('@arco-design/web-vue')['Space']
ASpin: typeof import('@arco-design/web-vue')['Spin']
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
ASwitch: typeof import('@arco-design/web-vue')['Switch']
ATabPane: typeof import('@arco-design/web-vue')['TabPane']
ATabs: typeof import('@arco-design/web-vue')['Tabs']
ATag: typeof import('@arco-design/web-vue')['Tag']
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
ATypographyText: typeof import('@arco-design/web-vue')['TypographyText']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'];
}
}

6
frontend/src/api/modules/api-test/index.ts
View File

@ -1,16 +1,16 @@
import MSR from '@/api/http/index';
import { GetApiTestList, GetApiTestListUrl } from '@/api/requrls/api-test';
import { QueryParams } from '@/models/common';
import { ApiTestListI } from '@/models/api-test';
import { CommonList } from '@/models/api-test';
export function getTableList(params: QueryParams) {
const { current, pageSize, sort, filter, keyword } = params;
return MSR.post<ApiTestListI>({
return MSR.post<CommonList>({
url: GetApiTestList,
data: { current, pageSize, sort, filter, keyword, projectId: 'test-project-id' },
});
}
export function getlist() {
return MSR.get<ApiTestListI>({ url: GetApiTestListUrl });
return MSR.get<CommonList>({ url: GetApiTestListUrl });
}

75
frontend/src/components/bussiness/usergroup/index.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="type-list">
<a-input-search v-model="searchKey" @press-enter="searchData" />
<a-tree :data="treeData">
<template #title="nodeData">
<div>{{ nodeData }}</div>
</template>
</a-tree>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TreeNodeData } from '@arco-design/web-vue';
const originTreeData: TreeNodeData[] = [
{
title: 'Trunk 0-0',
key: '0-0',
children: [
{
title: 'Branch 0-0-1',
key: '0-0-1',
children: [
{
title: 'Leaf 0-0-1-1',
key: '0-0-1-1',
},
{
title: 'Leaf 0-0-1-2',
key: '0-0-1-2',
},
],
},
],
},
{
title: 'Trunk 0-1',
key: '0-1',
children: [
{
title: 'Branch 0-1-1',
key: '0-1-1',
children: [
{
title: 'Leaf 0-1-1-0',
key: '0-1-1-0',
},
],
},
{
title: 'Branch 0-1-2',
key: '0-1-2',
children: [
{
title: 'Leaf 0-1-2-0',
key: '0-1-2-0',
},
],
},
],
},
];
const treeData = ref(originTreeData);
const searchKey = ref('');
function searchData(keyword: string) {
// eslint-disable-next-line no-console
console.log(keyword);
}
</script>
<style lang="less" scoped></style>

8
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -33,7 +33,7 @@
// eslint-disable no-console
import { useSlots, useAttrs, computed, ref, onMounted } from 'vue';
import selectAll from './select-all.vue';
import { MsTabelProps, SelectAllEnum, MsPaginationI } from './type';
import { MsTableProps, SelectAllEnum, MsPaginationI } from './type';
import BatchAction from './batchAction.vue';
const batchleft = ref('10px');
@ -61,11 +61,11 @@
const slots = useSlots();
const attrs = useAttrs();
const { rowKey, pagination }: Partial<MsTabelProps> = attrs;
const { rowKey, pagination }: Partial<MsTableProps> = attrs;
// 全选按钮-总条数
const selectTotal = computed(() => {
const { data }: Partial<MsTabelProps> = attrs;
const { data }: Partial<MsTableProps> = attrs;
if (pagination) {
const { pageSize } = pagination as MsPaginationI;
return pageSize;
@ -82,7 +82,7 @@
// 全选change事件
const handleChange = (v: string) => {
const { data }: Partial<MsTabelProps> = attrs;
const { data }: Partial<MsTableProps> = attrs;
isSelectAll.value = v === SelectAllEnum.ALL;
if (v === SelectAllEnum.NONE) {
selectionChange([], true);

2
frontend/src/components/pure/ms-table/type.ts
View File

@ -8,7 +8,7 @@ export interface MsPaginationI {
}
// 表格属性
export interface MsTabelProps {
export interface MsTableProps {
// 表格列 - 详见 TableColumn https://arco.design/web-vue/components/table-column;
columns: TableColumnData[];
// 表格数据 - 详见 TableData https://arco.design/web-vue/components/table-data;

23
frontend/src/components/pure/ms-table/useTable.ts
View File

@ -2,8 +2,8 @@
// hook/table-props.ts
import { ref } from 'vue';
import { MsTabelProps, MsTableData, MsTableColumn } from './type';
import { ApiTestListI } from '@/models/api-test';
import { MsTableProps, MsTableData, MsTableColumn } from './type';
import { CommonList } from '@/models/api-test';
import { TableData } from '@arco-design/web-vue';
import dayjs from 'dayjs';
import { QueryParams } from '@/models/common';
@ -16,16 +16,16 @@ export interface Pagination {
showPageSize: boolean;
}
type GetListFunc = (v: QueryParams) => Promise<ApiTestListI>;
type GetListFunc = (v: QueryParams) => Promise<CommonList>;
const appStore = useAppStore();
export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<MsTabelProps>) {
export default function useTableProps(loadListFunc: GetListFunc, props?: Partial<MsTableProps>) {
// 行选择
const rowSelection = {
type: 'checkbox',
showCheckedAll: false,
};
const defaultProps: MsTabelProps = {
const defaultProps: MsTableProps = {
bordered: true,
showPagination: true,
size: 'small',
@ -109,7 +109,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
};
// 单独设置默认属性
const setProps = (params: Partial<MsTabelProps>) => {
const setProps = (params: Partial<MsTableProps>) => {
const tmpProps = propsRes.value;
Object.keys(params).forEach((key) => {
tmpProps[key] = params[key];
@ -119,7 +119,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
// 设置请求参数，如果出了分页参数还有搜索参数，在模板页面调用此方法，可以加入参数
const loadListParams = ref<object>({});
const setLoadListParams = (params?: object) => {
const setLoadPaListrams = (params?: object) => {
loadListParams.value = params || {};
};
@ -131,6 +131,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
const loadList = async () => {
const { current, pageSize } = propsRes.value.pagination as Pagination;
setLoading(true);
try {
const data = await loadListFunc({
current,
pageSize,
@ -149,8 +150,12 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
return item;
});
setPagination({ current: data.current, total: data.total });
setLoading(false);
return data;
} catch (err) {
// TODO 表格异常放到solt的empty
} finally {
setLoading(false);
}
};
// 事件触发组
@ -204,7 +209,7 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
setLoading,
loadList,
setPagination,
setLoadListParams,
setLoadPaListrams,
setKeyword,
};
}

1
frontend/src/locale/zh-CN/index.ts
View File

@ -9,6 +9,7 @@ import localeApiTest from '@/views/api-test/locale/zh-CN';
export default {
message: {
'menu.apiTest': '接口测试',
'menu.settings': '系统设置',
'menu.settings.user': '用户',
'menu.settings.organization': '组织',

2
frontend/src/models/api-test.ts
View File

@ -19,7 +19,7 @@ export interface SortItem {
export interface FilterItem {
[key: string]: any;
}
export interface ApiTestListI {
export interface CommonList {
[x: string]: any;
pageSize: number;
total: number;

10
frontend/src/router/routes/modules/system.ts
View File

@ -21,6 +21,16 @@ const ApiTest: AppRouteRecordRaw = {
icon: 'icon-computer',
},
},
{
path: 'usergroup',
name: 'usergroup',
component: () => import('@/views/system/user/index.vue'),
meta: {
locale: 'menu.settings.user',
roles: ['*'],
icon: 'icon-computer',
},
},
],
};

110
frontend/src/views/system/usergroup/index.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<div class="h-[100vh] bg-white px-[20px] py-[16px] pb-0">
<div class="left h-[730px] w-[300px]"> </div>
<div class="right"></div>
<ms-base-table v-bind="propsRes" v-on="propsEvent"> </ms-base-table>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { MsTableColumn } from '@/components/pure/ms-table/type';
import useTable from '@/components/pure/ms-table/useTable';
import { getTableList } from '@/api/modules/api-test/index';
const columns: MsTableColumn = [
{
title: 'ID',
dataIndex: 'num',
filterable: {
filters: [
{
text: '> 20000',
value: '20000',
},
{
text: '> 30000',
value: '30000',
},
],
filter: (value, record) => record.salary > value,
multiple: true,
},
},
{
title: '接口名称',
dataIndex: 'name',
width: 200,
},
{
title: '请求类型',
dataIndex: 'method',
},
{
title: '责任人',
dataIndex: 'username',
},
{
title: '路径',
dataIndex: 'path',
},
{
title: '标签',
dataIndex: 'tags',
},
{
title: '更新时间',
dataIndex: 'updateTime',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '用例数',
dataIndex: 'caseTotal',
},
{
title: '用例状态',
dataIndex: 'caseStatus',
},
{
title: '用例通过率',
dataIndex: 'casePassingRate',
},
{
title: '接口状态',
dataIndex: 'status',
},
{
title: '创建时间',
slotName: 'createTime',
width: 200,
},
{
title: '描述',
dataIndex: 'description',
},
{
title: '操作',
slotName: 'action',
fixed: 'right',
width: 200,
},
];
const { propsRes, propsEvent, loadList } = useTable(getTableList, {
columns,
scroll: { y: 750, x: 2000 },
selectable: true,
});
const fetchData = async () => {
await loadList();
};
onMounted(() => {
fetchData();
});
</script>
<style lang="scss" scoped></style>