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

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'];
}
}

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 });
}

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>

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

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;

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,26 +131,31 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
const loadList = async () => {
const { current, pageSize } = propsRes.value.pagination as Pagination;
setLoading(true);
const data = await loadListFunc({
current,
pageSize,
sort: sortItem.value,
filter: filterItem.value,
keyword: keyword.value,
});
const tmpArr = data.list as unknown as MsTableData;
propsRes.value.data = tmpArr.map((item: TableData) => {
if (item.updateTime) {
item.updateTime = dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss');
}
if (item.createTime) {
item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
}
return item;
});
setPagination({ current: data.current, total: data.total });
setLoading(false);
return data;
try {
const data = await loadListFunc({
current,
pageSize,
sort: sortItem.value,
filter: filterItem.value,
keyword: keyword.value,
});
const tmpArr = data.list as unknown as MsTableData;
propsRes.value.data = tmpArr.map((item: TableData) => {
if (item.updateTime) {
item.updateTime = dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss');
}
if (item.createTime) {
item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
}
return item;
});
setPagination({ current: data.current, total: data.total });
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,
};
}

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': '组织',

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;

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',
},
},
],
};

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>