feat(系统设置): 用户组静态页面
This commit is contained in:
parent
e8fa426f91
commit
3177886653
|
@ -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'];
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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': '组织',
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue